circuit-to-canvas 0.0.28 → 0.0.30

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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 { AnyCircuitElement, PcbRenderLayer, 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';
 
 /**
@@ -86,7 +86,7 @@ interface DrawContext {
 }
 
 interface DrawElementsOptions {
-    layers?: string[];
+    layers?: PcbRenderLayer[];
 }
 interface CanvasLike {
     getContext(contextId: "2d"): CanvasContext | null;

package/dist/index.js

@@ -1,3 +1,16 @@
+// lib/drawer/pcb-render-layer-filter.ts
+import { getElementRenderLayers } from "@tscircuit/circuit-json-util";
+function shouldDrawElement(element, options) {
+  if (!options.layers || options.layers.length === 0) {
+    return true;
+  }
+  const elementLayers = getElementRenderLayers(element);
+  if (elementLayers.length === 0) {
+    return true;
+  }
+  return elementLayers.some((layer) => options.layers.includes(layer));
+}
+
 // lib/drawer/CircuitToCanvasDrawer.ts
 import { identity, compose, translate, scale } from "transformation-matrix";
 
@@ -196,6 +209,30 @@ function drawPill(params) {
   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();
+}
+
 // lib/drawer/elements/pcb-plated-hole.ts
 function drawPcbPlatedHole(params) {
   const { ctx, hole, realToCanvasMat, colorMap } = params;
@@ -325,6 +362,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
@@ -417,30 +509,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;
@@ -1461,6 +1529,9 @@ var CircuitToCanvasDrawer = class {
     }
   }
   drawElement(element, options) {
+    if (!shouldDrawElement(element, options)) {
+      return;
+    }
     if (element.type === "pcb_plated_hole") {
       drawPcbPlatedHole({
         ctx: this.ctx,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -1,10 +1,10 @@
 import type {
   AnyCircuitElement,
   PcbPlatedHole,
-  PCBVia,
-  PCBHole,
+  PcbVia,
+  PcbHole,
   PcbSmtPad,
-  PCBTrace,
+  PcbTrace,
   PcbBoard,
   PcbSilkscreenText,
   PcbSilkscreenRect,
@@ -23,7 +23,9 @@ import type {
   PcbNoteText,
   PcbNoteDimension,
   PcbNoteLine,
+  PcbRenderLayer,
 } from "circuit-json"
+import { shouldDrawElement } from "./pcb-render-layer-filter"
 import { identity, compose, translate, scale } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
 import {
@@ -58,7 +60,7 @@ import { drawPcbNoteDimension } from "./elements/pcb-note-dimension"
 import { drawPcbNoteLine } from "./elements/pcb-note-line"
 
 export interface DrawElementsOptions {
-  layers?: string[]
+  layers?: PcbRenderLayer[]
 }
 
 interface CanvasLike {
@@ -155,6 +157,11 @@ export class CircuitToCanvasDrawer {
     element: AnyCircuitElement,
     options: DrawElementsOptions,
   ): void {
+    // Check if element should be drawn based on layer options
+    if (!shouldDrawElement(element, options)) {
+      return
+    }
+
     if (element.type === "pcb_plated_hole") {
       drawPcbPlatedHole({
         ctx: this.ctx,
@@ -167,7 +174,7 @@ export class CircuitToCanvasDrawer {
     if (element.type === "pcb_via") {
       drawPcbVia({
         ctx: this.ctx,
-        via: element as PCBVia,
+        via: element as PcbVia,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
       })
@@ -176,7 +183,7 @@ export class CircuitToCanvasDrawer {
     if (element.type === "pcb_hole") {
       drawPcbHole({
         ctx: this.ctx,
-        hole: element as PCBHole,
+        hole: element as PcbHole,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
       })
@@ -194,7 +201,7 @@ export class CircuitToCanvasDrawer {
     if (element.type === "pcb_trace") {
       drawPcbTrace({
         ctx: this.ctx,
-        trace: element as PCBTrace,
+        trace: element as PcbTrace,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
       })

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/pcb-render-layer-filter.ts

@@ -0,0 +1,30 @@
+import type { AnyCircuitElement } from "circuit-json"
+import type { DrawElementsOptions } from "./CircuitToCanvasDrawer"
+import { getElementRenderLayers } from "@tscircuit/circuit-json-util"
+
+/**
+ * Gets the render layer(s) for an element based on its type and layer property
+ */
+
+/**
+ * Checks if an element should be drawn based on layer options
+ */
+export function shouldDrawElement(
+  element: AnyCircuitElement,
+  options: DrawElementsOptions,
+): boolean {
+  // If no layers specified, draw all elements
+  if (!options.layers || options.layers.length === 0) {
+    return true
+  }
+
+  const elementLayers = getElementRenderLayers(element)
+
+  // If element has no layer info (board, holes, etc.), always draw
+  if (elementLayers.length === 0) {
+    return true
+  }
+
+  // Check if any of the element's layers match the requested layers
+  return elementLayers.some((layer) => options.layers!.includes(layer))
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -13,11 +13,11 @@
     "@napi-rs/canvas": "^0.1.84",
     "@resvg/resvg-js": "^2.6.2",
     "@tscircuit/alphabet": "^0.0.17",
-    "@tscircuit/circuit-json-util": "^0.0.73",
+    "@tscircuit/circuit-json-util": "^0.0.75",
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.14",
-    "circuit-json": "^0.0.342",
+    "circuit-json": "^0.0.346",
     "circuit-json-to-connectivity-map": "^0.0.23",
     "circuit-to-svg": "^0.0.297",
     "looks-same": "^10.0.1",

package/tests/elements/layer-filter.test.ts

@@ -0,0 +1,42 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSmtPad } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("layer filter only draws elements on specified layers", 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 topPad: PcbSmtPad = {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pad1",
+    shape: "rect",
+    x: 30,
+    y: 50,
+    width: 20,
+    height: 20,
+    layer: "top",
+  }
+
+  const bottomPad: PcbSmtPad = {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pad2",
+    shape: "rect",
+    x: 70,
+    y: 50,
+    width: 20,
+    height: 20,
+    layer: "bottom",
+  }
+
+  // Draw only top layer - should only show top pad (left side)
+  drawer.drawElements([topPad, bottomPad], { layers: ["top_copper"] })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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",
+  )
+})