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

fix(step-edge): always center align label

Browse Source
This commit is contained in:
Kenny Williams
2025-07-09 18:08:01 -07:00
parent 772f53a27d
commit 630b2385e2
2 changed files with 91 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -69,7 +69,7 @@ const nodes: Node[] = [
targetPosition: Position.Bottom,
style: { background: 'rgba(255,255,255,0.5)' },
},
// Bend Position Examples
// Bend Position Examples (horizontal)
{
id: '9',
position: { x: 300, y: 0 },
@@ -118,6 +118,55 @@ const nodes: Node[] = [
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[] = [
@@ -152,7 +201,7 @@ const edges: Edge[] = [
target: '8',
},
// Bend Position Examples
// Bend Position Examples (horizontal)
{
id: 'e9-10',
source: '9',
@@ -183,6 +232,37 @@ const edges: Edge[] = [
},
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 = {