circuit-to-canvas 0.0.13 → 0.0.15

package/dist/index.js

@@ -38,9 +38,9 @@ var DEFAULT_PCB_COLOR_MAP = {
 // lib/drawer/shapes/circle.ts
 import { applyToPoint } from "transformation-matrix";
 function drawCircle(params) {
-  const { ctx, center, radius, fill, transform } = params;
-  const [cx, cy] = applyToPoint(transform, [center.x, center.y]);
-  const scaledRadius = radius * Math.abs(transform.a);
+  const { ctx, center, radius, fill, realToCanvasMat } = params;
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y]);
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
   ctx.beginPath();
   ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
   ctx.fillStyle = fill;
@@ -56,18 +56,18 @@ function drawRect(params) {
     width,
     height,
     fill,
-    transform,
+    realToCanvasMat,
     borderRadius = 0,
     rotation = 0,
     stroke,
     strokeWidth,
     isStrokeDashed = false
   } = params;
-  const [cx, cy] = applyToPoint2(transform, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(transform.a);
-  const scaledHeight = height * Math.abs(transform.a);
-  const scaledRadius = borderRadius * Math.abs(transform.a);
-  const scaledStrokeWidth = strokeWidth ? strokeWidth * Math.abs(transform.a) : void 0;
+  const [cx, cy] = applyToPoint2(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
+  const scaledStrokeWidth = strokeWidth ? strokeWidth * Math.abs(realToCanvasMat.a) : void 0;
   ctx.save();
   ctx.translate(cx, cy);
   if (rotation !== 0) {
@@ -116,10 +116,18 @@ function drawRect(params) {
 // lib/drawer/shapes/oval.ts
 import { applyToPoint as applyToPoint3 } from "transformation-matrix";
 function drawOval(params) {
-  const { ctx, center, width, height, fill, transform, rotation = 0 } = params;
-  const [cx, cy] = applyToPoint3(transform, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(transform.a);
-  const scaledHeight = height * Math.abs(transform.a);
+  const {
+    ctx,
+    center,
+    width,
+    height,
+    fill,
+    realToCanvasMat,
+    rotation = 0
+  } = params;
+  const [cx, cy] = applyToPoint3(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
   ctx.save();
   ctx.translate(cx, cy);
   if (rotation !== 0) {
@@ -135,10 +143,18 @@ function drawOval(params) {
 // lib/drawer/shapes/pill.ts
 import { applyToPoint as applyToPoint4 } from "transformation-matrix";
 function drawPill(params) {
-  const { ctx, center, width, height, fill, transform, rotation = 0 } = params;
-  const [cx, cy] = applyToPoint4(transform, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(transform.a);
-  const scaledHeight = height * Math.abs(transform.a);
+  const {
+    ctx,
+    center,
+    width,
+    height,
+    fill,
+    realToCanvasMat,
+    rotation = 0
+  } = params;
+  const [cx, cy] = applyToPoint4(realToCanvasMat, [center.x, center.y]);
+  const scaledWidth = width * Math.abs(realToCanvasMat.a);
+  const scaledHeight = height * Math.abs(realToCanvasMat.a);
   ctx.save();
   ctx.translate(cx, cy);
   if (rotation !== 0) {
@@ -172,21 +188,21 @@ function drawPill(params) {
 
 // lib/drawer/elements/pcb-plated-hole.ts
 function drawPcbPlatedHole(params) {
-  const { ctx, hole, transform, colorMap } = params;
+  const { ctx, hole, realToCanvasMat, colorMap } = params;
   if (hole.shape === "circle") {
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius: hole.outer_diameter / 2,
       fill: colorMap.copper.top,
-      transform
+      realToCanvasMat
     });
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius: hole.hole_diameter / 2,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -197,7 +213,7 @@ function drawPcbPlatedHole(params) {
       width: hole.outer_width,
       height: hole.outer_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation
     });
     drawOval({
@@ -206,7 +222,7 @@ function drawPcbPlatedHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation
     });
     return;
@@ -218,7 +234,7 @@ function drawPcbPlatedHole(params) {
       width: hole.outer_width,
       height: hole.outer_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation
     });
     drawPill({
@@ -227,7 +243,7 @@ function drawPcbPlatedHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation
     });
     return;
@@ -239,7 +255,7 @@ function drawPcbPlatedHole(params) {
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0
     });
     const holeX = hole.x + (hole.hole_offset_x ?? 0);
@@ -249,7 +265,7 @@ function drawPcbPlatedHole(params) {
       center: { x: holeX, y: holeY },
       radius: hole.hole_diameter / 2,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -260,7 +276,7 @@ function drawPcbPlatedHole(params) {
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0
     });
     const holeX = hole.x + (hole.hole_offset_x ?? 0);
@@ -271,7 +287,7 @@ function drawPcbPlatedHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -282,7 +298,7 @@ function drawPcbPlatedHole(params) {
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
-      transform,
+      realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
       rotation: hole.rect_ccw_rotation
     });
@@ -294,7 +310,7 @@ function drawPcbPlatedHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: hole.hole_ccw_rotation
     });
     return;
@@ -303,33 +319,33 @@ function drawPcbPlatedHole(params) {
 
 // lib/drawer/elements/pcb-via.ts
 function drawPcbVia(params) {
-  const { ctx, via, transform, colorMap } = params;
+  const { ctx, via, realToCanvasMat, colorMap } = params;
   drawCircle({
     ctx,
     center: { x: via.x, y: via.y },
     radius: via.outer_diameter / 2,
     fill: colorMap.copper.top,
-    transform
+    realToCanvasMat
   });
   drawCircle({
     ctx,
     center: { x: via.x, y: via.y },
     radius: via.hole_diameter / 2,
     fill: colorMap.drill,
-    transform
+    realToCanvasMat
   });
 }
 
 // lib/drawer/elements/pcb-hole.ts
 function drawPcbHole(params) {
-  const { ctx, hole, transform, colorMap } = params;
+  const { ctx, hole, realToCanvasMat, colorMap } = params;
   if (hole.hole_shape === "circle") {
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius: hole.hole_diameter / 2,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -340,7 +356,7 @@ function drawPcbHole(params) {
       width: hole.hole_diameter,
       height: hole.hole_diameter,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -351,7 +367,7 @@ function drawPcbHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -362,7 +378,7 @@ function drawPcbHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -373,7 +389,7 @@ function drawPcbHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -384,7 +400,7 @@ function drawPcbHole(params) {
       width: hole.hole_width,
       height: hole.hole_height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: hole.ccw_rotation ?? 0
     });
     return;
@@ -394,18 +410,18 @@ function drawPcbHole(params) {
 // lib/drawer/shapes/polygon.ts
 import { applyToPoint as applyToPoint5 } from "transformation-matrix";
 function drawPolygon(params) {
-  const { ctx, points, fill, transform } = params;
+  const { ctx, points, fill, realToCanvasMat } = params;
   if (points.length < 3) return;
   ctx.beginPath();
-  const transformedPoints = points.map(
-    (p) => applyToPoint5(transform, [p.x, p.y])
+  const canvasPoints = points.map(
+    (p) => applyToPoint5(realToCanvasMat, [p.x, p.y])
   );
-  const firstPoint = transformedPoints[0];
+  const firstPoint = canvasPoints[0];
   if (!firstPoint) return;
   const [firstX, firstY] = firstPoint;
   ctx.moveTo(firstX, firstY);
-  for (let i = 1; i < transformedPoints.length; i++) {
-    const point = transformedPoints[i];
+  for (let i = 1; i < canvasPoints.length; i++) {
+    const point = canvasPoints[i];
     if (!point) continue;
     const [x, y] = point;
     ctx.lineTo(x, y);
@@ -420,7 +436,7 @@ function layerToColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
 function drawPcbSmtPad(params) {
-  const { ctx, pad, transform, colorMap } = params;
+  const { ctx, pad, realToCanvasMat, colorMap } = params;
   const color = layerToColor(pad.layer, colorMap);
   if (pad.shape === "rect") {
     drawRect({
@@ -429,7 +445,7 @@ function drawPcbSmtPad(params) {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform,
+      realToCanvasMat,
       borderRadius: pad.corner_radius ?? pad.rect_border_radius ?? 0
     });
     return;
@@ -441,7 +457,7 @@ function drawPcbSmtPad(params) {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform,
+      realToCanvasMat,
       borderRadius: pad.corner_radius ?? pad.rect_border_radius ?? 0,
       rotation: pad.ccw_rotation ?? 0
     });
@@ -453,7 +469,7 @@ function drawPcbSmtPad(params) {
       center: { x: pad.x, y: pad.y },
       radius: pad.radius,
       fill: color,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -464,7 +480,7 @@ function drawPcbSmtPad(params) {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -475,7 +491,7 @@ function drawPcbSmtPad(params) {
       width: pad.width,
       height: pad.height,
       fill: color,
-      transform,
+      realToCanvasMat,
       rotation: pad.ccw_rotation ?? 0
     });
     return;
@@ -486,7 +502,7 @@ function drawPcbSmtPad(params) {
         ctx,
         points: pad.points,
         fill: color,
-        transform
+        realToCanvasMat
       });
     }
     return;
@@ -502,12 +518,12 @@ function drawLine(params) {
     end,
     strokeWidth,
     stroke,
-    transform,
+    realToCanvasMat,
     lineCap = "round"
   } = params;
-  const [x1, y1] = applyToPoint6(transform, [start.x, start.y]);
-  const [x2, y2] = applyToPoint6(transform, [end.x, end.y]);
-  const scaledStrokeWidth = strokeWidth * Math.abs(transform.a);
+  const [x1, y1] = applyToPoint6(realToCanvasMat, [start.x, start.y]);
+  const [x2, y2] = applyToPoint6(realToCanvasMat, [end.x, end.y]);
+  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
   ctx.beginPath();
   ctx.moveTo(x1, y1);
   ctx.lineTo(x2, y2);
@@ -522,7 +538,7 @@ function layerToColor2(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
 function drawPcbTrace(params) {
-  const { ctx, trace, transform, colorMap } = params;
+  const { ctx, trace, realToCanvasMat, colorMap } = params;
   if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
     return;
   }
@@ -540,7 +556,7 @@ function drawPcbTrace(params) {
       end: { x: end.x, y: end.y },
       strokeWidth: traceWidth,
       stroke: color,
-      transform,
+      realToCanvasMat,
       lineCap: "round"
     });
   }
@@ -555,20 +571,20 @@ function drawPath(params) {
     fill,
     stroke,
     strokeWidth = 1,
-    transform,
+    realToCanvasMat,
     closePath = false
   } = params;
   if (points.length < 2) return;
   ctx.beginPath();
-  const transformedPoints = points.map(
-    (p) => applyToPoint7(transform, [p.x, p.y])
+  const canvasPoints = points.map(
+    (p) => applyToPoint7(realToCanvasMat, [p.x, p.y])
   );
-  const firstPoint = transformedPoints[0];
+  const firstPoint = canvasPoints[0];
   if (!firstPoint) return;
   const [firstX, firstY] = firstPoint;
   ctx.moveTo(firstX, firstY);
-  for (let i = 1; i < transformedPoints.length; i++) {
-    const point = transformedPoints[i];
+  for (let i = 1; i < canvasPoints.length; i++) {
+    const point = canvasPoints[i];
     if (!point) continue;
     const [x, y] = point;
     ctx.lineTo(x, y);
@@ -581,7 +597,7 @@ function drawPath(params) {
     ctx.fill();
   }
   if (stroke) {
-    const scaledStrokeWidth = strokeWidth * Math.abs(transform.a);
+    const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
     ctx.strokeStyle = stroke;
     ctx.lineWidth = scaledStrokeWidth;
     ctx.stroke();
@@ -590,7 +606,7 @@ function drawPath(params) {
 
 // lib/drawer/elements/pcb-board.ts
 function drawPcbBoard(params) {
-  const { ctx, board, transform, colorMap } = params;
+  const { ctx, board, realToCanvasMat, colorMap } = params;
   const { width, height, center, outline } = board;
   if (outline && Array.isArray(outline) && outline.length >= 3) {
     drawPath({
@@ -598,7 +614,7 @@ function drawPcbBoard(params) {
       points: outline.map((p) => ({ x: p.x, y: p.y })),
       stroke: colorMap.boardOutline,
       strokeWidth: 0.1,
-      transform,
+      realToCanvasMat,
       closePath: true
     });
     return;
@@ -610,7 +626,7 @@ function drawPcbBoard(params) {
       width,
       height,
       fill: "transparent",
-      transform
+      realToCanvasMat
     });
     const halfWidth = width / 2;
     const halfHeight = height / 2;
@@ -625,7 +641,7 @@ function drawPcbBoard(params) {
       points: corners,
       stroke: colorMap.boardOutline,
       strokeWidth: 0.1,
-      transform,
+      realToCanvasMat,
       closePath: true
     });
   }
@@ -643,13 +659,13 @@ function mapAnchorAlignment(alignment) {
   return "center";
 }
 function drawPcbSilkscreenText(params) {
-  const { ctx, text, transform, colorMap } = params;
+  const { ctx, text, realToCanvasMat, colorMap } = params;
   const color = layerToSilkscreenColor(text.layer, colorMap);
-  const [x, y] = applyToPoint8(transform, [
+  const [x, y] = applyToPoint8(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
-  const fontSize = (text.font_size ?? 1) * Math.abs(transform.a);
+  const fontSize = (text.font_size ?? 1) * Math.abs(realToCanvasMat.a);
   const rotation = text.ccw_rotation ?? 0;
   ctx.save();
   ctx.translate(x, y);
@@ -663,7 +679,7 @@ function drawPcbSilkscreenText(params) {
   ctx.restore();
 }
 function drawPcbSilkscreenRect(params) {
-  const { ctx, rect, transform, colorMap } = params;
+  const { ctx, rect, realToCanvasMat, colorMap } = params;
   const color = layerToSilkscreenColor(rect.layer, colorMap);
   drawRect({
     ctx,
@@ -671,22 +687,22 @@ function drawPcbSilkscreenRect(params) {
     width: rect.width,
     height: rect.height,
     fill: color,
-    transform
+    realToCanvasMat
   });
 }
 function drawPcbSilkscreenCircle(params) {
-  const { ctx, circle, transform, colorMap } = params;
+  const { ctx, circle, realToCanvasMat, colorMap } = params;
   const color = layerToSilkscreenColor(circle.layer, colorMap);
   drawCircle({
     ctx,
     center: circle.center,
     radius: circle.radius,
     fill: color,
-    transform
+    realToCanvasMat
   });
 }
 function drawPcbSilkscreenLine(params) {
-  const { ctx, line, transform, colorMap } = params;
+  const { ctx, line, realToCanvasMat, colorMap } = params;
   const color = layerToSilkscreenColor(line.layer, colorMap);
   drawLine({
     ctx,
@@ -694,11 +710,11 @@ function drawPcbSilkscreenLine(params) {
     end: { x: line.x2, y: line.y2 },
     strokeWidth: line.stroke_width ?? 0.1,
     stroke: color,
-    transform
+    realToCanvasMat
   });
 }
 function drawPcbSilkscreenPath(params) {
-  const { ctx, path, transform, colorMap } = params;
+  const { ctx, path, realToCanvasMat, colorMap } = params;
   const color = layerToSilkscreenColor(path.layer, colorMap);
   if (!path.route || path.route.length < 2) return;
   for (let i = 0; i < path.route.length - 1; i++) {
@@ -711,14 +727,14 @@ function drawPcbSilkscreenPath(params) {
       end: { x: end.x, y: end.y },
       strokeWidth: path.stroke_width ?? 0.1,
       stroke: color,
-      transform
+      realToCanvasMat
     });
   }
 }
 
 // lib/drawer/elements/pcb-cutout.ts
 function drawPcbCutout(params) {
-  const { ctx, cutout, transform, colorMap } = params;
+  const { ctx, cutout, realToCanvasMat, colorMap } = params;
   if (cutout.shape === "rect") {
     drawRect({
       ctx,
@@ -726,7 +742,7 @@ function drawPcbCutout(params) {
       width: cutout.width,
       height: cutout.height,
       fill: colorMap.drill,
-      transform,
+      realToCanvasMat,
       rotation: cutout.rotation ?? 0
     });
     return;
@@ -737,7 +753,7 @@ function drawPcbCutout(params) {
       center: cutout.center,
       radius: cutout.radius,
       fill: colorMap.drill,
-      transform
+      realToCanvasMat
     });
     return;
   }
@@ -747,7 +763,7 @@ function drawPcbCutout(params) {
         ctx,
         points: cutout.points,
         fill: colorMap.drill,
-        transform
+        realToCanvasMat
       });
     }
     return;
@@ -760,13 +776,16 @@ function layerToColor3(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
 function drawPcbCopperPour(params) {
-  const { ctx, pour, transform, colorMap } = params;
+  const { ctx, pour, realToCanvasMat, colorMap } = params;
   const color = layerToColor3(pour.layer, colorMap);
   ctx.save();
   if (pour.shape === "rect") {
-    const [cx, cy] = applyToPoint9(transform, [pour.center.x, pour.center.y]);
-    const scaledWidth = pour.width * Math.abs(transform.a);
-    const scaledHeight = pour.height * Math.abs(transform.a);
+    const [cx, cy] = applyToPoint9(realToCanvasMat, [
+      pour.center.x,
+      pour.center.y
+    ]);
+    const scaledWidth = pour.width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = pour.height * Math.abs(realToCanvasMat.a);
     ctx.translate(cx, cy);
     if (pour.rotation) {
       ctx.rotate(-pour.rotation * (Math.PI / 180));
@@ -781,10 +800,10 @@ function drawPcbCopperPour(params) {
   }
   if (pour.shape === "polygon") {
     if (pour.points && pour.points.length >= 3) {
-      const transformedPoints = pour.points.map(
-        (p) => applyToPoint9(transform, [p.x, p.y])
+      const canvasPoints = pour.points.map(
+        (p) => applyToPoint9(realToCanvasMat, [p.x, p.y])
       );
-      const firstPoint = transformedPoints[0];
+      const firstPoint = canvasPoints[0];
       if (!firstPoint) {
         ctx.restore();
         return;
@@ -792,8 +811,8 @@ function drawPcbCopperPour(params) {
       ctx.beginPath();
       const [firstX, firstY] = firstPoint;
       ctx.moveTo(firstX, firstY);
-      for (let i = 1; i < transformedPoints.length; i++) {
-        const point = transformedPoints[i];
+      for (let i = 1; i < canvasPoints.length; i++) {
+        const point = canvasPoints[i];
         if (!point) continue;
         const [x, y] = point;
         ctx.lineTo(x, y);
@@ -898,18 +917,18 @@ function drawText(params) {
     y,
     fontSize,
     color,
-    transform,
+    realToCanvasMat,
     anchorAlignment,
     rotation = 0
   } = params;
   if (!text) return;
-  const [transformedX, transformedY] = applyToPoint10(transform, [x, y]);
-  const scale2 = Math.abs(transform.a);
+  const [canvasX, canvasY] = applyToPoint10(realToCanvasMat, [x, y]);
+  const scale2 = Math.abs(realToCanvasMat.a);
   const scaledFontSize = fontSize * scale2;
   const layout = getAlphabetLayout(text, scaledFontSize);
   const startPos = getTextStartPosition(anchorAlignment, layout);
   ctx.save();
-  ctx.translate(transformedX, transformedY);
+  ctx.translate(canvasX, canvasY);
   if (rotation !== 0) {
     ctx.rotate(-rotation * (Math.PI / 180));
   }
@@ -933,14 +952,14 @@ function mapAnchorAlignment2(alignment) {
   return "center";
 }
 function drawPcbCopperText(params) {
-  const { ctx, text, transform, colorMap } = params;
+  const { ctx, text, realToCanvasMat, colorMap } = params;
   const content = text.text ?? "";
   if (!content) return;
-  const [x, y] = applyToPoint11(transform, [
+  const [x, y] = applyToPoint11(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
-  const scale2 = Math.abs(transform.a);
+  const scale2 = Math.abs(realToCanvasMat.a);
   const fontSize = (text.font_size ?? 1) * scale2;
   const rotation = text.ccw_rotation ?? 0;
   const padding = {
@@ -998,7 +1017,7 @@ function layerToColor4(layer, colorMap) {
   return DEFAULT_FABRICATION_NOTE_COLOR;
 }
 function drawPcbFabricationNoteText(params) {
-  const { ctx, text, transform, colorMap } = params;
+  const { ctx, text, realToCanvasMat, colorMap } = params;
   const defaultColor = layerToColor4(text.layer, colorMap);
   const color = text.color ?? defaultColor;
   const fontSize = text.font_size;
@@ -1009,14 +1028,14 @@ function drawPcbFabricationNoteText(params) {
     y: text.anchor_position.y,
     fontSize,
     color,
-    transform,
+    realToCanvasMat,
     anchorAlignment: text.anchor_alignment
   });
 }
 
 // lib/drawer/elements/pcb-fabrication-note-rect.ts
 function drawPcbFabricationNoteRect(params) {
-  const { ctx, rect, transform, colorMap } = params;
+  const { ctx, rect, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgba(255,255,255,0.5)";
   const color = rect.color ?? defaultColor;
   const isFilled = rect.is_filled ?? false;
@@ -1031,14 +1050,14 @@ function drawPcbFabricationNoteRect(params) {
     stroke: hasStroke ? color : void 0,
     strokeWidth: hasStroke ? rect.stroke_width : void 0,
     borderRadius: rect.corner_radius,
-    transform,
+    realToCanvasMat,
     isStrokeDashed
   });
 }
 
 // lib/drawer/elements/pcb-note-rect.ts
 function drawPcbNoteRect(params) {
-  const { ctx, rect, transform, colorMap } = params;
+  const { ctx, rect, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgb(89, 148, 220)";
   const color = rect.color ?? defaultColor;
   const isFilled = rect.is_filled ?? false;
@@ -1053,14 +1072,14 @@ function drawPcbNoteRect(params) {
     stroke: hasStroke ? color : void 0,
     strokeWidth: hasStroke ? rect.stroke_width : void 0,
     borderRadius: rect.corner_radius,
-    transform,
+    realToCanvasMat,
     isStrokeDashed
   });
 }
 
 // lib/drawer/elements/pcb-fabrication-note-path.ts
 function drawPcbFabricationNotePath(params) {
-  const { ctx, path, transform, colorMap } = params;
+  const { ctx, path, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgba(255,255,255,0.5)";
   const color = path.color ?? defaultColor;
   if (!path.route || path.route.length < 2) return;
@@ -1074,14 +1093,14 @@ function drawPcbFabricationNotePath(params) {
       end: { x: end.x, y: end.y },
       strokeWidth: path.stroke_width ?? 0.1,
       stroke: color,
-      transform
+      realToCanvasMat
     });
   }
 }
 
 // lib/drawer/elements/pcb-note-path.ts
 function drawPcbNotePath(params) {
-  const { ctx, path, transform, colorMap } = params;
+  const { ctx, path, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgb(89, 148, 220)";
   const color = path.color ?? defaultColor;
   if (!path.route || path.route.length < 2) return;
@@ -1095,7 +1114,7 @@ function drawPcbNotePath(params) {
       end: { x: end.x, y: end.y },
       strokeWidth: path.stroke_width ?? 0.1,
       stroke: color,
-      transform
+      realToCanvasMat
     });
   }
 }
@@ -1103,7 +1122,7 @@ function drawPcbNotePath(params) {
 // lib/drawer/elements/pcb-note-text.ts
 var DEFAULT_NOTE_TEXT_COLOR = "rgb(89, 148, 220)";
 function drawPcbNoteText(params) {
-  const { ctx, text, transform, colorMap } = params;
+  const { ctx, text, realToCanvasMat, colorMap } = params;
   const defaultColor = DEFAULT_NOTE_TEXT_COLOR;
   const color = text.color ?? defaultColor;
   const fontSize = text.font_size ?? 1;
@@ -1114,11 +1133,38 @@ function drawPcbNoteText(params) {
     y: text.anchor_position.y,
     fontSize,
     color,
-    transform,
+    realToCanvasMat,
     anchorAlignment: text.anchor_alignment ?? "center"
   });
 }
 
+// lib/drawer/elements/pcb-note-line.ts
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+function drawPcbNoteLine(params) {
+  const { ctx, line, realToCanvasMat, colorMap } = params;
+  const defaultColor = "rgb(89, 148, 220)";
+  const color = line.color ?? defaultColor;
+  const strokeWidth = line.stroke_width ?? 0.1;
+  const isDashed = line.is_dashed ?? false;
+  const [x1, y1] = applyToPoint12(realToCanvasMat, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint12(realToCanvasMat, [line.x2, line.y2]);
+  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  if (isDashed) {
+    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2]);
+  } else {
+    ctx.setLineDash([]);
+  }
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.lineWidth = scaledStrokeWidth;
+  ctx.strokeStyle = color;
+  ctx.lineCap = "round";
+  ctx.stroke();
+  ctx.restore();
+}
+
 // lib/drawer/CircuitToCanvasDrawer.ts
 var CircuitToCanvasDrawer = class {
   ctx;
@@ -1192,7 +1238,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbPlatedHole({
         ctx: this.ctx,
         hole: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1200,7 +1246,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbVia({
         ctx: this.ctx,
         via: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1208,7 +1254,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbHole({
         ctx: this.ctx,
         hole: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1216,7 +1262,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbSmtPad({
         ctx: this.ctx,
         pad: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1224,7 +1270,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbTrace({
         ctx: this.ctx,
         trace: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1232,7 +1278,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbBoard({
         ctx: this.ctx,
         board: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1240,7 +1286,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbSilkscreenText({
         ctx: this.ctx,
         text: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1248,7 +1294,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbSilkscreenRect({
         ctx: this.ctx,
         rect: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1256,7 +1302,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbSilkscreenCircle({
         ctx: this.ctx,
         circle: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1264,7 +1310,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbSilkscreenLine({
         ctx: this.ctx,
         line: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1272,7 +1318,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbSilkscreenPath({
         ctx: this.ctx,
         path: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1280,7 +1326,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbCutout({
         ctx: this.ctx,
         cutout: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1288,7 +1334,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbCopperPour({
         ctx: this.ctx,
         pour: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1296,7 +1342,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbCopperText({
         ctx: this.ctx,
         text: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1304,7 +1350,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbFabricationNoteText({
         ctx: this.ctx,
         text: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1312,13 +1358,13 @@ var CircuitToCanvasDrawer = class {
       drawPcbFabricationNoteRect({
         ctx: this.ctx,
         rect: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
     if (element.type === "pcb_note_rect") {
       drawPcbNoteRect({
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
         ctx: this.ctx,
         rect: element
@@ -1328,7 +1374,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbFabricationNotePath({
         ctx: this.ctx,
         path: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1336,7 +1382,7 @@ var CircuitToCanvasDrawer = class {
       drawPcbNotePath({
         ctx: this.ctx,
         path: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
@@ -1344,7 +1390,15 @@ var CircuitToCanvasDrawer = class {
       drawPcbNoteText({
         ctx: this.ctx,
         text: element,
-        transform: this.realToCanvasMat,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
+    if (element.type === "pcb_note_line") {
+      drawPcbNoteLine({
+        ctx: this.ctx,
+        line: element,
+        realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }