From 546dd4baaf65d298410741019393cf4fc4b89ea9 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 31 Mar 2022 10:33:10 +0200
Subject: [PATCH] fix(nodes,edges): compute type in wrapper

---
 package/src/components/Edges/EdgeWrapper.vue  | 40 +++++++++++++++--
 package/src/components/Nodes/NodeWrapper.vue  | 41 ++++++++++++++---
 .../container/EdgeRenderer/EdgeRenderer.vue   | 45 +------------------
 .../container/NodeRenderer/NodeRenderer.vue   | 40 +----------------
 4 files changed, 75 insertions(+), 91 deletions(-)

diff --git a/package/src/components/Edges/EdgeWrapper.vue b/package/src/components/Edges/EdgeWrapper.vue
index fe10be54..f04741c8 100644
--- a/package/src/components/Edges/EdgeWrapper.vue
+++ b/package/src/components/Edges/EdgeWrapper.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, GraphEdge, Position } from '../../types'
+import { ConnectionMode, EdgeComponent, GraphEdge, Position } from '../../types'
 import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
+import { Slots } from '../../context'
 import EdgeAnchor from './EdgeAnchor.vue'
 
 interface EdgeWrapper {
   id: string
-  name: string
   edge: GraphEdge
   selectable?: boolean
   updatable?: boolean
@@ -104,6 +104,37 @@ onMounted(() => {
     { immediate: true, deep: true },
   )
 })
+
+const slots = inject(Slots)
+
+const name = ref(edge.value.type ?? 'default')
+watch(
+  () => edge.value.type,
+  (v) => v && (name.value = v),
+)
+
+const type = computed(() => {
+  const instance = getCurrentInstance()
+  let edgeType = store.getEdgeTypes[name.value]
+  if (typeof edgeType === 'string') {
+    if (instance) {
+      const components = Object.keys(instance.appContext.components)
+      if (components && components.includes(name.value)) {
+        edgeType = resolveComponent(name.value, false) as EdgeComponent
+      }
+    }
+  }
+  if (typeof edgeType !== 'string') return edgeType
+
+  const slot = slots?.[`edge-${name.value}`]
+  if (!slot?.({})) {
+    console.warn(`[vueflow]: Edge type "${edge.value.type}" not found and no edge-slot detected. Using fallback type "default".`)
+    name.value = 'default'
+    return store.getEdgeTypes.default
+  }
+
+  return slot
+})
 </script>
 <script lang="ts">
 export default {
@@ -116,7 +147,7 @@ export default {
     :key="`edge-${edge.id}`"
     :class="[
       'vue-flow__edge',
-      `vue-flow__edge-${props.name}`,
+      `vue-flow__edge-${name}`,
       store.noPanClassName,
       {
         selected: edge.selected,
@@ -133,7 +164,8 @@ export default {
     @mousemove="onEdgeMouseMove"
     @mouseleave="onEdgeMouseLeave"
   >
-    <slot
+    <component
+      :is="type"
       v-bind="{
         id: edge.id,
         sourceNode: edge.sourceNode,
diff --git a/package/src/components/Nodes/NodeWrapper.vue b/package/src/components/Nodes/NodeWrapper.vue
index 23495d92..cfa6e3fc 100644
--- a/package/src/components/Nodes/NodeWrapper.vue
+++ b/package/src/components/Nodes/NodeWrapper.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
-import { GraphNode, SnapGrid } from '../../types'
-import { NodeId } from '../../context'
+import { GraphNode, NodeComponent, SnapGrid } from '../../types'
+import { NodeId, Slots } from '../../context'
 import { getXYZPos } from '../../utils'
 
 interface NodeWrapperProps {
   id: string
-  name: string
   node: GraphNode
   draggable: boolean
   selectable: boolean
@@ -112,6 +111,37 @@ watch(
 )
 
 store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
+
+const slots = inject(Slots)
+
+const name = ref(node.value.type ?? 'default')
+watch(
+  () => node.value.type,
+  (v) => v && (name.value = v),
+)
+
+const type = computed(() => {
+  const instance = getCurrentInstance()
+  let nodeType = store.getNodeTypes[name.value]
+  if (typeof nodeType === 'string') {
+    if (instance) {
+      const components = Object.keys(instance.appContext.components)
+      if (components && components.includes(name.value)) {
+        nodeType = resolveComponent(name.value, false) as NodeComponent
+      }
+    }
+  }
+  if (typeof nodeType !== 'string') return nodeType
+
+  const slot = slots?.[`node-${name.value}`]
+  if (!slot?.({})) {
+    console.warn(`[vueflow]: Node type "${node.value.type}" not found and no node-slot detected. Using fallback type "default".`)
+    name.value = 'default'
+    return store.getNodeTypes.default
+  }
+
+  return slot
+})
 </script>
 <script lang="ts">
 export default {
@@ -136,7 +166,7 @@ export default {
       :key="`node-${node.id}`"
       :class="[
         'vue-flow__node',
-        `vue-flow__node-${props.name}`,
+        `vue-flow__node-${name}`,
         store.noPanClassName,
         {
           dragging: node.dragging,
@@ -159,7 +189,8 @@ export default {
       @click="onSelectNodeHandler"
       @dblclick="onDoubleClick"
     >
-      <slot
+      <component
+        :is="type"
         v-bind="{
           nodeElement,
           id: node.id,
diff --git a/package/src/container/EdgeRenderer/EdgeRenderer.vue b/package/src/container/EdgeRenderer/EdgeRenderer.vue
index 7c3ac221..67aa8a2c 100644
--- a/package/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/package/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -3,44 +3,10 @@ import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
 import { useVueFlow } from '../../composables'
 import { groupEdgesByZLevel } from '../../utils'
-import { Slots } from '../../context'
-import { EdgeComponent } from '../../types'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
 const { store } = useVueFlow()
 
-const slots = inject(Slots)
-
-const names: Record<string, string> = reactive({})
-
-const getType = (name = 'default') => {
-  const instance = getCurrentInstance()
-  let edgeType = store.getEdgeTypes[name]
-  if (typeof edgeType === 'string') {
-    if (instance) {
-      const components = Object.keys(instance.appContext.components)
-      if (components && components.includes(name)) {
-        edgeType = resolveComponent(name, false) as EdgeComponent
-      }
-    }
-  }
-
-  if (typeof edgeType !== 'string') {
-    names[name] = name
-    return edgeType
-  }
-
-  const slot = slots?.[`node-${name}`]
-  if (!slot?.({})) {
-    console.warn(`[vueflow]: Edge type "${name}" not found and no edge-slot detected. Using fallback type "default".`)
-    names[name] = 'default'
-    return store.getEdgeTypes.default
-  }
-
-  names[name] = name
-  return slot
-}
-
 const sourceNode = controlledComputed(
   () => store.connectionNodeId,
   () => {
@@ -80,17 +46,10 @@ export default {
         :id="edge.id"
         :key="edge.id"
         :edge="edge"
-        :name="typeof edge.type !== 'undefined' && typeof names[edge.type] !== 'undefined' ? names[edge.type] : 'default'"
         :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
         :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
-      >
-        <template #default="props">
-          <component :is="getType(edge.type)" v-bind="props" />
-        </template>
-      </EdgeWrapper>
-      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
-        <slot name="connection-line" />
-      </ConnectionLine>
+      />
+      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode" />
     </g>
   </svg>
 </template>
diff --git a/package/src/container/NodeRenderer/NodeRenderer.vue b/package/src/container/NodeRenderer/NodeRenderer.vue
index c18d5760..8f8765fb 100644
--- a/package/src/container/NodeRenderer/NodeRenderer.vue
+++ b/package/src/container/NodeRenderer/NodeRenderer.vue
@@ -1,41 +1,8 @@
 <script lang="ts" setup>
 import NodeWrapper from '../../components/Nodes/NodeWrapper.vue'
 import { useVueFlow } from '../../composables'
-import { NodeComponent } from '../../types'
-import { Slots } from '../../context'
 
 const { store } = useVueFlow()
-const slots = inject(Slots)
-
-const names: Record<string, string> = reactive({})
-
-const getType = (name = 'default') => {
-  const instance = getCurrentInstance()
-  let nodeType = store.getNodeTypes[name]
-  if (typeof nodeType === 'string') {
-    if (instance) {
-      const components = Object.keys(instance.appContext.components)
-      if (components && components.includes(name)) {
-        nodeType = resolveComponent(name, false) as NodeComponent
-      }
-    }
-  }
-
-  if (typeof nodeType !== 'string') {
-    names[name] = name
-    return nodeType
-  }
-
-  const slot = slots?.[`node-${name}`]
-  if (!slot?.({})) {
-    console.warn(`[vueflow]: Node type "${name}" not found and no node-slot detected. Using fallback type "default".`)
-    names[name] = 'default'
-    return store.getNodeTypes.default
-  }
-
-  names[name] = name
-  return slot
-}
 </script>
 <script lang="ts">
 export default {
@@ -49,15 +16,10 @@ export default {
       :id="node.id"
       :key="`vue-flow__node-${node.id}`"
       :node="node"
-      :name="typeof node.type !== 'undefined' && typeof names[node.type] !== 'undefined' ? names[node.type] : 'default'"
       :draggable="typeof node.draggable === 'undefined' ? store.nodesDraggable : !!node.draggable"
       :selectable="typeof node.selectable === 'undefined' ? store.elementsSelectable : !!node.selectable"
       :connectable="typeof node.connectable === 'undefined' ? store.nodesConnectable : !!node.connectable"
       :snap-grid="node.snapGrid ?? (store.snapToGrid ? store.snapGrid : undefined)"
-    >
-      <template #default="props">
-        <component :is="getType(node.type)" v-bind="props" />
-      </template>
-    </NodeWrapper>
+    />
   </div>
 </template>