feat(edges): Use slot injection for custom connection lines

package/src/components/ConnectionLine/ConnectionLine.vue

@@ -2,12 +2,20 @@
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
 import { ConnectionLineType, GraphNode, HandleElement, Position } from '../../types'
 import { useVueFlow } from '../../composables'
+import { Slots } from '../../context'
 
 interface ConnectionLineProps {
   sourceNode: GraphNode
 }
 const props = defineProps<ConnectionLineProps>()
 const { store } = useVueFlow()
+
+const slots = inject(Slots)?.['connection-line']?.({})
+const slot = slots?.[0]
+if (slots && slots.length > 1) {
+  console.warn('[vue-flow]: More than one element in connection-line-slot detected. Using fallback to first slot item.')
+}
+
 const sourceHandle =
   store.connectionHandleId && store.connectionHandleType
     ? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
@@ -68,7 +76,9 @@ export default {
 </script>
 <template>
   <g class="vue-flow__connection">
-    <slot
+    <component
+      :is="slot"
+      v-if="slot"
       v-bind="{
         sourceX,
         sourceY,
@@ -82,8 +92,7 @@ export default {
         sourceNode: props.sourceNode,
         sourceHandle,
       }"
-    >
+    />
-      <path :d="dAttr" class="vue-flow__connection-path" :style="store.connectionLineStyle || {}" />
+    <path v-else :d="dAttr" class="vue-flow__connection-path" :style="store.connectionLineStyle || {}" />
-    </slot>
   </g>
 </template>

package/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -52,11 +52,7 @@ export default {
           <slot v-if="edge.type" :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>
         </template>
       </EdgeWrapper>
-      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode">
+      <ConnectionLine v-if="connectionLineVisible && sourceNode" :source-node="sourceNode" />
-        <template #default="customConnectionLineProps">
-          <slot name="connection-line" v-bind="customConnectionLineProps"></slot>
-        </template>
-      </ConnectionLine>
     </g>
   </svg>
 </template>

package/src/container/TransformationPane/TransformationPane.vue

@@ -35,8 +35,7 @@ const transform = computed(() => `translate(${store.transform[0]}px,${store.tran
 <template>
   <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
     <NodeRenderer v-if="store.getNodes.length" :key="`node-renderer-${id}`" />
-    <EdgeRenderer :key="`edge-renderer-${id}`">
+    <EdgeRenderer :key="`edge-renderer-${id}`" />
-    </EdgeRenderer>
     <slot />
   </div>
 </template>