circuit-to-canvas 0.0.35 → 0.0.37

package/dist/index.d.ts

@@ -341,6 +341,14 @@ declare function drawSoldermaskRingForPill(ctx: CanvasContext, center: {
     x: number;
     y: number;
 }, width: number, height: number, margin: number, rotation: number, realToCanvasMat: Matrix, soldermaskColor: string, padColor: string): void;
+/**
+ * Draws a soldermask ring for oval shapes with negative margin
+ * (soldermask appears inside the hole boundary)
+ */
+declare function drawSoldermaskRingForOval(ctx: CanvasContext, center: {
+    x: number;
+    y: number;
+}, radius_x: number, radius_y: number, margin: number, rotation: number, realToCanvasMat: Matrix, soldermaskColor: string, holeColor: string): void;
 
 interface DrawPcbTraceParams {
     ctx: CanvasContext;
@@ -502,4 +510,4 @@ interface DrawPcbFabricationNoteDimensionParams {
 }
 declare function drawPcbFabricationNoteDimension(params: DrawPcbFabricationNoteDimensionParams): void;
 
-export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawArrowParams, type DrawCircleParams, type DrawContext, type DrawDimensionLineParams, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNoteDimensionParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenOvalParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenPillParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawArrow, drawCircle, drawDimensionLine, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNoteDimension, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };
+export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, type DrawArrowParams, type DrawCircleParams, type DrawContext, type DrawDimensionLineParams, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNoteDimensionParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenOvalParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenPillParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawArrow, drawCircle, drawDimensionLine, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNoteDimension, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForOval, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -457,7 +457,19 @@ function drawPcbVia(params) {
 // lib/drawer/elements/pcb-hole.ts
 function drawPcbHole(params) {
   const { ctx, hole, realToCanvasMat, colorMap } = params;
+  const hasSoldermask = hole.is_covered_with_solder_mask === true && hole.soldermask_margin !== void 0 && hole.soldermask_margin > 0;
+  const margin = hasSoldermask ? hole.soldermask_margin : 0;
+  const positiveMarginColor = colorMap.substrate;
   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
+      });
+    }
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -468,6 +480,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "square") {
+    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
+      });
+    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -479,6 +501,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "oval") {
+    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
+      });
+    }
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -490,6 +522,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "rect") {
+    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
+      });
+    }
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -501,6 +543,16 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "pill") {
+    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
+      });
+    }
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -512,6 +564,18 @@ function drawPcbHole(params) {
     return;
   }
   if (hole.hole_shape === "rotated_pill") {
+    const rotation = hole.ccw_rotation ?? 0;
+    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
+      });
+    }
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -519,7 +583,7 @@ function drawPcbHole(params) {
       height: hole.hole_height,
       fill: colorMap.drill,
       realToCanvasMat,
-      rotation: hole.ccw_rotation ?? 0
+      rotation
     });
     return;
   }
@@ -699,6 +763,37 @@ function drawSoldermaskRingForPill(ctx, center, width, height, margin, rotation,
   }
   ctx.restore();
 }
+function drawSoldermaskRingForOval(ctx, center, radius_x, radius_y, margin, rotation, realToCanvasMat, soldermaskColor, holeColor) {
+  const [cx, cy] = applyToPoint6(realToCanvasMat, [center.x, center.y]);
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a);
+  const scaledRadiusY = radius_y * 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";
+  }
+  ctx.beginPath();
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2);
+  ctx.fillStyle = soldermaskColor;
+  ctx.fill();
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerRadiusX = Math.max(0, scaledRadiusX - scaledMargin);
+  const innerRadiusY = Math.max(0, scaledRadiusY - scaledMargin);
+  if (innerRadiusX > 0 && innerRadiusY > 0) {
+    ctx.beginPath();
+    ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2);
+    ctx.fillStyle = holeColor;
+    ctx.fill();
+  }
+  ctx.restore();
+}
 
 // lib/drawer/elements/pcb-smtpad.ts
 function layerToColor(layer, colorMap) {
@@ -1671,78 +1766,76 @@ function drawDimensionLine(params) {
       x: anchor.x + extensionDirection.x * extensionLength,
       y: anchor.y + extensionDirection.y * extensionLength
     };
-    const halfWidth2 = strokeWidth / 2;
+    const halfWidth = strokeWidth / 2;
     const extPerpendicular = {
       x: -extensionDirection.y,
       y: extensionDirection.x
     };
     return [
       {
-        x: anchor.x + extPerpendicular.x * halfWidth2,
-        y: anchor.y + extPerpendicular.y * halfWidth2
+        x: anchor.x + extPerpendicular.x * halfWidth,
+        y: anchor.y + extPerpendicular.y * halfWidth
       },
       {
-        x: anchor.x - extPerpendicular.x * halfWidth2,
-        y: anchor.y - extPerpendicular.y * halfWidth2
+        x: anchor.x - extPerpendicular.x * halfWidth,
+        y: anchor.y - extPerpendicular.y * halfWidth
       },
       {
-        x: endPoint.x - extPerpendicular.x * halfWidth2,
-        y: endPoint.y - extPerpendicular.y * halfWidth2
+        x: endPoint.x - extPerpendicular.x * halfWidth,
+        y: endPoint.y - extPerpendicular.y * halfWidth
       },
       {
-        x: endPoint.x + extPerpendicular.x * halfWidth2,
-        y: endPoint.y + extPerpendicular.y * halfWidth2
+        x: endPoint.x + extPerpendicular.x * halfWidth,
+        y: endPoint.y + extPerpendicular.y * halfWidth
       }
     ];
   };
-  const ext1 = getExtensionPoints(from);
-  allPoints.push(...ext1, ext1[0]);
-  const ext2 = getExtensionPoints(to);
-  allPoints.push(...ext2, ext2[0]);
-  const halfWidth = strokeWidth / 2;
-  const mainLine = [
-    {
-      x: fromBase.x + perpendicular.x * halfWidth,
-      y: fromBase.y + perpendicular.y * halfWidth
-    },
-    {
-      x: fromBase.x - perpendicular.x * halfWidth,
-      y: fromBase.y - perpendicular.y * halfWidth
-    },
-    {
-      x: toBase.x - perpendicular.x * halfWidth,
-      y: toBase.y - perpendicular.y * halfWidth
-    },
-    {
-      x: toBase.x + perpendicular.x * halfWidth,
-      y: toBase.y + perpendicular.y * halfWidth
-    }
-  ];
-  allPoints.push(...mainLine, mainLine[0]);
-  const arrow1 = [
-    fromOffset,
-    {
-      x: fromOffset.x + direction.x * arrowSize + perpendicular.x * (arrowSize / 2),
-      y: fromOffset.y + direction.y * arrowSize + perpendicular.y * (arrowSize / 2)
-    },
-    {
-      x: fromOffset.x + direction.x * arrowSize - perpendicular.x * (arrowSize / 2),
-      y: fromOffset.y + direction.y * arrowSize - perpendicular.y * (arrowSize / 2)
-    }
-  ];
-  allPoints.push(...arrow1, arrow1[0]);
-  const arrow2 = [
-    toOffset,
-    {
-      x: toOffset.x - direction.x * arrowSize + perpendicular.x * (arrowSize / 2),
-      y: toOffset.y - direction.y * arrowSize + perpendicular.y * (arrowSize / 2)
-    },
-    {
-      x: toOffset.x - direction.x * arrowSize - perpendicular.x * (arrowSize / 2),
-      y: toOffset.y - direction.y * arrowSize - perpendicular.y * (arrowSize / 2)
-    }
-  ];
-  allPoints.push(...arrow2, arrow2[0]);
+  allPoints.push(fromOffset);
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (arrowSize / 2),
+    y: fromBase.y + perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y + perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (strokeWidth / 2),
+    y: toBase.y + perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (arrowSize / 2),
+    y: toBase.y + perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push(toOffset);
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (arrowSize / 2),
+    y: toBase.y - perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (strokeWidth / 2),
+    y: toBase.y - perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y - perpendicular.y * (strokeWidth / 2)
+  });
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (arrowSize / 2),
+    y: fromBase.y - perpendicular.y * (arrowSize / 2)
+  });
+  allPoints.push(fromOffset);
+  const startPoint = allPoints[0];
+  const addTick = (anchor) => {
+    const pts = getExtensionPoints(anchor);
+    allPoints.push(startPoint);
+    allPoints.push(pts[0]);
+    allPoints.push(...pts);
+    allPoints.push(pts[0]);
+    allPoints.push(startPoint);
+  };
+  addTick(from);
+  addTick(to);
   drawPolygon({
     ctx,
     points: allPoints,
@@ -1778,9 +1871,9 @@ function drawDimensionLine(params) {
       const rotationRad = textRotation * Math.PI / 180;
       const sinRot = Math.abs(Math.sin(rotationRad));
       const cosRot = Math.abs(Math.cos(rotationRad));
-      const halfWidth2 = textWidth / 2;
+      const halfWidth = textWidth / 2;
       const halfHeight = textHeight / 2;
-      const maxExtension = halfWidth2 * sinRot + halfHeight * cosRot;
+      const maxExtension = halfWidth * sinRot + halfHeight * cosRot;
       additionalOffset = maxExtension + fontSize * TEXT_INTERSECTION_PADDING_MULTIPLIER;
     }
     const textOffset = arrowSize * TEXT_OFFSET_MULTIPLIER + additionalOffset;
@@ -1941,8 +2034,11 @@ var CircuitToCanvasDrawer = class {
     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
+    );
     for (const element of elements) {
-      if (element.type === "pcb_board" && hasSoldermaskPads) {
+      if (element.type === "pcb_board" && (hasSoldermaskPads || hasSoldermaskHoles)) {
         this.drawBoardWithSoldermask(element);
       } else {
         this.drawElement(element, options);
@@ -2269,6 +2365,7 @@ export {
   drawPolygon,
   drawRect,
   drawSoldermaskRingForCircle,
+  drawSoldermaskRingForOval,
   drawSoldermaskRingForPill,
   drawSoldermaskRingForRect,
   drawText,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -160,16 +160,25 @@ export class CircuitToCanvasDrawer {
     elements: AnyCircuitElement[],
     options: DrawElementsOptions = {},
   ): void {
-    // Check if any pad has is_covered_with_solder_mask: true
+    // Check if any pad or hole has is_covered_with_solder_mask: true
     const hasSoldermaskPads = elements.some(
       (el) =>
         el.type === "pcb_smtpad" &&
         (el as PcbSmtPad).is_covered_with_solder_mask === true,
     )
+    const hasSoldermaskHoles = elements.some(
+      (el) =>
+        el.type === "pcb_hole" &&
+        (el as PcbHole & { is_covered_with_solder_mask?: boolean })
+          .is_covered_with_solder_mask === true,
+    )
 
     for (const element of elements) {
-      if (element.type === "pcb_board" && hasSoldermaskPads) {
-        // Draw board with soldermask fill when pads have soldermask
+      if (
+        element.type === "pcb_board" &&
+        (hasSoldermaskPads || hasSoldermaskHoles)
+      ) {
+        // Draw board with soldermask fill when pads or holes have soldermask
         this.drawBoardWithSoldermask(element as PcbBoard)
       } else {
         this.drawElement(element, options)

package/lib/drawer/elements/index.ts

@@ -12,6 +12,7 @@ export {
   drawSoldermaskRingForRect,
   drawSoldermaskRingForCircle,
   drawSoldermaskRingForPill,
+  drawSoldermaskRingForOval,
 } from "./soldermask-margin"
 
 export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace"

package/lib/drawer/elements/pcb-hole.ts

@@ -16,7 +16,26 @@ export interface DrawPcbHoleParams {
 export function drawPcbHole(params: DrawPcbHoleParams): void {
   const { ctx, hole, realToCanvasMat, colorMap } = params
 
+  const hasSoldermask =
+    hole.is_covered_with_solder_mask === true &&
+    hole.soldermask_margin !== undefined &&
+    hole.soldermask_margin > 0
+  const margin = hasSoldermask ? hole.soldermask_margin! : 0
+  const positiveMarginColor = colorMap.substrate
+
   if (hole.hole_shape === "circle") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawCircle({
+        ctx,
+        center: { x: hole.x, y: hole.y },
+        radius: hole.hole_diameter / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the hole
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -28,6 +47,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "square") {
+    // For positive margins, draw extended mask area first
+    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,
+      })
+    }
+
+    // Draw the hole
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -40,6 +72,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "oval") {
+    // For positive margins, draw extended mask area first
+    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,
+      })
+    }
+
+    // Draw the hole
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -52,6 +97,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "rect") {
+    // For positive margins, draw extended mask area first
+    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,
+      })
+    }
+
+    // Draw the hole
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -64,6 +122,19 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "pill") {
+    // For positive margins, draw extended mask area first
+    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,
+      })
+    }
+
+    // Draw the hole
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -76,6 +147,22 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
   }
 
   if (hole.hole_shape === "rotated_pill") {
+    const rotation = (hole as any).ccw_rotation ?? 0
+
+    // For positive margins, draw extended mask area first
+    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,
+      })
+    }
+
+    // Draw the hole
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
@@ -83,7 +170,7 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
       height: hole.hole_height,
       fill: colorMap.drill,
       realToCanvasMat,
-      rotation: (hole as any).ccw_rotation ?? 0,
+      rotation,
     })
     return
   }

package/lib/drawer/elements/soldermask-margin.ts

@@ -264,3 +264,63 @@ export function drawSoldermaskRingForPill(
 
   ctx.restore()
 }
+
+/**
+ * Draws a soldermask ring for oval shapes with negative margin
+ * (soldermask appears inside the hole boundary)
+ */
+export function drawSoldermaskRingForOval(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  radius_x: number,
+  radius_y: number,
+  margin: number,
+  rotation: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  holeColor: string,
+): void {
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a)
+  const scaledRadiusY = radius_y * 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))
+  }
+
+  // For negative margins, outer is hole boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the hole
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer oval filled (at hole boundary)
+  ctx.beginPath()
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2)
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore hole color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore hole color in inner oval (reduced by margin)
+  // For ovals, we reduce both radii by the margin
+  const innerRadiusX = Math.max(0, scaledRadiusX - scaledMargin)
+  const innerRadiusY = Math.max(0, scaledRadiusY - scaledMargin)
+
+  if (innerRadiusX > 0 && innerRadiusY > 0) {
+    ctx.beginPath()
+    ctx.ellipse(0, 0, innerRadiusX, innerRadiusY, 0, 0, Math.PI * 2)
+    ctx.fillStyle = holeColor
+    ctx.fill()
+  }
+
+  ctx.restore()
+}

package/lib/drawer/shapes/dimension-line.ts

@@ -121,85 +121,80 @@ export function drawDimensionLine(params: DrawDimensionLineParams): void {
     ]
   }
 
-  // Extension lines (ticks)
-  const ext1 = getExtensionPoints(from)
-  allPoints.push(...ext1, ext1[0]!)
-
-  const ext2 = getExtensionPoints(to)
-  allPoints.push(...ext2, ext2[0]!)
-
-  // Main dimension line
-  const halfWidth = strokeWidth / 2
-  const mainLine = [
-    {
-      x: fromBase.x + perpendicular.x * halfWidth,
-      y: fromBase.y + perpendicular.y * halfWidth,
-    },
-    {
-      x: fromBase.x - perpendicular.x * halfWidth,
-      y: fromBase.y - perpendicular.y * halfWidth,
-    },
-    {
-      x: toBase.x - perpendicular.x * halfWidth,
-      y: toBase.y - perpendicular.y * halfWidth,
-    },
-    {
-      x: toBase.x + perpendicular.x * halfWidth,
-      y: toBase.y + perpendicular.y * halfWidth,
-    },
-  ]
-  allPoints.push(...mainLine, mainLine[0]!)
-
-  // Arrows
-  const arrow1 = [
-    fromOffset,
-    {
-      x:
-        fromOffset.x +
-        direction.x * arrowSize +
-        perpendicular.x * (arrowSize / 2),
-      y:
-        fromOffset.y +
-        direction.y * arrowSize +
-        perpendicular.y * (arrowSize / 2),
-    },
-    {
-      x:
-        fromOffset.x +
-        direction.x * arrowSize -
-        perpendicular.x * (arrowSize / 2),
-      y:
-        fromOffset.y +
-        direction.y * arrowSize -
-        perpendicular.y * (arrowSize / 2),
-    },
-  ]
-  allPoints.push(...arrow1, arrow1[0]!)
-
-  const arrow2 = [
-    toOffset,
-    {
-      x:
-        toOffset.x -
-        direction.x * arrowSize +
-        perpendicular.x * (arrowSize / 2),
-      y:
-        toOffset.y -
-        direction.y * arrowSize +
-        perpendicular.y * (arrowSize / 2),
-    },
-    {
-      x:
-        toOffset.x -
-        direction.x * arrowSize -
-        perpendicular.x * (arrowSize / 2),
-      y:
-        toOffset.y -
-        direction.y * arrowSize -
-        perpendicular.y * (arrowSize / 2),
-    },
-  ]
-  allPoints.push(...arrow2, arrow2[0]!)
+  // Unified Perimeter Approach:
+  // Draw the main line and both arrows as a single continuous perimeter path.
+  // This eliminates self-intersections and winding issues.
+
+  // 1. Tip 1
+  allPoints.push(fromOffset)
+
+  // 2. Arrow 1 base corner 1
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (arrowSize / 2),
+    y: fromBase.y + perpendicular.y * (arrowSize / 2),
+  })
+
+  // 3. Main Line corner 1
+  allPoints.push({
+    x: fromBase.x + perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y + perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 4. Main Line corner 2 (at toBase)
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (strokeWidth / 2),
+    y: toBase.y + perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 5. Arrow 2 base corner 1
+  allPoints.push({
+    x: toBase.x + perpendicular.x * (arrowSize / 2),
+    y: toBase.y + perpendicular.y * (arrowSize / 2),
+  })
+
+  // 6. Tip 2
+  allPoints.push(toOffset)
+
+  // 7. Arrow 2 base corner 2
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (arrowSize / 2),
+    y: toBase.y - perpendicular.y * (arrowSize / 2),
+  })
+
+  // 8. Main Line corner 3 (at toBase)
+  allPoints.push({
+    x: toBase.x - perpendicular.x * (strokeWidth / 2),
+    y: toBase.y - perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 9. Main Line corner 4 (at fromBase)
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (strokeWidth / 2),
+    y: fromBase.y - perpendicular.y * (strokeWidth / 2),
+  })
+
+  // 10. Arrow 1 base corner 2
+  allPoints.push({
+    x: fromBase.x - perpendicular.x * (arrowSize / 2),
+    y: fromBase.y - perpendicular.y * (arrowSize / 2),
+  })
+
+  // 11. Back to Tip 1
+  allPoints.push(fromOffset)
+
+  // Bridge Ticks (Extension lines)
+  const startPoint = allPoints[0]!
+  const addTick = (anchor: { x: number; y: number }) => {
+    const pts = getExtensionPoints(anchor)
+    allPoints.push(startPoint)
+    allPoints.push(pts[0]!)
+    allPoints.push(...pts)
+    allPoints.push(pts[0]!)
+    allPoints.push(startPoint)
+  }
+
+  addTick(from)
+  addTick(to)
 
   drawPolygon({
     ctx,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/pcb-hole-soldermask-margin.test.ts

@@ -0,0 +1,133 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw holes with positive soldermask margins", async () => {
+  const canvas = createCanvas(800, 600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 800, 600)
+
+  const circuit: any = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board0",
+      center: { x: 0, y: 0 },
+      width: 14,
+      height: 10,
+    },
+    // Circle with positive margin (mask extends beyond hole)
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_circle_positive",
+      hole_shape: "circle",
+      x: -4,
+      y: 2,
+      hole_diameter: 1.0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.2,
+    },
+    // Square with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_square_positive",
+      hole_shape: "square",
+      x: -1,
+      y: 2,
+      hole_diameter: 1.0,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.15,
+    },
+    // Oval with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_oval_positive",
+      hole_shape: "oval",
+      x: 2,
+      y: 2,
+      hole_width: 1.5,
+      hole_height: 0.8,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.1,
+    },
+    // Rect with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_rect_positive",
+      hole_shape: "rect",
+      x: 5,
+      y: 2,
+      hole_width: 1.6,
+      hole_height: 1.1,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.15,
+    },
+    // Pill with positive margin
+    {
+      type: "pcb_hole",
+      pcb_hole_id: "hole_pill_positive",
+      hole_shape: "pill",
+      x: -2.5,
+      y: 0,
+      hole_width: 2.0,
+      hole_height: 0.8,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.1,
+    },
+    // Silkscreen labels for positive margin holes
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_circle_pos",
+      layer: "top",
+      anchor_position: { x: -4, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.2mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_square_pos",
+      layer: "top",
+      anchor_position: { x: -1, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_oval_pos",
+      layer: "top",
+      anchor_position: { x: 2, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.1mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_rect_pos",
+      layer: "top",
+      anchor_position: { x: 5, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_pill_pos",
+      layer: "top",
+      anchor_position: { x: -2.5, y: 1 },
+      anchor_alignment: "center",
+      text: "+0.1mm",
+      font_size: 0.4,
+    },
+  ]
+
+  drawer.setCameraBounds({ minX: -7, maxX: 7, minY: -5, maxY: 5 })
+  drawer.drawElements(circuit)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})