circuit-to-canvas 0.0.30 → 0.0.32

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -10,6 +10,7 @@ import type {
   PcbSilkscreenRect,
   PcbSilkscreenCircle,
   PcbSilkscreenLine,
+  PcbSilkscreenOval,
   PcbSilkscreenPath,
   PcbSilkscreenPill,
   PcbCutout,
@@ -25,8 +26,14 @@ import type {
   PcbNoteLine,
   PcbRenderLayer,
 } from "circuit-json"
+import {
+  identity,
+  compose,
+  translate,
+  scale,
+  applyToPoint,
+} from "transformation-matrix"
 import { shouldDrawElement } from "./pcb-render-layer-filter"
-import { identity, compose, translate, scale } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
 import {
   type CanvasContext,
@@ -41,11 +48,14 @@ import { drawPcbHole } from "./elements/pcb-hole"
 import { drawPcbSmtPad } from "./elements/pcb-smtpad"
 import { drawPcbTrace } from "./elements/pcb-trace"
 import { drawPcbBoard } from "./elements/pcb-board"
+import { drawPath } from "./shapes/path"
+import { drawRect } from "./shapes/rect"
 import { drawPcbSilkscreenText } from "./elements/pcb-silkscreen-text"
 import { drawPcbSilkscreenRect } from "./elements/pcb-silkscreen-rect"
 import { drawPcbSilkscreenCircle } from "./elements/pcb-silkscreen-circle"
 import { drawPcbSilkscreenLine } from "./elements/pcb-silkscreen-line"
 import { drawPcbSilkscreenPath } from "./elements/pcb-silkscreen-path"
+import { drawPcbSilkscreenOval } from "./elements/pcb-silkscreen-oval"
 import { drawPcbSilkscreenPill } from "./elements/pcb-silkscreen-pill"
 import { drawPcbCutout } from "./elements/pcb-cutout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
@@ -148,8 +158,103 @@ export class CircuitToCanvasDrawer {
     elements: AnyCircuitElement[],
     options: DrawElementsOptions = {},
   ): void {
+    // Check if any pad 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,
+    )
+
     for (const element of elements) {
-      this.drawElement(element, options)
+      if (element.type === "pcb_board" && hasSoldermaskPads) {
+        // Draw board with soldermask fill when pads have soldermask
+        this.drawBoardWithSoldermask(element as PcbBoard)
+      } else {
+        this.drawElement(element, options)
+      }
+    }
+  }
+
+  private drawBoardWithSoldermask(board: PcbBoard): void {
+    const { width, height, center, outline } = board
+    const layer = "top" // Default to top layer for soldermask color
+
+    // If the board has a custom outline, draw it as a path with soldermask fill
+    if (outline && Array.isArray(outline) && outline.length >= 3) {
+      const soldermaskColor =
+        this.colorMap.soldermask[
+          layer as keyof typeof this.colorMap.soldermask
+        ] ?? this.colorMap.soldermask.top
+
+      // Draw filled path
+      const canvasPoints = outline.map((p) => {
+        const [x, y] = applyToPoint(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()
+
+      // Draw outline stroke
+      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
+    }
+
+    // Otherwise draw a rectangle with soldermask fill
+    if (width !== undefined && height !== undefined && center) {
+      const soldermaskColor =
+        this.colorMap.soldermask[
+          layer as keyof typeof this.colorMap.soldermask
+        ] ?? this.colorMap.soldermask.top
+
+      // Draw filled rectangle
+      drawRect({
+        ctx: this.ctx,
+        center,
+        width,
+        height,
+        fill: soldermaskColor,
+        realToCanvasMat: this.realToCanvasMat,
+      })
+
+      // Draw the outline stroke separately using path
+      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,
+      })
     }
   }
 
@@ -270,6 +375,15 @@ export class CircuitToCanvasDrawer {
       })
     }
 
+    if (element.type === "pcb_silkscreen_oval") {
+      drawPcbSilkscreenOval({
+        ctx: this.ctx,
+        oval: element as PcbSilkscreenOval,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
     if (element.type === "pcb_cutout") {
       drawPcbCutout({
         ctx: this.ctx,

package/lib/drawer/elements/index.ts

@@ -8,6 +8,11 @@ export { drawPcbVia, type DrawPcbViaParams } from "./pcb-via"
 export { drawPcbHole, type DrawPcbHoleParams } from "./pcb-hole"
 
 export { drawPcbSmtPad, type DrawPcbSmtPadParams } from "./pcb-smtpad"
+export {
+  drawSoldermaskRingForRect,
+  drawSoldermaskRingForCircle,
+  drawSoldermaskRingForPill,
+} from "./soldermask-margin"
 
 export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace"
 
@@ -43,6 +48,11 @@ export {
   type DrawPcbSilkscreenPillParams,
 } from "./pcb-silkscreen-pill"
 
+export {
+  drawPcbSilkscreenOval,
+  type DrawPcbSilkscreenOvalParams,
+} from "./pcb-silkscreen-oval"
+
 export { drawPcbCutout, type DrawPcbCutoutParams } from "./pcb-cutout"
 
 export {

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

@@ -43,8 +43,8 @@ export function drawPcbHole(params: DrawPcbHoleParams): void {
     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,
     })

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

@@ -43,8 +43,8 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
     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,
@@ -54,8 +54,8 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
     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,
@@ -201,8 +201,8 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       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,
       })

package/lib/drawer/elements/pcb-silkscreen-oval.ts

@@ -0,0 +1,35 @@
+import type { PcbSilkscreenOval } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawOval } from "../shapes/oval"
+
+export interface DrawPcbSilkscreenOvalParams {
+  ctx: CanvasContext
+  oval: PcbSilkscreenOval
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenOval(
+  params: DrawPcbSilkscreenOvalParams,
+): void {
+  const { ctx, oval, realToCanvasMat, colorMap } = params
+  const color = layerToSilkscreenColor(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,
+  })
+}

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

@@ -5,6 +5,11 @@ import { drawCircle } from "../shapes/circle"
 import { drawRect } from "../shapes/rect"
 import { drawPill } from "../shapes/pill"
 import { drawPolygon } from "../shapes/polygon"
+import {
+  drawSoldermaskRingForRect,
+  drawSoldermaskRingForCircle,
+  drawSoldermaskRingForPill,
+} from "./soldermask-margin"
 
 export interface DrawPcbSmtPadParams {
   ctx: CanvasContext
@@ -20,12 +25,45 @@ function layerToColor(layer: string, colorMap: PcbColorMap): string {
   )
 }
 
+function getSoldermaskColor(layer: string, colorMap: PcbColorMap): string {
+  return (
+    colorMap.soldermaskOverCopper[
+      layer as keyof typeof colorMap.soldermaskOverCopper
+    ] ?? colorMap.soldermaskOverCopper.top
+  )
+}
+
 export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
   const { ctx, pad, realToCanvasMat, colorMap } = params
 
   const color = layerToColor(pad.layer, colorMap)
+  const hasSoldermask =
+    pad.is_covered_with_solder_mask === true &&
+    pad.soldermask_margin !== undefined &&
+    pad.soldermask_margin !== 0
+  const margin = hasSoldermask ? pad.soldermask_margin! : 0
+  const soldermaskRingColor = getSoldermaskColor(pad.layer, colorMap)
+  const positiveMarginColor = colorMap.substrate
 
+  // Draw the copper pad
   if (pad.shape === "rect") {
+    // For positive margins, draw extended mask area first
+    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 as { corner_radius?: number }).corner_radius ??
+            pad.rect_border_radius ??
+            0) + margin,
+      })
+    }
+
+    // Draw the pad on top
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -38,10 +76,46 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
         pad.rect_border_radius ??
         0,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        (pad as { corner_radius?: number }).corner_radius ??
+          pad.rect_border_radius ??
+          0,
+        0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 
   if (pad.shape === "rotated_rect") {
+    // For positive margins, draw extended mask area first
+    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 as { corner_radius?: number }).corner_radius ??
+            pad.rect_border_radius ??
+            0) + margin,
+        rotation: pad.ccw_rotation ?? 0,
+      })
+    }
+
+    // Draw the pad on top
     drawRect({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -55,10 +129,40 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
         0,
       rotation: pad.ccw_rotation ?? 0,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForRect(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.width,
+        pad.height,
+        margin,
+        (pad as { corner_radius?: number }).corner_radius ??
+          pad.rect_border_radius ??
+          0,
+        pad.ccw_rotation ?? 0,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 
   if (pad.shape === "circle") {
+    // For positive margins, draw extended mask area first
+    if (hasSoldermask && margin > 0) {
+      drawCircle({
+        ctx,
+        center: { x: pad.x, y: pad.y },
+        radius: pad.radius + margin,
+        fill: positiveMarginColor,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw the pad on top
     drawCircle({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -66,10 +170,36 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       fill: color,
       realToCanvasMat,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    if (hasSoldermask && margin < 0) {
+      drawSoldermaskRingForCircle(
+        ctx,
+        { x: pad.x, y: pad.y },
+        pad.radius,
+        margin,
+        realToCanvasMat,
+        soldermaskRingColor,
+        color,
+      )
+    }
     return
   }
 
   if (pad.shape === "pill") {
+    // For positive margins, draw extended mask area first
+    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,
+      })
+    }
+
+    // Draw the pad on top
     drawPill({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -78,10 +208,39 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       fill: color,
       realToCanvasMat,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    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") {
+    // For positive margins, draw extended mask area first
+    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,
+      })
+    }
+
+    // Draw the pad on top
     drawPill({
       ctx,
       center: { x: pad.x, y: pad.y },
@@ -91,6 +250,21 @@ export function drawPcbSmtPad(params: DrawPcbSmtPadParams): void {
       realToCanvasMat,
       rotation: pad.ccw_rotation ?? 0,
     })
+
+    // For negative margins, draw soldermask ring on top of the pad
+    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
   }