circuit-to-canvas 0.0.49 → 0.0.51

package/dist/index.js

@@ -3,8 +3,7 @@ import {
   identity,
   compose,
   translate,
-  scale,
-  applyToPoint as applyToPoint16
+  scale
 } from "transformation-matrix";
 
 // lib/drawer/pcb-render-layer-filter.ts
@@ -253,12 +252,19 @@ function drawPolygon(params) {
 
 // lib/drawer/elements/soldermask-margin.ts
 import { applyToPoint as applyToPoint6 } from "transformation-matrix";
-function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRadius, rotation, realToCanvasMat, soldermaskColor, padColor) {
+function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRadius, rotation, realToCanvasMat, soldermaskColor, padColor, asymmetricMargins) {
   const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
   const scaledWidth = width * Math.abs(realToCanvasMat.a);
   const scaledHeight = height * Math.abs(realToCanvasMat.a);
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
   const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
+  const ml = asymmetricMargins?.left ?? margin;
+  const mr = asymmetricMargins?.right ?? margin;
+  const mt = asymmetricMargins?.top ?? margin;
+  const mb = asymmetricMargins?.bottom ?? margin;
+  const scaledThicknessL = Math.max(0, -ml) * Math.abs(realToCanvasMat.a);
+  const scaledThicknessR = Math.max(0, -mr) * Math.abs(realToCanvasMat.a);
+  const scaledThicknessT = Math.max(0, -mt) * Math.abs(realToCanvasMat.a);
+  const scaledThicknessB = Math.max(0, -mb) * Math.abs(realToCanvasMat.a);
   ctx.save();
   ctx.translate(cx, cy);
   if (rotation !== 0) {
@@ -299,14 +305,23 @@ function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRad
   if (ctx.globalCompositeOperation !== void 0) {
     ctx.globalCompositeOperation = prevCompositeOp || "source-over";
   }
-  const innerWidth = scaledWidth - scaledMargin * 2;
-  const innerHeight = scaledHeight - scaledMargin * 2;
-  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
+  const innerWidth = Math.max(
+    0,
+    scaledWidth - (scaledThicknessL + scaledThicknessR)
+  );
+  const innerHeight = Math.max(
+    0,
+    scaledHeight - (scaledThicknessT + scaledThicknessB)
+  );
+  const innerRadius = Math.max(
+    0,
+    scaledRadius - (scaledThicknessL + scaledThicknessR + scaledThicknessT + scaledThicknessB) / 4
+  );
   if (innerWidth > 0 && innerHeight > 0) {
     ctx.beginPath();
+    const x = -scaledWidth / 2 + scaledThicknessL;
+    const y = -scaledHeight / 2 + scaledThicknessT;
     if (innerRadius > 0) {
-      const x = -innerWidth / 2;
-      const y = -innerHeight / 2;
       const r = Math.min(innerRadius, innerWidth / 2, innerHeight / 2);
       ctx.moveTo(x + r, y);
       ctx.lineTo(x + innerWidth - r, y);
@@ -324,7 +339,7 @@ function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRad
       ctx.lineTo(x, y + r);
       ctx.arcTo(x, y, x + r, y, r);
     } else {
-      ctx.rect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight);
+      ctx.rect(x, y, innerWidth, innerHeight);
     }
     ctx.fillStyle = padColor;
     ctx.fill();
@@ -487,418 +502,146 @@ function offsetPolygonPoints(points, offset) {
   }
   return result;
 }
-function drawSoldermaskRingForPolygon(ctx, points, margin, realToCanvasMat, soldermaskColor, padColor) {
-  if (points.length < 3 || margin >= 0) return;
-  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
-  const prevCompositeOp = ctx.globalCompositeOperation;
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = "source-atop";
-  }
-  ctx.beginPath();
-  const canvasPoints = points.map(
-    (p) => applyToPoint6(realToCanvasMat, [p.x, p.y])
-  );
-  const firstPoint = canvasPoints[0];
-  if (firstPoint) {
-    const [firstX, firstY] = firstPoint;
-    ctx.moveTo(firstX, firstY);
-    for (let i = 1; i < canvasPoints.length; i++) {
-      const point = canvasPoints[i];
-      if (point) {
-        const [x, y] = point;
-        ctx.lineTo(x, y);
-      }
-    }
-    ctx.closePath();
-    ctx.fillStyle = soldermaskColor;
-    ctx.fill();
-  }
-  if (ctx.globalCompositeOperation !== void 0) {
-    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
-  }
-  const innerPoints = offsetPolygonPoints(points, margin);
-  if (innerPoints.length >= 3) {
-    ctx.beginPath();
-    const innerCanvasPoints = innerPoints.map(
-      (p) => applyToPoint6(realToCanvasMat, [p.x, p.y])
-    );
-    const firstInnerPoint = innerCanvasPoints[0];
-    if (firstInnerPoint) {
-      const [firstX, firstY] = firstInnerPoint;
-      ctx.moveTo(firstX, firstY);
-      for (let i = 1; i < innerCanvasPoints.length; i++) {
-        const point = innerCanvasPoints[i];
-        if (point) {
-          const [x, y] = point;
-          ctx.lineTo(x, y);
-        }
-      }
-      ctx.closePath();
-      ctx.fillStyle = padColor;
-      ctx.fill();
-    }
-  }
-  ctx.restore();
-}
 
 // lib/drawer/elements/pcb-plated-hole.ts
-function getSoldermaskColor(layers, colorMap) {
-  const layer = layers?.includes("top") ? "top" : "bottom";
-  return colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
-}
 function drawPcbPlatedHole(params) {
-  const { ctx, hole, realToCanvasMat, colorMap } = params;
-  const isCoveredWithSoldermask = hole.is_covered_with_solder_mask === true;
-  const margin = isCoveredWithSoldermask ? 0 : hole.soldermask_margin ?? 0;
-  const hasSoldermask = !isCoveredWithSoldermask && hole.soldermask_margin !== void 0 && hole.soldermask_margin !== 0;
-  const soldermaskRingColor = getSoldermaskColor(hole.layers, colorMap);
-  const positiveMarginColor = colorMap.substrate;
+  const {
+    ctx,
+    hole,
+    realToCanvasMat,
+    colorMap,
+    soldermaskMargin = 0,
+    showSoldermask
+  } = params;
+  if (hole.is_covered_with_solder_mask === true && showSoldermask) {
+    return;
+  }
   const copperColor = colorMap.copper.top;
+  const copperInset = soldermaskMargin < 0 ? Math.abs(soldermaskMargin) : 0;
   if (hole.shape === "circle") {
-    if (hasSoldermask && margin > 0) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.outer_diameter / 2 + margin,
-        fill: positiveMarginColor,
-        realToCanvasMat
-      });
-    }
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
-      radius: hole.outer_diameter / 2,
+      radius: hole.outer_diameter / 2 - copperInset,
       fill: copperColor,
       realToCanvasMat
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForCircle(
-        ctx,
-        { x: hole.x, y: hole.y },
-        hole.outer_diameter / 2,
-        margin,
-        realToCanvasMat,
-        soldermaskRingColor,
-        copperColor
-      );
-    }
-    if (isCoveredWithSoldermask) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.outer_diameter / 2,
-        fill: soldermaskRingColor,
-        realToCanvasMat
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.hole_diameter / 2,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
-    }
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      realToCanvasMat
+    });
     return;
   }
   if (hole.shape === "oval") {
-    if (hasSoldermask && margin > 0) {
-      drawOval({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius_x: hole.outer_width / 2 + margin,
-        radius_y: hole.outer_height / 2 + margin,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation: hole.ccw_rotation
-      });
-    }
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
-      radius_x: hole.outer_width / 2,
-      radius_y: hole.outer_height / 2,
+      radius_x: hole.outer_width / 2 - copperInset,
+      radius_y: hole.outer_height / 2 - copperInset,
       fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForOval(
-        ctx,
-        { x: hole.x, y: hole.y },
-        hole.outer_width / 2,
-        hole.outer_height / 2,
-        margin,
-        hole.ccw_rotation ?? 0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        copperColor
-      );
-    }
-    if (isCoveredWithSoldermask) {
-      drawOval({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius_x: hole.outer_width / 2,
-        radius_y: hole.outer_height / 2,
-        fill: soldermaskRingColor,
-        realToCanvasMat,
-        rotation: hole.ccw_rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawOval({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius_x: hole.hole_width / 2,
-        radius_y: hole.hole_height / 2,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation: hole.ccw_rotation
-      });
-    }
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius_x: hole.hole_width / 2,
+      radius_y: hole.hole_height / 2,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation: hole.ccw_rotation
+    });
     return;
   }
   if (hole.shape === "pill") {
-    if (hasSoldermask && margin > 0) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.outer_width + margin * 2,
-        height: hole.outer_height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation: hole.ccw_rotation
-      });
-    }
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.outer_width,
-      height: hole.outer_height,
+      width: hole.outer_width - copperInset * 2,
+      height: hole.outer_height - copperInset * 2,
       fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForPill(
-        ctx,
-        { x: hole.x, y: hole.y },
-        hole.outer_width,
-        hole.outer_height,
-        margin,
-        hole.ccw_rotation ?? 0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        copperColor
-      );
-    }
-    if (isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.outer_width,
-        height: hole.outer_height,
-        fill: soldermaskRingColor,
-        realToCanvasMat,
-        rotation: hole.ccw_rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation: hole.ccw_rotation
-      });
-    }
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation: hole.ccw_rotation
+    });
     return;
   }
   if (hole.shape === "circular_hole_with_rect_pad") {
-    if (hasSoldermask && margin > 0) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.rect_pad_width + margin * 2,
-        height: hole.rect_pad_height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        borderRadius: hole.rect_border_radius ?? 0
-      });
-    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.rect_pad_width,
-      height: hole.rect_pad_height,
+      width: hole.rect_pad_width - copperInset * 2,
+      height: hole.rect_pad_height - copperInset * 2,
       fill: copperColor,
       realToCanvasMat,
-      borderRadius: hole.rect_border_radius ?? 0
+      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawCircle({
+      ctx,
+      center: { x: holeX, y: holeY },
+      radius: hole.hole_diameter / 2,
+      fill: colorMap.drill,
+      realToCanvasMat
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForRect(
-        ctx,
-        { x: hole.x, y: hole.y },
-        hole.rect_pad_width,
-        hole.rect_pad_height,
-        margin,
-        hole.rect_border_radius ?? 0,
-        0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        copperColor
-      );
-    }
-    if (isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.rect_pad_width,
-        height: hole.rect_pad_height,
-        fill: soldermaskRingColor,
-        realToCanvasMat,
-        borderRadius: hole.rect_border_radius ?? 0
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      const holeX = hole.x + (hole.hole_offset_x ?? 0);
-      const holeY = hole.y + (hole.hole_offset_y ?? 0);
-      drawCircle({
-        ctx,
-        center: { x: holeX, y: holeY },
-        radius: hole.hole_diameter / 2,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
-    }
     return;
   }
   if (hole.shape === "pill_hole_with_rect_pad") {
-    if (hasSoldermask && margin > 0) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.rect_pad_width + margin * 2,
-        height: hole.rect_pad_height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        borderRadius: hole.rect_border_radius ?? 0
-      });
-    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.rect_pad_width,
-      height: hole.rect_pad_height,
+      width: hole.rect_pad_width - copperInset * 2,
+      height: hole.rect_pad_height - copperInset * 2,
       fill: copperColor,
       realToCanvasMat,
-      borderRadius: hole.rect_border_radius ?? 0
+      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0
+    });
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      realToCanvasMat
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForRect(
-        ctx,
-        { x: hole.x, y: hole.y },
-        hole.rect_pad_width,
-        hole.rect_pad_height,
-        margin,
-        hole.rect_border_radius ?? 0,
-        0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        copperColor
-      );
-    }
-    if (isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.rect_pad_width,
-        height: hole.rect_pad_height,
-        fill: soldermaskRingColor,
-        realToCanvasMat,
-        borderRadius: hole.rect_border_radius ?? 0
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      const holeX = hole.x + (hole.hole_offset_x ?? 0);
-      const holeY = hole.y + (hole.hole_offset_y ?? 0);
-      drawPill({
-        ctx,
-        center: { x: holeX, y: holeY },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
-    }
     return;
   }
   if (hole.shape === "rotated_pill_hole_with_rect_pad") {
-    if (hasSoldermask && margin > 0) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.rect_pad_width + margin * 2,
-        height: hole.rect_pad_height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        borderRadius: hole.rect_border_radius ?? 0,
-        rotation: hole.rect_ccw_rotation
-      });
-    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.rect_pad_width,
-      height: hole.rect_pad_height,
+      width: hole.rect_pad_width - copperInset * 2,
+      height: hole.rect_pad_height - copperInset * 2,
       fill: copperColor,
       realToCanvasMat,
-      borderRadius: hole.rect_border_radius ?? 0,
+      borderRadius: hole.rect_border_radius ? Math.max(0, hole.rect_border_radius - copperInset) : 0,
       rotation: hole.rect_ccw_rotation
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForRect(
-        ctx,
-        { x: hole.x, y: hole.y },
-        hole.rect_pad_width,
-        hole.rect_pad_height,
-        margin,
-        hole.rect_border_radius ?? 0,
-        hole.rect_ccw_rotation ?? 0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        copperColor
-      );
-    }
-    if (isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.rect_pad_width,
-        height: hole.rect_pad_height,
-        fill: soldermaskRingColor,
-        realToCanvasMat,
-        borderRadius: hole.rect_border_radius ?? 0,
-        rotation: hole.rect_ccw_rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      const holeX = hole.x + (hole.hole_offset_x ?? 0);
-      const holeY = hole.y + (hole.hole_offset_y ?? 0);
-      drawPill({
-        ctx,
-        center: { x: holeX, y: holeY },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation: hole.hole_ccw_rotation
-      });
-    }
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    drawPill({
+      ctx,
+      center: { x: holeX, y: holeY },
+      width: hole.hole_width,
+      height: hole.hole_height,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation: hole.hole_ccw_rotation
+    });
     return;
   }
   if (hole.shape === "hole_with_polygon_pad") {
@@ -908,80 +651,54 @@ function drawPcbPlatedHole(params) {
         x: hole.x + point.x,
         y: hole.y + point.y
       }));
-      if (hasSoldermask && margin > 0) {
-        const expandedPoints = offsetPolygonPoints(padPoints, margin);
+      const copperPoints = copperInset > 0 ? offsetPolygonPoints(padPoints, -copperInset) : padPoints;
+      if (copperPoints.length >= 3) {
         drawPolygon({
           ctx,
-          points: expandedPoints,
-          fill: positiveMarginColor,
+          points: copperPoints,
+          fill: copperColor,
           realToCanvasMat
         });
       }
-      drawPolygon({
+    }
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    const holeShape = hole.hole_shape;
+    if (holeShape === "circle") {
+      drawCircle({
         ctx,
-        points: padPoints,
-        fill: copperColor,
+        center: { x: holeX, y: holeY },
+        radius: (hole.hole_diameter ?? 0) / 2,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "oval") {
+      drawOval({
+        ctx,
+        center: { x: holeX, y: holeY },
+        radius_x: (hole.hole_width ?? 0) / 2,
+        radius_y: (hole.hole_height ?? 0) / 2,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "rotated_pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
         realToCanvasMat
       });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForPolygon(
-          ctx,
-          padPoints,
-          margin,
-          realToCanvasMat,
-          soldermaskRingColor,
-          copperColor
-        );
-      }
-      if (isCoveredWithSoldermask) {
-        drawPolygon({
-          ctx,
-          points: padPoints,
-          fill: soldermaskRingColor,
-          realToCanvasMat
-        });
-      }
-    }
-    if (!isCoveredWithSoldermask) {
-      const holeX = hole.x + (hole.hole_offset_x ?? 0);
-      const holeY = hole.y + (hole.hole_offset_y ?? 0);
-      const holeShape = hole.hole_shape;
-      if (holeShape === "circle") {
-        drawCircle({
-          ctx,
-          center: { x: holeX, y: holeY },
-          radius: (hole.hole_diameter ?? 0) / 2,
-          fill: colorMap.drill,
-          realToCanvasMat
-        });
-      } else if (holeShape === "oval") {
-        drawOval({
-          ctx,
-          center: { x: holeX, y: holeY },
-          radius_x: (hole.hole_width ?? 0) / 2,
-          radius_y: (hole.hole_height ?? 0) / 2,
-          fill: colorMap.drill,
-          realToCanvasMat
-        });
-      } else if (holeShape === "pill") {
-        drawPill({
-          ctx,
-          center: { x: holeX, y: holeY },
-          width: hole.hole_width ?? 0,
-          height: hole.hole_height ?? 0,
-          fill: colorMap.drill,
-          realToCanvasMat
-        });
-      } else if (holeShape === "rotated_pill") {
-        drawPill({
-          ctx,
-          center: { x: holeX, y: holeY },
-          width: hole.hole_width ?? 0,
-          height: hole.hole_height ?? 0,
-          fill: colorMap.drill,
-          realToCanvasMat
-        });
-      }
     }
     return;
   }
@@ -1014,304 +731,71 @@ function getRotation(hole) {
   return 0;
 }
 function drawPcbHole(params) {
-  const { ctx, hole, realToCanvasMat, colorMap } = params;
-  const isCoveredWithSoldermask = hole.is_covered_with_solder_mask === true;
-  const margin = isCoveredWithSoldermask ? 0 : hole.soldermask_margin ?? 0;
-  const hasSoldermask = !isCoveredWithSoldermask && hole.soldermask_margin !== void 0 && hole.soldermask_margin !== 0;
-  const positiveMarginColor = colorMap.substrate;
-  const soldermaskOverlayColor = colorMap.soldermaskOverCopper.top;
-  const soldermaskRingColor = colorMap.soldermaskOverCopper.top;
+  const { ctx, hole, realToCanvasMat, colorMap, soldermaskMargin = 0 } = params;
+  if (hole.is_covered_with_solder_mask === true) {
+    return;
+  }
+  const holeInset = soldermaskMargin < 0 ? Math.abs(soldermaskMargin) : 0;
   if (hole.hole_shape === "circle") {
-    if (hasSoldermask && margin > 0) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.hole_diameter / 2 + margin,
-        fill: positiveMarginColor,
-        realToCanvasMat
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.hole_diameter / 2,
-        fill: colorMap.drill,
-        realToCanvasMat
-      });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForCircle(
-          ctx,
-          { x: hole.x, y: hole.y },
-          hole.hole_diameter / 2,
-          margin,
-          realToCanvasMat,
-          soldermaskRingColor,
-          colorMap.drill
-        );
-      }
-    }
-    if (isCoveredWithSoldermask) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.hole_diameter / 2,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat
-      });
-    }
+    drawCircle({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius: hole.hole_diameter / 2 - holeInset,
+      fill: colorMap.drill,
+      realToCanvasMat
+    });
     return;
   }
   if (hole.hole_shape === "square") {
     const rotation = getRotation(hole);
-    if (hasSoldermask && margin > 0) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_diameter + margin * 2,
-        height: hole.hole_diameter + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_diameter,
-        height: hole.hole_diameter,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation
-      });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForRect(
-          ctx,
-          { x: hole.x, y: hole.y },
-          hole.hole_diameter,
-          hole.hole_diameter,
-          margin,
-          0,
-          rotation,
-          realToCanvasMat,
-          soldermaskRingColor,
-          colorMap.drill
-        );
-      }
-    }
-    if (isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_diameter,
-        height: hole.hole_diameter,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_diameter - holeInset * 2,
+      height: hole.hole_diameter - holeInset * 2,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation
+    });
     return;
   }
   if (hole.hole_shape === "oval") {
     const rotation = getRotation(hole);
-    if (hasSoldermask && margin > 0) {
-      drawOval({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius_x: hole.hole_width / 2 + margin,
-        radius_y: hole.hole_height / 2 + margin,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawOval({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius_x: hole.hole_width / 2,
-        radius_y: hole.hole_height / 2,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation
-      });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForOval(
-          ctx,
-          { x: hole.x, y: hole.y },
-          hole.hole_width / 2,
-          hole.hole_height / 2,
-          margin,
-          rotation,
-          realToCanvasMat,
-          soldermaskRingColor,
-          colorMap.drill
-        );
-      }
-    }
-    if (isCoveredWithSoldermask) {
-      drawOval({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius_x: hole.hole_width / 2,
-        radius_y: hole.hole_height / 2,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
+    drawOval({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      radius_x: hole.hole_width / 2 - holeInset,
+      radius_y: hole.hole_height / 2 - holeInset,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation
+    });
     return;
   }
   if (hole.hole_shape === "rect") {
     const rotation = getRotation(hole);
-    if (hasSoldermask && margin > 0) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width + margin * 2,
-        height: hole.hole_height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation
-      });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForRect(
-          ctx,
-          { x: hole.x, y: hole.y },
-          hole.hole_width,
-          hole.hole_height,
-          margin,
-          0,
-          rotation,
-          realToCanvasMat,
-          soldermaskRingColor,
-          colorMap.drill
-        );
-      }
-    }
-    if (isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
-    return;
-  }
-  if (hole.hole_shape === "pill") {
-    const rotation = getRotation(hole);
-    if (hasSoldermask && margin > 0) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width + margin * 2,
-        height: hole.hole_height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation
-      });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForPill(
-          ctx,
-          { x: hole.x, y: hole.y },
-          hole.hole_width,
-          hole.hole_height,
-          margin,
-          rotation,
-          realToCanvasMat,
-          soldermaskRingColor,
-          colorMap.drill
-        );
-      }
-    }
-    if (isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
+    drawRect({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width - holeInset * 2,
+      height: hole.hole_height - holeInset * 2,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation
+    });
     return;
   }
-  if (hole.hole_shape === "rotated_pill") {
+  if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill") {
     const rotation = getRotation(hole);
-    if (hasSoldermask && margin > 0) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width + margin * 2,
-        height: hole.hole_height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
-    if (!isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation
-      });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForPill(
-          ctx,
-          { x: hole.x, y: hole.y },
-          hole.hole_width,
-          hole.hole_height,
-          margin,
-          rotation,
-          realToCanvasMat,
-          soldermaskRingColor,
-          colorMap.drill
-        );
-      }
-    }
-    if (isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        rotation
-      });
-    }
+    drawPill({
+      ctx,
+      center: { x: hole.x, y: hole.y },
+      width: hole.hole_width - holeInset * 2,
+      height: hole.hole_height - holeInset * 2,
+      fill: colorMap.drill,
+      realToCanvasMat,
+      rotation
+    });
     return;
   }
 }
@@ -1320,33 +804,16 @@ function drawPcbHole(params) {
 function layerToColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
-function getSoldermaskColor2(layer, colorMap) {
-  return colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
-}
-function getBorderRadius(pad, margin = 0) {
-  return (pad.corner_radius ?? pad.rect_border_radius ?? 0) + margin;
+function getBorderRadius(pad) {
+  if (pad.shape === "rect" || pad.shape === "rotated_rect") {
+    return pad.corner_radius ?? pad.rect_border_radius ?? 0;
+  }
+  return 0;
 }
 function drawPcbSmtPad(params) {
   const { ctx, pad, realToCanvasMat, colorMap } = params;
   const color = layerToColor(pad.layer, colorMap);
-  const isCoveredWithSoldermask = pad.is_covered_with_solder_mask === true;
-  const margin = isCoveredWithSoldermask ? 0 : pad.soldermask_margin ?? 0;
-  const hasSoldermask = !isCoveredWithSoldermask && pad.soldermask_margin !== void 0 && pad.soldermask_margin !== 0;
-  const soldermaskRingColor = getSoldermaskColor2(pad.layer, colorMap);
-  const positiveMarginColor = colorMap.substrate;
-  const soldermaskOverlayColor = getSoldermaskColor2(pad.layer, colorMap);
   if (pad.shape === "rect") {
-    if (hasSoldermask && margin > 0) {
-      drawRect({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width + margin * 2,
-        height: pad.height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        borderRadius: getBorderRadius(pad)
-      });
-    }
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -1356,46 +823,9 @@ function drawPcbSmtPad(params) {
       realToCanvasMat,
       borderRadius: getBorderRadius(pad)
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForRect(
-        ctx,
-        { x: pad.x, y: pad.y },
-        pad.width,
-        pad.height,
-        margin,
-        getBorderRadius(pad),
-        0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        color
-      );
-    }
-    if (isCoveredWithSoldermask && margin === 0) {
-      drawRect({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width,
-        height: pad.height,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        borderRadius: getBorderRadius(pad)
-      });
-    }
     return;
   }
   if (pad.shape === "rotated_rect") {
-    if (hasSoldermask && margin > 0) {
-      drawRect({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width + margin * 2,
-        height: pad.height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        borderRadius: getBorderRadius(pad),
-        rotation: pad.ccw_rotation ?? 0
-      });
-    }
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -1406,44 +836,9 @@ function drawPcbSmtPad(params) {
       borderRadius: getBorderRadius(pad),
       rotation: pad.ccw_rotation ?? 0
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForRect(
-        ctx,
-        { x: pad.x, y: pad.y },
-        pad.width,
-        pad.height,
-        margin,
-        getBorderRadius(pad),
-        pad.ccw_rotation ?? 0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        color
-      );
-    }
-    if (isCoveredWithSoldermask && margin === 0) {
-      drawRect({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width,
-        height: pad.height,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        borderRadius: getBorderRadius(pad),
-        rotation: pad.ccw_rotation ?? 0
-      });
-    }
     return;
   }
   if (pad.shape === "circle") {
-    if (hasSoldermask && margin > 0) {
-      drawCircle({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        radius: pad.radius + margin,
-        fill: positiveMarginColor,
-        realToCanvasMat
-      });
-    }
     drawCircle({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -1451,39 +846,9 @@ function drawPcbSmtPad(params) {
       fill: color,
       realToCanvasMat
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForCircle(
-        ctx,
-        { x: pad.x, y: pad.y },
-        pad.radius,
-        margin,
-        realToCanvasMat,
-        soldermaskRingColor,
-        color
-      );
-    }
-    if (isCoveredWithSoldermask && margin === 0) {
-      drawCircle({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        radius: pad.radius,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat
-      });
-    }
     return;
   }
   if (pad.shape === "pill") {
-    if (hasSoldermask && margin > 0) {
-      drawPill({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width + margin * 2,
-        height: pad.height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat
-      });
-    }
     drawPill({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -1492,43 +857,9 @@ function drawPcbSmtPad(params) {
       fill: color,
       realToCanvasMat
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForPill(
-        ctx,
-        { x: pad.x, y: pad.y },
-        pad.width,
-        pad.height,
-        margin,
-        0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        color
-      );
-    }
-    if (isCoveredWithSoldermask && margin === 0) {
-      drawPill({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width,
-        height: pad.height,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat
-      });
-    }
     return;
   }
   if (pad.shape === "rotated_pill") {
-    if (hasSoldermask && margin > 0) {
-      drawPill({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width + margin * 2,
-        height: pad.height + margin * 2,
-        fill: positiveMarginColor,
-        realToCanvasMat,
-        rotation: pad.ccw_rotation ?? 0
-      });
-    }
     drawPill({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -1538,67 +869,16 @@ function drawPcbSmtPad(params) {
       realToCanvasMat,
       rotation: pad.ccw_rotation ?? 0
     });
-    if (hasSoldermask && margin < 0) {
-      drawSoldermaskRingForPill(
-        ctx,
-        { x: pad.x, y: pad.y },
-        pad.width,
-        pad.height,
-        margin,
-        pad.ccw_rotation ?? 0,
-        realToCanvasMat,
-        soldermaskRingColor,
-        color
-      );
-    }
-    if (isCoveredWithSoldermask && margin === 0) {
-      drawPill({
-        ctx,
-        center: { x: pad.x, y: pad.y },
-        width: pad.width,
-        height: pad.height,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-        rotation: pad.ccw_rotation ?? 0
-      });
-    }
     return;
   }
   if (pad.shape === "polygon") {
     if (pad.points && pad.points.length >= 3) {
-      if (hasSoldermask && margin > 0) {
-        const expandedPoints = offsetPolygonPoints(pad.points, margin);
-        drawPolygon({
-          ctx,
-          points: expandedPoints,
-          fill: positiveMarginColor,
-          realToCanvasMat
-        });
-      }
       drawPolygon({
         ctx,
         points: pad.points,
         fill: color,
         realToCanvasMat
       });
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForPolygon(
-          ctx,
-          pad.points,
-          margin,
-          realToCanvasMat,
-          soldermaskRingColor,
-          color
-        );
-      }
-      if (isCoveredWithSoldermask && margin === 0) {
-        drawPolygon({
-          ctx,
-          points: pad.points,
-          fill: soldermaskOverlayColor,
-          realToCanvasMat
-        });
-      }
     }
     return;
   }
@@ -1704,6 +984,13 @@ function drawPcbBoard(params) {
   const { ctx, board, realToCanvasMat, colorMap } = params;
   const { width, height, center, outline } = board;
   if (outline && Array.isArray(outline) && outline.length >= 3) {
+    drawPath({
+      ctx,
+      points: outline.map((p) => ({ x: p.x, y: p.y })),
+      fill: colorMap.substrate,
+      realToCanvasMat,
+      closePath: true
+    });
     drawPath({
       ctx,
       points: outline.map((p) => ({ x: p.x, y: p.y })),
@@ -1720,7 +1007,7 @@ function drawPcbBoard(params) {
       center,
       width,
       height,
-      fill: "transparent",
+      fill: colorMap.substrate,
       realToCanvasMat
     });
     const halfWidth = width / 2;
@@ -2784,359 +2071,1296 @@ function drawPcbNoteLine(params) {
   ctx.restore();
 }
 
-// lib/drawer/CircuitToCanvasDrawer.ts
-var CircuitToCanvasDrawer = class {
-  ctx;
-  colorMap;
-  realToCanvasMat;
-  constructor(canvasOrContext) {
-    if ("getContext" in canvasOrContext && typeof canvasOrContext.getContext === "function") {
-      const ctx = canvasOrContext.getContext("2d");
-      if (!ctx) {
-        throw new Error("Failed to get 2D rendering context from canvas");
+// lib/drawer/elements/pcb-soldermask/board.ts
+import { applyToPoint as applyToPoint16 } from "transformation-matrix";
+
+// lib/drawer/elements/helper-functions/draw-polygon.ts
+function drawPolygonPath(params) {
+  const { ctx, points } = params;
+  if (points.length < 3) return;
+  const firstPoint = points[0];
+  if (firstPoint) {
+    ctx.moveTo(firstPoint.x, firstPoint.y);
+    for (let i = 1; i < points.length; i++) {
+      const point = points[i];
+      if (point) {
+        ctx.lineTo(point.x, point.y);
       }
-      this.ctx = ctx;
-    } else {
-      this.ctx = canvasOrContext;
-    }
-    this.colorMap = { ...DEFAULT_PCB_COLOR_MAP };
-    this.realToCanvasMat = identity();
-  }
-  configure(config) {
-    if (config.colorOverrides) {
-      this.colorMap = {
-        ...this.colorMap,
-        ...config.colorOverrides,
-        copper: {
-          ...this.colorMap.copper,
-          ...config.colorOverrides.copper
-        },
-        silkscreen: {
-          ...this.colorMap.silkscreen,
-          ...config.colorOverrides.silkscreen
-        },
-        soldermask: {
-          ...this.colorMap.soldermask,
-          ...config.colorOverrides.soldermask
-        },
-        soldermaskWithCopperUnderneath: {
-          ...this.colorMap.soldermaskWithCopperUnderneath,
-          ...config.colorOverrides.soldermaskWithCopperUnderneath
-        },
-        soldermaskOverCopper: {
-          ...this.colorMap.soldermaskOverCopper,
-          ...config.colorOverrides.soldermaskOverCopper
-        }
-      };
     }
+    ctx.closePath();
   }
-  setCameraBounds(bounds) {
-    const canvas = this.ctx.canvas;
-    const canvasWidth = canvas.width;
-    const canvasHeight = canvas.height;
-    const realWidth = bounds.maxX - bounds.minX;
-    const realHeight = bounds.maxY - bounds.minY;
-    const scaleX = canvasWidth / realWidth;
-    const scaleY = canvasHeight / realHeight;
-    const uniformScale = Math.min(scaleX, scaleY);
-    const offsetX = (canvasWidth - realWidth * uniformScale) / 2;
-    const offsetY = (canvasHeight - realHeight * uniformScale) / 2;
-    this.realToCanvasMat = compose(
-      translate(offsetX, offsetY),
-      scale(uniformScale, -uniformScale),
-      translate(-bounds.minX, -bounds.maxY)
+}
+
+// lib/drawer/elements/pcb-soldermask/board.ts
+function drawBoardSoldermask(params) {
+  const { ctx, board, realToCanvasMat, soldermaskColor } = params;
+  const { width, height, center, outline } = board;
+  if (outline && Array.isArray(outline) && outline.length >= 3) {
+    const canvasPoints = outline.map((p) => {
+      const [x, y] = applyToPoint16(realToCanvasMat, [p.x, p.y]);
+      return { x, y };
+    });
+    ctx.beginPath();
+    drawPolygonPath({ ctx, points: canvasPoints });
+    ctx.fillStyle = soldermaskColor;
+    ctx.fill();
+  } else if (width !== void 0 && height !== void 0 && center) {
+    const [cx, cy] = applyToPoint16(realToCanvasMat, [center.x, center.y]);
+    const scaledWidth = width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = height * Math.abs(realToCanvasMat.a);
+    ctx.fillStyle = soldermaskColor;
+    ctx.fillRect(
+      cx - scaledWidth / 2,
+      cy - scaledHeight / 2,
+      scaledWidth,
+      scaledHeight
     );
   }
-  drawElements(elements, options = {}) {
-    const hasSoldermaskPads = elements.some(
-      (el) => el.type === "pcb_smtpad" && el.is_covered_with_solder_mask === true
-    );
-    const hasSoldermaskHoles = elements.some(
-      (el) => el.type === "pcb_hole" && el.is_covered_with_solder_mask === true
-    );
-    const hasSoldermaskPlatedHoles = elements.some(
-      (el) => el.type === "pcb_plated_hole" && el.is_covered_with_solder_mask === true
-    );
-    for (const element of elements) {
-      if (element.type === "pcb_board") {
-        this.drawBoardWithSoldermask(element);
-      } else {
-        this.drawElement(element, options);
-      }
-    }
+}
+
+// lib/drawer/elements/pcb-soldermask/cutout.ts
+import { applyToPoint as applyToPoint17 } from "transformation-matrix";
+
+// lib/drawer/elements/helper-functions/draw-rounded-rect.ts
+function drawRoundedRectPath(params) {
+  const { ctx, cx, cy, width, height, radius } = params;
+  const x = cx - width / 2;
+  const y = cy - height / 2;
+  const r = Math.min(radius, width / 2, height / 2);
+  if (r > 0) {
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.arcTo(x + width, y, x + width, y + r, r);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.arcTo(x + width, y + height, x + width - r, y + height, r);
+    ctx.lineTo(x + r, y + height);
+    ctx.arcTo(x, y + height, x, y + height - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+  } else {
+    ctx.rect(x, y, width, height);
   }
-  drawBoardWithSoldermask(board) {
-    const { width, height, center, outline } = board;
-    const layer = "top";
-    if (outline && Array.isArray(outline) && outline.length >= 3) {
-      const soldermaskColor = this.colorMap.soldermask[layer] ?? this.colorMap.soldermask.top;
-      const canvasPoints = outline.map((p) => {
-        const [x, y] = applyToPoint16(this.realToCanvasMat, [p.x, p.y]);
-        return { x, y };
-      });
-      this.ctx.beginPath();
-      const firstPoint = canvasPoints[0];
-      if (firstPoint) {
-        this.ctx.moveTo(firstPoint.x, firstPoint.y);
-        for (let i = 1; i < canvasPoints.length; i++) {
-          const point = canvasPoints[i];
-          if (point) {
-            this.ctx.lineTo(point.x, point.y);
-          }
-        }
-        this.ctx.closePath();
-      }
-      this.ctx.fillStyle = soldermaskColor;
-      this.ctx.fill();
-      drawPath({
-        ctx: this.ctx,
-        points: outline.map((p) => ({ x: p.x, y: p.y })),
-        stroke: this.colorMap.boardOutline,
-        strokeWidth: 0.1,
-        realToCanvasMat: this.realToCanvasMat,
-        closePath: true
-      });
-      return;
+  ctx.closePath();
+}
+
+// lib/drawer/elements/pcb-soldermask/cutout.ts
+function processCutoutSoldermask(params) {
+  const { ctx, cutout, realToCanvasMat, colorMap } = params;
+  ctx.fillStyle = colorMap.drill;
+  if (cutout.shape === "rect") {
+    const [cx, cy] = applyToPoint17(realToCanvasMat, [
+      cutout.center?.x ?? 0,
+      cutout.center?.y ?? 0
+    ]);
+    const scaledWidth = cutout.width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = cutout.height * Math.abs(realToCanvasMat.a);
+    const scaledRadius = (cutout.corner_radius ?? 0) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (cutout.rotation) {
+      ctx.rotate(-cutout.rotation * Math.PI / 180);
     }
-    if (width !== void 0 && height !== void 0 && center) {
-      const soldermaskColor = this.colorMap.soldermask[layer] ?? this.colorMap.soldermask.top;
-      drawRect({
-        ctx: this.ctx,
-        center,
-        width,
-        height,
-        fill: soldermaskColor,
-        realToCanvasMat: this.realToCanvasMat
-      });
-      const halfWidth = width / 2;
-      const halfHeight = height / 2;
-      const corners = [
-        { x: center.x - halfWidth, y: center.y - halfHeight },
-        { x: center.x + halfWidth, y: center.y - halfHeight },
-        { x: center.x + halfWidth, y: center.y + halfHeight },
-        { x: center.x - halfWidth, y: center.y + halfHeight }
-      ];
-      drawPath({
-        ctx: this.ctx,
-        points: corners,
-        stroke: this.colorMap.boardOutline,
-        strokeWidth: 0.1,
-        realToCanvasMat: this.realToCanvasMat,
-        closePath: true
-      });
+    ctx.beginPath();
+    drawRoundedRectPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight,
+      radius: scaledRadius
+    });
+    ctx.restore();
+    ctx.fill();
+  } else if (cutout.shape === "circle") {
+    const [cx, cy] = applyToPoint17(realToCanvasMat, [
+      cutout.center?.x ?? 0,
+      cutout.center?.y ?? 0
+    ]);
+    const scaledRadius = cutout.radius * Math.abs(realToCanvasMat.a);
+    ctx.beginPath();
+    ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.fill();
+  } else if (cutout.shape === "polygon" && cutout.points && cutout.points.length >= 3) {
+    const canvasPoints = cutout.points.map((p) => {
+      const [x, y] = applyToPoint17(realToCanvasMat, [p.x, p.y]);
+      return { x, y };
+    });
+    ctx.beginPath();
+    drawPolygonPath({ ctx, points: canvasPoints });
+    ctx.fill();
+  }
+}
+
+// lib/drawer/elements/pcb-soldermask/hole.ts
+import { applyToPoint as applyToPoint18 } from "transformation-matrix";
+
+// lib/drawer/elements/helper-functions/draw-pill.ts
+function drawPillPath(params) {
+  const { ctx, cx, cy, width, height } = params;
+  if (width > height) {
+    const radius = height / 2;
+    const straightLength = width - height;
+    ctx.moveTo(cx - straightLength / 2, cy - radius);
+    ctx.lineTo(cx + straightLength / 2, cy - radius);
+    ctx.arc(cx + straightLength / 2, cy, radius, -Math.PI / 2, Math.PI / 2);
+    ctx.lineTo(cx - straightLength / 2, cy + radius);
+    ctx.arc(cx - straightLength / 2, cy, radius, Math.PI / 2, -Math.PI / 2);
+  } else if (height > width) {
+    const radius = width / 2;
+    const straightLength = height - width;
+    ctx.moveTo(cx + radius, cy - straightLength / 2);
+    ctx.lineTo(cx + radius, cy + straightLength / 2);
+    ctx.arc(cx, cy + straightLength / 2, radius, 0, Math.PI);
+    ctx.lineTo(cx - radius, cy - straightLength / 2);
+    ctx.arc(cx, cy - straightLength / 2, radius, Math.PI, 0);
+  } else {
+    ctx.arc(cx, cy, width / 2, 0, Math.PI * 2);
+  }
+  ctx.closePath();
+}
+
+// lib/drawer/elements/pcb-soldermask/hole.ts
+function processHoleSoldermask(params) {
+  const {
+    ctx,
+    hole,
+    realToCanvasMat,
+    colorMap,
+    soldermaskOverCopperColor,
+    showSoldermask
+  } = params;
+  const isCoveredWithSoldermask = showSoldermask && hole.is_covered_with_solder_mask === true;
+  const margin = showSoldermask ? hole.soldermask_margin ?? 0 : 0;
+  if (isCoveredWithSoldermask) {
+    ctx.fillStyle = soldermaskOverCopperColor;
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+  } else if (margin < 0) {
+    ctx.fillStyle = colorMap.drill;
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+    drawNegativeMarginRingForHole({
+      ctx,
+      hole,
+      realToCanvasMat,
+      soldermaskOverCopperColor,
+      margin
+    });
+  } else if (margin > 0) {
+    ctx.fillStyle = colorMap.substrate;
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin });
+    ctx.fill();
+    ctx.fillStyle = colorMap.drill;
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+  } else {
+    ctx.fillStyle = colorMap.drill;
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+  }
+}
+function getHoleRotation(hole) {
+  if ("ccw_rotation" in hole && typeof hole.ccw_rotation === "number") {
+    return hole.ccw_rotation;
+  }
+  return 0;
+}
+function drawHoleShapePath(params) {
+  const { ctx, hole, realToCanvasMat, margin } = params;
+  const rotation = getHoleRotation(hole);
+  if (hole.hole_shape === "circle") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledRadius = (hole.hole_diameter / 2 + margin) * Math.abs(realToCanvasMat.a);
+    ctx.beginPath();
+    ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+    ctx.closePath();
+  } else if (hole.hole_shape === "square") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledSize = (hole.hole_diameter + margin * 2) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
     }
+    ctx.beginPath();
+    ctx.rect(-scaledSize / 2, -scaledSize / 2, scaledSize, scaledSize);
+    ctx.closePath();
+    ctx.restore();
+  } else if (hole.hole_shape === "oval") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledRadiusX = (hole.hole_width / 2 + margin) * Math.abs(realToCanvasMat.a);
+    const scaledRadiusY = (hole.hole_height / 2 + margin) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
+    }
+    ctx.beginPath();
+    ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.restore();
+  } else if (hole.hole_shape === "rect") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = (hole.hole_width + margin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledHeight = (hole.hole_height + margin * 2) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
+    }
+    ctx.beginPath();
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+    ctx.closePath();
+    ctx.restore();
+  } else if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = (hole.hole_width + margin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledHeight = (hole.hole_height + margin * 2) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
+    }
+    ctx.beginPath();
+    drawPillPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight
+    });
+    ctx.restore();
   }
-  drawElement(element, options) {
-    if (!shouldDrawElement(element, options)) {
-      return;
+}
+function drawNegativeMarginRingForHole(params) {
+  const { ctx, hole, realToCanvasMat, soldermaskOverCopperColor, margin } = params;
+  const thickness = Math.abs(margin);
+  const rotation = getHoleRotation(hole);
+  ctx.fillStyle = soldermaskOverCopperColor;
+  if (hole.hole_shape === "circle") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledRadius = hole.hole_diameter / 2 * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    const innerRadius = Math.max(0, scaledRadius - scaledThickness);
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+    if (innerRadius > 0) {
+      ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2, true);
     }
-    if (element.type === "pcb_plated_hole") {
-      drawPcbPlatedHole({
-        ctx: this.ctx,
-        hole: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.hole_shape === "square") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledSize = hole.hole_diameter * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    const innerSize = Math.max(0, scaledSize - scaledThickness * 2);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
     }
-    if (element.type === "pcb_via") {
-      drawPcbVia({
-        ctx: this.ctx,
-        via: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.beginPath();
+    ctx.rect(-scaledSize / 2, -scaledSize / 2, scaledSize, scaledSize);
+    if (innerSize > 0) {
+      ctx.rect(-innerSize / 2, -innerSize / 2, innerSize, innerSize);
     }
-    if (element.type === "pcb_hole") {
-      drawPcbHole({
-        ctx: this.ctx,
-        hole: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.hole_shape === "oval") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledRadiusX = hole.hole_width / 2 * Math.abs(realToCanvasMat.a);
+    const scaledRadiusY = hole.hole_height / 2 * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    const innerRadiusX = Math.max(0, scaledRadiusX - scaledThickness);
+    const innerRadiusY = Math.max(0, scaledRadiusY - scaledThickness);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
     }
-    if (element.type === "pcb_smtpad") {
-      drawPcbSmtPad({
-        ctx: this.ctx,
-        pad: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.beginPath();
+    ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+    if (innerRadiusX > 0 && innerRadiusY > 0) {
+      ctx.moveTo(innerRadiusX, 0);
+      ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2);
     }
-    if (element.type === "pcb_trace") {
-      drawPcbTrace({
-        ctx: this.ctx,
-        trace: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.hole_shape === "rect") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = hole.hole_width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = hole.hole_height * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    const innerWidth = Math.max(0, scaledWidth - scaledThickness * 2);
+    const innerHeight = Math.max(0, scaledHeight - scaledThickness * 2);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
     }
-    if (element.type === "pcb_board") {
-      drawPcbBoard({
-        ctx: this.ctx,
-        board: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+    ctx.beginPath();
+    ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight);
+    if (innerWidth > 0 && innerHeight > 0) {
+      ctx.rect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight);
+    }
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.hole_shape === "pill" || hole.hole_shape === "rotated_pill") {
+    const [cx, cy] = applyToPoint18(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = hole.hole_width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = hole.hole_height * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
+    }
+    ctx.beginPath();
+    drawPillPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight
+    });
+    const innerWidth = scaledWidth - scaledThickness * 2;
+    const innerHeight = scaledHeight - scaledThickness * 2;
+    if (innerWidth > 0 && innerHeight > 0) {
+      drawPillPath({
+        ctx,
+        cx: 0,
+        cy: 0,
+        width: innerWidth,
+        height: innerHeight
       });
     }
-    if (element.type === "pcb_silkscreen_text") {
-      drawPcbSilkscreenText({
-        ctx: this.ctx,
-        text: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+    ctx.fill("evenodd");
+    ctx.restore();
+  }
+}
+
+// lib/drawer/elements/pcb-soldermask/plated-hole.ts
+import { applyToPoint as applyToPoint19 } from "transformation-matrix";
+function processPlatedHoleSoldermask(params) {
+  const {
+    ctx,
+    hole,
+    realToCanvasMat,
+    colorMap,
+    soldermaskOverCopperColor,
+    layer,
+    showSoldermask
+  } = params;
+  if (hole.layers && !hole.layers.includes(layer)) return;
+  const isCoveredWithSoldermask = showSoldermask && hole.is_covered_with_solder_mask === true;
+  const margin = showSoldermask ? hole.soldermask_margin ?? 0 : 0;
+  const copperColor = colorMap.copper.top;
+  if (isCoveredWithSoldermask) {
+    ctx.fillStyle = soldermaskOverCopperColor;
+    drawPlatedHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+  } else if (margin < 0) {
+    ctx.fillStyle = copperColor;
+    drawPlatedHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+    drawNegativeMarginRingForPlatedHole({
+      ctx,
+      hole,
+      realToCanvasMat,
+      soldermaskOverCopperColor,
+      margin
+    });
+  } else if (margin > 0) {
+    ctx.fillStyle = colorMap.substrate;
+    drawPlatedHoleShapePath({ ctx, hole, realToCanvasMat, margin });
+    ctx.fill();
+    ctx.fillStyle = copperColor;
+    drawPlatedHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+  } else {
+    ctx.fillStyle = copperColor;
+    drawPlatedHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 });
+    ctx.fill();
+  }
+}
+function drawPlatedHoleShapePath(params) {
+  const { ctx, hole, realToCanvasMat, margin } = params;
+  if (hole.shape === "circle") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledRadius = (hole.outer_diameter / 2 + margin) * Math.abs(realToCanvasMat.a);
+    ctx.beginPath();
+    ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+    ctx.closePath();
+  } else if (hole.shape === "oval") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledRadiusX = (hole.outer_width / 2 + margin) * Math.abs(realToCanvasMat.a);
+    const scaledRadiusY = (hole.outer_height / 2 + margin) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (hole.ccw_rotation && hole.ccw_rotation !== 0) {
+      ctx.rotate(-(hole.ccw_rotation * Math.PI) / 180);
+    }
+    ctx.beginPath();
+    ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+    ctx.closePath();
+    ctx.restore();
+  } else if (hole.shape === "pill") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = (hole.outer_width + margin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledHeight = (hole.outer_height + margin * 2) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (hole.ccw_rotation && hole.ccw_rotation !== 0) {
+      ctx.rotate(-(hole.ccw_rotation * Math.PI) / 180);
+    }
+    ctx.beginPath();
+    drawPillPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight
+    });
+    ctx.restore();
+  } else if (hole.shape === "circular_hole_with_rect_pad" || hole.shape === "pill_hole_with_rect_pad") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = (hole.rect_pad_width + margin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledHeight = (hole.rect_pad_height + margin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledRadius = (hole.rect_border_radius ?? 0) * Math.abs(realToCanvasMat.a);
+    ctx.beginPath();
+    drawRoundedRectPath({
+      ctx,
+      cx,
+      cy,
+      width: scaledWidth,
+      height: scaledHeight,
+      radius: scaledRadius
+    });
+  } else if (hole.shape === "rotated_pill_hole_with_rect_pad") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = (hole.rect_pad_width + margin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledHeight = (hole.rect_pad_height + margin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledRadius = (hole.rect_border_radius ?? 0) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (hole.rect_ccw_rotation) {
+      ctx.rotate(-hole.rect_ccw_rotation * Math.PI / 180);
+    }
+    ctx.beginPath();
+    drawRoundedRectPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight,
+      radius: scaledRadius
+    });
+    ctx.restore();
+  } else if (hole.shape === "hole_with_polygon_pad" && hole.pad_outline && hole.pad_outline.length >= 3) {
+    const padPoints = hole.pad_outline.map(
+      (point) => ({
+        x: hole.x + point.x,
+        y: hole.y + point.y
+      })
+    );
+    const points = margin !== 0 ? offsetPolygonPoints(padPoints, margin) : padPoints;
+    const canvasPoints = points.map((p) => {
+      const [x, y] = applyToPoint19(realToCanvasMat, [p.x, p.y]);
+      return { x, y };
+    });
+    ctx.beginPath();
+    drawPolygonPath({ ctx, points: canvasPoints });
+  }
+}
+function drawNegativeMarginRingForPlatedHole(params) {
+  const { ctx, hole, realToCanvasMat, soldermaskOverCopperColor, margin } = params;
+  const thickness = Math.abs(margin);
+  ctx.fillStyle = soldermaskOverCopperColor;
+  if (hole.shape === "circle") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledOuterRadius = hole.outer_diameter / 2 * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    const innerRadius = Math.max(0, scaledOuterRadius - scaledThickness);
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, scaledOuterRadius, 0, Math.PI * 2);
+    if (innerRadius > 0) {
+      ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2, true);
+    }
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.shape === "oval") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledRadiusX = hole.outer_width / 2 * Math.abs(realToCanvasMat.a);
+    const scaledRadiusY = hole.outer_height / 2 * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    const innerRadiusX = Math.max(0, scaledRadiusX - scaledThickness);
+    const innerRadiusY = Math.max(0, scaledRadiusY - scaledThickness);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (hole.ccw_rotation && hole.ccw_rotation !== 0) {
+      ctx.rotate(-(hole.ccw_rotation * Math.PI) / 180);
+    }
+    ctx.beginPath();
+    ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+    if (innerRadiusX > 0 && innerRadiusY > 0) {
+      ctx.moveTo(innerRadiusX, 0);
+      ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2);
+    }
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.shape === "pill") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = hole.outer_width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = hole.outer_height * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (hole.ccw_rotation && hole.ccw_rotation !== 0) {
+      ctx.rotate(-(hole.ccw_rotation * Math.PI) / 180);
+    }
+    ctx.beginPath();
+    drawPillPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight
+    });
+    const innerWidth = scaledWidth - scaledThickness * 2;
+    const innerHeight = scaledHeight - scaledThickness * 2;
+    if (innerWidth > 0 && innerHeight > 0) {
+      drawPillPath({
+        ctx,
+        cx: 0,
+        cy: 0,
+        width: innerWidth,
+        height: innerHeight
       });
     }
-    if (element.type === "pcb_silkscreen_rect") {
-      drawPcbSilkscreenRect({
-        ctx: this.ctx,
-        rect: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.shape === "circular_hole_with_rect_pad" || hole.shape === "pill_hole_with_rect_pad" || hole.shape === "rotated_pill_hole_with_rect_pad") {
+    const [cx, cy] = applyToPoint19(realToCanvasMat, [hole.x, hole.y]);
+    const scaledWidth = hole.rect_pad_width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = hole.rect_pad_height * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (hole.shape === "rotated_pill_hole_with_rect_pad" && hole.rect_ccw_rotation) {
+      ctx.rotate(-hole.rect_ccw_rotation * Math.PI / 180);
+    }
+    const outerRadius = hole.rect_border_radius ? hole.rect_border_radius * Math.abs(realToCanvasMat.a) : 0;
+    ctx.beginPath();
+    drawRoundedRectPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight,
+      radius: outerRadius
+    });
+    const innerWidth = scaledWidth - scaledThickness * 2;
+    const innerHeight = scaledHeight - scaledThickness * 2;
+    if (innerWidth > 0 && innerHeight > 0) {
+      const innerRadius = Math.max(0, outerRadius - scaledThickness);
+      drawRoundedRectPath({
+        ctx,
+        cx: 0,
+        cy: 0,
+        width: innerWidth,
+        height: innerHeight,
+        radius: innerRadius
       });
     }
-    if (element.type === "pcb_silkscreen_circle") {
-      drawPcbSilkscreenCircle({
-        ctx: this.ctx,
-        circle: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (hole.shape === "hole_with_polygon_pad" && hole.pad_outline && hole.pad_outline.length >= 3) {
+    const padPoints = hole.pad_outline.map(
+      (point) => ({
+        x: hole.x + point.x,
+        y: hole.y + point.y
+      })
+    );
+    ctx.save();
+    ctx.beginPath();
+    const canvasPoints = padPoints.map((p) => {
+      const [x, y] = applyToPoint19(realToCanvasMat, [p.x, p.y]);
+      return { x, y };
+    });
+    drawPolygonPath({ ctx, points: canvasPoints });
+    const innerPoints = offsetPolygonPoints(padPoints, -thickness);
+    if (innerPoints.length >= 3) {
+      const innerCanvasPoints = innerPoints.map((p) => {
+        const [x, y] = applyToPoint19(realToCanvasMat, [p.x, p.y]);
+        return { x, y };
       });
+      drawPolygonPath({ ctx, points: innerCanvasPoints });
+    }
+    ctx.fill("evenodd");
+    ctx.restore();
+  }
+}
+
+// lib/drawer/elements/pcb-soldermask/smt-pad.ts
+import { applyToPoint as applyToPoint20 } from "transformation-matrix";
+function processSmtPadSoldermask(params) {
+  const {
+    ctx,
+    pad,
+    realToCanvasMat,
+    colorMap,
+    soldermaskOverCopperColor,
+    layer,
+    showSoldermask
+  } = params;
+  if (pad.layer !== layer) return;
+  const isCoveredWithSoldermask = showSoldermask && pad.is_covered_with_solder_mask === true;
+  const margin = showSoldermask ? pad.soldermask_margin ?? 0 : 0;
+  let ml = margin;
+  let mr = margin;
+  let mt = margin;
+  let mb = margin;
+  if (pad.shape === "rect" || pad.shape === "rotated_rect") {
+    ml = pad.soldermask_margin_left ?? margin;
+    mr = pad.soldermask_margin_right ?? margin;
+    mt = pad.soldermask_margin_top ?? margin;
+    mb = pad.soldermask_margin_bottom ?? margin;
+  }
+  const copperColor = colorMap.copper[pad.layer] || colorMap.copper.top;
+  if (isCoveredWithSoldermask) {
+    ctx.fillStyle = soldermaskOverCopperColor;
+    drawPadShapePath({ ctx, pad, realToCanvasMat, ml: 0, mr: 0, mt: 0, mb: 0 });
+    ctx.fill();
+  } else if (ml < 0 || mr < 0 || mt < 0 || mb < 0) {
+    ctx.fillStyle = copperColor;
+    drawPadShapePath({ ctx, pad, realToCanvasMat, ml: 0, mr: 0, mt: 0, mb: 0 });
+    ctx.fill();
+    drawNegativeMarginRingForPad({
+      ctx,
+      pad,
+      realToCanvasMat,
+      soldermaskOverCopperColor,
+      ml,
+      mr,
+      mt,
+      mb
+    });
+  } else if (ml > 0 || mr > 0 || mt > 0 || mb > 0) {
+    ctx.fillStyle = colorMap.substrate;
+    drawPadShapePath({ ctx, pad, realToCanvasMat, ml, mr, mt, mb });
+    ctx.fill();
+    ctx.fillStyle = copperColor;
+    drawPadShapePath({ ctx, pad, realToCanvasMat, ml: 0, mr: 0, mt: 0, mb: 0 });
+    ctx.fill();
+  } else {
+    ctx.fillStyle = copperColor;
+    drawPadShapePath({ ctx, pad, realToCanvasMat, ml: 0, mr: 0, mt: 0, mb: 0 });
+    ctx.fill();
+  }
+}
+function drawPadShapePath(params) {
+  const { ctx, pad, realToCanvasMat, ml, mr, mt, mb } = params;
+  const rotation = pad.shape === "rotated_rect" || pad.shape === "rotated_pill" ? pad.ccw_rotation ?? 0 : 0;
+  if (pad.shape === "rect" || pad.shape === "rotated_rect") {
+    const borderRadius = pad.corner_radius ?? pad.rect_border_radius ?? 0;
+    const radians = rotation * Math.PI / 180;
+    const dxLocal = (mr - ml) / 2;
+    const dyLocal = (mt - mb) / 2;
+    const dxGlobal = dxLocal * Math.cos(radians) - dyLocal * Math.sin(radians);
+    const dyGlobal = dxLocal * Math.sin(radians) + dyLocal * Math.cos(radians);
+    const [cx, cy] = applyToPoint20(realToCanvasMat, [
+      pad.x + dxGlobal,
+      pad.y + dyGlobal
+    ]);
+    const scaledWidth = (pad.width + ml + mr) * Math.abs(realToCanvasMat.a);
+    const scaledHeight = (pad.height + mt + mb) * Math.abs(realToCanvasMat.a);
+    const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
+    }
+    ctx.beginPath();
+    drawRoundedRectPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight,
+      radius: scaledRadius
+    });
+    ctx.restore();
+  } else if (pad.shape === "circle") {
+    const avgMargin = (ml + mr + mt + mb) / 4;
+    const [cx, cy] = applyToPoint20(realToCanvasMat, [pad.x, pad.y]);
+    const scaledRadius = (pad.radius + avgMargin) * Math.abs(realToCanvasMat.a);
+    ctx.beginPath();
+    ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+    ctx.closePath();
+  } else if (pad.shape === "pill" || pad.shape === "rotated_pill") {
+    const avgMargin = (ml + mr) / 2;
+    const [cx, cy] = applyToPoint20(realToCanvasMat, [pad.x, pad.y]);
+    const scaledWidth = (pad.width + avgMargin * 2) * Math.abs(realToCanvasMat.a);
+    const scaledHeight = (pad.height + avgMargin * 2) * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
+    }
+    ctx.beginPath();
+    drawPillPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight
+    });
+    ctx.restore();
+  } else if (pad.shape === "polygon" && pad.points && pad.points.length >= 3) {
+    const avgMargin = (ml + mr + mt + mb) / 4;
+    const points = avgMargin !== 0 ? offsetPolygonPoints(pad.points, avgMargin) : pad.points;
+    const canvasPoints = points.map((p) => {
+      const [x, y] = applyToPoint20(realToCanvasMat, [p.x, p.y]);
+      return { x, y };
+    });
+    ctx.beginPath();
+    drawPolygonPath({ ctx, points: canvasPoints });
+  }
+}
+function drawNegativeMarginRingForPad(params) {
+  const {
+    ctx,
+    pad,
+    realToCanvasMat,
+    soldermaskOverCopperColor,
+    ml,
+    mr,
+    mt,
+    mb
+  } = params;
+  const rotation = pad.shape === "rotated_rect" || pad.shape === "rotated_pill" ? pad.ccw_rotation ?? 0 : 0;
+  const thicknessL = Math.max(0, -ml);
+  const thicknessR = Math.max(0, -mr);
+  const thicknessT = Math.max(0, -mt);
+  const thicknessB = Math.max(0, -mb);
+  ctx.fillStyle = soldermaskOverCopperColor;
+  if (pad.shape === "rect" || pad.shape === "rotated_rect") {
+    const borderRadius = pad.corner_radius ?? pad.rect_border_radius ?? 0;
+    const [cx, cy] = applyToPoint20(realToCanvasMat, [pad.x, pad.y]);
+    const scaledWidth = pad.width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = pad.height * Math.abs(realToCanvasMat.a);
+    const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a);
+    const scaledThicknessL = thicknessL * Math.abs(realToCanvasMat.a);
+    const scaledThicknessR = thicknessR * Math.abs(realToCanvasMat.a);
+    const scaledThicknessT = thicknessT * Math.abs(realToCanvasMat.a);
+    const scaledThicknessB = thicknessB * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
     }
-    if (element.type === "pcb_silkscreen_line") {
-      drawPcbSilkscreenLine({
-        ctx: this.ctx,
-        line: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+    ctx.beginPath();
+    drawRoundedRectPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight,
+      radius: scaledRadius
+    });
+    const innerWidth = scaledWidth - scaledThicknessL - scaledThicknessR;
+    const innerHeight = scaledHeight - scaledThicknessT - scaledThicknessB;
+    const innerOffsetX = (scaledThicknessL - scaledThicknessR) / 2;
+    const innerOffsetY = (scaledThicknessT - scaledThicknessB) / 2;
+    const innerRadius = Math.max(
+      0,
+      scaledRadius - (scaledThicknessL + scaledThicknessR + scaledThicknessT + scaledThicknessB) / 4
+    );
+    if (innerWidth > 0 && innerHeight > 0) {
+      drawRoundedRectPath({
+        ctx,
+        cx: innerOffsetX,
+        cy: innerOffsetY,
+        width: innerWidth,
+        height: innerHeight,
+        radius: innerRadius
       });
     }
-    if (element.type === "pcb_silkscreen_path") {
-      drawPcbSilkscreenPath({
-        ctx: this.ctx,
-        path: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (pad.shape === "circle") {
+    const thickness = Math.max(thicknessL, thicknessR, thicknessT, thicknessB);
+    const [cx, cy] = applyToPoint20(realToCanvasMat, [pad.x, pad.y]);
+    const scaledRadius = pad.radius * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    const innerRadius = Math.max(0, scaledRadius - scaledThickness);
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+    if (innerRadius > 0) {
+      ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2, true);
     }
-    if (element.type === "pcb_silkscreen_pill") {
-      drawPcbSilkscreenPill({
-        ctx: this.ctx,
-        pill: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (pad.shape === "pill" || pad.shape === "rotated_pill") {
+    const thickness = Math.max(thicknessL, thicknessR, thicknessT, thicknessB);
+    const [cx, cy] = applyToPoint20(realToCanvasMat, [pad.x, pad.y]);
+    const scaledWidth = pad.width * Math.abs(realToCanvasMat.a);
+    const scaledHeight = pad.height * Math.abs(realToCanvasMat.a);
+    const scaledThickness = thickness * Math.abs(realToCanvasMat.a);
+    ctx.save();
+    ctx.translate(cx, cy);
+    if (rotation !== 0) {
+      ctx.rotate(-rotation * Math.PI / 180);
     }
-    if (element.type === "pcb_silkscreen_oval") {
-      drawPcbSilkscreenOval({
-        ctx: this.ctx,
-        oval: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+    ctx.beginPath();
+    drawPillPath({
+      ctx,
+      cx: 0,
+      cy: 0,
+      width: scaledWidth,
+      height: scaledHeight
+    });
+    const innerWidth = scaledWidth - scaledThickness * 2;
+    const innerHeight = scaledHeight - scaledThickness * 2;
+    if (innerWidth > 0 && innerHeight > 0) {
+      drawPillPath({
+        ctx,
+        cx: 0,
+        cy: 0,
+        width: innerWidth,
+        height: innerHeight
       });
     }
-    if (element.type === "pcb_cutout") {
-      drawPcbCutout({
-        ctx: this.ctx,
-        cutout: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+    ctx.fill("evenodd");
+    ctx.restore();
+  } else if (pad.shape === "polygon" && pad.points && pad.points.length >= 3) {
+    const thickness = Math.max(thicknessL, thicknessR, thicknessT, thicknessB);
+    ctx.save();
+    ctx.beginPath();
+    const canvasPoints = pad.points.map((p) => {
+      const [x, y] = applyToPoint20(realToCanvasMat, [p.x, p.y]);
+      return { x, y };
+    });
+    drawPolygonPath({ ctx, points: canvasPoints });
+    const innerPoints = offsetPolygonPoints(pad.points, -thickness);
+    if (innerPoints.length >= 3) {
+      const innerCanvasPoints = innerPoints.map((p) => {
+        const [x, y] = applyToPoint20(realToCanvasMat, [p.x, p.y]);
+        return { x, y };
       });
+      drawPolygonPath({ ctx, points: innerCanvasPoints });
     }
-    if (element.type === "pcb_keepout") {
-      drawPcbKeepout({
-        ctx: this.ctx,
-        keepout: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    ctx.fill("evenodd");
+    ctx.restore();
+  }
+}
+
+// lib/drawer/elements/pcb-soldermask/via.ts
+import { applyToPoint as applyToPoint21 } from "transformation-matrix";
+function processViaSoldermask(params) {
+  const { ctx, via, realToCanvasMat, colorMap } = params;
+  const [cx, cy] = applyToPoint21(realToCanvasMat, [via.x, via.y]);
+  const scaledRadius = via.outer_diameter / 2 * Math.abs(realToCanvasMat.a);
+  ctx.fillStyle = colorMap.substrate;
+  ctx.beginPath();
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+  ctx.closePath();
+  ctx.fill();
+}
+
+// lib/drawer/elements/pcb-soldermask/index.ts
+function drawPcbSoldermask(params) {
+  const {
+    ctx,
+    board,
+    elements,
+    realToCanvasMat,
+    colorMap,
+    layer,
+    showSoldermask
+  } = params;
+  const soldermaskColor = colorMap.soldermask[layer] ?? colorMap.soldermask.top;
+  const soldermaskOverCopperColor = colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
+  if (showSoldermask) {
+    drawBoardSoldermask({ ctx, board, realToCanvasMat, soldermaskColor });
+  }
+  for (const element of elements) {
+    processElementSoldermask({
+      ctx,
+      element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      layer,
+      showSoldermask
+    });
+  }
+}
+function processElementSoldermask(params) {
+  const {
+    ctx,
+    element,
+    realToCanvasMat,
+    colorMap,
+    soldermaskOverCopperColor,
+    layer,
+    showSoldermask
+  } = params;
+  if (element.type === "pcb_smtpad") {
+    processSmtPadSoldermask({
+      ctx,
+      pad: element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      layer,
+      showSoldermask
+    });
+  } else if (element.type === "pcb_plated_hole") {
+    processPlatedHoleSoldermask({
+      ctx,
+      hole: element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      layer,
+      showSoldermask
+    });
+  } else if (element.type === "pcb_hole") {
+    processHoleSoldermask({
+      ctx,
+      hole: element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      showSoldermask
+    });
+  } else if (element.type === "pcb_via") {
+    processViaSoldermask({
+      ctx,
+      via: element,
+      realToCanvasMat,
+      colorMap
+    });
+  } else if (element.type === "pcb_cutout") {
+    processCutoutSoldermask({
+      ctx,
+      cutout: element,
+      realToCanvasMat,
+      colorMap
+    });
+  }
+}
+
+// lib/drawer/CircuitToCanvasDrawer.ts
+var CircuitToCanvasDrawer = class {
+  ctx;
+  colorMap;
+  realToCanvasMat;
+  constructor(canvasOrContext) {
+    if ("getContext" in canvasOrContext && typeof canvasOrContext.getContext === "function") {
+      const ctx = canvasOrContext.getContext("2d");
+      if (!ctx) {
+        throw new Error("Failed to get 2D rendering context from canvas");
+      }
+      this.ctx = ctx;
+    } else {
+      this.ctx = canvasOrContext;
     }
-    if (element.type === "pcb_copper_pour") {
-      drawPcbCopperPour({
-        ctx: this.ctx,
-        pour: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    this.colorMap = { ...DEFAULT_PCB_COLOR_MAP };
+    this.realToCanvasMat = identity();
+  }
+  configure(config) {
+    if (config.colorOverrides) {
+      this.colorMap = {
+        ...this.colorMap,
+        ...config.colorOverrides,
+        copper: {
+          ...this.colorMap.copper,
+          ...config.colorOverrides.copper
+        },
+        silkscreen: {
+          ...this.colorMap.silkscreen,
+          ...config.colorOverrides.silkscreen
+        },
+        soldermask: {
+          ...this.colorMap.soldermask,
+          ...config.colorOverrides.soldermask
+        },
+        soldermaskWithCopperUnderneath: {
+          ...this.colorMap.soldermaskWithCopperUnderneath,
+          ...config.colorOverrides.soldermaskWithCopperUnderneath
+        },
+        soldermaskOverCopper: {
+          ...this.colorMap.soldermaskOverCopper,
+          ...config.colorOverrides.soldermaskOverCopper
+        }
+      };
     }
-    if (element.type === "pcb_copper_text") {
-      drawPcbCopperText({
+  }
+  setCameraBounds(bounds) {
+    const canvas = this.ctx.canvas;
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+    const realWidth = bounds.maxX - bounds.minX;
+    const realHeight = bounds.maxY - bounds.minY;
+    const scaleX = canvasWidth / realWidth;
+    const scaleY = canvasHeight / realHeight;
+    const uniformScale = Math.min(scaleX, scaleY);
+    const offsetX = (canvasWidth - realWidth * uniformScale) / 2;
+    const offsetY = (canvasHeight - realHeight * uniformScale) / 2;
+    this.realToCanvasMat = compose(
+      translate(offsetX, offsetY),
+      scale(uniformScale, -uniformScale),
+      translate(-bounds.minX, -bounds.maxY)
+    );
+  }
+  drawElements(elements, options = {}) {
+    const board = elements.find((el) => el.type === "pcb_board");
+    if (board) {
+      drawPcbBoard({
         ctx: this.ctx,
-        text: element,
+        board,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap
       });
     }
-    if (element.type === "pcb_fabrication_note_text") {
-      drawPcbFabricationNoteText({
-        ctx: this.ctx,
-        text: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    for (const element of elements) {
+      if (!shouldDrawElement(element, options)) continue;
+      if (element.type === "pcb_smtpad") {
+        drawPcbSmtPad({
+          ctx: this.ctx,
+          pad: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_copper_text") {
+        drawPcbCopperText({
+          ctx: this.ctx,
+          text: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
     }
-    if (element.type === "pcb_fabrication_note_rect") {
-      drawPcbFabricationNoteRect({
+    const showSoldermask = options.showSoldermask ?? false;
+    if (board) {
+      drawPcbSoldermask({
         ctx: this.ctx,
-        rect: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
-    }
-    if (element.type === "pcb_note_rect") {
-      drawPcbNoteRect({
+        board,
+        elements,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
-        ctx: this.ctx,
-        rect: element
-      });
-    }
-    if (element.type === "pcb_fabrication_note_path") {
-      drawPcbFabricationNotePath({
-        ctx: this.ctx,
-        path: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
+        layer: "top",
+        showSoldermask
       });
     }
-    if (element.type === "pcb_note_path") {
-      drawPcbNotePath({
-        ctx: this.ctx,
-        path: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    for (const element of elements) {
+      if (!shouldDrawElement(element, options)) continue;
+      if (element.type === "pcb_silkscreen_text") {
+        drawPcbSilkscreenText({
+          ctx: this.ctx,
+          text: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_silkscreen_rect") {
+        drawPcbSilkscreenRect({
+          ctx: this.ctx,
+          rect: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_silkscreen_circle") {
+        drawPcbSilkscreenCircle({
+          ctx: this.ctx,
+          circle: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_silkscreen_line") {
+        drawPcbSilkscreenLine({
+          ctx: this.ctx,
+          line: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_silkscreen_path") {
+        drawPcbSilkscreenPath({
+          ctx: this.ctx,
+          path: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_silkscreen_pill") {
+        drawPcbSilkscreenPill({
+          ctx: this.ctx,
+          pill: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_silkscreen_oval") {
+        drawPcbSilkscreenOval({
+          ctx: this.ctx,
+          oval: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
     }
-    if (element.type === "pcb_note_text") {
-      drawPcbNoteText({
-        ctx: this.ctx,
-        text: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    for (const element of elements) {
+      if (!shouldDrawElement(element, options)) continue;
+      if (element.type === "pcb_copper_pour") {
+        drawPcbCopperPour({
+          ctx: this.ctx,
+          pour: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_trace") {
+        drawPcbTrace({
+          ctx: this.ctx,
+          trace: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
     }
-    if (element.type === "pcb_note_line") {
-      drawPcbNoteLine({
-        ctx: this.ctx,
-        line: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    for (const element of elements) {
+      if (!shouldDrawElement(element, options)) continue;
+      if (element.type === "pcb_plated_hole") {
+        drawPcbPlatedHole({
+          ctx: this.ctx,
+          hole: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap,
+          soldermaskMargin: showSoldermask ? element.soldermask_margin : void 0,
+          showSoldermask
+        });
+      }
+      if (element.type === "pcb_via") {
+        drawPcbVia({
+          ctx: this.ctx,
+          via: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
     }
-    if (element.type === "pcb_note_dimension") {
-      drawPcbNoteDimension({
-        ctx: this.ctx,
-        pcbNoteDimension: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    for (const element of elements) {
+      if (!shouldDrawElement(element, options)) continue;
+      if (element.type === "pcb_hole") {
+        drawPcbHole({
+          ctx: this.ctx,
+          hole: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap,
+          soldermaskMargin: showSoldermask ? element.soldermask_margin : void 0
+        });
+      }
+      if (element.type === "pcb_cutout") {
+        drawPcbCutout({
+          ctx: this.ctx,
+          cutout: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
     }
-    if (element.type === "pcb_fabrication_note_dimension") {
-      drawPcbFabricationNoteDimension({
-        ctx: this.ctx,
-        pcbFabricationNoteDimension: element,
-        realToCanvasMat: this.realToCanvasMat,
-        colorMap: this.colorMap
-      });
+    for (const element of elements) {
+      if (!shouldDrawElement(element, options)) continue;
+      if (element.type === "pcb_keepout") {
+        drawPcbKeepout({
+          ctx: this.ctx,
+          keepout: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_fabrication_note_text") {
+        drawPcbFabricationNoteText({
+          ctx: this.ctx,
+          text: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_fabrication_note_rect") {
+        drawPcbFabricationNoteRect({
+          ctx: this.ctx,
+          rect: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_note_rect") {
+        drawPcbNoteRect({
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap,
+          ctx: this.ctx,
+          rect: element
+        });
+      }
+      if (element.type === "pcb_fabrication_note_path") {
+        drawPcbFabricationNotePath({
+          ctx: this.ctx,
+          path: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_note_path") {
+        drawPcbNotePath({
+          ctx: this.ctx,
+          path: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_note_text") {
+        drawPcbNoteText({
+          ctx: this.ctx,
+          text: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_note_line") {
+        drawPcbNoteLine({
+          ctx: this.ctx,
+          line: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_note_dimension") {
+        drawPcbNoteDimension({
+          ctx: this.ctx,
+          pcbNoteDimension: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
+      if (element.type === "pcb_fabrication_note_dimension") {
+        drawPcbFabricationNoteDimension({
+          ctx: this.ctx,
+          pcbFabricationNoteDimension: element,
+          realToCanvasMat: this.realToCanvasMat,
+          colorMap: this.colorMap
+        });
+      }
     }
   }
 };