circuit-to-canvas 0.0.49 → 0.0.51

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

@@ -0,0 +1,288 @@
+import type { PcbHole } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { CanvasContext, PcbColorMap } from "../../types"
+import { drawPillPath } from "../helper-functions/draw-pill"
+/**
+ * Process soldermask for a non-plated hole.
+ */
+export function processHoleSoldermask(params: {
+  ctx: CanvasContext
+  hole: PcbHole
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+  soldermaskOverCopperColor: string
+  showSoldermask: boolean
+}): void {
+  const {
+    ctx,
+    hole,
+    realToCanvasMat,
+    colorMap,
+    soldermaskOverCopperColor,
+    showSoldermask,
+  } = params
+  // When soldermask is disabled, treat all holes as not covered with soldermask
+  // and use zero margin (normal rendering)
+  const isCoveredWithSoldermask =
+    showSoldermask && hole.is_covered_with_solder_mask === true
+  const margin = showSoldermask ? (hole.soldermask_margin ?? 0) : 0
+
+  if (isCoveredWithSoldermask) {
+    // Draw light green over the entire hole
+    ctx.fillStyle = soldermaskOverCopperColor
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 })
+    ctx.fill()
+  } else if (margin < 0) {
+    // Negative margin: draw drill color for hole, then light green ring
+    ctx.fillStyle = colorMap.drill
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 })
+    ctx.fill()
+    drawNegativeMarginRingForHole({
+      ctx,
+      hole,
+      realToCanvasMat,
+      soldermaskOverCopperColor,
+      margin,
+    })
+  } else if (margin > 0) {
+    // Positive margin: draw substrate for larger area, then drill for hole
+    ctx.fillStyle = colorMap.substrate
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin })
+    ctx.fill()
+    ctx.fillStyle = colorMap.drill
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 })
+    ctx.fill()
+  } else {
+    // Zero margin: just draw drill color for the hole
+    ctx.fillStyle = colorMap.drill
+    drawHoleShapePath({ ctx, hole, realToCanvasMat, margin: 0 })
+    ctx.fill()
+  }
+}
+
+function getHoleRotation(hole: PcbHole): number {
+  if ("ccw_rotation" in hole && typeof hole.ccw_rotation === "number") {
+    return hole.ccw_rotation
+  }
+  return 0
+}
+
+function drawHoleShapePath(params: {
+  ctx: CanvasContext
+  hole: PcbHole
+  realToCanvasMat: Matrix
+  margin: number
+}): void {
+  const { ctx, hole, realToCanvasMat, margin } = params
+  const rotation = getHoleRotation(hole)
+
+  if (hole.hole_shape === "circle") {
+    const [cx, cy] = applyToPoint(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] = applyToPoint(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] = applyToPoint(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] = applyToPoint(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] = applyToPoint(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()
+  }
+}
+
+function drawNegativeMarginRingForHole(params: {
+  ctx: CanvasContext
+  hole: PcbHole
+  realToCanvasMat: Matrix
+  soldermaskOverCopperColor: string
+  margin: number
+}): void {
+  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] = applyToPoint(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)
+    }
+    ctx.fill("evenodd")
+    ctx.restore()
+  } else if (hole.hole_shape === "square") {
+    const [cx, cy] = applyToPoint(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)
+    }
+
+    ctx.beginPath()
+    ctx.rect(-scaledSize / 2, -scaledSize / 2, scaledSize, scaledSize)
+    if (innerSize > 0) {
+      ctx.rect(-innerSize / 2, -innerSize / 2, innerSize, innerSize)
+    }
+    ctx.fill("evenodd")
+    ctx.restore()
+  } else if (hole.hole_shape === "oval") {
+    const [cx, cy] = applyToPoint(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)
+    }
+
+    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.hole_shape === "rect") {
+    const [cx, cy] = applyToPoint(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)
+    }
+
+    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] = applyToPoint(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,
+      })
+    }
+
+    ctx.fill("evenodd")
+    ctx.restore()
+  }
+}

package/lib/drawer/elements/pcb-soldermask/index.ts

@@ -0,0 +1,140 @@
+import type { AnyCircuitElement } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { CanvasContext, PcbColorMap } from "../../types"
+import { drawBoardSoldermask } from "./board"
+import { processCutoutSoldermask } from "./cutout"
+import { processHoleSoldermask } from "./hole"
+import { processPlatedHoleSoldermask } from "./plated-hole"
+import { processSmtPadSoldermask } from "./smt-pad"
+import { processViaSoldermask } from "./via"
+
+export interface DrawPcbSoldermaskParams {
+  ctx: CanvasContext
+  board: import("circuit-json").PcbBoard
+  elements: AnyCircuitElement[]
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+  layer: "top" | "bottom"
+  showSoldermask: boolean
+}
+
+/**
+ * Draws the soldermask layer for the PCB as a unified geometry.
+ *
+ * The soldermask is drawn as a single unified layer that covers the entire board.
+ * Elements "cut through" the soldermask by drawing on top with appropriate colors:
+ *
+ * 1. Draw full soldermask covering the board (dark green)
+ * 2. For each element that needs a soldermask opening:
+ *    - If positive margin: draw substrate color for the larger area, then copper color for pad
+ *    - If zero margin: draw copper color for the pad area
+ *    - If negative margin: draw copper color for the pad, then light green ring for margin
+ * 3. For elements with is_covered_with_soldermask: draw light green soldermask over them
+ *
+ * Note: This approach draws colors ON TOP of the soldermask rather than using
+ * destination-out compositing. This is necessary because some elements (plated holes,
+ * vias, non-plated holes) are drawn AFTER the soldermask layer, so cutting through
+ * the soldermask wouldn't reveal anything useful underneath.
+ */
+export function drawPcbSoldermask(params: DrawPcbSoldermaskParams): void {
+  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
+
+  // Step 1: Draw the full soldermask covering the board (only if enabled)
+  if (showSoldermask) {
+    drawBoardSoldermask({ ctx, board, realToCanvasMat, soldermaskColor })
+  }
+
+  // Step 2: Process each element - draw cutouts and light green areas as needed
+  for (const element of elements) {
+    processElementSoldermask({
+      ctx,
+      element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      layer,
+      showSoldermask,
+    })
+  }
+}
+
+/**
+ * Process soldermask for an element by drawing on top of the soldermask layer.
+ * This simulates cutouts by drawing substrate/copper colors over the soldermask.
+ */
+function processElementSoldermask(params: {
+  ctx: CanvasContext
+  element: AnyCircuitElement
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+  soldermaskOverCopperColor: string
+  layer: "top" | "bottom"
+  showSoldermask: boolean
+}): void {
+  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,
+    })
+  }
+}