Merge pull request #256 from boostcampwm-2024/feature-shared-#211

자동으로 노드 정렬해주는 기능

Author: github-actions[bot]

apps/frontend/package.json

@@ -31,6 +31,7 @@
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "elkjs": "^0.9.3",
     "emoji-mart": "^5.6.0",
     "fast-diff": "^1.3.0",
     "framer-motion": "^11.11.11",
@@ -46,6 +47,7 @@
     "tailwindcss-animate": "^1.0.7",
     "tailwindest": "^2.3.6",
     "use-debounce": "^10.0.4",
+    "web-worker": "^1.3.0",
     "y-prosemirror": "^1.2.12",
     "y-socket.io": "^1.1.3",
     "yjs": "^13.6.20",

apps/frontend/src/components/canvas/index.tsx

@@ -17,17 +17,22 @@ import {
   ReactFlowProvider,
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { usePages } from "@/hooks/usePages";
-import { NoteNode } from "./NoteNode";
 import * as Y from "yjs";
+import ELK from "elkjs";
 import { SocketIOProvider } from "y-socket.io";
-import { cn } from "@/lib/utils";
 import { useQueryClient } from "@tanstack/react-query";
+
+import { CollaborativeCursors } from "../CursorView";
+import { NoteNode } from "./NoteNode";
+
+import { usePages } from "@/hooks/usePages";
+import { cn } from "@/lib/utils";
 import useYDocStore from "@/store/useYDocStore";
 import { useCollaborativeCursors } from "@/hooks/useCursor";
-import { CollaborativeCursors } from "../CursorView";
 import { calculateBestHandles } from "@/lib/calculateBestHandles";
 
+const elk = new ELK();
+
 const proOptions = { hideAttribution: true };
 
 export interface YNode extends Node {
@@ -196,6 +201,47 @@ function Flow({ className }: CanvasProps) {
     });
   }, [pages, ydoc]);
 
+  const performLayout = async () => {
+    const graph = {
+      id: "root",
+      layoutOptions: {
+        "elk.algorithm": "force",
+      },
+      children: nodes.map((node) => ({
+        id: node.id,
+        width: 160, // 실제 노드 너비로 변경하기 (node.width)
+        height: 40, // 실제 노드 높이로 변경하기 (node.height)
+      })),
+      edges: edges.map((edge) => ({
+        id: edge.id,
+        sources: [edge.source],
+        targets: [edge.target],
+      })),
+    };
+
+    const layout = await elk.layout(graph);
+
+    const updatedNodes = nodes.map((node) => {
+      const layoutNode = layout!.children!.find((n) => n.id === node.id);
+
+      return {
+        ...node,
+        position: {
+          x: layoutNode!.x as number,
+          y: layoutNode!.y as number,
+        },
+      };
+    });
+
+    const nodesMap = ydoc.getMap("nodes");
+
+    updatedNodes.forEach((updateNode) => {
+      nodesMap.set(updateNode.id, updateNode);
+    });
+
+    setNodes(updatedNodes);
+  };
+
   const handleNodesChange = useCallback(
     (changes: NodeChange[]) => {
       if (!ydoc) return;
@@ -335,6 +381,9 @@ function Flow({ className }: CanvasProps) {
         selectNodesOnDrag={false}
       >
         <Controls />
+        <div className="fixed bottom-5 left-16 z-30 h-4 w-4 text-neutral-50 hover:cursor-pointer">
+          <button onClick={performLayout}>Sort</button>
+        </div>
         <MiniMap />
         <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
         <CollaborativeCursors cursors={cursors} />

yarn.lock

@@ -5253,6 +5253,11 @@ electron-to-chromium@^1.5.41:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.63.tgz#69444d592fbbe628d129866c2355691ea93eda3e"
   integrity sha512-ddeXKuY9BHo/mw145axlyWjlJ1UBt4WK3AlvkT7W2AbqfRQoacVoRUCF6wL3uIx/8wT9oLKXzI+rFqHHscByaA==
 
+elkjs@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.9.3.tgz#16711f8ceb09f1b12b99e971b138a8384a529161"
+  integrity sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==
+
 emittery@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
@@ -10454,6 +10459,11 @@ wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-worker@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/web-worker/-/web-worker-1.3.0.tgz#e5f2df5c7fe356755a5fb8f8410d4312627e6776"
+  integrity sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"