chore(core): cleanup

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

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -1,5 +1,5 @@
 import EdgeAnchor from './EdgeAnchor'
-import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, GraphNode, HandleType } from '~/types'
+import type { Connection, EdgeComponent, EdgeUpdatable, GraphEdge, HandleType } from '~/types'
 import { ConnectionMode, Position } from '~/types'
 
 interface Props {
@@ -10,12 +10,10 @@ interface Props {
   focusable?: boolean
   updatable?: EdgeUpdatable
   edge: GraphEdge
-  sourceNode: GraphNode
-  targetNode: GraphNode
 }
 
 const EdgeWrapper = defineComponent({
-  props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge', 'sourceNode', 'targetNode'],
+  props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
   setup(props: Props) {
     const {
       id: vueFlowId,
@@ -28,6 +26,7 @@ const EdgeWrapper = defineComponent({
       getEdgeTypes,
       removeSelectedEdges,
       findEdge,
+      findNode,
     } = useVueFlow()
 
     const hooks = useEdgeHooks(props.edge, emits)
@@ -35,12 +34,17 @@ const EdgeWrapper = defineComponent({
     const edge = $(useVModel(props, 'edge'))
 
     let mouseOver = $ref(false)
+
     let updating = $ref(false)
 
     const nodeId = ref('')
+
     const handleId = ref<string | null>(null)
+
     const type = ref<HandleType>('source')
+
     const elementEdgeUpdaterType = ref<HandleType>('source')
+
     const mouseEvent = ref<MouseEvent>()
 
     const edgeEl = ref<SVGElement>()
@@ -48,6 +52,10 @@ const EdgeWrapper = defineComponent({
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)
 
+    const sourceNode = $computed(() => findNode(edge.source))
+
+    const targetNode = $computed(() => findNode(edge.target))
+
     const onEdgeUpdaterMouseEnter = () => (mouseOver = true)
 
     const onEdgeUpdaterMouseOut = () => (mouseOver = false)
@@ -128,22 +136,22 @@ const EdgeWrapper = defineComponent({
     }
 
     return () => {
-      if (!props.sourceNode || !props.targetNode) return null
+      if (!sourceNode || !targetNode) return null
 
       let sourceNodeHandles
       if (connectionMode.value === ConnectionMode.Strict) {
-        sourceNodeHandles = props.sourceNode.handleBounds.source
+        sourceNodeHandles = sourceNode.handleBounds.source
       } else {
-        sourceNodeHandles = [...(props.sourceNode.handleBounds.source || []), ...(props.sourceNode.handleBounds.target || [])]
+        sourceNodeHandles = [...(sourceNode.handleBounds.source || []), ...(sourceNode.handleBounds.target || [])]
       }
 
       const sourceHandle = getHandle(sourceNodeHandles, edge.sourceHandle)
 
       let targetNodeHandles
       if (connectionMode.value === ConnectionMode.Strict) {
-        targetNodeHandles = props.targetNode.handleBounds.target
+        targetNodeHandles = targetNode.handleBounds.target
       } else {
-        targetNodeHandles = [...(props.targetNode.handleBounds.target || []), ...(props.targetNode.handleBounds.source || [])]
+        targetNodeHandles = [...(targetNode.handleBounds.target || []), ...(targetNode.handleBounds.source || [])]
       }
 
       const targetHandle = getHandle(targetNodeHandles, edge.targetHandle)
@@ -153,10 +161,10 @@ const EdgeWrapper = defineComponent({
       const targetPosition = targetHandle ? targetHandle.position : Position.Top
 
       const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
-        props.sourceNode,
+        sourceNode,
         sourceHandle,
         sourcePosition,
-        props.targetNode,
+        targetNode,
         targetHandle,
         targetPosition,
       )
@@ -197,8 +205,8 @@ const EdgeWrapper = defineComponent({
             ? null
             : h(props.type === false ? getEdgeTypes.value.default : props.type, {
                 id: props.id,
-                sourceNode: props.sourceNode,
-                targetNode: props.targetNode,
+                sourceNode,
+                targetNode,
                 source: edge.source,
                 target: edge.target,
                 type: edge.type,

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { isNumber } from '@vueuse/core'
-import type { ReactiveVariable } from 'vue/macros'
 import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
 import { ARIA_NODE_DESC_KEY } from '../../utils/a11y'
 
@@ -41,7 +40,7 @@ const {
 
 const updateNodePositions = useUpdateNodePositions()
 
-const node: ReactiveVariable<GraphNode> = $(useVModel(props, 'node'))
+const node = $(useVModel(props, 'node'))
 
 const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
 

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -57,9 +57,9 @@ let stop: WatchStopHandle
 onPaneReady(() => {
   stop = watch(
     [
-      $$(getSelectedNodes),
-      $$(getEdges),
+      () => getEdges.length,
       () => getEdges.map((e) => e.zIndex),
+      () => (elevateEdgesOnSelect ? getSelectedNodes.length : 0),
       () => (elevateEdgesOnSelect ? getNodesInitialized.map((n) => n.computedPosition.z) : []),
     ],
     () => {

packages/core/src/utils/edge.ts

@@ -1,5 +1,5 @@
 import { isNumber } from '@vueuse/core'
-import type { EdgePositions, Getters, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
+import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, Rect, ViewportTransform, XYPosition } from '~/types'
 import { Position } from '~/types'
 
 export const getHandlePosition = (position: Position, rect: Rect, handle?: HandleElement): XYPosition => {
@@ -127,15 +127,15 @@ export function isEdgeVisible({
   return overlappingArea > 0
 }
 
-export const groupEdgesByZLevel = (edges: GraphEdge[], getNode: Getters['getNode'], elevateEdgesOnSelect = false) => {
+export const groupEdgesByZLevel = (edges: GraphEdge[], findNode: Actions['findNode'], elevateEdgesOnSelect = false) => {
   let maxLevel = -1
 
   const levelLookup = edges.reduce<Record<string, GraphEdge[]>>((tree, edge) => {
     const hasZIndex = isNumber(edge.zIndex)
     let z = hasZIndex ? edge.zIndex! : 0
 
-    const source = getNode(edge.source)
-    const target = getNode(edge.target)
+    const source = findNode(edge.source)
+    const target = findNode(edge.target)
 
     if (!source || !target) return tree