@diagrammo/dgmo 0.30.0 → 0.32.0

package/src/boxes-and-lines/layout-search.ts

@@ -60,9 +60,13 @@ const splineGen = d3line<Pt>()
   .y((d) => d.y)
   .curve(curveBasis);
 
+// Path tokenizer for `flatten` — module-scope so it isn't recompiled per call.
+// String.match with a /g regex is stateless (ignores lastIndex), so a shared
+// instance is safe to reuse.
+const PATH_TOKEN_RE = /[MLQC]|-?\d*\.?\d+(?:e-?\d+)?/gi;
 // flatten an SVG path "d" (M/L/Q/C) into a polyline for crossing detection
 function flatten(d: string): Pt[] {
-  const toks = d.match(/[MLQC]|-?\d*\.?\d+(?:e-?\d+)?/gi) ?? [];
+  const toks = d.match(PATH_TOKEN_RE) ?? [];
   const pts: Pt[] = [];
   let i = 0,
     cx = 0,
@@ -121,6 +125,34 @@ function flatten(d: string): Pt[] {
   }
   return pts;
 }
+// Flattened edge polyline + its bbox. Building it requires an SVG-string
+// round-trip (d3 spline → regex parse), so it's memoized per layout: every
+// candidate is scored by countSplineCrossings + countEdgeOverlaps +
+// countEdgeNodePierces, which would otherwise each re-flatten all edges.
+type FlatPoly = { pts: Pt[]; x0: number; y0: number; x1: number; y1: number };
+const FLAT_CACHE = new WeakMap<object, FlatPoly[]>();
+function flatPolys(layout: BLLayoutResult): FlatPoly[] {
+  const key = layout.edges as unknown as object;
+  const hit = FLAT_CACHE.get(key);
+  if (hit) return hit;
+  const polys = layout.edges.map((e) => {
+    const pts =
+      e.points.length >= 2 ? flatten(splineGen(e.points as Pt[]) ?? '') : [];
+    let x0 = Infinity,
+      y0 = Infinity,
+      x1 = -Infinity,
+      y1 = -Infinity;
+    for (const p of pts) {
+      if (p.x < x0) x0 = p.x;
+      if (p.x > x1) x1 = p.x;
+      if (p.y < y0) y0 = p.y;
+      if (p.y > y1) y1 = p.y;
+    }
+    return { pts, x0, y0, x1, y1 };
+  });
+  FLAT_CACHE.set(key, polys);
+  return polys;
+}
 function segPoint(p1: Pt, p2: Pt, p3: Pt, p4: Pt): Pt | null {
   const den = (p2.x - p1.x) * (p4.y - p3.y) - (p2.y - p1.y) * (p4.x - p3.x);
   if (Math.abs(den) < 1e-9) return null;
@@ -136,28 +168,21 @@ function segPoint(p1: Pt, p2: Pt, p3: Pt, p4: Pt): Pt | null {
 // near a genuinely shared endpoint node; cluster near-duplicate hits.
 // Exported so the playground + benchmark score with the SAME counter the
 // engine optimizes against.
-export function countSplineCrossings(layout: BLLayoutResult): number {
+export function countSplineCrossings(
+  layout: BLLayoutResult,
+  /** Abort early once the running total exceeds this (the caller only needs to
+   *  know X has passed the best-so-far badness — the exact value no longer
+   *  matters). Returns a value > floor in that case; identical otherwise. */
+  floor = Infinity
+): number {
   const center = new Map<string, Pt>();
   for (const n of layout.nodes) center.set(n.label, { x: n.x, y: n.y });
   // collapsed group boxes are edge endpoints too (`__group_<label>`); without
   // them, edges meeting AT a collapsed box are miscounted as crossings.
   for (const g of layout.groups)
     if (g.collapsed) center.set('__group_' + g.label, { x: g.x, y: g.y });
-  const polys = layout.edges.map((e) => {
-    const pts =
-      e.points.length >= 2 ? flatten(splineGen(e.points as Pt[]) ?? '') : [];
-    let x0 = Infinity,
-      y0 = Infinity,
-      x1 = -Infinity,
-      y1 = -Infinity;
-    for (const p of pts) {
-      if (p.x < x0) x0 = p.x;
-      if (p.x > x1) x1 = p.x;
-      if (p.y < y0) y0 = p.y;
-      if (p.y > y1) y1 = p.y;
-    }
-    return { pts, s: e.source, t: e.target, x0, y0, x1, y1 };
-  });
+  const polys = flatPolys(layout);
+  const edges = layout.edges;
   const R = 34;
   let total = 0;
   for (let a = 0; a < polys.length; a++)
@@ -166,26 +191,43 @@ export function countSplineCrossings(layout: BLLayoutResult): number {
         B = polys[b]!;
       if (A.pts.length < 2 || B.pts.length < 2) continue;
       if (A.x1 < B.x0 || B.x1 < A.x0 || A.y1 < B.y0 || B.y1 < A.y0) continue; // bbox disjoint
-      const shared = [A.s, A.t]
-        .filter((n) => n === B.s || n === B.t)
-        .map((n) => center.get(n))
-        .filter(Boolean) as Pt[];
+      const ea = edges[a]!,
+        eb = edges[b]!;
+      // Shared-endpoint centres (≤2) — inlined to avoid allocating a filter/map
+      // array on every one of the O(E²) edge pairs.
+      let sh0: Pt | undefined, sh1: Pt | undefined;
+      if (ea.source === eb.source || ea.source === eb.target)
+        sh0 = center.get(ea.source);
+      if (ea.target === eb.source || ea.target === eb.target)
+        sh1 = center.get(ea.target);
       const hits: Pt[] = [];
-      for (let i = 1; i < A.pts.length; i++)
-        for (let j = 1; j < B.pts.length; j++) {
-          const p = segPoint(
-            A.pts[i - 1]!,
-            A.pts[i]!,
-            B.pts[j - 1]!,
-            B.pts[j]!
-          );
+      const ap = A.pts,
+        bp = B.pts;
+      for (let i = 1; i < ap.length; i++) {
+        const a0 = ap[i - 1]!,
+          a1 = ap[i]!;
+        const axMin = a0.x < a1.x ? a0.x : a1.x,
+          axMax = a0.x > a1.x ? a0.x : a1.x,
+          ayMin = a0.y < a1.y ? a0.y : a1.y,
+          ayMax = a0.y > a1.y ? a0.y : a1.y;
+        for (let j = 1; j < bp.length; j++) {
+          const b0 = bp[j - 1]!,
+            b1 = bp[j]!;
+          // per-segment bbox reject — disjoint segments can't cross
+          if (axMax < (b0.x < b1.x ? b0.x : b1.x)) continue;
+          if ((b0.x > b1.x ? b0.x : b1.x) < axMin) continue;
+          if (ayMax < (b0.y < b1.y ? b0.y : b1.y)) continue;
+          if ((b0.y > b1.y ? b0.y : b1.y) < ayMin) continue;
+          const p = segPoint(a0, a1, b0, b1);
           if (!p) continue;
-          if (shared.some((c) => Math.hypot(p.x - c.x, p.y - c.y) < R))
-            continue;
+          if (sh0 && Math.hypot(p.x - sh0.x, p.y - sh0.y) < R) continue;
+          if (sh1 && Math.hypot(p.x - sh1.x, p.y - sh1.y) < R) continue;
           if (!hits.some((h) => Math.hypot(h.x - p.x, h.y - p.y) < 6))
             hits.push(p);
         }
+      }
       total += hits.length;
+      if (total > floor) return total; // can't win — stop counting
     }
   return total;
 }
@@ -251,21 +293,8 @@ export function detectEdgeOverlaps(
         h: g.height,
       });
 
-  const polys = layout.edges.map((e) => {
-    const pts =
-      e.points.length >= 2 ? flatten(splineGen(e.points as Pt[]) ?? '') : [];
-    let x0 = Infinity,
-      y0 = Infinity,
-      x1 = -Infinity,
-      y1 = -Infinity;
-    for (const p of pts) {
-      if (p.x < x0) x0 = p.x;
-      if (p.x > x1) x1 = p.x;
-      if (p.y < y0) y0 = p.y;
-      if (p.y > y1) y1 = p.y;
-    }
-    return { pts, s: e.source, t: e.target, x0, y0, x1, y1 };
-  });
+  const polys = flatPolys(layout);
+  const edges = layout.edges;
 
   const runs: OverlapRun[] = [];
   for (let a = 0; a < polys.length; a++)
@@ -280,10 +309,14 @@ export function detectEdgeOverlaps(
         B.y1 + dist < A.y0
       )
         continue;
-      const shared = [A.s, A.t]
-        .filter((n) => n === B.s || n === B.t)
-        .map((n) => rect.get(n))
-        .filter(Boolean) as Rect[];
+      const ea = edges[a]!,
+        eb = edges[b]!;
+      // Shared-endpoint rects (≤2) — inlined to avoid a per-pair filter/map array.
+      let shr0: Rect | undefined, shr1: Rect | undefined;
+      if (ea.source === eb.source || ea.source === eb.target)
+        shr0 = rect.get(ea.source);
+      if (ea.target === eb.source || ea.target === eb.target)
+        shr1 = rect.get(ea.target);
       // Walk A; accumulate contiguous "covered" runs (close to B, off any shared
       // node). A run counts once if it reaches minLen.
       let run: Pt[] = [];
@@ -299,7 +332,9 @@ export function detectEdgeOverlaps(
         runLen = 0;
       };
       for (const p of A.pts) {
-        const nearShared = shared.some((r) => pointRectDist(p, r) < nodeClear);
+        const nearShared =
+          (shr0 !== undefined && pointRectDist(p, shr0) < nodeClear) ||
+          (shr1 !== undefined && pointRectDist(p, shr1) < nodeClear);
         const covered = !nearShared && distToPoly(p, B.pts) < dist;
         if (covered) {
           if (run.length)
@@ -358,9 +393,10 @@ export function detectEdgeNodePierces(
     Math.abs(p.x - r.x) < r.w / 2 - inset &&
     Math.abs(p.y - r.y) < r.h / 2 - inset;
   const out: NodePierce[] = [];
+  const polys = flatPolys(layout);
   layout.edges.forEach((e, idx) => {
     if (e.points.length < 2) return;
-    const poly = flatten(splineGen(e.points as Pt[]) ?? '');
+    const poly = polys[idx]!.pts;
     for (const r of rects) {
       if (
         r.key === e.source ||
@@ -860,7 +896,7 @@ function edgeLength(layout: BLLayoutResult): number {
   return total;
 }
 
-export function layoutBoxesAndLinesSearch(
+export async function layoutBoxesAndLinesSearch(
   parsed: ParsedBoxesAndLines,
   collapseInfo?: {
     collapsedChildCounts: Map<string, number>;
@@ -875,9 +911,21 @@ export function layoutBoxesAndLinesSearch(
     lambda?: number;
     /** How many top candidates to re-rank with the exact counter (default 6). */
     refineK?: number;
+    /** Progress hook for the interactive path. When provided, the search yields
+     *  to a macrotask after each candidate so the host UI can paint a progress
+     *  indicator. Omit it (CLI/export) and the search runs straight through with
+     *  no added latency. */
+    onProgress?: (done: number, total: number, phase: string) => void;
   }
-): BLLayoutResult {
+): Promise<BLLayoutResult> {
   const hideDescriptions = opts?.hideDescriptions ?? false;
+  const onProgress = opts?.onProgress;
+  // Yield to a macrotask (lets the browser repaint between heavy placements);
+  // no-op when there's no progress observer so non-interactive callers pay
+  // nothing.
+  const tick = onProgress
+    ? (): Promise<void> => new Promise<void>((r) => setTimeout(r))
+    : (): undefined => undefined;
 
   // collapsed group labels (shown as plain boxes) — mirrors the ELK path
   const collapsedGroupLabels = new Set<string>();
@@ -1016,6 +1064,217 @@ export function layoutBoxesAndLinesSearch(
     Math.abs(p.x - rect.x) <= rect.w / 2 &&
     Math.abs(p.y - rect.y) <= rect.h / 2;
 
+  // ── Pinned-layout bypass (Canvas Editor spike, Decisions 3/7) ──
+  // When a `layout` block positions EVERY node, place nodes directly from the
+  // stored coordinates and skip the whole dagre search. Edges become
+  // border-clipped straight connectors (no obstacle avoidance — honest-but-ugly).
+  // FLAT, EXPANDED groups are honored: each group's container rect is computed
+  // from its members' pinned positions (canvas group editing). A FLAT group can
+  // also be COLLAPSED while pinned — it renders as a plain box at its members'
+  // bbox-centre (so collapse no longer forces a full dagre reflow). Nested groups
+  // still fall back to dagre (deferred).
+  const pinned = parsed.nodePositions;
+  const groupLabelSet = new Set(parsed.groups.map((g) => g.label));
+  const groupsAreFlat = parsed.groups.every(
+    (g) => !g.parentGroup && !g.children.some((c) => groupLabelSet.has(c))
+  );
+  // A collapsed group can stay pinned only when it's FLAT (top-level, no
+  // sub-groups) and every one of its members has a pinned coord — otherwise we
+  // can't place its box without a search, so fall back to dagre.
+  const allOriginalGroupLabels = new Set(
+    (collapseInfo?.originalGroups ?? parsed.groups).map((g) => g.label)
+  );
+  const collapsedAreFlatPinned =
+    collapsedGroupLabels.size === 0 ||
+    (pinned !== undefined &&
+      collapseInfo !== undefined &&
+      [...collapsedGroupLabels].every((label) => {
+        const og = collapseInfo.originalGroups.find((g) => g.label === label);
+        if (!og || og.parentGroup) return false;
+        return og.children.every(
+          (c) => pinned.has(c) && !allOriginalGroupLabels.has(c)
+        );
+      }));
+  const allPinned =
+    pinned !== undefined &&
+    (parsed.nodes.length > 0 || collapsedGroupLabels.size > 0) &&
+    parsed.nodes.every((n) => pinned.has(n.label)) &&
+    groupsAreFlat &&
+    collapsedAreFlatPinned;
+  function placePinned(pins: ReadonlyMap<string, Pt>): BLLayoutResult {
+    // Collapsed flat groups → a plain NODE-sized box at the bbox-centre of the
+    // group's (now-hidden) members' pinned coords. The collapse transform
+    // redirected their incident edges to `__group_<label>`, so register that id
+    // in the position/rect lookups too.
+    const collapsedPosByGid = new Map<string, Pt>();
+    const collapsedBoxes: Array<{
+      label: string;
+      lineNumber: number;
+      childCount: number;
+      x: number;
+      y: number;
+    }> = [];
+    if (collapseInfo)
+      for (const label of collapsedGroupLabels) {
+        const og = collapseInfo.originalGroups.find((g) => g.label === label);
+        if (!og) continue;
+        let cx0 = Infinity,
+          cy0 = Infinity,
+          cx1 = -Infinity,
+          cy1 = -Infinity;
+        for (const c of og.children) {
+          const p = pins.get(c);
+          if (!p) continue;
+          cx0 = Math.min(cx0, p.x);
+          cx1 = Math.max(cx1, p.x);
+          cy0 = Math.min(cy0, p.y);
+          cy1 = Math.max(cy1, p.y);
+        }
+        if (!Number.isFinite(cx0)) continue;
+        const cx = (cx0 + cx1) / 2;
+        const cy = (cy0 + cy1) / 2;
+        collapsedPosByGid.set(`__group_${label}`, { x: cx, y: cy });
+        collapsedBoxes.push({
+          label,
+          lineNumber: og.lineNumber,
+          childCount:
+            collapseInfo.collapsedChildCounts.get(label) ?? og.children.length,
+          x: cx,
+          y: cy,
+        });
+      }
+    const posOf = (label: string): Pt | undefined =>
+      pins.get(label) ?? collapsedPosByGid.get(label);
+    const rectOf = (label: string) => {
+      const p = posOf(label)!;
+      const s = sizes.get(label) ?? { width: NODE_WIDTH, height: NODE_HEIGHT };
+      return { x: p.x, y: p.y, w: s.width, h: s.height };
+    };
+    const nodes = parsed.nodes.map((n) => {
+      const r = rectOf(n.label);
+      return { label: n.label, x: r.x, y: r.y, width: r.w, height: r.h };
+    });
+    const edges: BLLayoutEdge[] = parsed.edges.flatMap((e) => {
+      const sp = posOf(e.source);
+      const tp = posOf(e.target);
+      if (!sp || !tp) return [];
+      const srcRect = rectOf(e.source);
+      const tgtRect = rectOf(e.target);
+      const p0 = rectBorderPoint(srcRect, tp);
+      const p1 = rectBorderPoint(tgtRect, sp);
+      return [
+        {
+          source: e.source,
+          target: e.target,
+          ...(e.label !== undefined && { label: e.label }),
+          bidirectional: e.bidirectional,
+          lineNumber: e.lineNumber,
+          points: [p0, p1],
+          yOffset: 0,
+          parallelCount: 1,
+          metadata: e.metadata,
+          straight: true,
+        },
+      ];
+    });
+    // Fit the canvas around the pinned content with a uniform margin on every
+    // side. Crucially, content must never fall off the TOP/LEFT (the viewBox
+    // origin is 0,0): if a node was dragged past the margin we shift everything
+    // back on-canvas by `max(0, M - min)` — clamped so in-bounds diagrams keep
+    // their exact pinned coords (shift 0) and only off-canvas ones are nudged.
+    // Flat-group container rects: bbox of the group's members + side/bottom
+    // padding, with a label zone reserved at the top (mirrors the renderer).
+    const GROUP_PAD = 16;
+    const nodeByLabel = new Map(nodes.map((n) => [n.label, n]));
+    const groups: BLLayoutResult['groups'][number][] = [];
+    for (const grp of parsed.groups) {
+      let gx0 = Infinity,
+        gy0 = Infinity,
+        gx1 = -Infinity,
+        gy1 = -Infinity;
+      for (const c of grp.children) {
+        const n = nodeByLabel.get(c);
+        if (!n) continue;
+        gx0 = Math.min(gx0, n.x - n.width / 2);
+        gx1 = Math.max(gx1, n.x + n.width / 2);
+        gy0 = Math.min(gy0, n.y - n.height / 2);
+        gy1 = Math.max(gy1, n.y + n.height / 2);
+      }
+      if (!Number.isFinite(gx0)) continue; // members not pinned / empty group
+      const x0 = gx0 - GROUP_PAD;
+      const x1 = gx1 + GROUP_PAD;
+      const y0 = gy0 - GROUP_LABEL_ZONE;
+      const y1 = gy1 + GROUP_PAD;
+      groups.push({
+        label: grp.label,
+        lineNumber: grp.lineNumber,
+        x: (x0 + x1) / 2,
+        y: (y0 + y1) / 2,
+        width: x1 - x0,
+        height: y1 - y0,
+        collapsed: false,
+        childCount: grp.children.length,
+      });
+    }
+    // Collapsed flat groups: a plain box at the members' centre.
+    for (const cb of collapsedBoxes) {
+      groups.push({
+        label: cb.label,
+        lineNumber: cb.lineNumber,
+        x: cb.x,
+        y: cb.y,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        collapsed: true,
+        childCount: cb.childCount,
+      });
+    }
+
+    const M = 40;
+    let minX = Infinity,
+      minY = Infinity,
+      maxX = -Infinity,
+      maxY = -Infinity;
+    const acc = (x: number, y: number) => {
+      if (x < minX) minX = x;
+      if (x > maxX) maxX = x;
+      if (y < minY) minY = y;
+      if (y > maxY) maxY = y;
+    };
+    for (const n of nodes) {
+      acc(n.x - n.width / 2, n.y - n.height / 2);
+      acc(n.x + n.width / 2, n.y + n.height / 2);
+    }
+    for (const e of edges) for (const p of e.points) acc(p.x, p.y);
+    for (const gr of groups) {
+      acc(gr.x - gr.width / 2, gr.y - gr.height / 2);
+      acc(gr.x + gr.width / 2, gr.y + gr.height / 2);
+    }
+    // Only correct genuinely off-canvas content — a small tolerance ignores the
+    // sub-pixel jitter from rounding coords near the margin, so an already
+    // on-canvas diagram keeps its exact pinned positions (no creeping drift).
+    const TOL = 2;
+    const sx = minX < M - TOL ? M - minX : 0;
+    const sy = minY < M - TOL ? M - minY : 0;
+    const shifted = sx !== 0 || sy !== 0;
+    return {
+      nodes: shifted
+        ? nodes.map((n) => ({ ...n, x: n.x + sx, y: n.y + sy }))
+        : nodes,
+      edges: shifted
+        ? edges.map((e) => ({
+            ...e,
+            points: e.points.map((p) => ({ x: p.x + sx, y: p.y + sy })),
+          }))
+        : edges,
+      groups: shifted
+        ? groups.map((gr) => ({ ...gr, x: gr.x + sx, y: gr.y + sy }))
+        : groups,
+      width: maxX + sx + M,
+      height: maxY + sy + M,
+    };
+  }
+
   function place(cfg: {
     ranker: string;
     nodesep: number;
@@ -1173,6 +1432,9 @@ export function layoutBoxesAndLinesSearch(
     } as BLLayoutResult;
   }
 
+  // Pinned mode short-circuits the entire search.
+  if (allPinned) return placePinned(pinned!);
+
   const n = parsed.nodes.length;
   // ~500ms budget: search a larger pool, then refine the top few exactly.
   const seedCount =
@@ -1213,7 +1475,7 @@ export function layoutBoxesAndLinesSearch(
   // `floor` lets callers skip the expensive O/P passes once X alone already
   // exceeds the best badness found so far (it can't win, return Infinity).
   const badness = (lay: BLLayoutResult, floor: number): number => {
-    const x = countSplineCrossings(lay);
+    const x = countSplineCrossings(lay, floor);
     if (x > floor) return Infinity;
     return (
       x +
@@ -1228,6 +1490,18 @@ export function layoutBoxesAndLinesSearch(
   const objective = (lay: BLLayoutResult, viol: number) =>
     viol * 1e6 + edgeLength(lay) + lambda * meanDrift(lay, prev) * 10;
 
+  // Progress is reported over the two dominant phases: building the dagre
+  // candidate pool, then exact-scoring the top few. `refineK` is clamped below,
+  // so estimate the total here for a smooth bar.
+  const progressTotal =
+    configs.length + Math.min(opts?.refineK ?? 6, configs.length);
+  let progressDone = 0;
+  const step = async (phase: string): Promise<void> => {
+    if (!onProgress) return;
+    onProgress(++progressDone, progressTotal, phase);
+    await tick();
+  };
+
   // Build the candidate pool.
   const pool: BLLayoutResult[] = [];
   for (const cfg of configs) {
@@ -1236,6 +1510,7 @@ export function layoutBoxesAndLinesSearch(
     } catch {
       /* some rankers choke on odd graphs */
     }
+    await step('Optimizing layout');
   }
   if (!pool.length)
     return place({ ranker: 'network-simplex', nodesep: 50, ranksep: 60 });
@@ -1256,10 +1531,13 @@ export function layoutBoxesAndLinesSearch(
   // Stage 1: rank the dagre pool with the cheap straight-segment counter — a
   // cheap proxy to pick which candidates are worth the expensive exact scoring.
   // Widen REFINE_K a little since the proxy only sees crossings, not O/P.
-  pool.sort(
-    (a, b) =>
-      objective(a, countCrossingsFast(a)) - objective(b, countCrossingsFast(b))
-  );
+  // Pre-score each candidate ONCE (countCrossingsFast is O(E²)) into a key map,
+  // then sort by the stored key — the comparator otherwise recomputes the score
+  // for both operands on every comparison (O(C log C) calls vs C). The score is a
+  // pure function of the layout, so the resulting order is identical.
+  const fastKey = new Map<BLLayoutResult, number>();
+  for (const lay of pool) fastKey.set(lay, objective(lay, countCrossingsFast(lay)));
+  pool.sort((a, b) => fastKey.get(a)! - fastKey.get(b)!);
   const refineK = Math.min(REFINE_K, pool.length);
 
   // Stage 2: exact-score the top-K dagre candidates on the FULL badness (X+O+P)
@@ -1278,7 +1556,10 @@ export function layoutBoxesAndLinesSearch(
       best = lay;
     }
   };
-  for (const lay of pool.slice(0, refineK)) consider(lay);
+  for (const lay of pool.slice(0, refineK)) {
+    consider(lay);
+    await step('Refining layout');
+  }
 
   // Adaptive escalation: a still-high badness after the base seed budget means
   // the graph is genuinely hard — dense layouts (e.g. the marketplace) need many
@@ -1303,11 +1584,10 @@ export function layoutBoxesAndLinesSearch(
         /* ignore choking rankers */
       }
     }
-    extra.sort(
-      (a, b) =>
-        objective(a, countCrossingsFast(a)) -
-        objective(b, countCrossingsFast(b))
-    );
+    const extraKey = new Map<BLLayoutResult, number>();
+    for (const lay of extra)
+      extraKey.set(lay, objective(lay, countCrossingsFast(lay)));
+    extra.sort((a, b) => extraKey.get(a)! - extraKey.get(b)!);
     for (const lay of extra.slice(0, ESCALATE_REFINE)) consider(lay);
   }
 

package/src/boxes-and-lines/layout.ts

@@ -66,6 +66,10 @@ export interface BLLayoutEdge {
   /** Marker for renderer: draw with linear curve, not curveBasis (ELK gives
    * us orthogonal polylines and curveBasis would smooth corners into waves) */
   readonly deferred?: boolean;
+  /** Pinned-layout connector: a border-clipped straight 2-point segment (Canvas
+   *  Editor spike, Decision 7). Renderer draws it with a linear generator —
+   *  curveBasis collapses a 2-point polyline. */
+  readonly straight?: boolean;
 }
 
 export interface BLLayoutGroup {
@@ -195,16 +199,22 @@ export async function layoutBoxesAndLines(
     /** Previous node positions (label → {x,y}) for layout stability —
      *  minimizes node drift on edit/collapse. */
     previousPositions?: ReadonlyMap<string, { x: number; y: number }>;
+    /** Progress hook (interactive path). When set, the search yields between
+     *  candidates so the UI can paint a "trying X of Y" indicator. */
+    onProgress?: (done: number, total: number, phase: string) => void;
   }
 ): Promise<BLLayoutResult> {
   const { layoutBoxesAndLinesSearch } = await import('./layout-search');
-  const searched = layoutBoxesAndLinesSearch(parsed, collapseInfo, {
+  const searched = await layoutBoxesAndLinesSearch(parsed, collapseInfo, {
     ...(layoutOptions?.hideDescriptions !== undefined && {
       hideDescriptions: layoutOptions.hideDescriptions,
     }),
     ...(layoutOptions?.previousPositions !== undefined && {
       previousPositions: layoutOptions.previousPositions,
     }),
+    ...(layoutOptions?.onProgress !== undefined && {
+      onProgress: layoutOptions.onProgress,
+    }),
   });
   // Engine-agnostic post-processing: fan parallel edges, then float notes
   // (and shift the canvas to fit them).