canvas revamp (repositioning all elements to fix pen-drawing anomaly

anshika208 · Jun 3, 2021 · c90a199 · c90a199
1 parent 594e160
commit c90a199
Show file tree

Hide file tree

Showing 6 changed files with 548 additions and 525 deletions.
diff --git a/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx b/src/pages/Home/sections/Contact/components/EmojiRating/EmojiRating.jsx
@@ -51,7 +51,7 @@ function EmojiRating() {
 						type="radio"
 						value="3"
 						name="feedback"
-						checked
+						defaultChecked
 					/>
 					<span className={styles.emoji}>&#128079;</span>
 				</label>

diff --git a/src/pages/Sketch/components/Canvas.jsx b/src/pages/Sketch/components/Canvas.jsx
@@ -55,12 +55,12 @@ function Canvas() {
 	const [typeState, setTypeState] = useState(null);
 	const [downPoint, setDownPoint] = useState({ x: "", y: "" });
 	const [mousePosition, setMousePosition] = useState({ x: "0", y: "0" });
-	const [canvasWidth, setCanvasWidth] = useState(window.innerWidth - 50);
-	const [canvasHeight, setCanvasHeight] = useState(window.innerHeight - 100);
+	const [canvasWidth, setCanvasWidth] = useState(window.innerWidth - 51);
+	const [canvasHeight, setCanvasHeight] = useState(window.innerHeight - 78);
 
 	const handleResizeListener = () => {
-		setCanvasWidth(window.innerWidth - 50);
-		setCanvasHeight(window.innerHeight - 100);
+		setCanvasWidth(window.innerWidth - 51);
+		setCanvasHeight(window.innerHeight - 78);
 	};
 
 	const getLastCanvasState = useCallback(
@@ -123,8 +123,8 @@ function Canvas() {
 
 	function relativeCoordinatesForEvent(event) {
 		return {
-			x: event.pageX - 25,
-			y: event.pageY - 82,
+			x: event.pageX - canvasRef.current.offsetLeft,
+			y: event.pageY - canvasRef.current.offsetParent.offsetTop,
 		};
 	}
 	function handleMouseDown(event) {
@@ -628,6 +628,17 @@ function Canvas() {
 				IconsLibrary={<IconsLibrary />}
 			/>
 
+			<canvas
+				ref={canvasRef}
+				className={styles.canvas}
+				width={canvasWidth}
+				height={canvasHeight}
+				onMouseDown={handleMouseDown}
+				onMouseMove={handleMouseMove}
+				onMouseUp={handleMouseUp}
+				onMouseLeave={handleMouseLeave}
+			/>
+
 			{/* ----- Undo & Redo----- */}
 			<div
 				className={`${styles.feature_container} ${styles.download_clear_container}`}
@@ -662,16 +673,6 @@ function Canvas() {
 				</label>
 			</div>
 
-			<canvas
-				ref={canvasRef}
-				width={`${canvasWidth}`}
-				height={`${canvasHeight}`}
-				className={styles.canvas}
-				onMouseDown={handleMouseDown}
-				onMouseMove={handleMouseMove}
-				onMouseUp={handleMouseUp}
-				onMouseLeave={handleMouseLeave}
-			/>
 			<div className={styles.mousePosition}>
 				Mouse Position: (x, y) = ({mousePosition.x}, {mousePosition.y})
 			</div>