@tscircuit/rectdiff 0.0.16 → 0.0.17

package/package.json

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

package/pages/gap-fill-h-shape-should-expand-node.page.tsx

@@ -0,0 +1,23 @@
+import fixture from "../test-assets/gap-fill-h-shape-should-expand-node.json"
+import { GapFillSolverPipeline } from "../lib/solvers/GapFillSolver/GapFillSolverPipeline"
+import type { CapacityMeshNode } from "../lib/types/capacity-mesh-types"
+import { useMemo } from "react"
+import { SolverDebugger3d } from "../components/SolverDebugger3d"
+
+export default () => {
+  const solver = useMemo(
+    () =>
+      new GapFillSolverPipeline({
+        meshNodes: fixture.meshNodes as CapacityMeshNode[],
+      }),
+    [],
+  )
+
+  return (
+    <SolverDebugger3d
+      solver={solver}
+      defaultShowOutput={true}
+      defaultShowRoot={true}
+    />
+  )
+}

package/test-assets/gap-fill-h-shape-should-expand-node.json

@@ -0,0 +1,72 @@
+{
+  "description": "H-shaped configuration - two vertical nodes with a horizontal connector in the middle",
+  "expectedBehavior": "Should detect segments on all exposed edges and expand into empty spaces around the H shape",
+  "meshNodes": [
+    {
+      "capacityMeshNodeId": "node-left-vertical",
+      "center": { "x": -3, "y": 0 },
+      "width": 1,
+      "height": 6,
+      "layer": "top",
+      "availableZ": [0]
+    },
+    {
+      "capacityMeshNodeId": "node-right-vertical",
+      "center": { "x": 3, "y": 0 },
+      "width": 1,
+      "height": 6,
+      "layer": "top",
+      "availableZ": [0]
+    },
+    {
+      "capacityMeshNodeId": "node-middle-horizontal",
+      "center": { "x": 0, "y": 0 },
+      "width": 2,
+      "height": 1,
+      "layer": "top",
+      "availableZ": [0]
+    }
+  ],
+  "expectedSegments": [
+    {
+      "description": "Left vertical - left edge",
+      "parentNodeId": "node-left-vertical",
+      "facingDirection": "x-"
+    },
+    {
+      "description": "Left vertical - top edge (above horizontal)",
+      "parentNodeId": "node-left-vertical",
+      "facingDirection": "y+"
+    },
+    {
+      "description": "Left vertical - bottom edge (below horizontal)",
+      "parentNodeId": "node-left-vertical",
+      "facingDirection": "y-"
+    },
+    {
+      "description": "Right vertical - right edge",
+      "parentNodeId": "node-right-vertical",
+      "facingDirection": "x+"
+    },
+    {
+      "description": "Right vertical - top edge (above horizontal)",
+      "parentNodeId": "node-right-vertical",
+      "facingDirection": "y+"
+    },
+    {
+      "description": "Right vertical - bottom edge (below horizontal)",
+      "parentNodeId": "node-right-vertical",
+      "facingDirection": "y-"
+    },
+    {
+      "description": "Middle horizontal - top edge",
+      "parentNodeId": "node-middle-horizontal",
+      "facingDirection": "y+"
+    },
+    {
+      "description": "Middle horizontal - bottom edge",
+      "parentNodeId": "node-middle-horizontal",
+      "facingDirection": "y-"
+    }
+  ]
+}

package/tests/__snapshots__/should-expand-node.snap.svg

@@ -0,0 +1,44 @@
+<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="white"/><g><rect data-type="rect" data-label="node" data-x="-3" data-y="0" x="86.66666666666666" y="40" width="66.66666666666666" height="400" fill="#dbeafe" stroke="black" stroke-width="0.015"/></g><g><rect data-type="rect" data-label="node" data-x="3" data-y="0" x="486.6666666666667" y="40" width="66.66666666666669" height="400" fill="#dbeafe" stroke="black" stroke-width="0.015"/></g><g><rect data-type="rect" data-label="node" data-x="0" data-y="0" x="253.33333333333331" y="206.66666666666666" width="133.33333333333337" height="66.66666666666666" fill="#dbeafe" stroke="black" stroke-width="0.015"/></g><g><rect data-type="rect" data-label="node" data-x="-1.75" data-y="0" x="153.33333333333331" y="40" width="100" height="400" fill="#dbeafe" stroke="black" stroke-width="0.015"/></g><g><rect data-type="rect" data-label="node" data-x="1.75" data-y="0" x="386.6666666666667" y="40" width="100" height="400" fill="#dbeafe" stroke="black" stroke-width="0.015"/></g><g id="crosshair" style="display: none"><line id="crosshair-h" y1="0" y2="480" 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', '480');
+
+                // Calculate real coordinates using inverse transformation
+                const matrix = {"a":66.66666666666667,"c":0,"e":320,"b":0,"d":-66.66666666666667,"f":240};
+                // 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/should-expand-node.test.ts

@@ -0,0 +1,34 @@
+import { expect, test } from "bun:test"
+import middleGapFixture from "test-assets/gap-fill-h-shape-should-expand-node.json"
+import { getSvgFromGraphicsObject } from "graphics-debug"
+import { GapFillSolverPipeline } from "lib/solvers/GapFillSolver/GapFillSolverPipeline"
+import type { CapacityMeshNode } from "lib/types/capacity-mesh-types"
+import { makeCapacityMeshNodeWithLayerInfo } from "./fixtures/makeCapacityMeshNodeWithLayerInfo"
+
+test("should expand capacityMeshNode to fill the gap", async () => {
+  const solver = new GapFillSolverPipeline({
+    meshNodes: middleGapFixture.meshNodes as CapacityMeshNode[],
+  })
+
+  solver.solve()
+
+  const { outputNodes } = solver.getOutput()
+
+  expect(outputNodes.length).toBeGreaterThanOrEqual(
+    middleGapFixture.meshNodes.length,
+  )
+
+  const finalGraphics = makeCapacityMeshNodeWithLayerInfo(outputNodes)
+  const svg = getSvgFromGraphicsObject(
+    { rects: finalGraphics.values().toArray().flat() },
+    {
+      svgWidth: 640,
+      svgHeight: 480,
+    },
+  )
+
+  // More means we have added new nodes to fill the gap
+  // expect(outputNodes.length).toEqual(3)
+
+  await expect(svg).toMatchSvgSnapshot(import.meta.path)
+})