circuit-to-canvas 0.0.29 → 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";
 
@@ -1516,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/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.29",
+  "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,
+  )
+})