Merge pull request smaranjitghose#1037 from ashuvssut/bug-sketch-cros…

…shair Bug fix sketch page crosshair does not coincide with drawn point
anshika208 · Jun 4, 2021 · 035c984 · 035c984
2 parents 54522cb + e4cb0b3
commit 035c984
Show file tree

Hide file tree

Showing 7 changed files with 550 additions and 525 deletions.
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -1,5 +1,6 @@
 # Contributor Covenant Code of Conduct
 
+
 ## Our Pledge
 
 In the interest of fostering an open and welcoming environment, we as

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
@@ -56,12 +56,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(
@@ -124,8 +124,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) {
@@ -629,6 +629,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----- */}
 			<Draggable>
 				<div
@@ -665,16 +676,7 @@ function Canvas() {
 					<DragIndicator style={{ cursor: "grab" }} fontSize="large" />
 				</div>
 			</Draggable>
-			<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>