circuit-to-svg 0.0.56 → 0.0.58

package/dist/index.js

@@ -979,9 +979,7 @@ var colorMap = {
 // lib/sch/convert-circuit-json-to-schematic-svg.ts
 import { stringify as stringify2 } from "svgson";
 import {
-  compose as compose4,
-  scale as scale2,
-  translate as translate4
+  fromTriangles
 } from "transformation-matrix";
 
 // lib/sch/draw-schematic-grid.ts
@@ -1038,12 +1036,13 @@ function drawSchematicGrid(params) {
           type: "element",
           attributes: {
             x: (point.x - 2.5).toString(),
-            y: (point.y - 2.5).toString(),
+            y: (point.y - 5).toString(),
             fill: colorMap.schematic.grid,
             "font-size": (cellSize / 5 * Math.abs(params.transform.a)).toString(),
             "fill-opacity": "0.5",
             "text-anchor": "middle",
-            "dominant-baseline": "middle"
+            "dominant-baseline": "middle",
+            "font-family": "sans-serif"
           },
           children: [
             {
@@ -1167,381 +1166,587 @@ function getSchematicBoundsFromCircuitJson(soup, padding = 0.5) {
   }
 }
 
-// lib/sch/svg-object-fns/create-svg-objects-from-sch-component.ts
+// lib/sch/svg-object-fns/create-svg-objects-from-sch-component-with-symbol.ts
 import { su } from "@tscircuit/soup-util";
-import { getSvg, symbols } from "schematic-symbols";
-import { parseSync } from "svgson";
-import { applyToPoint as applyToPoint14 } from "transformation-matrix";
-function createSchematicComponent({
-  component,
-  transform,
+import { symbols } from "schematic-symbols";
+import "svgson";
+import {
+  applyToPoint as applyToPoint15,
+  compose as compose5
+} from "transformation-matrix";
+
+// lib/utils/get-sch-stroke-size.ts
+var getSchStrokeSize = (transform) => {
+  return Math.abs(transform.a) * 0.02;
+};
+
+// lib/utils/match-sch-ports-with-symbol-ports.ts
+var getAngularDifference = (angle1, angle2) => {
+  const a1 = angle1 < 0 ? angle1 + 2 * Math.PI : angle1;
+  const a2 = angle2 < 0 ? angle2 + 2 * Math.PI : angle2;
+  let diff = Math.abs(a1 - a2);
+  if (diff > Math.PI) {
+    diff = 2 * Math.PI - diff;
+  }
+  return diff;
+};
+var matchSchPortsToSymbolPorts = ({
+  schPorts,
+  symbol,
+  schComponent
+}) => {
+  const schPortAngles = schPorts.map((port) => {
+    const dx = port.center.x - schComponent.center.x;
+    const dy = port.center.y - schComponent.center.y;
+    return {
+      port,
+      angle: Math.atan2(dy, dx)
+    };
+  });
+  const symbolPortAngles = symbol.ports.map((port) => {
+    const dx = port.x - symbol.center.x;
+    const dy = port.y - symbol.center.y;
+    return {
+      port,
+      angle: Math.atan2(dy, dx)
+    };
+  });
+  schPortAngles.sort((a, b) => a.angle - b.angle);
+  symbolPortAngles.sort((a, b) => a.angle - b.angle);
+  const matches = [];
+  const usedSymbolPorts = /* @__PURE__ */ new Set();
+  for (const schPortAngle of schPortAngles) {
+    let bestMatch = null;
+    for (const symbolPortAngle of symbolPortAngles) {
+      if (usedSymbolPorts.has(symbolPortAngle.port)) continue;
+      const angleDiff = getAngularDifference(
+        schPortAngle.angle,
+        symbolPortAngle.angle
+      );
+      if (bestMatch === null || angleDiff < bestMatch.angleDiff) {
+        bestMatch = {
+          symbolPort: symbolPortAngle.port,
+          angleDiff
+        };
+      }
+    }
+    if (bestMatch && bestMatch.angleDiff < Math.PI / 4) {
+      matches.push({
+        schPort: schPortAngle.port,
+        symbolPort: bestMatch.symbolPort
+      });
+      usedSymbolPorts.add(bestMatch.symbolPort);
+    }
+  }
+  return matches;
+};
+
+// lib/utils/point-pairs-to-matrix.ts
+import { compose as compose4, scale as scale2, translate as translate4 } from "transformation-matrix";
+function pointPairsToMatrix(a1, a2, b1, b2) {
+  const tx = a2.x - a1.x;
+  const ty = a2.y - a1.y;
+  const originalDistance = Math.sqrt((b1.x - a1.x) ** 2 + (b1.y - a1.y) ** 2);
+  const transformedDistance = Math.sqrt((b2.x - a2.x) ** 2 + (b2.y - a2.y) ** 2);
+  const a = transformedDistance / originalDistance;
+  const translateMatrix = translate4(tx, ty);
+  const scaleMatrix = scale2(a, a);
+  return compose4(translateMatrix, scaleMatrix);
+}
+
+// lib/utils/get-sch-font-size.ts
+import "transformation-matrix";
+var getSchFontSize = (transform, textType) => {
+  return Math.abs(transform.a) * (textType === "pin_number" ? 0.15 : 0.18);
+};
+
+// lib/sch/svg-object-fns/create-svg-objects-from-sch-component-with-symbol.ts
+var ninePointAnchorToTextAnchor = {
+  top_left: "start",
+  top_right: "end",
+  middle_left: "start",
+  middle_right: "end",
+  bottom_left: "start",
+  bottom_right: "end",
+  center: "middle",
+  middle_top: "middle",
+  middle_bottom: "middle"
+};
+var ninePointAnchorToDominantBaseline = {
+  top_left: "auto",
+  top_right: "auto",
+  bottom_left: "hanging",
+  bottom_right: "hanging",
+  center: "auto",
+  middle_left: "middle",
+  middle_right: "middle",
+  middle_top: "auto",
+  middle_bottom: "hanging"
+};
+var createSvgObjectsFromSchematicComponentWithSymbol = ({
+  component: schComponent,
+  transform: realToScreenTransform,
   circuitJson
-}) {
-  const { center, size, rotation, symbol_name: symbolName } = component;
-  const portLabels = component.port_labels;
-  const sourceComponentId = component.source_component_id;
-  const schematicComponentId = component.schematic_component_id;
-  const [transformedX, transformedY] = applyToPoint14(transform, [
-    center.x,
-    center.y
-  ]);
-  const componentScale = Math.abs(transform.a);
-  let componentChildren = [];
-  const textChildren = [];
-  const sourceComponent = circuitJson?.find(
-    (item) => item.type === "source_component" && item.source_component_id === sourceComponentId
+}) => {
+  const svgObjects = [];
+  const symbol = symbols[schComponent.symbol_name];
+  if (!symbol) return [];
+  const schPorts = su(circuitJson).schematic_port.list({
+    schematic_component_id: schComponent.schematic_component_id
+  });
+  const srcComponent = su(circuitJson).source_component.get(
+    schComponent.source_component_id
   );
-  const componentName = sourceComponent && "name" in sourceComponent ? sourceComponent.name : "";
-  const manufacturerNumber = sourceComponent && "manufacturer_part_number" in sourceComponent ? sourceComponent.manufacturer_part_number : "";
-  const resistance = sourceComponent && "resistance" in sourceComponent ? sourceComponent.resistance : "";
-  const capacitance = sourceComponent && "capacitance" in sourceComponent ? sourceComponent.capacitance : "";
-  if (symbolName) {
-    const symbol = symbols[symbolName];
-    const paths = symbol.primitives.filter((p) => p.type === "path");
-    const updatedSymbol = {
-      ...symbol,
-      primitives: paths
-    };
-    const svg = parseSync(
-      getSvg(updatedSymbol, {
-        width: size.width,
-        height: size.height
-      })
+  const schPortsWithSymbolPorts = matchSchPortsToSymbolPorts({
+    schPorts,
+    symbol,
+    schComponent
+  });
+  if (!schPortsWithSymbolPorts[0]) return [];
+  const transformFromSymbolToReal = pointPairsToMatrix(
+    schPortsWithSymbolPorts[1]?.symbolPort ?? symbol.center,
+    schPortsWithSymbolPorts[1]?.schPort.center ?? schComponent.center,
+    schPortsWithSymbolPorts[0].symbolPort,
+    schPortsWithSymbolPorts[0].schPort.center
+  );
+  const paths = symbol.primitives.filter((p) => p.type === "path");
+  const texts = symbol.primitives.filter((p) => p.type === "text");
+  const circles = symbol.primitives.filter((p) => p.type === "circle");
+  const boxes = symbol.primitives.filter((p) => p.type === "box");
+  for (const path of paths) {
+    const { points, color, closed, fill } = path;
+    svgObjects.push({
+      type: "element",
+      name: "path",
+      attributes: {
+        d: points.map((p, i) => {
+          const [x, y] = applyToPoint15(
+            compose5(realToScreenTransform, transformFromSymbolToReal),
+            [p.x, p.y]
+          );
+          return `${i === 0 ? "M" : "L"} ${x} ${y}`;
+        }).join(" ") + (closed ? " Z" : ""),
+        stroke: colorMap.schematic.component_outline,
+        fill: "none",
+        "stroke-width": `${getSchStrokeSize(realToScreenTransform)}px`
+      },
+      value: "",
+      children: []
+    });
+  }
+  for (const text of texts) {
+    const screenTextPos = applyToPoint15(
+      compose5(realToScreenTransform, transformFromSymbolToReal),
+      text
     );
-    componentChildren = svg.children.filter(
-      (child) => child.name === "path" && child.attributes.fill !== "green"
-    ).map((path) => {
-      const currentStrokeWidth = Number.parseFloat(
-        path.attributes["stroke-width"] || "0.02"
-      );
-      return {
-        ...path,
-        attributes: {
-          ...path.attributes,
-          stroke: path.attributes.stroke === "black" ? `${colorMap.schematic.component_outline}` : path.attributes.stroke,
-          "stroke-width": currentStrokeWidth.toString()
+    let textValue = "";
+    if (text.text === "{REF}") {
+      textValue = srcComponent?.name ?? "";
+    } else if (text.text === "{VAL}") {
+      textValue = srcComponent?.display_value ?? srcComponent.capacitance ?? srcComponent.resistance;
+    }
+    svgObjects.push({
+      name: "text",
+      type: "element",
+      attributes: {
+        x: screenTextPos.x.toString(),
+        y: screenTextPos.y.toString(),
+        "dominant-baseline": ninePointAnchorToDominantBaseline[text.anchor],
+        "text-anchor": ninePointAnchorToTextAnchor[text.anchor],
+        "font-family": "sans-serif",
+        "font-size": `${getSchFontSize(realToScreenTransform, "reference_designator")}px`
+      },
+      value: "",
+      children: [
+        {
+          type: "text",
+          value: textValue,
+          name: "",
+          attributes: {},
+          children: []
         }
-      };
+      ]
     });
-    if (resistance || capacitance) {
-      const [textX, textY] = applyToPoint14(transform, [
-        center.x,
-        center.y - size.height / 2 - 0.2
-      ]);
-      const labelOffset = componentScale * 0.4;
-      textChildren.push({
-        name: "text",
-        type: "element",
-        attributes: {
-          class: "component-name",
-          x: textX.toString(),
-          y: textY.toString(),
-          "text-anchor": "middle",
-          "dominant-baseline": "auto",
-          "font-size": "0.2"
-        },
-        children: [
-          {
-            type: "text",
-            value: (resistance || capacitance || "").toString(),
-            name: "",
-            attributes: {},
-            children: []
-          }
-        ],
-        value: ""
-      });
-      textChildren.push({
-        name: "text",
-        type: "element",
-        attributes: {
-          class: "component-name",
-          x: textX.toString(),
-          y: (textY - labelOffset).toString(),
-          "text-anchor": "middle",
-          "dominant-baseline": "auto",
-          "font-size": "0.2"
-        },
-        children: [
-          {
-            type: "text",
-            value: componentName || "",
-            name: "",
-            attributes: {},
-            children: []
-          }
-        ],
-        value: ""
-      });
-    }
-  } else {
-    componentChildren.push({
+  }
+  for (const box of boxes) {
+    const screenBoxPos = applyToPoint15(
+      compose5(realToScreenTransform, transformFromSymbolToReal),
+      box
+    );
+    const symbolToScreenScale = compose5(
+      realToScreenTransform,
+      transformFromSymbolToReal
+    ).a;
+    svgObjects.push({
       name: "rect",
       type: "element",
-      value: "",
       attributes: {
-        class: "component chip",
-        x: (-size.width / 2).toString(),
-        y: (-size.height / 2).toString(),
-        width: size.width.toString(),
-        height: size.height.toString(),
-        "stroke-width": "0.02"
+        x: screenBoxPos.x.toString(),
+        y: screenBoxPos.y.toString(),
+        width: (box.width * symbolToScreenScale).toString(),
+        height: (box.height * symbolToScreenScale).toString(),
+        fill: "red"
       },
+      value: "",
       children: []
     });
-    if (manufacturerNumber) {
-      const [textX, textY] = applyToPoint14(transform, [
-        center.x,
-        // Center X position
-        center.y - size.height / 2 - 0.5
-        // Above the component top edge
-      ]);
-      const labelOffset = componentScale * 0.4;
-      textChildren.push({
-        name: "text",
-        type: "element",
-        attributes: {
-          class: "component-name",
-          x: textX.toString(),
-          y: textY.toString(),
-          "text-anchor": "right",
-          // Center align text
-          "dominant-baseline": "auto",
-          "font-size": "0.2"
-        },
-        children: [
-          {
-            type: "text",
-            value: manufacturerNumber,
-            name: "",
-            attributes: {},
-            children: []
-          }
-        ],
-        value: ""
-      });
-      textChildren.push({
-        name: "text",
-        type: "element",
-        attributes: {
-          class: "component-name",
-          x: textX.toString(),
-          y: (textY - labelOffset).toString(),
-          "text-anchor": "right",
-          // Center align text
-          "dominant-baseline": "auto",
-          "font-size": "0.2"
-        },
-        children: [
-          {
-            type: "text",
-            value: componentName || "",
-            name: "",
-            attributes: {},
-            children: []
-          }
-        ],
-        value: ""
-      });
-    }
-    const schematicPorts = su(circuitJson).schematic_port.list({
-      schematic_component_id: schematicComponentId
+  }
+  for (const port of symbol.ports) {
+    const screenPortPos = applyToPoint15(
+      compose5(realToScreenTransform, transformFromSymbolToReal),
+      port
+    );
+    svgObjects.push({
+      type: "element",
+      name: "circle",
+      attributes: {
+        cx: screenPortPos.x.toString(),
+        cy: screenPortPos.y.toString(),
+        r: `${realToScreenTransform.a * 0.02}px`,
+        fill: "none",
+        stroke: colorMap.schematic.component_outline
+      },
+      value: "",
+      children: []
     });
-    const portLength = 0.2;
-    const circleRadius = 0.05;
-    for (const schPort of schematicPorts) {
-      const { x: portX, y: portY } = schPort.center;
-      const srcPort = su(circuitJson).source_port.get(
-        schPort.source_port_id
-      );
-      const pinNumber = srcPort?.pin_number;
-      const relX = portX - center.x;
-      const relY = portY - center.y;
-      let endX = relX;
-      let endY = relY;
-      const portSide = schPort.side ?? schPort.center.side;
-      if (portSide === "center") {
-        continue;
-      }
-      switch (portSide) {
-        case "left":
-          endX = relX + portLength;
-          break;
-        case "right":
-          endX = relX - portLength;
-          break;
-        case "top":
-          endY = relY + portLength;
-          break;
-        case "bottom":
-          endY = relY - portLength;
-          break;
-      }
-      componentChildren.push({
-        name: "line",
-        type: "element",
-        attributes: {
-          class: "component-pin",
-          x1: relX.toString(),
-          y1: relY.toString(),
-          x2: endX.toString(),
-          y2: endY.toString(),
-          "stroke-width": "0.02"
-        },
-        value: "",
-        children: []
-      });
-      componentChildren.push({
-        name: "circle",
-        type: "element",
-        attributes: {
-          class: "component-pin",
-          cx: relX.toString(),
-          cy: relY.toString(),
-          r: circleRadius.toString(),
-          "stroke-width": "0.02"
-        },
-        value: "",
-        children: []
-      });
-      const [portEndX, portEndY] = applyToPoint14(transform, [
-        center.x + endX,
-        center.y + endY
-      ]);
-      const labelKey = `pin${pinNumber}`;
-      if (portLabels && labelKey in portLabels) {
-        const labelText = portLabels[labelKey];
-        let labelX = portEndX;
-        let labelY = portEndY;
-        let textAnchor = "middle";
-        let rotation2 = 0;
-        const labelOffset = 0.1 * componentScale;
-        switch (portSide) {
-          case "left":
-            labelX += labelOffset;
-            textAnchor = "start";
-            break;
-          case "right":
-            labelX -= labelOffset;
-            textAnchor = "end";
-            break;
-          case "top":
-            labelY += labelOffset * 6;
-            textAnchor = "start";
-            rotation2 = -90;
-            break;
-          case "bottom":
-            labelY -= labelOffset * 6;
-            textAnchor = "end";
-            rotation2 = -90;
-            break;
-        }
-        textChildren.push({
-          name: "text",
-          type: "element",
-          attributes: {
-            class: "port-label",
-            x: labelX.toString(),
-            y: labelY.toString(),
-            "text-anchor": textAnchor,
-            "dominant-baseline": "middle",
-            "font-size": (0.2 * componentScale).toString(),
-            transform: rotation2 ? `rotate(${rotation2}, ${labelX}, ${labelY})` : ""
-          },
-          children: [
-            {
-              type: "text",
-              value: labelText,
-              name: "",
-              attributes: {},
-              children: []
-            }
-          ],
-          value: ""
-        });
-      }
-      const pinNumberOffset = 0.2;
-      let pinX = endX;
-      let pinY = endY;
-      let dominantBaseline = "auto";
-      switch (portSide) {
-        case "top":
-          pinY = portY - pinNumberOffset;
-          pinX = portX;
-          dominantBaseline = "auto";
-          break;
-        case "bottom":
-          pinY = portY + pinNumberOffset;
-          pinX = portX;
-          dominantBaseline = "hanging";
-          break;
-        case "left":
-          pinX = portX - pinNumberOffset;
-          pinY = portY + pinNumberOffset / 4;
-          dominantBaseline = "auto";
-          break;
-        case "right":
-          pinX = portX + pinNumberOffset;
-          pinY = portY + pinNumberOffset / 4;
-          dominantBaseline = "auto";
-          break;
-      }
-      const [transformedPinX, transformedPinY] = applyToPoint14(transform, [
-        pinX,
-        pinY
-      ]);
-      textChildren.push({
-        name: "text",
-        type: "element",
-        attributes: {
-          class: "pin-number",
-          x: transformedPinX.toString(),
-          y: transformedPinY.toString(),
-          "text-anchor": "middle",
-          "dominant-baseline": dominantBaseline,
-          "font-size": (0.15 * componentScale).toString()
-        },
-        children: [
-          {
-            type: "text",
-            value: pinNumber?.toString() || "",
-            name: "",
-            attributes: {},
-            children: []
-          }
-        ],
-        value: ""
-      });
-    }
   }
-  const componentGroup = {
-    name: "g",
+  return svgObjects;
+};
+
+// lib/sch/svg-object-fns/create-svg-objects-from-sch-component-with-box.ts
+import { su as su4 } from "@tscircuit/soup-util";
+import "schematic-symbols";
+import "svgson";
+import { applyToPoint as applyToPoint20 } from "transformation-matrix";
+
+// lib/sch/svg-object-fns/create-svg-objects-from-sch-port-on-box.ts
+import "transformation-matrix";
+import "@tscircuit/soup-util";
+
+// lib/sch/svg-object-fns/create-svg-objects-for-sch-port-box-line.ts
+import { applyToPoint as applyToPoint16 } from "transformation-matrix";
+import { su as su2 } from "@tscircuit/soup-util";
+var PIN_CIRCLE_RADIUS_MM = 0.02;
+var createSvgObjectsForSchPortBoxLine = ({
+  schPort,
+  schComponent,
+  transform,
+  circuitJson
+}) => {
+  const svgObjects = [];
+  const srcPort = su2(circuitJson).source_port.get(schPort.source_port_id);
+  const realEdgePos = {
+    x: schPort.center.x,
+    y: schPort.center.y
+  };
+  const realPinLineLength = schPort.distance_from_component_edge ?? 0.4;
+  switch (schPort.side_of_component) {
+    case "left":
+      realEdgePos.x += realPinLineLength;
+      break;
+    case "right":
+      realEdgePos.x -= realPinLineLength;
+      break;
+    case "top":
+      realEdgePos.y -= realPinLineLength;
+      break;
+    case "bottom":
+      realEdgePos.y += realPinLineLength;
+      break;
+  }
+  const screenSchPortPos = applyToPoint16(transform, schPort.center);
+  const screenRealEdgePos = applyToPoint16(transform, realEdgePos);
+  const realLineEnd = { ...schPort.center };
+  switch (schPort.side_of_component) {
+    case "left":
+      realLineEnd.x += PIN_CIRCLE_RADIUS_MM;
+      break;
+    case "right":
+      realLineEnd.x -= PIN_CIRCLE_RADIUS_MM;
+      break;
+    case "top":
+      realLineEnd.y -= PIN_CIRCLE_RADIUS_MM;
+      break;
+    case "bottom":
+      realLineEnd.y += PIN_CIRCLE_RADIUS_MM;
+      break;
+  }
+  const screenLineEnd = applyToPoint16(transform, realLineEnd);
+  svgObjects.push({
+    name: "line",
+    type: "element",
+    attributes: {
+      class: "component-pin",
+      x1: screenLineEnd.x.toString(),
+      y1: screenLineEnd.y.toString(),
+      x2: screenRealEdgePos.x.toString(),
+      y2: screenRealEdgePos.y.toString(),
+      "stroke-width": `${getSchStrokeSize(transform)}px`
+    },
     value: "",
+    children: []
+  });
+  svgObjects.push({
+    name: "circle",
     type: "element",
     attributes: {
-      transform: `translate(${transformedX}, ${transformedY}) rotate(${rotation * 180 / Math.PI}) scale(${componentScale})`
+      class: "component-pin",
+      cx: screenSchPortPos.x.toString(),
+      cy: screenSchPortPos.y.toString(),
+      r: (Math.abs(transform.a) * PIN_CIRCLE_RADIUS_MM).toString(),
+      "stroke-width": `${getSchStrokeSize(transform)}px`
     },
-    children: componentChildren
-  };
-  const textGroup = {
-    name: "g",
     value: "",
+    children: []
+  });
+  return svgObjects;
+};
+
+// lib/utils/get-unit-vector-from-outside-to-edge.ts
+var getUnitVectorFromOutsideToEdge = (side) => {
+  switch (side) {
+    case "top":
+      return { x: 0, y: -1 };
+    case "bottom":
+      return { x: 0, y: 1 };
+    case "left":
+      return { x: 1, y: 0 };
+    case "right":
+      return { x: -1, y: 0 };
+  }
+  throw new Error(`Invalid side: ${side}`);
+};
+
+// lib/sch/svg-object-fns/create-svg-objects-for-sch-port-pin-number-text.ts
+import { applyToPoint as applyToPoint17 } from "transformation-matrix";
+var createSvgObjectsForSchPortPinNumberText = (params) => {
+  const svgObjects = [];
+  const { schPort, schComponent, transform, circuitJson } = params;
+  const realPinNumberPos = {
+    x: schPort.center.x,
+    y: schPort.center.y
+  };
+  if (!schPort.side_of_component) return [];
+  const vecToEdge = getUnitVectorFromOutsideToEdge(schPort.side_of_component);
+  const realPinEdgeDistance = schPort.distance_from_component_edge ?? 0.4;
+  realPinNumberPos.x += vecToEdge.x * realPinEdgeDistance / 2;
+  realPinNumberPos.y += vecToEdge.y * realPinEdgeDistance / 2;
+  const screenPinNumberTextPos = applyToPoint17(transform, realPinNumberPos);
+  if (schPort.side_of_component === "top" || schPort.side_of_component === "bottom") {
+    screenPinNumberTextPos.x -= 2;
+  } else {
+    screenPinNumberTextPos.y -= 2;
+  }
+  svgObjects.push({
+    name: "text",
     type: "element",
-    attributes: {},
-    children: textChildren
+    attributes: {
+      class: "pin-number",
+      x: screenPinNumberTextPos.x.toString(),
+      y: screenPinNumberTextPos.y.toString(),
+      style: "font-family: sans-serif;",
+      fill: colorMap.schematic.pin_number,
+      "text-anchor": "middle",
+      "dominant-baseline": "auto",
+      "font-size": `${getSchFontSize(transform, "pin_number")}px`,
+      transform: schPort.side_of_component === "top" || schPort.side_of_component === "bottom" ? `rotate(-90 ${screenPinNumberTextPos.x} ${screenPinNumberTextPos.y})` : ""
+    },
+    children: [
+      {
+        type: "text",
+        value: schPort.pin_number?.toString() || "",
+        name: "",
+        attributes: {},
+        children: []
+      }
+    ],
+    value: ""
+  });
+  return svgObjects;
+};
+
+// lib/sch/svg-object-fns/create-svg-objects-for-sch-port-pin-label.ts
+import { applyToPoint as applyToPoint18 } from "transformation-matrix";
+var LABEL_DIST_FROM_EDGE_MM = 0.1;
+var createSvgObjectsForSchPortPinLabel = (params) => {
+  const svgObjects = [];
+  const { schPort, schComponent, transform, circuitJson } = params;
+  const realPinNumberPos = {
+    x: schPort.center.x,
+    y: schPort.center.y
   };
-  return [componentGroup, textGroup];
+  if (!schPort.side_of_component) return [];
+  const vecToEdge = getUnitVectorFromOutsideToEdge(schPort.side_of_component);
+  const realPinEdgeDistance = schPort.distance_from_component_edge ?? 0.4;
+  realPinNumberPos.x += vecToEdge.x * (realPinEdgeDistance + LABEL_DIST_FROM_EDGE_MM);
+  realPinNumberPos.y += vecToEdge.y * (realPinEdgeDistance + LABEL_DIST_FROM_EDGE_MM);
+  const screenPinNumberTextPos = applyToPoint18(transform, realPinNumberPos);
+  const label = schComponent.port_labels?.[`pin${schPort.pin_number}`];
+  if (!label) return [];
+  svgObjects.push({
+    name: "text",
+    type: "element",
+    attributes: {
+      class: "pin-number",
+      x: screenPinNumberTextPos.x.toString(),
+      y: screenPinNumberTextPos.y.toString(),
+      style: "font-family: sans-serif;",
+      fill: colorMap.schematic.pin_number,
+      "text-anchor": schPort.side_of_component === "left" ? "start" : "end",
+      "dominant-baseline": "middle",
+      "font-size": `${getSchFontSize(transform, "pin_number")}px`,
+      transform: schPort.side_of_component === "top" || schPort.side_of_component === "bottom" ? `rotate(-90 ${screenPinNumberTextPos.x} ${screenPinNumberTextPos.y})` : ""
+    },
+    children: [
+      {
+        type: "text",
+        value: label || "",
+        name: "",
+        attributes: {},
+        children: []
+      }
+    ],
+    value: ""
+  });
+  return svgObjects;
+};
+
+// lib/sch/svg-object-fns/create-svg-objects-from-sch-port-on-box.ts
+var createSvgObjectsFromSchPortOnBox = (params) => {
+  const svgObjects = [];
+  const { schPort, schComponent, transform, circuitJson } = params;
+  svgObjects.push(...createSvgObjectsForSchPortBoxLine(params));
+  svgObjects.push(...createSvgObjectsForSchPortPinNumberText(params));
+  svgObjects.push(...createSvgObjectsForSchPortPinLabel(params));
+  return svgObjects;
+};
+
+// lib/sch/svg-object-fns/create-svg-objects-from-sch-component-with-box.ts
+var createSvgObjectsFromSchematicComponentWithBox = ({
+  component: schComponent,
+  transform,
+  circuitJson
+}) => {
+  const srcComponent = su4(circuitJson).source_component.get(
+    schComponent.source_component_id
+  );
+  const svgObjects = [];
+  const componentScreenTopLeft = applyToPoint20(transform, {
+    x: schComponent.center.x - schComponent.size.width / 2,
+    y: schComponent.center.y + schComponent.size.height / 2
+  });
+  const componentScreenBottomRight = applyToPoint20(transform, {
+    x: schComponent.center.x + schComponent.size.width / 2,
+    y: schComponent.center.y - schComponent.size.height / 2
+  });
+  const componentScreenWidth = componentScreenBottomRight.x - componentScreenTopLeft.x;
+  const componentScreenHeight = componentScreenBottomRight.y - componentScreenTopLeft.y;
+  svgObjects.push({
+    name: "rect",
+    type: "element",
+    value: "",
+    attributes: {
+      class: "component chip",
+      x: componentScreenTopLeft.x.toString(),
+      y: componentScreenTopLeft.y.toString(),
+      width: componentScreenWidth.toString(),
+      height: componentScreenHeight.toString(),
+      "stroke-width": `${getSchStrokeSize(transform)}px`
+    },
+    children: []
+  });
+  const screenManufacturerNumberPos = applyToPoint20(transform, {
+    x: schComponent.center.x + schComponent.size.width / 2,
+    y: schComponent.center.y + schComponent.size.height / 2 + 0.5
+    // Above the component top edge
+  });
+  const fontSizePx = getSchFontSize(transform, "manufacturer_number");
+  if (srcComponent?.manufacturer_part_number) {
+    svgObjects.push({
+      name: "text",
+      type: "element",
+      attributes: {
+        class: "component-name",
+        x: screenManufacturerNumberPos.x.toString(),
+        y: screenManufacturerNumberPos.y.toString(),
+        "font-family": "sans-serif",
+        "text-anchor": "right",
+        // Center align text
+        "dominant-baseline": "auto",
+        "font-size": `${fontSizePx}px`
+      },
+      children: [
+        {
+          type: "text",
+          value: srcComponent.manufacturer_part_number,
+          name: "",
+          attributes: {},
+          children: []
+        }
+      ],
+      value: ""
+    });
+  }
+  if (srcComponent?.name) {
+    svgObjects.push({
+      name: "text",
+      type: "element",
+      attributes: {
+        class: "component-name",
+        x: screenManufacturerNumberPos.x.toString(),
+        y: (screenManufacturerNumberPos.y + fontSizePx * 1.1).toString(),
+        "font-family": "sans-serif",
+        "text-anchor": "right",
+        // Center align text
+        "dominant-baseline": "auto",
+        "font-size": `${fontSizePx}px`
+      },
+      children: [
+        {
+          type: "text",
+          value: srcComponent.name || "",
+          name: "",
+          attributes: {},
+          children: []
+        }
+      ],
+      value: ""
+    });
+  }
+  const schematicPorts = su4(circuitJson).schematic_port.list({
+    schematic_component_id: schComponent.schematic_component_id
+  });
+  for (const schPort of schematicPorts) {
+    svgObjects.push(
+      ...createSvgObjectsFromSchPortOnBox({
+        schPort,
+        schComponent,
+        transform,
+        circuitJson
+      })
+    );
+  }
+  return svgObjects;
+};
+
+// lib/sch/svg-object-fns/create-svg-objects-from-sch-component.ts
+function createSvgObjectsFromSchematicComponent(params) {
+  const { component } = params;
+  if (component.symbol_name) {
+    return createSvgObjectsFromSchematicComponentWithSymbol(params);
+  }
+  return createSvgObjectsFromSchematicComponentWithBox(params);
 }
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-debug-object.ts
-import { applyToPoint as applyToPoint15 } from "transformation-matrix";
+import { applyToPoint as applyToPoint21 } from "transformation-matrix";
 function createSvgObjectsFromSchDebugObject(debugObject, transform) {
   if (debugObject.shape === "rect") {
-    let [screenLeft, screenTop] = applyToPoint15(transform, [
+    let [screenLeft, screenTop] = applyToPoint21(transform, [
       debugObject.center.x - debugObject.size.width / 2,
       debugObject.center.y - debugObject.size.height / 2
     ]);
-    let [screenRight, screenBottom] = applyToPoint15(transform, [
+    let [screenRight, screenBottom] = applyToPoint21(transform, [
       debugObject.center.x + debugObject.size.width / 2,
       debugObject.center.y + debugObject.size.height / 2
     ]);
@@ -1551,7 +1756,7 @@ function createSvgObjectsFromSchDebugObject(debugObject, transform) {
     ];
     const width = Math.abs(screenRight - screenLeft);
     const height = Math.abs(screenBottom - screenTop);
-    const [screenCenterX, screenCenterY] = applyToPoint15(transform, [
+    const [screenCenterX, screenCenterY] = applyToPoint21(transform, [
       debugObject.center.x,
       debugObject.center.y
     ]);
@@ -1597,11 +1802,11 @@ function createSvgObjectsFromSchDebugObject(debugObject, transform) {
     ];
   }
   if (debugObject.shape === "line") {
-    const [screenStartX, screenStartY] = applyToPoint15(transform, [
+    const [screenStartX, screenStartY] = applyToPoint21(transform, [
       debugObject.start.x,
       debugObject.start.y
     ]);
-    const [screenEndX, screenEndY] = applyToPoint15(transform, [
+    const [screenEndX, screenEndY] = applyToPoint21(transform, [
       debugObject.end.x,
       debugObject.end.y
     ]);
@@ -1651,7 +1856,7 @@ function createSvgObjectsFromSchDebugObject(debugObject, transform) {
 }
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-trace.ts
-import { applyToPoint as applyToPoint16 } from "transformation-matrix";
+import { applyToPoint as applyToPoint22 } from "transformation-matrix";
 function createSchematicTrace(trace, transform) {
   const edges = trace.edges;
   if (edges.length === 0) return [];
@@ -1665,11 +1870,11 @@ function createSchematicTrace(trace, transform) {
       x: edge.to.x ?? edge.to.center?.x,
       y: edge.to.y ?? edge.to.center?.y
     };
-    const [transformedFromX, transformedFromY] = applyToPoint16(transform, [
+    const [transformedFromX, transformedFromY] = applyToPoint22(transform, [
       fromPoint.x,
       fromPoint.y
     ]);
-    const [transformedToX, transformedToY] = applyToPoint16(transform, [
+    const [transformedToX, transformedToY] = applyToPoint22(transform, [
       toPoint.x,
       toPoint.y
     ]);
@@ -1686,8 +1891,9 @@ function createSchematicTrace(trace, transform) {
       attributes: {
         class: "trace",
         d: path,
-        "stroke-width": (0.02 * Math.abs(transform.a)).toString()
-        // Scale stroke width with transform
+        stroke: colorMap.schematic.wire,
+        fill: "none",
+        "stroke-width": `${getSchStrokeSize(transform)}px`
       },
       value: "",
       children: []
@@ -1697,24 +1903,38 @@ function createSchematicTrace(trace, transform) {
 
 // lib/sch/convert-circuit-json-to-schematic-svg.ts
 function convertCircuitJsonToSchematicSvg(circuitJson, options) {
-  const bounds = getSchematicBoundsFromCircuitJson(circuitJson);
-  const { minX, minY, maxX, maxY } = bounds;
-  const padding = 1;
-  const circuitWidth = maxX - minX + 2 * padding;
-  const circuitHeight = maxY - minY + 2 * padding;
+  const realBounds = getSchematicBoundsFromCircuitJson(circuitJson);
+  const realWidth = realBounds.maxX - realBounds.minX;
+  const realHeight = realBounds.maxY - realBounds.minY;
   const svgWidth = options?.width ?? 1200;
   const svgHeight = options?.height ?? 600;
-  const scaleX = svgWidth / circuitWidth;
-  const scaleY = svgHeight / circuitHeight;
-  const scaleFactor = Math.min(scaleX, scaleY);
-  const offsetX = (svgWidth - circuitWidth * scaleFactor) / 2;
-  const offsetY = (svgHeight - circuitHeight * scaleFactor) / 2;
-  const transform = compose4(
-    translate4(
-      offsetX - minX * scaleFactor + padding * scaleFactor,
-      svgHeight - offsetY + minY * scaleFactor - padding * scaleFactor
-    ),
-    scale2(scaleFactor, scaleFactor)
+  const circuitAspectRatio = realWidth / realHeight;
+  const containerAspectRatio = svgWidth / svgHeight;
+  let screenPaddingPx;
+  if (circuitAspectRatio > containerAspectRatio) {
+    const newHeight = svgWidth / circuitAspectRatio;
+    screenPaddingPx = {
+      x: 0,
+      y: (svgHeight - newHeight) / 2
+    };
+  } else {
+    const newWidth = svgHeight * circuitAspectRatio;
+    screenPaddingPx = {
+      x: (svgWidth - newWidth) / 2,
+      y: 0
+    };
+  }
+  const transform = fromTriangles(
+    [
+      { x: realBounds.minX, y: realBounds.maxY },
+      { x: realBounds.maxX, y: realBounds.maxY },
+      { x: realBounds.maxX, y: realBounds.minY }
+    ],
+    [
+      { x: screenPaddingPx.x, y: screenPaddingPx.y },
+      { x: svgWidth - screenPaddingPx.x, y: screenPaddingPx.y },
+      { x: svgWidth - screenPaddingPx.x, y: svgHeight - screenPaddingPx.y }
+    ]
   );
   const svgChildren = [];
   svgChildren.push({
@@ -1732,7 +1952,9 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
   });
   if (options?.grid) {
     const gridConfig = typeof options.grid === "object" ? options.grid : {};
-    svgChildren.push(drawSchematicGrid({ bounds, transform, ...gridConfig }));
+    svgChildren.push(
+      drawSchematicGrid({ bounds: realBounds, transform, ...gridConfig })
+    );
   }
   if (options?.labeledPoints) {
     svgChildren.push(
@@ -1752,7 +1974,7 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
       );
     } else if (elm.type === "schematic_component") {
       schComponentSvgs.push(
-        ...createSchematicComponent({
+        ...createSvgObjectsFromSchematicComponent({
           component: elm,
           transform,
           circuitJson
@@ -1780,17 +2002,19 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
         children: [
           {
             type: "text",
+            // DO NOT USE THESE CLASSES!!!!
+            // PUT STYLES IN THE SVG OBJECTS THEMSELVES
             value: `
               .boundary { fill: ${colorMap.schematic.background}; }
-              .schematic-boundary { fill: none; stroke: #fff; stroke-width: 0.3; }
+              .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}; }
-              .trace { stroke: ${colorMap.schematic.wire}; stroke-width: ${0.02 * scaleFactor}; fill: none; }
-              .text { font-family: Arial, sans-serif; font-size: ${0.2 * scaleFactor}px; fill: ${colorMap.schematic.wire}; }
-              .pin-number { font-size: ${0.15 * scaleFactor}px; fill: ${colorMap.schematic.pin_number}; }
+              .trace { stroke: ${colorMap.schematic.wire}; }
+              .text { font-family: sans-serif; fill: ${colorMap.schematic.wire}; }
+              .pin-number { fill: ${colorMap.schematic.pin_number}; }
               .port-label { fill: ${colorMap.schematic.reference}; }
-              .component-name { font-size: ${0.25 * scaleFactor}px; fill: ${colorMap.schematic.reference}; }
+              .component-name { fill: ${colorMap.schematic.reference}; }
             `,
             name: "",
             attributes: {},