circuit-json-to-tscircuit 0.0.72 → 0.0.74

package/dist/{chunk-2BNMFKVO.js → chunk-KDQXBFSE.js}

@@ -571,6 +571,117 @@ var convertSymbolPrimitives = ({
 // lib/generate-board-schematic-tsx/convert-box-components.ts
 import { su as su2 } from "@tscircuit/soup-util";
 import "circuit-json";
+
+// lib/generate-board-schematic-tsx/convert-box-port-markers.ts
+var ARROW_SIZE = 0.1;
+var ARROW_HALF_ANGLE_RADIANS = Math.PI / 6;
+var ARROW_AXIAL_LENGTH = ARROW_SIZE * Math.cos(ARROW_HALF_ANGLE_RADIANS);
+var ARROW_HALF_WIDTH = ARROW_SIZE * Math.sin(ARROW_HALF_ANGLE_RADIANS);
+var MARKER_STROKE_WIDTH = 0.02 / 3;
+var MARKER_STROKE_COLOR = "#840000";
+var MARKER_FILL_COLOR = "#ffffff";
+var INVERSION_BUBBLE_RADIUS = 0.06;
+var getOutwardDirection = (side) => {
+  switch (side) {
+    case "left":
+      return { x: -1, y: 0 };
+    case "right":
+      return { x: 1, y: 0 };
+    case "top":
+      return { x: 0, y: 1 };
+    case "bottom":
+      return { x: 0, y: -1 };
+    default:
+      return null;
+  }
+};
+var createArrowPath = ({
+  tip,
+  direction
+}) => {
+  const base = {
+    x: tip.x - direction.x * ARROW_AXIAL_LENGTH,
+    y: tip.y - direction.y * ARROW_AXIAL_LENGTH
+  };
+  const perpendicular = { x: -direction.y, y: direction.x };
+  const firstBaseCorner = {
+    x: base.x + perpendicular.x * ARROW_HALF_WIDTH,
+    y: base.y + perpendicular.y * ARROW_HALF_WIDTH
+  };
+  const secondBaseCorner = {
+    x: base.x - perpendicular.x * ARROW_HALF_WIDTH,
+    y: base.y - perpendicular.y * ARROW_HALF_WIDTH
+  };
+  return formatElement("schematicpath", {
+    points: [tip, firstBaseCorner, secondBaseCorner, tip],
+    strokeWidth: MARKER_STROKE_WIDTH,
+    strokeColor: MARKER_STROKE_COLOR,
+    fillColor: MARKER_FILL_COLOR,
+    isFilled: true
+  });
+};
+var convertBoxPortMarkers = ({
+  schematicPort,
+  edge
+}) => {
+  const outward = getOutwardDirection(schematicPort.side_of_component);
+  if (!outward) return { markers: [], pinLineStart: edge };
+  const inversionOffset = schematicPort.is_drawn_with_inversion_circle ? INVERSION_BUBBLE_RADIUS * 2 : 0;
+  const pinLineStart = {
+    x: edge.x + outward.x * inversionOffset,
+    y: edge.y + outward.y * inversionOffset
+  };
+  const markers = [];
+  if (schematicPort.is_drawn_with_inversion_circle) {
+    markers.push(
+      formatElement("schematiccircle", {
+        center: {
+          x: edge.x + outward.x * INVERSION_BUBBLE_RADIUS,
+          y: edge.y + outward.y * INVERSION_BUBBLE_RADIUS
+        },
+        radius: INVERSION_BUBBLE_RADIUS,
+        strokeWidth: MARKER_STROKE_WIDTH * 3,
+        color: MARKER_STROKE_COLOR,
+        fillColor: MARKER_FILL_COLOR,
+        isFilled: true
+      })
+    );
+  }
+  if (schematicPort.has_input_arrow) {
+    markers.push(
+      createArrowPath({
+        tip: pinLineStart,
+        direction: { x: -outward.x, y: -outward.y }
+      })
+    );
+  }
+  if (schematicPort.has_output_arrow) {
+    const separation = schematicPort.has_input_arrow ? ARROW_AXIAL_LENGTH : 0;
+    markers.push(
+      createArrowPath({
+        tip: {
+          x: pinLineStart.x + outward.x * (separation + ARROW_SIZE),
+          y: pinLineStart.y + outward.y * (separation + ARROW_SIZE)
+        },
+        direction: outward
+      })
+    );
+  }
+  return { markers, pinLineStart };
+};
+
+// lib/generate-board-schematic-tsx/get-box-pin-display-label.ts
+var getBoxPinDisplayLabel = ({
+  schematicPort,
+  sourcePort
+}) => {
+  if (schematicPort.display_pin_label !== void 0)
+    return schematicPort.display_pin_label;
+  const sourceName = sourcePort?.name;
+  return sourceName && !/^\d+$/.test(sourceName) ? sourceName : void 0;
+};
+
+// lib/generate-board-schematic-tsx/convert-box-components.ts
 var DEFAULT_BOX_BODY_STROKE_WIDTH = 0.02;
 var DEFAULT_BOX_BODY_STROKE_COLOR = "#840000";
 var DEFAULT_BOX_BODY_FILL_COLOR = "#ffffc2";
@@ -611,16 +722,21 @@ var convertBoxComponent = ({
         edge.y = schematicComponent.center.y - schematicComponent.size.height / 2;
         break;
     }
+    const { markers, pinLineStart } = convertBoxPortMarkers({
+      schematicPort,
+      edge
+    });
     primitives.push(
       formatElement("schematicline", {
-        x1: edge.x,
-        y1: edge.y,
+        x1: pinLineStart.x,
+        y1: pinLineStart.y,
         x2: schematicPort.center.x,
         y2: schematicPort.center.y,
         strokeWidth: DEFAULT_BOX_BODY_STROKE_WIDTH,
         color: DEFAULT_BOX_BODY_STROKE_COLOR
       })
     );
+    primitives.push(...markers);
     const sourcePort = su2(circuitJson).source_port.get(
       schematicPort.source_port_id
     );
@@ -655,7 +771,10 @@ var convertBoxComponent = ({
         rotation = -90;
         break;
     }
-    const displayPinLabel = schematicPort.display_pin_label ?? sourcePort?.name;
+    const displayPinLabel = getBoxPinDisplayLabel({
+      schematicPort,
+      sourcePort
+    });
     if (displayPinLabel)
       primitives.push(
         formatElement("schematictext", {

package/dist/cli/main.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-2BNMFKVO.js";
+} from "../chunk-KDQXBFSE.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.71",
+  version: "0.0.73",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/circuit-json-to-tscircuit.git"

package/dist/lib/index.js

@@ -1,6 +1,6 @@
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-2BNMFKVO.js";
+} from "../chunk-KDQXBFSE.js";
 export {
   convertCircuitJsonToTscircuit
 };

package/lib/generate-board-schematic-tsx/convert-box-components.ts

@@ -1,7 +1,9 @@
 import { su } from "@tscircuit/soup-util"
 import { type AnyCircuitElement, type SchematicComponent } from "circuit-json"
 import { convertRect } from "./convert-rect"
+import { convertBoxPortMarkers } from "./convert-box-port-markers"
 import { formatElement } from "./format-attributes"
+import { getBoxPinDisplayLabel } from "./get-box-pin-display-label"
 
 // Circuit JSON does not encode box body styling. These values mirror the
 // circuit-to-svg defaults so reconstructed boxes keep the compiled view.
@@ -54,16 +56,21 @@ export const convertBoxComponent = ({
           schematicComponent.center.y - schematicComponent.size.height / 2
         break
     }
+    const { markers, pinLineStart } = convertBoxPortMarkers({
+      schematicPort,
+      edge,
+    })
     primitives.push(
       formatElement("schematicline", {
-        x1: edge.x,
-        y1: edge.y,
+        x1: pinLineStart.x,
+        y1: pinLineStart.y,
         x2: schematicPort.center.x,
         y2: schematicPort.center.y,
         strokeWidth: DEFAULT_BOX_BODY_STROKE_WIDTH,
         color: DEFAULT_BOX_BODY_STROKE_COLOR,
       }),
     )
+    primitives.push(...markers)
     const sourcePort = su(circuitJson).source_port.get(
       schematicPort.source_port_id,
     )
@@ -98,7 +105,10 @@ export const convertBoxComponent = ({
         rotation = -90
         break
     }
-    const displayPinLabel = schematicPort.display_pin_label ?? sourcePort?.name
+    const displayPinLabel = getBoxPinDisplayLabel({
+      schematicPort,
+      sourcePort,
+    })
     if (displayPinLabel)
       primitives.push(
         formatElement("schematictext", {

package/lib/generate-board-schematic-tsx/convert-box-port-markers.ts

@@ -0,0 +1,114 @@
+import type { Point, SchematicPort } from "circuit-json"
+import { formatElement } from "./format-attributes"
+
+const ARROW_SIZE = 0.1
+const ARROW_HALF_ANGLE_RADIANS = Math.PI / 6
+const ARROW_AXIAL_LENGTH = ARROW_SIZE * Math.cos(ARROW_HALF_ANGLE_RADIANS)
+const ARROW_HALF_WIDTH = ARROW_SIZE * Math.sin(ARROW_HALF_ANGLE_RADIANS)
+const MARKER_STROKE_WIDTH = 0.02 / 3
+const MARKER_STROKE_COLOR = "#840000"
+const MARKER_FILL_COLOR = "#ffffff"
+const INVERSION_BUBBLE_RADIUS = 0.06
+
+const getOutwardDirection = (
+  side: SchematicPort["side_of_component"],
+): Point | null => {
+  switch (side) {
+    case "left":
+      return { x: -1, y: 0 }
+    case "right":
+      return { x: 1, y: 0 }
+    case "top":
+      return { x: 0, y: 1 }
+    case "bottom":
+      return { x: 0, y: -1 }
+    default:
+      return null
+  }
+}
+
+const createArrowPath = ({
+  tip,
+  direction,
+}: {
+  tip: Point
+  direction: Point
+}): string => {
+  const base = {
+    x: tip.x - direction.x * ARROW_AXIAL_LENGTH,
+    y: tip.y - direction.y * ARROW_AXIAL_LENGTH,
+  }
+  const perpendicular = { x: -direction.y, y: direction.x }
+  const firstBaseCorner = {
+    x: base.x + perpendicular.x * ARROW_HALF_WIDTH,
+    y: base.y + perpendicular.y * ARROW_HALF_WIDTH,
+  }
+  const secondBaseCorner = {
+    x: base.x - perpendicular.x * ARROW_HALF_WIDTH,
+    y: base.y - perpendicular.y * ARROW_HALF_WIDTH,
+  }
+  return formatElement("schematicpath", {
+    points: [tip, firstBaseCorner, secondBaseCorner, tip],
+    strokeWidth: MARKER_STROKE_WIDTH,
+    strokeColor: MARKER_STROKE_COLOR,
+    fillColor: MARKER_FILL_COLOR,
+    isFilled: true,
+  })
+}
+
+export const convertBoxPortMarkers = ({
+  schematicPort,
+  edge,
+}: {
+  schematicPort: SchematicPort
+  edge: Point
+}): { markers: string[]; pinLineStart: Point } => {
+  const outward = getOutwardDirection(schematicPort.side_of_component)
+  if (!outward) return { markers: [], pinLineStart: edge }
+
+  const inversionOffset = schematicPort.is_drawn_with_inversion_circle
+    ? INVERSION_BUBBLE_RADIUS * 2
+    : 0
+  const pinLineStart = {
+    x: edge.x + outward.x * inversionOffset,
+    y: edge.y + outward.y * inversionOffset,
+  }
+  const markers: string[] = []
+
+  if (schematicPort.is_drawn_with_inversion_circle) {
+    markers.push(
+      formatElement("schematiccircle", {
+        center: {
+          x: edge.x + outward.x * INVERSION_BUBBLE_RADIUS,
+          y: edge.y + outward.y * INVERSION_BUBBLE_RADIUS,
+        },
+        radius: INVERSION_BUBBLE_RADIUS,
+        strokeWidth: MARKER_STROKE_WIDTH * 3,
+        color: MARKER_STROKE_COLOR,
+        fillColor: MARKER_FILL_COLOR,
+        isFilled: true,
+      }),
+    )
+  }
+  if (schematicPort.has_input_arrow) {
+    markers.push(
+      createArrowPath({
+        tip: pinLineStart,
+        direction: { x: -outward.x, y: -outward.y },
+      }),
+    )
+  }
+  if (schematicPort.has_output_arrow) {
+    const separation = schematicPort.has_input_arrow ? ARROW_AXIAL_LENGTH : 0
+    markers.push(
+      createArrowPath({
+        tip: {
+          x: pinLineStart.x + outward.x * (separation + ARROW_SIZE),
+          y: pinLineStart.y + outward.y * (separation + ARROW_SIZE),
+        },
+        direction: outward,
+      }),
+    )
+  }
+  return { markers, pinLineStart }
+}

package/lib/generate-board-schematic-tsx/get-box-pin-display-label.ts

@@ -0,0 +1,15 @@
+import type { SchematicPort, SourcePort } from "circuit-json"
+
+export const getBoxPinDisplayLabel = ({
+  schematicPort,
+  sourcePort,
+}: {
+  schematicPort: SchematicPort
+  sourcePort: SourcePort | null
+}): string | undefined => {
+  if (schematicPort.display_pin_label !== undefined)
+    return schematicPort.display_pin_label
+
+  const sourceName = sourcePort?.name
+  return sourceName && !/^\d+$/.test(sourceName) ? sourceName : undefined
+}

package/package.json

@@ -6,7 +6,7 @@
     "./cli": "./dist/cli/main.js"
   },
   "type": "module",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/circuit-json-to-tscircuit.git"

package/tests/board-schematic-box-port-arrows.test.tsx

@@ -0,0 +1,103 @@
+import { expect, test } from "bun:test"
+import type { CircuitJson } from "circuit-json"
+import { convertCircuitJsonToTscircuit } from "lib"
+import { runTscircuitCode } from "tscircuit"
+
+test("preserves input and output arrows on imported box pins", async () => {
+  const circuitJson: CircuitJson = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board",
+      center: { x: 0, y: 0 },
+      width: 10,
+      height: 10,
+      num_layers: 2,
+      thickness: 1.6,
+      material: "fr4",
+    },
+    {
+      type: "schematic_component",
+      schematic_component_id: "controller",
+      center: { x: 0, y: 0 },
+      size: { width: 2, height: 2 },
+      is_box_with_pins: true,
+    },
+    {
+      type: "schematic_port",
+      schematic_port_id: "output",
+      source_port_id: "output_source",
+      schematic_component_id: "controller",
+      center: { x: -1.4, y: 0 },
+      side_of_component: "left",
+      facing_direction: "left",
+      has_output_arrow: true,
+      is_drawn_with_inversion_circle: true,
+      pin_number: 1,
+    },
+    {
+      type: "schematic_port",
+      schematic_port_id: "input",
+      source_port_id: "input_source",
+      schematic_component_id: "controller",
+      center: { x: 1.4, y: 0.4 },
+      side_of_component: "right",
+      facing_direction: "right",
+      has_input_arrow: true,
+      is_drawn_with_inversion_circle: true,
+      pin_number: 2,
+    },
+  ]
+  const renderedCircuitJson = await runTscircuitCode(
+    convertCircuitJsonToTscircuit(circuitJson, {
+      componentName: "ArrowPinBoard",
+    }),
+  )
+  const arrowPaths = renderedCircuitJson.flatMap((element) =>
+    element.type === "schematic_path" &&
+    element.is_filled &&
+    element.fill_color === "#ffffff"
+      ? [element]
+      : [],
+  )
+
+  expect(arrowPaths).toHaveLength(2)
+  expect(
+    arrowPaths.some((path) =>
+      path.points.some(
+        (point) => Math.abs(point.x + 1.22) < 0.000001 && point.y === 0,
+      ),
+    ),
+  ).toBe(true)
+  expect(
+    arrowPaths.some((path) =>
+      path.points.some(
+        (point) =>
+          Math.abs(point.x - 1.12) < 0.000001 &&
+          Math.abs(point.y - 0.4) < 0.000001,
+      ),
+    ),
+  ).toBe(true)
+
+  const inversionCircles = renderedCircuitJson.flatMap((element) =>
+    element.type === "schematic_circle" &&
+    element.is_filled &&
+    element.fill_color === "#ffffff" &&
+    element.radius === 0.06
+      ? [element]
+      : [],
+  )
+  expect(inversionCircles).toHaveLength(2)
+  expect(inversionCircles.map((circle) => circle.center.x).sort()).toEqual([
+    -1.06, 1.06,
+  ])
+
+  const shiftedPinLines = renderedCircuitJson.flatMap((element) =>
+    element.type === "schematic_line" &&
+    ((Math.abs(element.x1 + 1.12) < 0.000001 && element.y1 === 0) ||
+      (Math.abs(element.x1 - 1.12) < 0.000001 &&
+        Math.abs(element.y1 - 0.4) < 0.000001))
+      ? [element]
+      : [],
+  )
+  expect(shiftedPinLines).toHaveLength(2)
+})

package/tests/board-schematic-numeric-pin-name.test.tsx

@@ -0,0 +1,72 @@
+import { expect, test } from "bun:test"
+import type { CircuitJson } from "circuit-json"
+import { convertCircuitJsonToTscircuit } from "lib"
+import { runTscircuitCode } from "tscircuit"
+
+test("does not duplicate numeric box pin names", async () => {
+  const circuitJson: CircuitJson = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board",
+      center: { x: 0, y: 0 },
+      width: 10,
+      height: 10,
+      num_layers: 2,
+      thickness: 1.6,
+      material: "fr4",
+    },
+    {
+      type: "schematic_component",
+      schematic_component_id: "net_tie",
+      center: { x: 0, y: 0 },
+      size: { width: 0.4, height: 0.4 },
+      is_box_with_pins: true,
+    },
+    {
+      type: "source_port",
+      source_port_id: "net_tie_left_source",
+      name: "1",
+      pin_number: 1,
+    },
+    {
+      type: "source_port",
+      source_port_id: "net_tie_right_source",
+      name: "2",
+      pin_number: 2,
+    },
+    {
+      type: "schematic_port",
+      schematic_port_id: "net_tie_left",
+      source_port_id: "net_tie_left_source",
+      schematic_component_id: "net_tie",
+      center: { x: -0.4, y: 0 },
+      side_of_component: "left",
+      facing_direction: "left",
+      pin_number: 1,
+    },
+    {
+      type: "schematic_port",
+      schematic_port_id: "net_tie_right",
+      source_port_id: "net_tie_right_source",
+      schematic_component_id: "net_tie",
+      center: { x: 0.4, y: 0 },
+      side_of_component: "right",
+      facing_direction: "right",
+      pin_number: 2,
+    },
+  ]
+  const renderedCircuitJson = await runTscircuitCode(
+    convertCircuitJsonToTscircuit(circuitJson, {
+      componentName: "NetTieBoard",
+    }),
+  )
+  const numericTexts = renderedCircuitJson
+    .flatMap((element) =>
+      element.type === "schematic_text" && /^[12]$/.test(element.text)
+        ? [element.text]
+        : [],
+    )
+    .sort()
+
+  expect(numericTexts).toEqual(["1", "2"])
+})