circuit-to-canvas 0.0.55 → 0.0.56

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PcbHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PCBKeepout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension, PcbFabricationNoteDimension } from 'circuit-json';
+import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PcbHole, PcbSmtPad, PCBTrace, PcbBoard, PcbPanel, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PCBKeepout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension, PcbFabricationNoteDimension } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -384,6 +384,15 @@ interface DrawPcbBoardParams {
 }
 declare function drawPcbBoard(params: DrawPcbBoardParams): void;
 
+interface DrawPcbPanelParams {
+    ctx: CanvasContext;
+    panel: PcbPanel;
+    realToCanvasMat: Matrix;
+    colorMap: PcbColorMap;
+    drawBoardMaterial: boolean;
+}
+declare function drawPcbPanelElement(params: DrawPcbPanelParams): void;
+
 interface DrawPcbSilkscreenTextParams {
     ctx: CanvasContext;
     text: PcbSilkscreenText;
@@ -536,4 +545,4 @@ interface DrawPcbFabricationNoteDimensionParams {
 }
 declare function drawPcbFabricationNoteDimension(params: DrawPcbFabricationNoteDimensionParams): 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 DrawDimensionLineParams, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNoteDimensionParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbKeepoutParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenOvalParams, 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, drawDimensionLine, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNoteDimension, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbKeepout, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForOval, drawSoldermaskRingForPill, drawSoldermaskRingForRect, 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 DrawDimensionLineParams, type DrawElementsOptions, type DrawLineParams, type DrawOvalParams, type DrawPathParams, type DrawPcbBoardParams, type DrawPcbCopperPourParams, type DrawPcbCopperTextParams, type DrawPcbCutoutParams, type DrawPcbFabricationNoteDimensionParams, type DrawPcbFabricationNotePathParams, type DrawPcbFabricationNoteRectParams, type DrawPcbFabricationNoteTextParams, type DrawPcbHoleParams, type DrawPcbKeepoutParams, type DrawPcbNoteDimensionParams, type DrawPcbNotePathParams, type DrawPcbNoteRectParams, type DrawPcbNoteTextParams, type DrawPcbPanelParams, type DrawPcbPlatedHoleParams, type DrawPcbSilkscreenCircleParams, type DrawPcbSilkscreenLineParams, type DrawPcbSilkscreenOvalParams, 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, drawDimensionLine, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNoteDimension, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbKeepout, drawPcbNoteDimension, drawPcbNotePath, drawPcbNoteRect, drawPcbNoteText, drawPcbPanelElement, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenOval, drawPcbSilkscreenPath, drawPcbSilkscreenPill, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawSoldermaskRingForCircle, drawSoldermaskRingForOval, drawSoldermaskRingForPill, drawSoldermaskRingForRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -1351,6 +1351,40 @@ function drawPcbNoteText(params) {
   });
 }
 
+// lib/drawer/elements/pcb-panel.ts
+function drawPcbPanelElement(params) {
+  const { ctx, panel, realToCanvasMat, colorMap, drawBoardMaterial } = params;
+  const { width, height, center } = panel;
+  if (width !== void 0 && height !== void 0 && center) {
+    if (drawBoardMaterial) {
+      drawRect({
+        ctx,
+        center,
+        width,
+        height,
+        fill: colorMap.substrate,
+        realToCanvasMat
+      });
+    }
+    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,
+      points: corners,
+      stroke: colorMap.boardOutline,
+      strokeWidth: 0.5,
+      realToCanvasMat,
+      closePath: true
+    });
+  }
+}
+
 // lib/drawer/elements/soldermask-margin.ts
 import { applyToPoint as applyToPoint14 } from "transformation-matrix";
 function drawSoldermaskRingForRect(ctx, center, width, height, margin, borderRadius, rotation, realToCanvasMat, soldermaskColor, padColor, asymmetricMargins) {
@@ -3204,6 +3238,16 @@ var CircuitToCanvasDrawer = class {
   }
   drawElements(elements, options = {}) {
     const board = elements.find((el) => el.type === "pcb_board");
+    const panel = elements.find((el) => el.type === "pcb_panel");
+    if (panel) {
+      drawPcbPanelElement({
+        ctx: this.ctx,
+        panel,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+        drawBoardMaterial: options.drawBoardMaterial ?? false
+      });
+    }
     if (board) {
       drawPcbBoard({
         ctx: this.ctx,
@@ -3487,6 +3531,7 @@ export {
   drawPcbNotePath,
   drawPcbNoteRect,
   drawPcbNoteText,
+  drawPcbPanelElement,
   drawPcbPlatedHole,
   drawPcbSilkscreenCircle,
   drawPcbSilkscreenLine,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -15,6 +15,7 @@ import type {
   PcbNotePath,
   PcbNoteRect,
   PcbNoteText,
+  PcbPanel,
   PcbPlatedHole,
   PcbRenderLayer,
   PcbSilkscreenCircle,
@@ -51,6 +52,7 @@ import { drawPcbNoteLine } from "./elements/pcb-note-line"
 import { drawPcbNotePath } from "./elements/pcb-note-path"
 import { drawPcbNoteRect } from "./elements/pcb-note-rect"
 import { drawPcbNoteText } from "./elements/pcb-note-text"
+import { drawPcbPanelElement } from "./elements/pcb-panel"
 import { drawPcbPlatedHole } from "./elements/pcb-plated-hole"
 import { drawPcbSilkscreenCircle } from "./elements/pcb-silkscreen-circle"
 import { drawPcbSilkscreenLine } from "./elements/pcb-silkscreen-line"
@@ -165,14 +167,18 @@ export class CircuitToCanvasDrawer {
     elements: AnyCircuitElement[],
     options: DrawElementsOptions = {},
   ): void {
-    // Find the board element
+    // Find the board or panel element
     const board = elements.find((el) => el.type === "pcb_board") as
       | PcbBoard
       | undefined
+    const panel = elements.find((el) => el.type === "pcb_panel") as
+      | PcbPanel
+      | undefined
 
     // Drawing order:
-    // 1. Board outline (just the outline stroke, no fill)
-    // 2. Copper elements underneath soldermask (pads, copper text)
+    // 1. Panel outline (outer boundary)
+    // 2. Board outline (inner board)
+    // 3. Copper elements underneath soldermask (pads, copper text)
     // 3. Soldermask (covers everything except openings)
     // 4. Silkscreen (on soldermask, under top copper layers)
     // 5. Copper pour and traces (drawn on top of soldermask and silkscreen)
@@ -180,7 +186,18 @@ export class CircuitToCanvasDrawer {
     // 7. Holes and cutouts (punch through everything)
     // 8. Other annotations
 
-    // Step 1: Draw board outline
+    // Step 1: Draw panel outline (outer boundary)
+    if (panel) {
+      drawPcbPanelElement({
+        ctx: this.ctx,
+        panel,
+        realToCanvasMat: this.realToCanvasMat,
+        colorMap: this.colorMap,
+        drawBoardMaterial: options.drawBoardMaterial ?? false,
+      })
+    }
+
+    // Step 2: Draw board outline (inner board, drawn after panel)
     if (board) {
       drawPcbBoard({
         ctx: this.ctx,

package/lib/drawer/elements/index.ts

@@ -19,6 +19,8 @@ export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace"
 
 export { drawPcbBoard, type DrawPcbBoardParams } from "./pcb-board"
 
+export { drawPcbPanelElement, type DrawPcbPanelParams } from "./pcb-panel"
+
 export {
   drawPcbSilkscreenText,
   type DrawPcbSilkscreenTextParams,

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

@@ -0,0 +1,52 @@
+import type { PcbPanel } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { drawPath } from "../shapes/path"
+import { drawRect } from "../shapes/rect"
+import type { CanvasContext, PcbColorMap } from "../types"
+
+export interface DrawPcbPanelParams {
+  ctx: CanvasContext
+  panel: PcbPanel
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+  drawBoardMaterial: boolean
+}
+
+export function drawPcbPanelElement(params: DrawPcbPanelParams): void {
+  const { ctx, panel, realToCanvasMat, colorMap, drawBoardMaterial } = params
+  const { width, height, center } = panel
+
+  // Draw a rectangle
+  if (width !== undefined && height !== undefined && center) {
+    // Draw substrate fill only if drawBoardMaterial is true
+    if (drawBoardMaterial) {
+      drawRect({
+        ctx,
+        center,
+        width,
+        height,
+        fill: colorMap.substrate,
+        realToCanvasMat,
+      })
+    }
+
+    // Always 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,
+      points: corners,
+      stroke: colorMap.boardOutline,
+      strokeWidth: 0.5,
+      realToCanvasMat,
+      closePath: true,
+    })
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/draw-pcb-panel.test.ts

@@ -0,0 +1,115 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { getBoundsOfPcbElements } from "@tscircuit/circuit-json-util"
+import type { AnyCircuitElement } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("drawPcbPanel with board and components", async () => {
+  const elements: AnyCircuitElement[] = [
+    // PANEL - represents the manufacturing panel boundary
+    {
+      type: "pcb_panel" as const,
+      pcb_panel_id: "panel1",
+      center: { x: 100, y: 75 },
+      width: 180,
+      height: 120,
+      covered_with_solder_mask: false,
+    },
+    // BOARD - smaller PCB board inside the panel
+    {
+      type: "pcb_board" as const,
+      pcb_board_id: "board1",
+      center: { x: 75, y: 60 },
+      width: 80,
+      height: 60,
+      thickness: 1.6,
+      num_layers: 2,
+      material: "fr4" as const,
+    },
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad1",
+      shape: "rect" as const,
+      x: 50,
+      y: 45,
+      width: 12,
+      height: 6,
+      layer: "top" as const,
+    },
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad2",
+      shape: "rect" as const,
+      x: 100,
+      y: 45,
+      width: 12,
+      height: 6,
+      layer: "top" as const,
+    },
+    {
+      type: "pcb_trace" as const,
+      pcb_trace_id: "trace1",
+      route: [
+        {
+          route_type: "wire" as const,
+          x: 50,
+          y: 45,
+          width: 2,
+          layer: "top" as const,
+        },
+        {
+          route_type: "wire" as const,
+          x: 75,
+          y: 45,
+          width: 2,
+          layer: "top" as const,
+        },
+        {
+          route_type: "wire" as const,
+          x: 75,
+          y: 75,
+          width: 2,
+          layer: "top" as const,
+        },
+        {
+          route_type: "wire" as const,
+          x: 100,
+          y: 75,
+          width: 2,
+          layer: "top" as const,
+        },
+      ],
+    },
+    {
+      type: "pcb_via" as const,
+      pcb_via_id: "via1",
+      x: 75,
+      y: 60,
+      outer_diameter: 6,
+      hole_diameter: 3,
+      layers: ["top", "bottom"] as ("top" | "bottom")[],
+    },
+  ]
+
+  // Panel is larger than the board (180x120 vs board 80x60)
+  const canvas = createCanvas(800, 600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#000000"
+  ctx.fillRect(0, 0, 800, 600)
+
+  const bounds = getBoundsOfPcbElements(elements)
+  drawer.setCameraBounds({
+    minX: bounds.minX,
+    maxX: bounds.maxX,
+    minY: bounds.minY,
+    maxY: bounds.maxY,
+  })
+
+  drawer.drawElements(elements, { drawBoardMaterial: false })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})