merge textnode and shapenode, add sidebar, fix style bar

Author: xhulia028

client/src/app/globals.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-
 @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Chewy&display=swap');
 
 @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

client/src/app/page.tsx

@@ -1,123 +1,7 @@
 "use client";
-import React from "react";
-import {
-  ReactFlow,
-  Background,
-  BackgroundVariant,
-  Controls,
-  Edge,
-  Node,
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import ShapeNode from "@/components/shape-node/ShapeNode";
-import Circle from "@/assets/shapes/circle.svg";
-import Rectangle from "@/assets/shapes/rectangle.svg";
-import Trapezoid from "@/assets/shapes/trapezoid.svg";
-import Diamond from "@/assets/shapes/diamond.svg";
-import Hexagon from "@/assets/shapes/hexagon.svg";
-import Parallelogram from "@/assets/shapes/parallelogram.svg";
-import Triangle from "@/assets/shapes/triangle.svg";
-import { defaultShapeNodeProperties } from "@/types/ShapeNodeProperties";
 
-export default function Home() {
-  const nodeTypes = {
-    ShapeNode,
-  };
-
-  const initialNodes: Node[] = [
-    {
-      id: "2",
-      type: "ShapeNode",
-      data: {
-        label: "circle",
-        Shape: Circle,
-        nodeProperties: defaultShapeNodeProperties,
-      },
-      position: { x: 0, y: 50 },
-    },
-
-    {
-      id: "1",
-      type: "ShapeNode",
-      data: {
-        label: "rectangle",
-        Shape: Rectangle,
-        nodeProperties: defaultShapeNodeProperties,
-      },
-      position: { x: 0, y: 300 },
-    },
-
-    {
-      id: "3",
-      type: "ShapeNode",
-      data: {
-        label: "trapezoid",
-        Shape: Trapezoid,
-        nodeProperties: defaultShapeNodeProperties,
-      },
-      position: { x: 300, y: 50 },
-    },
-
-    {
-      id: "4",
-      type: "ShapeNode",
-      data: {
-        label: "diamond",
-        Shape: Diamond,
-        nodeProperties: defaultShapeNodeProperties,
-      },
-      position: { x: 300, y: 300 },
-    },
+import WhiteBoard from "@/components/WhiteBoard";
 
-    {
-      id: "5",
-      type: "ShapeNode",
-      data: {
-        label: "hexagon",
-        Shape: Hexagon,
-        nodeProperties: defaultShapeNodeProperties,
-      },
-      position: { x: 600, y: 50 },
-    },
-
-    {
-      id: "6",
-      type: "ShapeNode",
-      data: {
-        label: "parallelogram",
-        Shape: Parallelogram,
-        nodeProperties: defaultShapeNodeProperties,
-      },
-      position: { x: 600, y: 300 },
-    },
-    {
-      id: "7",
-      type: "ShapeNode",
-      data: {
-        label: "triangle",
-        Shape: Triangle,
-        nodeProperties: defaultShapeNodeProperties,
-      },
-      position: { x: 900, y: 150 },
-    },
-  ];
-
-  const initialEdges: Edge[] = [];
-
-  return (
-    <div style={{ width: "100vw", height: "100vh" }}>
-      <ReactFlow
-        defaultNodes={initialNodes}
-        defaultEdges={initialEdges}
-        minZoom={0.2}
-        maxZoom={4}
-        fitView
-        nodeTypes={nodeTypes}
-        fitViewOptions={{ padding: 0.5 }}
-      >
-        <Background variant={BackgroundVariant.Dots} />
-        <Controls />
-      </ReactFlow>
-    </div>
-  );
+export default function Home() {
+  return <WhiteBoard />;
 }

client/src/components/TextNode.tsx

@@ -1,60 +1,53 @@
-"use client";
-
 import React, { useCallback } from "react";
 import {
   ReactFlow,
-  Background,
-  BackgroundVariant,
-  Controls,
   Node,
+  addEdge,
+  Connection,
   useNodesState,
+  useEdgesState,
+  Controls,
+  Background,
+  BackgroundVariant,
 } from "@xyflow/react";
-import { Button } from "@/components/ui/button";
-import { Type } from "lucide-react";
 import "@xyflow/react/dist/style.css";
-import { TextNode} from "@/components/TextNode";
+import Sidebar from "@/components/sidebar/Sidebar";
+import TextNode from "@/components/text-node/TextNode";
+import ShapeNode from "@/components/shape-node/ShapeNode";
 
 const nodeTypes = {
   text: TextNode,
+  shapeNode: ShapeNode,
 };
 
-export function WhiteBoard() {
+export default function WhiteBoard() {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
 
-  const onAddTextNode = useCallback(() => {
-    const newNode: Node = {
-      id: `text-${nodes.length + 1}`,
-      type: 'text',
-      position: { x: 100, y: 100 },
-      data: { 
-        label: 'Add your text here',
-        style: {
-          fontWeight: 'normal',
-          fontStyle: 'normal',
-          textDecoration: 'none',
-          color: '#000000'
-        }
-      },
-    };
-    setNodes((nds) => [...nds, newNode]);
-  }, [nodes, setNodes]);
+  const handleAddNode = useCallback(
+    (newNode: Node) => {
+      setNodes((nds) => [...nds, newNode]);
+    },
+    [setNodes],
+  );
+
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  const onConnect = useCallback(
+    (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+    [setEdges],
+  );
 
   return (
     <div style={{ width: "100vw", height: "100vh" }}>
-      <div className="fixed left-4 top-1/2 -translate-y-1/2 z-10 flex flex-col gap-2 bg-white/50 backdrop-blur-sm p-3 rounded-xl shadow-lg border border-gray-200/50 w-40 h-[200px] items-center justify-center">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onAddTextNode}
-          className="hover:bg-slate-100 w-8 h-8 rounded-lg"
-        >
-          <Type className="size-10"/>
-        </Button>
+      <div className="fixed left-4 top-1/2 -translate-y-1/2 z-10 ">
+        <Sidebar onAddNode={handleAddNode} />
       </div>
-
       <ReactFlow
         nodes={nodes}
+        edges={edges}
         onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
         nodeTypes={nodeTypes}
         fitView
       >
@@ -63,4 +56,4 @@ export function WhiteBoard() {
       </ReactFlow>
     </div>
   );
-}
+}