add canvas state

Author: apsinghdev

client/src/App.jsx

@@ -10,7 +10,7 @@ import Canvas from "./components/Canvas";
 import Menu from "./components/Menu";
 import EraserCursor from "./components/EraserCursor";
 import { useRecoilValue, useRecoilState } from "recoil";
-import { eraserState, cursorPosition, canvasColors } from "./atoms";
+import { eraserState, cursorPosition, canvasColors, canvasState } from "./atoms";
 
 function App() {
   const [showMenu, setShowMenu] = useState(false);
@@ -22,6 +22,7 @@ function App() {
   const [isDrawing, setIsDrawing] = useState(false);
   const [penColor, setPenColor] = useState("#000000");
   const canvasColor = useRecoilValue(canvasColors);
+  const [currentCanvas, setCanvas] = useRecoilState(canvasState); 
 
   function toggleMenu() {
     setShowMenu(!showMenu);
@@ -41,7 +42,8 @@ function App() {
   }
 
   useEffect(() => {
-    const canvas = canvasRef.current;
+    setCanvas(canvasRef.current);
+    const canvas = currentCanvas;
     if (canvas) {
       const context = canvas.getContext("2d");
       canvas.width = canvas.getBoundingClientRect().width;
@@ -52,7 +54,8 @@ function App() {
 
   useEffect(() => {
     if (!ctx) return;
-    const canvas = canvasRef.current;
+    setCanvas(canvasRef.current);
+    const canvas = currentCanvas;
     function handleMousemove(e) {
       // if eraseMode is set the position of the eraser cursor
       if (eraserMode) {

client/src/atoms.js

@@ -13,4 +13,9 @@ export const cursorPosition = atom({
 export const canvasColors = atom({
   key: "canvasColor",
   default: "#D2B55B",
-});
+});
+
+export const canvasState = atom({
+  key: 'canvasState',
+  default: ''
+})

client/src/components/Menu.jsx

@@ -3,11 +3,16 @@ import Socials from "./Socials";
 import SponsorBtn from "./SponsorBtn";
 
 function Menu(){
+
+  function clickHandlerPdf(){
+    
+  }
+
     return (
       <div className="w-52 h-71 rounded-xl bg-gradient-to-r from-slate-900 to-slate-700 absolute left-52 top-8 rounded-lg shadow-xl">
         <MenuItem feat="Start Collaboration"></MenuItem>
         <MenuItem feat="Start Chat"></MenuItem>
-        <MenuItem feat="Save as pdf"></MenuItem>
+        <MenuItem feat="Save as pdf" onClick={clickHandlerPdf}></MenuItem>
         <MenuItem feat="Save as png"></MenuItem>
         <SponsorBtn></SponsorBtn>
         <Socials></Socials>