@principal-ai/subsystems-react 0.51.3 → 0.51.4

package/src/utils/elkLayout.ts

@@ -330,6 +330,70 @@ export function calculatePathLength(points: Point[]): number {
   return total;
 }
 
+/**
+ * Point a given fraction along a polyline, by arc length.
+ *
+ * Using arc length, not the nearest-point snap, is what keeps a label chip on
+ * the visual middle of a *bent* route. Nearest-point (`closestPointOnPath`)
+ * jumps to whichever segment happens to be nearest the target, so a fanned-out
+ * orthogonal route put the chip on a corner near the source node.
+ *
+ * @public Exported for testing
+ */
+export function pointAlongPath(points: Point[], fraction: number): Point {
+  if (points.length === 0) return { x: 0, y: 0 };
+  if (points.length === 1) return points[0];
+  const total = calculatePathLength(points);
+  if (total === 0) return points[0];
+
+  let remaining = Math.max(0, Math.min(1, fraction)) * total;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1];
+    const b = points[i];
+    const seg = Math.hypot(b.x - a.x, b.y - a.y);
+    if (seg === 0) continue;
+    if (remaining <= seg) {
+      const t = remaining / seg;
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    remaining -= seg;
+  }
+  return points[points.length - 1];
+}
+
+/**
+ * How far along a polyline a point lies, as a 0…1 fraction of arc length.
+ * The point is assumed to lie on (or near) the path.
+ *
+ * @public Exported for testing
+ */
+export function fractionAlongPath(points: Point[], at: Point): number {
+  if (points.length < 2) return 0.5;
+  const total = calculatePathLength(points);
+  if (total === 0) return 0.5;
+
+  let travelled = 0;
+  let bestDist = Infinity;
+  let bestTravelled = 0;
+  for (let i = 1; i < points.length; i++) {
+    const a = points[i - 1];
+    const b = points[i];
+    const seg = Math.hypot(b.x - a.x, b.y - a.y);
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const t = seg === 0 ? 0 : Math.max(0, Math.min(1, ((at.x - a.x) * dx + (at.y - a.y) * dy) / (seg * seg)));
+    const px = a.x + dx * t;
+    const py = a.y + dy * t;
+    const dist = Math.hypot(at.x - px, at.y - py);
+    if (dist < bestDist) {
+      bestDist = dist;
+      bestTravelled = travelled + seg * t;
+    }
+    travelled += seg;
+  }
+  return bestTravelled / total;
+}
+
 /**
  * Get ELK layout options based on configuration
  */
@@ -958,10 +1022,14 @@ export async function computeElkLayout(
             lx += sourceOffset.x + (targetOffset.x - sourceOffset.x) * t;
             ly += sourceOffset.y + (targetOffset.y - sourceOffset.y) * t;
           }
-          // Snap onto the polyline stroke. ELK's label box can sit slightly
-          // off the route (side selection / reserved label space); we keep
-          // its along-edge placement but center on the actual path.
-          const onPath = closestPointOnPath(allPoints, { x: lx, y: ly });
+          // Place the chip by arc length, using ELK's label position only as a
+          // hint for *how far along* the route it belongs. Snapping to the
+          // nearest point (the old behaviour) jumped to whichever segment was
+          // nearest the target, which put fanned-out orthogonal labels on a
+          // corner near the source instead of the middle of the line.
+          const hint = closestPointOnPath(allPoints, { x: lx, y: ly });
+          const hintFraction = fractionAlongPath(allPoints, hint);
+          const onPath = pointAlongPath(allPoints, hintFraction);
           edgeLabelPositions.set(edge.id, onPath);
         }