canvas completed, some bugs fixed

app/page.tsx

@@ -1,18 +1,48 @@
 "use client"
 
+import { fabric } from "fabric";
 import LeftSidebar from "@/components/LeftSidebar";
 import Live from "@/components/Live";
 import Navbar from "@/components/Navbar";
 import RightSidebar from "@/components/RightSidebar";
+import { useEffect, useRef } from "react";
+import { handleCanvasMouseDown, handleResize, initializeFabric } from "@/lib/canvas";
 
 export default function Page() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const fabricRef = useRef<fabric.Canvas | null>(null);
+  const isDrawing = useRef(false);
+  const shapeRef = useRef<fabric.Object | null>(null);
+  const selectedShapeRef = useRef<string | null>("rectangle");
+
+  useEffect(() => {
+    const canvas = initializeFabric({
+      canvasRef,
+      fabricRef,
+    });
+
+    canvas.on("mouse:down", (options) => {
+      handleCanvasMouseDown({
+        options,
+        canvas,
+        selectedShapeRef,
+        isDrawing,
+        shapeRef,
+      });
+    });
+
+    window.addEventListener("resize", () => {
+      handleResize({ fabricRef })
+    });
+  }, []);
+
   return (
     <main className="h-screen overflow-hidden">
       <Navbar />
 
       <section className="h-full flex flex-row">
         <LeftSidebar />
-        <Live />
+        <Live canvasRef={canvasRef} />
         <RightSidebar />
       </section>
     </main>

components/Live.tsx

@@ -7,7 +7,11 @@ import ReactionSelector from "./reaction/ReactionButton";
 import FlyingReaction from "./reaction/FlyingReaction";
 import useInterval from "@/hooks/useInterval";
 
-const Live = () => {
+type Props = {
+    canvasRef: React.MutableRefObject<HTMLCanvasElement | null>
+}
+
+const Live = ({ canvasRef }: Props) => {
     const others = useOthers();
     const [{ cursor }, updateMyPresence] = useMyPresence() as any;
 
@@ -118,12 +122,15 @@ const Live = () => {
 
     return (
         <div
+            id="canvas"
             onPointerMove={handlePointerMove}
             onPointerLeave={handlePointerLeave}
             onPointerDown={handlePointerDown}
             onPointerUp={handlePointerUp}
             className="w-full h-screen flex justify-center items-center text-center"
         >
+            <canvas ref={canvasRef} />
+
             {reactions.map((reaction) => (
                 <FlyingReaction
                     key={reaction.timestamp.toString()}

lib/canvas.ts

@@ -419,4 +419,4 @@ export const handleCanvasZoom = ({
 
   options.e.preventDefault();
   options.e.stopPropagation();
-};
+};

next.config.mjs

@@ -1,14 +1,26 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+    webpack: (config) => {
+      config.externals.push({
+        "utf-8-validate": "commonjs utf-8-validate",
+        bufferutil: "commonjs bufferutil",
+        canvas: "commonjs canvas",
+      });
+      // config.infrastructureLogging = { debug: /PackFileCache/ };
+      return config;
+    },
     images: {
-        remotePatterns: [
-            {
-                protocol: "https",
-                hostname: "liveblocks.io",
-                port: ""
-            }
-        ]
-    }
-};
-
-export default nextConfig;
+      remotePatterns: [
+        {
+          protocol: "https",
+          hostname: "liveblocks.io",
+          port: "",
+        },
+      ],
+    },
+    typescript: {
+      ignoreBuildErrors: true,
+    },
+  };
+
+  export default nextConfig;

package.json

@@ -24,9 +24,11 @@
     "uuid": "^9.0.1"
   },
   "devDependencies": {
+    "@types/fabric": "^5.3.7",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/uuid": "^9.0.8",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",

tsconfig.json

@@ -12,15 +12,25 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "forceConsistentCasingInFileNames": true,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "target": "es2018",
+    "typeRoots": ["./types"]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/types/**/*.tsx",
+    "./types/**/*.d.ts"
+  ],
   "exclude": ["node_modules"]
-}
+}