circuit-to-canvas 0.0.7 → 0.0.9

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, PcbNotePath, PcbNoteText } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -370,4 +370,20 @@ 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 DrawPcbNotePathParams {
+    ctx: CanvasContext;
+    path: PcbNotePath;
+    transform: Matrix;
+    colorMap: PcbColorMap;
+}
+declare function drawPcbNotePath(params: DrawPcbNotePathParams): void;
+
+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 DrawPcbNotePathParams, 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, drawPcbNotePath, 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,46 @@ function drawPcbFabricationNotePath(params) {
   }
 }
 
+// lib/drawer/elements/pcb-note-path.ts
+function drawPcbNotePath(params) {
+  const { ctx, path, transform, colorMap } = params;
+  const defaultColor = "rgb(89, 148, 220)";
+  const color = path.color ?? defaultColor;
+  if (!path.route || path.route.length < 2) return;
+  for (let i = 0; i < path.route.length - 1; i++) {
+    const start = path.route[i];
+    const end = path.route[i + 1];
+    if (!start || !end) continue;
+    drawLine({
+      ctx,
+      start: { x: start.x, y: start.y },
+      end: { x: end.x, y: end.y },
+      strokeWidth: path.stroke_width ?? 0.1,
+      stroke: color,
+      transform
+    });
+  }
+}
+
+// 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 +1349,22 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_note_path") {
+      drawPcbNotePath({
+        ctx: this.ctx,
+        path: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
+    if (element.type === "pcb_note_text") {
+      drawPcbNoteText({
+        ctx: this.ctx,
+        text: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
   }
 };
 export {
@@ -1326,7 +1382,9 @@ export {
   drawPcbFabricationNoteRect,
   drawPcbFabricationNoteText,
   drawPcbHole,
+  drawPcbNotePath,
   drawPcbNoteRect,
+  drawPcbNoteText,
   drawPcbPlatedHole,
   drawPcbSilkscreenCircle,
   drawPcbSilkscreenLine,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -18,6 +18,8 @@ import type {
   PcbFabricationNoteRect,
   PcbNoteRect,
   PcbFabricationNotePath,
+  PcbNotePath,
+  PcbNoteText,
 } from "circuit-json"
 import { identity, compose, translate, scale } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
@@ -48,6 +50,8 @@ 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 { drawPcbNotePath } from "./elements/pcb-note-path"
+import { drawPcbNoteText } from "./elements/pcb-note-text"
 
 export interface DrawElementsOptions {
   layers?: string[]
@@ -307,5 +311,23 @@ export class CircuitToCanvasDrawer {
         colorMap: this.colorMap,
       })
     }
+
+    if (element.type === "pcb_note_path") {
+      drawPcbNotePath({
+        ctx: this.ctx,
+        path: element as PcbNotePath,
+        transform: this.realToCanvasMat,
+        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,13 @@ export {
   drawPcbFabricationNotePath,
   type DrawPcbFabricationNotePathParams,
 } from "./pcb-fabrication-note-path"
+
+export {
+  drawPcbNotePath,
+  type DrawPcbNotePathParams,
+} from "./pcb-note-path"
+
+export {
+  drawPcbNoteText,
+  type DrawPcbNoteTextParams,
+} from "./pcb-note-text"

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

@@ -0,0 +1,39 @@
+import type { PcbNotePath } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+import { drawLine } from "../shapes/line"
+
+export interface DrawPcbNotePathParams {
+  ctx: CanvasContext
+  path: PcbNotePath
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbNotePath(params: DrawPcbNotePathParams): void {
+  const { ctx, path, transform, colorMap } = params
+
+  // Use the color from the path if provided, otherwise use a default color
+  // Notes are typically shown in a distinct color
+  const defaultColor = "rgb(89, 148, 220)" // Blue color for notes
+  const color = path.color ?? defaultColor
+
+  if (!path.route || path.route.length < 2) return
+
+  // Draw each segment of the path
+  for (let i = 0; i < path.route.length - 1; i++) {
+    const start = path.route[i]
+    const end = path.route[i + 1]
+
+    if (!start || !end) continue
+
+    drawLine({
+      ctx,
+      start: { x: start.x, y: start.y },
+      end: { x: end.x, y: end.y },
+      strokeWidth: path.stroke_width ?? 0.1,
+      stroke: color,
+      transform,
+    })
+  }
+}

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.9",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/pcb-note-path.test.ts

@@ -0,0 +1,34 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNotePath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note path", 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 path: PcbNotePath = {
+    type: "pcb_note_path",
+    pcb_note_path_id: "note_path1",
+    route: [
+      { x: 10, y: 50 },
+      { x: 30, y: 20 },
+      { x: 70, y: 20 },
+      { x: 90, y: 50 },
+      { x: 70, y: 80 },
+      { x: 30, y: 80 },
+      { x: 10, y: 50 },
+    ],
+    stroke_width: 2,
+  }
+
+  drawer.drawElements([path])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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