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

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

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 = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
+const groups = controlledComputed(
+  () => 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
-    :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]})` }"
-  >
+  <div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
     <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.height = newHeight
-      })
+      store.dimensions.width = newWidth
+      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>