feat(edge-utils): add getHandlePosition and getHandle

packages/core/src/container/EdgeRenderer/index.tsx

@@ -6,9 +6,10 @@ import { errorMessages, ConnectionMode, Position } from '@reactflow/system';
 import { useStore } from '../../hooks/useStore';
 import useVisibleEdges from '../../hooks/useVisibleEdges';
 import MarkerDefinitions from './MarkerDefinitions';
-import { getEdgePositions, getHandle, getNodeData } from './utils';
+import { getEdgePositions, getNodeData } from './utils';
 import { GraphViewProps } from '../GraphView';
 import type { Edge, ReactFlowState } from '../../types';
+import { getHandle } from '@reactflow/edge-utils';
 
 type EdgeRendererProps = Pick<
   GraphViewProps,

packages/core/src/container/EdgeRenderer/utils.ts

@@ -13,6 +13,7 @@ import { rectToBox } from '@reactflow/utils';
 import { BezierEdge, SmoothStepEdge, StepEdge, StraightEdge, SimpleBezierEdge } from '../../components/Edges';
 import wrapEdge from '../../components/Edges/wrapEdge';
 import type { EdgeProps, EdgeTypes, EdgeTypesWrapped, Node } from '../../types';
+import { getHandlePosition } from '@reactflow/edge-utils';
 
 export type CreateEdgeTypes = (edgeTypes: EdgeTypes) => EdgeTypesWrapped;
 
@@ -40,50 +41,6 @@ export function createEdgeTypes(edgeTypes: EdgeTypes): EdgeTypesWrapped {
   };
 }
 
-export function getHandlePosition(position: Position, nodeRect: Rect, handle: HandleElement | null = null): XYPosition {
-  const x = (handle?.x || 0) + nodeRect.x;
-  const y = (handle?.y || 0) + nodeRect.y;
-  const width = handle?.width || nodeRect.width;
-  const height = handle?.height || nodeRect.height;
-
-  switch (position) {
-    case Position.Top:
-      return {
-        x: x + width / 2,
-        y,
-      };
-    case Position.Right:
-      return {
-        x: x + width,
-        y: y + height / 2,
-      };
-    case Position.Bottom:
-      return {
-        x: x + width / 2,
-        y: y + height,
-      };
-    case Position.Left:
-      return {
-        x,
-        y: y + height / 2,
-      };
-  }
-}
-
-export function getHandle(bounds: HandleElement[], handleId?: string | null): HandleElement | null {
-  if (!bounds) {
-    return null;
-  }
-
-  if (bounds.length === 1 || !handleId) {
-    return bounds[0];
-  } else if (handleId) {
-    return bounds.find((d) => d.id === handleId) || null;
-  }
-
-  return null;
-}
-
 interface EdgePositions {
   sourceX: number;
   sourceY: number;

packages/edge-utils/src/general.ts

@@ -1,4 +1,4 @@
-import { MarkerType } from '@reactflow/system';
+import { HandleElement, MarkerType, Position, Rect, XYPosition } from '@reactflow/system';
 
 // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
 export function getEdgeCenter({
@@ -28,3 +28,47 @@ export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): str
 
   return typeof markerType !== 'undefined' ? `url(#react-flow__${markerType})` : 'none';
 };
+
+export function getHandlePosition(position: Position, nodeRect: Rect, handle: HandleElement | null = null): XYPosition {
+  const x = (handle?.x || 0) + nodeRect.x;
+  const y = (handle?.y || 0) + nodeRect.y;
+  const width = handle?.width || nodeRect.width;
+  const height = handle?.height || nodeRect.height;
+
+  switch (position) {
+    case Position.Top:
+      return {
+        x: x + width / 2,
+        y,
+      };
+    case Position.Right:
+      return {
+        x: x + width,
+        y: y + height / 2,
+      };
+    case Position.Bottom:
+      return {
+        x: x + width / 2,
+        y: y + height,
+      };
+    case Position.Left:
+      return {
+        x,
+        y: y + height / 2,
+      };
+  }
+}
+
+export function getHandle(bounds: HandleElement[], handleId?: string | null): HandleElement | null {
+  if (!bounds) {
+    return null;
+  }
+
+  if (bounds.length === 1 || !handleId) {
+    return bounds[0];
+  } else if (handleId) {
+    return bounds.find((d) => d.id === handleId) || null;
+  }
+
+  return null;
+}

packages/svelte/src/lib/container/EdgeRenderer/utils.ts

@@ -1,13 +1,14 @@
+import { getHandlePosition } from '@reactflow/edge-utils';
 import {
   type NodeHandleBounds,
   type Rect,
-  type Node,
   type HandleElement,
-  type XYPosition,
   Position,
   internalsSymbol
 } from '@reactflow/system';
 
+import type { Node } from '$lib/types';
+
 export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolean] {
   const handleBounds = node?.[internalsSymbol]?.handleBounds || null;
 
@@ -30,54 +31,6 @@ export function getNodeData(node?: Node): [Rect, NodeHandleBounds | null, boolea
   ];
 }
 
-export function getHandlePosition(
-  position: Position,
-  nodeRect: Rect,
-  handle: HandleElement | null = null
-): XYPosition {
-  const x = (handle?.x || 0) + nodeRect.x;
-  const y = (handle?.y || 0) + nodeRect.y;
-  const width = handle?.width || nodeRect.width;
-  const height = handle?.height || nodeRect.height;
-
-  switch (position) {
-    case Position.Top:
-      return {
-        x: x + width / 2,
-        y
-      };
-    case Position.Right:
-      return {
-        x: x + width,
-        y: y + height / 2
-      };
-    case Position.Bottom:
-      return {
-        x: x + width / 2,
-        y: y + height
-      };
-    case Position.Left:
-      return {
-        x,
-        y: y + height / 2
-      };
-  }
-}
-
-export function getHandle(bounds: HandleElement[], handleId?: string | null): HandleElement | null {
-  if (!bounds) {
-    return null;
-  }
-
-  if (handleId) {
-    return bounds.find((d) => d.id === handleId)!;
-  } else if (bounds.length === 1) {
-    return bounds[0];
-  }
-
-  return null;
-}
-
 export type EdgePosition = {
   sourceX: number;
   sourceY: number;