circuit-to-svg 0.0.179 → 0.0.181

package/dist/index.js

@@ -1495,7 +1495,7 @@ function getSoftwareUsedString(circuitJson) {
 var package_default = {
   name: "circuit-to-svg",
   type: "module",
-  version: "0.0.178",
+  version: "0.0.180",
   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.606",
+    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;
 };
 
@@ -5154,7 +5240,8 @@ function createSchematicTrace({
 }) {
   const edges = trace.edges;
   if (edges.length === 0) return [];
-  const svgObjects = [];
+  const baseObjects = [];
+  const overlayObjects = [];
   let path = "";
   for (let edgeIndex = 0; edgeIndex < edges.length; edgeIndex++) {
     const edge = edges[edgeIndex];
@@ -5173,6 +5260,38 @@ function createSchematicTrace({
       path += ` L ${screenToX} ${screenToY}`;
     }
   }
+  if (path) {
+    baseObjects.push({
+      name: "path",
+      type: "element",
+      attributes: {
+        d: path,
+        class: "trace-invisible-hover-outline",
+        stroke: colorMap2.schematic.wire,
+        fill: "none",
+        "stroke-width": `${getSchStrokeSize(transform) * 8}px`,
+        "stroke-linecap": "round",
+        opacity: "0",
+        "stroke-linejoin": "round"
+      },
+      value: "",
+      children: []
+    });
+    baseObjects.push({
+      name: "path",
+      type: "element",
+      attributes: {
+        d: path,
+        stroke: colorMap2.schematic.wire,
+        fill: "none",
+        "stroke-width": `${getSchStrokeSize(transform)}px`,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round"
+      },
+      value: "",
+      children: []
+    });
+  }
   for (const edge of edges) {
     if (!edge.is_crossing) continue;
     const [screenFromX, screenFromY] = applyToPoint38(transform, [
@@ -5193,7 +5312,7 @@ function createSchematicTrace({
     const perpY = dx / len * hopHeight;
     const controlX = midX + perpX;
     const controlY = midY - Math.abs(perpY);
-    svgObjects.push({
+    overlayObjects.push({
       name: "path",
       type: "element",
       attributes: {
@@ -5202,12 +5321,12 @@ function createSchematicTrace({
         stroke: colorMap2.schematic.background,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(transform) * 1.5}px`,
-        "stroke-linecap": "round"
+        "stroke-linecap": "butt"
       },
       value: "",
       children: []
     });
-    svgObjects.push({
+    overlayObjects.push({
       name: "path",
       type: "element",
       attributes: {
@@ -5221,45 +5340,13 @@ function createSchematicTrace({
       children: []
     });
   }
-  if (path) {
-    svgObjects.push({
-      name: "path",
-      type: "element",
-      attributes: {
-        d: path,
-        class: "trace-invisible-hover-outline",
-        stroke: colorMap2.schematic.wire,
-        fill: "none",
-        "stroke-width": `${getSchStrokeSize(transform) * 8}px`,
-        "stroke-linecap": "round",
-        opacity: "0",
-        "stroke-linejoin": "round"
-      },
-      value: "",
-      children: []
-    });
-    svgObjects.push({
-      name: "path",
-      type: "element",
-      attributes: {
-        d: path,
-        stroke: colorMap2.schematic.wire,
-        fill: "none",
-        "stroke-width": `${getSchStrokeSize(transform)}px`,
-        "stroke-linecap": "round",
-        "stroke-linejoin": "round"
-      },
-      value: "",
-      children: []
-    });
-  }
   if (trace.junctions) {
     for (const junction of trace.junctions) {
       const [screenX, screenY] = applyToPoint38(transform, [
         junction.x,
         junction.y
       ]);
-      svgObjects.push({
+      overlayObjects.push({
         name: "circle",
         type: "element",
         attributes: {
@@ -5281,10 +5368,23 @@ function createSchematicTrace({
       value: "",
       attributes: {
         class: "trace",
+        "data-layer": "base",
+        "data-circuit-json-type": "schematic_trace",
+        "data-schematic-trace-id": trace.schematic_trace_id
+      },
+      children: baseObjects
+    },
+    {
+      name: "g",
+      type: "element",
+      value: "",
+      attributes: {
+        class: "trace-overlays",
+        "data-layer": "overlay",
         "data-circuit-json-type": "schematic_trace",
         "data-schematic-trace-id": trace.schematic_trace_id
       },
-      children: svgObjects
+      children: overlayObjects
     }
   ];
 }
@@ -6113,9 +6213,16 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
       );
     }
   }
+  const schTraceBaseSvgs = schTraceSvgs.filter(
+    (o) => o.attributes?.["data-layer"] !== "overlay"
+  );
+  const schTraceOverlaySvgs = schTraceSvgs.filter(
+    (o) => o.attributes?.["data-layer"] === "overlay"
+  );
   svgChildren.push(
     ...schDebugObjectSvgs,
-    ...schTraceSvgs,
+    ...schTraceBaseSvgs,
+    ...schTraceOverlaySvgs,
     ...schComponentSvgs,
     ...schPortHoverSvgs,
     ...schNetLabel,