circuit-to-canvas 0.0.50 → 0.0.52

package/lib/drawer/elements/helper-functions/draw-pill.ts

@@ -0,0 +1,39 @@
+import type { CanvasContext } from "../../types"
+
+/**
+ * Draws a pill/stadium shape path centered at (cx, cy).
+ * A pill is a rectangle with fully rounded ends (semicircular caps).
+ * The path is not filled or stroked - call ctx.fill() or ctx.stroke() after.
+ */
+export function drawPillPath(params: {
+  ctx: CanvasContext
+  cx: number
+  cy: number
+  width: number
+  height: number
+}): void {
+  const { ctx, cx, cy, width, height } = params
+  if (width > height) {
+    // Horizontal pill
+    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) {
+    // Vertical pill
+    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 {
+    // Square dimensions = circle
+    ctx.arc(cx, cy, width / 2, 0, Math.PI * 2)
+  }
+  ctx.closePath()
+}

package/lib/drawer/elements/helper-functions/draw-polygon.ts

@@ -0,0 +1,25 @@
+import type { CanvasContext } from "../../types"
+
+/**
+ * Draws a polygon path from an array of points.
+ * The path is not filled or stroked - call ctx.fill() or ctx.stroke() after.
+ */
+export function drawPolygonPath(params: {
+  ctx: CanvasContext
+  points: Array<{ x: number; y: number }>
+}): void {
+  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)
+      }
+    }
+    ctx.closePath()
+  }
+}

package/lib/drawer/elements/helper-functions/draw-rounded-rect.ts

@@ -0,0 +1,34 @@
+import type { CanvasContext } from "../../types"
+
+/**
+ * Draws a rounded rectangle path centered at (cx, cy).
+ * The path is not filled or stroked - call ctx.fill() or ctx.stroke() after.
+ */
+export function drawRoundedRectPath(params: {
+  ctx: CanvasContext
+  cx: number
+  cy: number
+  width: number
+  height: number
+  radius: number
+}): void {
+  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)
+  }
+  ctx.closePath()
+}

package/lib/drawer/elements/helper-functions/index.ts

@@ -0,0 +1,3 @@
+export { drawPillPath } from "./draw-pill"
+export { drawPolygonPath } from "./draw-polygon"
+export { drawRoundedRectPath } from "./draw-rounded-rect"

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

@@ -1,22 +1,35 @@
 import type { PcbBoard } from "circuit-json"
 import type { Matrix } from "transformation-matrix"
-import type { PcbColorMap, CanvasContext } from "../types"
 import { drawPath } from "../shapes/path"
 import { drawRect } from "../shapes/rect"
+import type { CanvasContext, PcbColorMap } from "../types"
 
 export interface DrawPcbBoardParams {
   ctx: CanvasContext
   board: PcbBoard
   realToCanvasMat: Matrix
   colorMap: PcbColorMap
+  drawBoardMaterial: boolean
 }
 
 export function drawPcbBoard(params: DrawPcbBoardParams): void {
-  const { ctx, board, realToCanvasMat, colorMap } = params
+  const { ctx, board, realToCanvasMat, colorMap, drawBoardMaterial } = params
   const { width, height, center, outline } = board
 
-  // If the board has a custom outline, draw it as a path
+  // If the board has a custom outline, draw substrate and outline
   if (outline && Array.isArray(outline) && outline.length >= 3) {
+    // Draw substrate fill only if drawBoardMaterial is true
+    if (drawBoardMaterial) {
+      drawPath({
+        ctx,
+        points: outline.map((p) => ({ x: p.x, y: p.y })),
+        fill: colorMap.substrate,
+        realToCanvasMat,
+        closePath: true,
+      })
+    }
+
+    // Always draw outline stroke
     drawPath({
       ctx,
       points: outline.map((p) => ({ x: p.x, y: p.y })),
@@ -30,17 +43,19 @@ export function drawPcbBoard(params: DrawPcbBoardParams): void {
 
   // Otherwise draw a rectangle
   if (width !== undefined && height !== undefined && center) {
-    // Draw the board outline as a rectangle stroke
-    drawRect({
-      ctx,
-      center,
-      width,
-      height,
-      fill: "transparent",
-      realToCanvasMat,
-    })
+    // Draw substrate fill only if drawBoardMaterial is true
+    if (drawBoardMaterial) {
+      drawRect({
+        ctx,
+        center,
+        width,
+        height,
+        fill: colorMap.substrate,
+        realToCanvasMat,
+      })
+    }
 
-    // Draw the outline stroke separately using path
+    // Always draw the outline stroke separately using path
     const halfWidth = width / 2
     const halfHeight = height / 2
     const corners = [

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

@@ -1,26 +1,21 @@
-import type { PCBHole } from "circuit-json"
+import type { PcbHole } from "circuit-json"
 import type { Matrix } from "transformation-matrix"
 import type { PcbColorMap, CanvasContext } from "../types"
 import { drawCircle } from "../shapes/circle"
 import { drawRect } from "../shapes/rect"
 import { drawOval } from "../shapes/oval"
 import { drawPill } from "../shapes/pill"
-import {
-  drawSoldermaskRingForCircle,
-  drawSoldermaskRingForOval,
-  drawSoldermaskRingForPill,
-  drawSoldermaskRingForRect,
-} from "./soldermask-margin"
 
 export interface DrawPcbHoleParams {
   ctx: CanvasContext
-  hole: PCBHole
+  hole: PcbHole
   realToCanvasMat: Matrix
   colorMap: PcbColorMap
+  soldermaskMargin?: number
 }
 
 // Helper function to safely access ccw_rotation property
-function getRotation(hole: PCBHole): number {
+function getRotation(hole: PcbHole): number {
   if ("ccw_rotation" in hole && typeof hole.ccw_rotation === "number") {
     return hole.ccw_rotation
   }
@@ -28,357 +23,80 @@ function getRotation(hole: PCBHole): number {
 }
 
 export function drawPcbHole(params: DrawPcbHoleParams): void {
-  const { ctx, hole, realToCanvasMat, colorMap } = params
+  const { ctx, hole, realToCanvasMat, colorMap, soldermaskMargin = 0 } = params
 
-  const isCoveredWithSoldermask = hole.is_covered_with_solder_mask === true
-  const margin = isCoveredWithSoldermask ? 0 : (hole.soldermask_margin ?? 0)
-  const hasSoldermask =
-    !isCoveredWithSoldermask &&
-    hole.soldermask_margin !== undefined &&
-    hole.soldermask_margin !== 0
-  const positiveMarginColor = colorMap.substrate
-  const soldermaskOverlayColor = colorMap.soldermaskOverCopper.top
-  const soldermaskRingColor = colorMap.soldermaskOverCopper.top
-
-  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 (only if not fully covered with soldermask)
-    if (!isCoveredWithSoldermask) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.hole_diameter / 2,
-        fill: colorMap.drill,
-        realToCanvasMat,
-      })
+  // Skip drawing if the hole is fully covered with soldermask
+  if (hole.is_covered_with_solder_mask === true) {
+    return
+  }
 
-      // For negative margins, draw soldermask ring on top of the hole
-      if (hasSoldermask && margin < 0) {
-        drawSoldermaskRingForCircle(
-          ctx,
-          { x: hole.x, y: hole.y },
-          hole.hole_diameter / 2,
-          margin,
-          realToCanvasMat,
-          soldermaskRingColor,
-          colorMap.drill,
-        )
-      }
-    }
+  // For negative margins, draw smaller hole (inset by margin amount)
+  const holeInset = soldermaskMargin < 0 ? Math.abs(soldermaskMargin) : 0
 
-    // If fully covered, draw soldermask overlay
-    if (isCoveredWithSoldermask) {
-      drawCircle({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        radius: hole.hole_diameter / 2,
-        fill: soldermaskOverlayColor,
-        realToCanvasMat,
-      })
-    }
+  if (hole.hole_shape === "circle") {
+    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)
-    // 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,
-        rotation,
-      })
-    }
-
-    // Draw the hole (only if not fully covered with soldermask)
-    if (!isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_diameter,
-        height: hole.hole_diameter,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation,
-      })
-
-      // For negative margins, draw soldermask ring on top of the hole
-      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 fully covered, draw soldermask overlay
-    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)
-    // 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,
-        rotation,
-      })
-    }
-
-    // Draw the hole (only if not fully covered with soldermask)
-    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,
-      })
-
-      // For negative margins, draw soldermask ring on top of the hole
-      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 fully covered, draw soldermask overlay
-    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)
-    // 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,
-        rotation,
-      })
-    }
-
-    // Draw the hole (only if not fully covered with soldermask)
-    if (!isCoveredWithSoldermask) {
-      drawRect({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation,
-      })
-
-      // For negative margins, draw soldermask ring on top of the hole
-      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 fully covered, draw soldermask overlay
-    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)
-    // 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 (only if not fully covered with soldermask)
-    if (!isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation,
-      })
-
-      // For negative margins, draw soldermask ring on top of the hole
-      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 fully covered, draw soldermask overlay
-    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)
-
-    // 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 (only if not fully covered with soldermask)
-    if (!isCoveredWithSoldermask) {
-      drawPill({
-        ctx,
-        center: { x: hole.x, y: hole.y },
-        width: hole.hole_width,
-        height: hole.hole_height,
-        fill: colorMap.drill,
-        realToCanvasMat,
-        rotation,
-      })
-
-      // For negative margins, draw soldermask ring on top of the hole
-      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 fully covered, draw soldermask overlay
-    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
   }
 }