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

Merge pull request #5376 from kennyjwilli/bendposition

Browse Source 
feat(smoothstep-edge): add bendPosition parameter to control bend location
This commit is contained in:
Moritz Klack
2025-07-10 11:32:06 +02:00
committed by GitHub
parent 1c3d99bb33 f0ce2c876d
commit 9f4f57ca2a
6 changed files with 198 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
examples/react/src/examples/EdgeRouting/index.tsx
View File

@@ -1,4 +1,4 @@
import { ReactFlow, Node, Edge, Position, MarkerType } from '@xyflow/react';
import { ReactFlow, Node, Position, MarkerType, BuiltInEdge } from '@xyflow/react';
const nodes: Node[] = [
// LTR
@@ -69,9 +69,107 @@ const nodes: Node[] = [
targetPosition: Position.Bottom,
style: { background: 'rgba(255,255,255,0.5)' },
},
// Bend Position Examples (horizontal)
{
id: '9',
position: { x: 300, y: 0 },
data: { label: 'Source' },
sourcePosition: Position.Right,
targetPosition: Position.Right,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '10',
position: { x: 600, y: 150 },
data: { label: 'Target' },
sourcePosition: Position.Left,
targetPosition: Position.Left,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '11',
position: { x: 300, y: 300 },
data: { label: 'Source' },
sourcePosition: Position.Right,
targetPosition: Position.Right,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '12',
position: { x: 600, y: 450 },
data: { label: 'Target' },
sourcePosition: Position.Left,
targetPosition: Position.Left,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '13',
position: { x: 300, y: 600 },
data: { label: 'Source' },
sourcePosition: Position.Right,
targetPosition: Position.Right,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '14',
position: { x: 600, y: 750 },
data: { label: 'Target' },
sourcePosition: Position.Left,
targetPosition: Position.Left,
style: { background: 'rgba(255,255,255,0.5)' },
},
// Bend Position Examples (vertical)
{
id: '15',
position: { x: 800, y: 0 },
data: { label: 'Source' },
sourcePosition: Position.Bottom,
targetPosition: Position.Bottom,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '16',
position: { x: 950, y: 150 },
data: { label: 'Target' },
sourcePosition: Position.Top,
targetPosition: Position.Top,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '17',
position: { x: 800, y: 300 },
data: { label: 'Source' },
sourcePosition: Position.Bottom,
targetPosition: Position.Bottom,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '18',
position: { x: 950, y: 450 },
data: { label: 'Target' },
sourcePosition: Position.Top,
targetPosition: Position.Top,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '19',
position: { x: 800, y: 600 },
data: { label: 'Source' },
sourcePosition: Position.Bottom,
targetPosition: Position.Bottom,
style: { background: 'rgba(255,255,255,0.5)' },
},
{
id: '20',
position: { x: 950, y: 750 },
data: { label: 'Target' },
sourcePosition: Position.Top,
targetPosition: Position.Top,
style: { background: 'rgba(255,255,255,0.5)' },
},
];
const edges: Edge[] = [
const edges: BuiltInEdge[] = [
{
id: 'e1-2',
source: '1',
@@ -102,6 +200,69 @@ const edges: Edge[] = [
source: '7',
target: '8',
},
// Bend Position Examples (horizontal)
{
id: 'e9-10',
source: '9',
target: '10',
label: 'stepPosition: 0.2',
pathOptions: {
stepPosition: 0.2,
},
interactionWidth: 0,
},
{
id: 'e11-12',
source: '11',
target: '12',
label: 'stepPosition: 0.5 (default)',
pathOptions: {
stepPosition: 0.5,
},
interactionWidth: 0,
},
{
id: 'e13-14',
source: '13',
target: '14',
label: 'stepPosition: 0.8',
pathOptions: {
stepPosition: 0.8,
},
interactionWidth: 0,
},
// Bend Position Examples (vertical)
{
id: 'e15-16',
source: '15',
target: '16',
label: 'stepPosition: 0.2',
pathOptions: {
stepPosition: 0.2,
},
interactionWidth: 0,
},
{
id: 'e17-18',
source: '17',
target: '18',
label: 'stepPosition: 0.5',
pathOptions: {
stepPosition: 0.5,
},
interactionWidth: 0,
},
{
id: 'e19-20',
source: '19',
target: '20',
label: 'stepPosition: 0.8',
pathOptions: {
stepPosition: 0.8,
},
interactionWidth: 0,
},
];
const defaultEdgeOptions = {
@@ -115,8 +276,8 @@ const defaultEdgeOptions = {
},
};
const SimpleEdge = () => {
function EdgeRouting() {
return <ReactFlow defaultNodes={nodes} defaultEdges={edges} fitView defaultEdgeOptions={defaultEdgeOptions} />;
};
}
export default SimpleEdge;
export default EdgeRouting;