feat(edges): Add source-target-pos to graph-edge

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

src/components/Edges/EdgeWrapper.vue

@@ -12,35 +12,37 @@ interface EdgeWrapper {
   updatable?: boolean
 }
 
-const props = withDefaults(defineProps<EdgeWrapper>(), {})
+const props = defineProps<EdgeWrapper>()
+const emit = defineEmits(['update:edge'])
+const edge = useVModel(props, 'edge', emit)
 const { store } = useVueFlow()
 
-const updating = ref<boolean>(false)
+const updating = ref(false)
 const handler = useHandle()
 
 const onEdgeClick = (event: MouseEvent) => {
-  const data = { event, edge: props.edge }
+  const data = { event, edge: edge.value }
   if (store.elementsSelectable) {
     store.nodesSelectionActive = false
-    store.addSelectedEdges([props.edge])
+    store.addSelectedEdges([edge.value])
   }
   store.hooks.edgeClick.trigger(data)
 }
-const onEdgeContextMenu = (event: MouseEvent) => store.hooks.edgeContextMenu.trigger({ event, edge: props.edge })
+const onEdgeContextMenu = (event: MouseEvent) => store.hooks.edgeContextMenu.trigger({ event, edge: edge.value })
-const onDoubleClick = (event: MouseEvent) => store.hooks.edgeDoubleClick.trigger({ event, edge: props.edge })
+const onDoubleClick = (event: MouseEvent) => store.hooks.edgeDoubleClick.trigger({ event, edge: edge.value })
-const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
+const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: edge.value })
-const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: props.edge })
+const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: edge.value })
-const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
+const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: edge.value })
 const onEdgeUpdaterMouseEnter = () => (updating.value = true)
 const onEdgeUpdaterMouseOut = () => (updating.value = false)
 const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, true)
 const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, false)
 
 const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
-  const nodeId = isSourceHandle ? props.edge.target : props.edge.source
+  const nodeId = isSourceHandle ? edge.value.target : edge.value.source
-  const handleId = (isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle) ?? ''
+  const handleId = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
 
-  store.hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
+  store.hooks.edgeUpdateStart.trigger({ event, edge: edge.value })
   handler(
     event,
     handleId,
@@ -48,31 +50,57 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
     isSourceHandle,
     undefined,
     isSourceHandle ? 'target' : 'source',
-    (connection) => store.hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
+    (connection) => store.hooks.edgeUpdate.trigger({ edge: edge.value, connection }),
-    () => store.hooks.edgeUpdateEnd.trigger({ event, edge: props.edge }),
+    () => store.hooks.edgeUpdateEnd.trigger({ event, edge: edge.value }),
   )
 }
 
 // when connection type is loose we can define all handles as sources
 const targetNodeHandles = computed(() =>
   store.connectionMode === ConnectionMode.Strict
-    ? props.edge.targetNode.handleBounds.target
+    ? edge.value.targetNode.handleBounds.target
-    : props.edge.targetNode.handleBounds.target ?? props.edge.targetNode.handleBounds.source,
+    : edge.value.targetNode.handleBounds.target ?? edge.value.targetNode.handleBounds.source,
 )
-const sourceHandle = computed(() => getHandle(props.edge.sourceNode.handleBounds.source, props.edge.sourceHandle))
+const sourceHandle = controlledComputed(
-const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle))
+  () => edge.value.sourceNode.handleBounds,
+  () => getHandle(edge.value.sourceNode.handleBounds.source, edge.value.sourceHandle),
+)
+const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
 const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
-const edgePos = computed(() =>
+
-  getEdgePositions(
+onMounted(() => {
-    props.edge.sourceNode,
+  nextTick(() => {
-    sourceHandle.value,
+    watch(
-    sourcePosition.value,
+      [
-    props.edge.targetNode,
+        sourcePosition,
-    targetHandle.value,
+        targetPosition,
-    targetPosition.value,
+        () => edge.value.sourceNode.position,
-  ),
+        () => edge.value.targetNode.position,
-)
+        () => edge.value.sourceNode.computedPosition,
+        () => edge.value.targetNode.computedPosition,
+        () => edge.value.sourceNode.dimensions,
+        () => edge.value.targetNode.dimensions,
+      ],
+      () => {
+        const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
+          edge.value.sourceNode,
+          sourceHandle.value,
+          sourcePosition.value,
+          edge.value.targetNode,
+          targetHandle.value,
+          targetPosition.value,
+        )
+        if (edge.value.sourceX !== sourceX) edge.value.sourceX = sourceX
+        if (edge.value.sourceY !== sourceY) edge.value.sourceY = sourceY
+        if (edge.value.targetX !== targetX) edge.value.targetX = targetX
+        if (edge.value.targetY !== targetY) edge.value.targetY = targetY
+      },
+      { immediate: true, deep: true },
+    )
+  })
+})
+onRenderTriggered(console.log)
 </script>
 <script lang="ts">
 export default {
@@ -83,14 +111,14 @@ export default {
   <g
     :class="[
       'vue-flow__edge',
-      `vue-flow__edge-${props.edge.type || 'default'}`,
+      `vue-flow__edge-${edge.type || 'default'}`,
       {
-        selected: props.edge.selected,
+        selected: edge.selected,
-        animated: props.edge.animated,
+        animated: edge.animated,
         inactive: !props.selectable,
         updating,
       },
-      props.edge.class,
+      edge.class,
     ]"
     @click="onEdgeClick"
     @dblClick="onDoubleClick"
@@ -100,65 +128,64 @@ export default {
     @mouseleave="onEdgeMouseLeave"
   >
     <slot
-      v-if="edgePos.sourceX && edgePos.sourceY && edgePos.targetX && edgePos.targetY"
       v-bind="{
-        id: props.edge.id,
+        id: edge.id,
-        sourceNode: props.edge.sourceNode,
+        sourceNode: edge.sourceNode,
-        targetNode: props.edge.targetNode,
+        targetNode: edge.targetNode,
-        source: props.edge.source,
+        source: edge.source,
-        target: props.edge.target,
+        target: edge.target,
-        selected: props.edge.selected,
+        selected: edge.selected,
-        animated: props.edge.animated,
+        animated: edge.animated,
         updatable: props.updatable,
-        label: props.edge.label,
+        label: edge.label,
-        labelStyle: props.edge.labelStyle,
+        labelStyle: edge.labelStyle,
-        labelShowBg: props.edge.labelShowBg,
+        labelShowBg: edge.labelShowBg,
-        labelBgStyle: props.edge.labelBgStyle,
+        labelBgStyle: edge.labelBgStyle,
-        labelBgPadding: props.edge.labelBgPadding,
+        labelBgPadding: edge.labelBgPadding,
-        labelBgBorderRadius: props.edge.labelBgBorderRadius,
+        labelBgBorderRadius: edge.labelBgBorderRadius,
-        data: props.edge.data,
+        data: edge.data,
-        style: props.edge.style,
+        style: edge.style,
-        markerStart: `url(#${getMarkerId(props.edge.markerStart)})`,
+        sourceX: edge.sourceX,
-        markerEnd: `url(#${getMarkerId(props.edge.markerEnd)})`,
+        sourceY: edge.sourceY,
+        targetX: edge.targetX,
+        targetY: edge.targetY,
+        markerStart: `url(#${getMarkerId(edge.markerStart)})`,
+        markerEnd: `url(#${getMarkerId(edge.markerEnd)})`,
         sourcePosition,
         targetPosition,
-        sourceX: edgePos.sourceX,
+        sourceHandleId: edge.sourceHandle,
-        sourceY: edgePos.sourceY,
+        targetHandleId: edge.targetHandle,
-        targetX: edgePos.targetX,
-        targetY: edgePos.targetY,
-        sourceHandleId: props.edge.sourceHandle,
-        targetHandleId: props.edge.targetHandle,
       }"
     >
       <component
-        :is="props.component ?? props.edge.type"
+        :is="props.component ?? edge.type"
         v-bind="{
-          id: props.edge.id,
+          id: edge.id,
-          sourceNode: props.edge.sourceNode,
+          sourceNode: edge.sourceNode,
-          targetNode: props.edge.targetNode,
+          targetNode: edge.targetNode,
-          source: props.edge.source,
+          source: edge.source,
-          target: props.edge.target,
+          target: edge.target,
           updatable: props.updatable,
-          selected: props.edge.selected,
+          selected: edge.selected,
-          animated: props.edge.animated,
+          animated: edge.animated,
-          label: props.edge.label,
+          label: edge.label,
-          labelStyle: props.edge.labelStyle,
+          labelStyle: edge.labelStyle,
-          labelShowBg: props.edge.labelShowBg,
+          labelShowBg: edge.labelShowBg,
-          labelBgStyle: props.edge.labelBgStyle,
+          labelBgStyle: edge.labelBgStyle,
-          labelBgPadding: props.edge.labelBgPadding,
+          labelBgPadding: edge.labelBgPadding,
-          labelBgBorderRadius: props.edge.labelBgBorderRadius,
+          labelBgBorderRadius: edge.labelBgBorderRadius,
-          data: props.edge.data,
+          data: edge.data,
-          style: props.edge.style,
+          style: edge.style,
-          markerStart: `url(#${getMarkerId(props.edge.markerStart)})`,
+          markerStart: `url(#${getMarkerId(edge.markerStart)})`,
-          markerEnd: `url(#${getMarkerId(props.edge.markerEnd)})`,
+          markerEnd: `url(#${getMarkerId(edge.markerEnd)})`,
           sourcePosition,
           targetPosition,
-          sourceX: edgePos.sourceX,
+          sourceX: edge.sourceX,
-          sourceY: edgePos.sourceY,
+          sourceY: edge.sourceY,
-          targetX: edgePos.targetX,
+          targetX: edge.targetX,
-          targetY: edgePos.targetY,
+          targetY: edge.targetY,
-          sourceHandleId: props.edge.sourceHandle,
+          sourceHandleId: edge.sourceHandle,
-          targetHandleId: props.edge.targetHandle,
+          targetHandleId: edge.targetHandle,
         }"
       />
     </slot>
@@ -170,8 +197,8 @@ export default {
     >
       <EdgeAnchor
         :position="sourcePosition"
-        :center-x="edgePos.sourceX"
+        :center-x="edge.sourceX"
-        :center-y="edgePos.sourceY"
+        :center-y="edge.sourceY"
         :radius="props.edgeUpdaterRadius"
       />
     </g>
@@ -183,8 +210,8 @@ export default {
     >
       <EdgeAnchor
         :position="targetPosition"
-        :center-x="edgePos.targetX"
+        :center-x="edge.targetX"
-        :center-y="edgePos.targetY"
+        :center-y="edge.targetY"
         :radius="props.edgeUpdaterRadius"
       />
     </g>

src/components/Nodes/NodeWrapper.vue

@@ -13,7 +13,6 @@ interface NodeWrapperProps {
   draggable?: boolean
   selectable?: boolean
   connectable?: boolean
-  scale?: number
 }
 
 const props = defineProps<NodeWrapperProps>()
@@ -121,7 +120,7 @@ export default {
     cancel=".nodrag"
     :handle="node.dragHandle"
     :disabled="!props.draggable"
-    :scale="props.scale"
+    :scale="store.transform[2]"
     :grid="props.snapGrid"
     :enable-user-select-hack="false"
     v-bind="props.draggable"

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -32,8 +32,10 @@ const connectionLineVisible = controlledComputed(
       store.connectionHandleType
     ),
 )
-const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
+const groups = controlledComputed(
-const groups = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
+  () => store.getEdges,
+  () => groupEdgesByZLevel(store.edges, store.nodes),
+)
 </script>
 <script lang="ts">
 export default {

src/container/NodeRenderer/NodeRenderer.vue

@@ -33,7 +33,6 @@ export default {
       :connectable="typeof node.connectable === 'undefined' ? store.nodesConnectable : node.connectable"
       :snap-grid="snapGrid(node)"
       :select-nodes-on-drag="store.selectNodesOnDrag"
-      :scale="store.transform[2]"
     >
       <template #default="nodeProps">
         <slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>

src/container/TransformationPane/TransformationPane.vue

@@ -4,13 +4,11 @@ import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
 import { useVueFlow } from '../../composables'
 
 const { id, store } = useVueFlow()
+
+const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
 </script>
 <template>
-  <div
+  <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
-    :key="`transformation-pane-${id}`"
-    class="vue-flow__transformation-pane vue-flow__container"
-    :style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
-  >
     <NodeRenderer :key="`node-renderer-${id}`">
       <template
         v-for="nodeName of Object.keys(store.getNodeTypes)"
@@ -32,5 +30,6 @@ const { id, store } = useVueFlow()
         <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
     </EdgeRenderer>
+    <slot />
   </div>
 </template>

src/container/VueFlow/VueFlow.vue

@@ -58,7 +58,7 @@ export default {
       </template>
       <slot name="zoom-pane" />
     </ZoomPane>
-    <slot v-bind="store" />
+    <slot />
   </div>
 </template>
 <style>

src/container/ZoomPane/ZoomPane.vue

@@ -38,11 +38,9 @@ const transform = ref({
 })
 const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
 const d3Selection = ref()
-
-store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
 const { width, height } = useElementBounding(zoomPaneEl)
 
-onMounted(() => {
+onMounted(async () => {
   const d3z = d3Zoom.value!
   d3Selection.value = select(zoomPaneEl.value).call(d3z)
   const d3s = d3Selection.value!
@@ -170,23 +168,20 @@ onMounted(() => {
   watch(
     [width, height],
     ([newWidth, newHeight]) => {
-      nextTick(() => {
+      store.dimensions.width = newWidth
-        store.dimensions.width = newWidth
+      store.dimensions.height = newHeight
-        store.dimensions.height = newHeight
-      })
     },
-    { flush: 'post', immediate: true },
+    { immediate: true },
   )
   watch(
     transform,
     (val) => {
       const { x, y } = clampPosition(val, store.translateExtent)
-      nextTick(() => (store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]))
+      store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]
     },
-    { flush: 'post', immediate: true },
+    { immediate: true },
   )
-})
+
-nextTick(async () => {
   store.paneReady = true
 
   // if ssr we can't wait for dimensions, they'll never really exist
@@ -222,7 +217,7 @@ export default {
 </script>
 <template>
   <div ref="zoomPane" class="vue-flow__renderer vue-flow__container">
-    <TransformationPane>
+    <TransformationPane v-if="store.getNodes.length">
       <template
         v-for="nodeName of Object.keys(store.getNodeTypes)"
         #[`node-${nodeName}`]="nodeProps"
@@ -240,6 +235,7 @@ export default {
       <template #connection-line="customConnectionLineProps">
         <slot name="connection-line" v-bind="customConnectionLineProps" />
       </template>
+      <slot />
     </TransformationPane>
     <SelectionPane :key="`selection-pane-${id}`" />
   </div>

src/types/edge.ts

@@ -48,12 +48,19 @@ export interface Edge<T = any> extends Element<T> {
   updatable?: boolean
 }
 
-export interface GraphEdge<T = any, N = T> extends Edge<T> {
+export interface EdgePositions {
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+}
+
+export type GraphEdge<T = any, N = T> = Edge<T> & {
   sourceNode: GraphNode<N>
   targetNode: GraphNode<N>
   selected?: boolean
   z?: number
-}
+} & EdgePositions
 
 export interface EdgeProps<Data = any> {
   id: string
@@ -130,13 +137,6 @@ export interface SmoothStepEdgeProps<Data = any> extends EdgeProps<Data> {
   borderRadius?: number
 }
 
-export interface EdgePositions {
-  sourceX: number
-  sourceY: number
-  targetX: number
-  targetY: number
-}
-
 export interface GetCenterParams {
   sourceX: number
   sourceY: number

src/utils/graph.ts

@@ -97,6 +97,10 @@ export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge
         source: edge.source.toString(),
         target: edge.target.toString(),
         z: typeof edge.style?.zIndex === 'string' ? parseInt(edge.style?.zIndex) : edge.style?.zIndex ?? 0,
+        sourceX: 0,
+        sourceY: 0,
+        targetX: 0,
+        targetY: 0,
         ...defaults,
       }
     : defaults