Merge pull request #33 from apsinghdev/Feat/implement-eraser-functionality

Feat/implement eraser functionality

Author: apsinghdev

client/package-lock.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.0",
+    "recoil": "^0.7.7",
     "socket.io-client": "^4.7.4"
   },
   "devDependencies": {

client/package.json

@@ -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.css

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef, useState } from "react";
 import "./App.css";
 import { io } from "socket.io-client";
@@ -7,60 +8,76 @@ const socket = io("http://localhost:8000");
 import Sidebar from "./components/Sidebar";
 import Canvas from "./components/Canvas";
 import Menu from "./components/Menu";
+import EraserCursor from "./components/EraserCursor";
+import { useRecoilValue, useRecoilState } from "recoil";
+import { eraserState, cursorPosition } from "./atoms";
 
 function App() {
-
-  const [showMenu, setShowMenu ] = useState(false);
-
-  function toggleMenu(){
+  const [showMenu, setShowMenu] = useState(false);
+  const eraserMode = useRecoilValue(eraserState);
+  const [position, setPosition] = useRecoilState(cursorPosition);
+  const [ctx, setCtx] = useState(null);
+  const [startX, setStartX] = useState(0);
+  const [startY, setStartY] = useState(0);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [penColor, setPenColor] = useState("#000000");
+
+  function toggleMenu() {
     setShowMenu(!showMenu);
   }
 
   const canvasRef = useRef(null);
   const sidebarRef = useRef(null);
-  let color = '#000000'
-  let ctx;
-  let canvas;
   let lineWidth;
 
-  function drawLine(sx, sy, ex, ey, color, lineWidth) {
+  function drawLine(sx, sy, ex, ey, penColor, lineWidth) {
     ctx.moveTo(sx, sy);
     ctx.lineTo(ex, ey);
     ctx.lineCap = "round";
     ctx.lineWidth = lineWidth;
-    ctx.strokeStyle = color;
+    ctx.strokeStyle = penColor;
     ctx.stroke();
   }
 
-  useEffect(() => { 
-    canvas = canvasRef.current;
-    let isDrawing = false;
-    let startX = 0;
-    let startY = 0;
-    ctx = canvas.getContext("2d");
-
-    canvas.width = canvas.getBoundingClientRect().width;
-    canvas.height = canvas.getBoundingClientRect().height;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      const context = canvas.getContext("2d");
+      canvas.width = canvas.getBoundingClientRect().width;
+      canvas.height = canvas.getBoundingClientRect().height;
+      setCtx(context);
+    }
+  }, [canvasRef.current]);
 
+  useEffect(() => {
+    if (!ctx) return;
+    const canvas = canvasRef.current;
     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 );
-      socket.emit("draw", { startX, startY, endX, endY, color, lineWidth });
-      startX = endX;
-      startY = endY;
+      drawLine(startX, startY, endX, endY, penColor);
+      socket.emit("draw", { startX, startY, endX, endY, penColor, lineWidth });
+      setStartX(endX);
+      setStartY(endY);
     }
 
     function handleMousedown(e) {
-      isDrawing = true;
-      startX = e.clientX - canvas.getBoundingClientRect().left;
-      startY = e.clientY - canvas.getBoundingClientRect().top;
+      setIsDrawing(true);
+      let X = e.clientX - canvas.getBoundingClientRect().left;
+      let Y = e.clientY - canvas.getBoundingClientRect().top;
+      setStartX(X);
+      setStartY(Y);
     }
     function handleMouseup() {
-      isDrawing = false;
-      startX = 0;
-      startY = 0;
+      setIsDrawing(false);
+      setStartX(0);
+      setStartY(0);
       ctx.beginPath();
     }
 
@@ -73,7 +90,7 @@ function App() {
       canvas.removeEventListener("mousedown", handleMousedown);
       canvas.removeEventListener("mouseup", handleMouseup);
     };
-  }, [color]);
+  }, [penColor, eraserMode, position, ctx, isDrawing, startX, startY]);
 
   useEffect(() => {
     socket.on("draw", (data) => {
@@ -82,62 +99,66 @@ function App() {
         data.startY,
         data.endX,
         data.endY,
-        data.color,
+        data.penColor,
         data.lineWidth
       );
     });
-  
+
     socket.on("clear", () => {
       clearRect();
     });
-   
-   return () => {
-    socket.off("draw");
-    socket.off("clear");
-   }
-  }, []);
+
+    return () => {
+      socket.off("draw");
+      socket.off("clear");
+    };
+  }, [socket, ctx]);
 
   function clearRect() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (ctx) {
+      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    }
   }
 
-  function clearOnClick(){
+  function clearOnClick() {
     clearRect();
-    socket.emit('clear')
+    socket.emit("clear");
   }
 
   function addStroke(e) {
     if (e.target.id === "penColor") {
       const newColor = e.target.value;
-      color = newColor;
-      ctx.strokeStyle = newColor;
-      
+      setPenColor(newColor);
+      if (ctx) {
+        ctx.strokeStyle = newColor;
+      }
     }
   }
 
   function addLineWidth(e) {
     if (e.target.id === "lineWidth") {
       lineWidth = e.target.value;
-      ctx.lineWidth = lineWidth;
+      if (ctx) {
+        ctx.lineWidth = lineWidth;
+      }
     }
   }
 
   return (
     <div id="container">
       <Sidebar
         addStroke={addStroke}
-
         addLineWidth={addLineWidth}
         clearOnClick={clearOnClick}
         ref={sidebarRef}
         id="clear"
         toggleMenu={toggleMenu}
       ></Sidebar>
       <Canvas canvasRef={canvasRef}></Canvas>
+      {eraserMode && <EraserCursor></EraserCursor>}
       {showMenu && <Menu></Menu>}
     </div>
   );
 }
 
-export default App;
-
+export default App;

client/src/App.jsx

@@ -0,0 +1,11 @@
+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/assets/eraserSvg.svg

@@ -1,12 +1,20 @@
 import eraserImg from "../assets/eraser.png";
+import { useRecoilState } from "recoil";
+import { eraserState } from "../atoms";
 
 function Eraser(){
+const [ eraserMode, setEraserMode ] = useRecoilState(eraserState);
+
+  function clickHandler(){
+    setEraserMode(!eraserMode);
+  }
+
     return (
       <div className="flex p-1 items-center justify-around mt-3">
         <h1 className="font-sans text-lg antialiased font-semibold text-white">
           Eraser :
         </h1>
-        <img src={eraserImg} className="h-8 w-8 rounded cursor-pointer"></img>
+        <img src={eraserImg} className="h-8 w-8 rounded cursor-pointer" onClick={clickHandler} ></img>
       </div>
     );
 }

client/src/atoms.js

@@ -0,0 +1,18 @@
+import eraserSvg from "../assets/eraserSvg.svg";
+import { useRecoilValue } from "recoil";
+import { cursorPosition } from "../atoms";
+
+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;

client/src/components/Eraser.jsx

@@ -2,9 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.jsx'
 import './index.css'
+import { RecoilRoot } from "recoil"
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <RecoilRoot>
+      <App />
+    </RecoilRoot>
+  </React.StrictMode>
+);