@tscircuit/rectdiff 0.0.19 → 0.0.21

package/tests/solver/bugreport36-bf8303/bugreport36-bf8303.test.ts

@@ -0,0 +1,93 @@
+import { expect, test } from "bun:test"
+import srj_json from "./bugreport36-bf8303.json"
+import {
+  getBounds,
+  getSvgFromGraphicsObject,
+  mergeGraphics,
+  stackGraphicsVertically,
+  type GraphicsObject,
+  type Rect,
+} from "graphics-debug"
+import { RectDiffPipeline } from "lib/RectDiffPipeline"
+import { makeCapacityMeshNodeWithLayerInfo } from "tests/fixtures/makeCapacityMeshNodeWithLayerInfo"
+import { makeSimpleRouteOutlineGraphics } from "tests/fixtures/makeSimpleRouteOutlineGraphics"
+
+const srj = srj_json.simple_route_json ?? srj_json.simpleRouteJson ?? srj_json
+
+test("bugreport36-bf8303", async () => {
+  const solver = new RectDiffPipeline({
+    simpleRouteJson: srj,
+  })
+
+  const outline = makeSimpleRouteOutlineGraphics(srj)
+
+  solver.solve()
+
+  const { meshNodes } = solver.getOutput()
+  const rectsByCombo = makeCapacityMeshNodeWithLayerInfo(meshNodes)
+  const allGraphicsObjects: GraphicsObject[] = []
+
+  for (const z of Array.from({ length: srj.layerCount }, (_, index) => index)) {
+    const layerRects: Rect[] = []
+
+    for (const [key, rects] of rectsByCombo) {
+      const layers = key
+        .split(",")
+        .map((value) => Number.parseInt(value, 10))
+        .filter((value) => !Number.isNaN(value))
+
+      if (layers.includes(z)) {
+        layerRects.push(...rects)
+      }
+    }
+
+    let labelY = 0
+
+    if (layerRects.length > 0) {
+      let maxY = -Infinity
+
+      for (const rect of layerRects) {
+        const top = rect.center.y + rect.height * (2 / 3)
+
+        if (top > maxY) maxY = top
+      }
+
+      labelY = maxY
+    }
+
+    const graphics: GraphicsObject = {
+      title: `RectDiffPipeline - z${z}`,
+      texts: [
+        {
+          anchorSide: "top_right",
+          text: `Layer z=${z}`,
+          x: 0,
+          y: labelY,
+          fontSize: 0.5,
+        },
+      ],
+      coordinateSystem: "cartesian",
+      rects: layerRects,
+      points: [],
+      lines: [],
+    }
+
+    allGraphicsObjects.push(mergeGraphics(graphics, outline))
+  }
+
+  const stackedGraphics = stackGraphicsVertically(allGraphicsObjects)
+  const bounds = getBounds(stackedGraphics)
+  const boundsWidth = Math.max(1, bounds.maxX - bounds.minX)
+  const boundsHeight = Math.max(1, bounds.maxY - bounds.minY)
+  const svgWidth = 640
+  const svgHeight = Math.max(
+    svgWidth,
+    Math.ceil((boundsHeight / boundsWidth) * svgWidth),
+  )
+
+  const svg = getSvgFromGraphicsObject(stackedGraphics, {
+    svgWidth,
+    svgHeight,
+  })
+  await expect(svg).toMatchSvgSnapshot(import.meta.path)
+})

package/tests/solver/interaction/__snapshots__/interaction.snap.svg

@@ -0,0 +1,44 @@
+<svg width="640" height="1608" viewBox="0 0 640 1608" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="-10,-10 15,-10 15,15 -10,15 -10,-10" data-type="line" data-label="bounds" points="40,725.8333333333334 600,725.8333333333334 600,165.83333333333337 40,165.83333333333337 40,725.8333333333334" fill="none" stroke="#111827" stroke-width="2.2399999999999998"/></g><g><polyline data-points="-10,-44.89583333333333 15,-44.89583333333333 15,-19.89583333333333 -10,-19.89583333333333 -10,-44.89583333333333" data-type="line" data-label="bounds" points="40,1507.5 600,1507.5 600,947.4999999999999 40,947.4999999999999 40,1507.5" fill="none" stroke="#111827" stroke-width="2.2399999999999998"/></g><g><rect data-type="rect" data-label="node" data-x="-0.25" data-y="7.75" x="40" y="165.83333333333337" width="436.79999999999995" height="324.8" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="5.25" data-y="-5.25" x="163.2" y="513.0333333333334" width="436.8" height="212.79999999999995" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-7.25" data-y="-7.75" x="40" y="625.0333333333333" width="123.19999999999999" height="100.80000000000007" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-7.25" data-y="-2" x="40" y="490.6333333333334" width="123.19999999999999" height="111.99999999999994" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="12.75" data-y="8.25" x="499.2" y="165.83333333333337" width="100.80000000000001" height="302.4" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="12.75" data-y="0.5" x="499.2" y="468.23333333333335" width="100.80000000000001" height="44.80000000000007" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="5" x="476.79999999999995" y="289.0333333333334" width="22.400000000000034" height="201.59999999999997" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="12.75" x="476.79999999999995" y="165.83333333333337" width="22.400000000000034" height="100.80000000000001" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-7.75" data-y="-5" x="40" y="602.6333333333333" width="100.80000000000001" height="22.399999999999977" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="0" x="275.2" y="490.6333333333334" width="201.59999999999997" height="22.400000000000034" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-2.5" data-y="0" x="163.2" y="490.6333333333334" width="89.60000000000002" height="22.400000000000034" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="0" data-y="0" x="252.8" y="490.6333333333334" width="22.399999999999977" height="22.400000000000034" fill="red" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-5" data-y="-5" x="140.8" y="602.6333333333333" width="22.399999999999977" height="22.399999999999977" fill="red" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="0" x="476.79999999999995" y="490.6333333333334" width="22.400000000000034" height="22.400000000000034" fill="red" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="10" x="476.79999999999995" y="266.6333333333334" width="22.400000000000034" height="22.400000000000034" fill="red" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-0.25" data-y="-27.14583333333333" x="40" y="947.4999999999999" width="436.79999999999995" height="324.79999999999984" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="5.25" data-y="-40.14583333333333" x="163.2" y="1294.6999999999998" width="436.8" height="212.80000000000018" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-7.25" data-y="-42.64583333333333" x="40" y="1406.6999999999998" width="123.19999999999999" height="100.80000000000018" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-7.25" data-y="-36.89583333333333" x="40" y="1272.2999999999997" width="123.19999999999999" height="112" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="12.75" data-y="-26.64583333333333" x="499.2" y="947.4999999999999" width="100.80000000000001" height="302.4" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="12.75" data-y="-34.39583333333333" x="499.2" y="1249.8999999999999" width="100.80000000000001" height="44.799999999999955" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="-29.89583333333333" x="476.79999999999995" y="1070.6999999999998" width="22.400000000000034" height="201.5999999999999" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="-22.14583333333333" x="476.79999999999995" y="947.4999999999999" width="22.400000000000034" height="100.79999999999984" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-7.75" data-y="-39.89583333333333" x="40" y="1384.2999999999997" width="100.80000000000001" height="22.40000000000009" fill="#dbeafe" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="-5" data-y="-39.89583333333333" x="140.8" y="1384.2999999999997" width="22.399999999999977" height="22.40000000000009" fill="#fef3c7" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="3" data-y="-34.89583333333333" x="163.2" y="1272.2999999999997" width="336" height="22.40000000000009" fill="#fef3c7" stroke="black" stroke-width="0.044642857142857144"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="-24.89583333333333" x="476.79999999999995" y="1048.2999999999997" width="22.400000000000034" height="22.40000000000009" fill="#fef3c7" stroke="black" stroke-width="0.044642857142857144"/></g><text data-type="text" data-label="Layer z=0" data-x="0" data-y="17.416666666666664" x="264" y="111.7000000000001" fill="black" font-size="11.2" font-family="sans-serif" text-anchor="end" dominant-baseline="text-before-edge">Layer z=0</text><text data-type="text" data-label="Layer z=1" data-x="0" data-y="-17.479166666666664" x="264" y="893.3666666666666" fill="black" font-size="11.2" font-family="sans-serif" text-anchor="end" dominant-baseline="text-before-edge">Layer z=1</text><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="1608" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+              document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+                const svg = e.currentTarget;
+                const rect = svg.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const crosshair = svg.getElementById('crosshair');
+                const h = svg.getElementById('crosshair-h');
+                const v = svg.getElementById('crosshair-v');
+                const coords = svg.getElementById('coordinates');
+                
+                crosshair.style.display = 'block';
+                h.setAttribute('x1', '0');
+                h.setAttribute('x2', '640');
+                h.setAttribute('y1', y);
+                h.setAttribute('y2', y);
+                v.setAttribute('x1', x);
+                v.setAttribute('x2', x);
+                v.setAttribute('y1', '0');
+                v.setAttribute('y2', '1608');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":22.4,"c":0,"e":264,"b":0,"d":-22.4,"f":501.83333333333337};
+                // Manually invert and apply the affine transform
+                // Since we only use translate and scale, we can directly compute:
+                // x' = (x - tx) / sx
+                // y' = (y - ty) / sy
+                const sx = matrix.a;
+                const sy = matrix.d;
+                const tx = matrix.e; 
+                const ty = matrix.f;
+                const realPoint = {
+                  x: (x - tx) / sx,
+                  y: (y - ty) / sy // Flip y back since we used negative scale
+                }
+                
+                coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+                coords.setAttribute('x', (x + 5).toString());
+                coords.setAttribute('y', (y - 5).toString());
+              });
+              document.currentScript.parentElement.addEventListener('mouseleave', () => {
+                document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+              });
+            ]]></script></svg>

package/tests/solver/interaction/interaction.srj.json

@@ -0,0 +1,58 @@
+{
+  "layerCount": 2,
+  "minTraceWidth": 0.2,
+  "obstacles": [
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": 0, "y": 0 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["A"]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": -5, "y": -5 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["A_prime"]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": 10, "y": 0 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["B"]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": 10, "y": 10 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["C"]
+    }
+  ],
+  "connections": [
+    {
+      "name": "on-board-net",
+      "pointsToConnect": [
+        { "x": 0, "y": 0, "layer": "top", "pointId": "A" },
+        { "x": 10, "y": 0, "layer": "top", "pointId": "B" },
+        { "x": 10, "y": 10, "layer": "top", "pointId": "C" }
+      ],
+      "externallyConnectedPointIds": [["B", "C"]]
+    },
+    {
+      "name": "off-board-A",
+      "isOffBoard": true,
+      "pointsToConnect": [
+        { "x": 0, "y": 0, "layer": "top", "pointId": "A" },
+        { "x": -5, "y": -5, "layer": "top", "pointId": "A_prime" }
+      ]
+    }
+  ],
+  "bounds": { "minX": -10, "maxX": 15, "minY": -10, "maxY": 15 }
+}

package/tests/solver/interaction/interaction.test.ts

@@ -0,0 +1,92 @@
+import { expect, test } from "bun:test"
+import srj from "./interaction.srj.json"
+import {
+  getBounds,
+  getSvgFromGraphicsObject,
+  mergeGraphics,
+  stackGraphicsVertically,
+  type GraphicsObject,
+  type Rect,
+} from "graphics-debug"
+import { RectDiffPipeline } from "lib/RectDiffPipeline"
+import { makeCapacityMeshNodeWithLayerInfo } from "tests/fixtures/makeCapacityMeshNodeWithLayerInfo"
+import { makeSimpleRouteOutlineGraphics } from "tests/fixtures/makeSimpleRouteOutlineGraphics"
+
+test("interaction", async () => {
+  const solver = new RectDiffPipeline({
+    simpleRouteJson: srj,
+  })
+
+  const outline = makeSimpleRouteOutlineGraphics(srj)
+
+  solver.solve()
+
+  const { meshNodes } = solver.getOutput()
+  const rectsByCombo = makeCapacityMeshNodeWithLayerInfo(meshNodes)
+  const allGraphicsObjects: GraphicsObject[] = []
+
+  // Generate a snapshot for each z-layer
+  for (const z of Array.from({ length: srj.layerCount }, (_, index) => index)) {
+    const layerRects: Rect[] = []
+
+    for (const [key, rects] of rectsByCombo) {
+      const layers = key
+        .split(",")
+        .map((value) => Number.parseInt(value, 10))
+        .filter((value) => !Number.isNaN(value))
+
+      if (layers.includes(z)) {
+        layerRects.push(...rects)
+      }
+    }
+
+    let labelY = 0
+
+    if (layerRects.length > 0) {
+      let maxY = -Infinity
+
+      for (const rect of layerRects) {
+        const top = rect.center.y + rect.height * (2 / 3)
+
+        if (top > maxY) maxY = top
+      }
+
+      labelY = maxY
+    }
+
+    const graphics: GraphicsObject = {
+      title: `RectDiffPipeline - z${z}`,
+      texts: [
+        {
+          anchorSide: "top_right",
+          text: `Layer z=${z}`,
+          x: 0,
+          y: labelY,
+          fontSize: 0.5,
+        },
+      ],
+      coordinateSystem: "cartesian",
+      rects: layerRects,
+      points: [],
+      lines: [],
+    }
+
+    allGraphicsObjects.push(mergeGraphics(graphics, outline))
+  }
+
+  const stackedGraphics = stackGraphicsVertically(allGraphicsObjects)
+  const bounds = getBounds(stackedGraphics)
+  const boundsWidth = Math.max(1, bounds.maxX - bounds.minX)
+  const boundsHeight = Math.max(1, bounds.maxY - bounds.minY)
+  const svgWidth = 640
+  const svgHeight = Math.max(
+    svgWidth,
+    Math.ceil((boundsHeight / boundsWidth) * svgWidth),
+  )
+
+  const svg = getSvgFromGraphicsObject(stackedGraphics, {
+    svgWidth,
+    svgHeight,
+  })
+  await expect(svg).toMatchSvgSnapshot(import.meta.path)
+})

package/tests/solver/multi-point/__snapshots__/multi-point.snap.svg

@@ -0,0 +1,44 @@
+<svg width="640" height="1672" viewBox="0 0 640 1672" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="-5,-5 25,-5 25,25 -5,25 -5,-5" data-type="line" data-label="bounds" points="39.99999999999997,750.0555555555557 600,750.0555555555557 600,190.0555555555556 39.99999999999997,190.0555555555556 39.99999999999997,750.0555555555557" fill="none" stroke="#111827" stroke-width="1.866666666666667"/></g><g><polyline data-points="-5,-48.791666666666664 25,-48.791666666666664 25,-18.791666666666664 -5,-18.791666666666664 -5,-48.791666666666664" data-type="line" data-label="bounds" points="39.99999999999997,1567.5 600,1567.5 600,1007.5 39.99999999999997,1007.5 39.99999999999997,1567.5" fill="none" stroke="#111827" stroke-width="1.866666666666667"/></g><g><rect data-type="rect" data-label="node" data-x="2.25" data-y="12.75" x="39.99999999999997" y="190.0555555555556" width="270.66666666666663" height="457.3333333333333" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="17.25" data-y="5" x="310.66666666666663" y="479.3888888888889" width="289.33333333333337" height="168" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="17.25" data-y="17.75" x="310.66666666666663" y="190.0555555555556" width="289.33333333333337" height="270.6666666666667" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="14.925" data-y="10" x="376.93333333333334" y="460.7222222222223" width="70" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="18.675" data-y="10" x="446.93333333333334" y="460.7222222222223" width="70.00000000000006" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="2.7500000000000004" data-y="-2.75" x="58.66666666666666" y="666.0555555555557" width="251.99999999999997" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="14.5" data-y="-2" x="310.66666666666663" y="647.3888888888889" width="186.66666666666669" height="93.33333333333337" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.75" data-y="-2.25" x="516" y="647.3888888888889" width="84" height="102.66666666666674" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="11.774999999999999" data-y="10" x="329.3333333333333" y="460.7222222222223" width="47.599999999999966" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.775" data-y="10" x="516.9333333333333" y="460.7222222222223" width="83.06666666666672" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-4.5" data-y="-1.0000000000000013" x="39.99999999999997" y="647.3888888888889" width="18.666666666666686" height="56.000000000000114" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-2.2499999999999996" data-y="0" x="58.66666666666666" y="647.3888888888889" width="65.33333333333333" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="2.41875" data-y="0" x="142.66666666666666" y="647.3888888888889" width="71.63333333333335" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="5.8375" data-y="0" x="214.3" y="647.3888888888889" width="55.99999999999994" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="8.41875" data-y="0" x="270.29999999999995" y="647.3888888888889" width="40.366666666666674" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="-2.75" x="497.3333333333333" y="666.0555555555557" width="18.666666666666686" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-4.5" data-y="-3.7500000000000013" x="39.99999999999997" y="703.388888888889" width="18.666666666666686" height="46.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="15" data-y="-4.75" x="329.3333333333333" y="740.7222222222223" width="168" height="9.333333333333371" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="0" data-y="0" x="123.99999999999999" y="647.3888888888889" width="18.66666666666667" height="18.666666666666742" fill="red" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="10" x="310.66666666666663" y="460.7222222222223" width="18.666666666666686" height="18.66666666666663" fill="red" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="0" x="497.3333333333333" y="647.3888888888889" width="18.666666666666686" height="18.666666666666742" fill="red" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="-5" x="310.66666666666663" y="740.7222222222223" width="18.666666666666686" height="18.66666666666663" fill="red" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="2.25" data-y="-31.041666666666664" x="39.99999999999997" y="1007.5" width="270.66666666666663" height="457.3333333333335" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="17.25" data-y="-38.791666666666664" x="310.66666666666663" y="1296.8333333333335" width="289.33333333333337" height="168" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="17.25" data-y="-26.041666666666664" x="310.66666666666663" y="1007.5" width="289.33333333333337" height="270.66666666666674" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="14.925" data-y="-33.791666666666664" x="376.93333333333334" y="1278.1666666666667" width="70" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="18.675" data-y="-33.791666666666664" x="446.93333333333334" y="1278.1666666666667" width="70.00000000000006" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="2.7500000000000004" data-y="-46.541666666666664" x="58.66666666666666" y="1483.5" width="251.99999999999997" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="14.5" data-y="-45.791666666666664" x="310.66666666666663" y="1464.8333333333335" width="186.66666666666669" height="93.33333333333326" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.75" data-y="-46.041666666666664" x="516" y="1464.8333333333335" width="84" height="102.66666666666652" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="11.774999999999999" data-y="-33.791666666666664" x="329.3333333333333" y="1278.1666666666667" width="47.599999999999966" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.775" data-y="-33.791666666666664" x="516.9333333333333" y="1278.1666666666667" width="83.06666666666672" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-4.5" data-y="-44.791666666666664" x="39.99999999999997" y="1464.8333333333335" width="18.666666666666686" height="56" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-2.2499999999999996" data-y="-43.791666666666664" x="58.66666666666666" y="1464.8333333333335" width="65.33333333333333" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="2.41875" data-y="-43.791666666666664" x="142.66666666666666" y="1464.8333333333335" width="71.63333333333335" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="5.8375" data-y="-43.791666666666664" x="214.3" y="1464.8333333333335" width="55.99999999999994" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="8.41875" data-y="-43.791666666666664" x="270.29999999999995" y="1464.8333333333335" width="40.366666666666674" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="-46.541666666666664" x="497.3333333333333" y="1483.5" width="18.666666666666686" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-4.5" data-y="-47.541666666666664" x="39.99999999999997" y="1520.8333333333335" width="18.666666666666686" height="46.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="14.5" data-y="-48.541666666666664" x="310.66666666666663" y="1558.1666666666667" width="186.66666666666669" height="9.333333333333258" fill="#fef3c7" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="10" data-y="-33.791666666666664" x="310.66666666666663" y="1278.1666666666667" width="18.666666666666686" height="18.666666666666742" fill="#fef3c7" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="-43.791666666666664" x="497.3333333333333" y="1464.8333333333335" width="18.666666666666686" height="18.666666666666515" fill="#fef3c7" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="0" data-y="-43.791666666666664" x="123.99999999999999" y="1464.8333333333335" width="18.66666666666667" height="18.666666666666515" fill="#fef3c7" stroke="black" stroke-width="0.05357142857142857"/></g><text data-type="text" data-label="Layer z=0" data-x="0" data-y="29.083333333333332" x="133.33333333333331" y="113.83333333333337" fill="black" font-size="9.333333333333334" font-family="sans-serif" text-anchor="end" dominant-baseline="text-before-edge">Layer z=0</text><text data-type="text" data-label="Layer z=1" data-x="0" data-y="-14.708333333333332" x="133.33333333333331" y="931.2777777777778" fill="black" font-size="9.333333333333334" font-family="sans-serif" text-anchor="end" dominant-baseline="text-before-edge">Layer z=1</text><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="1672" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+              document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+                const svg = e.currentTarget;
+                const rect = svg.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const crosshair = svg.getElementById('crosshair');
+                const h = svg.getElementById('crosshair-h');
+                const v = svg.getElementById('crosshair-v');
+                const coords = svg.getElementById('coordinates');
+                
+                crosshair.style.display = 'block';
+                h.setAttribute('x1', '0');
+                h.setAttribute('x2', '640');
+                h.setAttribute('y1', y);
+                h.setAttribute('y2', y);
+                v.setAttribute('x1', x);
+                v.setAttribute('x2', x);
+                v.setAttribute('y1', '0');
+                v.setAttribute('y2', '1672');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":18.666666666666668,"c":0,"e":133.33333333333331,"b":0,"d":-18.666666666666668,"f":656.7222222222223};
+                // Manually invert and apply the affine transform
+                // Since we only use translate and scale, we can directly compute:
+                // x' = (x - tx) / sx
+                // y' = (y - ty) / sy
+                const sx = matrix.a;
+                const sy = matrix.d;
+                const tx = matrix.e; 
+                const ty = matrix.f;
+                const realPoint = {
+                  x: (x - tx) / sx,
+                  y: (y - ty) / sy // Flip y back since we used negative scale
+                }
+                
+                coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+                coords.setAttribute('x', (x + 5).toString());
+                coords.setAttribute('y', (y - 5).toString());
+              });
+              document.currentScript.parentElement.addEventListener('mouseleave', () => {
+                document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+              });
+            ]]></script></svg>

package/tests/solver/multi-point/multi-point.srj.json

@@ -0,0 +1,57 @@
+{
+  "layerCount": 2,
+  "minTraceWidth": 0.2,
+  "obstacles": [
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": 0, "y": 0 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["A"]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": 10, "y": 10 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["B"]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": 20, "y": 0 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["C"]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": { "x": 10, "y": -5 },
+      "width": 1,
+      "height": 1,
+      "connectedTo": ["B_prime"]
+    }
+  ],
+  "connections": [
+    {
+      "name": "on-board-net",
+      "pointsToConnect": [
+        { "x": 0, "y": 0, "layer": "top", "pointId": "A" },
+        { "x": 10, "y": 10, "layer": "top", "pointId": "B" },
+        { "x": 20, "y": 0, "layer": "top", "pointId": "C" }
+      ]
+    },
+    {
+      "name": "off-board-B",
+      "isOffBoard": true,
+      "pointsToConnect": [
+        { "x": 10, "y": 10, "layer": "top", "pointId": "B" },
+        { "x": 10, "y": -5, "layer": "top", "pointId": "B_prime" }
+      ]
+    }
+  ],
+  "bounds": { "minX": -5, "maxX": 25, "minY": -5, "maxY": 25 }
+}

package/tests/solver/multi-point/multi-point.test.ts

@@ -0,0 +1,92 @@
+import { expect, test } from "bun:test"
+import srj from "./multi-point.srj.json"
+import {
+  getBounds,
+  getSvgFromGraphicsObject,
+  mergeGraphics,
+  stackGraphicsVertically,
+  type GraphicsObject,
+  type Rect,
+} from "graphics-debug"
+import { RectDiffPipeline } from "lib/RectDiffPipeline"
+import { makeCapacityMeshNodeWithLayerInfo } from "tests/fixtures/makeCapacityMeshNodeWithLayerInfo"
+import { makeSimpleRouteOutlineGraphics } from "tests/fixtures/makeSimpleRouteOutlineGraphics"
+
+test("multi-point", async () => {
+  const solver = new RectDiffPipeline({
+    simpleRouteJson: srj,
+  })
+
+  const outline = makeSimpleRouteOutlineGraphics(srj)
+
+  solver.solve()
+
+  const { meshNodes } = solver.getOutput()
+  const rectsByCombo = makeCapacityMeshNodeWithLayerInfo(meshNodes)
+  const allGraphicsObjects: GraphicsObject[] = []
+
+  // Generate a snapshot for each z-layer
+  for (const z of Array.from({ length: srj.layerCount }, (_, index) => index)) {
+    const layerRects: Rect[] = []
+
+    for (const [key, rects] of rectsByCombo) {
+      const layers = key
+        .split(",")
+        .map((value) => Number.parseInt(value, 10))
+        .filter((value) => !Number.isNaN(value))
+
+      if (layers.includes(z)) {
+        layerRects.push(...rects)
+      }
+    }
+
+    let labelY = 0
+
+    if (layerRects.length > 0) {
+      let maxY = -Infinity
+
+      for (const rect of layerRects) {
+        const top = rect.center.y + rect.height * (2 / 3)
+
+        if (top > maxY) maxY = top
+      }
+
+      labelY = maxY
+    }
+
+    const graphics: GraphicsObject = {
+      title: `RectDiffPipeline - z${z}`,
+      texts: [
+        {
+          anchorSide: "top_right",
+          text: `Layer z=${z}`,
+          x: 0,
+          y: labelY,
+          fontSize: 0.5,
+        },
+      ],
+      coordinateSystem: "cartesian",
+      rects: layerRects,
+      points: [],
+      lines: [],
+    }
+
+    allGraphicsObjects.push(mergeGraphics(graphics, outline))
+  }
+
+  const stackedGraphics = stackGraphicsVertically(allGraphicsObjects)
+  const bounds = getBounds(stackedGraphics)
+  const boundsWidth = Math.max(1, bounds.maxX - bounds.minX)
+  const boundsHeight = Math.max(1, bounds.maxY - bounds.minY)
+  const svgWidth = 640
+  const svgHeight = Math.max(
+    svgWidth,
+    Math.ceil((boundsHeight / boundsWidth) * svgWidth),
+  )
+
+  const svg = getSvgFromGraphicsObject(stackedGraphics, {
+    svgWidth,
+    svgHeight,
+  })
+  await expect(svg).toMatchSvgSnapshot(import.meta.path)
+})

package/tests/solver/no-better-path/__snapshots__/no-better-path.snap.svg

@@ -0,0 +1,44 @@
+<svg width="640" height="1620" viewBox="0 0 640 1620" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="-5,-5 25,-5 25,25 -5,25 -5,-5" data-type="line" data-label="bounds" points="39.99999999999997,731.25 600,731.25 600,171.24999999999994 39.99999999999997,171.24999999999994 39.99999999999997,731.25" fill="none" stroke="#111827" stroke-width="1.866666666666667"/></g><g><polyline data-points="-5,-47.1875 25,-47.1875 25,-17.1875 -5,-17.1875 -5,-47.1875" data-type="line" data-label="bounds" points="39.99999999999997,1518.75 600,1518.75 600,958.75 39.99999999999997,958.75 39.99999999999997,1518.75" fill="none" stroke="#111827" stroke-width="1.866666666666667"/></g><g><rect data-type="rect" data-label="node" data-x="7.25" data-y="15.25" x="39.99999999999997" y="171.24999999999994" width="457.33333333333337" height="364.00000000000006" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="4.9" data-y="2.5" x="112.79999999999998" y="553.9166666666666" width="224.00000000000003" height="74.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="17.95" data-y="0.25" x="336.79999999999995" y="535.25" width="263.20000000000005" height="196" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="4.1000000000000005" data-y="-2.75" x="82.93333333333332" y="647.25" width="253.86666666666667" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-3.05" data-y="2.5" x="39.99999999999997" y="535.25" width="72.80000000000001" height="112" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.75" data-y="16.1625" x="516" y="171.24999999999994" width="84" height="329.93333333333334" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.25" data-y="6.4125" x="497.3333333333333" y="501.1833333333333" width="102.66666666666669" height="34.06666666666672" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-3.8499999999999996" data-y="-2.75" x="39.99999999999997" y="647.25" width="42.93333333333335" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="0.5125000000000006" data-y="5" x="112.79999999999998" y="535.25" width="60.20000000000002" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="2.41875" data-y="0" x="142.66666666666666" y="628.5833333333333" width="71.63333333333335" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="3.3125000000000004" data-y="5" x="173" y="535.25" width="44.333333333333314" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="6.11875" data-y="0" x="214.3" y="628.5833333333333" width="66.49999999999994" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="7.09375" data-y="5" x="236" y="535.25" width="59.5" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="9.4" data-y="0" x="280.79999999999995" y="628.5833333333333" width="56.00000000000006" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="9.79375" data-y="5" x="295.5" y="535.25" width="41.299999999999955" height="18.66666666666663" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="13.4125" x="497.3333333333333" y="273.91666666666663" width="18.666666666666686" height="227.26666666666665" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="22.75" x="497.3333333333333" y="171.24999999999994" width="18.666666666666686" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-0.7999999999999998" data-y="0" x="112.79999999999998" y="628.5833333333333" width="11.200000000000003" height="18.666666666666742" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="0" data-y="0" x="123.99999999999999" y="628.5833333333333" width="18.66666666666667" height="18.666666666666742" fill="red" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="5" x="217.33333333333331" y="535.25" width="18.666666666666686" height="18.66666666666663" fill="red" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="20" x="497.3333333333333" y="255.24999999999994" width="18.666666666666686" height="18.666666666666686" fill="red" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="7.25" data-y="-26.9375" x="39.99999999999997" y="958.75" width="457.33333333333337" height="364" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="4.9" data-y="-39.6875" x="112.79999999999998" y="1341.4166666666665" width="224.00000000000003" height="74.66666666666697" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="17.95" data-y="-41.9375" x="336.79999999999995" y="1322.75" width="263.20000000000005" height="196" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="4.1000000000000005" data-y="-44.9375" x="82.93333333333332" y="1434.75" width="253.86666666666667" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-3.05" data-y="-39.6875" x="39.99999999999997" y="1322.75" width="72.80000000000001" height="112" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.75" data-y="-26.025" x="516" y="958.75" width="84" height="329.9333333333334" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="22.25" data-y="-35.775" x="497.3333333333333" y="1288.6833333333334" width="102.66666666666669" height="34.066666666666606" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-3.8499999999999996" data-y="-44.9375" x="39.99999999999997" y="1434.75" width="42.93333333333335" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="0.5125000000000006" data-y="-37.1875" x="112.79999999999998" y="1322.75" width="60.20000000000002" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="2.41875" data-y="-42.1875" x="142.66666666666666" y="1416.0833333333335" width="71.63333333333335" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="3.3125000000000004" data-y="-37.1875" x="173" y="1322.75" width="44.333333333333314" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="6.11875" data-y="-42.1875" x="214.3" y="1416.0833333333335" width="66.49999999999994" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="7.09375" data-y="-37.1875" x="236" y="1322.75" width="59.5" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="9.4" data-y="-42.1875" x="280.79999999999995" y="1416.0833333333335" width="56.00000000000006" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="9.79375" data-y="-37.1875" x="295.5" y="1322.75" width="41.299999999999955" height="18.666666666666515" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="-28.775" x="497.3333333333333" y="1061.4166666666665" width="18.666666666666686" height="227.26666666666688" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="-19.4375" x="497.3333333333333" y="958.75" width="18.666666666666686" height="84" fill="#dbeafe" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="-0.2999999999999998" data-y="-42.1875" x="112.79999999999998" y="1416.0833333333335" width="29.866666666666674" height="18.666666666666515" fill="#fef3c7" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="-37.1875" x="217.33333333333331" y="1322.75" width="18.666666666666686" height="18.666666666666515" fill="#fef3c7" stroke="black" stroke-width="0.05357142857142857"/></g><g><rect data-type="rect" data-label="node" data-x="20" data-y="-22.1875" x="497.3333333333333" y="1042.75" width="18.666666666666686" height="18.666666666666515" fill="#fef3c7" stroke="black" stroke-width="0.05357142857142857"/></g><text data-type="text" data-label="Layer z=0" data-x="0" data-y="28.25" x="133.33333333333331" y="110.58333333333326" fill="black" font-size="9.333333333333334" font-family="sans-serif" text-anchor="end" dominant-baseline="text-before-edge">Layer z=0</text><text data-type="text" data-label="Layer z=1" data-x="0" data-y="-13.9375" x="133.33333333333331" y="898.0833333333333" fill="black" font-size="9.333333333333334" font-family="sans-serif" text-anchor="end" dominant-baseline="text-before-edge">Layer z=1</text><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="1620" stroke="#666" stroke-width="0.5"/><line id="crosshair-v" x1="0" x2="640" stroke="#666" stroke-width="0.5"/><text id="coordinates" font-family="monospace" font-size="12" fill="#666"></text></g><script><![CDATA[
+              document.currentScript.parentElement.addEventListener('mousemove', (e) => {
+                const svg = e.currentTarget;
+                const rect = svg.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const crosshair = svg.getElementById('crosshair');
+                const h = svg.getElementById('crosshair-h');
+                const v = svg.getElementById('crosshair-v');
+                const coords = svg.getElementById('coordinates');
+                
+                crosshair.style.display = 'block';
+                h.setAttribute('x1', '0');
+                h.setAttribute('x2', '640');
+                h.setAttribute('y1', y);
+                h.setAttribute('y2', y);
+                v.setAttribute('x1', x);
+                v.setAttribute('x2', x);
+                v.setAttribute('y1', '0');
+                v.setAttribute('y2', '1620');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":18.666666666666668,"c":0,"e":133.33333333333331,"b":0,"d":-18.666666666666668,"f":637.9166666666666};
+                // Manually invert and apply the affine transform
+                // Since we only use translate and scale, we can directly compute:
+                // x' = (x - tx) / sx
+                // y' = (y - ty) / sy
+                const sx = matrix.a;
+                const sy = matrix.d;
+                const tx = matrix.e; 
+                const ty = matrix.f;
+                const realPoint = {
+                  x: (x - tx) / sx,
+                  y: (y - ty) / sy // Flip y back since we used negative scale
+                }
+                
+                coords.textContent = `(${realPoint.x.toFixed(2)}, ${realPoint.y.toFixed(2)})`;
+                coords.setAttribute('x', (x + 5).toString());
+                coords.setAttribute('y', (y - 5).toString());
+              });
+              document.currentScript.parentElement.addEventListener('mouseleave', () => {
+                document.currentScript.parentElement.getElementById('crosshair').style.display = 'none';
+              });
+            ]]></script></svg>