From e634e7296a2dd41f13b8d6fe02bc2664a481641d Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 27 Sep 2022 14:17:02 +0200 Subject: [PATCH] refactor(edges): siplify edge path / label position handling, repair edge labels --- .../src/examples/EdgeRouting/index.tsx | 21 +--- .../src/examples/Edges/CustomEdge.tsx | 4 +- .../src/examples/Edges/CustomEdge2.tsx | 16 +-- .../src/components/ConnectionLine/index.tsx | 8 +- .../core/src/components/Edges/BaseEdge.tsx | 8 +- .../core/src/components/Edges/BezierEdge.tsx | 68 +++++-------- .../src/components/Edges/SimpleBezierEdge.tsx | 65 +++++-------- .../src/components/Edges/SmoothStepEdge.tsx | 52 ++++++---- .../src/components/Edges/StraightEdge.tsx | 36 +++++-- packages/core/src/components/Edges/utils.ts | 97 ++++++++++--------- packages/core/src/index.ts | 16 +-- packages/core/src/types/edges.ts | 4 +- 12 files changed, 182 insertions(+), 213 deletions(-) diff --git a/examples/vite-app/src/examples/EdgeRouting/index.tsx b/examples/vite-app/src/examples/EdgeRouting/index.tsx index e0039ea0..3d37b43b 100644 --- a/examples/vite-app/src/examples/EdgeRouting/index.tsx +++ b/examples/vite-app/src/examples/EdgeRouting/index.tsx @@ -77,10 +77,6 @@ const edges: Edge[] = [ id: 'e1-2', source: '1', target: '2', - type: 'smoothstep', - markerEnd: { - type: MarkerType.ArrowClosed, - }, pathOptions: { offset: 30, }, @@ -90,10 +86,6 @@ const edges: Edge[] = [ id: 'e3-4', source: '3', target: '4', - type: 'smoothstep', - markerEnd: { - type: MarkerType.ArrowClosed, - }, pathOptions: { borderRadius: 2, }, @@ -104,24 +96,21 @@ const edges: Edge[] = [ id: 'e4-5', source: '5', target: '6', - type: 'smoothstep', - markerEnd: { - type: MarkerType.ArrowClosed, - }, }, { id: 'e7-8', source: '7', target: '8', - type: 'smoothstep', - markerEnd: { - type: MarkerType.ArrowClosed, - }, }, ]; const defaultEdgeOptions = { + label: 'Edge Label', + type: 'default', + markerEnd: { + type: MarkerType.ArrowClosed, + }, style: { strokeWidth: 1, }, diff --git a/examples/vite-app/src/examples/Edges/CustomEdge.tsx b/examples/vite-app/src/examples/Edges/CustomEdge.tsx index 54b77c66..ec7dfb74 100644 --- a/examples/vite-app/src/examples/Edges/CustomEdge.tsx +++ b/examples/vite-app/src/examples/Edges/CustomEdge.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import { FC } from 'react'; import { EdgeProps, getBezierPath } from 'reactflow'; const CustomEdge: FC = ({ @@ -11,7 +11,7 @@ const CustomEdge: FC = ({ targetPosition, data, }) => { - const edgePath = getBezierPath({ + const [edgePath] = getBezierPath({ sourceX, sourceY, sourcePosition, diff --git a/examples/vite-app/src/examples/Edges/CustomEdge2.tsx b/examples/vite-app/src/examples/Edges/CustomEdge2.tsx index 97e6541b..0ad41920 100644 --- a/examples/vite-app/src/examples/Edges/CustomEdge2.tsx +++ b/examples/vite-app/src/examples/Edges/CustomEdge2.tsx @@ -1,5 +1,5 @@ -import React, { FC } from 'react'; -import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from 'reactflow'; +import { FC } from 'react'; +import { EdgeProps, getBezierPath, EdgeText } from 'reactflow'; const CustomEdge: FC = ({ id, @@ -11,7 +11,7 @@ const CustomEdge: FC = ({ targetPosition, data, }) => { - const edgePath = getBezierPath({ + const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, sourcePosition, @@ -19,19 +19,13 @@ const CustomEdge: FC = ({ targetY, targetPosition, }); - const [centerX, centerY] = getBezierEdgeCenter({ - sourceX, - sourceY, - targetX, - targetY, - }); return ( <> } {label ? ( { - const params = { + const [path, labelX, labelY] = getBezierPath({ sourceX, sourceY, sourcePosition, @@ -154,15 +134,13 @@ const BezierEdge = memo( targetY, targetPosition, curvature: pathOptions?.curvature, - }; - const path = getBezierPath(params); - const [centerX, centerY] = getBezierCenter(params); + }); return ( { - const params = { + const [path, labelX, labelY] = getSimpleBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, - }; - const path = getSimpleBezierPath(params); - const [centerX, centerY] = getSimpleBezierCenter(params); + }); return ( ; offset: number; -}): XYPosition[] { +}): [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 }; @@ -71,22 +71,31 @@ function getPoints({ const currDir = dir[dirAccessor]; let points: XYPosition[] = []; + let centerX, centerY; + const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({ + 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: center.x, y: sourceGapped.y }, - { x: center.x, y: targetGapped.y }, + { x: centerX, y: sourceGapped.y }, + { x: centerX, y: targetGapped.y }, ]; // | // --- // | const horizontalSplit: XYPosition[] = [ - { x: sourceGapped.x, y: center.y }, - { x: targetGapped.x, y: center.y }, + { x: sourceGapped.x, y: centerY }, + { x: targetGapped.x, y: centerY }, ]; if (sourceDir[dirAccessor] === currDir) { @@ -119,9 +128,14 @@ function getPoints({ points = dirAccessor === 'x' ? sourceTarget : targetSource; } } + + centerX = points[0].x; + centerY = points[0].y; } - return [source, sourceGapped, ...points, targetGapped, target]; + const pathPoints = [source, sourceGapped, ...points, targetGapped, target]; + + return [pathPoints, centerX, centerY, defaultOffsetX, defaultOffsetY]; } function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): string { @@ -156,21 +170,17 @@ export function getSmoothStepPath({ centerX, centerY, offset = 20, -}: GetSmoothStepPathParams): string { - const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY }); - const cX = typeof centerX !== 'undefined' ? centerX : _centerX; - const cY = typeof centerY !== 'undefined' ? centerY : _centerY; - - const points = getPoints({ +}: GetSmoothStepPathParams): [string, number, number, number, number] { + const [points, labelX, labelY, offsetX, offsetY] = getPoints({ source: { x: sourceX, y: sourceY }, sourcePosition, target: { x: targetX, y: targetY }, targetPosition, - center: { x: cX, y: cY }, + center: { x: centerX, y: centerY }, offset, }); - return points.reduce((res, p, i) => { + const path = points.reduce((res, p, i) => { let segment = ''; if (i > 0 && i < points.length - 1) { @@ -183,6 +193,8 @@ export function getSmoothStepPath({ return res; }, ''); + + return [path, labelX, labelY, offsetX, offsetY]; } const SmoothStepEdge = memo( @@ -205,9 +217,7 @@ const SmoothStepEdge = memo( pathOptions, interactionWidth, }: SmoothStepEdgeProps) => { - const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }); - - const path = getSmoothStepPath({ + const [path, labelX, labelY] = getSmoothStepPath({ sourceX, sourceY, sourcePosition, @@ -221,8 +231,8 @@ const SmoothStepEdge = memo( return ( { - const yOffset = Math.abs(targetY - sourceY) / 2; - const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset; - - const xOffset = Math.abs(targetX - sourceX) / 2; - const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset; + const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY }); return ( { if (typeof markerEndId !== 'undefined' && markerEndId) { @@ -11,51 +11,6 @@ export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): str return typeof markerType !== 'undefined' ? `url(#react-flow__${markerType})` : 'none'; }; -export interface GetCenterParams { - sourceX: number; - sourceY: number; - targetX: number; - targetY: number; - sourcePosition?: Position; - targetPosition?: Position; -} - -const LeftOrRight = [Position.Left, Position.Right]; - -export const getCenter = ({ - sourceX, - sourceY, - targetX, - targetY, - sourcePosition = Position.Bottom, - targetPosition = Position.Top, -}: GetCenterParams): [number, number, number, number] => { - const sourceIsLeftOrRight = LeftOrRight.includes(sourcePosition); - const targetIsLeftOrRight = LeftOrRight.includes(targetPosition); - - // we expect flows to be horizontal or vertical (all handles left or right respectively top or bottom) - // a mixed edge is when one the source is on the left and the target is on the top for example. - const mixedEdge = (sourceIsLeftOrRight && !targetIsLeftOrRight) || (targetIsLeftOrRight && !sourceIsLeftOrRight); - - if (mixedEdge) { - const xOffset = sourceIsLeftOrRight ? Math.abs(targetX - sourceX) : 0; - const centerX = sourceX > targetX ? sourceX - xOffset : sourceX + xOffset; - - const yOffset = sourceIsLeftOrRight ? 0 : Math.abs(targetY - sourceY); - const centerY = sourceY < targetY ? sourceY + yOffset : sourceY - yOffset; - - return [centerX, centerY, xOffset, yOffset]; - } - - 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 getMouseHandler( id: string, getState: StoreApi['getState'], @@ -71,3 +26,53 @@ export function getMouseHandler( } }; } + +// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB) +export function getSimpleEdgeCenter({ + 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 6bbe82a5..d7a3215d 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -1,18 +1,10 @@ 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 } from './components/Edges/StraightEdge'; +export { default as StraightEdge, getStraightPath } from './components/Edges/StraightEdge'; export { default as StepEdge } from './components/Edges/StepEdge'; -export { - default as BezierEdge, - getBezierPath, - getBezierCenter as getBezierEdgeCenter, -} from './components/Edges/BezierEdge'; -export { - default as SimpleBezierEdge, - getSimpleBezierPath, - getSimpleBezierCenter as getSimpleBezierEdgeCenter, -} from './components/Edges/SimpleBezierEdge'; +export { default as BezierEdge, getBezierPath } 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 BaseEdge } from './components/Edges/BaseEdge'; @@ -29,7 +21,7 @@ export { getRectOfNodes, } from './utils/graph'; export { applyNodeChanges, applyEdgeChanges } from './utils/changes'; -export { getMarkerEnd, getCenter as getEdgeCenter } from './components/Edges/utils'; +export { getMarkerEnd } from './components/Edges/utils'; export { default as ReactFlowProvider } from './components/ReactFlowProvider'; export { default as Panel } from './components/Panel'; diff --git a/packages/core/src/types/edges.ts b/packages/core/src/types/edges.ts index f4945a42..2332dae9 100644 --- a/packages/core/src/types/edges.ts +++ b/packages/core/src/types/edges.ts @@ -104,8 +104,8 @@ export type BaseEdgeProps = Pick< | 'markerEnd' | 'interactionWidth' > & { - centerX: number; - centerY: number; + labelX: number; + labelY: number; path: string; };