From 70646c5f951173cbe104e0b2c7d533a18e151fd1 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 30 Mar 2022 15:58:54 +0200
Subject: [PATCH] update(edges): support fragments as edge slots

---
 package/src/components/Edges/EdgeWrapper.vue  | 44 +++----------------
 .../container/EdgeRenderer/EdgeRenderer.vue   | 41 ++++++++++++++++-
 2 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/package/src/components/Edges/EdgeWrapper.vue b/package/src/components/Edges/EdgeWrapper.vue
index 1f11e04e..66094b43 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, Position, EdgeComponent } from '../../types'
+import { ConnectionMode, Position } from '../../types'
 import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
-import { Slots } from '../../context'
 import EdgeAnchor from './EdgeAnchor.vue'
 
 interface EdgeWrapper {
   id: string
+  name: string
   selectable?: boolean
   updatable?: boolean
 }
@@ -98,44 +98,11 @@ 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
-  }
-  if (slot.length > 1) {
-    console.warn('[vue-flow]: More than one element in edge-slot detected. Using fallback to first slot item.')
-  }
-
-  return slot[0]
-})
 </script>
 <script lang="ts">
 export default {
   name: 'Edge',
+  inheritAttrs: false,
 }
 </script>
 <template>
@@ -143,7 +110,7 @@ export default {
     :key="`edge-${edge.id}`"
     :class="[
       'vue-flow__edge',
-      `vue-flow__edge-${name}`,
+      `vue-flow__edge-${props.name}`,
       store.noPanClassName,
       {
         selected: edge.selected,
@@ -160,8 +127,7 @@ export default {
     @mousemove="onEdgeMouseMove"
     @mouseleave="onEdgeMouseLeave"
   >
-    <component
-      :is="type"
+    <slot
       v-bind="{
         id: edge.id,
         sourceNode: edge.sourceNode,
diff --git a/package/src/container/EdgeRenderer/EdgeRenderer.vue b/package/src/container/EdgeRenderer/EdgeRenderer.vue
index dac10cc9..aaf372c7 100644
--- a/package/src/container/EdgeRenderer/EdgeRenderer.vue
+++ b/package/src/container/EdgeRenderer/EdgeRenderer.vue
@@ -3,10 +3,44 @@ 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,
   () => {
@@ -46,9 +80,14 @@ export default {
           v-for="edge of group.edges"
           :id="edge.id"
           :key="edge.id"
+          :name="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>
       </template>
       <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
         <slot name="connection-line" />