feat: child 노드를 움직일 때, group node 계산할 때 최단 거리 엣지 계산

djk01281 · djk01281 · commit 61299fdb6568 · 2024-11-28T01:36:13.000+09:00
diff --git a/apps/frontend/src/features/canvas/model/calculateHandles.ts b/apps/frontend/src/features/canvas/model/calculateHandles.ts
@@ -1,34 +1,61 @@
-import { Position, Node } from "@xyflow/react";
+import { Position, Node, XYPosition } from "@xyflow/react";
 
-export const getHandlePosition = (node: Node, handleId: Position) => {
+const getAbsolutePosition = (node: Node, nodes: Node[]): XYPosition => {
+  if (!node.parentId) {
+    return node.position;
+  }
+
+  const parentNode = nodes.find((n) => n.id === node.parentId);
+  if (!parentNode) {
+    return node.position;
+  }
+
+  const parentPosition: XYPosition = getAbsolutePosition(parentNode, nodes);
+  return {
+    x: parentPosition.x + node.position.x,
+    y: parentPosition.y + node.position.y,
+  };
+};
+
+export const getHandlePosition = (
+  node: Node,
+  handleId: Position,
+  nodes: Node[],
+) => {
   const nodeElement = document.querySelector(`[data-id="${node.id}"]`);
   const nodeRect = nodeElement!.getBoundingClientRect();
   const nodeWidth = nodeRect.width;
   const nodeHeight = nodeRect.height;
 
+  const absolutePosition = getAbsolutePosition(node, nodes);
+
   const positions = {
     [Position.Left]: {
-      x: node.position.x,
-      y: node.position.y + nodeHeight / 2,
+      x: absolutePosition.x,
+      y: absolutePosition.y + nodeHeight / 2,
     },
     [Position.Right]: {
-      x: node.position.x + nodeWidth,
-      y: node.position.y + nodeHeight / 2,
+      x: absolutePosition.x + nodeWidth,
+      y: absolutePosition.y + nodeHeight / 2,
     },
     [Position.Top]: {
-      x: node.position.x + nodeWidth / 2,
-      y: node.position.y,
+      x: absolutePosition.x + nodeWidth / 2,
+      y: absolutePosition.y,
     },
     [Position.Bottom]: {
-      x: node.position.x + nodeWidth / 2,
-      y: node.position.y + nodeHeight,
+      x: absolutePosition.x + nodeWidth / 2,
+      y: absolutePosition.y + nodeHeight,
     },
   };
 
   return positions[handleId];
 };
 
-export const calculateBestHandles = (sourceNode: Node, targetNode: Node) => {
+export const calculateBestHandles = (
+  sourceNode: Node,
+  targetNode: Node,
+  nodes: Node[],
+) => {
   const handlePositions = [
     Position.Left,
     Position.Right,
@@ -42,9 +69,9 @@ export const calculateBestHandles = (sourceNode: Node, targetNode: Node) => {
   };
 
   handlePositions.forEach((sourceHandle) => {
-    const sourcePosition = getHandlePosition(sourceNode, sourceHandle);
+    const sourcePosition = getHandlePosition(sourceNode, sourceHandle, nodes);
     handlePositions.forEach((targetHandle) => {
-      const targetPosition = getHandlePosition(targetNode, targetHandle);
+      const targetPosition = getHandlePosition(targetNode, targetHandle, nodes);
       const distance = Math.hypot(
         sourcePosition.x - targetPosition.x,
         sourcePosition.y - targetPosition.y,
diff --git a/apps/frontend/src/features/canvas/model/getPosition.ts b/apps/frontend/src/features/canvas/model/getPosition.ts
@@ -0,0 +1,11 @@
+import { type Node } from "@xyflow/react";
+
+export const getRelativePosition = (node: Node, parentNode: Node) => ({
+  x: node.position.x - parentNode.position.x,
+  y: node.position.y - parentNode.position.y,
+});
+
+export const getAbsolutePosition = (node: Node, parentNode: Node) => ({
+  x: parentNode.position.x + node.position.x,
+  y: parentNode.position.y + node.position.y,
+});
diff --git a/apps/frontend/src/features/canvas/model/useCanvas.ts b/apps/frontend/src/features/canvas/model/useCanvas.ts
@@ -22,6 +22,7 @@ import { useCollaborativeCursors } from "./useCollaborativeCursors";
 import { getSortedNodes } from "./sortNodes";
 import { usePageStore } from "@/features/pageSidebar/model/pageStore";
 import { useWorkspace } from "@/shared/lib/useWorkspace";
+import { getAbsolutePosition, getRelativePosition } from "./getPosition";
 
 export interface YNode extends Node {
   isHolding: boolean;
@@ -271,6 +272,7 @@ export const useCanvas = () => {
                 const bestHandles = calculateBestHandles(
                   sourceNode,
                   targetNode,
+                  nodes,
                 );
                 const updatedEdge = {
                   ...edge,
@@ -323,8 +325,7 @@ export const useCanvas = () => {
       const targetNode = nodes.find((n) => n.id === connection.target);
 
       if (sourceNode && targetNode) {
-        const bestHandles = calculateBestHandles(sourceNode, targetNode);
-
+        const bestHandles = calculateBestHandles(sourceNode, targetNode, nodes);
         const newEdge: Edge = {
           id: `e${connection.source}-${connection.target}`,
           source: connection.source,
@@ -349,117 +350,124 @@ export const useCanvas = () => {
 
   const onNodeDragStop = useCallback(
     (_event: React.MouseEvent, node: Node) => {
-      if (ydoc) {
-        const nodesMap = ydoc.getMap("nodes");
-        const yNode = nodesMap.get(node.id) as YNode | undefined;
+      if (!ydoc) return;
+
+      const nodesMap = ydoc.getMap("nodes");
+      const yNode = nodesMap.get(node.id) as YNode | undefined;
 
-        if (yNode) {
-          const currentNode = nodes.find((n) => n.id === node.id);
-          if (!currentNode) return;
+      if (!yNode) return;
 
-          if (node.type === "group") {
-            const intersectingNotes = getIntersectingNodes(currentNode).filter(
-              (n) => n.type === "note" && !n.parentId,
-            );
+      const currentNode = nodes.find((n) => n.id === node.id);
+      if (!currentNode) return;
+
+      if (node.type === "group") {
+        const intersectingNotes = getIntersectingNodes(currentNode).filter(
+          (n) => n.type === "note" && !n.parentId,
+        );
+
+        intersectingNotes.forEach((noteNode) => {
+          nodesMap.set(noteNode.id, {
+            ...noteNode,
+            parentId: node.id,
+            position: getRelativePosition(noteNode, currentNode),
+            isHolding: false,
+          });
+        });
+
+        nodesMap.set(node.id, {
+          ...currentNode,
+          isHolding: false,
+        });
 
-            intersectingNotes.forEach((noteNode) => {
-              const relativePosition = {
-                x: noteNode.position.x - currentNode.position.x,
-                y: noteNode.position.y - currentNode.position.y,
+        const childNodes = nodes.filter((n) => n.parentId === node.id);
+        const edgesMap = ydoc.getMap("edges");
+
+        childNodes.forEach((childNode) => {
+          const connectedEdges = edges.filter(
+            (edge) =>
+              edge.source === childNode.id || edge.target === childNode.id,
+          );
+
+          connectedEdges.forEach((edge) => {
+            const sourceNode = nodes.find((n) => n.id === edge.source);
+            const targetNode = nodes.find((n) => n.id === edge.target);
+
+            if (sourceNode && targetNode) {
+              const bestHandles = calculateBestHandles(
+                sourceNode,
+                targetNode,
+                nodes,
+              );
+              const updatedEdge = {
+                ...edge,
+                sourceHandle: bestHandles.source,
+                targetHandle: bestHandles.target,
               };
+              edgesMap.set(edge.id, updatedEdge);
+            }
+          });
+        });
+      } else {
+        const intersectingGroups = getIntersectingNodes(currentNode).filter(
+          (n) => n.type === "group",
+        );
 
-              nodesMap.set(noteNode.id, {
-                ...noteNode,
-                parentId: node.id,
-                position: relativePosition,
-                isHolding: false,
-              });
-            });
+        if (intersectingGroups.length > 0) {
+          const parentNode = intersectingGroups[intersectingGroups.length - 1];
 
+          if (yNode.parentId === parentNode.id) {
             nodesMap.set(node.id, {
-              ...currentNode,
+              ...yNode,
+              position: currentNode.position,
               isHolding: false,
             });
           } else {
-            const intersectingGroups = getIntersectingNodes(currentNode).filter(
-              (n) => n.type === "group",
-            );
-
-            if (intersectingGroups.length > 0) {
-              const parentNode =
-                intersectingGroups[intersectingGroups.length - 1];
-
-              if (yNode.parentId === parentNode.id) {
-                nodesMap.set(node.id, {
-                  ...yNode,
-                  position: currentNode.position,
-                  isHolding: false,
-                });
-              } else {
-                let absolutePosition = currentNode.position;
-                if (yNode.parentId) {
-                  const oldParentNode = nodes.find(
-                    (n) => n.id === yNode.parentId,
-                  );
-                  if (oldParentNode) {
-                    absolutePosition = {
-                      x: oldParentNode.position.x + currentNode.position.x,
-                      y: oldParentNode.position.y + currentNode.position.y,
-                    };
-                  }
-                }
-
-                const relativePosition = {
-                  x: absolutePosition.x - parentNode.position.x,
-                  y: absolutePosition.y - parentNode.position.y,
-                };
+            const absolutePosition = yNode.parentId
+              ? getAbsolutePosition(
+                  currentNode,
+                  nodes.find((n) => n.id === yNode.parentId)!,
+                )
+              : currentNode.position;
 
-                nodesMap.set(node.id, {
-                  ...currentNode,
-                  parentId: parentNode.id,
-                  position: relativePosition,
-                  isHolding: false,
-                });
-              }
-            } else {
-              if (yNode.parentId) {
-                const oldParentNode = nodes.find(
-                  (n) => n.id === yNode.parentId,
-                );
-                if (oldParentNode) {
-                  const absolutePosition = {
-                    x: oldParentNode.position.x + currentNode.position.x,
-                    y: oldParentNode.position.y + currentNode.position.y,
-                  };
-
-                  nodesMap.set(node.id, {
-                    ...currentNode,
-                    parentId: undefined,
-                    position: absolutePosition,
-                    isHolding: false,
-                  });
-                }
-              } else {
-                nodesMap.set(node.id, {
-                  ...currentNode,
-                  parentId: undefined,
-                  isHolding: false,
-                });
-              }
+            nodesMap.set(node.id, {
+              ...currentNode,
+              parentId: parentNode.id,
+              position: getRelativePosition(
+                { ...currentNode, position: absolutePosition },
+                parentNode,
+              ),
+              isHolding: false,
+            });
+          }
+        } else {
+          if (yNode.parentId) {
+            const oldParentNode = nodes.find((n) => n.id === yNode.parentId);
+            if (oldParentNode) {
+              nodesMap.set(node.id, {
+                ...currentNode,
+                parentId: undefined,
+                position: getAbsolutePosition(currentNode, oldParentNode),
+                isHolding: false,
+              });
             }
+          } else {
+            nodesMap.set(node.id, {
+              ...currentNode,
+              parentId: undefined,
+              isHolding: false,
+            });
           }
-
-          setNodes((ns) => {
-            const groups = ns.filter((n) => n.type === "group");
-            const notes = ns.filter((n) => n.type !== "group");
-            return [...groups, ...notes];
-          });
         }
       }
+
+      setNodes((ns) => {
+        const groups = ns.filter((n) => n.type === "group");
+        const notes = ns.filter((n) => n.type !== "group");
+        return [...groups, ...notes];
+      });
     },
     [ydoc, getIntersectingNodes, nodes, setNodes],
   );
-
   return {
     handleMouseMove,
     nodes,
