diff --git a/packages/core/src/container/EdgeRenderer/index.tsx b/packages/core/src/container/EdgeRenderer/index.tsx index 043cb936..47e6d185 100644 --- a/packages/core/src/container/EdgeRenderer/index.tsx +++ b/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, diff --git a/packages/core/src/container/EdgeRenderer/utils.ts b/packages/core/src/container/EdgeRenderer/utils.ts index 506a7196..1f87ec53 100644 --- a/packages/core/src/container/EdgeRenderer/utils.ts +++ b/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; diff --git a/packages/edge-utils/src/general.ts b/packages/edge-utils/src/general.ts index 16fcf90b..dd226c2b 100644 --- a/packages/edge-utils/src/general.ts +++ b/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; +} diff --git a/packages/svelte/src/lib/container/EdgeRenderer/utils.ts b/packages/svelte/src/lib/container/EdgeRenderer/utils.ts index c593abf9..f70242ac 100644 --- a/packages/svelte/src/lib/container/EdgeRenderer/utils.ts +++ b/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;