chore(core): cleanup handle utils (#1497)

Author: bcakmakoglu

packages/core/src/components/ConnectionLine/index.ts

@@ -74,7 +74,7 @@ const ConnectionLine = defineComponent({
 
       const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null
       const fromPosition = fromHandle?.position || Position.Top
-      const { x: fromX, y: fromY } = getHandlePosition(fromPosition, fromNode.value, fromHandle)
+      const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition)
 
       let toHandle: HandleElement | null = null
       if (toNode.value && connectionEndHandle.value?.handleId) {

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

@@ -8,8 +8,8 @@ import {
   ErrorCode,
   VueFlowError,
   elementSelectionKeys,
-  getEdgePositions,
   getHandle,
+  getHandlePosition,
   getMarkerId,
 } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
@@ -160,19 +160,14 @@ const EdgeWrapper = defineComponent({
 
       const targetHandle = getHandle(targetNodeHandles, edge.value.targetHandle)
 
-      const sourcePosition = sourceHandle ? sourceHandle.position : Position.Bottom
+      const sourcePosition = sourceHandle?.position || Position.Bottom
 
-      const targetPosition = targetHandle ? targetHandle.position : Position.Top
+      const targetPosition = targetHandle?.position || Position.Top
 
-      const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
-        sourceNode,
-        sourceHandle,
-        sourcePosition,
-        targetNode,
-        targetHandle,
-        targetPosition,
-      )
+      const { x: sourceX, y: sourceY } = getHandlePosition(sourceNode, sourceHandle, sourcePosition)
+      const { x: targetX, y: targetY } = getHandlePosition(targetNode, targetHandle, targetPosition)
 
+      // todo: let's avoid writing these here (in v2 we want to remove all of these self-managed refs)
       edge.value.sourceX = sourceX
       edge.value.sourceY = sourceY
       edge.value.targetX = targetX

packages/core/src/types/handle.ts

@@ -10,12 +10,10 @@ export interface HandleElement extends XYPosition, Dimensions {
   position: Position
 }
 
-export interface ConnectionHandle {
+export interface ConnectionHandle extends XYPosition {
   id: string | null
   type: HandleType | null
   nodeId: string
-  x: number
-  y: number
 }
 
 export interface ValidHandleResult {

packages/core/src/utils/edge.ts

@@ -1,12 +1,16 @@
-import type { Actions, EdgePositions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
+import type { Actions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
 import { Position } from '../types'
-import { rectToBox } from '.'
+import { getNodeDimensions, rectToBox } from '.'
 
-export function getHandlePosition(position: Position, node: GraphNode, handle: HandleElement | null): XYPosition {
+export function getHandlePosition(
+  node: GraphNode,
+  handle: HandleElement | null,
+  fallbackPosition: Position = Position.Left,
+): XYPosition {
   const x = (handle?.x ?? 0) + node.computedPosition.x
   const y = (handle?.y ?? 0) + node.computedPosition.y
-  const width = handle?.width ?? node.dimensions.width
-  const height = handle?.height ?? node.dimensions.height
+  const { width, height } = handle ?? getNodeDimensions(node)
+  const position = handle?.position ?? fallbackPosition
 
   switch (position) {
     case Position.Top:
@@ -40,25 +44,6 @@ export function getHandle(bounds: HandleElement[] = [], handleId?: string | null
   return (!handleId ? bounds[0] : bounds.find((d) => d.id === handleId)) || null
 }
 
-export function getEdgePositions(
-  sourceNode: GraphNode,
-  sourceHandle: HandleElement | null,
-  sourcePosition: Position,
-  targetNode: GraphNode,
-  targetHandle: HandleElement | null,
-  targetPosition: Position,
-): EdgePositions {
-  const { x: sourceX, y: sourceY } = getHandlePosition(sourcePosition, sourceNode, sourceHandle)
-  const { x: targetX, y: targetY } = getHandlePosition(targetPosition, targetNode, targetHandle)
-
-  return {
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-  }
-}
-
 interface IsEdgeVisibleParams {
   sourcePos: XYPosition
   targetPos: XYPosition

packages/core/src/utils/handle.ts

@@ -2,8 +2,8 @@ import { ConnectionMode } from '../types'
 import type {
   Actions,
   Connection,
+  ConnectionHandle,
   ConnectionStatus,
-  Dimensions,
   GraphEdge,
   GraphNode,
   HandleType,
@@ -14,12 +14,6 @@ import type {
 } from '../types'
 import { getEventPosition, getHandlePosition } from '.'
 
-export interface ConnectionHandle extends XYPosition, Dimensions {
-  id: string | null
-  type: HandleType | null
-  nodeId: string
-}
-
 function defaultValidHandleResult(): ValidHandleResult {
   return {
     handleDomNode: null,
@@ -41,22 +35,23 @@ export function getHandles(
   type: HandleType,
   currentHandle: string,
 ): ConnectionHandle[] {
-  return (handleBounds[type] || []).reduce<ConnectionHandle[]>((res, h) => {
-    if (`${node.id}-${h.id}-${type}` !== currentHandle) {
-      const handlePosition = getHandlePosition(h.position, node, h)
+  const connectionHandles: ConnectionHandle[] = []
 
-      res.push({
-        id: h.id || null,
+  for (const handle of handleBounds[type] || []) {
+    if (`${node.id}-${handle.id}-${type}` !== currentHandle) {
+      const { x, y } = getHandlePosition(node, handle)
+
+      connectionHandles.push({
+        id: handle.id || null,
         type,
         nodeId: node.id,
-        x: handlePosition.x,
-        y: handlePosition.y,
-        width: h.width,
-        height: h.height,
+        x,
+        y,
       })
     }
-    return res
-  }, [])
+  }
+
+  return connectionHandles
 }
 
 export function getClosestHandle(