@tscircuit/rectdiff 0.0.23 → 0.0.25

package/AGENTS.md

@@ -0,0 +1,23 @@
+This is an algorithm solver repo designed to be integrated into the tscircuit
+autorouter.
+
+It uses the SimpleRouteJson type as input (see lib/types/srj-types.ts)
+
+We use svg snapshots to create visual snapshots as our primary method of
+ensuring the algorithm works correctly. We use `export BUN_UPDATE_SNAPSHOTS=1`
+and `bun test path/to/test.test.ts` to update the snapshots.
+
+We use the `graphics-debug` package to turn `GraphicsObject` into SVGs using
+
+```tsx
+import { getSvgFromGraphicsObject } from "graphics-debug"
+```
+
+We use `cosmos` `*.page.tsx` files inside the `pages` directory to create
+examples that can be debugged for a human.
+
+We discovered the algorithm via `experiments/rect3d_visualizer.html` and we're
+now formalizing it into a solver pattern and binding to our normal types.
+
+The `test-assets` directory contains assets for test, typically simple route
+json files with test cases that can be importing into pages or tests.

package/dist/index.d.ts

@@ -242,6 +242,7 @@ declare class RectDiffSeedingSolver extends BaseSolver {
     private candidates;
     private placed;
     private placedIndexByLayer;
+    private hardPlacedByLayer;
     private expansionIndex;
     private edgeAnalysisDone;
     private totalSeedsThisGrid;

package/dist/index.js

@@ -688,24 +688,18 @@ function containsPoint(r, p) {
   return p.x >= r.x - EPS4 && p.x <= r.x + r.width + EPS4 && p.y >= r.y - EPS4 && p.y <= r.y + r.height + EPS4;
 }
 function distancePointToRectEdges(p, r) {
-  const edges = [
-    [r.x, r.y, r.x + r.width, r.y],
-    [r.x + r.width, r.y, r.x + r.width, r.y + r.height],
-    [r.x + r.width, r.y + r.height, r.x, r.y + r.height],
-    [r.x, r.y + r.height, r.x, r.y]
-  ];
-  let best = Infinity;
-  for (const [x1, y1, x2, y2] of edges) {
-    const A = p.x - x1, B = p.y - y1, C = x2 - x1, D = y2 - y1;
-    const dot = A * C + B * D;
-    const lenSq = C * C + D * D;
-    let t = lenSq !== 0 ? dot / lenSq : 0;
-    t = clamp(t, 0, 1);
-    const xx = x1 + t * C;
-    const yy = y1 + t * D;
-    best = Math.min(best, Math.hypot(p.x - xx, p.y - yy));
-  }
-  return best;
+  const minX = r.x;
+  const maxX = r.x + r.width;
+  const minY = r.y;
+  const maxY = r.y + r.height;
+  if (p.x >= minX && p.x <= maxX && p.y >= minY && p.y <= maxY) {
+    return Math.min(p.x - minX, maxX - p.x, p.y - minY, maxY - p.y);
+  }
+  const dx = p.x < minX ? minX - p.x : p.x > maxX ? p.x - maxX : 0;
+  const dy = p.y < minY ? minY - p.y : p.y > maxY ? p.y - maxY : 0;
+  if (dx === 0) return dy;
+  if (dy === 0) return dx;
+  return Math.hypot(dx, dy);
 }
 function intersect1D(r1, r2) {
   const lo = Math.max(r1[0], r2[0]);
@@ -960,6 +954,13 @@ var searchStripUp = ({
 });
 
 // lib/utils/expandRectFromSeed.ts
+var quantize = (value, precision = 1e-6) => Math.round(value / precision) * precision;
+var quantizeRect = (rect) => ({
+  x: quantize(rect.x),
+  y: quantize(rect.y),
+  width: quantize(rect.width),
+  height: quantize(rect.height)
+});
 function maxExpandRight(params) {
   const { r, bounds, blockers, maxAspect } = params;
   let maxWidth = bounds.x + bounds.width - r.x;
@@ -1044,17 +1045,10 @@ function maxExpandUp(params) {
   }
   return Math.max(0, e);
 }
-var toRect = (tree) => ({
-  x: tree.minX,
-  y: tree.minY,
-  width: tree.maxX - tree.minX,
-  height: tree.maxY - tree.minY
-});
 var addBlocker = (params) => {
   const { rect, seen, blockers } = params;
-  const key = `${rect.x}|${rect.y}|${rect.width}|${rect.height}`;
-  if (seen.has(key)) return;
-  seen.add(key);
+  if (seen.has(rect)) return;
+  seen.add(rect);
   blockers.push(rect);
 };
 var toQueryRect = (params) => {
@@ -1091,23 +1085,22 @@ function expandRectFromSeed(params) {
       const blockersIndex = obsticalIndexByLayer[z];
       if (blockersIndex) {
         for (const entry of blockersIndex.search(query))
-          addBlocker({ rect: toRect(entry), seen, blockers });
+          addBlocker({ rect: entry, seen, blockers });
       }
       const placedLayer = placedIndexByLayer[z];
       if (placedLayer) {
         for (const entry of placedLayer.search(query)) {
           const isFullStack = entry.zLayers.length >= totalLayers;
           if (!isFullStack) continue;
-          const rect = toRect(entry);
           if (isSelfRect({
-            rect,
+            rect: entry,
             startX,
             startY,
             initialW,
             initialH
           }))
             continue;
-          addBlocker({ rect, seen, blockers });
+          addBlocker({ rect: entry, seen, blockers });
         }
       }
     }
@@ -1173,7 +1166,7 @@ function expandRectFromSeed(params) {
     if (r.width + EPS4 >= minReq.width && r.height + EPS4 >= minReq.height) {
       const area = r.width * r.height;
       if (area > bestArea) {
-        best = r;
+        best = quantizeRect(r);
         bestArea = area;
       }
     }
@@ -1198,9 +1191,9 @@ function isFullyOccupiedAtPoint(params) {
   };
   for (let z = 0; z < params.layerCount; z++) {
     const obstacleIdx = params.obstacleIndexByLayer[z];
-    const hasObstacle = !!obstacleIdx && obstacleIdx.search(query).length > 0;
+    const hasObstacle = !!obstacleIdx && obstacleIdx.collides(query);
     const placedIdx = params.placedIndexByLayer[z];
-    const hasPlaced = !!placedIdx && placedIdx.search(query).length > 0;
+    const hasPlaced = !!placedIdx && placedIdx.collides(query);
     if (!hasObstacle && !hasPlaced) return false;
   }
   return true;
@@ -1226,7 +1219,7 @@ function longestFreeSpanAroundZ(params) {
       maxY: y
     };
     const obstacleIdx = obstacleIndexByLayer[layer];
-    if (obstacleIdx && obstacleIdx.search(query).length > 0) return false;
+    if (obstacleIdx && obstacleIdx.collides(query)) return false;
     const extras = additionalBlockersByLayer?.[layer] ?? [];
     return !extras.some((b) => containsPoint(b, { x, y }));
   };
@@ -1247,6 +1240,7 @@ function longestFreeSpanAroundZ(params) {
 }
 
 // lib/solvers/RectDiffSeedingSolver/computeCandidates3D.ts
+var quantize2 = (value, precision = 1e-6) => Math.round(value / precision) * precision;
 function computeCandidates3D(params) {
   const {
     bounds,
@@ -1257,6 +1251,10 @@ function computeCandidates3D(params) {
     hardPlacedByLayer
   } = params;
   const out = /* @__PURE__ */ new Map();
+  const hardRectsByLayer = Array.from({ length: layerCount }, (_, z) => [
+    ...obstacleIndexByLayer[z]?.all() ?? [],
+    ...hardPlacedByLayer[z] ?? []
+  ]);
   for (let x = bounds.x; x < bounds.x + bounds.width; x += gridSize) {
     for (let y = bounds.y; y < bounds.y + bounds.height; y += gridSize) {
       if (Math.abs(x - bounds.x) < EPS4 || Math.abs(y - bounds.y) < EPS4 || x > bounds.x + bounds.width - gridSize - EPS4 || y > bounds.y + bounds.height - gridSize - EPS4) {
@@ -1288,20 +1286,18 @@ function computeCandidates3D(params) {
         }
       }
       const anchorZ = bestSpan.length ? bestSpan[Math.floor(bestSpan.length / 2)] : bestZ;
-      const hardAtZ = [
-        ...obstacleIndexByLayer[anchorZ]?.all() ?? [],
-        ...hardPlacedByLayer[anchorZ] ?? []
-      ];
-      const d = Math.min(
-        distancePointToRectEdges({ x, y }, bounds),
-        ...hardAtZ.length ? hardAtZ.map((b) => distancePointToRectEdges({ x, y }, b)) : [Infinity]
-      );
+      const hardAtZ = hardRectsByLayer[anchorZ] ?? [];
+      let d = distancePointToRectEdges({ x, y }, bounds);
+      for (const blocker of hardAtZ) {
+        d = Math.min(d, distancePointToRectEdges({ x, y }, blocker));
+      }
+      const distance = quantize2(d);
       const k = `${x.toFixed(6)}|${y.toFixed(6)}`;
       const cand = {
         x,
         y,
         z: anchorZ,
-        distance: d,
+        distance,
         zSpanLen: bestSpan.length
       };
       const prev = out.get(k);
@@ -1311,18 +1307,34 @@ function computeCandidates3D(params) {
     }
   }
   const arr = Array.from(out.values());
-  arr.sort((a, b) => b.zSpanLen - a.zSpanLen || b.distance - a.distance);
+  arr.sort(
+    (a, b) => b.zSpanLen - a.zSpanLen || b.distance - a.distance || a.z - b.z || a.x - b.x || a.y - b.y
+  );
   return arr;
 }
 
 // lib/solvers/RectDiffSeedingSolver/computeEdgeCandidates3D.ts
+var quantize3 = (value, precision = 1e-6) => Math.round(value / precision) * precision;
+var toRect = (rect) => "minX" in rect ? {
+  x: rect.minX,
+  y: rect.minY,
+  width: rect.maxX - rect.minX,
+  height: rect.maxY - rect.minY
+} : rect;
 function computeUncoveredSegments(params) {
   const { lineStart, lineEnd, coveringIntervals, minSegmentLength } = params;
-  if (coveringIntervals.length === 0) {
-    const center = (lineStart + lineEnd) / 2;
-    return [{ start: lineStart, end: lineEnd, center }];
-  }
-  const sorted = [...coveringIntervals].sort((a, b) => a.start - b.start);
+  const lineStartQ = quantize3(lineStart);
+  const lineEndQ = quantize3(lineEnd);
+  const normalizedIntervals = coveringIntervals.map((i) => {
+    const s = quantize3(i.start);
+    const e = quantize3(i.end);
+    return { start: Math.min(s, e), end: Math.max(s, e) };
+  }).filter((i) => i.end > i.start + EPS4);
+  if (normalizedIntervals.length === 0) {
+    const center = (lineStartQ + lineEndQ) / 2;
+    return [{ start: lineStartQ, end: lineEndQ, center }];
+  }
+  const sorted = [...normalizedIntervals].sort((a, b) => a.start - b.start);
   const merged = [];
   let current = { ...sorted[0] };
   for (let i = 1; i < sorted.length; i++) {
@@ -1336,8 +1348,8 @@ function computeUncoveredSegments(params) {
   }
   merged.push(current);
   const uncovered = [];
-  if (merged[0].start > lineStart + EPS4) {
-    const start = lineStart;
+  if (merged[0].start > lineStartQ + EPS4) {
+    const start = lineStartQ;
     const end = merged[0].start;
     if (end - start >= minSegmentLength) {
       uncovered.push({ start, end, center: (start + end) / 2 });
@@ -1350,9 +1362,9 @@ function computeUncoveredSegments(params) {
       uncovered.push({ start, end, center: (start + end) / 2 });
     }
   }
-  if (merged[merged.length - 1].end < lineEnd - EPS4) {
+  if (merged[merged.length - 1].end < lineEndQ - EPS4) {
     const start = merged[merged.length - 1].end;
-    const end = lineEnd;
+    const end = lineEndQ;
     if (end - start >= minSegmentLength) {
       uncovered.push({ start, end, center: (start + end) / 2 });
     }
@@ -1371,6 +1383,13 @@ function computeEdgeCandidates3D(params) {
   const out = [];
   const \u03B4 = Math.max(minSize * 0.15, EPS4 * 3);
   const dedup = /* @__PURE__ */ new Set();
+  const hardRectsByLayer = Array.from(
+    { length: layerCount },
+    (_, z) => [
+      ...obstacleIndexByLayer[z]?.all() ?? [],
+      ...hardPlacedByLayer[z] ?? []
+    ].map(toRect)
+  );
   const key = (p) => `${p.z}|${p.x.toFixed(6)}|${p.y.toFixed(6)}`;
   function fullyOcc(p) {
     return isFullyOccupiedAtPoint({
@@ -1381,18 +1400,20 @@ function computeEdgeCandidates3D(params) {
     });
   }
   function pushIfFree(p) {
-    const { x, y, z } = p;
+    const qx = quantize3(p.x);
+    const qy = quantize3(p.y);
+    const { z } = p;
+    const x = qx;
+    const y = qy;
     if (x < bounds.x + EPS4 || y < bounds.y + EPS4 || x > bounds.x + bounds.width - EPS4 || y > bounds.y + bounds.height - EPS4)
       return;
     if (fullyOcc({ x, y })) return;
-    const hard = [
-      ...obstacleIndexByLayer[z]?.all() ?? [],
-      ...hardPlacedByLayer[z] ?? []
-    ];
-    const d = Math.min(
-      distancePointToRectEdges({ x, y }, bounds),
-      ...hard.length ? hard.map((b) => distancePointToRectEdges({ x, y }, b)) : [Infinity]
-    );
+    const hard = hardRectsByLayer[z] ?? [];
+    let d = distancePointToRectEdges({ x, y }, bounds);
+    for (const blocker of hard) {
+      d = Math.min(d, distancePointToRectEdges({ x, y }, blocker));
+    }
+    const distance = quantize3(d);
     const k = key({ x, y, z });
     if (dedup.has(k)) return;
     dedup.add(k);
@@ -1406,13 +1427,22 @@ function computeEdgeCandidates3D(params) {
       obstacleIndexByLayer,
       additionalBlockersByLayer: hardPlacedByLayer
     });
-    out.push({ x, y, z, distance: d, zSpanLen: span.length, isEdgeSeed: true });
+    out.push({
+      x,
+      y,
+      z,
+      distance,
+      zSpanLen: span.length,
+      isEdgeSeed: true
+    });
   }
   for (let z = 0; z < layerCount; z++) {
-    const blockers = [
-      ...obstacleIndexByLayer[z]?.all() ?? [],
-      ...hardPlacedByLayer[z] ?? []
-    ];
+    const blockers = (hardRectsByLayer[z] ?? []).map((b) => ({
+      x: quantize3(b.x),
+      y: quantize3(b.y),
+      width: quantize3(b.width),
+      height: quantize3(b.height)
+    }));
     const corners = [
       { x: bounds.x + \u03B4, y: bounds.y + \u03B4 },
       // top-left
@@ -1585,7 +1615,9 @@ function computeEdgeCandidates3D(params) {
       }
     }
   }
-  out.sort((a, b) => b.zSpanLen - a.zSpanLen || b.distance - a.distance);
+  out.sort(
+    (a, b) => b.zSpanLen - a.zSpanLen || b.distance - a.distance || a.z - b.z || a.x - b.x || a.y - b.y
+  );
   return out;
 }
 
@@ -1703,6 +1735,7 @@ var RectDiffSeedingSolver = class extends BaseSolver3 {
   candidates;
   placed;
   placedIndexByLayer;
+  hardPlacedByLayer;
   expansionIndex;
   edgeAnalysisDone;
   totalSeedsThisGrid;
@@ -1758,6 +1791,7 @@ var RectDiffSeedingSolver = class extends BaseSolver3 {
       { length: layerCount },
       () => new RBush3()
     );
+    this.hardPlacedByLayer = Array.from({ length: layerCount }, () => []);
     this.expansionIndex = 0;
     this.edgeAnalysisDone = false;
     this.totalSeedsThisGrid = 0;
@@ -1786,25 +1820,22 @@ var RectDiffSeedingSolver = class extends BaseSolver3 {
       maxMultiLayerSpan
     } = this.options;
     const grid = gridSizes[this.gridIndex];
-    const hardPlacedByLayer = allLayerNode({
-      layerCount: this.layerCount,
-      placed: this.placed
-    });
     if (this.candidates.length === 0 && this.consumedSeedsThisGrid === 0) {
       this.candidates = computeCandidates3D({
         bounds: this.bounds,
         gridSize: grid,
         layerCount: this.layerCount,
-        hardPlacedByLayer,
+        hardPlacedByLayer: this.hardPlacedByLayer,
         obstacleIndexByLayer: this.input.obstacleIndexByLayer,
         placedIndexByLayer: this.placedIndexByLayer
       });
       this.totalSeedsThisGrid = this.candidates.length;
       this.consumedSeedsThisGrid = 0;
     }
-    if (this.candidates.length === 0) {
+    if (this.consumedSeedsThisGrid >= this.candidates.length) {
       if (this.gridIndex + 1 < gridSizes.length) {
         this.gridIndex += 1;
+        this.candidates = [];
         this.totalSeedsThisGrid = 0;
         this.consumedSeedsThisGrid = 0;
         return;
@@ -1817,20 +1848,28 @@ var RectDiffSeedingSolver = class extends BaseSolver3 {
             layerCount: this.layerCount,
             obstacleIndexByLayer: this.input.obstacleIndexByLayer,
             placedIndexByLayer: this.placedIndexByLayer,
-            hardPlacedByLayer
+            hardPlacedByLayer: this.hardPlacedByLayer
           });
           this.edgeAnalysisDone = true;
           this.totalSeedsThisGrid = this.candidates.length;
           this.consumedSeedsThisGrid = 0;
           return;
         }
+        this.candidates = [];
         this.solved = true;
         this.expansionIndex = 0;
         return;
       }
     }
-    const cand = this.candidates.shift();
-    this.consumedSeedsThisGrid += 1;
+    const cand = this.candidates[this.consumedSeedsThisGrid++];
+    if (isFullyOccupiedAtPoint({
+      layerCount: this.layerCount,
+      obstacleIndexByLayer: this.input.obstacleIndexByLayer,
+      placedIndexByLayer: this.placedIndexByLayer,
+      point: { x: cand.x, y: cand.y }
+    })) {
+      return;
+    }
     const span = longestFreeSpanAroundZ({
       x: cand.x,
       y: cand.y,
@@ -1839,7 +1878,7 @@ var RectDiffSeedingSolver = class extends BaseSolver3 {
       minSpan: minMulti.minLayers,
       maxSpan: maxMultiLayerSpan,
       obstacleIndexByLayer: this.input.obstacleIndexByLayer,
-      additionalBlockersByLayer: hardPlacedByLayer
+      additionalBlockersByLayer: this.hardPlacedByLayer
     });
     const attempts = [];
     if (span.length >= minMulti.minLayers) {
@@ -1886,14 +1925,10 @@ var RectDiffSeedingSolver = class extends BaseSolver3 {
         },
         newIndex
       );
-      this.candidates = this.candidates.filter(
-        (c) => !isFullyOccupiedAtPoint({
-          layerCount: this.layerCount,
-          obstacleIndexByLayer: this.input.obstacleIndexByLayer,
-          placedIndexByLayer: this.placedIndexByLayer,
-          point: { x: c.x, y: c.y }
-        })
-      );
+      this.hardPlacedByLayer = allLayerNode({
+        layerCount: this.layerCount,
+        placed: this.placed
+      });
       return;
     }
   }
@@ -1976,29 +2011,6 @@ var RectDiffSeedingSolver = class extends BaseSolver3 {
         });
       }
     }
-    if (this.input.obstacleClearance && this.input.obstacleClearance > 0) {
-      for (const obstacle of srj.obstacles ?? []) {
-        const pad = this.input.obstacleClearance;
-        const expanded = {
-          x: obstacle.center.x - obstacle.width / 2 - pad,
-          y: obstacle.center.y - obstacle.height / 2 - pad,
-          width: obstacle.width + 2 * pad,
-          height: obstacle.height + 2 * pad
-        };
-        rects.push({
-          center: {
-            x: expanded.x + expanded.width / 2,
-            y: expanded.y + expanded.height / 2
-          },
-          width: expanded.width,
-          height: expanded.height,
-          fill: "rgba(234, 179, 8, 0.15)",
-          stroke: "rgba(202, 138, 4, 0.9)",
-          layer: "obstacle-clearance",
-          label: "clearance"
-        });
-      }
-    }
     if (this.boardVoidRects) {
       let outlineBBox = null;
       if (srj.outline && srj.outline.length > 0) {
@@ -2524,6 +2536,42 @@ z:${layerLabel}`
   };
 }
 
+// lib/buildFinalRectDiffVisualization.ts
+import { mergeGraphics } from "graphics-debug";
+
+// lib/utils/buildOutlineGraphics.ts
+var buildOutlineGraphics = ({
+  srj
+}) => {
+  const hasOutline = srj.outline && srj.outline.length > 1;
+  const lines = hasOutline ? [
+    {
+      points: [...srj.outline, srj.outline[0]],
+      strokeColor: "#111827",
+      strokeWidth: 0.1,
+      label: "outline"
+    }
+  ] : [
+    {
+      points: [
+        { x: srj.bounds.minX, y: srj.bounds.minY },
+        { x: srj.bounds.maxX, y: srj.bounds.minY },
+        { x: srj.bounds.maxX, y: srj.bounds.maxY },
+        { x: srj.bounds.minX, y: srj.bounds.maxY },
+        { x: srj.bounds.minX, y: srj.bounds.minY }
+      ],
+      strokeColor: "#111827",
+      strokeWidth: 0.1,
+      label: "bounds"
+    }
+  ];
+  return {
+    title: "SimpleRoute Outline",
+    coordinateSystem: "cartesian",
+    lines
+  };
+};
+
 // lib/utils/renderObstacleClearance.ts
 var buildObstacleClearanceGraphics = (params) => {
   const { srj, clearance } = params;
@@ -2565,8 +2613,40 @@ z:${(obstacle.zLayers ?? []).join(",") || "all"}`
   };
 };
 
+// lib/buildFinalRectDiffVisualization.ts
+var buildFinalRectDiffVisualization = ({
+  srj,
+  meshNodes,
+  obstacleClearance
+}) => {
+  const outline = buildOutlineGraphics({ srj });
+  const clearance = buildObstacleClearanceGraphics({
+    srj,
+    clearance: obstacleClearance
+  });
+  const rects = meshNodes.map((node) => ({
+    center: node.center,
+    width: node.width,
+    height: node.height,
+    stroke: getColorForZLayer(node.availableZ).stroke,
+    fill: node._containsObstacle ? "#fca5a5" : getColorForZLayer(node.availableZ).fill,
+    layer: `z${node.availableZ.join(",")}`,
+    label: `node ${node.capacityMeshNodeId}
+z:${node.availableZ.join(",")}`
+  }));
+  const nodesGraphic = {
+    title: "RectDiffPipeline - Final",
+    coordinateSystem: "cartesian",
+    rects,
+    lines: [],
+    points: [],
+    texts: []
+  };
+  return mergeGraphics(mergeGraphics(nodesGraphic, outline), clearance);
+};
+
 // lib/RectDiffPipeline.ts
-import { mergeGraphics } from "graphics-debug";
+import { mergeGraphics as mergeGraphics2 } from "graphics-debug";
 var RectDiffPipeline = class extends BasePipelineSolver3 {
   rectDiffGridSolverPipeline;
   gapFillSolver;
@@ -2665,43 +2745,14 @@ var RectDiffPipeline = class extends BasePipelineSolver3 {
         ].join("\n")
       }))
     };
-    return mergeGraphics(mergeGraphics(base, clearance), nodeRects);
+    return mergeGraphics2(mergeGraphics2(base, clearance), nodeRects);
   }
   finalVisualize() {
-    const base = createBaseVisualization(
-      this.inputProblem.simpleRouteJson,
-      "RectDiffPipeline - Final"
-    );
-    const clearance = buildObstacleClearanceGraphics({
+    return buildFinalRectDiffVisualization({
       srj: this.inputProblem.simpleRouteJson,
-      clearance: this.inputProblem.obstacleClearance
+      meshNodes: this.getOutput().meshNodes,
+      obstacleClearance: this.inputProblem.obstacleClearance
     });
-    const { meshNodes: outputNodes } = this.getOutput();
-    const initialNodeIds = new Set(
-      (this.rectDiffGridSolverPipeline?.getOutput().meshNodes ?? []).map(
-        (n) => n.capacityMeshNodeId
-      )
-    );
-    const nodeRects = {
-      title: "Final Nodes",
-      coordinateSystem: "cartesian",
-      rects: outputNodes.map((node) => {
-        const isExpanded = !initialNodeIds.has(node.capacityMeshNodeId);
-        return {
-          center: node.center,
-          width: node.width,
-          height: node.height,
-          stroke: isExpanded ? "rgba(0, 128, 0, 0.8)" : "rgba(0, 0, 0, 0.3)",
-          fill: isExpanded ? "rgba(0, 200, 0, 0.3)" : "rgba(100, 100, 100, 0.1)",
-          layer: `z${node.availableZ.join(",")}`,
-          label: [
-            `${isExpanded ? "[expanded] " : ""}node ${node.capacityMeshNodeId}`,
-            `z:${node.availableZ.join(",")}`
-          ].join("\n")
-        };
-      })
-    };
-    return mergeGraphics(mergeGraphics(base, clearance), nodeRects);
   }
 };
 export {

package/lib/RectDiffPipeline.ts

@@ -10,6 +10,7 @@ import type { GraphicsObject } from "graphics-debug"
 import { GapFillSolverPipeline } from "./solvers/GapFillSolver/GapFillSolverPipeline"
 import { RectDiffGridSolverPipeline } from "./solvers/RectDiffGridSolverPipeline/RectDiffGridSolverPipeline"
 import { createBaseVisualization } from "./rectdiff-visualization"
+import { buildFinalRectDiffVisualization } from "./buildFinalRectDiffVisualization"
 import { computeInverseRects } from "./solvers/RectDiffSeedingSolver/computeInverseRects"
 import { buildZIndexMap } from "./solvers/RectDiffSeedingSolver/layers"
 import { buildObstacleClearanceGraphics } from "./utils/renderObstacleClearance"
@@ -144,44 +145,10 @@ export class RectDiffPipeline extends BasePipelineSolver<RectDiffPipelineInput>
   }
 
   override finalVisualize(): GraphicsObject {
-    const base = createBaseVisualization(
-      this.inputProblem.simpleRouteJson,
-      "RectDiffPipeline - Final",
-    )
-    const clearance = buildObstacleClearanceGraphics({
+    return buildFinalRectDiffVisualization({
       srj: this.inputProblem.simpleRouteJson,
-      clearance: this.inputProblem.obstacleClearance,
+      meshNodes: this.getOutput().meshNodes,
+      obstacleClearance: this.inputProblem.obstacleClearance,
     })
-
-    const { meshNodes: outputNodes } = this.getOutput()
-    const initialNodeIds = new Set(
-      (this.rectDiffGridSolverPipeline?.getOutput().meshNodes ?? []).map(
-        (n) => n.capacityMeshNodeId,
-      ),
-    )
-
-    const nodeRects: GraphicsObject = {
-      title: "Final Nodes",
-      coordinateSystem: "cartesian",
-      rects: outputNodes.map((node) => {
-        const isExpanded = !initialNodeIds.has(node.capacityMeshNodeId)
-        return {
-          center: node.center,
-          width: node.width,
-          height: node.height,
-          stroke: isExpanded ? "rgba(0, 128, 0, 0.8)" : "rgba(0, 0, 0, 0.3)",
-          fill: isExpanded
-            ? "rgba(0, 200, 0, 0.3)"
-            : "rgba(100, 100, 100, 0.1)",
-          layer: `z${node.availableZ.join(",")}`,
-          label: [
-            `${isExpanded ? "[expanded] " : ""}node ${node.capacityMeshNodeId}`,
-            `z:${node.availableZ.join(",")}`,
-          ].join("\n"),
-        }
-      }),
-    }
-
-    return mergeGraphics(mergeGraphics(base, clearance), nodeRects)
   }
 }