alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(step-edge): rename bendPosition to stepPosition

Browse Source
This commit is contained in:
moklick
2025-07-09 14:45:52 +02:00
parent eaea14c617
commit 772f53a27d
5 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/react/src/examples/EdgeRouting/index.tsx
+6 -6
View File
@@ -157,9 +157,9 @@ const edges: Edge[] = [
id: 'e9-10', id: 'e9-10',
source: '9', source: '9',
target: '10', target: '10',
label: 'bendPosition: 0.2', label: 'stepPosition: 0.2',
pathOptions: { pathOptions: {
bendPosition: 0.2, stepPosition: 0.2,
}, },
interactionWidth: 0, interactionWidth: 0,
}, },
@@ -167,9 +167,9 @@ const edges: Edge[] = [
id: 'e11-12', id: 'e11-12',
source: '11', source: '11',
target: '12', target: '12',
label: 'bendPosition: 0.5 (default)', label: 'stepPosition: 0.5 (default)',
pathOptions: { pathOptions: {
bendPosition: 0.5, stepPosition: 0.5,
}, },
interactionWidth: 0, interactionWidth: 0,
}, },
@@ -177,9 +177,9 @@ const edges: Edge[] = [
id: 'e13-14', id: 'e13-14',
source: '13', source: '13',
target: '14', target: '14',
label: 'bendPosition: 0.8', label: 'stepPosition: 0.8',
pathOptions: { pathOptions: {
bendPosition: 0.8, stepPosition: 0.8,
}, },
interactionWidth: 0, interactionWidth: 0,
}, },
packages/react/src/components/Edges/SmoothStepEdge.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ function createSmoothStepEdge(params: { isInternal: boolean }) {
targetPosition, targetPosition,
borderRadius: pathOptions?.borderRadius, borderRadius: pathOptions?.borderRadius,
offset: pathOptions?.offset, offset: pathOptions?.offset,
bendPosition: pathOptions?.bendPosition, stepPosition: pathOptions?.stepPosition,
}); });
const _id = params.isInternal ? undefined : id; const _id = params.isInternal ? undefined : id;
packages/svelte/src/lib/components/edges/SmoothStepEdge.svelte
+1 -1
View File
@@ -31,7 +31,7 @@
targetPosition, targetPosition,
borderRadius: pathOptions?.borderRadius, borderRadius: pathOptions?.borderRadius,
offset: pathOptions?.offset, offset: pathOptions?.offset,
bendPosition: pathOptions?.bendPosition, stepPosition: pathOptions?.stepPosition
}) })
); );
</script> </script>
packages/system/src/types/edges.ts
+1 -1
View File
@@ -45,7 +45,7 @@ export type EdgeBase<
export type SmoothStepPathOptions = { export type SmoothStepPathOptions = {
offset?: number; offset?: number;
borderRadius?: number; borderRadius?: number;
bendPosition?: number; stepPosition?: number;
}; };
export type StepPathOptions = { export type StepPathOptions = {
packages/system/src/utils/edges/smoothstep-edge.ts
+9 -9
View File
@@ -31,7 +31,7 @@ export interface GetSmoothStepPathParams {
* 0 = at source, 1 = at target, 0.5 = midpoint * 0 = at source, 1 = at target, 0.5 = midpoint
* @default 0.5 * @default 0.5
*/ */
bendPosition?: number; stepPosition?: number;
} }
const handleDirections = { const handleDirections = {
@@ -69,7 +69,7 @@ function getPoints({
targetPosition = Position.Top, targetPosition = Position.Top,
center, center,
offset, offset,
bendPosition, stepPosition,
}: { }: {
source: XYPosition; source: XYPosition;
sourcePosition: Position; sourcePosition: Position;
@@ -77,7 +77,7 @@ function getPoints({
targetPosition: Position; targetPosition: Position;
center: Partial<XYPosition>; center: Partial<XYPosition>;
offset: number; offset: number;
bendPosition: number; stepPosition: number;
}): [XYPosition[], number, number, number, number] { }): [XYPosition[], number, number, number, number] {
const sourceDir = handleDirections[sourcePosition]; const sourceDir = handleDirections[sourcePosition];
const targetDir = handleDirections[targetPosition]; const targetDir = handleDirections[targetPosition];
@@ -103,9 +103,9 @@ function getPoints({
targetY: target.y, targetY: target.y,
}); });
// Calculate bend position based on the bendPosition parameter // Calculate bend position based on the stepPosition parameter
const bendX = sourceGapped.x + (targetGapped.x - sourceGapped.x) * bendPosition; const bendX = sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition;
const bendY = sourceGapped.y + (targetGapped.y - sourceGapped.y) * bendPosition; const bendY = sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition;
// opposite handle positions, default case // opposite handle positions, default case
if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) { if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
@@ -265,8 +265,8 @@ export function getSmoothStepPath({
centerX, centerX,
centerY, centerY,
offset = 20, offset = 20,
bendPosition = 0.5, stepPosition = 0.5,
}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { }: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
const [points, labelX, labelY, offsetX, offsetY] = getPoints({ const [points, labelX, labelY, offsetX, offsetY] = getPoints({
source: { x: sourceX, y: sourceY }, source: { x: sourceX, y: sourceY },
sourcePosition, sourcePosition,
@@ -274,7 +274,7 @@ export function getSmoothStepPath({
targetPosition, targetPosition,
center: { x: centerX, y: centerY }, center: { x: centerX, y: centerY },
offset, offset,
bendPosition, stepPosition,
}); });
const path = points.reduce<string>((res, p, i) => { const path = points.reduce<string>((res, p, i) => {