circuit-to-canvas 0.0.12 → 0.0.14

package/dist/index.js

@@ -1119,6 +1119,33 @@ function drawPcbNoteText(params) {
   });
 }
 
+// lib/drawer/elements/pcb-note-line.ts
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+function drawPcbNoteLine(params) {
+  const { ctx, line, transform, colorMap } = params;
+  const defaultColor = "rgb(89, 148, 220)";
+  const color = line.color ?? defaultColor;
+  const strokeWidth = line.stroke_width ?? 0.1;
+  const isDashed = line.is_dashed ?? false;
+  const [x1, y1] = applyToPoint12(transform, [line.x1, line.y1]);
+  const [x2, y2] = applyToPoint12(transform, [line.x2, line.y2]);
+  const scaledStrokeWidth = strokeWidth * Math.abs(transform.a);
+  ctx.save();
+  if (isDashed) {
+    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2]);
+  } else {
+    ctx.setLineDash([]);
+  }
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.lineWidth = scaledStrokeWidth;
+  ctx.strokeStyle = color;
+  ctx.lineCap = "round";
+  ctx.stroke();
+  ctx.restore();
+}
+
 // lib/drawer/CircuitToCanvasDrawer.ts
 var CircuitToCanvasDrawer = class {
   ctx;
@@ -1348,6 +1375,14 @@ var CircuitToCanvasDrawer = class {
         colorMap: this.colorMap
       });
     }
+    if (element.type === "pcb_note_line") {
+      drawPcbNoteLine({
+        ctx: this.ctx,
+        line: element,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap
+      });
+    }
   }
 };
 export {

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -20,6 +20,7 @@ import type {
   PcbFabricationNotePath,
   PcbNotePath,
   PcbNoteText,
+  PcbNoteLine,
 } from "circuit-json"
 import { identity, compose, translate, scale } from "transformation-matrix"
 import type { Matrix } from "transformation-matrix"
@@ -52,6 +53,7 @@ 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"
+import { drawPcbNoteLine } from "./elements/pcb-note-line"
 
 export interface DrawElementsOptions {
   layers?: string[]
@@ -329,5 +331,14 @@ export class CircuitToCanvasDrawer {
         colorMap: this.colorMap,
       })
     }
+
+    if (element.type === "pcb_note_line") {
+      drawPcbNoteLine({
+        ctx: this.ctx,
+        line: element as PcbNoteLine,
+        transform: this.realToCanvasMat,
+        colorMap: this.colorMap,
+      })
+    }
   }
 }

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

@@ -0,0 +1,46 @@
+import type { PcbNoteLine } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { applyToPoint } from "transformation-matrix"
+import type { PcbColorMap, CanvasContext } from "../types"
+
+export interface DrawPcbNoteLineParams {
+  ctx: CanvasContext
+  line: PcbNoteLine
+  transform: Matrix
+  colorMap: PcbColorMap
+}
+
+export function drawPcbNoteLine(params: DrawPcbNoteLineParams): void {
+  const { ctx, line, transform, colorMap } = params
+
+  // Use the color from the line 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 = line.color ?? defaultColor
+
+  const strokeWidth = line.stroke_width ?? 0.1
+  const isDashed = line.is_dashed ?? false
+
+  const [x1, y1] = applyToPoint(transform, [line.x1, line.y1])
+  const [x2, y2] = applyToPoint(transform, [line.x2, line.y2])
+  const scaledStrokeWidth = strokeWidth * Math.abs(transform.a)
+
+  ctx.save()
+
+  // Set up dashed line if needed
+  if (isDashed) {
+    ctx.setLineDash([scaledStrokeWidth * 2, scaledStrokeWidth * 2])
+  } else {
+    ctx.setLineDash([])
+  }
+
+  ctx.beginPath()
+  ctx.moveTo(x1, y1)
+  ctx.lineTo(x2, y2)
+  ctx.lineWidth = scaledStrokeWidth
+  ctx.strokeStyle = color
+  ctx.lineCap = "round"
+  ctx.stroke()
+
+  ctx.restore()
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -10,13 +10,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.8",
+    "@napi-rs/canvas": "^0.1.84",
     "@resvg/resvg-js": "^2.6.2",
     "@tscircuit/alphabet": "^0.0.9",
     "@tscircuit/circuit-json-util": "^0.0.73",
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.14",
-    "canvas": "^3.2.0",
     "circuit-json": "^0.0.335",
     "circuit-json-to-connectivity-map": "^0.0.23",
     "circuit-to-svg": "^0.0.297",

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbBoard } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-copper-pour.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbCopperPour } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-copper-text.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbCopperText } from "circuit-json"
 import { scale } from "transformation-matrix"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbCutout } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNotePath } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-fabrication-note-path-thick-stroke.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNotePath } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNotePath } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-fabrication-note-rect-all-features.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-fabrication-note-rect-corner-radius.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-fabrication-note-rect-dashed.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-fabrication-note-rect-default-color.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-fabrication-note-text-descenders.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteText } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-fabrication-note-text-full-charset.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteText } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteText } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbFabricationNoteText } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PCBHole } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-note-line-all-features.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteLine } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note line with all features", 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 line: PcbNoteLine = {
+    type: "pcb_note_line",
+    pcb_note_line_id: "note_line1",
+    pcb_component_id: "component1",
+    pcb_group_id: "group1",
+    subcircuit_id: "subcircuit1",
+    name: "Test Note Line",
+    text: "This is a test note line",
+    x1: 10,
+    y1: 10,
+    x2: 90,
+    y2: 90,
+    stroke_width: 2,
+    color: "#00FFFF", // Cyan color
+    is_dashed: true,
+  }
+
+  drawer.drawElements([line])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,30 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteLine } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note line with custom color", 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 line: PcbNoteLine = {
+    type: "pcb_note_line",
+    pcb_note_line_id: "note_line_custom_color",
+    x1: 10,
+    y1: 10,
+    x2: 90,
+    y2: 90,
+    stroke_width: 2,
+    color: "rgba(255, 0, 255, 0.8)", // Magenta with transparency
+  }
+
+  drawer.drawElements([line])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-line-dashed.test.ts

@@ -0,0 +1,30 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteLine } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note line with dashed stroke", 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 line: PcbNoteLine = {
+    type: "pcb_note_line",
+    pcb_note_line_id: "note_line_dashed",
+    x1: 10,
+    y1: 50,
+    x2: 90,
+    y2: 50,
+    stroke_width: 2,
+    is_dashed: true,
+  }
+
+  drawer.drawElements([line])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbNotePath } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-note-rect-all-features.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-note-rect-dashed-stroke.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/elements/pcb-note-rect-filled-no-stroke.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbNoteRect } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbNoteText } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbNoteText } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbNoteText } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbPlatedHole } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type {
   PcbSilkscreenText,
   PcbSilkscreenRect,

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PcbSmtPad } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PCBTrace } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

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

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import type { PCBVia } from "circuit-json"
 import { CircuitToCanvasDrawer } from "../../lib/drawer"
 

package/tests/shapes/circle.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import { identity } from "transformation-matrix"
 import { drawCircle } from "../../lib/drawer/shapes/circle"
 

package/tests/shapes/oval.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import { identity } from "transformation-matrix"
 import { drawOval } from "../../lib/drawer/shapes/oval"
 

package/tests/shapes/pill.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import { identity } from "transformation-matrix"
 import { drawPill } from "../../lib/drawer/shapes/pill"
 

package/tests/shapes/rect.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test"
-import { createCanvas } from "canvas"
+import { createCanvas } from "@napi-rs/canvas"
 import { identity } from "transformation-matrix"
 import { drawRect } from "../../lib/drawer/shapes/rect"