From 2a8f4a16f59c68ccaa10f5c24b3ac3e9b0b32c73 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 25 Jun 2022 23:11:06 +0200
Subject: [PATCH] feat(nodes): allow node internals to be updated by event

# What's changed?

* add listener for `update-node-internals` on node component
* update internals when event is emitted
---
 .../src/components/Nodes/NodeWrapper.vue      | 25 +++++++++++--------
 packages/vue-flow/src/env.d.ts                |  2 +-
 packages/vue-flow/src/types/hooks.ts          |  2 +-
 packages/vue-flow/src/utils/node.ts           |  2 +-
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
index cbd24ee6..35778ae9 100644
--- a/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
+++ b/packages/vue-flow/src/components/Nodes/NodeWrapper.vue
@@ -71,18 +71,22 @@ const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
   }
 }
 
+const updateInternals = () => {
+  updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
+
+  updatePosition(
+    {
+      x: node.position.x,
+      y: node.position.y,
+      z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
+    },
+    parentNode ? { ...parentNode.computedPosition } : undefined,
+  )
+}
+
 onUpdateNodeInternals((updateIds) => {
   if (updateIds.includes(id)) {
-    updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
-
-    updatePosition(
-      {
-        x: node.position.x,
-        y: node.position.y,
-        z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
-      },
-      parentNode ? { ...parentNode.computedPosition } : undefined,
-    )
+    updateInternals()
   }
 })
 
@@ -234,6 +238,7 @@ export default {
       :source-position="node.sourcePosition"
       :label="node.label"
       :drag-handle="node.dragHandle"
+      @update-node-internals="updateInternals"
     />
   </div>
 </template>
diff --git a/packages/vue-flow/src/env.d.ts b/packages/vue-flow/src/env.d.ts
index fe706fd0..3f271324 100644
--- a/packages/vue-flow/src/env.d.ts
+++ b/packages/vue-flow/src/env.d.ts
@@ -4,7 +4,7 @@
 
 declare module '*.vue' {
   import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/ban-types
+
   const component: DefineComponent<{}, {}, any>
   export default component
 }
diff --git a/packages/vue-flow/src/types/hooks.ts b/packages/vue-flow/src/types/hooks.ts
index 80e15a3c..e9906dcc 100644
--- a/packages/vue-flow/src/types/hooks.ts
+++ b/packages/vue-flow/src/types/hooks.ts
@@ -44,6 +44,7 @@ export interface FlowEvents {
   nodeDragStart: NodeDragEvent
   nodeDrag: NodeDragEvent
   nodeDragStop: NodeDragEvent
+  updateNodeInternals: string[]
   miniMapNodeClick: NodeMouseEvent
   miniMapNodeDoubleClick: NodeMouseEvent
   miniMapNodeMouseEnter: NodeMouseEvent
@@ -75,7 +76,6 @@ export interface FlowEvents {
   edgeUpdateStart: EdgeMouseEvent
   edgeUpdate: EdgeUpdateEvent
   edgeUpdateEnd: EdgeMouseEvent
-  updateNodeInternals: string[]
 }
 
 export type FlowHooks = Readonly<{
diff --git a/packages/vue-flow/src/utils/node.ts b/packages/vue-flow/src/utils/node.ts
index e7e55b47..503b952c 100644
--- a/packages/vue-flow/src/utils/node.ts
+++ b/packages/vue-flow/src/utils/node.ts
@@ -1,6 +1,6 @@
+import type { Ref } from 'vue'
 import { getDimensions } from './graph'
 import type { Actions, GraphNode, HandleElement, Position } from '~/types'
-import { Ref } from "vue";
 
 export const getHandleBoundsByHandleType = (
   selector: string,