circuit-to-canvas 0.0.30 → 0.0.32

package/dist/index.js

@@ -1,3 +1,12 @@
+// lib/drawer/CircuitToCanvasDrawer.ts
+import {
+  identity,
+  compose,
+  translate,
+  scale,
+  applyToPoint as applyToPoint15
+} from "transformation-matrix";
+
 // lib/drawer/pcb-render-layer-filter.ts
 import { getElementRenderLayers } from "@tscircuit/circuit-json-util";
 function shouldDrawElement(element, options) {
@@ -11,9 +20,6 @@ function shouldDrawElement(element, options) {
   return elementLayers.some((layer) => options.layers.includes(layer));
 }
 
-// lib/drawer/CircuitToCanvasDrawer.ts
-import { identity, compose, translate, scale } from "transformation-matrix";
-
 // lib/drawer/types.ts
 var DEFAULT_PCB_COLOR_MAP = {
   copper: {
@@ -132,24 +138,34 @@ function drawOval(params) {
   const {
     ctx,
     center,
-    width,
-    height,
+    radius_x,
+    radius_y,
     fill,
+    stroke,
+    strokeWidth = 0.1,
     realToCanvasMat,
     rotation = 0
   } = params;
   const [cx, cy] = applyToPoint3(realToCanvasMat, [center.x, center.y]);
-  const scaledWidth = width * Math.abs(realToCanvasMat.a);
-  const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
+  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a);
+  const scaledStrokeWidth = strokeWidth * 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, scaledWidth / 2, scaledHeight / 2, 0, 0, Math.PI * 2);
-  ctx.fillStyle = fill;
-  ctx.fill();
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = scaledStrokeWidth;
+    ctx.stroke();
+  }
   ctx.restore();
 }
 
@@ -257,8 +273,8 @@ function drawPcbPlatedHole(params) {
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.outer_width,
-      height: hole.outer_height,
+      radius_x: hole.outer_width / 2,
+      radius_y: hole.outer_height / 2,
       fill: colorMap.copper.top,
       realToCanvasMat,
       rotation: hole.ccw_rotation
@@ -266,8 +282,8 @@ function drawPcbPlatedHole(params) {
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.hole_width,
-      height: hole.hole_height,
+      radius_x: hole.hole_width / 2,
+      radius_y: hole.hole_height / 2,
       fill: colorMap.drill,
       realToCanvasMat,
       rotation: hole.ccw_rotation
@@ -391,8 +407,8 @@ function drawPcbPlatedHole(params) {
       drawOval({
         ctx,
         center: { x: holeX, y: holeY },
-        width: hole.hole_width ?? 0,
-        height: hole.hole_height ?? 0,
+        radius_x: (hole.hole_width ?? 0) / 2,
+        radius_y: (hole.hole_height ?? 0) / 2,
         fill: colorMap.drill,
         realToCanvasMat
       });
@@ -466,8 +482,8 @@ function drawPcbHole(params) {
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
-      width: hole.hole_width,
-      height: hole.hole_height,
+      radius_x: hole.hole_width / 2,
+      radius_y: hole.hole_height / 2,
       fill: colorMap.drill,
       realToCanvasMat
     });
@@ -509,14 +525,207 @@ function drawPcbHole(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) {
+  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);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  const outerWidth = scaledWidth;
+  const outerHeight = scaledHeight;
+  const outerRadius = scaledRadius;
+  ctx.beginPath();
+  if (outerRadius > 0) {
+    const x = -outerWidth / 2;
+    const y = -outerHeight / 2;
+    const r = Math.min(outerRadius, outerWidth / 2, outerHeight / 2);
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + outerWidth - r, y);
+    ctx.arcTo(x + outerWidth, y, x + outerWidth, y + r, r);
+    ctx.lineTo(x + outerWidth, y + outerHeight - r);
+    ctx.arcTo(
+      x + outerWidth,
+      y + outerHeight,
+      x + outerWidth - r,
+      y + outerHeight,
+      r
+    );
+    ctx.lineTo(x + r, y + outerHeight);
+    ctx.arcTo(x, y + outerHeight, x, y + outerHeight - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+  } else {
+    ctx.rect(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight);
+  }
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  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);
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath();
+    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);
+      ctx.arcTo(x + innerWidth, y, x + innerWidth, y + r, r);
+      ctx.lineTo(x + innerWidth, y + innerHeight - r);
+      ctx.arcTo(
+        x + innerWidth,
+        y + innerHeight,
+        x + innerWidth - r,
+        y + innerHeight,
+        r
+      );
+      ctx.lineTo(x + r, y + innerHeight);
+      ctx.arcTo(x, y + innerHeight, x, y + innerHeight - r, r);
+      ctx.lineTo(x, y + r);
+      ctx.arcTo(x, y, x + r, y, r);
+    } else {
+      ctx.rect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight);
+    }
+    ctx.fillStyle = padColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+function drawSoldermaskRingForCircle(ctx, center, radius, margin, realToCanvasMat, soldermaskColor, padColor) {
+  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a);
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  ctx.save();
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  ctx.beginPath();
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin);
+  if (innerRadius > 0) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2);
+    ctx.fillStyle = padColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+function drawSoldermaskRingForPill(ctx, center, width, height, margin, rotation, realToCanvasMat, soldermaskColor, padColor) {
+  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);
+  ctx.save();
+  ctx.translate(cx, cy);
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180));
+  }
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  const outerWidth = scaledWidth;
+  const outerHeight = scaledHeight;
+  ctx.beginPath();
+  if (outerWidth > outerHeight) {
+    const radius = outerHeight / 2;
+    const straightLength = outerWidth - outerHeight;
+    ctx.moveTo(-straightLength / 2, -radius);
+    ctx.lineTo(straightLength / 2, -radius);
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+    ctx.lineTo(-straightLength / 2, radius);
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+  } else if (outerHeight > outerWidth) {
+    const radius = outerWidth / 2;
+    const straightLength = outerHeight - outerWidth;
+    ctx.moveTo(radius, -straightLength / 2);
+    ctx.lineTo(radius, straightLength / 2);
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+    ctx.lineTo(-radius, -straightLength / 2);
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+  } else {
+    ctx.arc(0, 0, outerWidth / 2, 0, Math.PI * 2);
+  }
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerWidth = scaledWidth - scaledMargin * 2;
+  const innerHeight = scaledHeight - scaledMargin * 2;
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath();
+    if (innerWidth > innerHeight) {
+      const radius = innerHeight / 2;
+      const straightLength = innerWidth - innerHeight;
+      ctx.moveTo(-straightLength / 2, -radius);
+      ctx.lineTo(straightLength / 2, -radius);
+      ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2);
+      ctx.lineTo(-straightLength / 2, radius);
+      ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2);
+    } else if (innerHeight > innerWidth) {
+      const radius = innerWidth / 2;
+      const straightLength = innerHeight - innerWidth;
+      ctx.moveTo(radius, -straightLength / 2);
+      ctx.lineTo(radius, straightLength / 2);
+      ctx.arc(0, straightLength / 2, radius, 0, Math.PI);
+      ctx.lineTo(-radius, -straightLength / 2);
+      ctx.arc(0, -straightLength / 2, radius, Math.PI, 0);
+    } else {
+      ctx.arc(0, 0, innerWidth / 2, 0, Math.PI * 2);
+    }
+    ctx.fillStyle = padColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
+
 // lib/drawer/elements/pcb-smtpad.ts
 function layerToColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
+function getSoldermaskColor(layer, colorMap) {
+  return colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
+}
 function drawPcbSmtPad(params) {
   const { ctx, pad, realToCanvasMat, colorMap } = params;
   const color = layerToColor(pad.layer, colorMap);
+  const hasSoldermask = pad.is_covered_with_solder_mask === true && pad.soldermask_margin !== void 0 && pad.soldermask_margin !== 0;
+  const margin = hasSoldermask ? pad.soldermask_margin : 0;
+  const soldermaskRingColor = getSoldermaskColor(pad.layer, colorMap);
+  const positiveMarginColor = colorMap.substrate;
   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: (pad.corner_radius ?? pad.rect_border_radius ?? 0) + margin
+      });
+    }
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -526,9 +735,35 @@ function drawPcbSmtPad(params) {
       realToCanvasMat,
       borderRadius: pad.corner_radius ?? pad.rect_border_radius ?? 0
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        pad.corner_radius ?? pad.rect_border_radius ?? 0,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color
+      );
+    }
     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: (pad.corner_radius ?? pad.rect_border_radius ?? 0) + margin,
+        rotation: pad.ccw_rotation ?? 0
+      });
+    }
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -539,9 +774,32 @@ function drawPcbSmtPad(params) {
       borderRadius: pad.corner_radius ?? pad.rect_border_radius ?? 0,
       rotation: pad.ccw_rotation ?? 0
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        pad.corner_radius ?? pad.rect_border_radius ?? 0,
+        pad.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color
+      );
+    }
     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 },
@@ -549,9 +807,30 @@ function drawPcbSmtPad(params) {
       fill: color,
       realToCanvasMat
     });
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForCircle(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.radius,
+        margin,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color
+      );
+    }
     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 },
@@ -560,9 +839,33 @@ 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
+      );
+    }
     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 },
@@ -572,6 +875,19 @@ 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
+      );
+    }
     return;
   }
   if (pad.shape === "polygon") {
@@ -588,7 +904,7 @@ function drawPcbSmtPad(params) {
 }
 
 // lib/drawer/shapes/line.ts
-import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+import { applyToPoint as applyToPoint7 } from "transformation-matrix";
 function drawLine(params) {
   const {
     ctx,
@@ -599,8 +915,8 @@ function drawLine(params) {
     realToCanvasMat,
     lineCap = "round"
   } = params;
-  const [x1, y1] = applyToPoint6(realToCanvasMat, [start.x, start.y]);
-  const [x2, y2] = applyToPoint6(realToCanvasMat, [end.x, end.y]);
+  const [x1, y1] = applyToPoint7(realToCanvasMat, [start.x, start.y]);
+  const [x2, y2] = applyToPoint7(realToCanvasMat, [end.x, end.y]);
   const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
   ctx.beginPath();
   ctx.moveTo(x1, y1);
@@ -641,7 +957,7 @@ function drawPcbTrace(params) {
 }
 
 // lib/drawer/shapes/path.ts
-import { applyToPoint as applyToPoint7 } from "transformation-matrix";
+import { applyToPoint as applyToPoint8 } from "transformation-matrix";
 function drawPath(params) {
   const {
     ctx,
@@ -655,7 +971,7 @@ function drawPath(params) {
   if (points.length < 2) return;
   ctx.beginPath();
   const canvasPoints = points.map(
-    (p) => applyToPoint7(realToCanvasMat, [p.x, p.y])
+    (p) => applyToPoint8(realToCanvasMat, [p.x, p.y])
   );
   const firstPoint = canvasPoints[0];
   if (!firstPoint) return;
@@ -726,11 +1042,11 @@ function drawPcbBoard(params) {
 }
 
 // lib/drawer/elements/pcb-silkscreen-text.ts
-import { applyToPoint as applyToPoint9 } from "transformation-matrix";
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
 
 // lib/drawer/shapes/text/text.ts
 import { lineAlphabet } from "@tscircuit/alphabet";
-import { applyToPoint as applyToPoint8 } from "transformation-matrix";
+import { applyToPoint as applyToPoint9 } from "transformation-matrix";
 
 // lib/drawer/shapes/text/getAlphabetLayout.ts
 var GLYPH_WIDTH_RATIO = 0.62;
@@ -827,7 +1143,7 @@ function drawText(params) {
     rotation = 0
   } = params;
   if (!text) return;
-  const [canvasX, canvasY] = applyToPoint8(realToCanvasMat, [x, y]);
+  const [canvasX, canvasY] = applyToPoint9(realToCanvasMat, [x, y]);
   const scale2 = Math.abs(realToCanvasMat.a);
   const scaledFontSize = fontSize * scale2;
   const layout = getAlphabetLayout(text, scaledFontSize);
@@ -864,7 +1180,7 @@ function drawPcbSilkscreenText(params) {
   const content = text.text ?? "";
   if (!content) return;
   const color = layerToSilkscreenColor(text.layer, colorMap);
-  const [x, y] = applyToPoint9(realToCanvasMat, [
+  const [x, y] = applyToPoint10(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
@@ -969,13 +1285,32 @@ function drawPcbSilkscreenPath(params) {
   }
 }
 
-// lib/drawer/elements/pcb-silkscreen-pill.ts
+// lib/drawer/elements/pcb-silkscreen-oval.ts
 function layerToSilkscreenColor6(layer, colorMap) {
   return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
 }
+function drawPcbSilkscreenOval(params) {
+  const { ctx, oval, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor6(oval.layer, colorMap);
+  drawOval({
+    ctx,
+    center: oval.center,
+    radius_x: oval.radius_x,
+    radius_y: oval.radius_y,
+    stroke: color,
+    strokeWidth: 0.1,
+    realToCanvasMat,
+    rotation: oval.ccw_rotation ?? 0
+  });
+}
+
+// lib/drawer/elements/pcb-silkscreen-pill.ts
+function layerToSilkscreenColor7(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
 function drawPcbSilkscreenPill(params) {
   const { ctx, pill, realToCanvasMat, colorMap } = params;
-  const color = layerToSilkscreenColor6(pill.layer, colorMap);
+  const color = layerToSilkscreenColor7(pill.layer, colorMap);
   const strokeWidth = 0.2;
   drawPill({
     ctx,
@@ -1027,7 +1362,7 @@ function drawPcbCutout(params) {
 }
 
 // lib/drawer/elements/pcb-copper-pour.ts
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
 function layerToColor3(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
@@ -1036,7 +1371,7 @@ function drawPcbCopperPour(params) {
   const color = layerToColor3(pour.layer, colorMap);
   ctx.save();
   if (pour.shape === "rect") {
-    const [cx, cy] = applyToPoint10(realToCanvasMat, [
+    const [cx, cy] = applyToPoint11(realToCanvasMat, [
       pour.center.x,
       pour.center.y
     ]);
@@ -1057,7 +1392,7 @@ function drawPcbCopperPour(params) {
   if (pour.shape === "polygon") {
     if (pour.points && pour.points.length >= 3) {
       const canvasPoints = pour.points.map(
-        (p) => applyToPoint10(realToCanvasMat, [p.x, p.y])
+        (p) => applyToPoint11(realToCanvasMat, [p.x, p.y])
       );
       const firstPoint = canvasPoints[0];
       if (!firstPoint) {
@@ -1085,7 +1420,7 @@ function drawPcbCopperPour(params) {
 }
 
 // lib/drawer/elements/pcb-copper-text.ts
-import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 var DEFAULT_PADDING = { left: 0.2, right: 0.2, top: 0.2, bottom: 0.2 };
 function layerToCopperColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
@@ -1100,7 +1435,7 @@ function drawPcbCopperText(params) {
   const { ctx, text, realToCanvasMat, colorMap } = params;
   const content = text.text ?? "";
   if (!content) return;
-  const [x, y] = applyToPoint11(realToCanvasMat, [
+  const [x, y] = applyToPoint12(realToCanvasMat, [
     text.anchor_position.x,
     text.anchor_position.y
   ]);
@@ -1284,7 +1619,7 @@ function drawPcbNoteText(params) {
 }
 
 // lib/drawer/elements/pcb-note-dimension.ts
-import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 
 // lib/drawer/shapes/arrow.ts
 function drawArrow(params) {
@@ -1369,11 +1704,11 @@ function drawPcbNoteDimension(params) {
     stroke: color,
     realToCanvasMat
   });
-  const [canvasFromX, canvasFromY] = applyToPoint12(realToCanvasMat, [
+  const [canvasFromX, canvasFromY] = applyToPoint13(realToCanvasMat, [
     fromX,
     fromY
   ]);
-  const [canvasToX, canvasToY] = applyToPoint12(realToCanvasMat, [toX, toY]);
+  const [canvasToX, canvasToY] = applyToPoint13(realToCanvasMat, [toX, toY]);
   const canvasDx = canvasToX - canvasFromX;
   const canvasDy = canvasToY - canvasFromY;
   const lineAngle = Math.atan2(canvasDy, canvasDx);
@@ -1434,15 +1769,15 @@ function drawPcbNoteDimension(params) {
 }
 
 // lib/drawer/elements/pcb-note-line.ts
-import { applyToPoint as applyToPoint13 } from "transformation-matrix";
+import { applyToPoint as applyToPoint14 } from "transformation-matrix";
 function drawPcbNoteLine(params) {
   const { ctx, line, realToCanvasMat, colorMap } = params;
   const defaultColor = "rgb(89, 148, 220)";
   const color = line.color ?? defaultColor;
   const strokeWidth = line.stroke_width ?? 0.1;
   const isDashed = line.is_dashed ?? false;
-  const [x1, y1] = applyToPoint13(realToCanvasMat, [line.x1, line.y1]);
-  const [x2, y2] = applyToPoint13(realToCanvasMat, [line.x2, line.y2]);
+  const [x1, y1] = applyToPoint14(realToCanvasMat, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint14(realToCanvasMat, [line.x2, line.y2]);
   const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a);
   ctx.save();
   if (isDashed) {
@@ -1524,8 +1859,76 @@ var CircuitToCanvasDrawer = class {
     );
   }
   drawElements(elements, options = {}) {
+    const hasSoldermaskPads = elements.some(
+      (el) => el.type === "pcb_smtpad" && el.is_covered_with_solder_mask === true
+    );
     for (const element of elements) {
-      this.drawElement(element, options);
+      if (element.type === "pcb_board" && hasSoldermaskPads) {
+        this.drawBoardWithSoldermask(element);
+      } else {
+        this.drawElement(element, options);
+      }
+    }
+  }
+  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] = applyToPoint15(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;
+    }
+    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
+      });
     }
   }
   drawElement(element, options) {
@@ -1628,6 +2031,14 @@ var CircuitToCanvasDrawer = class {
         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_cutout") {
       drawPcbCutout({
         ctx: this.ctx,
@@ -1741,6 +2152,7 @@ export {
   drawPcbPlatedHole,
   drawPcbSilkscreenCircle,
   drawPcbSilkscreenLine,
+  drawPcbSilkscreenOval,
   drawPcbSilkscreenPath,
   drawPcbSilkscreenPill,
   drawPcbSilkscreenRect,
@@ -1751,6 +2163,9 @@ export {
   drawPill,
   drawPolygon,
   drawRect,
+  drawSoldermaskRingForCircle,
+  drawSoldermaskRingForPill,
+  drawSoldermaskRingForRect,
   drawText,
   getAlphabetLayout,
   getTextStartPosition,