circuit-json-to-tscircuit 0.0.13 → 0.0.14

package/dist/{chunk-YX563LGB.js → chunk-544RXIHZ.js}

@@ -249,6 +249,10 @@ import { su as su2 } from "@tscircuit/soup-util";
 var generateSymbolTsx = (circuitJson) => {
   const schematicArcs = su2(circuitJson).schematic_arc.list();
   const schematicLines = su2(circuitJson).schematic_line.list();
+  const schematicPaths = su2(circuitJson).schematic_path.list();
+  const schematicTexts = su2(circuitJson).schematic_text.list();
+  const schematicCircles = su2(circuitJson).schematic_circle.list();
+  const schematicBoxes = su2(circuitJson).schematic_box.list();
   const elementStrings = [];
   for (const arc of schematicArcs) {
     const center = arc.center ?? { x: 0, y: 0 };
@@ -284,6 +288,49 @@ var generateSymbolTsx = (circuitJson) => {
       `<schematicline x1={${x1}} y1={${y1}} x2={${x2}} y2={${y2}} strokeWidth={${strokeWidth}} color="${color}" isDashed={${isDashed}}/>`
     );
   }
+  for (const box of schematicBoxes) {
+    const x = box.x ?? 0;
+    const y = box.y ?? 0;
+    const width = box.width ?? 0;
+    const height = box.height ?? 0;
+    const isDashed = box.is_dashed ?? false;
+    elementStrings.push(
+      `<schematicbox center={{ x: ${x}, y: ${y} }} width={${width}} height={${height}} isDashed={${isDashed}}/>`
+    );
+  }
+  for (const path of schematicPaths) {
+    const points = path.points ?? [];
+    const fillColor = path.fill_color ?? "red";
+    const isFilled = path.is_filled ?? false;
+    elementStrings.push(
+      `<schematicpath points={${JSON.stringify(points)}} strokeColor="${fillColor}" fillColor="${fillColor}" isFilled={${isFilled}}/>`
+    );
+  }
+  for (const text of schematicTexts) {
+    const x = text.position?.x ?? 0;
+    const y = text.position?.y ?? 0;
+    const rawText = String(text.text ?? "");
+    const escapedText = rawText.replace(/"/g, '\\"');
+    const anchorAlignment = text.anchor ?? "center";
+    const fontSize = text.font_size ?? 0.1;
+    const color = text.color ?? "black";
+    const rotation = text.rotation ?? 0;
+    elementStrings.push(
+      `<schematictext text="${escapedText}" x={${x}} y={${y}} anchorAlignment="${anchorAlignment}" fontSize={${fontSize}} color="${color}" rotation={${rotation}} />`
+    );
+  }
+  for (const circle of schematicCircles) {
+    const x = circle.center?.x ?? 0;
+    const y = circle.center?.y ?? 0;
+    const radius = circle.radius ?? 0;
+    const strokeWidth = circle.stroke_width ?? 0.05;
+    const color = circle.color ?? "black";
+    const isFilled = circle.is_filled ?? false;
+    const isDashed = circle.is_dashed ?? false;
+    elementStrings.push(
+      `<schematiccircle center={{ x: ${x}, y: ${y} }} radius={${radius}} strokeWidth={${strokeWidth}} color="${color}" isFilled={${isFilled}} isDashed={${isDashed}} />`
+    );
+  }
   if (elementStrings.length === 0) {
     return null;
   }

package/dist/cli/main.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-YX563LGB.js";
+} from "../chunk-544RXIHZ.js";
 
 // cli/main.ts
 import { Command } from "commander";
@@ -16,7 +16,7 @@ var package_default = {
     "./cli": "./dist/cli/main.js"
   },
   type: "module",
-  version: "0.0.12",
+  version: "0.0.13",
   scripts: {
     build: "tsup-node lib/index.ts cli/main.ts --format esm --dts",
     test: "bun test",

package/dist/lib/index.js

@@ -1,6 +1,6 @@
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-YX563LGB.js";
+} from "../chunk-544RXIHZ.js";
 export {
   convertCircuitJsonToTscircuit
 };

package/lib/generate-symbol-tsx.ts

@@ -6,7 +6,10 @@ export const generateSymbolTsx = (
 ): string | null => {
   const schematicArcs = su(circuitJson).schematic_arc.list()
   const schematicLines = su(circuitJson).schematic_line.list()
-
+  const schematicPaths = su(circuitJson).schematic_path.list()
+  const schematicTexts = su(circuitJson).schematic_text.list()
+  const schematicCircles = su(circuitJson).schematic_circle.list()
+  const schematicBoxes = su(circuitJson).schematic_box.list()
   const elementStrings: string[] = []
 
   for (const arc of schematicArcs) {
@@ -47,6 +50,57 @@ export const generateSymbolTsx = (
     )
   }
 
+  for (const box of schematicBoxes) {
+    const x = box.x ?? 0
+    const y = box.y ?? 0
+    const width = box.width ?? 0
+    const height = box.height ?? 0
+    const isDashed = box.is_dashed ?? false
+
+    elementStrings.push(
+      `<schematicbox center={{ x: ${x}, y: ${y} }} width={${width}} height={${height}} isDashed={${isDashed}}/>`,
+    )
+  }
+
+  for (const path of schematicPaths) {
+    const points = path.points ?? []
+    const fillColor = path.fill_color ?? "red"
+    const isFilled = path.is_filled ?? false
+
+    elementStrings.push(
+      `<schematicpath points={${JSON.stringify(points)}} strokeColor="${fillColor}" fillColor="${fillColor}" isFilled={${isFilled}}/>`,
+    )
+  }
+
+  for (const text of schematicTexts) {
+    const x = text.position?.x ?? 0
+    const y = text.position?.y ?? 0
+    const rawText = String(text.text ?? "")
+    const escapedText = rawText.replace(/"/g, '\\"')
+    const anchorAlignment = text.anchor ?? "center"
+    const fontSize = text.font_size ?? 0.1
+    const color = text.color ?? "black"
+    const rotation = text.rotation ?? 0
+
+    elementStrings.push(
+      `<schematictext text="${escapedText}" x={${x}} y={${y}} anchorAlignment="${anchorAlignment}" fontSize={${fontSize}} color="${color}" rotation={${rotation}} />`,
+    )
+  }
+
+  for (const circle of schematicCircles) {
+    const x = circle.center?.x ?? 0
+    const y = circle.center?.y ?? 0
+    const radius = circle.radius ?? 0
+    const strokeWidth = circle.stroke_width ?? 0.05
+    const color = circle.color ?? "black"
+    const isFilled = circle.is_filled ?? false
+    const isDashed = circle.is_dashed ?? false
+
+    elementStrings.push(
+      `<schematiccircle center={{ x: ${x}, y: ${y} }} radius={${radius}} strokeWidth={${strokeWidth}} color="${color}" isFilled={${isFilled}} isDashed={${isDashed}} />`,
+    )
+  }
+
   if (elementStrings.length === 0) {
     return null
   }

package/package.json

@@ -6,7 +6,7 @@
     "./cli": "./dist/cli/main.js"
   },
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "scripts": {
     "build": "tsup-node lib/index.ts cli/main.ts --format esm --dts",
     "test": "bun test",

package/tests/__snapshots__/test7-support-schematic-elements-comprehensive-schematic-symbol.snap.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" style="background-color: rgb(245, 241, 237)" data-real-to-screen-transform="matrix(70.5052878966,0,0,-70.5052878966,493.8895417156,317.9788484136)" data-software-used-string="@tscircuit/core@0.0.1090"><style>
+              .boundary { fill: rgb(245, 241, 237); }
+              .schematic-boundary { fill: none; stroke: #fff; }
+              .component { fill: none; stroke: rgb(132, 0, 0); }
+              .chip { fill: rgb(255, 255, 194); stroke: rgb(132, 0, 0); }
+              .component-pin { fill: none; stroke: rgb(132, 0, 0); }
+              /* Basic per-trace hover fallback */
+              .trace:hover {
+                filter: invert(1);
+              }
+              .trace:hover .trace-crossing-outline {
+                opacity: 0;
+              }
+              .trace:hover .trace-junction {
+                filter: invert(1);
+              }
+              /* Net-hover highlighting: when a trace or its overlays are hovered,
+                 invert color for all traces (base + overlays) sharing the same
+                 subcircuit connectivity key. Also hide crossing outline during hover. */
+              
+              .text { font-family: sans-serif; fill: rgb(0, 150, 0); }
+              .pin-number { fill: rgb(169, 0, 0); }
+              .port-label { fill: rgb(0, 100, 100); }
+              .component-name { fill: rgb(0, 100, 100); }
+            </style><rect class="boundary" x="0" y="0" width="1200" height="600"/><line x1="634.9001175088" y1="317.9788484136" x2="775.910693302" y2="317.9788484136" stroke="black" stroke-width="3.5252643948299998" data-schematic-line-id="schematic_line_0" data-schematic-component-id="schematic_component_0"/><circle cx="705.4054054054" cy="529.4947121033999" r="35.2526439483" fill="green" stroke="green" stroke-width="3.5252643948299998" stroke-dasharray="10.57579318449" data-schematic-circle-id="schematic_circle_0" data-schematic-component-id="schematic_component_0"/><path d="M 564.3948296121999 317.9788484136 A 70.5052878966 70.5052878966 0 0 0 423.384253819 317.9788484136" fill="none" stroke="black" stroke-width="3.5252643948299998" data-schematic-arc-id="schematic_arc_0" data-schematic-component-id="schematic_component_0"/><path d="M 705.4054054054 106.46298472380005 L 775.910693302 35.95769682720004" stroke="blue" stroke-width="1.410105757932" fill="none" stroke-linecap="round" stroke-linejoin="round" data-schematic-component-id="schematic_component_0"/><text x="493.8895417156" y="317.9788484136" fill="red" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="14.101057579319999px" transform="rotate(0, 493.8895417156, 317.9788484136)">U1</text><rect class="schematic-box" x="423.384253819" y="247.473560517" width="141.01057579319996" height="141.01057579320002" stroke-width="1.410105757932px" stroke="rgb(132, 0, 0)" fill="transparent"/></svg>

package/tests/test7-support-schematic-elements.test.tsx

@@ -0,0 +1,123 @@
+import { test, expect } from "bun:test"
+import { convertCircuitJsonToTscircuit } from "lib/index"
+import type { AnyCircuitElement } from "circuit-json"
+import { runTscircuitCode } from "tscircuit"
+import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg"
+
+const circuitJson: AnyCircuitElement[] = [
+  {
+    type: "schematic_arc",
+    center: { x: 0, y: 0 },
+    schematic_arc_id: "schematic_arc_id_1",
+    radius: 1,
+    schematic_component_id: "schematic_component_id_1",
+    start_angle_degrees: 0,
+    end_angle_degrees: 180,
+    stroke_width: 0.05,
+    color: "black",
+    is_dashed: false,
+    direction: "counterclockwise",
+  },
+  {
+    type: "schematic_line",
+    x1: 2,
+    schematic_line_id: "schematic_line_id_1",
+    schematic_component_id: "schematic_component_id_1",
+    y1: 0,
+    x2: 4,
+    y2: 0,
+    stroke_width: 0.05,
+    color: "black",
+    is_dashed: false,
+  },
+  {
+    type: "schematic_box",
+    schematic_component_id: "schematic_component_id_1",
+    x: 0,
+    y: 3,
+    width: 2,
+    height: 2,
+    is_dashed: true,
+  },
+  {
+    type: "schematic_path",
+    schematic_path_id: "schematic_path_id_1",
+    points: [
+      { x: 3, y: 3 },
+      { x: 4, y: 4 },
+    ],
+    fill_color: "blue",
+  },
+  {
+    type: "schematic_text",
+    schematic_text_id: "schematic_text_id_1",
+    text: "U1",
+    position: { x: 0, y: -3 },
+    anchor: "center",
+    font_size: 0.2,
+    color: "red",
+    rotation: 45,
+  },
+  {
+    type: "schematic_circle",
+    center: { x: 3, y: -3 },
+    schematic_circle_id: "schematic_circle_id_1",
+    radius: 0.5,
+    stroke_width: 0.05,
+    color: "green",
+    is_filled: true,
+    is_dashed: true,
+  },
+]
+
+test("test7 comprehensive schematic symbol support", async () => {
+  const tscircuit = convertCircuitJsonToTscircuit(circuitJson, {
+    componentName: "U1",
+  })
+
+  expect(tscircuit).toMatchInlineSnapshot(`
+"import { type ChipProps } from "tscircuit"
+export const U1 = (props: ChipProps) => (
+  <chip
+    symbol={<symbol>
+  <schematicarc
+    center={{ x: 0, y: 0 }}
+    radius={1}
+    startAngleDegrees={0}
+    endAngleDegrees={180}
+    strokeWidth={0.05}
+    color="black"
+    isDashed={false}
+    direction="counterclockwise"
+  />
+  <schematicline x1={2} y1={0} x2={4} y2={0} strokeWidth={0.05} color="black" isDashed={false}/>
+  <schematicbox center={{ x: 0, y: 3 }} width={2} height={2} isDashed={true}/>
+  <schematicpath points={[{"x":3,"y":3},{"x":4,"y":4}]} strokeColor="blue" fillColor="blue" isFilled={false}/>
+  <schematictext text="U1" x={0} y={-3} anchorAlignment="center" fontSize={0.2} color="red" rotation={45} />
+  <schematiccircle center={{ x: 3, y: -3 }} radius={0.5} strokeWidth={0.05} color="green" isFilled={true} isDashed={true} />
+</symbol>}
+    {...props}
+  />
+)"
+`)
+  const result = await runTscircuitCode(tscircuit)
+
+  expect(Array.isArray(result)).toBe(true)
+  expect(result).not.toHaveLength(0)
+}, 15000)
+
+test("test7 comprehensive schematic symbol support svg", async () => {
+  const tscircuit = convertCircuitJsonToTscircuit(circuitJson, {
+    componentName: "U1",
+  })
+
+  const result = await runTscircuitCode(tscircuit)
+
+  const schematicSvg = convertCircuitJsonToSchematicSvg(
+    result as AnyCircuitElement[],
+  )
+  await expect(schematicSvg).toMatchSvgSnapshot(
+    import.meta.path,
+    "comprehensive-schematic-symbol",
+  )
+})

package/tests/test7-support-schematic-arc.test.tsx

@@ -1,59 +0,0 @@
-import { test, expect } from "bun:test"
-import { convertCircuitJsonToTscircuit } from "lib/index"
-import type { AnyCircuitElement } from "circuit-json"
-
-test("test7 schematic arc and line inline snapshot", async () => {
-  const circuitJson: AnyCircuitElement[] = [
-    {
-      type: "schematic_arc",
-      center: { x: 0, y: 0 },
-      radius: 1,
-      start_angle_degrees: 0,
-      end_angle_degrees: 180,
-      stroke_width: 0.05,
-      color: "black",
-      is_dashed: false,
-      schematic_component_id: "schematic_component_id_1",
-      direction: "counterclockwise",
-      schematic_arc_id: "schematic_arc_id_1",
-    },
-    {
-      type: "schematic_line",
-      x1: -1,
-      y1: 0,
-      x2: 1,
-      y2: 0,
-      stroke_width: 0.05,
-      schematic_line_id: "schematic_line_id_1",
-      schematic_component_id: "schematic_component_id_1",
-      color: "black",
-      is_dashed: false,
-    },
-  ]
-
-  const tscircuit = convertCircuitJsonToTscircuit(circuitJson, {
-    componentName: "U1",
-  })
-
-  expect(tscircuit).toMatchInlineSnapshot(`
-      "import { type ChipProps } from "tscircuit"
-      export const U1 = (props: ChipProps) => (
-        <chip
-          symbol={<symbol>
-        <schematicarc
-          center={{ x: 0, y: 0 }}
-          radius={1}
-          startAngleDegrees={0}
-          endAngleDegrees={180}
-          strokeWidth={0.05}
-          color="black"
-          isDashed={false}
-          direction="counterclockwise"
-        />
-        <schematicline x1={-1} y1={0} x2={1} y2={0} strokeWidth={0.05} color="black" isDashed={false}/>
-      </symbol>}
-          {...props}
-        />
-      )"
-    `)
-})