New component SchematicBox

lib/components/base-components/PrimitiveComponent/PrimitiveComponent.ts

@@ -2,7 +2,10 @@ import type { LayoutBuilder } from "@tscircuit/layout"
 import type { AnySourceComponent, LayerRef } from "circuit-json"
 import Debug from "debug"
 import { InvalidProps } from "lib/errors/InvalidProps"
-import type { SchematicBoxDimensions } from "lib/utils/schematic/getAllDimensionsForSchematicBox"
+import type {
+  SchematicBoxComponentDimensions,
+  SchematicBoxDimensions,
+} from "lib/utils/schematic/getAllDimensionsForSchematicBox"
 import { isMatchingSelector } from "lib/utils/selector-matching"
 import { type SchSymbol, symbols } from "schematic-symbols"
 import {
@@ -780,6 +783,21 @@ export abstract class PrimitiveComponent<
     return null
   }
 
+  _getSchematicBoxComponentDimensions(): SchematicBoxComponentDimensions | null {
+    // Only valid if we don't have a schematic symbol
+    if (this.getSchematicSymbol()) return null
+    if (!this.config.shouldRenderAsSchematicBox) return null
+
+    const { _parsedProps: props } = this
+
+    const dimensions = {
+      schWidth: props.schWidth,
+      schHeight: props.schHeight,
+    }
+
+    return dimensions
+  }
+
   // TODO we shouldn't need to override this, errors can be rendered and handled
   // by the Renderable class, however, the Renderable class currently doesn't
   // have access to the database or cleanup

lib/components/base-components/Renderable.ts

@@ -20,8 +20,8 @@ export const orderedRenderPhases = [
   "SourceTraceRender",
   "SourceAddConnectivityMapKey",
   "SchematicComponentRender",
-  "SchematicPrimitiveRender",
   "SchematicPortRender",
+  "SchematicPrimitiveRender",
   "SchematicLayout",
   "SchematicTraceRender",
   "PcbComponentRender",

lib/components/index.ts

@@ -43,3 +43,4 @@ export { Transistor } from "./normal-components/Transistor"
 export { Mosfet } from "./normal-components/Mosfet"
 export { Switch } from "./normal-components/Switch"
 export { SchematicText } from "./primitive-components/SchematicText"
+export { SchematicBox } from "./primitive-components/SchematicBox"

lib/components/primitive-components/SchematicBox.ts

@@ -0,0 +1,89 @@
+import { PrimitiveComponent } from "../base-components/PrimitiveComponent"
+import { schematicBoxProps } from "@tscircuit/props"
+import type { Port } from "./Port"
+
+export class SchematicBox extends PrimitiveComponent<typeof schematicBoxProps> {
+  isSchematicPrimitive = true
+
+  get config() {
+    return {
+      componentName: "SchematicSection",
+      zodProps: schematicBoxProps,
+      shouldRenderAsSchematicBox: true,
+    }
+  }
+
+  doInitialSchematicPrimitiveRender(): void {
+    if (this.root?.schematicDisabled) return
+    const { db } = this.root!
+    const { _parsedProps: props } = this
+    let portsWithSelectors: Array<{ selector: string; port: Port }> = []
+    if (props.overlay) {
+      portsWithSelectors = props.overlay.map((selector) => ({
+        selector,
+        port:
+          (this.getSubcircuit().selectOne(selector, {
+            type: "port",
+          }) as Port) ?? null,
+      }))
+    }
+    const portsWithPosition = portsWithSelectors.map(({ port }) => ({
+      port,
+      position: port._getGlobalSchematicPositionAfterLayout(),
+      schematic_port_id: port.schematic_port_id!,
+      facingDirection: port.facingDirection,
+    }))
+    if (portsWithPosition.length > 0) {
+      const basePadding = 0.6
+      const xs = portsWithPosition.map((p) => p.position.x)
+      const ys = portsWithPosition.map((p) => p.position.y)
+
+      const minX = Math.min(...xs)
+      const maxX = Math.max(...xs)
+      const minY = Math.min(...ys)
+      const maxY = Math.max(...ys)
+
+      const rawWidth = maxX - minX
+      const rawHeight = maxY - minY
+
+      let widthPadding: number
+      let heightPadding: number
+
+      if (rawWidth > rawHeight) {
+        // Horizontal row → more vertical padding
+        widthPadding = basePadding / 2
+        heightPadding = basePadding
+      } else {
+        // Vertical column → more horizontal padding
+        widthPadding = basePadding
+        heightPadding = basePadding / 2
+      }
+
+      const width = rawWidth + widthPadding
+      const height = rawHeight + heightPadding
+
+      const x = minX - widthPadding / 2
+      const y = minY - heightPadding / 2
+
+      db.schematic_box.insert({
+        height,
+        width,
+        x,
+        y,
+        is_dashed: props.strokeStyle === "dashed",
+        schematic_component_id: "",
+      })
+
+      console.log({ rawWidth, rawHeight, width, height })
+
+      db.schematic_box.insert({
+        height,
+        width,
+        x,
+        y,
+        is_dashed: props.strokeStyle === "dashed",
+        schematic_component_id: "",
+      })
+    }
+  }
+}

lib/utils/schematic/getAllDimensionsForSchematicBox.ts

@@ -81,6 +81,10 @@ export interface SchematicBoxDimensions {
   getSizeIncludingPins(): { width: number; height: number }
 }
 
+export interface SchematicBoxComponentDimensions {
+  schWidth: number
+  schHeight: number
+}
 /**
  * Get the dimensions of a schematic box based on the provided parameters.
  *

package.json

@@ -24,26 +24,17 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
-    "@tscircuit/capacity-autorouter": "^0.0.66",
-    "@tscircuit/checks": "^0.0.46",
-    "@tscircuit/circuit-json-util": "^0.0.47",
     "@tscircuit/footprinter": "^0.0.159",
     "@tscircuit/import-snippet": "^0.0.4",
-    "@tscircuit/infgrid-ijump-astar": "^0.0.33",
     "@tscircuit/layout": "^0.0.28",
     "@tscircuit/log-soup": "^1.0.2",
-    "@tscircuit/math-utils": "^0.0.18",
-    "@tscircuit/props": "^0.0.184",
-    "@tscircuit/schematic-autolayout": "^0.0.6",
     "@types/bun": "latest",
     "@types/debug": "^4.1.12",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
     "@types/react-reconciler": "^0.28.9",
     "bun-match-svg": "0.0.8",
     "chokidar-cli": "^3.0.0",
-    "circuit-json": "^0.0.180",
-    "circuit-json-to-connectivity-map": "^0.0.22",
     "circuit-json-to-simple-3d": "^0.0.2",
     "circuit-to-svg": "^0.0.127",
     "concurrently": "^9.1.2",
@@ -56,9 +47,18 @@
     "pkg-pr-new": "^0.0.37",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "schematic-symbols": "^0.0.139",
     "ts-expect": "^1.3.0",
-    "tsup": "^8.2.4"
+    "tsup": "^8.2.4",
+    "@tscircuit/capacity-autorouter": "^0.0.66",
+    "@tscircuit/checks": "^0.0.46",
+    "@tscircuit/circuit-json-util": "^0.0.47",
+    "@tscircuit/infgrid-ijump-astar": "^0.0.33",
+    "@tscircuit/math-utils": "^0.0.18",
+    "@tscircuit/props": "^0.0.186",
+    "@tscircuit/schematic-autolayout": "^0.0.6",
+    "circuit-json-to-connectivity-map": "^0.0.22",
+    "schematic-symbols": "^0.0.139",
+    "circuit-json": "^0.0.185"
   },
   "peerDependencies": {
     "typescript": "^5.0.0",

tests/examples/example24-schematic-box-component.test.tsx

@@ -0,0 +1,27 @@
+import { expect, it } from "bun:test"
+import { InvalidProps } from "lib/errors/InvalidProps"
+import "lib/register-catalogue"
+import { getTestFixture } from "tests/fixtures/get-test-fixture"
+
+it("Chip with pinrow footprint", async () => {
+  const { circuit } = getTestFixture()
+
+  circuit.add(
+    <board width="10mm" height="10mm">
+      <chip name="U1" footprint={"soic8"} />
+      <chip name="U2" footprint={"soic8"} schX={2} />
+      <schematicbox
+        height={0}
+        width={2}
+        overlay={[".U1 > .pin1", ".U1 > .pin2", ".U1 > .pin3", ".U1 > .pin4"]}
+        schX={0}
+        schY={0}
+      />
+    </board>,
+  )
+
+  circuit.render()
+  console.log(
+    circuit.getCircuitJson().find((el) => el.type === "schematic_box"),
+  )
+})