circuit-to-canvas 0.0.7 → 0.0.8

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath } from 'circuit-json';
+import { AnyCircuitElement, PcbPlatedHole, PCBVia, PCBHole, PcbSmtPad, PCBTrace, PcbBoard, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbCutout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNoteText } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -370,4 +370,12 @@ interface DrawPcbFabricationNotePathParams {
 }
 declare function drawPcbFabricationNotePath(params: DrawPcbFabricationNotePathParams): void;
 
-export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, 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 DrawPcbNoteRectParams, 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, drawCircle, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteRect, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };
+interface DrawPcbNoteTextParams {
+    ctx: CanvasContext;
+    text: PcbNoteText;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbNoteText(params: DrawPcbNoteTextParams): void;
+
+export { type AlphabetLayout, type AnchorAlignment, type CameraBounds, type CanvasContext, CircuitToCanvasDrawer, type CopperColorMap, type CopperLayerName, DEFAULT_PCB_COLOR_MAP, 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 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, drawCircle, drawLine, drawOval, drawPath, drawPcbBoard, drawPcbCopperPour, drawPcbCopperText, drawPcbCutout, drawPcbFabricationNotePath, drawPcbFabricationNoteRect, drawPcbFabricationNoteText, drawPcbHole, drawPcbNoteRect, drawPcbNoteText, drawPcbPlatedHole, drawPcbSilkscreenCircle, drawPcbSilkscreenLine, drawPcbSilkscreenPath, drawPcbSilkscreenRect, drawPcbSilkscreenText, drawPcbSmtPad, drawPcbTrace, drawPcbVia, drawPill, drawPolygon, drawRect, drawText, getAlphabetLayout, getTextStartPosition, strokeAlphabetText };

package/dist/index.js

@@ -1096,6 +1096,25 @@ function drawPcbFabricationNotePath(params) {
   }
 }
 
+// lib/drawer/elements/pcb-note-text.ts
+var DEFAULT_NOTE_TEXT_COLOR = "rgb(89, 148, 220)";
+function drawPcbNoteText(params) {
+  const { ctx, text, transform, colorMap } = params;
+  const defaultColor = DEFAULT_NOTE_TEXT_COLOR;
+  const color = text.color ?? defaultColor;
+  const fontSize = text.font_size ?? 1;
+  drawText({
+    ctx,
+    text: text.text ?? "",
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    transform,
+    anchorAlignment: text.anchor_alignment ?? "center"
+  });
+}
+
 // lib/drawer/CircuitToCanvasDrawer.ts
 var CircuitToCanvasDrawer = class {
   ctx;
@@ -1309,6 +1328,14 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_note_text") {
+      drawPcbNoteText({
+        ctx: this.ctx,
+        text: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
   }
 };
 export {
@@ -1327,6 +1354,7 @@ export {
   drawPcbFabricationNoteText,
   drawPcbHole,
   drawPcbNoteRect,
+  drawPcbNoteText,
   drawPcbPlatedHole,
   drawPcbSilkscreenCircle,
   drawPcbSilkscreenLine,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -18,6 +18,7 @@ import type {
   PcbFabricationNoteRect,
   PcbNoteRect,
   PcbFabricationNotePath,
+  PcbNoteText,
 } from "circuit-json"
 import { identity, compose, translate, scale } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
@@ -48,6 +49,7 @@ import { drawPcbFabricationNoteText } from "./elements/pcb-fabrication-note-text
 import { drawPcbFabricationNoteRect } from "./elements/pcb-fabrication-note-rect"
 import { drawPcbNoteRect } from "./elements/pcb-note-rect"
 import { drawPcbFabricationNotePath } from "./elements/pcb-fabrication-note-path"
+import { drawPcbNoteText } from "./elements/pcb-note-text"
 
 export interface DrawElementsOptions {
   layers?: string[]
@@ -307,5 +309,14 @@ export class CircuitToCanvasDrawer {
         colorMap: this.colorMap,
       })
     }
+
+    if (element.type === "pcb_note_text") {
+      drawPcbNoteText({
+        ctx: this.ctx,
+        text: element as PcbNoteText,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
   }
 }

package/lib/drawer/elements/index.ts

@@ -57,3 +57,8 @@ export {
   drawPcbFabricationNotePath,
   type DrawPcbFabricationNotePathParams,
 } from "./pcb-fabrication-note-path"
+
+export {
+  drawPcbNoteText,
+  type DrawPcbNoteTextParams,
+} from "./pcb-note-text"

package/lib/drawer/elements/pcb-note-text.ts

@@ -0,0 +1,34 @@
+import type { PcbNoteText } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawText } from "../shapes/text"
+
+export interface DrawPcbNoteTextParams {
+  ctx: CanvasContext
+  text: PcbNoteText
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+const DEFAULT_NOTE_TEXT_COLOR = "rgb(89, 148, 220)" // Same color as note rect
+
+export function drawPcbNoteText(params: DrawPcbNoteTextParams): void {
+  const { ctx, text, transform, colorMap } = params
+
+  const defaultColor = DEFAULT_NOTE_TEXT_COLOR
+  const color = text.color ?? defaultColor
+  const fontSize = text.font_size ?? 1 // Default to 1mm if not provided
+
+  // Use @tscircuit/alphabet to draw text
+  // Pass real-world coordinates and let drawText apply the transform
+  drawText({
+    ctx,
+    text: text.text ?? "",
+    x: text.anchor_position.x,
+    y: text.anchor_position.y,
+    fontSize,
+    color,
+    transform,
+    anchorAlignment: text.anchor_alignment ?? "center",
+  })
+}

package/package.json

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

package/tests/elements/pcb-note-text-anchor-alignment.test.ts

@@ -0,0 +1,73 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note text with different anchor alignments", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(300 * SCALE, 200 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  // Draw reference lines
+  ctx.strokeStyle = "#444444"
+  ctx.lineWidth = 0.5
+  // Top line
+  ctx.beginPath()
+  ctx.moveTo(10, 50)
+  ctx.lineTo(290, 50)
+  ctx.stroke()
+  // Center/baseline line
+  ctx.beginPath()
+  ctx.moveTo(10, 100)
+  ctx.lineTo(290, 100)
+  ctx.stroke()
+  // Bottom line
+  ctx.beginPath()
+  ctx.moveTo(10, 150)
+  ctx.lineTo(290, 150)
+  ctx.stroke()
+
+  // Test with top_left alignment
+  const textTopLeft: PcbNoteText = {
+    type: "pcb_note_text",
+    pcb_note_text_id: "note-top-left",
+    text: "TOP",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "top_left",
+    font: "tscircuit2024",
+    font_size: 16,
+  }
+
+  // Test with center alignment
+  const textCenter: PcbNoteText = {
+    type: "pcb_note_text",
+    pcb_note_text_id: "note-center",
+    text: "CENTER",
+    anchor_position: { x: 150, y: 100 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 16,
+  }
+
+  // Test with bottom_right alignment
+  const textBottomRight: PcbNoteText = {
+    type: "pcb_note_text",
+    pcb_note_text_id: "note-bottom-right",
+    text: "BOTTOM",
+    anchor_position: { x: 250, y: 150 },
+    anchor_alignment: "bottom_right",
+    font: "tscircuit2024",
+    font_size: 16,
+  }
+
+  drawer.drawElements([textTopLeft, textCenter, textBottomRight])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-text-custom-color.test.ts

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note text with custom color", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(100 * SCALE, 100 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  const text: PcbNoteText = {
+    type: "pcb_note_text",
+    pcb_note_text_id: "note-custom-color",
+    text: "CustYp",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 8,
+    color: "rgba(255, 0, 255, 0.8)",
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-text-small.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note text with small font size", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(100 * SCALE, 100 * SCALE)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(SCALE, SCALE)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, canvas.width / SCALE, canvas.height / SCALE)
+
+  const text: PcbNoteText = {
+    type: "pcb_note_text",
+    pcb_note_text_id: "note-small",
+    text: "SMALL",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 2,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})