refactor: pass props to edge/nodewrapper separately

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

examples/Basic/Basic.vue

@@ -16,8 +16,8 @@ import {
   useVueFlow,
 } from '~/index'
 
-const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
+const onNodeDragStop = (e) => console.log('drag stop', e)
-const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
+const onElementClick = (e) => console.log('click', e)
 const elements = ref<Elements>([
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
@@ -26,12 +26,12 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const rfInstance = ref<FlowInstance | null>(null)
+const vfInstance = ref<FlowInstance>()
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView({ padding: 0.1 })
-  rfInstance.value = flowInstance
+  vfInstance.value = flowInstance
 }
 
 const updatePos = () => {
@@ -46,8 +46,8 @@ const updatePos = () => {
   })
 }
 
-const logToObject = () => console.log(rfInstance.value?.toObject())
+const logToObject = () => console.log(vfInstance.value?.toObject())
-const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const resetTransform = () => vfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 
 const toggleclasss = () => {
   elements.value = elements.value.map((el) => {
@@ -64,11 +64,11 @@ const toggleclasss = () => {
     :min-zoom="0.2"
     :max-zoom="4"
     :zoom-on-scroll="false"
+    :worker="true"
     @elements-remove="onElementsRemove"
     @connect="onConnect"
     @node-drag-stop="onNodeDragStop"
     @node-click="onElementClick"
-    @elementClick="onElementClick"
     @load="onLoad"
   >
     <MiniMap />

package.json

@@ -37,7 +37,6 @@
     "d3": "^7.1.1",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "defu": "^5.0.0",
     "microdiff": "^1.2.0",
     "pinia": "^2.0.0-rc.10"
   },

src/components/Edges/BezierEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties, DefineComponent } from 'vue'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import { getCenter, getMarkerEnd, getBezierPath } from './utils'
 import EdgeText from './EdgeText.vue'
 
@@ -19,8 +19,8 @@ interface BezierEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: Component | DefineComponent
+        component: DefineComponent<EdgeTextProps>
-        props?: Record<string, any>
+        props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
   labelShowBg?: boolean

src/components/Edges/EdgeText.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties, DefineComponent } from 'vue'
 
 interface EdgeTextProps {
   x: number
@@ -7,7 +7,7 @@ interface EdgeTextProps {
   label?:
     | string
     | {
-        component: Component | DefineComponent
+        component: DefineComponent
         props?: Record<string, any>
       }
   labelStyle?: CSSProperties

src/components/Edges/EdgeWrapper.vue

@@ -1,12 +1,39 @@
 <script lang="ts" setup>
+import { CSSProperties, DefineComponent } from 'vue'
 import { useHandle, useStore } from '../../composables'
-import { ConnectionMode, Edge, EdgePositions, Position } from '../../types'
+import { ArrowHeadType, ConnectionMode, Edge, EdgePositions, EdgeTextProps, ElementId, Position } from '../../types'
 import { isEdge, getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
 
 interface EdgeWrapper {
+  id: ElementId
   edge: Edge
+  type?: string
+  source: ElementId
+  target: ElementId
+  sourceHandle?: ElementId | null
+  targetHandle?: ElementId | null
+  selected?: boolean
+  sourcePosition?: Position
+  targetPosition?: Position
+  label?:
+    | string
+    | {
+        component: DefineComponent<EdgeTextProps>
+        props?: EdgeTextProps
+      }
+  labelStyle?: any
+  labelShowBg?: boolean
+  labelBgStyle?: any
+  labelBgPadding?: [number, number]
+  labelBgBorderRadius?: number
+  style?: CSSProperties | unknown
+  animated?: boolean
+  arrowHeadType?: ArrowHeadType
   markerEndId?: string
+  data?: any
+  class?: string
+  isHidden?: boolean
   edgeUpdaterRadius?: number
 }
 
@@ -15,7 +42,7 @@ const props = withDefaults(defineProps<EdgeWrapper>(), {})
 const store = useStore()
 
 const type = computed(() => {
-  const t = props.edge.type ?? 'default'
+  const t = props.type ?? 'default'
   let edge = store.getEdgeTypes[t]
   if (!edge) {
     edge = store.getEdgeTypes.default
@@ -53,8 +80,8 @@ const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigg
 
 const handler = useHandle()
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
-  const nodeId = isSourceHandle ? props.edge.target : props.edge.source
+  const nodeId = isSourceHandle ? props.target : props.source
-  const handleId = (isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle) ?? ''
+  const handleId = (isSourceHandle ? props.targetHandle : props.sourceHandle) ?? ''
   const isValidConnection = () => true
   const isTarget = isSourceHandle
 
@@ -92,11 +119,11 @@ const nodes = computed(() => {
   const n = getSourceTargetNodes(props.edge, store.nodes)
 
   if (!n.sourceNode) {
-    console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`)
+    console.warn(`couldn't create edge for source id: ${props.source}; edge id: ${props.id}`)
   }
 
   if (!n.targetNode) {
-    console.warn(`couldn't create edge for target id: ${props.edge.target}; edge id: ${props.edge.id}`)
+    console.warn(`couldn't create edge for target id: ${props.target}; edge id: ${props.id}`)
   }
 
   return n
@@ -111,17 +138,17 @@ const targetNodeHandles = computed(() =>
 
 const sourceHandle = computed(() => {
   if (nodes.value.sourceNode && nodes.value.sourceNode.__vf?.handleBounds?.source)
-    return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle ?? null)
+    return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.sourceHandle ?? null)
   else return null
 })
 const targetHandle = computed(() => {
-  if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null)
+  if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.targetHandle ?? null)
   else return null
 })
 const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
 
-const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) ?? false)
+const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.id) ?? false)
 const edgePos = computed(() =>
   getEdgePositions(
     nodes.value.sourceNode,
@@ -141,17 +168,17 @@ export default {
 </script>
 <template>
   <g
-    v-show="!props.edge.isHidden && isVisible(edgePos)"
+    v-show="!props.isHidden && isVisible(edgePos)"
     :class="[
       'vue-flow__edge',
-      `vue-flow__edge-${props.edge.type || 'default'}`,
+      `vue-flow__edge-${props.type || 'default'}`,
       {
         selected: isSelected,
-        animated: props.edge.animated,
+        animated: props.animated,
         inactive: !elementsSelectable,
         updating,
       },
-      props.edge.class,
+      props.class,
     ]"
     @click="onEdgeClick"
     @dblClick="onDoubleClick"
@@ -163,20 +190,20 @@ export default {
     <slot
       v-if="edgePos.sourceX && edgePos.sourceY && edgePos.targetX && edgePos.targetY"
       v-bind="{
-        id: props.edge.id,
+        id: props.id,
-        source: props.edge.source,
+        source: props.source,
-        target: props.edge.target,
+        target: props.target,
         selected: isSelected,
-        animated: props.edge.animated,
+        animated: props.animated,
-        label: props.edge.label,
+        label: props.label,
-        labelStyle: props.edge.labelStyle,
+        labelStyle: props.labelStyle,
-        labelShowBg: props.edge.labelShowBg,
+        labelShowBg: props.labelShowBg,
-        labelBgStyle: props.edge.labelBgStyle,
+        labelBgStyle: props.labelBgStyle,
-        labelBgPadding: props.edge.labelBgPadding,
+        labelBgPadding: props.labelBgPadding,
-        labelBgBorderRadius: props.edge.labelBgBorderRadius,
+        labelBgBorderRadius: props.labelBgBorderRadius,
-        data: props.edge.data,
+        data: props.data,
-        style: props.edge.style,
+        style: props.style,
-        arrowHeadType: props.edge.arrowHeadType,
+        arrowHeadType: props.arrowHeadType,
         sourcePosition,
         targetPosition,
         sourceX: edgePos.sourceX,
@@ -184,28 +211,28 @@ export default {
         targetX: edgePos.targetX,
         targetY: edgePos.targetY,
         markerEndId: props.markerEndId,
-        sourceHandleId: props.edge.sourceHandle,
+        sourceHandleId: props.sourceHandle,
-        targetHandleId: props.edge.targetHandle,
+        targetHandleId: props.targetHandle,
       }"
     >
       <component
         :is="type"
         v-if="typeof type !== 'boolean'"
         v-bind="{
-          id: props.edge.id,
+          id: props.id,
-          source: props.edge.source,
+          source: props.source,
-          target: props.edge.target,
+          target: props.target,
           selected: isSelected,
-          animated: props.edge.animated,
+          animated: props.animated,
-          label: props.edge.label,
+          label: props.label,
-          labelStyle: props.edge.labelStyle,
+          labelStyle: props.labelStyle,
-          labelShowBg: props.edge.labelShowBg,
+          labelShowBg: props.labelShowBg,
-          labelBgStyle: props.edge.labelBgStyle,
+          labelBgStyle: props.labelBgStyle,
-          labelBgPadding: props.edge.labelBgPadding,
+          labelBgPadding: props.labelBgPadding,
-          labelBgBorderRadius: props.edge.labelBgBorderRadius,
+          labelBgBorderRadius: props.labelBgBorderRadius,
-          data: props.edge.data,
+          data: props.data,
-          style: props.edge.style,
+          style: props.style,
-          arrowHeadType: props.edge.arrowHeadType,
+          arrowHeadType: props.arrowHeadType,
           sourcePosition,
           targetPosition,
           sourceX: edgePos.sourceX,
@@ -213,8 +240,8 @@ export default {
           targetX: edgePos.targetX,
           targetY: edgePos.targetY,
           markerEndId: props.markerEndId,
-          sourceHandleId: props.edge.sourceHandle,
+          sourceHandleId: props.sourceHandle,
-          targetHandleId: props.edge.targetHandle,
+          targetHandleId: props.targetHandle,
         }"
       />
     </slot>

src/components/Edges/SmoothStepEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties, DefineComponent } from 'vue'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
 
@@ -19,8 +19,8 @@ interface SmoothStepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: Component | DefineComponent
+        component: DefineComponent<EdgeTextProps>
-        props?: Record<string, any>
+        props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
   labelShowBg?: boolean

src/components/Edges/StepEdge.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties, DefineComponent } from 'vue'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import SmoothStepEdge from './SmoothStepEdge.vue'
 
-export interface StepEdgeProps extends EdgeProps {
+interface StepEdgeProps extends EdgeProps {
   id: ElementId
   source: ElementId
   target: ElementId
@@ -18,8 +18,8 @@ export interface StepEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: Component | DefineComponent
+        component: DefineComponent<EdgeTextProps>
-        props?: Record<string, any>
+        props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
   labelShowBg?: boolean

src/components/Edges/StraightEdge.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { Component, CSSProperties, DefineComponent } from 'vue'
+import { CSSProperties, DefineComponent } from 'vue'
-import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
+import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
 import EdgeText from './EdgeText.vue'
 import { getMarkerEnd, getBezierPath } from './utils'
 
@@ -19,8 +19,8 @@ interface StraightEdgeProps extends EdgeProps {
   label?:
     | string
     | {
-        component: Component | DefineComponent
+        component: DefineComponent<EdgeTextProps>
-        props?: Record<string, any>
+        props?: EdgeTextProps
       }
   labelStyle?: CSSProperties
   labelShowBg?: boolean

src/components/Nodes/NodeWrapper.vue

@@ -1,13 +1,28 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
+import { CSSProperties } from 'vue'
 import { useStore } from '../../composables'
-import { FlowEvents, GraphNode, SnapGrid } from '../../types'
+import { ElementId, FlowEvents, GraphNode, Position, SnapGrid, VFInternals, XYPosition } from '../../types'
 import { NodeId } from '../../context'
 
 interface NodeWrapperProps {
   node: GraphNode
+  vf: VFInternals
   selectNodesOnDrag?: boolean
   snapGrid?: SnapGrid
+  id: ElementId
+  position: XYPosition
+  type?: string
+  class?: string
+  style?: CSSProperties
+  data?: any
+  targetPosition?: Position
+  sourcePosition?: Position
+  isHidden?: boolean
+  draggable?: boolean
+  selectable?: boolean
+  connectable?: boolean
+  dragHandle?: string
 }
 
 interface NodeEvents {
@@ -25,12 +40,12 @@ const props = withDefaults(defineProps<NodeWrapperProps>(), {
 })
 
 const store = useStore()
-provide(NodeId, props.node.id)
+provide(NodeId, props.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
 const type = computed(() => {
-  const t = props.node.type ?? 'default'
+  const t = props.type ?? 'default'
   let node = store.getNodeTypes[t]
   if (!node) {
     node = store.getNodeTypes.default
@@ -39,24 +54,20 @@ const type = computed(() => {
   return node
 })
 
-const selectable = computed(() =>
+const selectable = computed(() => (typeof props.selectable === 'undefined' ? store.elementsSelectable : props.selectable))
-  typeof props.node.selectable === 'undefined' ? store.elementsSelectable : props.node.selectable,
+const draggable = computed(() => (typeof props.draggable === 'undefined' ? store.nodesDraggable : props.draggable))
-)
+const connectable = computed(() => (typeof props.connectable === 'undefined' ? store.nodesConnectable : props.connectable))
-const draggable = computed(() => (typeof props.node.draggable === 'undefined' ? store.nodesDraggable : props.node.draggable))
-const connectable = computed(() =>
-  typeof props.node.connectable === 'undefined' ? store.nodesConnectable : props.node.connectable,
-)
 const scale = computed(() => store.transform[2])
-const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.node.id))
+const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.id))
 
 const onMouseEnterHandler = () =>
-  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
+  props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
 
 const onMouseMoveHandler = () =>
-  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
+  props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
 
 const onMouseLeaveHandler = () =>
-  props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
+  props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
 
 const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
 
@@ -69,9 +80,8 @@ const onSelectNodeHandler = (event: MouseEvent) => {
       store.unsetNodesSelection()
       if (!selected.value) store.addSelectedElements([n])
     }
+    store.hooks.nodeClick.trigger({ event, node: n })
   }
-  store.hooks.elementClick.trigger({ event, element: n })
-  store.hooks.nodeClick.trigger({ event, node: n })
 }
 
 const onDragStart: DraggableEventListener = ({ event }) => {
@@ -95,7 +105,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
   store.hooks.nodeDrag.trigger({ event, node: n })
 
   store.updateNodePosDiff({
-    id: props.node.id,
+    id: props.id,
     diff: {
       x: data.deltaX,
       y: data.deltaY,
@@ -108,11 +118,12 @@ const onDragStop: DraggableEventListener = ({ event }) => {
   const n = props.node
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
-  if (!props.node.__vf.isDragging) {
+  if (!props.vf.isDragging) {
     if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
       store.addSelectedElements([n])
     }
     store.hooks.nodeClick.trigger({ event, node: n })
+    store.hooks.elementClick.trigger({ event, element: n })
 
     return
   }
@@ -127,7 +138,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
 
 onMounted(() => {
   store.updateNodeDimensions({
-    id: props.node.id,
+    id: props.id,
     nodeElement: nodeElement.value,
     forceUpdate: true,
   })
@@ -141,10 +152,10 @@ onMounted(() => {
     }),
   )
 
-  watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => {
+  watch([() => props.type, () => props.sourcePosition, () => props.targetPosition], () => {
     nextTick(() => {
       store.updateNodeDimensions({
-        id: props.node.id,
+        id: props.id,
         nodeElement: nodeElement.value,
         forceUpdate: true,
       })
@@ -160,7 +171,7 @@ export default {
 <template>
   <DraggableCore
     cancel=".nodrag"
-    :handle="props.node.dragHandle"
+    :handle="props.dragHandle"
     :disabled="!draggable"
     :scale="scale"
     :grid="props.snapGrid"
@@ -173,21 +184,21 @@ export default {
       ref="node-element"
       :class="[
         'vue-flow__node',
-        `vue-flow__node-${props.node.type}`,
+        `vue-flow__node-${props.type}`,
         {
           selected,
           selectable: selectable,
         },
-        props.node.class,
+        props.class,
       ]"
       :style="{
         zIndex: selected ? 10 : 3,
-        transform: `translate(${props.node.__vf?.position?.x}px,${props.node.__vf?.position?.y}px)`,
+        transform: `translate(${props.vf.position.x}px,${props.vf.position.y}px)`,
         pointerEvents: selectable || draggable ? 'all' : 'none',
-        opacity: props.node.__vf?.width !== null && props.node.__vf?.height !== null ? 1 : 0,
+        opacity: props.vf.width !== null && props.vf.height !== null ? 1 : 0,
-        ...props.node.style,
+        ...props.style,
       }"
-      :data-id="props.node.id"
+      :data-id="props.id"
       @mouseenter="onMouseEnterHandler"
       @mousemove="onMouseMoveHandler"
       @mouseleave="onMouseLeaveHandler"
@@ -197,31 +208,31 @@ export default {
     >
       <slot
         v-bind="{
-          id: props.node.id,
+          id: props.id,
-          data: props.node.data,
+          data: props.data,
-          type: props.node.type,
+          type: props.type,
-          xPos: props.node.__vf?.position?.x,
+          xPos: props.vf.position.x,
-          yPos: props.node.__vf?.position?.y,
+          yPos: props.vf.position.y,
           selected,
           connectable,
-          sourcePosition: props.node.sourcePosition,
+          sourcePosition: props.sourcePosition,
-          targetPosition: props.node.targetPosition,
+          targetPosition: props.targetPosition,
-          dragging: props.node.__vf?.isDragging,
+          dragging: props.vf.isDragging,
         }"
       >
         <component
           :is="type"
           v-bind="{
-            id: props.node.id,
+            id: props.id,
-            data: props.node.data,
+            data: props.data,
-            type: props.node.type,
+            type: props.type,
-            xPos: props.node.__vf?.position?.x,
+            xPos: props.vf.position.x,
-            yPos: props.node.__vf?.position?.y,
+            yPos: props.vf.position.y,
             selected,
             connectable,
-            sourcePosition: props.node.sourcePosition,
+            sourcePosition: props.sourcePosition,
-            targetPosition: props.node.targetPosition,
+            targetPosition: props.targetPosition,
-            dragging: props.node.__vf?.isDragging,
+            dragging: props.vf.isDragging,
           }"
         />
       </slot>

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -40,9 +40,30 @@ export default {
     <g :transform="transform">
       <Edge
         v-for="(edge, i) of store.getEdges"
+        :id="edge.id"
         :key="`${edge.id}-${i}`"
         :edge="edge"
-        :marker-end-id="props.markerEndId"
+        :type="edge.type"
+        :source="edge.source"
+        :target="edge.target"
+        :source-handle="edge.sourceHandle"
+        :target-handle="edge.targetHandle"
+        :selected="edge.selected"
+        :source-position="edge.sourcePosition"
+        :target-position="edge.targetPosition"
+        :label="edge.label"
+        :label-tyle="edge.labelStyle"
+        :label-show-bg="edge.labelShowBg"
+        :label-bg-style="edge.labelBgStyle"
+        :label-bg-padding="edge.labelBgPadding"
+        :label-bg-border-radius="edge.labelBgBorderRadius"
+        :style="edge.style"
+        :animated="edge.animated"
+        :arrow-head-type="edge.arrowHeadType"
+        :data="edge.data"
+        :class="edge.class"
+        :is-hidden="edge.isHidden"
+        :marker-end-id="edge.markerEndId ?? props.markerEndId"
         :edge-updater-radius="props.edgeUpdaterRadius"
       >
         <template #default="edgeProps">

src/container/NodeRenderer/NodeRenderer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useStore } from '../../composables'
-import Node from '../../components/Nodes/NodeWrapper.vue'
 import { SnapGrid } from '../../types'
+import Node from '../../components/Nodes/NodeWrapper.vue'
 
 interface NodeRendererProps {
   selectNodesOnDrag?: boolean
@@ -20,15 +20,29 @@ const snapGrid = computed(() => (props.snapToGrid || store.snapToGrid ? props.sn
 </script>
 <script lang="ts">
 export default {
-  name: 'Nodes',
+  name: 'Node',
 }
 </script>
 <template>
   <div class="vue-flow__nodes" :style="{ transform }">
     <Node
       v-for="node of store.getNodes"
+      :id="node.id"
       :key="node.id"
       :node="node"
+      :vf="node.__vf"
+      :position="node.position"
+      :type="node.type"
+      :class="node.class"
+      :style="node.style"
+      :data="node.data"
+      :target-position="node.targetPosition"
+      :source-position="node.sourcePosition"
+      :is-hidden="node.isHidden"
+      :draggable="node.draggable"
+      :selectable="node.selectable"
+      :connectable="node.connectable"
+      :drag-handle="node.dragHandle"
       :snap-grid="snapGrid"
       :select-nodes-on-drag="props.selectNodesOnDrag"
     >

src/container/VueFlow/VueFlow.vue

@@ -116,15 +116,16 @@ const options = Object.assign({}, store.$state, props)
 
 const init = async (state: FlowState) => {
   // set state variables
+  const skip = ['modelValue', 'd3Zoom', 'd3Selection', 'd3ZoomHandler', 'minZoom', 'maxZoom', 'translateExtent', 'nodeExtent']
   for (const opt of Object.keys(state)) {
     const val = state[opt as keyof FlowState]
-    if (typeof val !== 'undefined' && opt !== 'modelValue' && opt !== 'elements') {
+    if (typeof val !== 'undefined' && !skip.includes(opt)) {
       if (typeof val === 'object' && !Array.isArray(val)) {
         ;(store as any)[opt] = { ...(store as any)[opt], ...val }
       } else (store as any)[opt] = val
     }
   }
-  await until(() => store.d3Zoom).not.toBeUndefined()
+  if (!store.isReady) await until(() => store.d3Zoom).not.toBeUndefined()
   store.setMinZoom(state.minZoom)
   store.setMaxZoom(state.maxZoom)
   store.setTranslateExtent(state.translateExtent)
@@ -155,12 +156,6 @@ invoke(async () => {
   }
   store.hooks.load.trigger(instance)
   store.instance = instance
-})
-
-throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
-throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
-
-onMounted(() => {
   watch(
     () => props,
     () => init({ ...store.$state, ...props } as FlowState),
@@ -168,6 +163,9 @@ onMounted(() => {
   )
 })
 
+throttledWatch(elements, store.setElements, { flush: 'post', deep: true, throttle: 10 })
+throttledWatch(store.elements, (val) => (elements.value = val), { flush: 'post', deep: true, throttle: 10 })
+
 const transitionName = computed(() => {
   let name = ''
   if (typeof store.loading === 'object' && store.loading.transition) {

src/store/stateStore.ts

@@ -87,11 +87,9 @@ export default (id: string, preloadedState: FlowState) => {
             next = res
           } else next = await parseElements(elements, this.nodes, this.edges, this.nodeExtent)
         }
-        if (next) {
+        this.elements = [...next.nextNodes, ...next.nextEdges]
-          this.elements = [...next.nextNodes, ...next.nextEdges]
+        this.nodes = next.nextNodes ?? []
-          this.nodes = next?.nextNodes ?? []
+        this.edges = next.nextEdges ?? []
-          this.edges = next?.nextEdges ?? []
-        }
       },
       updateNodeDimensions({ id, nodeElement, forceUpdate }) {
         const i = this.nodes.map((x) => x.id).indexOf(id)

src/types/edge.ts

@@ -1,5 +1,6 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
 import { ArrowHeadType, ElementId, Position } from './flow'
+import { EdgeTextProps } from '~/types/components'
 
 export interface Edge<T = any> {
   id: ElementId
@@ -14,8 +15,8 @@ export interface Edge<T = any> {
   label?:
     | string
     | {
-        component: Component | DefineComponent
+        component: DefineComponent<EdgeTextProps>
-        props?: Record<string, any>
+        props?: EdgeTextProps
       }
   labelStyle?: any
   labelShowBg?: boolean

src/types/node.ts

@@ -2,7 +2,7 @@ import { Component, CSSProperties, DefineComponent } from 'vue'
 import { XYPosition, ElementId, Position } from './flow'
 import { HandleElement } from './components'
 
-interface VFInternals {
+export interface VFInternals {
   position: XYPosition
   isDragging?: boolean
   width: number

src/utils/store.ts

@@ -114,11 +114,7 @@ export const parseElements = async (elements: Elements, nodes: GraphNode[], edge
             ...storeNode,
             ...element,
           }
-          if (!updatedNode.__vf) updatedNode.__vf = {} as any
+          updatedNode.__vf!.position = element.position
-
-          if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
-            updatedNode.__vf!.position = element.position
-          }
 
           if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
             // we reset the elements dimensions here in order to force a re-calculation of the bounds.

src/workers/parseElements.ts

@@ -49,11 +49,7 @@ export default () =>
 
         if (storeNode) {
           const updatedNode = Object.assign(storeNode, element)
-          if (!updatedNode.__vf) updatedNode.__vf = {} as any
+          updatedNode.__vf!.position = element.position
-
-          if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
-            updatedNode.__vf!.position = element.position
-          }
 
           if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
             // we reset the elements dimensions here in order to force a re-calculation of the bounds.

yarn.lock

@@ -1974,11 +1974,6 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
-defu@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/defu/-/defu-5.0.0.tgz#5768f0d402a555bfc4c267246b20f82ce8b5a10b"
-  integrity sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ==
-
 del@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/del/-/del-6.0.0.tgz#0b40d0332cea743f1614f818be4feb717714c952"