Merge pull request #20 from unknown91tech/added_home_page

added the home page
jahnvisahni31 · Oct 4, 2024 · 0c51b05 · 0c51b05
2 parents 986111a + 85d7fd9
commit 0c51b05
Show file tree

Hide file tree

Showing 13 changed files with 855 additions and 274 deletions.
diff --git a/app/App.tsx b/app/App.tsx
diff --git a/app/globals.css b/app/globals.css
@@ -7,7 +7,10 @@
 * {
   font-family: work sans, sans-serif;
 }
-
+html {
+  overflow: auto;
+  height: auto;
+}
 body {
   overflow: hidden;
 }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -23,13 +23,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${workSans.className} bg-primary-grey-200`}>
+      <body className={`${workSans.className} bg-dark`}>
       <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
         >
-
         <Room>{children}</Room>
         </ThemeProvider>
       </body>

diff --git a/app/provider.tsx b/app/provider.tsx
@@ -1,5 +1,8 @@
 "use client";
+import { NextUIProvider } from "@nextui-org/react";
 import {ThemeProvider as NextThemesProvider} from "next-themes";
 export default function ThemeProvider({children, ...props}) {
-  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+  return <NextThemesProvider {...props}>
+    <NextUIProvider>{children}</NextUIProvider>
+    </NextThemesProvider>;
 }
diff --git a/app/workspace/page.tsx b/app/workspace/page.tsx
@@ -0,0 +1,284 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { fabric } from "fabric";
+import {
+  handleCanvasMouseDown,
+  handleCanvasMouseUp,
+  handleCanvasObjectModified,
+  handleCanvasObjectScaling,
+  handleCanvasSelectionCreated,
+  handleCanvaseMouseMove,
+  handlePathCreated,
+  handleResize,
+  initializeFabric,
+  renderCanvas,
+} from "@/lib/canvas";
+
+import LeftSideBar from "@/components/LeftSideBar";
+import Live from "@/components/Live";
+import Navbar from "@/components/Navbar";
+import RightSideBar from "@/components/RightSideBar";
+import { ActiveElement, Attributes } from "@/types/type";
+import { useMutation, useRedo, useStorage, useUndo } from "@/liveblocks.config";
+import { defaultNavElement } from "@/constants";
+import { handleDelete, handleKeyDown } from "@/lib/key-events";
+import { handleImageUpload } from "@/lib/shapes";
+import { useTheme } from "next-themes";
+
+function Workspace() {
+  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>(null);
+  const activeObjectRef = useRef<fabric.Object | null>(null);
+  const imageInputRef = useRef<HTMLInputElement | null>(null);
+  const isEditingRef = useRef(false);
+
+  const canvasObjects = useStorage((root) => root.canvasObjects);
+  const undo = useUndo();
+  const redo = useRedo();
+
+  const [activeElement, setActiveElement] = useState<ActiveElement>({
+    name: "",
+    value: "",
+    icon: "",
+  });
+  const [elementAttributes, setElementAttributes] = useState<Attributes>({
+    width: "",
+    height: "",
+    fontSize: "",
+    fontFamily: "",
+    fontWeight: "",
+    fill: "#aabbcc",
+    stroke: "#000000",
+  });
+
+
+  const {systemTheme, theme, setTheme} = useTheme();
+  const currentTheme = theme === "dark" ? systemTheme : theme;
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    if(currentTheme==='dark'){
+      setDarkMode(true);
+    }
+    else{
+      setDarkMode(false);
+    }
+  },[currentTheme])
+
+  // console.log(themeCheck)
+  console.log(darkMode)
+
+  const syncShapeInStorage = useMutation(({ storage }, object) => {
+    if (!object) return;
+
+    const { objectId } = object;
+    const shapeData = object.toJSON();
+    shapeData.objectId = objectId;
+
+    const canvasObjects = storage.get("canvasObjects");
+    canvasObjects.set(objectId, shapeData);
+  }, []);
+
+  const deleteAllShapes = useMutation(({ storage }) => {
+    const canvasObjects = storage.get("canvasObjects");
+    if (!canvasObjects || canvasObjects.size === 0) return;
+
+    // Convert canvasObjects.entries() to an array before iterating
+    const entriesArray = Array.from(canvasObjects.entries());
+
+    for (const [key, value] of entriesArray) {
+      canvasObjects.delete(key);
+    }
+
+    return canvasObjects.size === 0;
+  }, []);
+
+  const deleteShapeFromStorage = useMutation(
+    ({ storage }, objectId: string) => {
+      const canvasObjects = storage.get("canvasObjects");
+      if (!canvasObjects || canvasObjects.size === 0) return;
+
+      canvasObjects.delete(objectId);
+    },
+    []
+  );
+
+  const handleActiveElement = (element: ActiveElement) => {
+    setActiveElement(element);
+
+    switch (element?.value) {
+      case "reset":
+        deleteAllShapes();
+        fabricRef.current?.clear();
+        setActiveElement(defaultNavElement);
+        break;
+      case "delete":
+        handleDelete(fabricRef.current as any, deleteShapeFromStorage);
+        setActiveElement(defaultNavElement);
+        break;
+      case "image":
+        imageInputRef.current?.click();
+        isDrawing.current = false;
+
+        if (fabricRef.current) {
+          fabricRef.current.isDrawingMode = false;
+        }
+        break;
+
+      default:
+        break;
+    }
+
+    selectedShapeRef.current = element?.value as string;
+  };
+
+  useEffect(() => {
+    const canvas = initializeFabric({ canvasRef, fabricRef });
+
+    canvas.on("mouse:down", (options) => {
+      handleCanvasMouseDown({
+        options,
+        canvas,
+        isDrawing,
+        shapeRef,
+        selectedShapeRef,
+        setElementAttributes,
+      });
+    });
+    canvas.on("mouse:move", (options) => {
+      handleCanvaseMouseMove({
+        options,
+        canvas,
+        isDrawing,
+        shapeRef,
+        selectedShapeRef,
+        syncShapeInStorage,
+      });
+    });
+    canvas.on("mouse:up", () => {
+      handleCanvasMouseUp({
+        canvas,
+        isDrawing,
+        shapeRef,
+        selectedShapeRef,
+        syncShapeInStorage,
+        setActiveElement,
+        activeObjectRef,
+      });
+    });
+    canvas.on("object:modified", (options) => {
+      handleCanvasObjectModified({
+        options,
+        syncShapeInStorage,
+        setElementAttributes,
+      });
+    });
+    canvas.on("selection:created", (options) => {
+      handleCanvasSelectionCreated({
+        options,
+        isEditingRef,
+        setElementAttributes,
+      });
+    });
+    canvas.on("object:scaling", (options) => {
+      handleCanvasObjectScaling({
+        options,
+        setElementAttributes,
+      });
+    });
+    canvas.on("path:created", (options) => {
+      handlePathCreated({
+        options,
+        syncShapeInStorage,
+      });
+    });
+
+    window.addEventListener("resize", () => {
+      handleResize({ canvas: fabricRef.current });
+    });
+
+    window.addEventListener("keydown", (e) => {
+      handleKeyDown({
+        e,
+        canvas: fabricRef.current,
+        undo,
+        redo,
+        syncShapeInStorage,
+        deleteShapeFromStorage,
+      });
+    });
+
+    return () => {
+      /**
+       * dispose is a method provided by Fabric that allows you to dispose
+       * the canvas. It clears the canvas and removes all the event
+       * listeners
+       *
+       * dispose: http://fabricjs.com/docs/fabric.Canvas.html#dispose
+       */
+      canvas.dispose();
+
+      // remove the event listeners
+      window.removeEventListener("resize", () => {
+        handleResize({
+          canvas: null,
+        });
+      });
+
+      window.removeEventListener("keydown", (e) =>
+        handleKeyDown({
+          e,
+          canvas: fabricRef.current,
+          undo,
+          redo,
+          syncShapeInStorage,
+          deleteShapeFromStorage,
+        })
+      );
+    };
+  }, [canvasRef]); // run this effect only once when the component mounts and the canvasRef changes
+
+  useEffect(() => {
+    renderCanvas({ fabricRef, canvasObjects, activeObjectRef });
+  }, [canvasObjects]);
+
+  return (
+    <div className={`${darkMode ? "bg-primary-grey-200 text-white " : " bg-slate-200 text-black" }`}>
+
+    <main className="h-[100dvh] overflow-hidden">
+      <Navbar
+        activeElement={activeElement}
+        handleActiveElement={handleActiveElement}
+        imageInputRef={imageInputRef}
+        handleImageUpload={(e: any) => {
+          e.stopPropagation();
+          handleImageUpload({
+            file: e.target.files[0],
+            canvas: fabricRef as any,
+            shapeRef,
+            syncShapeInStorage,
+          });
+        }}
+      />
+
+      <section className="flex h-full flex-row">
+        <LeftSideBar allShapes={Array.from(canvasObjects)} />
+        <Live canvasRef={canvasRef} undo={undo} redo={redo} />
+        <RightSideBar
+          elementAttributes={elementAttributes}
+          setElementAttributes={setElementAttributes}
+          fabricRef={fabricRef}
+          isEditingRef={isEditingRef}
+          activeObjectRef={activeObjectRef}
+          syncShapeInStorage={syncShapeInStorage}
+        />
+      </section>
+    </main>
+    </div>
+  );
+}
+
+export default Workspace;