make eraser icon move when eraserMode

Author: apsinghdev

client/src/App.css

@@ -7,8 +7,14 @@
     height: 100%;
     display: flex;
     width: 100%;
+    position: relative;
  }
 
+.eraser-cursor{
+  pointer-events: none;
+  z-index: 1000;
+  transform: translate(-50%, -50%);
+}
 
 
 

client/src/App.jsx

@@ -8,13 +8,14 @@ import Sidebar from "./components/Sidebar";
 import Canvas from "./components/Canvas";
 import Menu from "./components/Menu";
 import EraserCursor from "./components/EraserCursor";
-import { useRecoilValue } from "recoil";
-import { eraserState } from "./atoms";
+import { useRecoilValue, useRecoilState } from "recoil";
+import { eraserState, cursorPosition } from "./atoms";
 
 function App() {
 
   const [showMenu, setShowMenu ] = useState(false);
   const eraserMode = useRecoilValue(eraserState);
+  const [position, setPosition] = useRecoilState(cursorPosition);
 
   function toggleMenu(){
     setShowMenu(!showMenu);
@@ -36,21 +37,27 @@ function App() {
     ctx.stroke();
   }
 
-  useEffect(() => { 
+  useEffect(() => {
     canvas = canvasRef.current;
     let isDrawing = false;
     let startX = 0;
     let startY = 0;
-    ctx = canvas.getContext("2d");
 
+    ctx = canvas.getContext("2d");
     canvas.width = canvas.getBoundingClientRect().width;
     canvas.height = canvas.getBoundingClientRect().height;
 
     function handleMousemove(e) {
+
+      // if eraseMode is set the position of the eraser cursor
+      if (eraserMode) {
+        setPosition(() => ({ x: e.clientX, y: e.clientY }));
+      }
+
       if (!isDrawing) return;
       const endX = e.clientX - canvas.getBoundingClientRect().left;
       const endY = e.clientY - canvas.getBoundingClientRect().top;
-      drawLine(startX, startY, endX, endY, color );
+      drawLine(startX, startY, endX, endY, color);
       socket.emit("draw", { startX, startY, endX, endY, color, lineWidth });
       startX = endX;
       startY = endY;
@@ -77,7 +84,7 @@ function App() {
       canvas.removeEventListener("mousedown", handleMousedown);
       canvas.removeEventListener("mouseup", handleMouseup);
     };
-  }, [color]);
+  }, [color, eraserMode, position]);
 
   useEffect(() => {
     socket.on("draw", (data) => {
@@ -130,16 +137,15 @@ function App() {
     <div id="container">
       <Sidebar
         addStroke={addStroke}
-
         addLineWidth={addLineWidth}
         clearOnClick={clearOnClick}
         ref={sidebarRef}
         id="clear"
         toggleMenu={toggleMenu}
       ></Sidebar>
       <Canvas canvasRef={canvasRef}></Canvas>
-      {showMenu && <Menu></Menu>}
       {eraserMode && <EraserCursor></EraserCursor>}
+      {showMenu && <Menu></Menu>}
     </div>
   );
 }

client/src/atoms.js

@@ -3,4 +3,9 @@ import { atom} from "recoil";
 export const eraserState = atom({
     key: "eraser",
     default: false
-});
+});
+
+export const cursorPosition = atom({
+    key: "cursor-position",
+    default: {x: 0, y: 0}
+})

client/src/components/EraserCursor.jsx

@@ -1,11 +1,18 @@
-import eraserSvg from "../assets/eraserSvg.svg"
+import eraserSvg from "../assets/eraserSvg.svg";
+import { useRecoilValue } from "recoil";
+import { cursorPosition } from "../atoms";
 
-function EraserCursor(){
-    return(
-        <div className="h-7 w-7 left-36 transform rotate-90 absolute">
-            <img src={eraserSvg}></img>
-        </div>
-    )
+function EraserCursor() {
+  const position = useRecoilValue(cursorPosition);
+
+  return (
+    <div
+      className="h-7 w-7 left-36 transform rotate-90 absolute eraser-cursor"
+      style={{ left: position.x, top: position.y }}
+    >
+      <img src={eraserSvg}></img>
+    </div>
+  );
 }
 
 export default EraserCursor;