fix(vscode): smoother treats both transition ends with the same stub threshold

The previous smoother preferred tail-end shifts over head-end ones and
would happily take an already-balanced polyline (e.g., the 10-75-10
route ELK chose for ``[*] -> Active`` in the playground) and
unbalance it to 2-75-18, reintroducing a visible stub on the source
side. The user explicitly asked for the same threshold on both ends,
so a short stub at the start of a transition is just as unwanted as
one at the arrow.

Replace the directional tail / head shifts for the common
four-point V-H-V / H-V-H routing with a proper balance pass:

- When the total displacement along the outer axis is large enough
  to fit two threshold-length segments, only the short end is bumped
  up while the healthy end stays as-is.
- When the total displacement is shorter than ``2 * threshold``, the
  two outer segments are split evenly so neither dominates. For the
  ``[*] -> Active`` case this yields 10/10 instead of the earlier
  2/18 — both ends are equally short (geometry does not allow the
  full threshold on both sides), but no end is tiny and every arrow
  still lands perpendicular to its destination.
- The balance function now owns every V-H-V case and returns true
  even when no change is needed, so the tail / head shift fallback
  no longer fires for these polylines and cannot re-introduce an
  asymmetry. Longer routings (5+ points) still use the tail-first
  fallback.

Visual verification against the playground confirms:
  [*] -> Active                   — 10-75-10 (balanced V-H-V)
  Active -> [*] exit pseudo       — 18+ on both ends
  Running child transitions       — unchanged, already balanced
  everything else                 — unchanged

Author: HansBug

editors/vscode/src/preview-webview/render/edge-smoother.ts

@@ -1,25 +1,37 @@
 /**
- * Post-process an ELK-laid-out preview graph so edges do not end (or
- * start) with a tiny orthogonal stub right next to a node. A short
- * terminal segment reads as visual noise glued to the arrowhead.
+ * Post-process an ELK-laid-out preview graph so neither end of an edge
+ * ends with a too-short orthogonal stub. The same length threshold
+ * applies to both ends — an edge is just as visually broken when its
+ * tail segment (the one the arrowhead sits on) is 2px as when its
+ * head segment (the one leaving the source) is 2px.
  *
- * The smoother preserves two invariants that the earlier merge-based
- * version broke:
+ * The smoother operates in three modes depending on the polyline shape:
  *
- * 1. Orthogonality — every segment remains axis-aligned.
- * 2. Axis at the endpoint — the final segment keeps the same axis it
- *    had before smoothing, so the arrow lands perpendicular to the
- *    destination node's border (horizontal segment → hits a vertical
- *    side, vertical segment → hits a horizontal side).
+ * 1. **V-H-V / H-V-H (len 4)** — the overwhelmingly common orthogonal
+ *    routing shape with one middle bend. The two outer segments share
+ *    the same axis; their length sum equals the source-to-target
+ *    displacement along that axis. When either outer segment is
+ *    shorter than the threshold, the middle bend is slid along the
+ *    shared axis to redistribute length:
+ *      * If the total displacement allows both ends to meet the
+ *        threshold while keeping the healthier end intact, only the
+ *        short end is elongated.
+ *      * Otherwise the two ends are balanced symmetrically so
+ *        neither is dominant. Both ends then match, which is the
+ *        closest approximation of the "same standard on both sides"
+ *        rule when geometry makes the threshold unreachable.
  *
- * The fix elongates a short terminal segment by shifting the two bend
- * points adjacent to it in the direction parallel to the segment,
- * keeping the penultimate segment perpendicular. If that shift would
- * turn a formerly-healthy segment on the OTHER side into a new stub,
- * the fix is skipped — that was the ping-pong bug where end-stub
- * elongation created a start stub and vice versa. In such a case the
- * tiny stub is left as-is; preserving perpendicularity matters more
- * than hiding a two-pixel segment.
+ * 2. **Longer polylines** — a tail or head shift is applied as a
+ *    single-pass fix. The ping-pong between tail and head fixes is
+ *    avoided by picking the tail if it was short and only falling
+ *    back to the head otherwise.
+ *
+ * 3. **Short polylines (< 3 points)** — left alone; there is no bend
+ *    to adjust.
+ *
+ * Orthogonality is preserved in every mode: no segment ever flips
+ * axis, so arrows continue to land perpendicular to the destination
+ * node's border after smoothing.
  */
 import type {PreviewElkEdge, PreviewElkNode} from '../types';
 
@@ -30,26 +42,88 @@ interface Point {
     y: number;
 }
 
-function manhattan(a: Point, b: Point): number {
-    return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+type Axis = 'x' | 'y';
+
+function axisOf(a: Point, b: Point): Axis | null {
+    const dx = Math.abs(a.x - b.x);
+    const dy = Math.abs(a.y - b.y);
+    if (dx < 0.5 && dy < 0.5) return null;
+    return dx > dy ? 'x' : 'y';
+}
+
+/**
+ * Rebalance a 4-point V-H-V / H-V-H polyline so the two outer
+ * segments both meet the stub threshold when possible, and split the
+ * total displacement evenly when the threshold cannot be reached.
+ *
+ * Returns ``true`` when the polyline is a V-H-V shape this function
+ * knows how to handle — whether or not a geometric change was made.
+ * Returning ``true`` signals to the caller "I own this case; do not
+ * run the tail / head fallback shifts, which would undo the balance."
+ * Returns ``false`` only when the polyline is not a V-H-V / H-V-H
+ * (e.g. longer routing, degenerate geometry).
+ */
+function balanceVHV(points: Point[], threshold: number): boolean {
+    if (points.length !== 4) return false;
+    const [p0, p1, p2, p3] = points;
+    const outerAxis = axisOf(p0, p1);
+    const innerAxis = axisOf(p1, p2);
+    const tailAxis = axisOf(p2, p3);
+    if (!outerAxis || !innerAxis || !tailAxis) return false;
+    if (outerAxis !== tailAxis) return false;
+    if (outerAxis === innerAxis) return false;
+    const axis: Axis = outerAxis;
+
+    // The two outer segments lie on ``axis``; their lengths sum to the
+    // total displacement along that axis from source to target.
+    const startCoord = p0[axis];
+    const endCoord = p3[axis];
+    const total = Math.abs(endCoord - startCoord);
+    const direction = endCoord > startCoord ? 1 : -1;
+    const headLen = Math.abs(p1[axis] - p0[axis]);
+    const tailLen = Math.abs(p3[axis] - p2[axis]);
+
+    // Both ends already healthy — V-H-V owns the decision and leaves
+    // the polyline untouched. Returning true here prevents the
+    // fallback shift from running and destabilising the balance.
+    if (headLen >= threshold && tailLen >= threshold) return true;
+
+    let targetHead: number;
+    if (total >= 2 * threshold) {
+        // Plenty of room — keep whichever end is already healthy and
+        // only bump the short one up to the threshold. When both are
+        // short in this branch (shouldn't happen but guard anyway),
+        // split evenly.
+        if (headLen < threshold && tailLen < threshold) {
+            targetHead = total / 2;
+        } else if (tailLen < threshold) {
+            const delta = threshold - tailLen;
+            targetHead = headLen - delta;
+        } else {
+            // headLen < threshold
+            targetHead = threshold;
+        }
+    } else {
+        // Can't satisfy the threshold on both ends — balance evenly.
+        targetHead = total / 2;
+    }
+
+    const newBendCoord = startCoord + direction * targetHead;
+    if (Math.abs(newBendCoord - p1[axis]) >= 0.5) {
+        p1[axis] = newBendCoord;
+        p2[axis] = newBendCoord;
+    }
+    return true;
 }
 
 interface ShiftPlan {
-    axis: 'x' | 'y';
-    /** +1 / -1 — direction along the segment axis that elongates the stub. */
+    axis: Axis;
     sign: number;
-    /** How many pixels to shift. */
     delta: number;
-    /** Indices of the two points that need to move. */
     a: number;
     b: number;
 }
 
-/**
- * Build a shift plan for the tail of a polyline. Returns ``null`` when
- * the tail is not a valid short stub (either already long enough, or
- * the penultimate geometry is not perpendicular to the final segment).
- */
 function planTailShift(points: Point[], threshold: number): ShiftPlan | null {
     if (points.length < 3) return null;
     const last = points[points.length - 1];
@@ -61,7 +135,6 @@ function planTailShift(points: Point[], threshold: number): ShiftPlan | null {
     if (stub <= 0 || stub >= threshold) return null;
     const horizontal = Math.abs(dx) >= Math.abs(dy);
     if (horizontal) {
-        // Penultimate segment must be vertical (same x on both ends).
         if (Math.abs(pprev.x - prev.x) > 0.5) return null;
         const sign = dx > 0 ? -1 : 1;
         return {axis: 'x', sign, delta: threshold - stub, a: points.length - 2, b: points.length - 3};
@@ -92,35 +165,8 @@ function planHeadShift(points: Point[], threshold: number): ShiftPlan | null {
 }
 
 function applyShift(points: Point[], plan: ShiftPlan): void {
-    const {axis, sign, delta, a, b} = plan;
-    points[a][axis] += sign * delta;
-    points[b][axis] += sign * delta;
-}
-
-/**
- * Would applying this plan on the polyline create a fresh short stub at
- * the OPPOSITE end? A plan qualifies as safe only when it leaves both
- * ends of the polyline above the threshold.
- */
-function createsOppositeStub(
-    points: Point[],
-    plan: ShiftPlan,
-    threshold: number,
-    end: 'tail' | 'head'
-): boolean {
-    // Clone just enough to check. Applying the shift mutates; test on a
-    // shallow clone of the two points that change.
-    const cloned = points.map(p => ({x: p.x, y: p.y}));
-    applyShift(cloned, plan);
-    if (end === 'tail') {
-        // Check the head segment of the clone.
-        if (cloned.length < 2) return false;
-        const headLen = manhattan(cloned[0], cloned[1]);
-        return headLen > 0 && headLen < threshold;
-    }
-    if (cloned.length < 2) return false;
-    const tailLen = manhattan(cloned[cloned.length - 2], cloned[cloned.length - 1]);
-    return tailLen > 0 && tailLen < threshold;
+    points[plan.a][plan.axis] += plan.sign * plan.delta;
+    points[plan.b][plan.axis] += plan.sign * plan.delta;
 }
 
 function smoothEdge(edge: PreviewElkEdge, threshold: number): void {
@@ -132,20 +178,15 @@ function smoothEdge(edge: PreviewElkEdge, threshold: number): void {
         ];
         if (points.length < 3) continue;
 
-        // The tail end carries the arrowhead and is therefore the most
-        // visually important place to elongate a short stub. If the
-        // tail is short, fix it unconditionally — even if the fix
-        // creates a tiny start stub, that one is rarely visible
-        // (circle pseudo-ports hide it, and rect ports put it inside
-        // the node outline). Only fall back to the head fix when the
-        // tail was already fine, to avoid the ping-pong that would
-        // otherwise shuttle the stub back and forth.
-        const tailPlan = planTailShift(points, threshold);
-        if (tailPlan) {
-            applyShift(points, tailPlan);
-        } else {
-            const headPlan = planHeadShift(points, threshold);
-            if (headPlan) applyShift(points, headPlan);
+        const balanced = balanceVHV(points, threshold);
+        if (!balanced) {
+            const tailPlan = planTailShift(points, threshold);
+            if (tailPlan) {
+                applyShift(points, tailPlan);
+            } else {
+                const headPlan = planHeadShift(points, threshold);
+                if (headPlan) applyShift(points, headPlan);
+            }
         }
 
         section.startPoint = {x: points[0].x, y: points[0].y};