diff --git a/examples/react/src/examples/EdgeRouting/index.tsx b/examples/react/src/examples/EdgeRouting/index.tsx index 4f1fc97d..a0603582 100644 --- a/examples/react/src/examples/EdgeRouting/index.tsx +++ b/examples/react/src/examples/EdgeRouting/index.tsx @@ -151,15 +151,15 @@ const edges: Edge[] = [ source: '7', target: '8', }, - + // Bend Position Examples { id: 'e9-10', source: '9', target: '10', - label: 'bendPosition: 0.2', + label: 'stepPosition: 0.2', pathOptions: { - bendPosition: 0.2, + stepPosition: 0.2, }, interactionWidth: 0, }, @@ -167,9 +167,9 @@ const edges: Edge[] = [ id: 'e11-12', source: '11', target: '12', - label: 'bendPosition: 0.5 (default)', + label: 'stepPosition: 0.5 (default)', pathOptions: { - bendPosition: 0.5, + stepPosition: 0.5, }, interactionWidth: 0, }, @@ -177,9 +177,9 @@ const edges: Edge[] = [ id: 'e13-14', source: '13', target: '14', - label: 'bendPosition: 0.8', + label: 'stepPosition: 0.8', pathOptions: { - bendPosition: 0.8, + stepPosition: 0.8, }, interactionWidth: 0, }, diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx index 45771496..6d52f6a4 100644 --- a/packages/react/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx @@ -36,7 +36,7 @@ function createSmoothStepEdge(params: { isInternal: boolean }) { targetPosition, borderRadius: pathOptions?.borderRadius, offset: pathOptions?.offset, - bendPosition: pathOptions?.bendPosition, + stepPosition: pathOptions?.stepPosition, }); const _id = params.isInternal ? undefined : id; diff --git a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte index ff47d7f5..b8eb2c5b 100644 --- a/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte +++ b/packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte @@ -31,7 +31,7 @@ targetPosition, borderRadius: pathOptions?.borderRadius, offset: pathOptions?.offset, - bendPosition: pathOptions?.bendPosition, + stepPosition: pathOptions?.stepPosition }) ); diff --git a/packages/system/src/types/edges.ts b/packages/system/src/types/edges.ts index 3acfab99..143e66dd 100644 --- a/packages/system/src/types/edges.ts +++ b/packages/system/src/types/edges.ts @@ -45,7 +45,7 @@ export type EdgeBase< export type SmoothStepPathOptions = { offset?: number; borderRadius?: number; - bendPosition?: number; + stepPosition?: number; }; export type StepPathOptions = { diff --git a/packages/system/src/utils/edges/smoothstep-edge.ts b/packages/system/src/utils/edges/smoothstep-edge.ts index 8e90e7c8..5eae694c 100644 --- a/packages/system/src/utils/edges/smoothstep-edge.ts +++ b/packages/system/src/utils/edges/smoothstep-edge.ts @@ -31,7 +31,7 @@ export interface GetSmoothStepPathParams { * 0 = at source, 1 = at target, 0.5 = midpoint * @default 0.5 */ - bendPosition?: number; + stepPosition?: number; } const handleDirections = { @@ -69,7 +69,7 @@ function getPoints({ targetPosition = Position.Top, center, offset, - bendPosition, + stepPosition, }: { source: XYPosition; sourcePosition: Position; @@ -77,7 +77,7 @@ function getPoints({ targetPosition: Position; center: Partial; offset: number; - bendPosition: number; + stepPosition: number; }): [XYPosition[], number, number, number, number] { const sourceDir = handleDirections[sourcePosition]; const targetDir = handleDirections[targetPosition]; @@ -103,9 +103,9 @@ function getPoints({ targetY: target.y, }); - // Calculate bend position based on the bendPosition parameter - const bendX = sourceGapped.x + (targetGapped.x - sourceGapped.x) * bendPosition; - const bendY = sourceGapped.y + (targetGapped.y - sourceGapped.y) * bendPosition; + // Calculate bend position based on the stepPosition parameter + const bendX = sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition; + const bendY = sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition; // opposite handle positions, default case if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) { @@ -265,8 +265,8 @@ export function getSmoothStepPath({ centerX, centerY, offset = 20, - bendPosition = 0.5, -}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { + stepPosition = 0.5, +}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [points, labelX, labelY, offsetX, offsetY] = getPoints({ source: { x: sourceX, y: sourceY }, sourcePosition, @@ -274,7 +274,7 @@ export function getSmoothStepPath({ targetPosition, center: { x: centerX, y: centerY }, offset, - bendPosition, + stepPosition, }); const path = points.reduce((res, p, i) => {