circuit-json-to-tscircuit 0.0.34 → 0.0.35

package/dist/{chunk-CQJKDULD.js → chunk-WC7XDXUV.js}

@@ -553,6 +553,7 @@ var generateFootprintTsx = (circuitJson) => {
 
 // lib/generate-symbol-tsx.ts
 import { su as su12 } from "@tscircuit/soup-util";
+var escapeJsxText2 = (text) => text.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
 var generateSymbolTsx = (circuitJson) => {
   const schematicArcs = su12(circuitJson).schematic_arc.list();
   const schematicLines = su12(circuitJson).schematic_line.list();
@@ -561,6 +562,8 @@ var generateSymbolTsx = (circuitJson) => {
   const schematicCircles = su12(circuitJson).schematic_circle.list();
   const schematicBoxes = su12(circuitJson).schematic_box.list();
   const schematicRects = su12(circuitJson).schematic_rect.list();
+  const schematicTables = su12(circuitJson).schematic_table.list();
+  const schematicTableCells = su12(circuitJson).schematic_table_cell.list();
   const elementStrings = [];
   for (const arc of schematicArcs) {
     const center = arc.center ?? { x: 0, y: 0 };
@@ -659,7 +662,7 @@ var generateSymbolTsx = (circuitJson) => {
     const x = text.position?.x ?? 0;
     const y = text.position?.y ?? 0;
     const rawText = String(text.text ?? "");
-    const escapedText = rawText.replace(/"/g, '\\"');
+    const escapedText = escapeJsxText2(rawText);
     const anchorAlignment = text.anchor ?? "center";
     const fontSize = text.font_size ?? 0.1;
     const color = text.color ?? "black";
@@ -680,6 +683,79 @@ var generateSymbolTsx = (circuitJson) => {
       `<schematiccircle center={{ x: ${x}, y: ${y} }} radius={${radius}} strokeWidth={${strokeWidth}} color="${color}" isFilled={${isFilled}} isDashed={${isDashed}} />`
     );
   }
+  for (const table of schematicTables) {
+    const tableCells = schematicTableCells.filter((cell) => cell.schematic_table_id === table.schematic_table_id).sort((a, b) => {
+      if (a.start_row_index !== b.start_row_index) {
+        return a.start_row_index - b.start_row_index;
+      }
+      return a.start_column_index - b.start_column_index;
+    });
+    const rowCount = table.row_heights.length;
+    const rowStrings = [];
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+      const rowHeight = table.row_heights[rowIndex];
+      const rowCells = tableCells.filter(
+        (cell) => cell.start_row_index === rowIndex
+      );
+      const cellStrings = [];
+      for (const cell of rowCells) {
+        const rowSpan = cell.end_row_index - cell.start_row_index + 1;
+        const colSpan = cell.end_column_index - cell.start_column_index + 1;
+        const columnWidths = table.column_widths.slice(
+          cell.start_column_index,
+          cell.end_column_index + 1
+        );
+        const averageColumnWidth = columnWidths.length > 0 ? columnWidths.reduce((sum, width) => sum + width, 0) / columnWidths.length : cell.width / Math.max(colSpan, 1);
+        const props = [];
+        const text = cell.text ?? "";
+        if (text.length > 0) {
+          props.push(`text="${escapeJsxText2(text)}"`);
+        }
+        if (cell.horizontal_align) {
+          props.push(`horizontalAlign="${cell.horizontal_align}"`);
+        }
+        if (cell.vertical_align) {
+          props.push(`verticalAlign="${cell.vertical_align}"`);
+        }
+        if (cell.font_size != null) {
+          props.push(`fontSize={${cell.font_size}}`);
+        }
+        if (rowSpan !== 1) {
+          props.push(`rowSpan={${rowSpan}}`);
+        }
+        if (colSpan !== 1) {
+          props.push(`colSpan={${colSpan}}`);
+        }
+        if (averageColumnWidth > 0) {
+          props.push(`width={${averageColumnWidth}}`);
+        }
+        cellStrings.push(`<schematiccell ${props.join(" ")} />`);
+      }
+      rowStrings.push(
+        `<schematicrow height={${rowHeight}}>
+    ${cellStrings.join("\n    ")}
+  </schematicrow>`
+      );
+    }
+    const tableProps = [
+      `schX={${table.anchor_position.x}}`,
+      `schY={${table.anchor_position.y}}`
+    ];
+    if (table.cell_padding != null) {
+      tableProps.push(`cellPadding={${table.cell_padding}}`);
+    }
+    if (table.border_width != null) {
+      tableProps.push(`borderWidth={${table.border_width}}`);
+    }
+    if (table.anchor) {
+      tableProps.push(`anchor="${table.anchor}"`);
+    }
+    elementStrings.push(
+      `<schematictable ${tableProps.join(" ")}>
+  ${rowStrings.map((s) => s.split("\n").join("\n  ")).join("\n  ")}
+</schematictable>`
+    );
+  }
   if (elementStrings.length === 0) {
     return null;
   }

package/dist/cli/main.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-CQJKDULD.js";
+} from "../chunk-WC7XDXUV.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.33",
+  version: "0.0.34",
   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-CQJKDULD.js";
+} from "../chunk-WC7XDXUV.js";
 export {
   convertCircuitJsonToTscircuit
 };

package/lib/generate-symbol-tsx.ts

@@ -1,6 +1,9 @@
 import type { AnyCircuitElement } from "circuit-json"
 import { su } from "@tscircuit/soup-util"
 
+const escapeJsxText = (text: string) =>
+  text.replace(/\\/g, "\\\\").replace(/"/g, '\\"')
+
 export const generateSymbolTsx = (
   circuitJson: AnyCircuitElement[],
 ): string | null => {
@@ -11,6 +14,8 @@ export const generateSymbolTsx = (
   const schematicCircles = su(circuitJson).schematic_circle.list()
   const schematicBoxes = su(circuitJson).schematic_box.list()
   const schematicRects = su(circuitJson).schematic_rect.list()
+  const schematicTables = su(circuitJson).schematic_table.list()
+  const schematicTableCells = su(circuitJson).schematic_table_cell.list()
   const elementStrings: string[] = []
 
   for (const arc of schematicArcs) {
@@ -126,7 +131,7 @@ export const generateSymbolTsx = (
     const x = text.position?.x ?? 0
     const y = text.position?.y ?? 0
     const rawText = String(text.text ?? "")
-    const escapedText = rawText.replace(/"/g, '\\"')
+    const escapedText = escapeJsxText(rawText)
     const anchorAlignment = text.anchor ?? "center"
     const fontSize = text.font_size ?? 0.1
     const color = text.color ?? "black"
@@ -151,6 +156,95 @@ export const generateSymbolTsx = (
     )
   }
 
+  for (const table of schematicTables) {
+    const tableCells = schematicTableCells
+      .filter((cell) => cell.schematic_table_id === table.schematic_table_id)
+      .sort((a, b) => {
+        if (a.start_row_index !== b.start_row_index) {
+          return a.start_row_index - b.start_row_index
+        }
+        return a.start_column_index - b.start_column_index
+      })
+
+    const rowCount = table.row_heights.length
+    const rowStrings: string[] = []
+
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+      const rowHeight = table.row_heights[rowIndex]
+      const rowCells = tableCells.filter(
+        (cell) => cell.start_row_index === rowIndex,
+      )
+      const cellStrings: string[] = []
+
+      for (const cell of rowCells) {
+        const rowSpan = cell.end_row_index - cell.start_row_index + 1
+        const colSpan = cell.end_column_index - cell.start_column_index + 1
+        const columnWidths = table.column_widths.slice(
+          cell.start_column_index,
+          cell.end_column_index + 1,
+        )
+        const averageColumnWidth =
+          columnWidths.length > 0
+            ? columnWidths.reduce((sum, width) => sum + width, 0) /
+              columnWidths.length
+            : cell.width / Math.max(colSpan, 1)
+
+        const props: string[] = []
+        const text = cell.text ?? ""
+
+        if (text.length > 0) {
+          props.push(`text="${escapeJsxText(text)}"`)
+        }
+        if (cell.horizontal_align) {
+          props.push(`horizontalAlign="${cell.horizontal_align}"`)
+        }
+        if (cell.vertical_align) {
+          props.push(`verticalAlign="${cell.vertical_align}"`)
+        }
+        if (cell.font_size != null) {
+          props.push(`fontSize={${cell.font_size}}`)
+        }
+        if (rowSpan !== 1) {
+          props.push(`rowSpan={${rowSpan}}`)
+        }
+        if (colSpan !== 1) {
+          props.push(`colSpan={${colSpan}}`)
+        }
+        if (averageColumnWidth > 0) {
+          props.push(`width={${averageColumnWidth}}`)
+        }
+
+        cellStrings.push(`<schematiccell ${props.join(" ")} />`)
+      }
+
+      rowStrings.push(
+        `<schematicrow height={${rowHeight}}>
+    ${cellStrings.join("\n    ")}
+  </schematicrow>`,
+      )
+    }
+
+    const tableProps = [
+      `schX={${table.anchor_position.x}}`,
+      `schY={${table.anchor_position.y}}`,
+    ]
+    if (table.cell_padding != null) {
+      tableProps.push(`cellPadding={${table.cell_padding}}`)
+    }
+    if (table.border_width != null) {
+      tableProps.push(`borderWidth={${table.border_width}}`)
+    }
+    if (table.anchor) {
+      tableProps.push(`anchor="${table.anchor}"`)
+    }
+
+    elementStrings.push(
+      `<schematictable ${tableProps.join(" ")}>
+  ${rowStrings.map((s) => s.split("\n").join("\n  ")).join("\n  ")}
+</schematictable>`,
+    )
+  }
+
   if (elementStrings.length === 0) {
     return null
   }

package/package.json

@@ -6,7 +6,7 @@
     "./cli": "./dist/cli/main.js"
   },
   "type": "module",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "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

@@ -1,4 +1,4 @@
-<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.0512524814,0,0,-70.0512524814,599.6497437376,319.7949900745)" data-software-used-string="@tscircuit/core@0.0.1322"><style>
+<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(47.7510932281,0,0,-47.7510932281,588.062226693,265.7423474031)" data-software-used-string="@tscircuit/core@0.0.1306"><style>
               .boundary { fill: rgb(245, 241, 237); }
               .schematic-boundary { fill: none; stroke: #fff; }
               .component { fill: none; stroke: rgb(132, 0, 0); }
@@ -22,4 +22,4 @@
               .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"/><g data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0"><path d="M 669.700996219 319.7949900745 A 70.0512524814 70.0512524814 0 0 0 529.5984912562001 319.7949900745" fill="none" stroke="black" stroke-width="3.5025626240700003" data-schematic-arc-id="schematic_arc_0" data-schematic-component-id="schematic_component_0"/><line x1="739.7522487004001" y1="319.7949900745" x2="879.8547536632" y2="319.7949900745" stroke="black" stroke-width="3.5025626240700003" data-schematic-line-id="schematic_line_0" data-schematic-component-id="schematic_component_0"/><rect x="319.44473381200004" y="74.6156063896" width="140.1025049628" height="70.0512524814" fill="purple" stroke="purple" stroke-width="3.5025626240700003" stroke-dasharray="10.507687872210001" transform="rotate(30 389.49598629340005 109.64123263030001)" data-schematic-rect-id="schematic_rect_0" data-schematic-component-id="schematic_component_0"/><path d="M 809.8035011818 109.64123263030001 L 879.8547536632 39.5899801489" stroke="blue" stroke-width="1.401025049628" fill="none" stroke-linecap="round" stroke-linejoin="round" data-schematic-component-id="schematic_component_0"/><circle cx="809.8035011818" cy="529.9487475187" r="35.0256262407" fill="green" stroke="green" stroke-width="3.5025626240700003" stroke-dasharray="10.507687872210001" data-schematic-circle-id="schematic_circle_0" data-schematic-component-id="schematic_component_0"/></g><text x="599.6497437376" y="319.7949900745" fill="red" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="14.010250496280001px" transform="rotate(0, 599.6497437376, 319.7949900745)">U1</text><rect class="schematic-box" x="529.5984912562001" y="249.74373759309998" width="140.1025049627999" height="140.10250496280003" stroke-width="1.401025049628px" stroke="rgb(132, 0, 0)" fill="transparent"/></svg>
+            </style><rect class="boundary" x="0" y="0" width="1200" height="600"/><g data-circuit-json-type="schematic_component" data-schematic-component-id="schematic_component_0"><path d="M 349.30676055249995 74.7379744907 A 47.7510932281 47.7510932281 0 0 0 253.80457409629997 74.7379744907" fill="none" stroke="black" stroke-width="2.387554661405" data-schematic-arc-id="schematic_arc_0" data-schematic-component-id="schematic_component_0"/><line x1="731.3155063772999" y1="74.7379744907" x2="874.5687860615999" y2="74.7379744907" stroke="black" stroke-width="2.387554661405" data-schematic-line-id="schematic_line_0" data-schematic-component-id="schematic_component_0"/><rect x="540.3111334649" y="50.86242787665" width="95.5021864562" height="47.7510932281" fill="purple" stroke="purple" stroke-width="2.387554661405" stroke-dasharray="7.1626639842149995" transform="rotate(30 588.062226693 74.7379744907)" data-schematic-rect-id="schematic_rect_0" data-schematic-component-id="schematic_component_0"/><path d="M 779.0665996053999 361.24453385929996 L 826.8176928334999 313.4934406312" stroke="blue" stroke-width="0.955021864562" fill="none" stroke-linecap="round" stroke-linejoin="round" data-schematic-component-id="schematic_component_0"/><circle cx="492.5600402368" cy="265.7423474031" r="23.87554661405" fill="green" stroke="green" stroke-width="2.387554661405" stroke-dasharray="7.1626639842149995" data-schematic-circle-id="schematic_circle_0" data-schematic-component-id="schematic_component_0"/></g><text x="588.062226693" y="265.7423474031" fill="red" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="9.55021864562px" transform="rotate(0, 588.062226693, 265.7423474031)">U1</text><rect class="schematic-box" x="540.3111334649" y="217.991254175" width="95.50218645619998" height="95.50218645619998" stroke-width="0.955021864562px" stroke="rgb(132, 0, 0)" fill="transparent"/><g data-schematic-table-id="schematic_table_0"><rect x="683.5644131491999" y="456.74672031549994" width="262.63101275455006" height="119.37773307025009" fill="none" stroke="rgb(102, 102, 102)" stroke-width="4.77510932281"/><line x1="802.9421462194499" y1="504.49781354359993" x2="802.9421462194499" y2="576.12445338575" stroke="rgb(102, 102, 102)" stroke-width="0.955021864562"/><line x1="683.5644131491999" y1="504.49781354359993" x2="802.9421462194499" y2="504.49781354359993" stroke="rgb(102, 102, 102)" stroke-width="0.955021864562"/><line x1="802.9421462194499" y1="504.49781354359993" x2="946.19542590375" y2="504.49781354359993" stroke="rgb(102, 102, 102)" stroke-width="0.955021864562"/><text x="814.879919526475" y="480.62226692954994" font-size="8.595196781057998px" text-anchor="middle" dominant-baseline="middle" fill="rgb(102, 102, 102)" font-family="sans-serif">Header</text><text x="693.11463179482" y="514.04803218922" font-size="8.595196781057998px" text-anchor="start" dominant-baseline="hanging" fill="rgb(102, 102, 102)" font-family="sans-serif">A2</text><text x="936.6452072581299" y="566.5742347401299" font-size="8.595196781057998px" text-anchor="end" dominant-baseline="ideographic" fill="rgb(102, 102, 102)" font-family="sans-serif">B2</text></g></svg>

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

@@ -7,7 +7,7 @@ import { convertCircuitJsonToSchematicSvg } from "circuit-to-svg"
 const circuitJson: AnyCircuitElement[] = [
   {
     type: "schematic_arc",
-    center: { x: 0, y: 0 },
+    center: { x: -6, y: 4 },
     schematic_arc_id: "schematic_arc_id_1",
     radius: 1,
     schematic_component_id: "schematic_component_id_1",
@@ -20,12 +20,12 @@ const circuitJson: AnyCircuitElement[] = [
   },
   {
     type: "schematic_line",
-    x1: 2,
+    x1: 3,
     schematic_line_id: "schematic_line_id_1",
     schematic_component_id: "schematic_component_id_1",
-    y1: 0,
-    x2: 4,
-    y2: 0,
+    y1: 4,
+    x2: 6,
+    y2: 4,
     stroke_width: 0.05,
     color: "black",
     is_dashed: false,
@@ -33,8 +33,8 @@ const circuitJson: AnyCircuitElement[] = [
   {
     type: "schematic_box",
     schematic_component_id: "schematic_component_id_1",
-    x: 0,
-    y: 3,
+    x: -6,
+    y: -1,
     width: 2,
     height: 2,
     is_dashed: true,
@@ -43,7 +43,7 @@ const circuitJson: AnyCircuitElement[] = [
     type: "schematic_rect",
     schematic_rect_id: "schematic_rect_id_1",
     schematic_component_id: "schematic_component_id_1",
-    center: { x: -3, y: 3 },
+    center: { x: 0, y: 4 },
     width: 2,
     height: 1,
     rotation: 30,
@@ -57,8 +57,8 @@ const circuitJson: AnyCircuitElement[] = [
     type: "schematic_path",
     schematic_path_id: "schematic_path_id_1",
     points: [
-      { x: 3, y: 3 },
-      { x: 4, y: 4 },
+      { x: 4, y: -2 },
+      { x: 5, y: -1 },
     ],
     fill_color: "blue",
     is_dashed: false,
@@ -67,7 +67,7 @@ const circuitJson: AnyCircuitElement[] = [
     type: "schematic_text",
     schematic_text_id: "schematic_text_id_1",
     text: "U1",
-    position: { x: 0, y: -3 },
+    position: { x: 0, y: 0 },
     anchor: "center",
     font_size: 0.2,
     color: "red",
@@ -75,7 +75,7 @@ const circuitJson: AnyCircuitElement[] = [
   },
   {
     type: "schematic_circle",
-    center: { x: 3, y: -3 },
+    center: { x: -2, y: 0 },
     schematic_circle_id: "schematic_circle_id_1",
     radius: 0.5,
     stroke_width: 0.05,
@@ -83,6 +83,62 @@ const circuitJson: AnyCircuitElement[] = [
     is_filled: true,
     is_dashed: true,
   },
+  {
+    type: "schematic_table",
+    schematic_table_id: "schematic_table_1",
+    anchor_position: { x: 2, y: -4 },
+    column_widths: [2, 3],
+    row_heights: [1, 1.5],
+    cell_padding: 0.2,
+    border_width: 0.1,
+    anchor: "top_left",
+  },
+  {
+    type: "schematic_table_cell",
+    schematic_table_cell_id: "schematic_table_cell_1",
+    schematic_table_id: "schematic_table_1",
+    start_row_index: 0,
+    end_row_index: 0,
+    start_column_index: 0,
+    end_column_index: 1,
+    text: "Header",
+    center: { x: 3.5, y: 0.5 },
+    width: 5,
+    height: 1,
+    horizontal_align: "center",
+    vertical_align: "middle",
+    font_size: 0.18,
+  },
+  {
+    type: "schematic_table_cell",
+    schematic_table_cell_id: "schematic_table_cell_2",
+    schematic_table_id: "schematic_table_1",
+    start_row_index: 1,
+    end_row_index: 1,
+    start_column_index: 0,
+    end_column_index: 0,
+    text: "A2",
+    center: { x: 2, y: -0.75 },
+    width: 2,
+    height: 1.5,
+    horizontal_align: "left",
+    vertical_align: "top",
+  },
+  {
+    type: "schematic_table_cell",
+    schematic_table_cell_id: "schematic_table_cell_3",
+    schematic_table_id: "schematic_table_1",
+    start_row_index: 1,
+    end_row_index: 1,
+    start_column_index: 1,
+    end_column_index: 1,
+    text: "B2",
+    center: { x: 4.5, y: -0.75 },
+    width: 3,
+    height: 1.5,
+    horizontal_align: "right",
+    vertical_align: "bottom",
+  },
 ]
 
 test("test7 comprehensive schematic symbol support", async () => {
@@ -96,7 +152,7 @@ export const U1 = (props: ChipProps) => (
   <chip
     symbol={<symbol>
   <schematicarc
-    center={{ x: 0, y: 0 }}
+    center={{ x: -6, y: 4 }}
     radius={1}
     startAngleDegrees={0}
     endAngleDegrees={180}
@@ -105,12 +161,21 @@ export const U1 = (props: ChipProps) => (
     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}/>
-  <schematicrect schX={-3} schY={3} width={2} height={1} rotation={30} strokeWidth={0.05} color="purple" isFilled={true} fillColor="yellow" 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} />
+  <schematicline x1={3} y1={4} x2={6} y2={4} strokeWidth={0.05} color="black" isDashed={false}/>
+  <schematicbox center={{ x: -6, y: -1 }} width={2} height={2} isDashed={true}/>
+  <schematicrect schX={0} schY={4} width={2} height={1} rotation={30} strokeWidth={0.05} color="purple" isFilled={true} fillColor="yellow" isDashed={true} />
+  <schematicpath points={[{"x":4,"y":-2},{"x":5,"y":-1}]} strokeColor="blue" fillColor="blue" isFilled={false}/>
+  <schematictext text="U1" x={0} y={0} anchorAlignment="center" fontSize={0.2} color="red" rotation={45} />
+  <schematiccircle center={{ x: -2, y: 0 }} radius={0.5} strokeWidth={0.05} color="green" isFilled={true} isDashed={true} />
+  <schematictable schX={2} schY={-4} cellPadding={0.2} borderWidth={0.1} anchor="top_left">
+    <schematicrow height={1}>
+        <schematiccell text="Header" horizontalAlign="center" verticalAlign="middle" fontSize={0.18} colSpan={2} width={2.5} />
+      </schematicrow>
+    <schematicrow height={1.5}>
+        <schematiccell text="A2" horizontalAlign="left" verticalAlign="top" width={2} />
+        <schematiccell text="B2" horizontalAlign="right" verticalAlign="bottom" width={3} />
+      </schematicrow>
+  </schematictable>
 </symbol>}
     {...props}
   />