update: use controlledComputed for edges/nodes

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/ConnectionLine/ConnectionLine.vue

@@ -1,13 +1,28 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
-import { useStore } from '../../composables'
+import {
-import { ConnectionLineType, HandleElement, GraphNode, Position } from '../../types'
+  ConnectionLineType,
+  HandleElement,
+  Position,
+  ElementId,
+  HandleType,
+  XYPosition,
+  ConnectionMode,
+  VFInternals,
+  Transform,
+} from '../../types'
 
 interface ConnectionLineProps {
-  sourceNode: GraphNode
+  vf: VFInternals
   connectionLineType?: ConnectionLineType
   connectionLineStyle?: CSSProperties
+  connectionHandleId: ElementId
+  connectionNodeId: ElementId
+  connectionHandleType: HandleType
+  connectionPosition: XYPosition
+  connectionMode: ConnectionMode
+  transform: Transform
 }
 
 const props = withDefaults(defineProps<ConnectionLineProps>(), {
@@ -15,24 +30,20 @@ const props = withDefaults(defineProps<ConnectionLineProps>(), {
   connectionLineStyle: () => ({}),
 })
 
-const store = useStore()
-
 const sourceHandle =
-  store.connectionHandleId && store.connectionHandleType
+  props.connectionHandleId && props.connectionHandleType
-    ? props.sourceNode.__vf.handleBounds[store.connectionHandleType]?.find(
+    ? props.vf.handleBounds[props.connectionHandleType]?.find((d: HandleElement) => d.id === props.connectionHandleId)
-        (d: HandleElement) => d.id === store.connectionHandleId,
+    : props.connectionHandleType && props.vf.handleBounds[props.connectionHandleType ?? 'source']?.[0]
-      )
+const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.vf.width as number) / 2
-    : store.connectionHandleType && props.sourceNode.__vf.handleBounds[store.connectionHandleType ?? 'source']?.[0]
+const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.vf.height
-const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__vf?.width as number) / 2
+const sourceX = props.vf.position.x + sourceHandleX
-const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__vf?.height
+const sourceY = props.vf.position.y + sourceHandleY
-const sourceX = props.sourceNode.__vf?.position?.x + sourceHandleX
-const sourceY = props.sourceNode.__vf?.position?.y + sourceHandleY
 
 const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
 const targetPosition = isRightOrLeft ? Position.Left : Position.Top
 
-const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2])
+const targetX = computed(() => (props.connectionPosition.x - props.transform[0]) / props.transform[2])
-const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2])
+const targetY = computed(() => (props.connectionPosition.y - props.transform[1]) / props.transform[2])
 
 const dAttr = computed(() => {
   let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`

src/components/Edges/EdgeWrapper.vue

@@ -22,7 +22,7 @@ interface EdgeWrapper {
     | string
     | {
         component: any
-        props?: EdgeTextProps
+        props?: EdgeTextProps | any
       }
   labelStyle?: any
   labelShowBg?: boolean

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,6 +1,17 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import { ConnectionLineType, Dimensions, Edge, EdgeComponent, GraphNode, HandleType, Transform } from '../../types'
+import {
+  ConnectionLineType,
+  ConnectionMode,
+  Dimensions,
+  Edge,
+  EdgeComponent,
+  ElementId,
+  GraphNode,
+  HandleType,
+  Transform,
+  XYPosition,
+} from '../../types'
 import { getSourceTargetNodes } from '../../utils'
 import EdgeWrapper from '../../components/Edges/EdgeWrapper.vue'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
@@ -18,8 +29,11 @@ interface EdgeRendererProps {
   markerEndId?: string
   elementsSelectable?: boolean
   edgeUpdaterRadius?: number
-  connectionNodeId?: string
+  connectionNodeId?: ElementId
   connectionHandleType?: HandleType
+  connectionHandleId?: ElementId
+  connectionPosition?: XYPosition
+  connectionMode: ConnectionMode
   nodesConnectable?: boolean
 }
 
@@ -39,17 +53,22 @@ const getType = (type: string) => {
   return edgeType
 }
 
-const sourceNode = computed(() => props.nodes.find((n) => n.id === props.connectionNodeId))
+const sourceNode = controlledComputed(
-const connectionLineVisible = computed(
+  () => props.connectionNodeId,
+  () => {
+    if (props.connectionNodeId) return props.nodes[props.nodes.map((n) => n.id).indexOf(props.connectionNodeId)]
+  },
+)
+const connectionLineVisible = controlledComputed(
+  () => props.connectionNodeId,
   () =>
     !!(
       sourceNode.value &&
-      (typeof sourceNode.value.selectable === 'undefined' ? props.nodesConnectable : sourceNode.value.selectable) &&
+      (typeof sourceNode.value.connectable === 'undefined' ? props.nodesConnectable : sourceNode.value.connectable) &&
       props.connectionNodeId &&
       props.connectionHandleType
     ),
 )
-
 const transform = computed(() => `translate(${props.transform[0]},${props.transform[1]}) scale(${props.transform[2]})`)
 
 const sourceTargetNodes = (edge: Edge) => {
@@ -105,9 +124,15 @@ export default {
       </EdgeWrapper>
       <ConnectionLine
         v-if="connectionLineVisible && sourceNode"
-        :source-node="sourceNode"
         :connection-line-style="props.connectionLineStyle"
         :connection-line-type="props.connectionLineType"
+        :connection-handle-id="props.connectionHandleId"
+        :vf="sourceNode?.__vf"
+        :connection-node-id="props.connectionNodeId"
+        :connection-handle-type="props.connectionHandleType"
+        :connection-position="props.connectionPosition"
+        :connection-mode="props.connectionMode"
+        :transform="props.transform"
       >
         <template #default="customConnectionLineProps">
           <slot name="custom-connection-line" v-bind="customConnectionLineProps"></slot>

src/container/VueFlow/VueFlow.vue

@@ -238,7 +238,10 @@ const transitionName = computed(() => {
                     :nodes="store.getNodes"
                     :elements-selectable="store.elementsSelectable"
                     :connection-node-id="store.connectionNodeId"
+                    :connction-handle-id="store.connectionHandleId"
                     :connection-handle-type="store.connectionHandleType"
+                    :connection-position="store.connectionPosition"
+                    :connection-mode="store.connectionMode"
                     :nodes-connectable="store.nodesConnectable"
                     :connection-line-type="store.connectionLineType"
                     :connection-line-style="store.connectionLineStyle"