circuit-to-canvas 0.0.26 → 0.0.28

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
 
@@ -72,17 +73,17 @@ This checklist tracks PCB drawing features from [circuit-to-svg](https://github.
 ### Fabrication Notes
 
 - [x] `pcb_fabrication_note_text` - Fabrication note text
-- [ ] `pcb_fabrication_note_rect` - Fabrication note rectangles
-- [ ] `pcb_fabrication_note_path` - Fabrication note paths
+- [x] `pcb_fabrication_note_rect` - Fabrication note rectangles
+- [x] `pcb_fabrication_note_path` - Fabrication note paths
 - [ ] `pcb_fabrication_note_dimension` - Fabrication dimension annotations
 
 ### Annotation/Notes
 
-- [ ] `pcb_note_text` - General note text
-- [ ] `pcb_note_rect` - Note rectangles
-- [ ] `pcb_note_path` - Note paths
-- [ ] `pcb_note_line` - Note lines
-- [ ] `pcb_note_dimension` - Dimension annotations
+- [x] `pcb_note_text` - General note text
+- [x] `pcb_note_rect` - Note rectangles
+- [x] `pcb_note_path` - Note paths
+- [x] `pcb_note_line` - Note lines
+- [x] `pcb_note_dimension` - Dimension annotations
 
 ### Panel Support
 

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,8 +184,15 @@ function drawPill(params) {
     ctx.arc(0, 0, scaledWidth / 2, 0, Math.PI * 2);
   }
   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();
 }
 
@@ -891,6 +901,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 +1549,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 +1671,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-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.26",
+  "version": "0.0.28",
   "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-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",
+  )
+})