circuit-to-canvas 0.0.36 → 0.0.38

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -172,11 +172,17 @@ export class CircuitToCanvasDrawer {
         (el as PcbHole & { is_covered_with_solder_mask?: boolean })
           .is_covered_with_solder_mask === true,
     )
+    const hasSoldermaskPlatedHoles = elements.some(
+      (el) =>
+        el.type === "pcb_plated_hole" &&
+        (el as PcbPlatedHole & { is_covered_with_solder_mask?: boolean })
+          .is_covered_with_solder_mask === true,
+    )
 
     for (const element of elements) {
       if (
         element.type === "pcb_board" &&
-        (hasSoldermaskPads || hasSoldermaskHoles)
+        (hasSoldermaskPads || hasSoldermaskHoles || hasSoldermaskPlatedHoles)
       ) {
         // Draw board with soldermask fill when pads or holes have soldermask
         this.drawBoardWithSoldermask(element as PcbBoard)

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

@@ -6,6 +6,12 @@ import { drawRect } from "../shapes/rect"
 import { drawOval } from "../shapes/oval"
 import { drawPill } from "../shapes/pill"
 import { drawPolygon } from "../shapes/polygon"
+import {
+  drawSoldermaskRingForCircle,
+  drawSoldermaskRingForOval,
+  drawSoldermaskRingForPill,
+  drawSoldermaskRingForRect,
+} from "./soldermask-margin"
 
 export interface DrawPcbPlatedHoleParams {
   ctx: CanvasContext
@@ -14,19 +20,64 @@ export interface DrawPcbPlatedHoleParams {
   colorMap: PcbColorMap
 }
 
+function getSoldermaskColor(
+  layers: string[] | undefined,
+  colorMap: PcbColorMap,
+): string {
+  const layer = layers?.includes("top") ? "top" : "bottom"
+  return (
+    colorMap.soldermaskOverCopper[
+      layer as keyof typeof colorMap.soldermaskOverCopper
+    ] ?? colorMap.soldermaskOverCopper.top
+  )
+}
+
 export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): 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 soldermaskRingColor = getSoldermaskColor(hole.layers, colorMap)
+  const positiveMarginColor = colorMap.substrate
+  const copperColor = colorMap.copper.top
+
   if (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.outer_diameter / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
     // Draw outer copper ring
     drawCircle({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius: hole.outer_diameter / 2,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
     })
 
+    // For negative margins, draw soldermask ring on top of the copper ring
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForCircle(
+        ctx,
+        { x: hole.x, y: hole.y },
+        hole.outer_diameter / 2,
+        margin,
+        realToCanvasMat,
+        soldermaskRingColor,
+        copperColor,
+      )
+    }
+
     // Draw inner drill hole
     drawCircle({
       ctx,
@@ -39,17 +90,45 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (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.outer_width / 2 + margin,
+        radius_y: hole.outer_height / 2 + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation: hole.ccw_rotation,
+      })
+    }
+
     // Draw outer copper oval
     drawOval({
       ctx,
       center: { x: hole.x, y: hole.y },
       radius_x: hole.outer_width / 2,
       radius_y: hole.outer_height / 2,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
 
+    // For negative margins, draw soldermask ring on top of the copper oval
+    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,
+      )
+    }
+
     // Draw inner drill hole
     drawOval({
       ctx,
@@ -64,17 +143,45 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (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.outer_width + margin * 2,
+        height: hole.outer_height + margin * 2,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+        rotation: hole.ccw_rotation,
+      })
+    }
+
     // Draw outer copper pill
     drawPill({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.outer_width,
       height: hole.outer_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       rotation: hole.ccw_rotation,
     })
 
+    // For negative margins, draw soldermask ring on top of the copper pill
+    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,
+      )
+    }
+
     // Draw inner drill hole
     drawPill({
       ctx,
@@ -89,17 +196,46 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "circular_hole_with_rect_pad") {
+    // For positive margins, draw extended mask area first
+    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) + margin,
+      })
+    }
+
     // Draw rectangular pad
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
     })
 
+    // For negative margins, draw soldermask ring on top of the pad
+    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,
+      )
+    }
+
     // Draw circular drill hole (with offset)
     const holeX = hole.x + (hole.hole_offset_x ?? 0)
     const holeY = hole.y + (hole.hole_offset_y ?? 0)
@@ -114,17 +250,46 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "pill_hole_with_rect_pad") {
+    // For positive margins, draw extended mask area first
+    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) + margin,
+      })
+    }
+
     // Draw rectangular pad
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
     })
 
+    // For negative margins, draw soldermask ring on top of the pad
+    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,
+      )
+    }
+
     // Draw pill drill hole (with offset)
     const holeX = hole.x + (hole.hole_offset_x ?? 0)
     const holeY = hole.y + (hole.hole_offset_y ?? 0)
@@ -140,18 +305,48 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "rotated_pill_hole_with_rect_pad") {
+    // For positive margins, draw extended mask area first
+    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) + margin,
+        rotation: hole.rect_ccw_rotation,
+      })
+    }
+
     // Draw rotated rectangular pad
     drawRect({
       ctx,
       center: { x: hole.x, y: hole.y },
       width: hole.rect_pad_width,
       height: hole.rect_pad_height,
-      fill: colorMap.copper.top,
+      fill: copperColor,
       realToCanvasMat,
       borderRadius: hole.rect_border_radius ?? 0,
       rotation: hole.rect_ccw_rotation,
     })
 
+    // For negative margins, draw soldermask ring on top of the pad
+    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,
+      )
+    }
+
     // Draw rotated pill drill hole (with offset)
     const holeX = hole.x + (hole.hole_offset_x ?? 0)
     const holeY = hole.y + (hole.hole_offset_y ?? 0)
@@ -168,6 +363,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
   }
 
   if (hole.shape === "hole_with_polygon_pad") {
+    // Note: Polygon pads don't support soldermask margins (similar to SMT polygon pads)
     // Draw polygon pad
     const padOutline = hole.pad_outline
     if (padOutline && padOutline.length >= 3) {
@@ -179,7 +375,7 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       drawPolygon({
         ctx,
         points: padPoints,
-        fill: colorMap.copper.top,
+        fill: copperColor,
         realToCanvasMat,
       })
     }

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.36",
+  "version": "0.0.38",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",