refactor(edges): defer grouping to next tick

examples/vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
   },
   plugins: [
     vue({
-      reactivityTransform: true,
+      reactivityTransform: './src/',
     }),
     vueTypes(),
     svgLoader(),

package/src/components/Edges/EdgeWrapper.vue

@@ -1,27 +1,28 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, EdgeComponent, GraphEdge, GraphNode, Position } from '../../types'
+import { ConnectionMode, EdgeComponent, GraphEdge, Position } from '../../types'
 import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
 interface EdgeWrapper {
   id: string
   edge: GraphEdge
-  sourceNode: GraphNode
-  targetNode: GraphNode
   selectable?: boolean
   updatable?: boolean
   type: EdgeComponent | Function | Object | false
   name: string
 }
 
-const { id, edge, name, sourceNode, targetNode, selectable, updatable, type } = defineProps<EdgeWrapper>()
+const { id, edge, name, selectable, updatable, type } = defineProps<EdgeWrapper>()
 
-const { emits, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, addSelectedEdges } = $(useVueFlow())
+const { emits, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, getNode, addSelectedEdges } = $(useVueFlow())
 
 let updating = $ref(false)
 
+const sourceNode = $computed(() => getNode(edge.source)!)
+const targetNode = $computed(() => getNode(edge.target)!)
+
 const { onMouseDown } = useHandle()
 
 const onEdgeClick = (event: MouseEvent) => {
@@ -72,34 +73,48 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
   )
 }
 
-const sourceHandle = $computed(() => {
+const sourceHandle = $(
-  let sourceNodeHandles
+  controlledComputed(
-  if (connectionMode === ConnectionMode.Strict) {
+    () => sourceNode,
-    sourceNodeHandles = sourceNode.handleBounds.source
+    () => {
-  } else {
+      if (!sourceNode) return
-    sourceNodeHandles = sourceNode.handleBounds.source ?? sourceNode.handleBounds.target
-  }
 
-  return getHandle(sourceNodeHandles, edge.sourceHandle)
+      let sourceNodeHandles
-})
+      if (connectionMode === ConnectionMode.Strict) {
+        sourceNodeHandles = sourceNode.handleBounds.source
+      } else {
+        sourceNodeHandles = sourceNode.handleBounds.source ?? sourceNode.handleBounds.target
+      }
 
-const targetHandle = $computed(() => {
+      return getHandle(sourceNodeHandles, edge.sourceHandle)
-  let targetNodeHandles
+    },
-  if (connectionMode === ConnectionMode.Strict) {
+  ),
-    targetNodeHandles = targetNode.handleBounds.target
+)
-  } else {
-    targetNodeHandles = targetNode.handleBounds.target ?? targetNode.handleBounds.source
-  }
 
-  return getHandle(targetNodeHandles, edge.targetHandle)
+const targetHandle = $(
-})
+  controlledComputed(
+    () => targetNode,
+    () => {
+      if (!targetNode) return
+
+      let targetNodeHandles
+      if (connectionMode === ConnectionMode.Strict) {
+        targetNodeHandles = targetNode.handleBounds.target
+      } else {
+        targetNodeHandles = targetNode.handleBounds.target ?? targetNode.handleBounds.source
+      }
+
+      return getHandle(targetNodeHandles, edge.targetHandle)
+    },
+  ),
+)
 
 const sourcePosition = $(controlledComputed($$(sourceHandle), () => (sourceHandle ? sourceHandle.position : Position.Bottom)))
 
 const targetPosition = $(controlledComputed($$(targetHandle), () => (targetHandle ? targetHandle.position : Position.Top)))
 
 onMounted(() => {
-  watch(
+  const stop = watch(
     [
       $$(sourcePosition),
       $$(targetPosition),
@@ -124,8 +139,10 @@ onMounted(() => {
       if (edge.targetX !== targetX) storedEdge.targetX = targetX
       if (edge.targetY !== targetY) storedEdge.targetY = targetY
     },
-    { immediate: true, flush: 'post' },
+    { immediate: true, flush: 'pre' },
   )
+
+  onBeforeUnmount(() => stop())
 })
 
 const getClass = () => {

package/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -10,13 +10,16 @@ import MarkerDefinitions from './MarkerDefinitions.vue'
 const slots = inject(Slots)
 
 const {
+  onPaneReady,
   connectionNodeId,
   nodesConnectable,
   connectionHandleType,
   defaultMarkerColor,
   edgesUpdatable,
   elementsSelectable,
+  getSelectedNodes,
   getNode,
+  getNodes,
   getEdges,
   getEdgeTypes,
 } = $(useVueFlow())
@@ -44,11 +47,22 @@ const connectionLineVisible = $(
   ),
 )
 
-const getNodeWrapped = (node: string) => getNode(node)!
+let groups = $ref<ReturnType<typeof groupEdgesByZLevel>>([])
 
-const groups = computed(() => groupEdgesByZLevel(getEdges, getNodeWrapped))
+onPaneReady(() => {
+  watch(
+    [$$(getSelectedNodes), $$(getEdges), $$(getNodes)],
+    () => {
+      nextTick(() => (groups = groupEdgesByZLevel(getEdges, getNode)))
+    },
+    {
+      flush: 'post',
+      immediate: true,
+    },
+  )
+})
 
-const getType = $computed(() => (edge: GraphEdge) => {
+const getType = (edge: GraphEdge) => {
   const name = edge.type || 'default'
   let edgeType = edge.template ?? getEdgeTypes[name]
   const instance = getCurrentInstance()
@@ -70,7 +84,7 @@ const getType = $computed(() => (edge: GraphEdge) => {
   }
 
   return slot
-})
+}
 </script>
 <script lang="ts">
 export default {
@@ -88,8 +102,6 @@ export default {
         :edge="edge"
         :name="getType(edge) ? edge.type ?? 'default' : 'default'"
         :type="getType(edge)"
-        :source-node="getNodeWrapped(edge.source)"
-        :target-node="getNodeWrapped(edge.target)"
         :selectable="typeof edge.selectable === 'undefined' ? elementsSelectable : edge.selectable"
         :updatable="typeof edge.updatable === 'undefined' ? edgesUpdatable : edge.updatable"
       />

package/src/container/NodeRenderer/NodeRenderer.vue

@@ -23,31 +23,29 @@ const selectable = (s?: boolean) => (typeof s === 'undefined' ? elementsSelectab
 const connectable = (c?: boolean) => (typeof c === 'undefined' ? nodesConnectable : c)
 const hasSnapGrid = (sg?: SnapGrid) => (sg ?? snapToGrid ? snapGrid : undefined)
 
-const getType = $computed(() => {
+const getType = (node: GraphNode) => {
-  return (node: GraphNode) => {
+  const name = node.type || 'default'
-    const name = node.type || 'default'
+  let nodeType = node.template ?? getNodeTypes[name]
-    let nodeType = node.template ?? getNodeTypes[name]
+  const instance = getCurrentInstance()
-    const instance = getCurrentInstance()
 
-    if (typeof nodeType === 'string') {
+  if (typeof nodeType === 'string') {
-      if (instance) {
+    if (instance) {
-        const components = Object.keys(instance.appContext.components)
+      const components = Object.keys(instance.appContext.components)
-        if (components && components.includes(name)) {
+      if (components && components.includes(name)) {
-          nodeType = resolveComponent(name, false) as NodeComponent
+        nodeType = resolveComponent(name, false) as NodeComponent
-        }
       }
     }
-    if (typeof nodeType !== 'string') return nodeType
-
-    const slot = slots?.[`node-${name}`]
-    if (!slot?.({})) {
-      console.warn(`[vueflow]: Node type "${node.type}" not found and no node-slot detected. Using fallback type "default".`)
-      return false
-    }
-
-    return slot
   }
-})
+  if (typeof nodeType !== 'string') return nodeType
+
+  const slot = slots?.[`node-${name}`]
+  if (!slot?.({})) {
+    console.warn(`[vueflow]: Node type "${node.type}" not found and no node-slot detected. Using fallback type "default".`)
+    return false
+  }
+
+  return slot
+}
 </script>
 <script lang="ts">
 export default {

package/src/container/Viewport/Transform.vue

@@ -67,8 +67,6 @@ onMounted(async () => {
   fitViewOnInit && instance.fitView()
   emits.paneReady(instance)
 })
-
-const transform = computed(() => `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`)
 </script>
 <script lang="ts">
 export default {
@@ -79,7 +77,7 @@ export default {
   <div
     :key="`transform-${id}`"
     class="vue-flow__transformationpane vue-flow__container"
-    :style="{ transform, opacity: ready ? undefined : 0 }"
+    :style="{ transform: `translate(${viewport.x}px,${viewport.y}px) scale(${viewport.zoom})`, opacity: ready ? undefined : 0 }"
   >
     <NodeRenderer />
     <EdgeRenderer />

package/src/types/edge.ts

@@ -84,7 +84,7 @@ export interface Edge<Data = ElementData> extends BaseElement<Data> {
 export type DefaultEdgeOptions = Omit<
   Edge,
   'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'sourceNode' | 'targetNode'
->
+  >
 
 export interface EdgePositions {
   sourceX: number

package/vite.config.ts

@@ -13,11 +13,9 @@ export default defineConfig({
     alias: {
       '~': resolve('src'),
     },
-    dedupe: ['vue'],
     extensions: ['.ts', '.vue'],
   },
   build: {
-    minify: 'esbuild',
     emptyOutDir: false,
     lib: {
       formats: ['es', 'cjs', 'iife'],