@tscircuit/rectdiff 0.0.20 → 0.0.21

package/tests/solver/bugreport13-b9a758/bugreport13-b9a758.test.ts

@@ -0,0 +1,93 @@
+import { expect, test } from "bun:test"
+import srj_json from "./bugreport13-b9a758.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("bugreport13-b9a758", 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/bugreport16-d95f38/__snapshots__/bugreport16-d95f38.snap.svg

@@ -0,0 +1,44 @@
+<svg width="640" height="1269" viewBox="0 0 640 1269" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="0,0 10,0 10,10 0,10 0,0" data-type="line" data-label="bounds" points="159.05511811023624,572.8136233989501 600,572.8136233989501 600,131.8687415091863 159.05511811023624,131.8687415091863 159.05511811023624,572.8136233989501" fill="none" stroke="#111827" stroke-width="4.409448818897638"/></g><g><polyline data-points="0,-13.989588979166674 10,-13.989588979166674 10,-3.9895889791666743 0,-3.9895889791666743 0,-13.989588979166674" data-type="line" data-label="bounds" points="159.05511811023624,1189.677389409449 600,1189.677389409449 600,748.7325075196853 159.05511811023624,748.7325075196853 159.05511811023624,1189.677389409449" fill="none" stroke="#111827" stroke-width="4.409448818897638"/></g><g><rect data-type="rect" data-label="node" data-x="6.8" data-y="5" x="346.4602777952798" y="314.8620624540696" width="224.8747199999916" height="74.9582399999972" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.525060900000117" data-y="5" x="282.52147086614787" y="314.8620624540696" width="63.93880692913194" height="74.9582399999972" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="7.9249864499999845" x="348.6631590551242" y="131.8687415091863" width="61.728799999987814" height="182.9933209448833" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1.900020250000069" data-y="3.2000280000000316" x="159.05511811023624" y="389.8203024540668" width="167.56084094488799" height="83.7794481889764" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.8000202500000686" data-y="8.059986449999984" x="238.42519685039372" y="131.8687415091863" width="88.1907622047305" height="171.08780913385965" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="8.099979749999932" data-y="3.1750280000000317" x="432.4391590551121" y="389.8203024540668" width="167.5608409448879" height="85.98417259842523" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="7.1999797499999305" data-y="7.9249864499999845" x="432.439159055112" y="131.8687415091863" width="88.1907622047305" height="182.9933209448833" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="2.7500289000000313" x="326.6159590551242" y="429.50526245406684" width="105.82319999998776" height="44.09448818897636" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1.0800202500000688" data-y="5.135" x="159.05511811023624" y="302.956550643046" width="95.24588031496668" height="86.86375181102079" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="0.9" data-y="7.159986449999984" x="159.05511811023624" y="211.2388202493438" width="79.37007874015748" height="91.71773039370214" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.9450202500000686" data-y="0.8050144500000157" x="238.42519685039372" y="501.8202230839881" width="189.16714015748641" height="70.993400314962" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="7.465020250000068" data-y="1.1000144500000157" x="455.81280944882496" y="475.804475052492" width="64.81711181101753" height="97.00914834645806" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9.1" data-y="7.024986449999984" x="520.6299212598425" y="211.2388202493438" width="79.37007874015751" height="103.62324220472578" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9.674959349999952" data-y="5" x="571.3349977952714" y="314.8620624540696" width="28.66500220472858" height="74.9582399999972" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5.590040500000137" data-y="1.9300289000000315" x="383.4978488189037" y="473.5997506430432" width="44.09448818897641" height="28.22047244094483" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1" data-y="1" x="167.87401574803152" y="493.4435446587926" width="70.5511811023622" height="70.5511811023622" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1" data-y="9" x="167.87401574803152" y="140.68763914698155" width="70.5511811023622" height="70.55118110236225" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9" data-y="9" x="520.6299212598425" y="140.68763914698155" width="70.5511811023623" height="70.55118110236225" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9" data-y="1" x="520.6299212598425" y="493.4435446587926" width="70.5511811023623" height="70.5511811023622" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.310040500000138" data-y="1.9300289000000315" x="338.52147086614787" y="473.5997506430432" width="21.165354330708624" height="28.22047244094483" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1.7650202500000691" data-y="2.0250144500000156" x="159.05511811023624" y="473.5997506430432" width="155.65532913386434" height="19.843794015749438" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.480040500000138" data-y="5.339972899999967" x="254.30099842520292" y="326.76757426509323" width="28.220472440944945" height="21.165354330708738" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.5250200000000405" data-y="3.7000280000000316" x="348.6631590551242" y="389.8203024540668" width="19.840799999991418" height="39.684960000000046" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5.474979999999903" data-y="3.7000280000000316" x="390.5511590551156" y="389.8203024540668" width="19.840799999996477" height="39.684960000000046" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9.1" data-y="2.0000144500000157" x="520.6299212598425" y="475.804475052492" width="79.37007874015751" height="17.63906960630061" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.480040500000138" data-y="4.355" x="254.30099842520292" y="371.7439522178491" width="28.220472440944945" height="18.076350236217706" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.050040000000138" data-y="8.374985549999984" x="326.6159590551242" y="131.8687415091863" width="22.047199999999975" height="143.3083609448833" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5.949959999999862" data-y="8.374985549999984" x="410.391959055112" y="131.8687415091863" width="22.04720000000009" height="143.3083609448833" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.410040500000138" data-y="0.32001445000001594" x="427.59233700788013" y="544.5918766272952" width="28.22047244094483" height="28.22174677165492" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.410040500000138" data-y="1.4200289000000317" x="427.59233700788013" y="499.61549867453925" width="28.22047244094483" height="21.165354330708624" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.050040000000138" data-y="3.7000280000000316" x="326.6159590551242" y="389.8203024540668" width="22.047199999999975" height="39.684960000000046" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.999999999999943" data-y="3.7000280000000316" x="368.5039590551156" y="389.8203024540668" width="22.047199999999975" height="39.684960000000046" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5.949959999999862" data-y="3.7000280000000316" x="410.39195905511207" y="389.8203024540668" width="22.04719999999992" height="39.684960000000046" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5.949959999999862" data-y="6.299971999999968" x="410.39195905511207" y="275.1771024540696" width="22.04719999999992" height="39.68495999999999" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.050040000000138" data-y="6.299971999999968" x="326.6159590551242" y="275.1771024540696" width="22.047199999999975" height="39.68495999999999" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.480040500000138" data-y="5.849972899999967" x="254.30099842520292" y="302.95655064304606" width="28.220472440944945" height="23.811023622047173" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.480040500000138" data-y="4.829972899999968" x="254.30099842520292" y="347.93292859580197" width="28.220472440944945" height="23.811023622047173" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.8000405000001383" data-y="1.9300289000000315" x="314.7104472441006" y="473.5997506430432" width="23.811023622047287" height="28.22047244094483" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.820040500000138" data-y="1.9300289000000315" x="359.6868251968565" y="473.5997506430432" width="23.81102362204723" height="28.22047244094483" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.410040500000138" data-y="0.9100289000000319" x="427.59233700788013" y="520.7808530052479" width="28.22047244094483" height="23.811023622047287" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.410040500000138" data-y="1.9300289000000315" x="427.59233700788013" y="475.804475052492" width="28.22047244094483" height="23.81102362204723" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.300040500000138" data-y="5.984972899999969" x="282.52147086614787" y="302.95655064304594" width="44.09448818897636" height="11.905511811023644" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.145" data-y="2.2250289000000314" x="427.59233700788013" y="473.5997506430432" width="4.8468220472318535" height="2.204724409448829" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.6650202500000693" data-y="1.7050144500000157" x="238.42519685039372" y="493.44354465879263" width="76.28525039370686" height="8.376678425195394" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.8" data-y="-8.989588979166674" x="346.4602777952798" y="931.7258284645686" width="224.8747199999916" height="74.9582399999972" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.525060900000117" data-y="-8.989588979166674" x="282.52147086614787" y="931.7258284645686" width="63.93880692913194" height="74.9582399999972" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="-6.06460252916669" x="348.6631590551242" y="748.7325075196853" width="61.728799999987814" height="182.9933209448833" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1.900020250000069" data-y="-10.789560979166643" x="159.05511811023624" y="1006.6840684645658" width="167.56084094488799" height="83.7794481889764" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.8000202500000686" data-y="-5.92960252916669" x="238.42519685039372" y="748.7325075196853" width="88.1907622047305" height="171.08780913385965" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="8.099979749999932" data-y="-10.814560979166643" x="432.4391590551121" y="1006.6840684645658" width="167.5608409448879" height="85.98417259842518" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="7.1999797499999305" data-y="-6.06460252916669" x="432.439159055112" y="748.7325075196853" width="88.1907622047305" height="182.9933209448833" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="-11.239560079166644" x="326.6159590551242" y="1046.3690284645659" width="105.82319999998776" height="44.09448818897636" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1.0800202500000688" data-y="-8.854588979166675" x="159.05511811023624" y="919.820316653545" width="95.24588031496668" height="86.86375181102085" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="0.9" data-y="-6.82960252916669" x="159.05511811023624" y="828.1025862598428" width="79.37007874015748" height="91.71773039370214" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.9450202500000686" data-y="-13.184574529166659" x="238.42519685039372" y="1118.683989094487" width="189.16714015748641" height="70.99340031496195" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="7.465020250000068" data-y="-12.889574529166659" x="455.81280944882496" y="1092.668241062991" width="64.81711181101753" height="97.009148346458" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9.1" data-y="-6.96460252916669" x="520.6299212598425" y="828.1025862598428" width="79.37007874015751" height="103.62324220472578" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9.674959349999952" data-y="-8.989588979166674" x="571.3349977952714" y="931.7258284645686" width="28.66500220472858" height="74.9582399999972" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5.590040500000137" data-y="-12.059560079166642" x="383.4978488189037" y="1090.4635166535422" width="44.09448818897641" height="28.22047244094483" fill="#dbeafe" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1" data-y="-12.989588979166674" x="167.87401574803152" y="1110.3073106692916" width="70.5511811023622" height="70.5511811023623" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="1" data-y="-4.989588979166674" x="167.87401574803152" y="757.5514051574806" width="70.5511811023622" height="70.5511811023622" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9" data-y="-4.989588979166674" x="520.6299212598425" y="757.5514051574806" width="70.5511811023623" height="70.5511811023622" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9" data-y="-12.989588979166674" x="520.6299212598425" y="1110.3073106692916" width="70.5511811023623" height="70.5511811023623" fill="red" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5" data-y="-10.289560979166643" x="326.6159590551242" y="1006.6840684645658" width="105.82319999998776" height="39.684960000000046" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.545020250000069" data-y="-11.964574529166658" x="159.05511811023624" y="1090.4635166535422" width="224.44273070866754" height="19.84379401574938" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="9.1" data-y="-11.989574529166658" x="520.6299212598425" y="1092.668241062991" width="79.37007874015751" height="17.63906960630061" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="2.480040500000138" data-y="-8.854588979166675" x="254.30099842520292" y="919.820316653545" width="28.220472440944945" height="86.86375181102085" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="4.050040000000138" data-y="-6.06460252916669" x="326.6159590551242" y="748.7325075196853" width="22.047199999999975" height="182.9933209448833" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.410040500000138" data-y="-12.889574529166659" x="427.59233700788013" y="1092.668241062991" width="28.22047244094483" height="97.009148346458" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="5.949959999999862" data-y="-6.06460252916669" x="410.391959055112" y="748.7325075196853" width="22.04720000000009" height="182.9933209448833" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.300040500000138" data-y="-8.004616079166706" x="282.52147086614787" y="919.820316653545" width="44.09448818897636" height="11.905511811023644" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="6.145" data-y="-11.764560079166642" x="427.59233700788013" y="1090.4635166535422" width="4.8468220472318535" height="2.2047244094487723" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><g><rect data-type="rect" data-label="node" data-x="3.4450202500000686" data-y="-12.284574529166658" x="238.42519685039372" y="1110.3073106692916" width="145.07265196851" height="8.37667842519545" fill="#fef3c7" stroke="black" stroke-width="0.02267857142857143"/></g><text data-type="text" data-label="Layer z=0" data-x="0" data-y="10.691671183333339" x="159.05511811023624" y="101.36985468503906" fill="black" font-size="22.04724409448819" 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="-3.297917795833335" x="159.05511811023624" y="718.2336206955381" fill="black" font-size="22.04724409448819" 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="1269" 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', '1269');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":44.09448818897638,"c":0,"e":159.05511811023624,"b":0,"d":-44.09448818897638,"f":572.8136233989501};
+                // 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>