fix(step-edge): always center align label

examples/react/src/examples/EdgeRouting/index.tsx

@@ -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 = {

packages/system/src/utils/edges/smoothstep-edge.ts

@@ -103,14 +103,17 @@ function getPoints({
     targetY: target.y,
   });
 
-  // 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) {
-    centerX = center.x ?? bendX;
-    centerY = center.y ?? bendY;
+    if (dirAccessor === 'x') {
+      // Primary direction is horizontal, so stepPosition affects X coordinate
+      centerX = center.x ?? (sourceGapped.x + (targetGapped.x - sourceGapped.x) * stepPosition);
+      centerY = center.y ?? (sourceGapped.y + targetGapped.y) / 2;
+    } else {
+      // Primary direction is vertical, so stepPosition affects Y coordinate  
+      centerX = center.x ?? (sourceGapped.x + targetGapped.x) / 2;
+      centerY = center.y ?? (sourceGapped.y + (targetGapped.y - sourceGapped.y) * stepPosition);
+    }
 
     /*
      *    --->