feat: fix intersecting node error

Terraform-Canvas · Aug 4, 2023 · ee41d45 · ee41d45
1 parent 3172c1f
commit ee41d45
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 17 deletions.
diff --git a/src/components/aws/ALB.vue b/src/components/aws/ALB.vue
@@ -3,7 +3,8 @@ import ResourceNodeCommon from './ResourceNodeCommon.vue';
 
 import { useVueFlow, useNode } from '@vue-flow/core';
 
-const { getIntersectingNodes, findNode, onNodeDragStop } = useVueFlow();
+const { getIntersectingNodes, findNode, onNodeDragStop, updateNodeInternals } =
+    useVueFlow();
 const { node } = useNode();
 
 onNodeDragStop((nodeDragEvent) => {
@@ -14,10 +15,19 @@ onNodeDragStop((nodeDragEvent) => {
             .map((e) => e);
 
         const parentId = filteredNodes[filteredNodes.length - 1]?.id;
+        const parentNode = findNode(parentId);
 
-        if (parentId && findNode(parentId).parentNode != node.id) {
+        if (parentId && parentNode.parentNode != node.id) {
+            //노드에 새로운 부모 노드가 생겼을 때 좌표 값이 부모 노드 기준으로 바뀌는 현상 보정
+            if (!node.parentNode) {
+                node.position = {
+                    x: node.position.x - parentNode.position.x,
+                    y: node.position.y - parentNode.position.y,
+                };
+            }
             node.parentNode = parentId;
             node.expandParent = true;
+            updateNodeInternals([node.id]);
         }
     }
 });

diff --git a/src/components/aws/AutoScalingGroup.vue b/src/components/aws/AutoScalingGroup.vue
@@ -3,7 +3,8 @@ import ResourceNodeCommon from './ResourceNodeCommon.vue';
 
 import { useVueFlow, useNode } from '@vue-flow/core';
 
-const { getIntersectingNodes, findNode, onNodeDragStop } = useVueFlow();
+const { getIntersectingNodes, findNode, onNodeDragStop, updateNodeInternals } =
+    useVueFlow();
 const { node } = useNode();
 
 onNodeDragStop((nodeDragEvent) => {
@@ -14,10 +15,19 @@ onNodeDragStop((nodeDragEvent) => {
             .map((e) => e);
 
         const parentId = filteredNodes[filteredNodes.length - 1]?.id;
+        const parentNode = findNode(parentId);
 
-        if (parentId && findNode(parentId).parentNode != node.id) {
+        if (parentId && parentNode.parentNode != node.id) {
+            //노드에 새로운 부모 노드가 생겼을 때 좌표 값이 부모 노드 기준으로 바뀌는 현상 보정
+            if (!node.parentNode) {
+                node.position = {
+                    x: node.position.x - parentNode.position.x,
+                    y: node.position.y - parentNode.position.y,
+                };
+            }
             node.parentNode = parentId;
             node.expandParent = true;
+            updateNodeInternals([node.id]);
         }
     }
 });

diff --git a/src/components/aws/EC2.vue b/src/components/aws/EC2.vue
@@ -3,7 +3,8 @@ import ResourceNodeCommon from './ResourceNodeCommon.vue';
 
 import { useVueFlow, useNode } from '@vue-flow/core';
 
-const { getIntersectingNodes, findNode, onNodeDragStop } = useVueFlow();
+const { getIntersectingNodes, findNode, onNodeDragStop, updateNodeInternals } =
+    useVueFlow();
 const { node } = useNode();
 
 onNodeDragStop((nodeDragEvent) => {
@@ -19,10 +20,19 @@ onNodeDragStop((nodeDragEvent) => {
             .map((e) => e);
 
         const parentId = filteredNodes[filteredNodes.length - 1]?.id;
+        const parentNode = findNode(parentId);
 
-        if (parentId && findNode(parentId).parentNode != node.id) {
+        if (parentId && parentNode.parentNode != node.id) {
+            //노드에 새로운 부모 노드가 생겼을 때 좌표 값이 부모 노드 기준으로 바뀌는 현상 보정
+            if (!node.parentNode) {
+                node.position = {
+                    x: node.position.x - parentNode.position.x,
+                    y: node.position.y - parentNode.position.y,
+                };
+            }
             node.parentNode = parentId;
             node.expandParent = true;
+            updateNodeInternals([node.id]);
         }
     }
 });

diff --git a/src/components/aws/NATGateway.vue b/src/components/aws/NATGateway.vue
@@ -3,7 +3,8 @@ import ResourceNodeCommon from './ResourceNodeCommon.vue';
 
 import { useVueFlow, useNode } from '@vue-flow/core';
 
-const { getIntersectingNodes, findNode, onNodeDragStop } = useVueFlow();
+const { getIntersectingNodes, findNode, onNodeDragStop, updateNodeInternals } =
+    useVueFlow();
 const { node } = useNode();
 
 onNodeDragStop((nodeDragEvent) => {
@@ -14,10 +15,19 @@ onNodeDragStop((nodeDragEvent) => {
             .map((e) => e);
 
         const parentId = filteredNodes[filteredNodes.length - 1]?.id;
+        const parentNode = findNode(parentId);
 
-        if (parentId && findNode(parentId).parentNode != node.id) {
+        if (parentId && parentNode.parentNode != node.id) {
+            //노드에 새로운 부모 노드가 생겼을 때 좌표 값이 부모 노드 기준으로 바뀌는 현상 보정
+            if (!node.parentNode) {
+                node.position = {
+                    x: node.position.x - parentNode.position.x,
+                    y: node.position.y - parentNode.position.y,
+                };
+            }
             node.parentNode = parentId;
             node.expandParent = true;
+            updateNodeInternals([node.id]);
         }
     }
 });

diff --git a/src/components/aws/PrivateSubnet.vue b/src/components/aws/PrivateSubnet.vue
@@ -3,7 +3,8 @@ import ResourceNodeCommon from './ResourceNodeCommon.vue';
 
 import { useVueFlow, useNode } from '@vue-flow/core';
 
-const { getIntersectingNodes, findNode, onNodeDragStop } = useVueFlow();
+const { getIntersectingNodes, findNode, onNodeDragStop, updateNodeInternals } =
+    useVueFlow();
 const { node } = useNode();
 
 onNodeDragStop((nodeDragEvent) => {
@@ -19,10 +20,19 @@ onNodeDragStop((nodeDragEvent) => {
             .map((e) => e);
 
         const parentId = filteredNodes[filteredNodes.length - 1]?.id;
+        const parentNode = findNode(parentId);
 
-        if (parentId && findNode(parentId).parentNode != node.id) {
+        if (parentId && parentNode.parentNode != node.id) {
+            //노드에 새로운 부모 노드가 생겼을 때 좌표 값이 부모 노드 기준으로 바뀌는 현상 보정
+            if (!node.parentNode) {
+                node.position = {
+                    x: node.position.x - parentNode.position.x,
+                    y: node.position.y - parentNode.position.y,
+                };
+            }
             node.parentNode = parentId;
             node.expandParent = true;
+            updateNodeInternals([node.id]);
         }
     }
 });

diff --git a/src/components/aws/PublicSubnet.vue b/src/components/aws/PublicSubnet.vue
@@ -3,7 +3,8 @@ import ResourceNodeCommon from './ResourceNodeCommon.vue';
 
 import { useVueFlow, useNode } from '@vue-flow/core';
 
-const { getIntersectingNodes, findNode, onNodeDragStop } = useVueFlow();
+const { getIntersectingNodes, findNode, onNodeDragStop, updateNodeInternals } =
+    useVueFlow();
 const { node } = useNode();
 
 onNodeDragStop((nodeDragEvent) => {
@@ -19,10 +20,19 @@ onNodeDragStop((nodeDragEvent) => {
             .map((e) => e);
 
         const parentId = filteredNodes[filteredNodes.length - 1]?.id;
+        const parentNode = findNode(parentId);
 
-        if (parentId && findNode(parentId).parentNode != node.id) {
+        if (parentId && parentNode.parentNode != node.id) {
+            //노드에 새로운 부모 노드가 생겼을 때 좌표 값이 부모 노드 기준으로 바뀌는 현상 보정
+            if (!node.parentNode) {
+                node.position = {
+                    x: node.position.x - parentNode.position.x,
+                    y: node.position.y - parentNode.position.y,
+                };
+            }
             node.parentNode = parentId;
             node.expandParent = true;
+            updateNodeInternals([node.id]);
         }
     }
 });

diff --git a/src/components/aws/ResourceNodeCommon.vue b/src/components/aws/ResourceNodeCommon.vue
@@ -8,8 +8,7 @@ import { useNode, useVueFlow } from '@vue-flow/core';
 
 const { node } = useNode();
 
-const { removeNodes, getIntersectingNodes, onNodeDragStop, findNode } =
-    useVueFlow();
+const { removeNodes } = useVueFlow();
 
 /**
  * 삭제 버튼 클릭 핸들러

diff --git a/src/components/aws/SecurityGroup.vue b/src/components/aws/SecurityGroup.vue
@@ -3,7 +3,8 @@ import ResourceNodeCommon from './ResourceNodeCommon.vue';
 
 import { useVueFlow, useNode } from '@vue-flow/core';
 
-const { getIntersectingNodes, findNode, onNodeDragStop } = useVueFlow();
+const { getIntersectingNodes, findNode, onNodeDragStop, updateNodeInternals } =
+    useVueFlow();
 const { node } = useNode();
 
 onNodeDragStop((nodeDragEvent) => {
@@ -17,10 +18,19 @@ onNodeDragStop((nodeDragEvent) => {
             .map((e) => e);
 
         const parentId = filteredNodes[filteredNodes.length - 1]?.id;
+        const parentNode = findNode(parentId);
 
-        if (parentId && findNode(parentId).parentNode != node.id) {
+        if (parentId && parentNode.parentNode != node.id) {
+            //노드에 새로운 부모 노드가 생겼을 때 좌표 값이 부모 노드 기준으로 바뀌는 현상 보정
+            if (!node.parentNode) {
+                node.position = {
+                    x: node.position.x - parentNode.position.x,
+                    y: node.position.y - parentNode.position.y,
+                };
+            }
             node.parentNode = parentId;
             node.expandParent = true;
+            updateNodeInternals([node.id]);
         }
     }
 });

diff --git a/src/components/node/NodePlane.vue b/src/components/node/NodePlane.vue
@@ -58,7 +58,6 @@ function onDragOver(event) {
         event.dataTransfer.dropEffect = 'move';
     }
 }
-
 onConnect((params) => addEdges(params));
 
 function onDrop(event) {