@tscircuit/rectdiff 0.0.10 → 0.0.12

package/dist/index.js

@@ -1,5 +1,8 @@
 // lib/RectDiffPipeline.ts
-import { BasePipelineSolver as BasePipelineSolver2, definePipelineStep } from "@tscircuit/solver-utils";
+import {
+  BasePipelineSolver as BasePipelineSolver3,
+  definePipelineStep as definePipelineStep2
+} from "@tscircuit/solver-utils";
 
 // lib/solvers/RectDiffSolver.ts
 import { BaseSolver } from "@tscircuit/solver-utils";
@@ -1274,6 +1277,7 @@ var RectDiffSolver = class extends BaseSolver {
           height: p.rect.height,
           fill: colors.fill,
           stroke: colors.stroke,
+          layer: `z${p.zLayers.join(",")}`,
           label: `free
 z:${p.zLayers.join(",")}`
         });
@@ -1342,40 +1346,737 @@ function createBaseVisualization(srj, title = "RectDiff") {
   };
 }
 
+// lib/solvers/GapFillSolver/GapFillSolverPipeline.ts
+import {
+  BasePipelineSolver as BasePipelineSolver2,
+  definePipelineStep
+} from "@tscircuit/solver-utils";
+
+// lib/solvers/GapFillSolver/FindSegmentsWithAdjacentEmptySpaceSolver.ts
+import { BaseSolver as BaseSolver2 } from "@tscircuit/solver-utils";
+import Flatbush from "flatbush";
+
+// lib/solvers/GapFillSolver/projectToUncoveredSegments.ts
+var EPS2 = 1e-4;
+function projectToUncoveredSegments(primaryEdge, overlappingEdges) {
+  const isHorizontal = Math.abs(primaryEdge.start.y - primaryEdge.end.y) < EPS2;
+  const isVertical = Math.abs(primaryEdge.start.x - primaryEdge.end.x) < EPS2;
+  if (!isHorizontal && !isVertical) return [];
+  const axis = isHorizontal ? "x" : "y";
+  const perp = isHorizontal ? "y" : "x";
+  const lineCoord = primaryEdge.start[perp];
+  const p0 = primaryEdge.start[axis];
+  const p1 = primaryEdge.end[axis];
+  const pMin = Math.min(p0, p1);
+  const pMax = Math.max(p0, p1);
+  const clamp2 = (v) => Math.max(pMin, Math.min(pMax, v));
+  const intervals = [];
+  for (const e of overlappingEdges) {
+    if (e === primaryEdge) continue;
+    const eIsHorizontal = Math.abs(e.start.y - e.end.y) < EPS2;
+    const eIsVertical = Math.abs(e.start.x - e.end.x) < EPS2;
+    if (axis === "x" && !eIsHorizontal) continue;
+    if (axis === "y" && !eIsVertical) continue;
+    if (Math.abs(e.start[perp] - lineCoord) > EPS2) continue;
+    const eMin = Math.min(e.start[axis], e.end[axis]);
+    const eMax = Math.max(e.start[axis], e.end[axis]);
+    const s = clamp2(eMin);
+    const t = clamp2(eMax);
+    if (t - s > EPS2) intervals.push({ s, e: t });
+  }
+  if (intervals.length === 0) {
+    return [
+      {
+        ...primaryEdge,
+        start: { ...primaryEdge.start },
+        end: { ...primaryEdge.end }
+      }
+    ];
+  }
+  intervals.sort((a, b) => a.s - b.s);
+  const merged = [];
+  for (const it of intervals) {
+    const last = merged[merged.length - 1];
+    if (!last || it.s > last.e + EPS2) merged.push({ ...it });
+    else last.e = Math.max(last.e, it.e);
+  }
+  const uncovered = [];
+  let cursor = pMin;
+  for (const m of merged) {
+    if (m.s > cursor + EPS2) uncovered.push({ s: cursor, e: m.s });
+    cursor = Math.max(cursor, m.e);
+    if (cursor >= pMax - EPS2) break;
+  }
+  if (pMax > cursor + EPS2) uncovered.push({ s: cursor, e: pMax });
+  if (uncovered.length === 0) return [];
+  return uncovered.filter((u) => u.e - u.s > EPS2).map((u) => {
+    const start = axis === "x" ? { x: u.s, y: lineCoord } : { x: lineCoord, y: u.s };
+    const end = axis === "x" ? { x: u.e, y: lineCoord } : { x: lineCoord, y: u.e };
+    return {
+      parent: primaryEdge.parent,
+      facingDirection: primaryEdge.facingDirection,
+      start,
+      end,
+      z: primaryEdge.z
+    };
+  });
+}
+
+// lib/solvers/GapFillSolver/edge-constants.ts
+var EDGES = [
+  {
+    facingDirection: "x-",
+    dx: -1,
+    dy: 0,
+    startX: -0.5,
+    startY: 0.5,
+    endX: -0.5,
+    endY: -0.5
+  },
+  {
+    facingDirection: "x+",
+    dx: 1,
+    dy: 0,
+    startX: 0.5,
+    startY: 0.5,
+    endX: 0.5,
+    endY: -0.5
+  },
+  {
+    facingDirection: "y-",
+    dx: 0,
+    dy: -1,
+    startX: -0.5,
+    startY: -0.5,
+    endX: 0.5,
+    endY: -0.5
+  },
+  {
+    facingDirection: "y+",
+    dx: 0,
+    dy: 1,
+    startX: 0.5,
+    startY: 0.5,
+    endX: -0.5,
+    endY: 0.5
+  }
+];
+var EDGE_MAP = {
+  "x-": EDGES.find((e) => e.facingDirection === "x-"),
+  "x+": EDGES.find((e) => e.facingDirection === "x+"),
+  "y-": EDGES.find((e) => e.facingDirection === "y-"),
+  "y+": EDGES.find((e) => e.facingDirection === "y+")
+};
+
+// lib/solvers/GapFillSolver/visuallyOffsetLine.ts
+var OFFSET_DIR_MAP = {
+  "x-": {
+    x: -1,
+    y: 0
+  },
+  "x+": {
+    x: 1,
+    y: 0
+  },
+  "y-": {
+    x: 0,
+    y: -1
+  },
+  "y+": {
+    x: 0,
+    y: 1
+  }
+};
+var visuallyOffsetLine = (line, dir, amt) => {
+  const offset = OFFSET_DIR_MAP[dir];
+  return line.map((p) => ({
+    x: p.x + offset.x * amt,
+    y: p.y + offset.y * amt
+  }));
+};
+
+// lib/solvers/GapFillSolver/FindSegmentsWithAdjacentEmptySpaceSolver.ts
+import "@tscircuit/math-utils";
+var EPS3 = 1e-4;
+var FindSegmentsWithAdjacentEmptySpaceSolver = class extends BaseSolver2 {
+  constructor(input) {
+    super();
+    this.input = input;
+    for (const node of this.input.meshNodes) {
+      for (const edge of EDGES) {
+        let start = {
+          x: node.center.x + node.width * edge.startX,
+          y: node.center.y + node.height * edge.startY
+        };
+        let end = {
+          x: node.center.x + node.width * edge.endX,
+          y: node.center.y + node.height * edge.endY
+        };
+        if (start.x > end.x) {
+          ;
+          [start, end] = [end, start];
+        }
+        if (Math.abs(start.x - end.x) < EPS3 && start.y > end.y) {
+          ;
+          [start, end] = [end, start];
+        }
+        for (const z of node.availableZ) {
+          this.unprocessedEdges.push({
+            parent: node,
+            start,
+            end,
+            facingDirection: edge.facingDirection,
+            z
+          });
+        }
+      }
+    }
+    this.allEdges = [...this.unprocessedEdges];
+    this.edgeSpatialIndex = new Flatbush(this.allEdges.length);
+    for (const edge of this.allEdges) {
+      this.edgeSpatialIndex.add(
+        edge.start.x,
+        edge.start.y,
+        edge.end.x,
+        edge.end.y
+      );
+    }
+    this.edgeSpatialIndex.finish();
+  }
+  allEdges;
+  unprocessedEdges = [];
+  segmentsWithAdjacentEmptySpace = [];
+  edgeSpatialIndex;
+  lastCandidateEdge = null;
+  lastOverlappingEdges = null;
+  lastUncoveredSegments = null;
+  _step() {
+    if (this.unprocessedEdges.length === 0) {
+      this.solved = true;
+      this.lastCandidateEdge = null;
+      this.lastOverlappingEdges = null;
+      this.lastUncoveredSegments = null;
+      return;
+    }
+    const candidateEdge = this.unprocessedEdges.shift();
+    this.lastCandidateEdge = candidateEdge;
+    const nearbyEdges = this.edgeSpatialIndex.search(
+      candidateEdge.start.x - EPS3,
+      candidateEdge.start.y - EPS3,
+      candidateEdge.end.x + EPS3,
+      candidateEdge.end.y + EPS3
+    );
+    const overlappingEdges = nearbyEdges.map((i) => this.allEdges[i]).filter((e) => e.z === candidateEdge.z);
+    this.lastOverlappingEdges = overlappingEdges;
+    const uncoveredSegments = projectToUncoveredSegments(
+      candidateEdge,
+      overlappingEdges
+    );
+    this.lastUncoveredSegments = uncoveredSegments;
+    this.segmentsWithAdjacentEmptySpace.push(...uncoveredSegments);
+  }
+  getOutput() {
+    return {
+      segmentsWithAdjacentEmptySpace: this.segmentsWithAdjacentEmptySpace
+    };
+  }
+  visualize() {
+    const graphics = {
+      title: "FindSegmentsWithAdjacentEmptySpace",
+      coordinateSystem: "cartesian",
+      rects: [],
+      points: [],
+      lines: [],
+      circles: [],
+      arrows: [],
+      texts: []
+    };
+    for (const node of this.input.meshNodes) {
+      graphics.rects.push({
+        center: node.center,
+        width: node.width,
+        height: node.height,
+        stroke: "rgba(0, 0, 0, 0.1)"
+      });
+    }
+    for (const unprocessedEdge of this.unprocessedEdges) {
+      graphics.lines.push({
+        points: visuallyOffsetLine(
+          [unprocessedEdge.start, unprocessedEdge.end],
+          unprocessedEdge.facingDirection,
+          -0.1
+        ),
+        strokeColor: "rgba(0, 0, 255, 0.5)",
+        strokeDash: "5 5"
+      });
+    }
+    for (const edge of this.segmentsWithAdjacentEmptySpace) {
+      graphics.lines.push({
+        points: [edge.start, edge.end],
+        strokeColor: "rgba(0,255,0, 0.5)"
+      });
+    }
+    if (this.lastCandidateEdge) {
+      graphics.lines.push({
+        points: [this.lastCandidateEdge.start, this.lastCandidateEdge.end],
+        strokeColor: "blue"
+      });
+    }
+    if (this.lastOverlappingEdges) {
+      for (const edge of this.lastOverlappingEdges) {
+        graphics.lines.push({
+          points: visuallyOffsetLine(
+            [edge.start, edge.end],
+            edge.facingDirection,
+            0.05
+          ),
+          strokeColor: "red",
+          strokeDash: "2 2"
+        });
+      }
+    }
+    if (this.lastUncoveredSegments) {
+      for (const edge of this.lastUncoveredSegments) {
+        graphics.lines.push({
+          points: visuallyOffsetLine(
+            [edge.start, edge.end],
+            edge.facingDirection,
+            -0.05
+          ),
+          strokeColor: "green",
+          strokeDash: "2 2"
+        });
+      }
+    }
+    return graphics;
+  }
+};
+
+// lib/solvers/GapFillSolver/ExpandEdgesToEmptySpaceSolver.ts
+import { BaseSolver as BaseSolver3 } from "@tscircuit/solver-utils";
+import RBush from "rbush";
+
+// lib/solvers/GapFillSolver/getBoundsFromCorners.ts
+var getBoundsFromCorners = (corners) => {
+  return {
+    minX: Math.min(...corners.map((c) => c.x)),
+    minY: Math.min(...corners.map((c) => c.y)),
+    maxX: Math.max(...corners.map((c) => c.x)),
+    maxY: Math.max(...corners.map((c) => c.y))
+  };
+};
+
+// lib/solvers/GapFillSolver/ExpandEdgesToEmptySpaceSolver.ts
+import { segmentToBoxMinDistance } from "@tscircuit/math-utils";
+var EPS4 = 1e-4;
+var ExpandEdgesToEmptySpaceSolver = class extends BaseSolver3 {
+  constructor(input) {
+    super();
+    this.input = input;
+    this.unprocessedSegments = [...this.input.segmentsWithAdjacentEmptySpace];
+    this.rectSpatialIndex = new RBush();
+    this.rectSpatialIndex.load(
+      this.input.inputMeshNodes.map((n) => ({
+        ...n,
+        minX: n.center.x - n.width / 2,
+        minY: n.center.y - n.height / 2,
+        maxX: n.center.x + n.width / 2,
+        maxY: n.center.y + n.height / 2
+      }))
+    );
+  }
+  unprocessedSegments = [];
+  expandedSegments = [];
+  lastSegment = null;
+  lastSearchBounds = null;
+  lastCollidingNodes = null;
+  lastSearchCorner1 = null;
+  lastSearchCorner2 = null;
+  lastExpandedSegment = null;
+  rectSpatialIndex;
+  _step() {
+    if (this.unprocessedSegments.length === 0) {
+      this.solved = true;
+      return;
+    }
+    const segment = this.unprocessedSegments.shift();
+    this.lastSegment = segment;
+    const { dx, dy } = EDGE_MAP[segment.facingDirection];
+    const deltaStartEnd = {
+      x: segment.end.x - segment.start.x,
+      y: segment.end.y - segment.start.y
+    };
+    const segLength = Math.sqrt(deltaStartEnd.x ** 2 + deltaStartEnd.y ** 2);
+    const normDeltaStartEnd = {
+      x: deltaStartEnd.x / segLength,
+      y: deltaStartEnd.y / segLength
+    };
+    let collidingNodes = null;
+    let searchDistance = 1;
+    const searchCorner1 = {
+      x: segment.start.x + dx * EPS4 + normDeltaStartEnd.x * EPS4 * 10,
+      y: segment.start.y + dy * EPS4 + normDeltaStartEnd.y * EPS4 * 10
+    };
+    const searchCorner2 = {
+      x: segment.end.x + dx * EPS4 - normDeltaStartEnd.x * EPS4 * 10,
+      y: segment.end.y + dy * EPS4 - normDeltaStartEnd.y * EPS4 * 10
+    };
+    this.lastSearchCorner1 = searchCorner1;
+    this.lastSearchCorner2 = searchCorner2;
+    while ((!collidingNodes || collidingNodes.length === 0) && searchDistance < 1e3) {
+      const searchBounds = getBoundsFromCorners([
+        searchCorner1,
+        searchCorner2,
+        {
+          x: searchCorner1.x + dx * searchDistance,
+          y: searchCorner1.y + dy * searchDistance
+        },
+        {
+          x: searchCorner2.x + dx * searchDistance,
+          y: searchCorner2.y + dy * searchDistance
+        }
+      ]);
+      this.lastSearchBounds = searchBounds;
+      collidingNodes = this.rectSpatialIndex.search(searchBounds).filter((n) => n.availableZ.includes(segment.z)).filter(
+        (n) => n.capacityMeshNodeId !== segment.parent.capacityMeshNodeId
+      );
+      searchDistance *= 4;
+    }
+    if (!collidingNodes || collidingNodes.length === 0) {
+      return;
+    }
+    this.lastCollidingNodes = collidingNodes;
+    let smallestDistance = Infinity;
+    for (const node of collidingNodes) {
+      const distance = segmentToBoxMinDistance(segment.start, segment.end, node);
+      if (distance < smallestDistance) {
+        smallestDistance = distance;
+      }
+    }
+    const expandDistance = smallestDistance;
+    const nodeBounds = getBoundsFromCorners([
+      segment.start,
+      segment.end,
+      {
+        x: segment.start.x + dx * expandDistance,
+        y: segment.start.y + dy * expandDistance
+      },
+      {
+        x: segment.end.x + dx * expandDistance,
+        y: segment.end.y + dy * expandDistance
+      }
+    ]);
+    const nodeCenter = {
+      x: (nodeBounds.minX + nodeBounds.maxX) / 2,
+      y: (nodeBounds.minY + nodeBounds.maxY) / 2
+    };
+    const nodeWidth = nodeBounds.maxX - nodeBounds.minX;
+    const nodeHeight = nodeBounds.maxY - nodeBounds.minY;
+    const expandedSegment = {
+      segment,
+      newNode: {
+        capacityMeshNodeId: `new-${segment.parent.capacityMeshNodeId}-${this.expandedSegments.length}`,
+        center: nodeCenter,
+        width: nodeWidth,
+        height: nodeHeight,
+        availableZ: [segment.z],
+        layer: segment.parent.layer
+      }
+    };
+    this.lastExpandedSegment = expandedSegment;
+    if (nodeWidth < EPS4 || nodeHeight < EPS4) {
+      return;
+    }
+    this.expandedSegments.push(expandedSegment);
+    this.rectSpatialIndex.insert({
+      ...expandedSegment.newNode,
+      ...nodeBounds
+    });
+  }
+  getOutput() {
+    return {
+      expandedSegments: this.expandedSegments
+    };
+  }
+  visualize() {
+    const graphics = {
+      title: "ExpandEdgesToEmptySpace",
+      coordinateSystem: "cartesian",
+      rects: [],
+      points: [],
+      lines: [],
+      circles: [],
+      arrows: [],
+      texts: []
+    };
+    for (const node of this.input.inputMeshNodes) {
+      graphics.rects.push({
+        center: node.center,
+        width: node.width,
+        height: node.height,
+        stroke: "rgba(0, 0, 0, 0.1)",
+        layer: `z${node.availableZ.join(",")}`,
+        label: [
+          `node ${node.capacityMeshNodeId}`,
+          `z:${node.availableZ.join(",")}`
+        ].join("\n")
+      });
+    }
+    for (const { newNode } of this.expandedSegments) {
+      graphics.rects.push({
+        center: newNode.center,
+        width: newNode.width,
+        height: newNode.height,
+        fill: "green",
+        label: `expandedSegment (z=${newNode.availableZ.join(",")})`,
+        layer: `z${newNode.availableZ.join(",")}`
+      });
+    }
+    if (this.lastSegment) {
+      graphics.lines.push({
+        points: [this.lastSegment.start, this.lastSegment.end],
+        strokeColor: "rgba(0, 0, 255, 0.5)"
+      });
+    }
+    if (this.lastSearchBounds) {
+      graphics.rects.push({
+        center: {
+          x: (this.lastSearchBounds.minX + this.lastSearchBounds.maxX) / 2,
+          y: (this.lastSearchBounds.minY + this.lastSearchBounds.maxY) / 2
+        },
+        width: this.lastSearchBounds.maxX - this.lastSearchBounds.minX,
+        height: this.lastSearchBounds.maxY - this.lastSearchBounds.minY,
+        fill: "rgba(0, 0, 255, 0.25)"
+      });
+    }
+    if (this.lastSearchCorner1 && this.lastSearchCorner2) {
+      graphics.points.push({
+        x: this.lastSearchCorner1.x,
+        y: this.lastSearchCorner1.y,
+        color: "rgba(0, 0, 255, 0.5)",
+        label: ["searchCorner1", `z=${this.lastSegment?.z}`].join("\n")
+      });
+      graphics.points.push({
+        x: this.lastSearchCorner2.x,
+        y: this.lastSearchCorner2.y,
+        color: "rgba(0, 0, 255, 0.5)",
+        label: ["searchCorner2", `z=${this.lastSegment?.z}`].join("\n")
+      });
+    }
+    if (this.lastExpandedSegment) {
+      graphics.rects.push({
+        center: this.lastExpandedSegment.newNode.center,
+        width: this.lastExpandedSegment.newNode.width,
+        height: this.lastExpandedSegment.newNode.height,
+        fill: "purple",
+        label: `expandedSegment (z=${this.lastExpandedSegment.segment.z})`
+      });
+    }
+    if (this.lastCollidingNodes) {
+      for (const node of this.lastCollidingNodes) {
+        graphics.rects.push({
+          center: node.center,
+          width: node.width,
+          height: node.height,
+          fill: "rgba(255, 0, 0, 0.5)"
+        });
+      }
+    }
+    return graphics;
+  }
+};
+
+// lib/solvers/GapFillSolver/GapFillSolverPipeline.ts
+var GapFillSolverPipeline = class extends BasePipelineSolver2 {
+  findSegmentsWithAdjacentEmptySpaceSolver;
+  expandEdgesToEmptySpaceSolver;
+  pipelineDef = [
+    definePipelineStep(
+      "findSegmentsWithAdjacentEmptySpaceSolver",
+      FindSegmentsWithAdjacentEmptySpaceSolver,
+      (gapFillPipeline) => [
+        {
+          meshNodes: gapFillPipeline.inputProblem.meshNodes
+        }
+      ],
+      {
+        onSolved: () => {
+        }
+      }
+    ),
+    definePipelineStep(
+      "expandEdgesToEmptySpaceSolver",
+      ExpandEdgesToEmptySpaceSolver,
+      (gapFillPipeline) => [
+        {
+          inputMeshNodes: gapFillPipeline.inputProblem.meshNodes,
+          segmentsWithAdjacentEmptySpace: gapFillPipeline.findSegmentsWithAdjacentEmptySpaceSolver.getOutput().segmentsWithAdjacentEmptySpace
+        }
+      ],
+      {
+        onSolved: () => {
+        }
+      }
+    )
+  ];
+  getOutput() {
+    const expandedSegments = this.expandEdgesToEmptySpaceSolver?.getOutput().expandedSegments ?? [];
+    const expandedNodes = expandedSegments.map((es) => es.newNode);
+    return {
+      outputNodes: [...this.inputProblem.meshNodes, ...expandedNodes]
+    };
+  }
+  initialVisualize() {
+    const graphics = {
+      title: "GapFillSolverPipeline - Initial",
+      coordinateSystem: "cartesian",
+      rects: [],
+      points: [],
+      lines: [],
+      circles: [],
+      arrows: [],
+      texts: []
+    };
+    for (const node of this.inputProblem.meshNodes) {
+      graphics.rects.push({
+        center: node.center,
+        width: node.width,
+        height: node.height,
+        stroke: "rgba(0, 0, 0, 0.3)",
+        fill: "rgba(100, 100, 100, 0.1)",
+        layer: `z${node.availableZ.join(",")}`,
+        label: [
+          `node ${node.capacityMeshNodeId}`,
+          `z:${node.availableZ.join(",")}`
+        ].join("\n")
+      });
+    }
+    return graphics;
+  }
+  finalVisualize() {
+    const graphics = {
+      title: "GapFillSolverPipeline - Final",
+      coordinateSystem: "cartesian",
+      rects: [],
+      points: [],
+      lines: [],
+      circles: [],
+      arrows: [],
+      texts: []
+    };
+    const { outputNodes } = this.getOutput();
+    const expandedSegments = this.expandEdgesToEmptySpaceSolver?.getOutput().expandedSegments ?? [];
+    const expandedNodeIds = new Set(
+      expandedSegments.map((es) => es.newNode.capacityMeshNodeId)
+    );
+    for (const node of outputNodes) {
+      const isExpanded = expandedNodeIds.has(node.capacityMeshNodeId);
+      graphics.rects.push({
+        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 graphics;
+  }
+};
+
 // lib/RectDiffPipeline.ts
-var RectDiffPipeline = class extends BasePipelineSolver2 {
+var RectDiffPipeline = class extends BasePipelineSolver3 {
   rectDiffSolver;
+  gapFillSolver;
   pipelineDef = [
-    definePipelineStep(
+    definePipelineStep2(
       "rectDiffSolver",
       RectDiffSolver,
-      (instance) => [
+      (rectDiffPipeline) => [
         {
-          simpleRouteJson: instance.inputProblem.simpleRouteJson,
-          gridOptions: instance.inputProblem.gridOptions
+          simpleRouteJson: rectDiffPipeline.inputProblem.simpleRouteJson,
+          gridOptions: rectDiffPipeline.inputProblem.gridOptions
         }
       ],
       {
         onSolved: () => {
         }
       }
+    ),
+    definePipelineStep2(
+      "gapFillSolver",
+      GapFillSolverPipeline,
+      (rectDiffPipeline) => [
+        {
+          meshNodes: rectDiffPipeline.rectDiffSolver?.getOutput().meshNodes ?? []
+        }
+      ]
     )
   ];
   getConstructorParams() {
     return [this.inputProblem];
   }
   getOutput() {
-    return this.getSolver("rectDiffSolver").getOutput();
+    const gapFillOutput = this.gapFillSolver?.getOutput();
+    if (gapFillOutput) {
+      return { meshNodes: gapFillOutput.outputNodes };
+    }
+    return this.rectDiffSolver.getOutput();
   }
-  visualize() {
-    const solver = this.getSolver("rectDiffSolver");
-    if (solver) {
-      return solver.visualize();
+  initialVisualize() {
+    console.log("RectDiffPipeline - initialVisualize");
+    const graphics = createBaseVisualization(
+      this.inputProblem.simpleRouteJson,
+      "RectDiffPipeline - Initial"
+    );
+    const initialNodes = this.rectDiffSolver?.getOutput().meshNodes ?? [];
+    for (const node of initialNodes) {
+      graphics.rects.push({
+        center: node.center,
+        width: node.width,
+        height: node.height,
+        stroke: "rgba(0, 0, 0, 0.3)",
+        fill: "rgba(100, 100, 100, 0.1)",
+        layer: `z${node.availableZ.join(",")}`,
+        label: [
+          `node ${node.capacityMeshNodeId}`,
+          `z:${node.availableZ.join(",")}`
+        ].join("\n")
+      });
     }
-    return createBaseVisualization(
+    return graphics;
+  }
+  finalVisualize() {
+    const graphics = createBaseVisualization(
       this.inputProblem.simpleRouteJson,
-      "RectDiff Pipeline (not started)"
+      "RectDiffPipeline - Final"
+    );
+    const { meshNodes: outputNodes } = this.getOutput();
+    const initialNodeIds = new Set(
+      (this.rectDiffSolver?.getOutput().meshNodes ?? []).map(
+        (n) => n.capacityMeshNodeId
+      )
     );
+    for (const node of outputNodes) {
+      const isExpanded = !initialNodeIds.has(node.capacityMeshNodeId);
+      graphics.rects.push({
+        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 graphics;
   }
 };
 export {