Merge pull request #151 from tscircuit/schbox

add support for computing schematic transform and placing on svg as data

lib/sch/convert-circuit-json-to-schematic-svg.ts

@@ -10,6 +10,7 @@ import {
   fromTriangles,
   type Matrix,
   fromTwoMovingPoints,
+  toSVG,
 } from "transformation-matrix"
 import { drawSchematicGrid } from "./draw-schematic-grid"
 import { drawSchematicLabeledPoints } from "./draw-schematic-labeled-points"
@@ -161,6 +162,7 @@ export function convertCircuitJsonToSchematicSvg(
       width: svgWidth.toString(),
       height: svgHeight.toString(),
       style: `background-color: ${colorMap.schematic.background}`,
+      "data-real-to-screen-transform": toSVG(transform),
     },
     children: [
       // Add styles

lib/sch/get-schematic-bounds-from-circuit-json.ts

@@ -41,7 +41,13 @@ export function getSchematicBoundsFromCircuitJson(
     } else if (item.type === "schematic_text") {
       updateBounds(item.position, { width: 0.1, height: 0.1 }, 0)
     } else if (item.type === "schematic_voltage_probe") {
-      updateBounds(item.position, { width: 0.2, height: 0.4 }, 0) // width and hight of the probe (Arrow)
+      updateBounds(item.position, { width: 0.2, height: 0.4 }, 0) // width and height of the probe (Arrow)
+    } else if (item.type === "schematic_box") {
+      updateBounds(
+        { x: item.x, y: item.y },
+        { width: item.width, height: item.height },
+        0,
+      )
     }
   }
 

package.json

@@ -52,6 +52,7 @@
     "@tscircuit/routing": "^1.3.5",
     "@tscircuit/soup-util": "^0.0.41",
     "@types/node": "^22.5.5",
+    "bun-types": "^1.1.40",
     "svgson": "^5.3.1",
     "transformation-matrix": "^2.16.1"
   }

tests/sch/transform-attribute.test.tsx

@@ -0,0 +1,26 @@
+import { test, expect } from "bun:test"
+import { convertCircuitJsonToSchematicSvg } from "lib"
+
+test("svg should have data-real-to-screen-transform attribute", () => {
+  const svg = convertCircuitJsonToSchematicSvg([
+    {
+      type: "schematic_box",
+      x: 0,
+      y: 0,
+      width: 10,
+      height: 10,
+      schematic_component_id: "1",
+    },
+  ])
+
+  // Check that the SVG contains the data-real-to-screen-transform attribute
+  expect(svg).toContain('data-real-to-screen-transform="')
+
+  // Extract the transform value and verify it's a valid matrix string
+  const match = svg.match(/data-real-to-screen-transform="([^"]+)"/)
+
+  // @ts-ignore
+  expect(match[1]).toMatchInlineSnapshot(
+    `"matrix(54.5454545455,0,0,-54.5454545455,600,300)"`,
+  )
+})