From b3de45ce1aba279ab9260ea8ad97284473cb5904 Mon Sep 17 00:00:00 2001 From: moklick Date: Wed, 22 Feb 2023 10:23:26 +0100 Subject: [PATCH] refactor(core): use edge-utils --- packages/core/package.json | 1 + .../src/components/ConnectionLine/index.tsx | 3 +- .../core/src/components/Edges/BezierEdge.tsx | 87 +------- .../src/components/Edges/SimpleBezierEdge.tsx | 2 +- .../src/components/Edges/SmoothStepEdge.tsx | 197 +----------------- .../src/components/Edges/StraightEdge.tsx | 25 +-- packages/core/src/components/Edges/utils.ts | 60 +----- packages/core/src/index.ts | 8 +- 8 files changed, 12 insertions(+), 371 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index e47b565e..b8826a16 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -38,6 +38,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { + "@reactflow/edge-utils": "workspace:*", "@reactflow/system": "workspace:*", "@reactflow/utils": "workspace:*", "@types/d3": "^7.4.0", diff --git a/packages/core/src/components/ConnectionLine/index.tsx b/packages/core/src/components/ConnectionLine/index.tsx index 990ccbe1..0c3c0a70 100644 --- a/packages/core/src/components/ConnectionLine/index.tsx +++ b/packages/core/src/components/ConnectionLine/index.tsx @@ -12,10 +12,9 @@ import { type ReactFlowState, type ReactFlowStore, } from '@reactflow/system'; +import { getBezierPath, getSmoothStepPath } from '@reactflow/edge-utils'; import { useStore } from '../../hooks/useStore'; -import { getBezierPath } from '../Edges/BezierEdge'; -import { getSmoothStepPath } from '../Edges/SmoothStepEdge'; import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'; type ConnectionLineProps = { diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/core/src/components/Edges/BezierEdge.tsx index 11fca8eb..443877b2 100644 --- a/packages/core/src/components/Edges/BezierEdge.tsx +++ b/packages/core/src/components/Edges/BezierEdge.tsx @@ -1,93 +1,8 @@ import { memo } from 'react'; import { Position, type BezierEdgeProps } from '@reactflow/system'; +import { getBezierPath } from '@reactflow/edge-utils'; import BaseEdge from './BaseEdge'; -import { getBezierEdgeCenter } from './utils'; - -export interface GetBezierPathParams { - sourceX: number; - sourceY: number; - sourcePosition?: Position; - targetX: number; - targetY: number; - targetPosition?: Position; - curvature?: number; -} - -interface GetControlWithCurvatureParams { - pos: Position; - x1: number; - y1: number; - x2: number; - y2: number; - c: number; -} - -function calculateControlOffset(distance: number, curvature: number): number { - if (distance >= 0) { - return 0.5 * distance; - } - - return curvature * 25 * Math.sqrt(-distance); -} - -function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurvatureParams): [number, number] { - switch (pos) { - case Position.Left: - return [x1 - calculateControlOffset(x1 - x2, c), y1]; - case Position.Right: - return [x1 + calculateControlOffset(x2 - x1, c), y1]; - case Position.Top: - return [x1, y1 - calculateControlOffset(y1 - y2, c)]; - case Position.Bottom: - return [x1, y1 + calculateControlOffset(y2 - y1, c)]; - } -} - -export function getBezierPath({ - sourceX, - sourceY, - sourcePosition = Position.Bottom, - targetX, - targetY, - targetPosition = Position.Top, - curvature = 0.25, -}: GetBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { - const [sourceControlX, sourceControlY] = getControlWithCurvature({ - pos: sourcePosition, - x1: sourceX, - y1: sourceY, - x2: targetX, - y2: targetY, - c: curvature, - }); - const [targetControlX, targetControlY] = getControlWithCurvature({ - pos: targetPosition, - x1: targetX, - y1: targetY, - x2: sourceX, - y2: sourceY, - c: curvature, - }); - const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({ - sourceX, - sourceY, - targetX, - targetY, - sourceControlX, - sourceControlY, - targetControlX, - targetControlY, - }); - - return [ - `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`, - labelX, - labelY, - offsetX, - offsetY, - ]; -} const BezierEdge = memo( ({ diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/core/src/components/Edges/SimpleBezierEdge.tsx index f2de142f..54236c98 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/core/src/components/Edges/SimpleBezierEdge.tsx @@ -1,8 +1,8 @@ import { memo } from 'react'; import { Position, type EdgeProps } from '@reactflow/system'; +import { getBezierEdgeCenter } from '@reactflow/edge-utils'; import BaseEdge from './BaseEdge'; -import { getBezierEdgeCenter } from './utils'; export interface GetSimpleBezierPathParams { sourceX: number; diff --git a/packages/core/src/components/Edges/SmoothStepEdge.tsx b/packages/core/src/components/Edges/SmoothStepEdge.tsx index 79687148..a5de7976 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/core/src/components/Edges/SmoothStepEdge.tsx @@ -1,201 +1,8 @@ import { memo } from 'react'; -import { Position, type SmoothStepEdgeProps, type XYPosition } from '@reactflow/system'; +import { Position, type SmoothStepEdgeProps } from '@reactflow/system'; +import { getSmoothStepPath } from '@reactflow/edge-utils'; import BaseEdge from './BaseEdge'; -import { getEdgeCenter } from './utils'; - -export interface GetSmoothStepPathParams { - sourceX: number; - sourceY: number; - sourcePosition?: Position; - targetX: number; - targetY: number; - targetPosition?: Position; - borderRadius?: number; - centerX?: number; - centerY?: number; - offset?: number; -} - -const handleDirections = { - [Position.Left]: { x: -1, y: 0 }, - [Position.Right]: { x: 1, y: 0 }, - [Position.Top]: { x: 0, y: -1 }, - [Position.Bottom]: { x: 0, y: 1 }, -}; - -const getDirection = ({ - source, - sourcePosition = Position.Bottom, - target, -}: { - source: XYPosition; - sourcePosition: Position; - target: XYPosition; -}): XYPosition => { - if (sourcePosition === Position.Left || sourcePosition === Position.Right) { - return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 }; - } - return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 }; -}; - -const distance = (a: XYPosition, b: XYPosition) => Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2)); - -// ith this function we try to mimic a orthogonal edge routing behaviour -// It's not as good as a real orthogonal edge routing but it's faster and good enough as a default for step and smooth step edges -function getPoints({ - source, - sourcePosition = Position.Bottom, - target, - targetPosition = Position.Top, - center, - offset, -}: { - source: XYPosition; - sourcePosition: Position; - target: XYPosition; - targetPosition: Position; - center: Partial; - offset: number; -}): [XYPosition[], number, number, number, number] { - const sourceDir = handleDirections[sourcePosition]; - const targetDir = handleDirections[targetPosition]; - const sourceGapped: XYPosition = { x: source.x + sourceDir.x * offset, y: source.y + sourceDir.y * offset }; - const targetGapped: XYPosition = { x: target.x + targetDir.x * offset, y: target.y + targetDir.y * offset }; - const dir = getDirection({ - source: sourceGapped, - sourcePosition, - target: targetGapped, - }); - const dirAccessor = dir.x !== 0 ? 'x' : 'y'; - const currDir = dir[dirAccessor]; - - let points: XYPosition[] = []; - let centerX, centerY; - const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({ - sourceX: source.x, - sourceY: source.y, - targetX: target.x, - targetY: target.y, - }); - - // opposite handle positions, default case - if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) { - centerX = center.x || defaultCenterX; - centerY = center.y || defaultCenterY; - // ---> - // | - // >--- - const verticalSplit: XYPosition[] = [ - { x: centerX, y: sourceGapped.y }, - { x: centerX, y: targetGapped.y }, - ]; - // | - // --- - // | - const horizontalSplit: XYPosition[] = [ - { x: sourceGapped.x, y: centerY }, - { x: targetGapped.x, y: centerY }, - ]; - - if (sourceDir[dirAccessor] === currDir) { - points = dirAccessor === 'x' ? verticalSplit : horizontalSplit; - } else { - points = dirAccessor === 'x' ? horizontalSplit : verticalSplit; - } - } else { - // sourceTarget means we take x from source and y from target, targetSource is the opposite - const sourceTarget: XYPosition[] = [{ x: sourceGapped.x, y: targetGapped.y }]; - const targetSource: XYPosition[] = [{ x: targetGapped.x, y: sourceGapped.y }]; - // this handles edges with same handle positions - if (dirAccessor === 'x') { - points = sourceDir.x === currDir ? targetSource : sourceTarget; - } else { - points = sourceDir.y === currDir ? sourceTarget : targetSource; - } - - // these are conditions for handling mixed handle positions like Right -> Bottom for example - if (sourcePosition !== targetPosition) { - const dirAccessorOpposite = dirAccessor === 'x' ? 'y' : 'x'; - const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite]; - const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite]; - const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite]; - const flipSourceTarget = - (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) || - (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo))); - - if (flipSourceTarget) { - points = dirAccessor === 'x' ? sourceTarget : targetSource; - } - } - - centerX = points[0].x; - centerY = points[0].y; - } - - const pathPoints = [source, sourceGapped, ...points, targetGapped, target]; - - return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY]; -} - -function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): string { - const bendSize = Math.min(distance(a, b) / 2, distance(b, c) / 2, size); - const { x, y } = b; - - // no bend - if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) { - return `L${x} ${y}`; - } - - // first segment is horizontal - if (a.y === y) { - const xDir = a.x < c.x ? -1 : 1; - const yDir = a.y < c.y ? 1 : -1; - return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`; - } - - const xDir = a.x < c.x ? 1 : -1; - const yDir = a.y < c.y ? -1 : 1; - return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`; -} - -export function getSmoothStepPath({ - sourceX, - sourceY, - sourcePosition = Position.Bottom, - targetX, - targetY, - targetPosition = Position.Top, - borderRadius = 5, - centerX, - centerY, - offset = 20, -}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { - const [points, labelX, labelY, offsetX, offsetY] = getPoints({ - source: { x: sourceX, y: sourceY }, - sourcePosition, - target: { x: targetX, y: targetY }, - targetPosition, - center: { x: centerX, y: centerY }, - offset, - }); - - const path = points.reduce((res, p, i) => { - let segment = ''; - - if (i > 0 && i < points.length - 1) { - segment = getBend(points[i - 1], p, points[i + 1], borderRadius); - } else { - segment = `${i === 0 ? 'M' : 'L'}${p.x} ${p.y}`; - } - - res += segment; - - return res; - }, ''); - - return [path, labelX, labelY, offsetX, offsetY]; -} const SmoothStepEdge = memo( ({ diff --git a/packages/core/src/components/Edges/StraightEdge.tsx b/packages/core/src/components/Edges/StraightEdge.tsx index f99790f9..209a4984 100644 --- a/packages/core/src/components/Edges/StraightEdge.tsx +++ b/packages/core/src/components/Edges/StraightEdge.tsx @@ -1,31 +1,8 @@ import { memo } from 'react'; import type { EdgeProps } from '@reactflow/system'; +import { getStraightPath } from '@reactflow/edge-utils'; import BaseEdge from './BaseEdge'; -import { getEdgeCenter } from './utils'; - -export type GetStraightPathParams = { - sourceX: number; - sourceY: number; - targetX: number; - targetY: number; -}; - -export function getStraightPath({ - sourceX, - sourceY, - targetX, - targetY, -}: GetStraightPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { - const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({ - sourceX, - sourceY, - targetX, - targetY, - }); - - return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY]; -} const StraightEdge = memo( ({ diff --git a/packages/core/src/components/Edges/utils.ts b/packages/core/src/components/Edges/utils.ts index 3c21c3ea..31d8a2bf 100644 --- a/packages/core/src/components/Edges/utils.ts +++ b/packages/core/src/components/Edges/utils.ts @@ -1,14 +1,6 @@ import { MouseEvent as ReactMouseEvent } from 'react'; import { StoreApi } from 'zustand'; -import type { Edge, MarkerType, ReactFlowState } from '@reactflow/system'; - -export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => { - if (typeof markerEndId !== 'undefined' && markerEndId) { - return `url(#${markerEndId})`; - } - - return typeof markerType !== 'undefined' ? `url(#react-flow__${markerType})` : 'none'; -}; +import type { Edge, ReactFlowState } from '@reactflow/system'; export function getMouseHandler( id: string, @@ -25,53 +17,3 @@ export function getMouseHandler( } }; } - -// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB) -export function getEdgeCenter({ - sourceX, - sourceY, - targetX, - targetY, -}: { - sourceX: number; - sourceY: number; - targetX: number; - targetY: number; -}): [number, number, number, number] { - const xOffset = Math.abs(targetX - sourceX) / 2; - const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset; - - const yOffset = Math.abs(targetY - sourceY) / 2; - const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset; - - return [centerX, centerY, xOffset, yOffset]; -} - -export function getBezierEdgeCenter({ - sourceX, - sourceY, - targetX, - targetY, - sourceControlX, - sourceControlY, - targetControlX, - targetControlY, -}: { - sourceX: number; - sourceY: number; - targetX: number; - targetY: number; - sourceControlX: number; - sourceControlY: number; - targetControlX: number; - targetControlY: number; -}): [number, number, number, number] { - // cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate - // https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve - const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125; - const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125; - const offsetX = Math.abs(centerX - sourceX); - const offsetY = Math.abs(centerY - sourceY); - - return [centerX, centerY, offsetX, offsetY]; -} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index ae58a6c1..52d202f5 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,11 +1,11 @@ export { default as ReactFlow } from './container/ReactFlow'; export { default as Handle } from './components/Handle'; export { default as EdgeText } from './components/Edges/EdgeText'; -export { default as StraightEdge, getStraightPath } from './components/Edges/StraightEdge'; +export { default as StraightEdge } from './components/Edges/StraightEdge'; export { default as StepEdge } from './components/Edges/StepEdge'; -export { default as BezierEdge, getBezierPath } from './components/Edges/BezierEdge'; +export { default as BezierEdge } from './components/Edges/BezierEdge'; export { default as SimpleBezierEdge, getSimpleBezierPath } from './components/Edges/SimpleBezierEdge'; -export { default as SmoothStepEdge, getSmoothStepPath } from './components/Edges/SmoothStepEdge'; +export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge'; export { default as BaseEdge } from './components/Edges/BaseEdge'; export { @@ -24,7 +24,6 @@ export { getBoundsOfRects, } from '@reactflow/utils'; export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; -export { getMarkerEnd } from './components/Edges/utils'; export { default as ReactFlowProvider } from './components/ReactFlowProvider'; export { default as Panel } from './components/Panel'; export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer'; @@ -43,5 +42,6 @@ export { default as useNodesInitialized } from './hooks/useNodesInitialized'; export { default as useGetPointerPosition } from './hooks/useGetPointerPosition'; export { useNodeId } from './contexts/NodeIdContext'; export * from '@reactflow/system'; +export * from '@reactflow/edge-utils'; // export * from './types';