feat(connection): Extend connection line props for more advanced usage

Signed-off-by: Braks <[email protected]>

Author: bcakmakoglu

src/components/ConnectionLine/ConnectionLine.vue

@@ -11,6 +11,7 @@ import {
   ConnectionMode,
   VFInternals,
   Transform,
+  GraphNode,
 } from '../../types'
 
 interface ConnectionLineProps {
@@ -22,6 +23,7 @@ interface ConnectionLineProps {
   connectionHandleType?: HandleType
   connectionPosition?: XYPosition
   connectionMode: ConnectionMode
+  nodes: GraphNode[]
   transform: Transform
 }
 
@@ -31,6 +33,7 @@ const props = withDefaults(defineProps<ConnectionLineProps>(), {
   connectionPosition: () => ({ x: 0, y: 0 }),
 })
 
+const sourceNode = props.nodes.find((n) => n.id === props.connectionNodeId)
 const sourceHandle =
   props.connectionHandleId && props.connectionHandleType
     ? props.vf.handleBounds[props.connectionHandleType]?.find((d: HandleElement) => d.id === props.connectionHandleId)
@@ -101,6 +104,9 @@ export default {
         targetPosition,
         connectionLineType: props.connectionLineType,
         connectionLineStyle: props.connectionLineStyle,
+        nodes: props.nodes,
+        sourceNode,
+        sourceHandle,
       }"
     >
       <path :d="dAttr" class="vue-flow__connection-path" :style="props.connectionLineStyle" />

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -112,6 +112,7 @@ export default {
         :connection-handle-type="props.connectionHandleType"
         :connection-position="props.connectionPosition"
         :connection-mode="props.connectionMode"
+        :nodes="props.nodes"
         :transform="props.transform"
       >
         <template #default="customConnectionLineProps">

src/types/components.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'vue'
 import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
-import { Connection } from './connection'
-import { Node } from './node'
+import { Connection, ConnectionLineType } from './connection'
+import { GraphNode, Node } from './node'
 
 export type HandleType = 'source' | 'target'
 
@@ -33,7 +33,7 @@ export interface ControlEvents {
   (event: 'interaction-change', active: boolean): void
 }
 
-export type StringFunc = (node: Node) => string
+export type StringFunc = (node: Node | GraphNode) => string
 export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
 
 export interface MiniMapProps {
@@ -72,3 +72,17 @@ export interface EdgeTextProps {
   labelBgPadding?: [number, number]
   labelBgBorderRadius?: number
 }
+
+interface CustomConnectionLineProps {
+  sourceX: number
+  sourceY: number
+  sourcePosition: Position
+  targetX: number
+  targetY: number
+  targetPosition: Position
+  connectionLineType: ConnectionLineType
+  connectionLineStyle: CSSProperties
+  nodes: GraphNode[]
+  sourceNode: GraphNode
+  sourceHandle: HandleElement
+}