circuit-to-canvas 0.0.27 → 0.0.29

package/README.md

@@ -53,6 +53,7 @@ This checklist tracks PCB drawing features from [circuit-to-svg](https://github.
 - [x] `pcb_silkscreen_circle` - Circles on silkscreen
 - [x] `pcb_silkscreen_line` - Lines on silkscreen
 - [x] `pcb_silkscreen_path` - Paths/routes on silkscreen
+- [x] `pcb_silkscreen_pill` - Pill shapes (rounded rectangles) on silkscreen
 
 ### Copper Text
 

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension } from 'circuit-json';
+import { AnyCircuitElement, NinePointAnchor, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -154,9 +154,11 @@ interface DrawPillParams {
     };
     width: number;
     height: number;
-    fill: string;
+    fill?: string;
     realToCanvasMat: Matrix;
     rotation?: number;
+    stroke?: string;
+    strokeWidth?: number;
 }
 declare function drawPill(params: DrawPillParams): void;
 
@@ -341,6 +343,14 @@ interface DrawPcbSilkscreenPathParams {
 }
 declare function drawPcbSilkscreenPath(params: DrawPcbSilkscreenPathParams): void;
 
+interface DrawPcbSilkscreenPillParams {
+    ctx: CanvasContext;
+    pill: PcbSilkscreenPill;
+    realToCanvasMat: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbSilkscreenPill(params: DrawPcbSilkscreenPillParams): void;
+
 interface DrawPcbCutoutParams {
     ctx: CanvasContext;
     cutout: PcbCutout;
@@ -421,4 +431,4 @@ interface DrawPcbNoteDimensionParams {
 }
 declare function drawPcbNoteDimension(params: DrawPcbNoteDimensionParams): 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 DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenPathParams, type DrawPcbSilkscreenRectParams, type DrawPcbSilkscreenTextParams, type DrawPcbSmtPadParams, type DrawPcbTraceParams, type DrawPcbViaParams, type DrawPillParams, type DrawPolygonParams, type DrawRectParams, type DrawTextParams, type DrawerConfig, type PcbColorMap, drawArrow, drawCircle, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, 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 DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, 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, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -150,11 +150,14 @@ function drawPill(params) {
     height,
     fill,
     realToCanvasMat,
-    rotation = 0
+    rotation = 0,
+    stroke,
+    strokeWidth
   } = params;
   const [cx, cy] = applyToPoint4(realToCanvasMat, [center.x, center.y]);
   const scaledWidth = width * Math.abs(realToCanvasMat.a);
   const scaledHeight = height * Math.abs(realToCanvasMat.a);
+  const scaledStrokeWidth = strokeWidth ? strokeWidth * Math.abs(realToCanvasMat.a) : void 0;
   ctx.save();
   ctx.translate(cx, cy);
   if (rotation !== 0) {
@@ -181,9 +184,40 @@ function drawPill(params) {
     ctx.arc(0, 0, scaledWidth / 2, 0, Math.PI * 2);
   }
   ctx.closePath();
+  if (fill) {
+    ctx.fillStyle = fill;
+    ctx.fill();
+  }
+  if (stroke && scaledStrokeWidth) {
+    ctx.strokeStyle = stroke;
+    ctx.lineWidth = scaledStrokeWidth;
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+// lib/drawer/shapes/polygon.ts
+import { applyToPoint as applyToPoint5 } from "transformation-matrix";
+function drawPolygon(params) {
+  const { ctx, points, fill, realToCanvasMat } = params;
+  if (points.length < 3) return;
+  ctx.beginPath();
+  const canvasPoints = points.map(
+    (p) => applyToPoint5(realToCanvasMat, [p.x, p.y])
+  );
+  const firstPoint = canvasPoints[0];
+  if (!firstPoint) return;
+  const [firstX, firstY] = firstPoint;
+  ctx.moveTo(firstX, firstY);
+  for (let i = 1; i < canvasPoints.length; i++) {
+    const point = canvasPoints[i];
+    if (!point) continue;
+    const [x, y] = point;
+    ctx.lineTo(x, y);
+  }
+  ctx.closePath();
   ctx.fillStyle = fill;
   ctx.fill();
-  ctx.restore();
 }
 
 // lib/drawer/elements/pcb-plated-hole.ts
@@ -315,6 +349,61 @@ function drawPcbPlatedHole(params) {
     });
     return;
   }
+  if (hole.shape === "hole_with_polygon_pad") {
+    const padOutline = hole.pad_outline;
+    if (padOutline && padOutline.length >= 3) {
+      const padPoints = padOutline.map((point) => ({
+        x: hole.x + point.x,
+        y: hole.y + point.y
+      }));
+      drawPolygon({
+        ctx,
+        points: padPoints,
+        fill: colorMap.copper.top,
+        realToCanvasMat
+      });
+    }
+    const holeX = hole.x + (hole.hole_offset_x ?? 0);
+    const holeY = hole.y + (hole.hole_offset_y ?? 0);
+    const holeShape = hole.hole_shape;
+    if (holeShape === "circle") {
+      drawCircle({
+        ctx,
+        center: { x: holeX, y: holeY },
+        radius: (hole.hole_diameter ?? 0) / 2,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "oval") {
+      drawOval({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    } else if (holeShape === "rotated_pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat
+      });
+    }
+    return;
+  }
 }
 
 // lib/drawer/elements/pcb-via.ts
@@ -407,30 +496,6 @@ function drawPcbHole(params) {
   }
 }
 
-// lib/drawer/shapes/polygon.ts
-import { applyToPoint as applyToPoint5 } from "transformation-matrix";
-function drawPolygon(params) {
-  const { ctx, points, fill, realToCanvasMat } = params;
-  if (points.length < 3) return;
-  ctx.beginPath();
-  const canvasPoints = points.map(
-    (p) => applyToPoint5(realToCanvasMat, [p.x, p.y])
-  );
-  const firstPoint = canvasPoints[0];
-  if (!firstPoint) return;
-  const [firstX, firstY] = firstPoint;
-  ctx.moveTo(firstX, firstY);
-  for (let i = 1; i < canvasPoints.length; i++) {
-    const point = canvasPoints[i];
-    if (!point) continue;
-    const [x, y] = point;
-    ctx.lineTo(x, y);
-  }
-  ctx.closePath();
-  ctx.fillStyle = fill;
-  ctx.fill();
-}
-
 // lib/drawer/elements/pcb-smtpad.ts
 function layerToColor(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
@@ -891,6 +956,25 @@ function drawPcbSilkscreenPath(params) {
   }
 }
 
+// lib/drawer/elements/pcb-silkscreen-pill.ts
+function layerToSilkscreenColor6(layer, colorMap) {
+  return layer === "bottom" ? colorMap.silkscreen.bottom : colorMap.silkscreen.top;
+}
+function drawPcbSilkscreenPill(params) {
+  const { ctx, pill, realToCanvasMat, colorMap } = params;
+  const color = layerToSilkscreenColor6(pill.layer, colorMap);
+  const strokeWidth = 0.2;
+  drawPill({
+    ctx,
+    center: pill.center,
+    width: pill.width,
+    height: pill.height,
+    stroke: color,
+    strokeWidth,
+    realToCanvasMat
+  });
+}
+
 // lib/drawer/elements/pcb-cutout.ts
 function drawPcbCutout(params) {
   const { ctx, cutout, realToCanvasMat, colorMap } = params;
@@ -1520,6 +1604,14 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_silkscreen_pill") {
+      drawPcbSilkscreenPill({
+        ctx: this.ctx,
+        pill: element,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
     if (element.type === "pcb_cutout") {
       drawPcbCutout({
         ctx: this.ctx,
@@ -1634,6 +1726,7 @@ export {
   drawPcbSilkscreenCircle,
   drawPcbSilkscreenLine,
   drawPcbSilkscreenPath,
+  drawPcbSilkscreenPill,
   drawPcbSilkscreenRect,
   drawPcbSilkscreenText,
   drawPcbSmtPad,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -11,6 +11,7 @@ import type {
   PcbSilkscreenCircle,
   PcbSilkscreenLine,
   PcbSilkscreenPath,
+  PcbSilkscreenPill,
   PcbCutout,
   PcbCopperPour,
   PcbCopperText,
@@ -43,6 +44,7 @@ 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 { drawPcbSilkscreenPill } from "./elements/pcb-silkscreen-pill"
 import { drawPcbCutout } from "./elements/pcb-cutout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
 import { drawPcbCopperText } from "./elements/pcb-copper-text"
@@ -252,6 +254,15 @@ export class CircuitToCanvasDrawer {
       })
     }
 
+    if (element.type === "pcb_silkscreen_pill") {
+      drawPcbSilkscreenPill({
+        ctx: this.ctx,
+        pill: element as PcbSilkscreenPill,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
+
     if (element.type === "pcb_cutout") {
       drawPcbCutout({
         ctx: this.ctx,

package/lib/drawer/elements/index.ts

@@ -38,6 +38,11 @@ export {
   type DrawPcbSilkscreenPathParams,
 } from "./pcb-silkscreen-path"
 
+export {
+  drawPcbSilkscreenPill,
+  type DrawPcbSilkscreenPillParams,
+} from "./pcb-silkscreen-pill"
+
 export { drawPcbCutout, type DrawPcbCutoutParams } from "./pcb-cutout"
 
 export {

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

@@ -5,6 +5,7 @@ import { drawCircle } from "../shapes/circle"
 import { drawRect } from "../shapes/rect"
 import { drawOval } from "../shapes/oval"
 import { drawPill } from "../shapes/pill"
+import { drawPolygon } from "../shapes/polygon"
 
 export interface DrawPcbPlatedHoleParams {
   ctx: CanvasContext
@@ -96,12 +97,12 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
       realToCanvasMat,
-      borderRadius: (hole as any).rect_border_radius ?? 0,
+      borderRadius: hole.rect_border_radius ?? 0,
     })
 
     // Draw circular drill hole (with offset)
-    const holeX = hole.x + ((hole as any).hole_offset_x ?? 0)
-    const holeY = hole.y + ((hole as any).hole_offset_y ?? 0)
+    const holeX = hole.x + (hole.hole_offset_x ?? 0)
+    const holeY = hole.y + (hole.hole_offset_y ?? 0)
     drawCircle({
       ctx,
       center: { x: holeX, y: holeY },
@@ -121,12 +122,12 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
       realToCanvasMat,
-      borderRadius: (hole as any).rect_border_radius ?? 0,
+      borderRadius: hole.rect_border_radius ?? 0,
     })
 
     // Draw pill drill hole (with offset)
-    const holeX = hole.x + ((hole as any).hole_offset_x ?? 0)
-    const holeY = hole.y + ((hole as any).hole_offset_y ?? 0)
+    const holeX = hole.x + (hole.hole_offset_x ?? 0)
+    const holeY = hole.y + (hole.hole_offset_y ?? 0)
     drawPill({
       ctx,
       center: { x: holeX, y: holeY },
@@ -147,13 +148,13 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
       height: hole.rect_pad_height,
       fill: colorMap.copper.top,
       realToCanvasMat,
-      borderRadius: (hole as any).rect_border_radius ?? 0,
+      borderRadius: hole.rect_border_radius ?? 0,
       rotation: hole.rect_ccw_rotation,
     })
 
     // Draw rotated pill drill hole (with offset)
-    const holeX = hole.x + ((hole as any).hole_offset_x ?? 0)
-    const holeY = hole.y + ((hole as any).hole_offset_y ?? 0)
+    const holeX = hole.x + (hole.hole_offset_x ?? 0)
+    const holeY = hole.y + (hole.hole_offset_y ?? 0)
     drawPill({
       ctx,
       center: { x: holeX, y: holeY },
@@ -165,4 +166,65 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
     })
     return
   }
+
+  if (hole.shape === "hole_with_polygon_pad") {
+    // Draw polygon pad
+    const padOutline = hole.pad_outline
+    if (padOutline && padOutline.length >= 3) {
+      // Transform pad_outline points to be relative to hole.x, hole.y
+      const padPoints = padOutline.map((point: { x: number; y: number }) => ({
+        x: hole.x + point.x,
+        y: hole.y + point.y,
+      }))
+      drawPolygon({
+        ctx,
+        points: padPoints,
+        fill: colorMap.copper.top,
+        realToCanvasMat,
+      })
+    }
+
+    // Draw drill hole (with offset)
+    const holeX = hole.x + (hole.hole_offset_x ?? 0)
+    const holeY = hole.y + (hole.hole_offset_y ?? 0)
+    const holeShape = hole.hole_shape
+
+    if (holeShape === "circle") {
+      drawCircle({
+        ctx,
+        center: { x: holeX, y: holeY },
+        radius: (hole.hole_diameter ?? 0) / 2,
+        fill: colorMap.drill,
+        realToCanvasMat,
+      })
+    } else if (holeShape === "oval") {
+      drawOval({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat,
+      })
+    } else if (holeShape === "pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat,
+      })
+    } else if (holeShape === "rotated_pill") {
+      drawPill({
+        ctx,
+        center: { x: holeX, y: holeY },
+        width: hole.hole_width ?? 0,
+        height: hole.hole_height ?? 0,
+        fill: colorMap.drill,
+        realToCanvasMat,
+      })
+    }
+    return
+  }
 }

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

@@ -0,0 +1,37 @@
+import type { PcbSilkscreenPill } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawPill } from "../shapes/pill"
+
+export interface DrawPcbSilkscreenPillParams {
+  ctx: CanvasContext
+  pill: PcbSilkscreenPill
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom"
+    ? colorMap.silkscreen.bottom
+    : colorMap.silkscreen.top
+}
+
+export function drawPcbSilkscreenPill(
+  params: DrawPcbSilkscreenPillParams,
+): void {
+  const { ctx, pill, realToCanvasMat, colorMap } = params
+
+  const color = layerToSilkscreenColor(pill.layer, colorMap)
+  const strokeWidth = 0.2
+
+  // Draw as boundary/outline, not filled
+  drawPill({
+    ctx,
+    center: pill.center,
+    width: pill.width,
+    height: pill.height,
+    stroke: color,
+    strokeWidth,
+    realToCanvasMat,
+  })
+}

package/lib/drawer/shapes/pill.ts

@@ -7,9 +7,11 @@ export interface DrawPillParams {
   center: { x: number; y: number }
   width: number
   height: number
-  fill: string
+  fill?: string
   realToCanvasMat: Matrix
   rotation?: number
+  stroke?: string
+  strokeWidth?: number
 }
 
 export function drawPill(params: DrawPillParams): void {
@@ -21,11 +23,16 @@ export function drawPill(params: DrawPillParams): void {
     fill,
     realToCanvasMat,
     rotation = 0,
+    stroke,
+    strokeWidth,
   } = params
 
   const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
   const scaledWidth = width * Math.abs(realToCanvasMat.a)
   const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledStrokeWidth = strokeWidth
+    ? strokeWidth * Math.abs(realToCanvasMat.a)
+    : undefined
 
   ctx.save()
   ctx.translate(cx, cy)
@@ -62,7 +69,17 @@ export function drawPill(params: DrawPillParams): void {
   }
 
   ctx.closePath()
-  ctx.fillStyle = fill
-  ctx.fill()
+
+  if (fill) {
+    ctx.fillStyle = fill
+    ctx.fill()
+  }
+
+  if (stroke && scaledStrokeWidth) {
+    ctx.strokeStyle = stroke
+    ctx.lineWidth = scaledStrokeWidth
+    ctx.stroke()
+  }
+
   ctx.restore()
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -17,7 +17,7 @@
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.14",
-    "circuit-json": "^0.0.335",
+    "circuit-json": "^0.0.342",
     "circuit-json-to-connectivity-map": "^0.0.23",
     "circuit-to-svg": "^0.0.297",
     "looks-same": "^10.0.1",

package/tests/elements/pcb-plated-hole-polygon.test.ts

@@ -0,0 +1,111 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbPlatedHole } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw hole with polygon pad - circle hole", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const hole: PcbPlatedHole = {
+    type: "pcb_plated_hole",
+    pcb_plated_hole_id: "hole1",
+    shape: "hole_with_polygon_pad",
+    x: 50,
+    y: 50,
+    hole_shape: "circle",
+    hole_diameter: 15,
+    pad_outline: [
+      { x: -20, y: -20 },
+      { x: 20, y: -20 },
+      { x: 25, y: 0 },
+      { x: 20, y: 20 },
+      { x: -20, y: 20 },
+      { x: -25, y: 0 },
+    ],
+    layers: ["top", "bottom"],
+  } as any
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "hole-with-polygon-pad-circle",
+  )
+})
+
+test("draw hole with polygon pad - pill hole with offset", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const hole: PcbPlatedHole = {
+    type: "pcb_plated_hole",
+    pcb_plated_hole_id: "hole1",
+    shape: "hole_with_polygon_pad",
+    x: 50,
+    y: 50,
+    hole_shape: "pill",
+    hole_width: 12,
+    hole_height: 8,
+    hole_offset_x: 5,
+    hole_offset_y: -3,
+    pad_outline: [
+      { x: -25, y: -15 },
+      { x: 25, y: -15 },
+      { x: 30, y: 0 },
+      { x: 25, y: 15 },
+      { x: -25, y: 15 },
+      { x: -30, y: 0 },
+    ],
+    layers: ["top", "bottom"],
+  } as any
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "hole-with-polygon-pad-pill-offset",
+  )
+})
+
+test("draw hole with polygon pad - pill hole", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  const hole: PcbPlatedHole = {
+    type: "pcb_plated_hole",
+    pcb_plated_hole_id: "hole1",
+    shape: "hole_with_polygon_pad",
+    x: 50,
+    y: 50,
+    hole_shape: "rotated_pill",
+    hole_width: 15,
+    hole_height: 10,
+    pad_outline: [
+      { x: -20, y: -20 },
+      { x: 20, y: -20 },
+      { x: 20, y: 20 },
+      { x: -20, y: 20 },
+    ],
+    layers: ["top", "bottom"],
+  } as any
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "hole-with-polygon-pad-pill",
+  )
+})

package/tests/elements/pcb-silkscreen-pill.test.ts

@@ -0,0 +1,55 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenPill } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen pill", async () => {
+  const canvas = createCanvas(400, 400)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 400, 400)
+
+  const pill: PcbSilkscreenPill = {
+    type: "pcb_silkscreen_pill",
+    pcb_silkscreen_pill_id: "pill1",
+    pcb_component_id: "component1",
+    layer: "top",
+    center: { x: 200, y: 200 },
+    width: 240,
+    height: 80,
+  }
+
+  drawer.drawElements([pill])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw silkscreen pill bottom layer", async () => {
+  const canvas = createCanvas(400, 400)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 400, 400)
+
+  const pill: PcbSilkscreenPill = {
+    type: "pcb_silkscreen_pill",
+    pcb_silkscreen_pill_id: "pill1",
+    pcb_component_id: "component1",
+    layer: "bottom",
+    center: { x: 200, y: 200 },
+    width: 160,
+    height: 120,
+  }
+
+  drawer.drawElements([pill])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "silkscreen-pill-bottom",
+  )
+})