update: Add slots to CustomConnectionLine.vue, Edge.vue, Node.vue

examples/Basic/Basic.vue

@@ -38,7 +38,6 @@ const updatePos = () => {
         y: Math.random() * 400,
       }
     }
-
     return el
   })
 }
@@ -48,10 +47,7 @@ const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom:
 
 const toggleClassnames = () => {
   elements.value = elements.value.map((el: FlowElement) => {
-    if (isNode(el)) {
-      el.className = el.className === 'light' ? 'dark' : 'light'
-    }
-
+    if (isNode(el)) el.className = el.className === 'light' ? 'dark' : 'light'
     return el
   })
 }

examples/CustomConnectionLine/CustomConnectionLine.vue

@@ -15,7 +15,10 @@ const onElementsRemove = (elementsToRemove: Elements) =>
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
 </script>
 <template>
-  <Flow :elements="elements" :custom-connection-line="ConnectionLine" @elements-remove="onElementsRemove" @connect="onConnect">
+  <Flow :elements="elements" @elements-remove="onElementsRemove" @connect="onConnect">
+    <template #custom-connection-line="props">
+      <ConnectionLine v-bind="props" />
+    </template>
     <Background :variant="BackgroundVariant.Lines" />
   </Flow>
 </template>

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, CustomConnectionLine, HandleElement, Node, Position } from '~/types'
+import { ConnectionLineType, HandleElement, Node, Position } from '~/types'
 import { getBezierPath, getSmoothStepPath } from '~/components/Edges/utils'
 import { Store } from '~/context'
 
 interface ConnectionLineProps {
   sourceNode: Node
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
-  customConnectionLine?: CustomConnectionLine
 }
 
 const props = withDefaults(defineProps<ConnectionLineProps>(), {
@@ -73,20 +72,19 @@ const dAttr = computed(() => {
 </script>
 <template>
   <g class="revue-flow__connection">
-    <component
-      :is="props.customConnectionLine"
-      v-if="props.customConnectionLine"
+    <slot
       v-bind="{
-        sourceX: sourceX,
-        sourceY: sourceY,
+        sourceX,
+        sourceY,
         sourcePosition: sourceHandle.position,
-        targetX: targetX,
-        targetY: targetY,
-        targetPosition: targetPosition,
+        targetX,
+        targetY,
+        targetPosition,
         connectionLineType: props.connectionLineType,
         connectionLineStyle: props.connectionLineStyle,
       }"
-    />
-    <path v-else :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
+    >
+      <path :d="dAttr" class="revue-flow__connection-path" :style="props.connectionLineStyle" />
+    </slot>
   </g>
 </template>

src/components/Edges/Edge.vue

@@ -2,16 +2,14 @@
 import EdgeAnchor from './EdgeAnchor.vue'
 import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '~/container/EdgeRenderer/utils'
 import { isEdge } from '~/utils/graph'
-import { ConnectionMode, Dimensions, Edge, EdgeType, Position, Transform } from '~/types'
-import { onMouseDown } from '~/components/Handle/utils'
+import { ConnectionMode, Edge, EdgeType, Position } from '~/types'
 import { Hooks, Store } from '~/context'
+import { useHandle } from '~/composables'
 
 interface EdgeProps {
   type: EdgeType
   edge: Edge
   nodes: ReturnType<typeof getSourceTargetNodes>
-  dimensions: Dimensions
-  transform: Transform
   markerEndId?: string
   edgeUpdaterRadius?: number
 }
@@ -68,15 +66,15 @@ const onEdgeMouseMove = (event: MouseEvent) => hooks.edgeMouseMove.trigger({ eve
 
 const onEdgeMouseLeave = (event: MouseEvent) => hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
 
+const handler = useHandle()
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   const nodeId = isSourceHandle ? props.edge.target : props.edge.source
   const handleId = isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle
   const isValidConnection = () => true
   const isTarget = isSourceHandle
 
   hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
-  handleId &&
-    onMouseDown(event, store, hooks, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source')
+  handleId && handler(event, handleId, nodeId, isTarget, isValidConnection, isSourceHandle ? 'target' : 'source')
 }
 
 const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
@@ -95,9 +93,9 @@ const isVisible = ({ sourceX, sourceY, targetX, targetY }: ReturnType<typeof get
     ? isEdgeVisible({
         sourcePos: { x: sourceX, y: sourceY },
         targetPos: { x: targetX, y: targetY },
-        width: props.dimensions.width,
-        height: props.dimensions.height,
-        transform: props.transform,
+        width: store.dimensions.width,
+        height: store.dimensions.height,
+        transform: store.transform,
       })
     : true
 }
@@ -125,8 +123,7 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
     @mousemove="onEdgeMouseMove"
     @mouseleave="onEdgeMouseLeave"
   >
-    <component
-      :is="props.type"
+    <slot
       v-bind="{
         id: props.edge.id,
         source: props.edge.source,
@@ -152,7 +149,36 @@ const visible = computed(() => !props.edge.isHidden && isVisible(edgePos.value))
         sourceHandleId: props.edge.sourceHandle,
         targetHandleId: props.edge.targetHandle,
       }"
-    />
+    >
+      <component
+        :is="props.type"
+        v-bind="{
+          id: props.edge.id,
+          source: props.edge.source,
+          target: props.edge.target,
+          selected: isSelected,
+          animated: props.edge.animated,
+          label: props.edge.label,
+          labelStyle: props.edge.labelStyle,
+          labelShowBg: props.edge.labelShowBg,
+          labelBgStyle: props.edge.labelBgStyle,
+          labelBgPadding: props.edge.labelBgPadding,
+          labelBgBorderRadius: props.edge.labelBgBorderRadius,
+          data: props.edge.data,
+          style: props.edge.style,
+          arrowHeadType: props.edge.arrowHeadType,
+          sourcePosition,
+          targetPosition,
+          sourceX: edgePos.sourceX,
+          sourceY: edgePos.sourceY,
+          targetX: edgePos.targetX,
+          targetY: edgePos.targetY,
+          markerEndId: props.markerEndId,
+          sourceHandleId: props.edge.sourceHandle,
+          targetHandleId: props.edge.targetHandle,
+        }"
+      />
+    </slot>
     <g @mousedown="onEdgeUpdaterSourceMouseDown" @mouseenter="onEdgeUpdaterMouseEnter" @mouseout="onEdgeUpdaterMouseOut">
       <EdgeAnchor
         :position="sourcePosition"

src/components/Handle/Handle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { ElementId, Position } from '~/types'
-import { onMouseDown, ValidConnectionFunc } from '~/components/Handle/utils'
+import { ElementId, Position, ValidConnectionFunc } from '~/types'
 import { Hooks, Store } from '~/context'
+import { useHandle } from '~/composables'
 
 interface HandleProps {
   id?: string
@@ -22,19 +22,9 @@ const store = inject(Store)!
 const hooks = inject(Hooks)!
 const nodeId = inject<ElementId>('NodeIdContext')!
 
+const handler = useHandle()
 const onMouseDownHandler = (event: MouseEvent) =>
-  onMouseDown(
-    event,
-    store,
-    hooks,
-    props.id,
-    nodeId,
-    props.type === 'target',
-    props.isValidConnection ??
-      function () {
-        return true
-      },
-  )
+  handler(event, props.id, nodeId, props.type === 'target', props.isValidConnection)
 </script>
 <template>
   <div