Merge pull request #310 from boostcampwm-2024/feature-fe-#294

컨테이너 노드 기능 추가

Author: yewonJin

apps/backend/src/yjs/yjs.service.ts

@@ -153,6 +153,9 @@ export class YjsService
         for (const [key, change] of event.changes.keys) {
           if (change.action === 'update') {
             const node: any = nodesMap.get(key);
+            if (node.type !== 'note') {
+              continue;
+            }
             const { title, id } = node.data; // TODO: 이모지 추가
             const { x, y } = node.position;
             const isHolding = node.isHolding;

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,

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,
+});