circuit-json-to-tscircuit 0.0.73 → 0.0.74

package/dist/{chunk-5YQBNWPZ.js → chunk-KDQXBFSE.js}

@@ -572,6 +572,104 @@ var convertSymbolPrimitives = ({
 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,
@@ -624,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
     );

package/dist/cli/main.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   convertCircuitJsonToTscircuit
-} from "../chunk-5YQBNWPZ.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.72",
+  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-5YQBNWPZ.js";
+} from "../chunk-KDQXBFSE.js";
 export {
   convertCircuitJsonToTscircuit
 };

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

@@ -1,6 +1,7 @@
 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"
 
@@ -55,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,
     )

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/package.json

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