circuit-to-svg 0.0.114 → 0.0.116

package/dist/index.d.ts

@@ -19,6 +19,7 @@ interface Options$1 {
 declare function convertCircuitJsonToAssemblySvg(soup: AnyCircuitElement[], options?: Options$1): string;
 
 interface Options {
+    colorOverrides?: ColorOverrides;
     width?: number;
     height?: number;
     grid?: boolean | {
@@ -31,10 +32,16 @@ interface Options {
         label: string;
     }>;
 }
+interface ColorOverrides {
+    schematic?: {
+        background?: string;
+        component_body?: string;
+    };
+}
 declare function convertCircuitJsonToSchematicSvg(circuitJson: AnyCircuitElement[], options?: Options): string;
 /**
  * @deprecated use `convertCircuitJsonToSchematicSvg` instead
  */
 declare const circuitJsonToSchematicSvg: typeof convertCircuitJsonToSchematicSvg;
 
-export { circuitJsonToPcbSvg, circuitJsonToSchematicSvg, convertCircuitJsonToAssemblySvg, convertCircuitJsonToPcbSvg, convertCircuitJsonToSchematicSvg };
+export { type ColorOverrides, circuitJsonToPcbSvg, circuitJsonToSchematicSvg, convertCircuitJsonToAssemblySvg, convertCircuitJsonToPcbSvg, convertCircuitJsonToSchematicSvg };

package/dist/index.js

@@ -1362,7 +1362,7 @@ function createSvgObjectsFromAssemblyComponent(component, transform, firstPin, n
     type: "element",
     value: "",
     attributes: {
-      transform: `translate(${x}, ${y}) rotate(${-rotation}) scale(1, -1)`
+      transform: `translate(${x}, ${y}) scale(1, -1)`
     },
     children: [
       createComponentPath(
@@ -1384,33 +1384,43 @@ function createComponentPath(scaledWidth, scaledHeight, centerX, centerY, pinX,
   const cornerSize = Math.min(w, h) * 0.3;
   const isTop = pinY > centerY;
   const isLeft = pinX < centerX;
+  const strokeWidth = 0.8;
   const path = getComponentPathData(w, h, cornerSize, isTop, isLeft, rotation);
   return {
     name: "path",
     type: "element",
     attributes: {
       class: "assembly-component",
-      d: path
+      d: path,
+      "stroke-width": strokeWidth.toFixed(2),
+      transform: `rotate(${-rotation})`
     },
     value: "",
     children: []
   };
 }
 function createComponentLabel(scaledWidth, scaledHeight, name, transform) {
-  const scale8 = Math.min(scaledWidth, scaledHeight) * 0.4;
-  const fontSize = getSchScreenFontSize(transform, "net_label") * (scale8 / 2.5);
-  const scaledFontSize = scale8 < 25 ? fontSize : fontSize * 0.6;
+  const size = Math.min(scaledWidth, scaledHeight);
+  const minFontSize = 3;
+  const maxFontSize = 58;
+  const fontScale = 0.8;
+  const fontSize = Math.min(
+    maxFontSize,
+    Math.max(minFontSize, size * fontScale)
+  );
+  const isTall = scaledHeight > scaledWidth;
   return {
     name: "text",
     type: "element",
     attributes: {
       x: "0",
-      y: `${0 + scaledFontSize / 8}`,
+      y: "0",
       class: "assembly-component-label",
       "text-anchor": "middle",
-      "dominant-baseline": "middle",
-      "font-size": `${scaledFontSize}px`,
-      transform: "scale(1, -1)"
+      dy: ".10em",
+      style: "pointer-events: none",
+      "font-size": `${fontSize.toFixed(1)}px`,
+      transform: isTall ? "rotate(90) scale(1, -1)" : "scale(1, -1)"
     },
     children: [
       {
@@ -1466,7 +1476,7 @@ function getComponentPathData(w, h, cornerSize, isTop, isLeft, rotation) {
     ];
   }
   const rotatedCorners = corners.map(([x, y]) => rotatePoint(x, y, rotation));
-  const path = rotatedCorners.map(([x, y], index) => index === 0 ? `M${x},${y}` : `L${x},${y}`).join(" ");
+  const path = rotatedCorners.map(([x, y], i) => i === 0 ? `M${x},${y}` : `L${x},${y}`).join(" ");
   return `${path} Z`;
 }
 
@@ -1526,14 +1536,27 @@ function convertCircuitJsonToAssemblySvg(soup, options) {
           {
             type: "text",
             value: `
-              .assembly-component { fill: #fff; stroke: #000; stroke-width: 3; }
-              .assembly-board { fill: #f2f2f2; stroke: rgb(0,0,0); stroke-opacity: 0.8; }
+              .assembly-component { 
+                fill: #fff; 
+                stroke: #000; 
+              }
+              .assembly-board { 
+                fill: #f2f2f2; 
+                stroke: rgb(0,0,0); 
+                stroke-opacity: 0.8;
+              }
               .assembly-component-label { 
                 fill: #000; 
                 font-family: Arial, serif;
                 font-weight: bold;
+                dominant-baseline: middle;
+                text-anchor: middle;
+              }
+              .assembly-boundary { 
+                fill: none; 
+                stroke: #fff;
+                stroke-width: 0.2; 
               }
-              .assembly-boundary { fill: none; stroke: #fff; stroke-width: 0.3; }
             `,
             name: "",
             attributes: {},
@@ -1824,6 +1847,7 @@ var colorMap = {
     hidden: "rgb(194, 194, 194)",
     junction: "rgb(0, 150, 0)",
     label_global: "rgb(132, 0, 0)",
+    label_background: "rgba(255, 255, 255, 0.6)",
     label_hier: "rgb(114, 86, 0)",
     label_local: "rgb(15, 15, 15)",
     net_name: "rgb(132, 132, 132)",
@@ -2197,7 +2221,8 @@ var ninePointAnchorToTextAnchor = {
 var createSvgObjectsFromSchematicComponentWithSymbol = ({
   component: schComponent,
   transform: realToScreenTransform,
-  circuitJson
+  circuitJson,
+  colorMap: colorMap2
 }) => {
   const svgObjects = [];
   const symbol = symbols[schComponent.symbol_name];
@@ -2285,7 +2310,7 @@ var createSvgObjectsFromSchematicComponentWithSymbol = ({
           );
           return `${i === 0 ? "M" : "L"} ${x} ${y}`;
         }).join(" ") + (closed ? " Z" : ""),
-        stroke: colorMap.schematic.component_outline,
+        stroke: colorMap2.schematic.component_outline,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(realToScreenTransform)}px`
       },
@@ -2321,7 +2346,7 @@ var createSvgObjectsFromSchematicComponentWithSymbol = ({
       attributes: {
         x: screenTextPos.x.toString(),
         y: (screenTextPos.y + verticalOffset).toString(),
-        fill: colorMap.schematic.label_local,
+        fill: colorMap2.schematic.label_local,
         "font-family": "sans-serif",
         "text-anchor": ninePointAnchorToTextAnchor[text.anchor],
         "dominant-baseline": dominantBaseline,
@@ -2376,7 +2401,7 @@ var createSvgObjectsFromSchematicComponentWithSymbol = ({
         r: `${Math.abs(realToScreenTransform.a) * 0.02}px`,
         "stroke-width": `${getSchStrokeSize(realToScreenTransform)}px`,
         fill: "none",
-        stroke: colorMap.schematic.component_outline
+        stroke: colorMap2.schematic.component_outline
       },
       value: "",
       children: []
@@ -2595,7 +2620,11 @@ var createSvgObjectsFromSchPortOnBox = (params) => {
 
 // lib/sch/svg-object-fns/create-svg-objects-for-sch-text.ts
 import { applyToPoint as applyToPoint29 } from "transformation-matrix";
-var createSvgSchText = (elm, transform) => {
+var createSvgSchText = ({
+  elm,
+  transform,
+  colorMap: colorMap2
+}) => {
   const center = applyToPoint29(transform, elm.position);
   const textAnchorMap = {
     center: "middle",
@@ -2618,7 +2647,7 @@ var createSvgSchText = (elm, transform) => {
     attributes: {
       x: center.x.toString(),
       y: center.y.toString(),
-      fill: elm.color ?? colorMap.schematic.sheet_label,
+      fill: elm.color ?? colorMap2.schematic.sheet_label,
       "text-anchor": textAnchorMap[elm.anchor],
       "dominant-baseline": dominantBaselineMap[elm.anchor],
       "font-family": "sans-serif",
@@ -2641,7 +2670,8 @@ var createSvgSchText = (elm, transform) => {
 var createSvgObjectsFromSchematicComponentWithBox = ({
   component: schComponent,
   transform,
-  circuitJson
+  circuitJson,
+  colorMap: colorMap2
 }) => {
   const svgObjects = [];
   const componentScreenTopLeft = applyToPoint30(transform, {
@@ -2665,8 +2695,8 @@ var createSvgObjectsFromSchematicComponentWithBox = ({
       width: componentScreenWidth.toString(),
       height: componentScreenHeight.toString(),
       "stroke-width": `${getSchStrokeSize(transform)}px`,
-      fill: colorMap.schematic.component_body,
-      stroke: colorMap.schematic.component_outline
+      fill: colorMap2.schematic.component_body,
+      stroke: colorMap2.schematic.component_outline
     },
     children: []
   });
@@ -2687,7 +2717,13 @@ var createSvgObjectsFromSchematicComponentWithBox = ({
   const schTexts = su7(circuitJson).schematic_text.list();
   for (const schText of schTexts) {
     if (schText.schematic_component_id === schComponent.schematic_component_id) {
-      svgObjects.push(createSvgSchText(schText, transform));
+      svgObjects.push(
+        createSvgSchText({
+          elm: schText,
+          transform,
+          colorMap: colorMap2
+        })
+      );
     }
   }
   const schematicPorts = su7(circuitJson).schematic_port.list({
@@ -2726,7 +2762,11 @@ function createSvgObjectsFromSchematicComponent(params) {
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-voltage-probe.ts
 import { applyToPoint as applyToPoint31 } from "transformation-matrix";
-function createSvgObjectsFromSchVoltageProbe(probe, transform) {
+function createSvgObjectsFromSchVoltageProbe({
+  probe,
+  transform,
+  colorMap: colorMap2
+}) {
   const [screenX, screenY] = applyToPoint31(transform, [
     probe.position.x,
     probe.position.y
@@ -2751,8 +2791,8 @@ function createSvgObjectsFromSchVoltageProbe(probe, transform) {
       type: "element",
       attributes: {
         d: arrowPath,
-        stroke: colorMap.schematic.reference,
-        fill: colorMap.schematic.reference,
+        stroke: colorMap2.schematic.reference,
+        fill: colorMap2.schematic.reference,
         "stroke-width": `${getSchStrokeSize(transform)}px`
       },
       value: "",
@@ -2765,7 +2805,7 @@ function createSvgObjectsFromSchVoltageProbe(probe, transform) {
       attributes: {
         x: (baseX + 8 - (baseX - baseX)).toString(),
         y: (baseY - 10 + (baseY - baseY)).toString(),
-        fill: colorMap.schematic.reference,
+        fill: colorMap2.schematic.reference,
         "text-anchor": "middle",
         "dominant-baseline": "middle",
         "font-family": "sans-serif",
@@ -2788,7 +2828,10 @@ function createSvgObjectsFromSchVoltageProbe(probe, transform) {
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-debug-object.ts
 import { applyToPoint as applyToPoint32 } from "transformation-matrix";
-function createSvgObjectsFromSchDebugObject(debugObject, transform) {
+function createSvgObjectsFromSchDebugObject({
+  debugObject,
+  transform
+}) {
   if (debugObject.shape === "rect") {
     let [screenLeft, screenTop] = applyToPoint32(transform, [
       debugObject.center.x - debugObject.size.width / 2,
@@ -2905,7 +2948,11 @@ function createSvgObjectsFromSchDebugObject(debugObject, transform) {
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-trace.ts
 import { applyToPoint as applyToPoint33 } from "transformation-matrix";
-function createSchematicTrace(trace, transform) {
+function createSchematicTrace({
+  trace,
+  transform,
+  colorMap: colorMap2
+}) {
   const edges = trace.edges;
   if (edges.length === 0) return [];
   const svgObjects = [];
@@ -2953,7 +3000,7 @@ function createSchematicTrace(trace, transform) {
       attributes: {
         class: "trace-crossing-outline",
         d: `M ${screenFromX} ${screenFromY} Q ${controlX} ${controlY} ${screenToX} ${screenToY}`,
-        stroke: colorMap.schematic.background,
+        stroke: colorMap2.schematic.background,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(transform) * 1.5}px`,
         "stroke-linecap": "round"
@@ -2966,7 +3013,7 @@ function createSchematicTrace(trace, transform) {
       type: "element",
       attributes: {
         d: `M ${screenFromX} ${screenFromY} Q ${controlX} ${controlY} ${screenToX} ${screenToY}`,
-        stroke: colorMap.schematic.wire,
+        stroke: colorMap2.schematic.wire,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(transform)}px`,
         "stroke-linecap": "round"
@@ -2982,7 +3029,7 @@ function createSchematicTrace(trace, transform) {
       attributes: {
         d: path,
         class: "trace-invisible-hover-outline",
-        stroke: colorMap.schematic.wire,
+        stroke: colorMap2.schematic.wire,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(transform) * 8}px`,
         "stroke-linecap": "round",
@@ -2997,7 +3044,7 @@ function createSchematicTrace(trace, transform) {
       type: "element",
       attributes: {
         d: path,
-        stroke: colorMap.schematic.wire,
+        stroke: colorMap2.schematic.wire,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(transform)}px`,
         "stroke-linecap": "round",
@@ -3020,7 +3067,7 @@ function createSchematicTrace(trace, transform) {
           cx: screenX.toString(),
           cy: screenY.toString(),
           r: (Math.abs(transform.a) * 0.03).toString(),
-          fill: colorMap.schematic.junction
+          fill: colorMap2.schematic.junction
         },
         value: "",
         children: []
@@ -3885,7 +3932,11 @@ function getTextOffsets(pathRotation, transform) {
 }
 
 // lib/sch/svg-object-fns/create-svg-objects-for-sch-net-label-with-symbol.ts
-var createSvgObjectsForSchNetLabelWithSymbol = (schNetLabel, realToScreenTransform) => {
+var createSvgObjectsForSchNetLabelWithSymbol = ({
+  schNetLabel,
+  realToScreenTransform,
+  colorMap: colorMap2
+}) => {
   if (!schNetLabel.text) return [];
   const svgObjects = [];
   const symbol = symbols3[schNetLabel.symbol_name];
@@ -4001,7 +4052,7 @@ var createSvgObjectsForSchNetLabelWithSymbol = (schNetLabel, realToScreenTransfo
       type: "element",
       attributes: {
         d: symbolPath + (path.closed ? " Z" : ""),
-        stroke: colorMap.schematic.component_outline,
+        stroke: colorMap2.schematic.component_outline,
         fill: "none",
         "stroke-width": `${getSchStrokeSize(realToScreenTransform)}px`
       },
@@ -4033,7 +4084,7 @@ var createSvgObjectsForSchNetLabelWithSymbol = (schNetLabel, realToScreenTransfo
       attributes: {
         x: offsetScreenPos.x.toString(),
         y: offsetScreenPos.y.toString(),
-        fill: colorMap.schematic.label_local,
+        fill: colorMap2.schematic.label_local,
         "font-family": "sans-serif",
         "text-anchor": ninePointAnchorToTextAnchor2[text.anchor],
         "dominant-baseline": ninePointAnchorToDominantBaseline[text.anchor],
@@ -4091,7 +4142,7 @@ var createSvgObjectsForSchNetLabelWithSymbol = (schNetLabel, realToScreenTransfo
         cy: screenCirclePos.y.toString(),
         r: (circle.radius * symbolToScreenScale).toString(),
         fill: "none",
-        stroke: colorMap.schematic.component_outline,
+        stroke: colorMap2.schematic.component_outline,
         "stroke-width": `${getSchStrokeSize(realToScreenTransform)}px`
       },
       value: "",
@@ -4102,13 +4153,18 @@ var createSvgObjectsForSchNetLabelWithSymbol = (schNetLabel, realToScreenTransfo
 };
 
 // lib/sch/svg-object-fns/create-svg-objects-for-sch-net-label.ts
-var createSvgObjectsForSchNetLabel = (schNetLabel, realToScreenTransform) => {
+var createSvgObjectsForSchNetLabel = ({
+  schNetLabel,
+  realToScreenTransform,
+  colorMap: colorMap2
+}) => {
   if (!schNetLabel.text) return [];
   if (schNetLabel.symbol_name) {
-    return createSvgObjectsForSchNetLabelWithSymbol(
+    return createSvgObjectsForSchNetLabelWithSymbol({
       schNetLabel,
-      realToScreenTransform
-    );
+      realToScreenTransform,
+      colorMap: colorMap2
+    });
   }
   const svgObjects = [];
   const fontSizePx = getSchScreenFontSize(realToScreenTransform, "net_label");
@@ -4186,8 +4242,8 @@ var createSvgObjectsForSchNetLabel = (schNetLabel, realToScreenTransform) => {
     attributes: {
       class: "net-label",
       d: pathD,
-      fill: "#FFFFFF99",
-      stroke: colorMap.schematic.label_global,
+      fill: colorMap2.schematic.label_background,
+      stroke: colorMap2.schematic.label_global,
       "stroke-width": `${getSchStrokeSize(realToScreenTransform)}px`
     },
     value: "",
@@ -4216,7 +4272,7 @@ var createSvgObjectsForSchNetLabel = (schNetLabel, realToScreenTransform) => {
       class: "net-label-text",
       x: screenTextPos.x.toString(),
       y: screenTextPos.y.toString(),
-      fill: colorMap.schematic.label_global,
+      fill: colorMap2.schematic.label_global,
       "text-anchor": textAnchor,
       "dominant-baseline": "central",
       "font-family": "sans-serif",
@@ -4245,6 +4301,14 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
   const realHeight = realBounds.maxY - realBounds.minY;
   const svgWidth = options?.width ?? 1200;
   const svgHeight = options?.height ?? 600;
+  const colorOverrides = options?.colorOverrides;
+  const colorMap2 = {
+    ...colorMap,
+    schematic: {
+      ...colorMap.schematic,
+      ...colorOverrides?.schematic ?? {}
+    }
+  };
   const circuitAspectRatio = realWidth / realHeight;
   const containerAspectRatio = svgWidth / svgHeight;
   let screenPaddingPx;
@@ -4302,25 +4366,51 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
   for (const elm of circuitJson) {
     if (elm.type === "schematic_debug_object") {
       schDebugObjectSvgs.push(
-        ...createSvgObjectsFromSchDebugObject(elm, transform)
+        ...createSvgObjectsFromSchDebugObject({
+          debugObject: elm,
+          transform
+        })
       );
     } else if (elm.type === "schematic_component") {
       schComponentSvgs.push(
         ...createSvgObjectsFromSchematicComponent({
           component: elm,
           transform,
-          circuitJson
+          circuitJson,
+          colorMap: colorMap2
         })
       );
     } else if (elm.type === "schematic_trace") {
-      schTraceSvgs.push(...createSchematicTrace(elm, transform));
+      schTraceSvgs.push(
+        ...createSchematicTrace({
+          trace: elm,
+          transform,
+          colorMap: colorMap2
+        })
+      );
     } else if (elm.type === "schematic_net_label") {
-      schNetLabel.push(...createSvgObjectsForSchNetLabel(elm, transform));
+      schNetLabel.push(
+        ...createSvgObjectsForSchNetLabel({
+          schNetLabel: elm,
+          realToScreenTransform: transform,
+          colorMap: colorMap2
+        })
+      );
     } else if (elm.type === "schematic_text" && !elm.schematic_component_id) {
-      schText.push(createSvgSchText(elm, transform));
+      schText.push(
+        createSvgSchText({
+          elm,
+          transform,
+          colorMap: colorMap2
+        })
+      );
     } else if (elm.type === "schematic_voltage_probe") {
       voltageProbeSvgs.push(
-        ...createSvgObjectsFromSchVoltageProbe(elm, transform)
+        ...createSvgObjectsFromSchVoltageProbe({
+          probe: elm,
+          transform,
+          colorMap: colorMap2
+        })
       );
     }
   }
@@ -4347,7 +4437,7 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
       xmlns: "http://www.w3.org/2000/svg",
       width: svgWidth.toString(),
       height: svgHeight.toString(),
-      style: `background-color: ${colorMap.schematic.background}`,
+      style: `background-color: ${colorMap2.schematic.background}`,
       "data-real-to-screen-transform": toSVG(transform)
     },
     children: [
@@ -4361,21 +4451,21 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
             // DO NOT USE THESE CLASSES!!!!
             // PUT STYLES IN THE SVG OBJECTS THEMSELVES
             value: `
-              .boundary { fill: ${colorMap.schematic.background}; }
+              .boundary { fill: ${colorMap2.schematic.background}; }
               .schematic-boundary { fill: none; stroke: #fff; }
-              .component { fill: none; stroke: ${colorMap.schematic.component_outline}; }
-              .chip { fill: ${colorMap.schematic.component_body}; stroke: ${colorMap.schematic.component_outline}; }
-              .component-pin { fill: none; stroke: ${colorMap.schematic.component_outline}; }
+              .component { fill: none; stroke: ${colorMap2.schematic.component_outline}; }
+              .chip { fill: ${colorMap2.schematic.component_body}; stroke: ${colorMap2.schematic.component_outline}; }
+              .component-pin { fill: none; stroke: ${colorMap2.schematic.component_outline}; }
               .trace:hover {
                 filter: invert(1);
               }
               .trace:hover .trace-crossing-outline {
                 opacity: 0;
               }
-              .text { font-family: sans-serif; fill: ${colorMap.schematic.wire}; }
-              .pin-number { fill: ${colorMap.schematic.pin_number}; }
-              .port-label { fill: ${colorMap.schematic.reference}; }
-              .component-name { fill: ${colorMap.schematic.reference}; }
+              .text { font-family: sans-serif; fill: ${colorMap2.schematic.wire}; }
+              .pin-number { fill: ${colorMap2.schematic.pin_number}; }
+              .port-label { fill: ${colorMap2.schematic.reference}; }
+              .component-name { fill: ${colorMap2.schematic.reference}; }
             `,
             name: "",
             attributes: {},