circuit-to-canvas 0.0.51 → 0.0.53

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -1,83 +1,83 @@
 import type {
   AnyCircuitElement,
-  PcbPlatedHole,
-  PcbVia,
-  PcbHole,
-  PcbSmtPad,
-  PcbTrace,
-  PcbBoard,
-  PcbSilkscreenText,
-  PcbSilkscreenRect,
-  PcbSilkscreenCircle,
-  PcbSilkscreenLine,
-  PcbSilkscreenOval,
-  PcbSilkscreenPath,
-  PcbSilkscreenPill,
-  PcbCutout,
   PCBKeepout,
+  PcbBoard,
   PcbCopperPour,
   PcbCopperText,
-  PcbFabricationNoteText,
-  PcbFabricationNoteRect,
-  PcbNoteRect,
+  PcbCutout,
+  PcbFabricationNoteDimension,
   PcbFabricationNotePath,
-  PcbNotePath,
-  PcbNoteText,
+  PcbFabricationNoteRect,
+  PcbFabricationNoteText,
+  PcbHole,
   PcbNoteDimension,
-  PcbFabricationNoteDimension,
   PcbNoteLine,
+  PcbNotePath,
+  PcbNoteRect,
+  PcbNoteText,
+  PcbPlatedHole,
   PcbRenderLayer,
+  PcbSilkscreenCircle,
+  PcbSilkscreenLine,
+  PcbSilkscreenOval,
+  PcbSilkscreenPath,
+  PcbSilkscreenPill,
+  PcbSilkscreenRect,
+  PcbSilkscreenText,
+  PcbSmtPad,
+  PcbTrace,
+  PcbVia,
 } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
 import {
-  identity,
+  applyToPoint,
   compose,
-  translate,
+  identity,
   scale,
-  applyToPoint,
+  translate,
 } from "transformation-matrix"
-import { shouldDrawElement } from "./pcb-render-layer-filter"
-import type { Matrix } from "transformation-matrix"
-import {
-  type CanvasContext,
-  type PcbColorMap,
-  type DrawerConfig,
-  type CameraBounds,
-  DEFAULT_PCB_COLOR_MAP,
-} from "./types"
-import { drawPcbPlatedHole } from "./elements/pcb-plated-hole"
-import { drawPcbVia } from "./elements/pcb-via"
-import { drawPcbHole } from "./elements/pcb-hole"
-import { drawPcbSmtPad } from "./elements/pcb-smtpad"
-import { drawPcbTrace } from "./elements/pcb-trace"
 import { drawPcbBoard } from "./elements/pcb-board"
-import { drawPath } from "./shapes/path"
-import { drawRect } from "./shapes/rect"
-import { drawPcbSilkscreenText } from "./elements/pcb-silkscreen-text"
-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 { drawPcbSilkscreenOval } from "./elements/pcb-silkscreen-oval"
-import { drawPcbSilkscreenPill } from "./elements/pcb-silkscreen-pill"
-import { drawPcbCutout } from "./elements/pcb-cutout"
-import { drawPcbKeepout } from "./elements/pcb-keepout"
 import { drawPcbCopperPour } from "./elements/pcb-copper-pour"
 import { drawPcbCopperText } from "./elements/pcb-copper-text"
-import { drawPcbFabricationNoteText } from "./elements/pcb-fabrication-note-text"
-import { drawPcbFabricationNoteRect } from "./elements/pcb-fabrication-note-rect"
-import { drawPcbNoteRect } from "./elements/pcb-note-rect"
+import { drawPcbCutout } from "./elements/pcb-cutout"
+import { drawPcbFabricationNoteDimension } from "./elements/pcb-fabrication-note-dimension"
 import { drawPcbFabricationNotePath } from "./elements/pcb-fabrication-note-path"
-import { drawPcbNotePath } from "./elements/pcb-note-path"
-import { drawPcbNoteText } from "./elements/pcb-note-text"
+import { drawPcbFabricationNoteRect } from "./elements/pcb-fabrication-note-rect"
+import { drawPcbFabricationNoteText } from "./elements/pcb-fabrication-note-text"
+import { drawPcbHole } from "./elements/pcb-hole"
+import { drawPcbKeepout } from "./elements/pcb-keepout"
 import { drawPcbNoteDimension } from "./elements/pcb-note-dimension"
-import { drawPcbFabricationNoteDimension } from "./elements/pcb-fabrication-note-dimension"
 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 { drawPcbPlatedHole } from "./elements/pcb-plated-hole"
+import { drawPcbSilkscreenCircle } from "./elements/pcb-silkscreen-circle"
+import { drawPcbSilkscreenLine } from "./elements/pcb-silkscreen-line"
+import { drawPcbSilkscreenOval } from "./elements/pcb-silkscreen-oval"
+import { drawPcbSilkscreenPath } from "./elements/pcb-silkscreen-path"
+import { drawPcbSilkscreenPill } from "./elements/pcb-silkscreen-pill"
+import { drawPcbSilkscreenRect } from "./elements/pcb-silkscreen-rect"
+import { drawPcbSilkscreenText } from "./elements/pcb-silkscreen-text"
+import { drawPcbSmtPad } from "./elements/pcb-smtpad"
 import { drawPcbSoldermask } from "./elements/pcb-soldermask"
+import { drawPcbTrace } from "./elements/pcb-trace"
+import { drawPcbVia } from "./elements/pcb-via"
+import { shouldDrawElement } from "./pcb-render-layer-filter"
+import {
+  type CameraBounds,
+  type CanvasContext,
+  DEFAULT_PCB_COLOR_MAP,
+  type DrawerConfig,
+  type PcbColorMap,
+} from "./types"
 
 export interface DrawElementsOptions {
   layers?: PcbRenderLayer[]
   /** Whether to render the soldermask layer. Defaults to false. */
-  showSoldermask?: boolean
+  drawSoldermask?: boolean
+  /** Whether to render the board material (substrate fill). Defaults to false. */
+  drawBoardMaterial?: boolean
 }
 
 interface CanvasLike {
@@ -187,6 +187,7 @@ export class CircuitToCanvasDrawer {
         board,
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
+        drawBoardMaterial: options.drawBoardMaterial ?? false,
       })
     }
 
@@ -214,7 +215,7 @@ export class CircuitToCanvasDrawer {
     }
 
     // Step 3: Draw soldermask layer (only if showSoldermask is true)
-    const showSoldermask = options.showSoldermask ?? false
+    const drawSoldermask = options.drawSoldermask ?? false
     if (board) {
       drawPcbSoldermask({
         ctx: this.ctx,
@@ -223,7 +224,7 @@ export class CircuitToCanvasDrawer {
         realToCanvasMat: this.realToCanvasMat,
         colorMap: this.colorMap,
         layer: "top",
-        showSoldermask,
+        drawSoldermask,
       })
     }
 
@@ -328,10 +329,10 @@ export class CircuitToCanvasDrawer {
           hole: element as PcbPlatedHole,
           realToCanvasMat: this.realToCanvasMat,
           colorMap: this.colorMap,
-          soldermaskMargin: showSoldermask
+          soldermaskMargin: drawSoldermask
             ? (element as PcbPlatedHole).soldermask_margin
             : undefined,
-          showSoldermask,
+          drawSoldermask,
         })
       }
 
@@ -355,7 +356,7 @@ export class CircuitToCanvasDrawer {
           hole: element as PcbHole,
           realToCanvasMat: this.realToCanvasMat,
           colorMap: this.colorMap,
-          soldermaskMargin: showSoldermask
+          soldermaskMargin: drawSoldermask
             ? element.soldermask_margin
             : undefined,
         })

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

@@ -1,32 +1,35 @@
 import type { PcbBoard } from "circuit-json"
 import type { Matrix } from "transformation-matrix"
-import type { PcbColorMap, CanvasContext } from "../types"
 import { drawPath } from "../shapes/path"
 import { drawRect } from "../shapes/rect"
+import type { CanvasContext, PcbColorMap } from "../types"
 
 export interface DrawPcbBoardParams {
   ctx: CanvasContext
   board: PcbBoard
   realToCanvasMat: Matrix
   colorMap: PcbColorMap
+  drawBoardMaterial: boolean
 }
 
 export function drawPcbBoard(params: DrawPcbBoardParams): void {
-  const { ctx, board, realToCanvasMat, colorMap } = params
+  const { ctx, board, realToCanvasMat, colorMap, drawBoardMaterial } = params
   const { width, height, center, outline } = board
 
   // If the board has a custom outline, draw substrate and outline
   if (outline && Array.isArray(outline) && outline.length >= 3) {
-    // Draw substrate fill
-    drawPath({
-      ctx,
-      points: outline.map((p) => ({ x: p.x, y: p.y })),
-      fill: colorMap.substrate,
-      realToCanvasMat,
-      closePath: true,
-    })
+    // Draw substrate fill only if drawBoardMaterial is true
+    if (drawBoardMaterial) {
+      drawPath({
+        ctx,
+        points: outline.map((p) => ({ x: p.x, y: p.y })),
+        fill: colorMap.substrate,
+        realToCanvasMat,
+        closePath: true,
+      })
+    }
 
-    // Draw outline stroke
+    // Always draw outline stroke
     drawPath({
       ctx,
       points: outline.map((p) => ({ x: p.x, y: p.y })),
@@ -40,17 +43,19 @@ export function drawPcbBoard(params: DrawPcbBoardParams): void {
 
   // Otherwise draw a rectangle
   if (width !== undefined && height !== undefined && center) {
-    // Draw substrate fill
-    drawRect({
-      ctx,
-      center,
-      width,
-      height,
-      fill: colorMap.substrate,
-      realToCanvasMat,
-    })
+    // Draw substrate fill only if drawBoardMaterial is true
+    if (drawBoardMaterial) {
+      drawRect({
+        ctx,
+        center,
+        width,
+        height,
+        fill: colorMap.substrate,
+        realToCanvasMat,
+      })
+    }
 
-    // Draw the outline stroke separately using path
+    // Always draw the outline stroke separately using path
     const halfWidth = width / 2
     const halfHeight = height / 2
     const corners = [

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

@@ -14,7 +14,7 @@ export interface DrawPcbPlatedHoleParams {
   realToCanvasMat: Matrix
   colorMap: PcbColorMap
   soldermaskMargin?: number
-  showSoldermask?: boolean
+  drawSoldermask?: boolean
 }
 
 export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
@@ -24,13 +24,13 @@ export function drawPcbPlatedHole(params: DrawPcbPlatedHoleParams): void {
     realToCanvasMat,
     colorMap,
     soldermaskMargin = 0,
-    showSoldermask,
+    drawSoldermask,
   } = params
 
   // Skip holes that are fully covered with soldermask when soldermask is enabled,
   // as they should have been handled by soldermask processing.
   // When soldermask is disabled, fully covered holes should be drawn as normal copper.
-  if (hole.is_covered_with_solder_mask === true && showSoldermask) {
+  if (hole.is_covered_with_solder_mask === true && drawSoldermask) {
     return
   }
 

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

@@ -12,7 +12,7 @@ export function processHoleSoldermask(params: {
   realToCanvasMat: Matrix
   colorMap: PcbColorMap
   soldermaskOverCopperColor: string
-  showSoldermask: boolean
+  drawSoldermask: boolean
 }): void {
   const {
     ctx,
@@ -20,13 +20,13 @@ export function processHoleSoldermask(params: {
     realToCanvasMat,
     colorMap,
     soldermaskOverCopperColor,
-    showSoldermask,
+    drawSoldermask,
   } = params
   // When soldermask is disabled, treat all holes as not covered with soldermask
   // and use zero margin (normal rendering)
   const isCoveredWithSoldermask =
-    showSoldermask && hole.is_covered_with_solder_mask === true
-  const margin = showSoldermask ? (hole.soldermask_margin ?? 0) : 0
+    drawSoldermask && hole.is_covered_with_solder_mask === true
+  const margin = drawSoldermask ? (hole.soldermask_margin ?? 0) : 0
 
   if (isCoveredWithSoldermask) {
     // Draw light green over the entire hole

package/lib/drawer/elements/pcb-soldermask/index.ts

@@ -15,7 +15,7 @@ export interface DrawPcbSoldermaskParams {
   realToCanvasMat: Matrix
   colorMap: PcbColorMap
   layer: "top" | "bottom"
-  showSoldermask: boolean
+  drawSoldermask: boolean
 }
 
 /**
@@ -44,7 +44,7 @@ export function drawPcbSoldermask(params: DrawPcbSoldermaskParams): void {
     realToCanvasMat,
     colorMap,
     layer,
-    showSoldermask,
+    drawSoldermask,
   } = params
 
   const soldermaskColor = colorMap.soldermask[layer] ?? colorMap.soldermask.top
@@ -52,7 +52,7 @@ export function drawPcbSoldermask(params: DrawPcbSoldermaskParams): void {
     colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top
 
   // Step 1: Draw the full soldermask covering the board (only if enabled)
-  if (showSoldermask) {
+  if (drawSoldermask) {
     drawBoardSoldermask({ ctx, board, realToCanvasMat, soldermaskColor })
   }
 
@@ -65,7 +65,7 @@ export function drawPcbSoldermask(params: DrawPcbSoldermaskParams): void {
       colorMap,
       soldermaskOverCopperColor,
       layer,
-      showSoldermask,
+      drawSoldermask,
     })
   }
 }
@@ -81,7 +81,7 @@ function processElementSoldermask(params: {
   colorMap: PcbColorMap
   soldermaskOverCopperColor: string
   layer: "top" | "bottom"
-  showSoldermask: boolean
+  drawSoldermask: boolean
 }): void {
   const {
     ctx,
@@ -90,7 +90,7 @@ function processElementSoldermask(params: {
     colorMap,
     soldermaskOverCopperColor,
     layer,
-    showSoldermask,
+    drawSoldermask,
   } = params
 
   if (element.type === "pcb_smtpad") {
@@ -101,7 +101,7 @@ function processElementSoldermask(params: {
       colorMap,
       soldermaskOverCopperColor,
       layer,
-      showSoldermask,
+      drawSoldermask,
     })
   } else if (element.type === "pcb_plated_hole") {
     processPlatedHoleSoldermask({
@@ -111,7 +111,7 @@ function processElementSoldermask(params: {
       colorMap,
       soldermaskOverCopperColor,
       layer,
-      showSoldermask,
+      drawSoldermask,
     })
   } else if (element.type === "pcb_hole") {
     processHoleSoldermask({
@@ -120,7 +120,7 @@ function processElementSoldermask(params: {
       realToCanvasMat,
       colorMap,
       soldermaskOverCopperColor,
-      showSoldermask,
+      drawSoldermask,
     })
   } else if (element.type === "pcb_via") {
     processViaSoldermask({

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

@@ -16,7 +16,7 @@ export function processPlatedHoleSoldermask(params: {
   colorMap: PcbColorMap
   soldermaskOverCopperColor: string
   layer: "top" | "bottom"
-  showSoldermask: boolean
+  drawSoldermask: boolean
 }): void {
   const {
     ctx,
@@ -25,7 +25,7 @@ export function processPlatedHoleSoldermask(params: {
     colorMap,
     soldermaskOverCopperColor,
     layer,
-    showSoldermask,
+    drawSoldermask,
   } = params
   // Check if this hole is on the current layer
   if (hole.layers && !hole.layers.includes(layer)) return
@@ -33,8 +33,8 @@ export function processPlatedHoleSoldermask(params: {
   // When soldermask is disabled, treat all holes as not covered with soldermask
   // and use zero margin (normal rendering)
   const isCoveredWithSoldermask =
-    showSoldermask && hole.is_covered_with_solder_mask === true
-  const margin = showSoldermask ? (hole.soldermask_margin ?? 0) : 0
+    drawSoldermask && hole.is_covered_with_solder_mask === true
+  const margin = drawSoldermask ? (hole.soldermask_margin ?? 0) : 0
   const copperColor = colorMap.copper.top
 
   if (isCoveredWithSoldermask) {

package/lib/drawer/elements/pcb-soldermask/smt-pad.ts

@@ -16,7 +16,7 @@ export function processSmtPadSoldermask(params: {
   colorMap: PcbColorMap
   soldermaskOverCopperColor: string
   layer: "top" | "bottom"
-  showSoldermask: boolean
+  drawSoldermask: boolean
 }): void {
   const {
     ctx,
@@ -25,7 +25,7 @@ export function processSmtPadSoldermask(params: {
     colorMap,
     soldermaskOverCopperColor,
     layer,
-    showSoldermask,
+    drawSoldermask,
   } = params
   // Only process pads on the current layer
   if (pad.layer !== layer) return
@@ -33,8 +33,8 @@ export function processSmtPadSoldermask(params: {
   // When soldermask is disabled, treat all pads as not covered with soldermask
   // and use zero margin (normal rendering)
   const isCoveredWithSoldermask =
-    showSoldermask && pad.is_covered_with_solder_mask === true
-  const margin = showSoldermask ? (pad.soldermask_margin ?? 0) : 0
+    drawSoldermask && pad.is_covered_with_solder_mask === true
+  const margin = drawSoldermask ? (pad.soldermask_margin ?? 0) : 0
 
   // Get asymmetric margins for rect shapes
   let ml = margin

package/lib/drawer/shapes/text/getTextStartPosition.ts

@@ -14,7 +14,11 @@ export function getTextStartPosition(
   let y = 0
 
   // Horizontal alignment
-  if (alignment === "center") {
+  if (
+    alignment === "center" ||
+    alignment === "top_center" ||
+    alignment === "bottom_center"
+  ) {
     x = -totalWidth / 2
   } else if (
     alignment === "top_left" ||
@@ -31,7 +35,11 @@ export function getTextStartPosition(
   }
 
   // Vertical alignment
-  if (alignment === "center") {
+  if (
+    alignment === "center" ||
+    alignment === "center_left" ||
+    alignment === "center_right"
+  ) {
     y = -totalHeight / 2
   } else if (
     alignment === "top_left" ||
@@ -45,8 +53,6 @@ export function getTextStartPosition(
     alignment === "bottom_center"
   ) {
     y = -totalHeight
-  } else {
-    y = 0
   }
 
   return { x, y }

package/package.json

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

package/tests/board-snapshot/usb-c-flashlight-board.test.ts

@@ -9,7 +9,7 @@ test("USB-C flashlight - comprehensive comparison (circuit-to-canvas vs circuit-
   const stackedPng = await getStackedPngSvgComparison(circuitElements, {
     width: 400,
     height: 800,
-    showSoldermask: true,
+    drawSoldermask: true,
   })
 
   await expect(stackedPng).toMatchPngSnapshot(import.meta.path)

package/tests/elements/pcb-board.test.ts

@@ -22,7 +22,7 @@ test("draw rectangular board", async () => {
     material: "fr4",
   }
 
-  drawer.drawElements([board])
+  drawer.drawElements([board], { drawBoardMaterial: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,
@@ -57,7 +57,7 @@ test("draw board with custom outline", async () => {
     ],
   }
 
-  drawer.drawElements([board])
+  drawer.drawElements([board], { drawBoardMaterial: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,

package/tests/elements/pcb-comprehensive-soldermask-margin.test.ts

@@ -1273,7 +1273,7 @@ test("comprehensive soldermask margin test", async () => {
   ]
 
   drawer.setCameraBounds({ minX: -95, maxX: 90, minY: -22, maxY: 22 })
-  drawer.drawElements(circuit, { showSoldermask: true })
+  drawer.drawElements(circuit, { drawSoldermask: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,

package/tests/elements/pcb-hole-soldermask-margin.test.ts

@@ -278,7 +278,7 @@ test("draw holes with positive and negative soldermask margins", async () => {
   ]
 
   drawer.setCameraBounds({ minX: -7, maxX: 7, minY: -5, maxY: 5 })
-  drawer.drawElements(circuit, { showSoldermask: true })
+  drawer.drawElements(circuit, { drawSoldermask: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,

package/tests/elements/pcb-keepout-with-group-id.test.ts

@@ -37,7 +37,7 @@ test("pcb keepout with pcb_group_id and subcircuit_id", async () => {
     },
   ]
 
-  drawer.drawElements(elements)
+  drawer.drawElements(elements, { drawBoardMaterial: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,

package/tests/elements/pcb-plated-hole-soldermask-margin.test.ts

@@ -217,7 +217,7 @@ test("draw plated holes with positive and negative soldermask margins", async ()
   ]
 
   drawer.setCameraBounds({ minX: -8, maxX: 8, minY: -6.5, maxY: 6.5 })
-  drawer.drawElements(circuit, { showSoldermask: true })
+  drawer.drawElements(circuit, { drawSoldermask: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,

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

@@ -34,7 +34,7 @@ test("draw circular plated hole", async () => {
   }
 
   drawer.setCameraBounds({ minX: 0, maxX: 100, minY: 0, maxY: 100 })
-  drawer.drawElements([board, hole])
+  drawer.drawElements([board, hole], { drawBoardMaterial: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,
@@ -75,7 +75,7 @@ test("draw oval plated hole", async () => {
   }
 
   drawer.setCameraBounds({ minX: 0, maxX: 100, minY: 0, maxY: 100 })
-  drawer.drawElements([board, hole])
+  drawer.drawElements([board, hole], { drawBoardMaterial: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,
@@ -117,7 +117,7 @@ test("draw pill plated hole", async () => {
   }
 
   drawer.setCameraBounds({ minX: 0, maxX: 100, minY: 0, maxY: 100 })
-  drawer.drawElements([board, hole])
+  drawer.drawElements([board, hole], { drawBoardMaterial: true })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
     import.meta.path,