circuit-to-svg 0.0.49 → 0.0.50

package/dist/index.js

@@ -976,82 +976,55 @@ var colorMap = {
   }
 };
 
-// lib/sch/get-schematic-bounds-from-circuit-json.ts
-function getSchematicBoundsFromCircuitJson(soup, padding = 0.5) {
-  let minX = Number.POSITIVE_INFINITY;
-  let minY = Number.POSITIVE_INFINITY;
-  let maxX = Number.NEGATIVE_INFINITY;
-  let maxY = Number.NEGATIVE_INFINITY;
-  const portSize = 0.2;
-  for (const item of soup) {
-    if (item.type === "schematic_component") {
-      updateBounds(item.center, item.size, item.rotation || 0);
-    } else if (item.type === "schematic_port") {
-      updateBounds(item.center, { width: portSize, height: portSize }, 0);
-    } else if (item.type === "schematic_debug_object") {
-      if (item.shape === "rect") {
-        updateBounds(item.center, item.size, 0);
-      } else if (item.shape === "line") {
-        updateBounds(item.start, { width: 0.1, height: 0.1 }, 0);
-        updateBounds(item.end, { width: 0.1, height: 0.1 }, 0);
-      }
-    }
-  }
-  minX -= padding;
-  minY -= padding;
-  maxX += padding;
-  maxY += padding;
-  return { minX, minY, maxX, maxY };
-  function updateBounds(center, size, rotation) {
-    const corners = [
-      { x: -size.width / 2, y: -size.height / 2 },
-      { x: size.width / 2, y: -size.height / 2 },
-      { x: size.width / 2, y: size.height / 2 },
-      { x: -size.width / 2, y: size.height / 2 }
-    ];
-    for (const corner of corners) {
-      const rotatedX = corner.x * Math.cos(rotation) - corner.y * Math.sin(rotation) + center.x;
-      const rotatedY = corner.x * Math.sin(rotation) + corner.y * Math.cos(rotation) + center.y;
-      minX = Math.min(minX, rotatedX);
-      minY = Math.min(minY, rotatedY);
-      maxX = Math.max(maxX, rotatedX);
-      maxY = Math.max(maxY, rotatedY);
-    }
-  }
-}
+// 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
+} from "transformation-matrix";
 
 // lib/sch/draw-schematic-grid.ts
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 function drawSchematicGrid(params) {
   const { minX, minY, maxX, maxY } = params.bounds;
   const cellSize = params.cellSize ?? 1;
   const labelCells = params.labelCells ?? false;
   const gridLines = [];
+  const transformPoint = (x, y) => {
+    const [transformedX, transformedY] = applyToPoint12(params.transform, [x, y]);
+    return { x: transformedX, y: transformedY };
+  };
   for (let x = Math.ceil(minX); x <= Math.floor(maxX); x += cellSize) {
+    const start = transformPoint(x, minY);
+    const end = transformPoint(x, maxY);
     gridLines.push({
       name: "line",
       type: "element",
       attributes: {
-        x1: x.toString(),
-        y1: minY.toString(),
-        x2: x.toString(),
-        y2: maxY.toString(),
+        x1: start.x.toString(),
+        y1: start.y.toString(),
+        x2: end.x.toString(),
+        y2: end.y.toString(),
         stroke: colorMap.schematic.grid,
-        "stroke-width": "0.01",
+        "stroke-width": (0.01 * Math.abs(params.transform.a)).toString(),
         "stroke-opacity": "0.5"
       }
     });
   }
   for (let y = Math.ceil(minY); y <= Math.floor(maxY); y += cellSize) {
+    const start = transformPoint(minX, y);
+    const end = transformPoint(maxX, y);
     gridLines.push({
       name: "line",
       type: "element",
       attributes: {
-        x1: minX.toString(),
-        y1: y.toString(),
-        x2: maxX.toString(),
-        y2: y.toString(),
+        x1: start.x.toString(),
+        y1: start.y.toString(),
+        x2: end.x.toString(),
+        y2: end.y.toString(),
         stroke: colorMap.schematic.grid,
-        "stroke-width": "0.01",
+        "stroke-width": (0.01 * Math.abs(params.transform.a)).toString(),
         "stroke-opacity": "0.5"
       }
     });
@@ -1059,15 +1032,18 @@ function drawSchematicGrid(params) {
   if (labelCells) {
     for (let x = Math.ceil(minX); x <= Math.floor(maxX); x += cellSize) {
       for (let y = Math.ceil(minY); y <= Math.floor(maxY); y += cellSize) {
+        const point = transformPoint(x, y);
         gridLines.push({
           name: "text",
           type: "element",
           attributes: {
-            x: x.toString(),
-            y: y.toString(),
+            x: point.x.toString(),
+            y: point.y.toString(),
             fill: colorMap.schematic.grid,
-            "font-size": (cellSize / 6).toString(),
-            "fill-opacity": "0.5"
+            "font-size": (cellSize / 6 * Math.abs(params.transform.a)).toString(),
+            "fill-opacity": "0.5",
+            "text-anchor": "middle",
+            "dominant-baseline": "middle"
           },
           children: [
             {
@@ -1092,29 +1068,40 @@ function drawSchematicGrid(params) {
 }
 
 // lib/sch/draw-schematic-labeled-points.ts
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 function drawSchematicLabeledPoints(params) {
   const { points, transform } = params;
   const labeledPointsGroup = [];
   for (const point of points) {
+    const [x1, y1] = applyToPoint13(transform, [point.x - 0.1, -(point.y - 0.1)]);
+    const [x2, y2] = applyToPoint13(transform, [point.x + 0.1, -(point.y + 0.1)]);
+    const [x3, y3] = applyToPoint13(transform, [point.x - 0.1, -(point.y + 0.1)]);
+    const [x4, y4] = applyToPoint13(transform, [point.x + 0.1, -(point.y - 0.1)]);
     labeledPointsGroup.push({
       name: "path",
       type: "element",
       attributes: {
-        d: `M${point.x - 0.1},${point.y - 0.1} L${point.x + 0.1},${point.y + 0.1} M${point.x - 0.1},${point.y + 0.1} L${point.x + 0.1},${point.y - 0.1}`,
+        d: `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`,
         stroke: colorMap.schematic.grid,
-        "stroke-width": "0.02",
+        "stroke-width": (0.02 * Math.abs(transform.a)).toString(),
         "stroke-opacity": "0.7"
       }
     });
+    const [labelX, labelY] = applyToPoint13(transform, [
+      point.x + 0.15,
+      -(point.y - 0.15)
+    ]);
     labeledPointsGroup.push({
       name: "text",
       type: "element",
       attributes: {
-        x: (point.x + 0.15).toString(),
-        y: (point.y - 0.15).toString(),
+        x: labelX.toString(),
+        y: labelY.toString(),
         fill: colorMap.schematic.grid,
-        "font-size": "0.15",
-        "fill-opacity": "0.7"
+        "font-size": (0.15 * Math.abs(transform.a)).toString(),
+        "fill-opacity": "0.7",
+        "text-anchor": "start",
+        "dominant-baseline": "middle"
       },
       children: [
         {
@@ -1136,25 +1123,70 @@ function drawSchematicLabeledPoints(params) {
   };
 }
 
-// lib/sch/convert-circuit-json-to-schematic-svg.ts
-import { stringify as stringify2 } from "svgson";
+// lib/sch/get-schematic-bounds-from-circuit-json.ts
+function getSchematicBoundsFromCircuitJson(soup, padding = 0.5) {
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  const portSize = 0.2;
+  for (const item of soup) {
+    if (item.type === "schematic_component") {
+      updateBounds(item.center, item.size, item.rotation || 0);
+    } else if (item.type === "schematic_port") {
+      updateBounds(item.center, { width: portSize, height: portSize }, 0);
+    } else if (item.type === "schematic_debug_object") {
+      if (item.shape === "rect") {
+        updateBounds(item.center, item.size, 0);
+      } else if (item.shape === "line") {
+        updateBounds(item.start, { width: 0.1, height: 0.1 }, 0);
+        updateBounds(item.end, { width: 0.1, height: 0.1 }, 0);
+      }
+    }
+  }
+  minX -= padding;
+  minY -= padding;
+  maxX += padding;
+  maxY += padding;
+  return { minX, minY, maxX, maxY };
+  function updateBounds(center, size, rotation) {
+    const corners = [
+      { x: -size.width / 2, y: -size.height / 2 },
+      { x: size.width / 2, y: -size.height / 2 },
+      { x: size.width / 2, y: size.height / 2 },
+      { x: -size.width / 2, y: size.height / 2 }
+    ];
+    for (const corner of corners) {
+      const rotatedX = corner.x * Math.cos(rotation) - corner.y * Math.sin(rotation) + center.x;
+      const rotatedY = corner.x * Math.sin(rotation) + corner.y * Math.cos(rotation) + center.y;
+      minX = Math.min(minX, rotatedX);
+      minY = Math.min(minY, rotatedY);
+      maxX = Math.max(maxX, rotatedX);
+      maxY = Math.max(maxY, rotatedY);
+    }
+  }
+}
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-component.ts
 import { getSvg, symbols } from "schematic-symbols";
 import { parseSync } from "svgson";
+import { applyToPoint as applyToPoint14 } from "transformation-matrix";
 function createSchematicComponent({
   component,
+  transform,
   circuitJson
 }) {
-  const center = component.center;
-  const size = component.size;
-  const rotation = component.rotation;
-  const symbolName = component.symbol_name;
+  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 transformString = `translate(${center.x}, ${center.y}) rotate(${rotation * 180 / Math.PI})`;
-  let children = [];
+  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
   );
@@ -1175,24 +1207,75 @@ function createSchematicComponent({
         height: size.height
       })
     );
-    children = svg.children.filter(
+    componentChildren = svg.children.filter(
       (child) => child.name === "path" && child.attributes.fill !== "green"
     ).map((path) => {
       const currentStrokeWidth = Number.parseFloat(
         path.attributes["stroke-width"] || "0.02"
       );
-      const newStrokeWidth = (currentStrokeWidth * 1.5).toString();
       return {
         ...path,
         attributes: {
           ...path.attributes,
           stroke: path.attributes.stroke === "black" ? `${colorMap.schematic.component_outline}` : path.attributes.stroke,
-          "stroke-width": newStrokeWidth
+          "stroke-width": currentStrokeWidth.toString()
         }
       };
     });
+    if (resistance || capacitance) {
+      const [textX, textY] = applyToPoint14(transform, [
+        center.x,
+        -(center.y - size.height / 2 - 0.2)
+      ]);
+      const labelOffset = componentScale * 0.4;
+      console.log(labelOffset);
+      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 {
-    children.push({
+    componentChildren.push({
       name: "rect",
       type: "element",
       value: "",
@@ -1201,20 +1284,30 @@ function createSchematicComponent({
         x: (-size.width / 2).toString(),
         y: (-size.height / 2).toString(),
         width: size.width.toString(),
-        height: size.height.toString()
+        height: size.height.toString(),
+        "stroke-width": "0.02"
       },
       children: []
     });
     if (manufacturerNumber) {
-      children.push({
+      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: 1.2.toString(),
-          y: (-size.height / 2 - 0.5).toString(),
+          x: textX.toString(),
+          y: textY.toString(),
           "text-anchor": "right",
-          "dominant-baseline": "auto"
+          // Center align text
+          "dominant-baseline": "auto",
+          "font-size": "0.2"
         },
         children: [
           {
@@ -1227,15 +1320,17 @@ function createSchematicComponent({
         ],
         value: ""
       });
-      children.push({
+      textChildren.push({
         name: "text",
         type: "element",
         attributes: {
           class: "component-name",
-          x: 1.2.toString(),
-          y: (-size.height / 2 - 0.7).toString(),
+          x: textX.toString(),
+          y: (textY - labelOffset).toString(),
           "text-anchor": "right",
-          "dominant-baseline": "auto"
+          // Center align text
+          "dominant-baseline": "auto",
+          "font-size": "0.2"
         },
         children: [
           {
@@ -1256,64 +1351,81 @@ function createSchematicComponent({
     const circleRadius = 0.05;
     for (const port of schematicPorts) {
       const { x: portX, y: portY, pinNumber } = port.center;
-      const x = portX - center.x;
-      const y = portY - center.y;
-      let endX = x;
-      let endY = y;
-      let labelX = x;
-      let labelY = y;
-      let textAnchor = "middle";
-      let dominantBaseline = "middle";
+      const relX = portX - center.x;
+      const relY = portY - center.y;
+      let endX = relX;
+      let endY = relY;
       switch (port.center.side) {
         case "left":
-          endX = x - portLength;
-          labelX = x + 0.2;
-          textAnchor = "start";
+          endX = relX - portLength;
           break;
         case "right":
-          endX = x + portLength;
-          labelX = x - 0.2;
-          textAnchor = "end";
+          endX = relX + portLength;
           break;
         case "top":
-          endY = y - portLength;
-          labelY = y - 0.2;
-          dominantBaseline = "hanging";
+          endY = relY - portLength;
           break;
         case "bottom":
-          endY = y + portLength;
-          labelY = y + 0.2;
-          dominantBaseline = "auto";
+          endY = relY + portLength;
           break;
       }
-      children.push({
+      componentChildren.push({
         name: "line",
         type: "element",
         attributes: {
           class: "component-pin",
-          x1: x.toString(),
-          y1: y.toString(),
+          x1: relX.toString(),
+          y1: relY.toString(),
           x2: endX.toString(),
-          y2: endY.toString()
+          y2: endY.toString(),
+          "stroke-width": "0.02"
         },
         value: "",
         children: []
       });
-      children.push({
+      componentChildren.push({
         name: "circle",
         type: "element",
         attributes: {
           class: "component-pin",
           cx: endX.toString(),
           cy: endY.toString(),
-          r: circleRadius.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) {
-        children.push({
+        const labelText = portLabels[labelKey];
+        let labelX = portEndX;
+        let labelY = portEndY;
+        let textAnchor = "middle";
+        const labelOffset = 0.6 * componentScale;
+        switch (port.center.side) {
+          case "left":
+            labelX += labelOffset;
+            labelY += 0;
+            textAnchor = "start";
+            break;
+          case "right":
+            labelX -= labelOffset;
+            labelY += 0;
+            textAnchor = "end";
+            break;
+          case "top":
+            labelY -= labelOffset;
+            break;
+          case "bottom":
+            labelY += labelOffset;
+            break;
+        }
+        textChildren.push({
           name: "text",
           type: "element",
           attributes: {
@@ -1321,13 +1433,13 @@ function createSchematicComponent({
             x: labelX.toString(),
             y: labelY.toString(),
             "text-anchor": textAnchor,
-            "dominant-baseline": dominantBaseline,
-            "font-size": "0.2"
+            "dominant-baseline": "middle",
+            "font-size": (0.2 * componentScale).toString()
           },
           children: [
             {
               type: "text",
-              value: portLabels[labelKey],
+              value: labelText,
               name: "",
               attributes: {},
               children: []
@@ -1336,36 +1448,47 @@ function createSchematicComponent({
           value: ""
         });
       }
-      const pinNumberX = endX;
-      let pinNumberY = endY;
-      const pinNumberAnchor = "middle";
-      let pinNumberBaseline = "middle";
+      const pinNumberOffset = 0.2;
+      let pinX = endX;
+      let pinY = endY;
+      let dominantBaseline = "auto";
       switch (port.center.side) {
-        case "left":
-        case "right":
-          pinNumberY -= 0.15;
-          break;
         case "top":
-          pinNumberY -= 0.15;
-          pinNumberBaseline = "auto";
+          pinY = -(portY - portLength - pinNumberOffset);
+          pinX = portX;
+          dominantBaseline = "auto";
           break;
         case "bottom":
-          pinNumberY += 0.15;
-          pinNumberBaseline = "hanging";
+          pinY = portY + portLength + pinNumberOffset;
+          pinX = portX;
+          dominantBaseline = "hanging";
+          break;
+        case "left":
+          pinX = portX - pinNumberOffset;
+          pinY = portY + pinNumberOffset;
+          dominantBaseline = "auto";
+          break;
+        case "right":
+          pinX = portX + pinNumberOffset;
+          pinY = portY + pinNumberOffset;
+          dominantBaseline = "auto";
           break;
       }
-      children.push({
+      const [transformedPinX, transformedPinY] = applyToPoint14(transform, [
+        pinX,
+        pinY
+      ]);
+      textChildren.push({
         name: "text",
         type: "element",
         attributes: {
           class: "pin-number",
-          x: pinNumberX.toString(),
-          y: pinNumberY.toString(),
-          "text-anchor": pinNumberAnchor,
-          "dominant-baseline": pinNumberBaseline,
-          "font-size": "0.15"
+          x: transformedPinX.toString(),
+          y: transformedPinY.toString(),
+          "text-anchor": "middle",
+          "dominant-baseline": dominantBaseline,
+          "font-size": (0.15 * componentScale).toString()
         },
-        value: "",
         children: [
           {
             type: "text",
@@ -1374,82 +1497,62 @@ function createSchematicComponent({
             attributes: {},
             children: []
           }
-        ]
+        ],
+        value: ""
       });
     }
   }
-  if (resistance || capacitance) {
-    children.push({
-      name: "text",
-      type: "element",
-      attributes: {
-        class: "component-name",
-        x: "0",
-        y: (-size.height / 2 - 0.2).toString(),
-        "text-anchor": "middle",
-        "dominant-baseline": "auto"
-      },
-      value: "",
-      children: [
-        {
-          type: "text",
-          value: (resistance || capacitance || "").toString(),
-          name: "",
-          attributes: {},
-          children: []
-        }
-      ]
-    });
-    children.push({
-      name: "text",
-      type: "element",
-      attributes: {
-        class: "component-name",
-        x: "0",
-        y: (-size.height / 2 - 0.5).toString(),
-        "text-anchor": "middle",
-        "dominant-baseline": "auto"
-      },
-      value: "",
-      children: [
-        {
-          type: "text",
-          value: componentName || "",
-          name: "",
-          attributes: {},
-          children: []
-        }
-      ]
-    });
-  }
-  return [
-    {
-      name: "g",
-      value: "",
-      type: "element",
-      attributes: { transform: transformString },
-      children
-    }
-  ];
+  const componentGroup = {
+    name: "g",
+    value: "",
+    type: "element",
+    attributes: {
+      transform: `translate(${transformedX}, ${transformedY}) rotate(${rotation * 180 / Math.PI}) scale(${componentScale})`
+    },
+    children: componentChildren
+  };
+  const textGroup = {
+    name: "g",
+    value: "",
+    type: "element",
+    attributes: {},
+    children: textChildren
+  };
+  return [componentGroup, textGroup];
 }
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-debug-object.ts
-function createSvgObjectsFromSchDebugObject(debugObject) {
+import { applyToPoint as applyToPoint15 } from "transformation-matrix";
+function createSvgObjectsFromSchDebugObject(debugObject, transform) {
   if (debugObject.shape === "rect") {
+    const x = debugObject.center.x - debugObject.size.width / 2;
+    const y = -(debugObject.center.y - debugObject.size.height / 2);
+    const [transformedX, transformedY] = applyToPoint15(transform, [x, y]);
+    const [transformedRight, transformedBottom] = applyToPoint15(transform, [
+      x + debugObject.size.width,
+      y - debugObject.size.height
+      // Flip height direction
+    ]);
+    const width = Math.abs(transformedRight - transformedX);
+    const height = Math.abs(transformedBottom - transformedY);
+    const [centerX, centerY] = applyToPoint15(transform, [
+      debugObject.center.x,
+      -debugObject.center.y
+    ]);
     return [
       {
         name: "rect",
         type: "element",
         value: "",
         attributes: {
-          x: (debugObject.center.x - debugObject.size.width / 2).toString(),
-          y: (debugObject.center.y - debugObject.size.height / 2).toString(),
-          width: debugObject.size.width.toString(),
-          height: debugObject.size.height.toString(),
+          x: transformedX.toString(),
+          y: Math.min(transformedY, transformedBottom).toString(),
+          width: width.toString(),
+          height: height.toString(),
           fill: "none",
           stroke: "red",
-          "stroke-width": "0.02",
-          "stroke-dasharray": "0.1,0.1"
+          "stroke-width": (0.02 * Math.abs(transform.a)).toString(),
+          "stroke-dasharray": "5,5"
         },
         children: debugObject.label ? [
           {
@@ -1457,10 +1560,10 @@ function createSvgObjectsFromSchDebugObject(debugObject) {
             type: "element",
             value: "",
             attributes: {
-              x: debugObject.center.x.toString(),
-              y: (debugObject.center.y - debugObject.size.height / 2 - 0.1).toString(),
+              x: centerX.toString(),
+              y: (centerY - 10).toString(),
               "text-anchor": "middle",
-              "font-size": "0.2",
+              "font-size": (0.2 * Math.abs(transform.a)).toString(),
               fill: "red"
             },
             children: [
@@ -1478,19 +1581,31 @@ function createSvgObjectsFromSchDebugObject(debugObject) {
     ];
   }
   if (debugObject.shape === "line") {
+    const [startX, startY] = applyToPoint15(transform, [
+      debugObject.start.x,
+      -debugObject.start.y
+      // Flip Y
+    ]);
+    const [endX, endY] = applyToPoint15(transform, [
+      debugObject.end.x,
+      -debugObject.end.y
+      // Flip Y
+    ]);
+    const midX = (startX + endX) / 2;
+    const midY = (startY + endY) / 2;
     return [
       {
         name: "line",
         type: "element",
         value: "",
         attributes: {
-          x1: debugObject.start.x.toString(),
-          y1: debugObject.start.y.toString(),
-          x2: debugObject.end.x.toString(),
-          y2: debugObject.end.y.toString(),
+          x1: startX.toString(),
+          y1: startY.toString(),
+          x2: endX.toString(),
+          y2: endY.toString(),
           stroke: "red",
-          "stroke-width": "0.02",
-          "stroke-dasharray": "0.1,0.1"
+          "stroke-width": (0.02 * Math.abs(transform.a)).toString(),
+          "stroke-dasharray": "5,5"
         },
         children: debugObject.label ? [
           {
@@ -1498,10 +1613,10 @@ function createSvgObjectsFromSchDebugObject(debugObject) {
             type: "element",
             value: "",
             attributes: {
-              x: ((debugObject.start.x + debugObject.end.x) / 2).toString(),
-              y: ((debugObject.start.y + debugObject.end.y) / 2 - 0.1).toString(),
+              x: midX.toString(),
+              y: (midY - 10).toString(),
               "text-anchor": "middle",
-              "font-size": "0.2",
+              "font-size": (0.2 * Math.abs(transform.a)).toString(),
               fill: "red"
             },
             children: [
@@ -1522,22 +1637,32 @@ function createSvgObjectsFromSchDebugObject(debugObject) {
 }
 
 // lib/sch/svg-object-fns/create-svg-objects-from-sch-trace.ts
-function createSchematicTrace(trace, flipY, portPositions) {
+import { applyToPoint as applyToPoint16 } from "transformation-matrix";
+function createSchematicTrace(trace, transform) {
   const edges = trace.edges;
   if (edges.length === 0) return [];
   let path = "";
   edges.forEach((edge, index) => {
-    const fromPoint = edge.from.ti !== void 0 ? portPositions.get(edge.from.ti) : edge.from;
-    const toPoint = edge.to.ti !== void 0 ? portPositions.get(edge.to.ti) : edge.to;
-    if (!fromPoint || !toPoint) {
-      return;
-    }
-    const fromCoord = `${fromPoint.x - 0.15} ${flipY(fromPoint.y)}`;
-    const toCoord = `${toPoint.x + 0.15} ${flipY(toPoint.y)}`;
+    const fromPoint = {
+      x: (edge.from.x ?? edge.from.center?.x) - 0.15,
+      y: edge.from.y ?? edge.from.center?.y
+    };
+    const toPoint = {
+      x: (edge.to.x ?? edge.to.center?.x) + 0.15,
+      y: edge.to.y ?? edge.to.center?.y
+    };
+    const [transformedFromX, transformedFromY] = applyToPoint16(transform, [
+      fromPoint.x,
+      fromPoint.y
+    ]);
+    const [transformedToX, transformedToY] = applyToPoint16(transform, [
+      toPoint.x,
+      toPoint.y
+    ]);
     if (index === 0) {
-      path += `M ${fromCoord} L ${toCoord}`;
+      path += `M ${transformedFromX} ${transformedFromY} L ${transformedToX} ${transformedToY}`;
     } else {
-      path += ` L ${toCoord}`;
+      path += ` L ${transformedToX} ${transformedToY}`;
     }
   });
   return path ? [
@@ -1546,7 +1671,9 @@ function createSchematicTrace(trace, flipY, portPositions) {
       type: "element",
       attributes: {
         class: "trace",
-        d: path
+        d: path,
+        "stroke-width": (0.02 * Math.abs(transform.a)).toString()
+        // Scale stroke width with transform
       },
       value: "",
       children: []
@@ -1555,23 +1682,41 @@ function createSchematicTrace(trace, flipY, portPositions) {
 }
 
 // lib/sch/convert-circuit-json-to-schematic-svg.ts
-import { identity } from "transformation-matrix";
 function convertCircuitJsonToSchematicSvg(circuitJson, options) {
-  const portPositions = /* @__PURE__ */ new Map();
-  for (const item of circuitJson) {
-    if (item.type === "schematic_port") {
-      portPositions.set(item.schematic_port_id, item.center);
-    }
-  }
   const bounds = getSchematicBoundsFromCircuitJson(circuitJson);
   const { minX, minY, maxX, maxY } = bounds;
-  const viewBoxPadding = 0.5;
-  const width = maxX - minX + 2 * viewBoxPadding;
-  const height = maxY - minY;
-  const viewBox = `${minX - viewBoxPadding} ${minY - viewBoxPadding} ${width} ${height + 2 * viewBoxPadding}`;
-  const flipY = (y) => height - (y - minY) + minY;
-  const transform = identity();
+  const padding = 1;
+  const circuitWidth = maxX - minX + 2 * padding;
+  const circuitHeight = maxY - minY + 2 * padding;
+  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)
+    // Flip in y-direction
+  );
   const svgChildren = [];
+  svgChildren.push({
+    name: "rect",
+    type: "element",
+    attributes: {
+      class: "boundary",
+      x: "0",
+      y: "0",
+      width: svgWidth.toString(),
+      height: svgHeight.toString()
+    },
+    children: [],
+    value: ""
+  });
   if (options?.grid) {
     const gridConfig = typeof options.grid === "object" ? options.grid : {};
     svgChildren.push(drawSchematicGrid({ bounds, transform, ...gridConfig }));
@@ -1589,21 +1734,19 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
   const schTraceSvgs = [];
   for (const elm of circuitJson) {
     if (elm.type === "schematic_debug_object") {
-      schDebugObjectSvgs.push(...createSvgObjectsFromSchDebugObject(elm));
+      schDebugObjectSvgs.push(
+        ...createSvgObjectsFromSchDebugObject(elm, transform)
+      );
     } else if (elm.type === "schematic_component") {
       schComponentSvgs.push(
         ...createSchematicComponent({
-          component: {
-            ...elm,
-            center: { x: elm.center.x, y: flipY(elm.center.y) }
-          },
+          component: elm,
           transform,
-          // Add the missing transform property
           circuitJson
         })
       );
     } else if (elm.type === "schematic_trace") {
-      schTraceSvgs.push(...createSchematicTrace(elm, flipY, portPositions));
+      schTraceSvgs.push(...createSchematicTrace(elm, transform));
     }
   }
   svgChildren.push(...schDebugObjectSvgs, ...schComponentSvgs, ...schTraceSvgs);
@@ -1612,12 +1755,12 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
     type: "element",
     attributes: {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox,
-      width: (options?.width ?? 1200).toString(),
-      height: (options?.height ?? 600).toString(),
+      width: svgWidth.toString(),
+      height: svgHeight.toString(),
       style: `background-color: ${colorMap.schematic.background}`
     },
     children: [
+      // Add styles
       {
         name: "style",
         type: "element",
@@ -1625,14 +1768,16 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
           {
             type: "text",
             value: `
-              .component { fill: none; stroke: ${colorMap.schematic.component_outline}; stroke-width: 0.03; }
-              .chip { fill: ${colorMap.schematic.component_body}; stroke: ${colorMap.schematic.component_outline}; stroke-width: 0.03; }
-              .component-pin { fill: none; stroke: ${colorMap.schematic.component_outline}; stroke-width: 0.02; }
-              .trace { stroke: ${colorMap.schematic.wire}; stroke-width: 0.02; fill: none; }
-              .text { font-family: Arial, sans-serif; font-size: 0.2px; fill: ${colorMap.schematic.wire}; }
-              .pin-number { font-size: 0.15px; fill: ${colorMap.schematic.pin_number}; }
+              .boundary { fill: ${colorMap.schematic.background}; }
+              .schematic-boundary { fill: none; stroke: #fff; stroke-width: 0.3; }
+              .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}; }
               .port-label { fill: ${colorMap.schematic.reference}; }
-              .component-name { font-size: 0.25px; fill: ${colorMap.schematic.reference}; }
+              .component-name { font-size: ${0.25 * scaleFactor}px; fill: ${colorMap.schematic.reference}; }
             `,
             name: "",
             attributes: {},
@@ -1646,14 +1791,7 @@ function convertCircuitJsonToSchematicSvg(circuitJson, options) {
     ],
     value: ""
   };
-  return stringify2({
-    ...svgObject,
-    attributes: {
-      ...svgObject.attributes,
-      width: svgObject.attributes.width?.toString(),
-      height: svgObject.attributes.height?.toString()
-    }
-  });
+  return stringify2(svgObject);
 }
 var circuitJsonToSchematicSvg = convertCircuitJsonToSchematicSvg;
 export {