circuit-to-svg 0.0.178 → 0.0.180

package/dist/index.js

@@ -1495,7 +1495,7 @@ function getSoftwareUsedString(circuitJson) {
 var package_default = {
   name: "circuit-to-svg",
   type: "module",
-  version: "0.0.177",
+  version: "0.0.179",
   description: "Convert Circuit JSON to SVG",
   main: "dist/index.js",
   files: [
@@ -1522,7 +1522,7 @@ var package_default = {
     react: "19.1.0",
     "react-cosmos": "7.0.0",
     "react-cosmos-plugin-vite": "7.0.0",
-    tscircuit: "^0.0.571",
+    tscircuit: "^0.0.609",
     tsup: "^8.0.2",
     typescript: "^5.4.5",
     "vite-tsconfig-paths": "^5.0.1"
@@ -4570,6 +4570,29 @@ import "@tscircuit/circuit-json-util";
 import { applyToPoint as applyToPoint30 } from "transformation-matrix";
 import { su as su5 } from "@tscircuit/circuit-json-util";
 var PIN_CIRCLE_RADIUS_MM = 0.02;
+var createArrow = (tip, angle, size, color, strokeWidth) => {
+  const arrowAngle = Math.PI / 6;
+  const p1 = {
+    x: tip.x - size * Math.cos(angle - arrowAngle),
+    y: tip.y - size * Math.sin(angle - arrowAngle)
+  };
+  const p2 = {
+    x: tip.x - size * Math.cos(angle + arrowAngle),
+    y: tip.y - size * Math.sin(angle + arrowAngle)
+  };
+  return {
+    name: "polygon",
+    type: "element",
+    attributes: {
+      points: `${tip.x},${tip.y} ${p1.x},${p1.y} ${p2.x},${p2.y}`,
+      fill: "white",
+      stroke: color,
+      "stroke-width": `${strokeWidth}px`
+    },
+    value: "",
+    children: []
+  };
+};
 var createSvgObjectsForSchPortBoxLine = ({
   schPort,
   schComponent,
@@ -4669,6 +4692,69 @@ var createSvgObjectsForSchPortBoxLine = ({
     },
     children: pinChildren
   });
+  const { has_input_arrow, has_output_arrow } = schPort;
+  if ((has_input_arrow || has_output_arrow) && schPort.side_of_component) {
+    const arrowSize = Math.abs(transform.a) * 0.15;
+    const arrowColor = colorMap.schematic.component_outline;
+    const arrowAxialLength = arrowSize * Math.cos(Math.PI / 6);
+    const strokeWidth = getSchStrokeSize(transform) / 2;
+    let inputAngleRads = 0;
+    let outputAngleRads = 0;
+    if (schPort.side_of_component === "left") {
+      inputAngleRads = 0;
+      outputAngleRads = Math.PI;
+    } else if (schPort.side_of_component === "right") {
+      inputAngleRads = Math.PI;
+      outputAngleRads = 0;
+    } else if (schPort.side_of_component === "top") {
+      inputAngleRads = Math.PI / 2;
+      outputAngleRads = -Math.PI / 2;
+    } else if (schPort.side_of_component === "bottom") {
+      inputAngleRads = -Math.PI / 2;
+      outputAngleRads = Math.PI / 2;
+    }
+    const both = has_input_arrow && has_output_arrow;
+    let inputArrowTip = { ...screenRealEdgePos };
+    let outputArrowBase = { ...screenRealEdgePos };
+    if (both) {
+      const offset = arrowAxialLength;
+      if (schPort.side_of_component === "left") {
+        outputArrowBase.x -= offset;
+      } else if (schPort.side_of_component === "right") {
+        outputArrowBase.x += offset;
+      } else if (schPort.side_of_component === "top") {
+        outputArrowBase.y -= offset;
+      } else if (schPort.side_of_component === "bottom") {
+        outputArrowBase.y += offset;
+      }
+    }
+    if (has_input_arrow) {
+      svgObjects.push(
+        createArrow(
+          inputArrowTip,
+          inputAngleRads,
+          arrowSize,
+          arrowColor,
+          strokeWidth
+        )
+      );
+    }
+    if (has_output_arrow) {
+      const outputArrowTip = {
+        x: outputArrowBase.x + arrowSize * Math.cos(outputAngleRads),
+        y: outputArrowBase.y + arrowSize * Math.sin(outputAngleRads)
+      };
+      svgObjects.push(
+        createArrow(
+          outputArrowTip,
+          outputAngleRads,
+          arrowSize,
+          arrowColor,
+          strokeWidth
+        )
+      );
+    }
+  }
   return svgObjects;
 };