From 6b76b8be069d7e41e74bff5043696c7e3bd1847a Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 8 Apr 2022 20:33:51 +0200
Subject: [PATCH] refactor(nodes): Add nodeElements prop again

* Remove templateRef and use regular ref (templateRef causes infinite re-renders)
---
 package/src/components/Nodes/NodeWrapper.vue | 6 ++++--
 package/src/types/node.ts                    | 2 ++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index e9c24712..4d2159d9 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -20,7 +20,7 @@ const { store } = useVueFlow()
 const node = useVModel(props, 'node')
 provide(NodeId, props.id)
 
-const nodeElement = templateRef<HTMLDivElement>('node-element', null)
+const nodeElement = ref()
 
 const onMouseEnterHandler = () =>
   node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: node.value }))
@@ -195,7 +195,7 @@ export default {
 </script>
 <template>
   <div
-    ref="node-element"
+    ref="nodeElement"
     :key="`node-${node.id}`"
     :class="getClass"
     :style="getStyle"
@@ -209,6 +209,7 @@ export default {
   >
     <component
       :is="type"
+      v-if="nodeElement"
       :id="node.id"
       :type="node.type"
       :data="node.data"
@@ -226,6 +227,7 @@ export default {
       :source-position="node.sourcePosition"
       :label="node.label"
       :drag-handle="node.dragHandle"
+      :node-element="nodeElement"
     />
   </div>
 </template>
diff --git a/package/src/types/node.ts b/package/src/types/node.ts
index 370487cb..13c5632a 100644
--- a/package/src/types/node.ts
+++ b/package/src/types/node.ts
@@ -94,4 +94,6 @@ export interface NodeProps<Data = ElementData> {
   targetPosition?: Position
   sourcePosition?: Position
   dragHandle?: string
+
+  nodeElement: HTMLDivElement
 }