@tscircuit/rectdiff 0.0.5 → 0.0.7

package/lib/solvers/RectDiffSolver.ts

@@ -13,12 +13,12 @@ import {
   computeProgress,
 } from "./rectdiff/engine"
 import { rectsToMeshNodes } from "./rectdiff/rectsToMeshNodes"
+import { overlaps } from "./rectdiff/geometry"
 import type { GapFillOptions } from "./rectdiff/gapfill/types"
 import {
   findUncoveredPoints,
   calculateCoverage,
 } from "./rectdiff/gapfill/engine"
-import { GapFillSubSolver } from "./rectdiff/subsolvers/GapFillSubSolver"
 
 /**
  * A streaming, one-step-per-iteration solver for capacity mesh generation.
@@ -26,23 +26,16 @@ import { GapFillSubSolver } from "./rectdiff/subsolvers/GapFillSubSolver"
 export class RectDiffSolver extends BaseSolver {
   private srj: SimpleRouteJson
   private gridOptions: Partial<GridFill3DOptions>
-  private gapFillOptions: Partial<GapFillOptions>
   private state!: RectDiffState
   private _meshNodes: CapacityMeshNode[] = []
 
-  /** Active subsolver for GAP_FILL phases. */
-  declare activeSubSolver: GapFillSubSolver | null
-
   constructor(opts: {
     simpleRouteJson: SimpleRouteJson
     gridOptions?: Partial<GridFill3DOptions>
-    gapFillOptions?: Partial<GapFillOptions>
   }) {
     super()
     this.srj = opts.simpleRouteJson
     this.gridOptions = opts.gridOptions ?? {}
-    this.gapFillOptions = opts.gapFillOptions ?? {}
-    this.activeSubSolver = null
   }
 
   override _setup() {
@@ -60,44 +53,7 @@ export class RectDiffSolver extends BaseSolver {
     } else if (this.state.phase === "EXPANSION") {
       stepExpansion(this.state)
     } else if (this.state.phase === "GAP_FILL") {
-      // Initialize gap fill subsolver if needed
-      if (
-        !this.activeSubSolver ||
-        !(this.activeSubSolver instanceof GapFillSubSolver)
-      ) {
-        const minTrace = this.srj.minTraceWidth || 0.15
-        const minGapSize = Math.max(0.01, minTrace / 10)
-        const boundsSize = Math.min(
-          this.state.bounds.width,
-          this.state.bounds.height,
-        )
-        this.activeSubSolver = new GapFillSubSolver({
-          placed: this.state.placed,
-          options: {
-            minWidth: minGapSize,
-            minHeight: minGapSize,
-            scanResolution: Math.max(0.05, boundsSize / 100),
-            ...this.gapFillOptions,
-          },
-          layerCtx: {
-            bounds: this.state.bounds,
-            layerCount: this.state.layerCount,
-            obstaclesByLayer: this.state.obstaclesByLayer,
-            placedByLayer: this.state.placedByLayer,
-          },
-        })
-      }
-
-      this.activeSubSolver.step()
-
-      if (this.activeSubSolver.solved) {
-        // Transfer results back to main state
-        const output = this.activeSubSolver.getOutput()
-        this.state.placed = output.placed
-        this.state.placedByLayer = output.placedByLayer
-        this.activeSubSolver = null
-        this.state.phase = "DONE"
-      }
+      this.state.phase = "DONE"
     } else if (this.state.phase === "DONE") {
       // Finalize once
       if (!this.solved) {
@@ -112,10 +68,6 @@ export class RectDiffSolver extends BaseSolver {
     this.stats.phase = this.state.phase
     this.stats.gridIndex = this.state.gridIndex
     this.stats.placed = this.state.placed.length
-    if (this.activeSubSolver instanceof GapFillSubSolver) {
-      const output = this.activeSubSolver.getOutput()
-      this.stats.gapsFilled = output.filledCount
-    }
   }
 
   /** Compute solver progress (0 to 1). */
@@ -123,13 +75,7 @@ export class RectDiffSolver extends BaseSolver {
     if (this.solved || this.state.phase === "DONE") {
       return 1
     }
-    if (
-      this.state.phase === "GAP_FILL" &&
-      this.activeSubSolver instanceof GapFillSubSolver
-    ) {
-      return 0.85 + 0.1 * this.activeSubSolver.computeProgress()
-    }
-    return computeProgress(this.state) * 0.85
+    return computeProgress(this.state)
   }
 
   override getOutput(): { meshNodes: CapacityMeshNode[] } {
@@ -183,13 +129,9 @@ export class RectDiffSolver extends BaseSolver {
 
   /** Streaming visualization: board + obstacles + current placements. */
   override visualize(): GraphicsObject {
-    // If a subsolver is active, delegate to its visualization
-    if (this.activeSubSolver) {
-      return this.activeSubSolver.visualize()
-    }
-
     const rects: NonNullable<GraphicsObject["rects"]> = []
     const points: NonNullable<GraphicsObject["points"]> = []
+    const lines: NonNullable<GraphicsObject["lines"]> = [] // Initialize lines array
 
     // Board bounds - use srj bounds which is always available
     const boardBounds = {
@@ -199,26 +141,35 @@ export class RectDiffSolver extends BaseSolver {
       maxY: this.srj.bounds.maxY,
     }
 
-    // board
-    rects.push({
-      center: {
-        x: (boardBounds.minX + boardBounds.maxX) / 2,
-        y: (boardBounds.minY + boardBounds.maxY) / 2,
-      },
-      width: boardBounds.maxX - boardBounds.minX,
-      height: boardBounds.maxY - boardBounds.minY,
-      fill: "none",
-      stroke: "#111827",
-      label: "board",
-    })
+    // board or outline
+    if (this.srj.outline && this.srj.outline.length > 1) {
+      lines.push({
+        points: [...this.srj.outline, this.srj.outline[0]!], // Close the loop by adding the first point again
+        strokeColor: "#111827",
+        strokeWidth: 0.01,
+        label: "outline",
+      })
+    } else {
+      rects.push({
+        center: {
+          x: (boardBounds.minX + boardBounds.maxX) / 2,
+          y: (boardBounds.minY + boardBounds.maxY) / 2,
+        },
+        width: boardBounds.maxX - boardBounds.minX,
+        height: boardBounds.maxY - boardBounds.minY,
+        fill: "none",
+        stroke: "#111827",
+        label: "board",
+      })
+    }
 
     // obstacles (rect & oval as bounding boxes)
-    for (const ob of this.srj.obstacles ?? []) {
-      if (ob.type === "rect" || ob.type === "oval") {
+    for (const obstacle of this.srj.obstacles ?? []) {
+      if (obstacle.type === "rect" || obstacle.type === "oval") {
         rects.push({
-          center: { x: ob.center.x, y: ob.center.y },
-          width: ob.width,
-          height: ob.height,
+          center: { x: obstacle.center.x, y: obstacle.center.y },
+          width: obstacle.width,
+          height: obstacle.height,
           fill: "#fee2e2",
           stroke: "#ef4444",
           layer: "obstacle",
@@ -227,6 +178,46 @@ export class RectDiffSolver extends BaseSolver {
       }
     }
 
+    // board void rects
+    if (this.state?.boardVoidRects) {
+      // If outline exists, compute its bbox to hide outer padding voids
+      let outlineBBox: {
+        x: number
+        y: number
+        width: number
+        height: number
+      } | null = null
+
+      if (this.srj.outline && this.srj.outline.length > 0) {
+        const xs = this.srj.outline.map((p) => p.x)
+        const ys = this.srj.outline.map((p) => p.y)
+        const minX = Math.min(...xs)
+        const minY = Math.min(...ys)
+        outlineBBox = {
+          x: minX,
+          y: minY,
+          width: Math.max(...xs) - minX,
+          height: Math.max(...ys) - minY,
+        }
+      }
+
+      for (const r of this.state.boardVoidRects) {
+        // If we have an outline, only show voids that overlap its bbox (hides outer padding)
+        if (outlineBBox && !overlaps(r, outlineBBox)) {
+          continue
+        }
+
+        rects.push({
+          center: { x: r.x + r.width / 2, y: r.y + r.height / 2 },
+          width: r.width,
+          height: r.height,
+          fill: "rgba(0, 0, 0, 0.5)",
+          stroke: "none",
+          label: "void",
+        })
+      }
+    }
+
     // candidate positions (where expansion started from)
     if (this.state?.candidates?.length) {
       for (const cand of this.state.candidates) {
@@ -263,6 +254,7 @@ export class RectDiffSolver extends BaseSolver {
       coordinateSystem: "cartesian",
       rects,
       points,
+      lines, // Include lines in the returned GraphicsObject
     }
   }
 }

package/lib/solvers/rectdiff/engine.ts

@@ -20,6 +20,7 @@ import {
   overlaps,
   subtractRect2D,
 } from "./geometry"
+import { computeInverseRects } from "./geometry/computeInverseRects"
 import { buildZIndexMap, obstacleToXYRect, obstacleZs } from "./layers"
 
 /**
@@ -44,11 +45,24 @@ export function initState(
     { length: layerCount },
     () => [],
   )
-  for (const ob of srj.obstacles ?? []) {
-    const r = obstacleToXYRect(ob)
-    if (!r) continue
-    const zs = obstacleZs(ob, zIndexByName)
-    const invalidZs = zs.filter((z) => z < 0 || z >= layerCount)
+
+  // Compute void rects from outline if present
+  let boardVoidRects: XYRect[] = []
+  if (srj.outline && srj.outline.length > 2) {
+    boardVoidRects = computeInverseRects(bounds, srj.outline)
+    // Add void rects as obstacles to ALL layers
+    for (const voidR of boardVoidRects) {
+      for (let z = 0; z < layerCount; z++) {
+        obstaclesByLayer[z]!.push(voidR)
+      }
+    }
+  }
+
+  for (const obstacle of srj.obstacles ?? []) {
+    const rect = obstacleToXYRect(obstacle)
+    if (!rect) continue
+    const zLayers = obstacleZs(obstacle, zIndexByName)
+    const invalidZs = zLayers.filter((z) => z < 0 || z >= layerCount)
     if (invalidZs.length) {
       throw new Error(
         `RectDiffSolver: obstacle uses z-layer indices ${invalidZs.join(
@@ -57,8 +71,9 @@ export function initState(
       )
     }
     // Persist normalized zLayers back onto the shared SRJ so downstream solvers see them.
-    if ((!ob.zLayers || ob.zLayers.length === 0) && zs.length) ob.zLayers = zs
-    for (const z of zs) obstaclesByLayer[z]!.push(r)
+    if ((!obstacle.zLayers || obstacle.zLayers.length === 0) && zLayers.length)
+      obstacle.zLayers = zLayers
+    for (const z of zLayers) obstaclesByLayer[z]!.push(rect)
   }
 
   const trace = Math.max(0.01, srj.minTraceWidth || 0.15)
@@ -97,6 +112,7 @@ export function initState(
     bounds,
     options,
     obstaclesByLayer,
+    boardVoidRects,
     phase: "GRID",
     gridIndex: 0,
     candidates: [],
@@ -426,7 +442,10 @@ export function finalizeRects(state: RectDiffState): Rect3d[] {
   })
 
   // Append obstacle nodes to the output
+  const voidSet = new Set(state.boardVoidRects || [])
   for (const [rect, layerIndices] of layersByObstacleRect.entries()) {
+    if (voidSet.has(rect)) continue // Skip void rects
+
     out.push({
       minX: rect.x,
       minY: rect.y,

package/lib/solvers/rectdiff/geometry/computeInverseRects.ts

@@ -0,0 +1,108 @@
+import type { XYRect } from "../types"
+import { isPointInPolygon } from "./isPointInPolygon"
+import { EPS } from "../geometry" // Import EPS from common geometry file
+
+/**
+ * Decompose the empty space inside 'bounds' but outside 'polygon' into rectangles.
+ * This uses a coordinate grid approach, ideal for rectilinear polygons.
+ */
+export function computeInverseRects(
+  bounds: XYRect,
+  polygon: Array<{ x: number; y: number }>,
+): XYRect[] {
+  if (!polygon || polygon.length < 3) return []
+
+  // 1. Collect unique sorted X and Y coordinates
+  const xs = new Set<number>([bounds.x, bounds.x + bounds.width])
+  const ys = new Set<number>([bounds.y, bounds.y + bounds.height])
+  for (const p of polygon) {
+    xs.add(p.x)
+    ys.add(p.y)
+  }
+  const xSorted = Array.from(xs).sort((a, b) => a - b)
+  const ySorted = Array.from(ys).sort((a, b) => a - b)
+
+  // 2. Generate grid cells and classify them
+  const rawRects: XYRect[] = []
+  for (let i = 0; i < xSorted.length - 1; i++) {
+    for (let j = 0; j < ySorted.length - 1; j++) {
+      const x0 = xSorted[i]!
+      const x1 = xSorted[i + 1]!
+      const y0 = ySorted[j]!
+      const y1 = ySorted[j + 1]!
+
+      // Check center point
+      const cx = (x0 + x1) / 2
+      const cy = (y0 + y1) / 2
+
+      // If NOT in polygon, it's a void rect
+      if (
+        cx >= bounds.x &&
+        cx <= bounds.x + bounds.width &&
+        cy >= bounds.y &&
+        cy <= bounds.y + bounds.height
+      ) {
+        if (!isPointInPolygon({ x: cx, y: cy }, polygon)) {
+          rawRects.push({ x: x0, y: y0, width: x1 - x0, height: y1 - y0 })
+        }
+      }
+    }
+  }
+
+  // 3. Simple merge pass (horizontal)
+  const finalRects: XYRect[] = []
+
+  // Sort by y then x
+  rawRects.sort((a, b) => {
+    if (Math.abs(a.y - b.y) > EPS) return a.y - b.y
+    return a.x - b.x
+  })
+
+  let current: XYRect | null = null
+  for (const r of rawRects) {
+    if (!current) {
+      current = r
+      continue
+    }
+
+    const sameY = Math.abs(current.y - r.y) < EPS
+    const sameHeight = Math.abs(current.height - r.height) < EPS
+    const touchesX = Math.abs(current.x + current.width - r.x) < EPS
+
+    if (sameY && sameHeight && touchesX) {
+      current.width += r.width
+    } else {
+      finalRects.push(current)
+      current = r
+    }
+  }
+  if (current) finalRects.push(current)
+
+  // 4. Vertical merge pass
+  finalRects.sort((a, b) => {
+    if (Math.abs(a.x - b.x) > EPS) return a.x - b.x
+    return a.y - b.y
+  })
+
+  const mergedVertical: XYRect[] = []
+  current = null
+  for (const r of finalRects) {
+    if (!current) {
+      current = r
+      continue
+    }
+    const sameX = Math.abs(current.x - r.x) < EPS
+    const sameWidth = Math.abs(current.width - r.width) < EPS
+    const touchesY = Math.abs(current.y + current.height - r.y) < EPS
+
+    if (sameX && sameWidth && touchesY) {
+      current.height += r.height
+    } else {
+      mergedVertical.push(current)
+      current = r
+    }
+  }
+  if (current) mergedVertical.push(current)
+
+  return mergedVertical
+}

package/lib/solvers/rectdiff/geometry/isPointInPolygon.ts

@@ -0,0 +1,20 @@
+/**
+ * Check if a point is inside a polygon using ray casting.
+ */
+export function isPointInPolygon(
+  p: { x: number; y: number },
+  polygon: Array<{ x: number; y: number }>,
+): boolean {
+  let inside = false
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i]!.x,
+      yi = polygon[i]!.y
+    const xj = polygon[j]!.x,
+      yj = polygon[j]!.y
+
+    const intersect =
+      yi > p.y !== yj > p.y && p.x < ((xj - xi) * (p.y - yi)) / (yj - yi) + xi
+    if (intersect) inside = !inside
+  }
+  return inside
+}

package/lib/solvers/rectdiff/types.ts

@@ -49,6 +49,7 @@ export type RectDiffState = {
     maxMultiLayerSpan: number | undefined
   }
   obstaclesByLayer: XYRect[][]
+  boardVoidRects: XYRect[] // newly added for viz
 
   // evolving
   phase: Phase

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/rectdiff",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/index.js",
   "scripts": {

package/pages/board-with-cutout.page.tsx

@@ -0,0 +1,11 @@
+import { GenericSolverDebugger } from "@tscircuit/solver-utils/react"
+import simpleRouteJson from "../test-assets/board-with-cutout.json"
+import { RectDiffSolver } from "../lib/solvers/RectDiffSolver"
+import { useMemo } from "react"
+import { SolverDebugger3d } from "../components/SolverDebugger3d"
+
+export default () => {
+  const solver = useMemo(() => new RectDiffSolver({ simpleRouteJson }), [])
+
+  return <SolverDebugger3d solver={solver} />
+}

package/test-assets/board-with-cutout.json

@@ -0,0 +1,148 @@
+{
+  "bounds": {
+    "minX": -9,
+    "maxX": 9,
+    "minY": -7,
+    "maxY": 7
+  },
+  "obstacles": [
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": {
+        "x": -5.51,
+        "y": -4
+      },
+      "width": 0.54,
+      "height": 0.64,
+      "connectedTo": [
+        "pcb_smtpad_0",
+        "connectivity_net11",
+        "source_port_0",
+        "pcb_smtpad_0",
+        "pcb_port_0"
+      ],
+      "zLayers": [0]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": {
+        "x": -4.49,
+        "y": -4
+      },
+      "width": 0.54,
+      "height": 0.64,
+      "connectedTo": [
+        "pcb_smtpad_1",
+        "connectivity_net0",
+        "source_trace_0",
+        "source_port_1",
+        "source_port_3",
+        "pcb_smtpad_1",
+        "pcb_port_1",
+        "pcb_smtpad_3",
+        "pcb_port_3"
+      ],
+      "zLayers": [0]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": {
+        "x": 4.49,
+        "y": -4
+      },
+      "width": 0.54,
+      "height": 0.64,
+      "connectedTo": [
+        "pcb_smtpad_2",
+        "connectivity_net12",
+        "source_port_2",
+        "pcb_smtpad_2",
+        "pcb_port_2"
+      ],
+      "zLayers": [0]
+    },
+    {
+      "type": "rect",
+      "layers": ["top"],
+      "center": {
+        "x": 5.51,
+        "y": -4
+      },
+      "width": 0.54,
+      "height": 0.64,
+      "connectedTo": [
+        "pcb_smtpad_3",
+        "connectivity_net0",
+        "source_trace_0",
+        "source_port_1",
+        "source_port_3",
+        "pcb_smtpad_1",
+        "pcb_port_1",
+        "pcb_smtpad_3",
+        "pcb_port_3"
+      ],
+      "zLayers": [0]
+    }
+  ],
+  "connections": [
+    {
+      "name": "source_trace_0",
+      "source_trace_id": "source_trace_0",
+      "pointsToConnect": [
+        {
+          "x": -4.49,
+          "y": -4,
+          "layer": "top",
+          "pointId": "pcb_port_1",
+          "pcb_port_id": "pcb_port_1"
+        },
+        {
+          "x": 5.51,
+          "y": -4,
+          "layer": "top",
+          "pointId": "pcb_port_3",
+          "pcb_port_id": "pcb_port_3"
+        }
+      ]
+    }
+  ],
+  "layerCount": 2,
+  "minTraceWidth": 0.15,
+  "outline": [
+    {
+      "x": -8,
+      "y": -6
+    },
+    {
+      "x": -2,
+      "y": -6
+    },
+    {
+      "x": -2,
+      "y": 2
+    },
+    {
+      "x": 2,
+      "y": 2
+    },
+    {
+      "x": 2,
+      "y": -6
+    },
+    {
+      "x": 8,
+      "y": -6
+    },
+    {
+      "x": 8,
+      "y": 6
+    },
+    {
+      "x": -8,
+      "y": 6
+    }
+  ]
+}

package/tests/__snapshots__/board-outline.snap.svg

@@ -0,0 +1,59 @@
+<svg width="640" height="640" viewBox="0 0 640 640" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><polyline data-points="-8,-6 -2,-6 -2,2 2,2 2,-6 8,-6 8,6 -8,6 -8,-6" data-type="line" data-label="outline" points="40,530 250,530 250,250.00000000000006 390,250.00000000000006 390,530 600,530 600,110.00000000000006 40,110.00000000000006 40,530" fill="none" stroke="#111827" stroke-width="0.35000000000000003"/></g><g><rect data-type="rect" data-label="obstacle" data-x="-5.51" data-y="-4" x="117.70000000000002" y="448.80000000000007" width="18.899999999999977" height="22.399999999999977" fill="#fee2e2" stroke="#ef4444" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="obstacle" data-x="-4.49" data-y="-4" x="153.4" y="448.80000000000007" width="18.899999999999977" height="22.399999999999977" fill="#fee2e2" stroke="#ef4444" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="obstacle" data-x="4.49" data-y="-4" x="467.70000000000005" y="448.80000000000007" width="18.899999999999977" height="22.399999999999977" fill="#fee2e2" stroke="#ef4444" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="obstacle" data-x="5.51" data-y="-4" x="503.4" y="448.80000000000007" width="18.899999999999977" height="22.399999999999977" fill="#fee2e2" stroke="#ef4444" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="void" data-x="0" data-y="-2" x="250" y="250.00000000000006" width="140" height="279.99999999999994" fill="rgba(0, 0, 0, 0.5)" stroke="none" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0,1" data-x="-5" data-y="1.1600000000000006" x="40" y="110" width="210" height="338.80000000000007" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0,1" data-x="5" data-y="1.1600000000000006" x="390" y="110" width="210" height="338.80000000000007" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0,1" data-x="0" data-y="4" x="250" y="110.00000000000006" width="140" height="140" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0,1" data-x="-5.48" data-y="-5.16" x="40" y="471.20000000000005" width="176.39999999999998" height="58.799999999999955" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0,1" data-x="5.48" data-y="-5.16" x="423.6" y="471.20000000000005" width="176.39999999999998" height="58.799999999999955" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0,1" data-x="-2.4800000000000004" data-y="-4.84" x="216.39999999999998" y="448.80000000000007" width="33.60000000000002" height="81.19999999999993" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0,1" data-x="2.4800000000000004" data-y="-4.84" x="390" y="448.80000000000007" width="33.60000000000002" height="81.19999999999993" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:1" data-x="-5.48" data-y="-4" x="40" y="448.80000000000007" width="176.39999999999998" height="22.399999999999977" fill="#fef3c7" stroke="#f59e0b" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:1" data-x="5.48" data-y="-4" x="423.6" y="448.80000000000007" width="176.39999999999998" height="22.399999999999977" fill="#fef3c7" stroke="#f59e0b" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0" data-x="6.890000000000001" data-y="-4" x="522.3" y="448.80000000000007" width="77.70000000000005" height="22.399999999999977" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0" data-x="-6.89" data-y="-4" x="40" y="448.80000000000007" width="77.70000000000002" height="22.399999999999977" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0" data-x="-5" data-y="-4" x="136.6" y="448.80000000000007" width="16.80000000000001" height="22.399999999999977" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0" data-x="-3.5900000000000003" data-y="-4" x="172.3" y="448.80000000000007" width="44.099999999999966" height="22.399999999999977" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0" data-x="3.5900000000000007" data-y="-4" x="423.6" y="448.80000000000007" width="44.10000000000002" height="22.399999999999977" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g><rect data-type="rect" data-label="free
+z:0" data-x="5" data-y="-4" x="486.6" y="448.80000000000007" width="16.799999999999955" height="22.399999999999977" fill="#dbeafe" stroke="#3b82f6" stroke-width="0.02857142857142857"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="640" 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', '640');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":35,"c":0,"e":320,"b":0,"d":-35,"f":320.00000000000006};
+                // 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>