circuit-to-canvas 0.0.23 → 0.0.25

package/dist/index.d.ts

@@ -216,17 +216,14 @@ interface DrawArrowParams {
  */
 declare function drawArrow(params: DrawArrowParams): void;
 
-type AlphabetLayout = {
-    width: number;
-    height: number;
-    glyphWidth: number;
-    letterSpacing: number;
-    spaceWidth: number;
-    strokeWidth: number;
-};
-declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
-
-declare function strokeAlphabetText(ctx: CanvasContext, text: string, layout: AlphabetLayout, startX: number, startY: number): void;
+interface StrokeAlphabetTextParams {
+    ctx: CanvasContext;
+    text: string;
+    fontSize: number;
+    startX: number;
+    startY: number;
+}
+declare function strokeAlphabetText(params: StrokeAlphabetTextParams): void;
 interface DrawTextParams {
     ctx: CanvasContext;
     text: string;
@@ -240,6 +237,16 @@ interface DrawTextParams {
 }
 declare function drawText(params: DrawTextParams): void;
 
+type AlphabetLayout = {
+    width: number;
+    height: number;
+    glyphWidth: number;
+    letterSpacing: number;
+    spaceWidth: number;
+    strokeWidth: number;
+};
+declare function getAlphabetLayout(text: string, fontSize: number): AlphabetLayout;
+
 type AnchorAlignment = NinePointAnchor;
 declare function getTextStartPosition(alignment: NinePointAnchor, layout: AlphabetLayout): {
     x: number;

package/dist/index.js

@@ -708,7 +708,9 @@ function getTextStartPosition(alignment, layout) {
 
 // lib/drawer/shapes/text/text.ts
 var getGlyphLines = (char) => lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()];
-function strokeAlphabetText(ctx, text, layout, startX, startY) {
+function strokeAlphabetText(params) {
+  const { ctx, text, fontSize, startX, startY } = params;
+  const layout = getAlphabetLayout(text, fontSize);
   const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout;
   const topY = startY;
   const characters = Array.from(text);
@@ -761,7 +763,13 @@ function drawText(params) {
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
   ctx.strokeStyle = color;
-  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y);
+  strokeAlphabetText({
+    ctx,
+    text,
+    fontSize: scaledFontSize,
+    startX: startPos.x,
+    startY: startPos.y
+  });
   ctx.restore();
 }
 
@@ -800,7 +808,13 @@ function drawPcbSilkscreenText(params) {
   ctx.lineCap = "round";
   ctx.lineJoin = "round";
   ctx.strokeStyle = color;
-  strokeAlphabetText(ctx, content, layout, startPos.x, startPos.y);
+  strokeAlphabetText({
+    ctx,
+    text: content,
+    fontSize,
+    startX: startPos.x,
+    startY: startPos.y
+  });
   ctx.restore();
 }
 
@@ -1032,7 +1046,7 @@ function drawPcbCopperText(params) {
     ctx.globalCompositeOperation = "destination-out";
     ctx.fillStyle = "rgba(0,0,0,1)";
     ctx.strokeStyle = "rgba(0,0,0,1)";
-    strokeAlphabetText(ctx, content, layout, startX, startY);
+    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY });
     if (previousCompositeOperation) {
       ctx.globalCompositeOperation = previousCompositeOperation;
     } else {
@@ -1040,7 +1054,7 @@ function drawPcbCopperText(params) {
     }
   } else {
     ctx.strokeStyle = textColor;
-    strokeAlphabetText(ctx, content, layout, startX, startY);
+    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY });
   }
   ctx.restore();
 }

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

@@ -88,7 +88,7 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
     ctx.globalCompositeOperation = "destination-out"
     ctx.fillStyle = "rgba(0,0,0,1)"
     ctx.strokeStyle = "rgba(0,0,0,1)"
-    strokeAlphabetText(ctx, content, layout, startX, startY)
+    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY })
     if (previousCompositeOperation) {
       ctx.globalCompositeOperation = previousCompositeOperation
     } else {
@@ -96,7 +96,7 @@ export function drawPcbCopperText(params: DrawPcbCopperTextParams): void {
     }
   } else {
     ctx.strokeStyle = textColor
-    strokeAlphabetText(ctx, content, layout, startX, startY)
+    strokeAlphabetText({ ctx, text: content, fontSize, startX, startY })
   }
   ctx.restore()
 }

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

@@ -65,7 +65,13 @@ export function drawPcbSilkscreenText(
   ctx.lineJoin = "round"
   ctx.strokeStyle = color
 
-  strokeAlphabetText(ctx, content, layout, startPos.x, startPos.y)
+  strokeAlphabetText({
+    ctx,
+    text: content,
+    fontSize,
+    startX: startPos.x,
+    startY: startPos.y,
+  })
 
   ctx.restore()
 }

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

@@ -9,13 +9,17 @@ import { getTextStartPosition } from "./getTextStartPosition"
 const getGlyphLines = (char: string) =>
   lineAlphabet[char] ?? lineAlphabet[char.toUpperCase()]
 
-export function strokeAlphabetText(
-  ctx: CanvasContext,
-  text: string,
-  layout: AlphabetLayout,
-  startX: number,
-  startY: number,
-): void {
+export interface StrokeAlphabetTextParams {
+  ctx: CanvasContext
+  text: string
+  fontSize: number
+  startX: number
+  startY: number
+}
+
+export function strokeAlphabetText(params: StrokeAlphabetTextParams): void {
+  const { ctx, text, fontSize, startX, startY } = params
+  const layout = getAlphabetLayout(text, fontSize)
   const { glyphWidth, letterSpacing, spaceWidth, height, strokeWidth } = layout
   const topY = startY
   const characters = Array.from(text)
@@ -92,7 +96,13 @@ export function drawText(params: DrawTextParams): void {
   ctx.lineJoin = "round"
   ctx.strokeStyle = color
 
-  strokeAlphabetText(ctx, text, layout, startPos.x, startPos.y)
+  strokeAlphabetText({
+    ctx,
+    text,
+    fontSize: scaledFontSize,
+    startX: startPos.x,
+    startY: startPos.y,
+  })
 
   ctx.restore()
 }

package/package.json

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

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

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenCircle } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen circle", 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 circle: PcbSilkscreenCircle = {
+    type: "pcb_silkscreen_circle",
+    pcb_silkscreen_circle_id: "circle1",
+    pcb_component_id: "component1",
+    layer: "top",
+    center: { x: 50, y: 50 },
+    radius: 20,
+    stroke_width: 0.2,
+  }
+
+  drawer.drawElements([circle])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenLine } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen line", 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: PcbSilkscreenLine = {
+    type: "pcb_silkscreen_line",
+    pcb_silkscreen_line_id: "line1",
+    pcb_component_id: "component1",
+    layer: "top",
+    x1: 20,
+    y1: 20,
+    x2: 80,
+    y2: 80,
+    stroke_width: 2,
+  }
+
+  drawer.drawElements([line])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,75 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen on component", async () => {
+  const canvas = createCanvas(150, 100)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 150, 100)
+
+  const elements = [
+    // Component outline
+    {
+      type: "pcb_silkscreen_rect" as const,
+      pcb_silkscreen_rect_id: "outline1",
+      pcb_component_id: "component1",
+      layer: "top" as const,
+      center: { x: 75, y: 50 },
+      width: 60,
+      height: 30,
+      stroke_width: 0.2,
+    },
+    // Pin 1 indicator
+    {
+      type: "pcb_silkscreen_circle" as const,
+      pcb_silkscreen_circle_id: "pin1marker",
+      pcb_component_id: "component1",
+      layer: "top" as const,
+      center: { x: 55, y: 40 },
+      radius: 3,
+      stroke_width: 0.2,
+    },
+    // Component label
+    {
+      type: "pcb_silkscreen_text" as const,
+      pcb_silkscreen_text_id: "label1",
+      pcb_component_id: "component1",
+      layer: "top" as const,
+      text: "IC1",
+      anchor_position: { x: 75, y: 50 },
+      anchor_alignment: "center" as const,
+      font: "tscircuit2024" as const,
+      font_size: 8,
+    },
+    // SMT pads
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad1",
+      shape: "rect" as const,
+      x: 55,
+      y: 50,
+      width: 10,
+      height: 5,
+      layer: "top" as const,
+    },
+    {
+      type: "pcb_smtpad" as const,
+      pcb_smtpad_id: "pad2",
+      shape: "rect" as const,
+      x: 95,
+      y: 50,
+      width: 10,
+      height: 5,
+      layer: "top" as const,
+    },
+  ]
+
+  drawer.drawElements(elements)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenPath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen 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: PcbSilkscreenPath = {
+    type: "pcb_silkscreen_path",
+    pcb_silkscreen_path_id: "path1",
+    pcb_component_id: "component1",
+    layer: "top",
+    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-silkscreen-rect.test.ts

@@ -0,0 +1,30 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen rect", 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 rect: PcbSilkscreenRect = {
+    type: "pcb_silkscreen_rect",
+    pcb_silkscreen_rect_id: "rect1",
+    pcb_component_id: "component1",
+    layer: "top",
+    center: { x: 50, y: 50 },
+    width: 40,
+    height: 20,
+    stroke_width: 0.2,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-silkscreen-text-bottom-rotated.test.ts

@@ -0,0 +1,84 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen text bottom layer with rotation - tests transform order", async () => {
+  const canvas = createCanvas(150, 150)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 150, 150)
+
+  // This test verifies the transform order (translate -> rotate -> scale) is correct
+  // by testing bottom layer text with various rotations
+  const texts: PcbSilkscreenText[] = [
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text1",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "0",
+      anchor_position: { x: 75, y: 30 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 0,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "90",
+      anchor_position: { x: 120, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 90,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text3",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "180",
+      anchor_position: { x: 75, y: 120 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 180,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text4",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "270",
+      anchor_position: { x: 30, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      ccw_rotation: 270,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text5",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "BTM",
+      anchor_position: { x: 75, y: 75 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+      ccw_rotation: 45,
+    },
+  ]
+
+  drawer.drawElements(texts)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen text bottom layer", 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 text: PcbSilkscreenText = {
+    type: "pcb_silkscreen_text",
+    pcb_silkscreen_text_id: "text1",
+    pcb_component_id: "component1",
+    layer: "bottom",
+    text: "BOTTOM",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 8,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen text with rotation", 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 text: PcbSilkscreenText = {
+    type: "pcb_silkscreen_text",
+    pcb_silkscreen_text_id: "text1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "ROT45",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 8,
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSilkscreenText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw silkscreen text", 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 text: PcbSilkscreenText = {
+    type: "pcb_silkscreen_text",
+    pcb_silkscreen_text_id: "text1",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "U1",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 8,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,30 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSmtPad } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw bottom layer smt pad", 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 pad: PcbSmtPad = {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pad1",
+    shape: "rect",
+    x: 50,
+    y: 50,
+    width: 40,
+    height: 20,
+    layer: "bottom",
+  }
+
+  drawer.drawElements([pad])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSmtPad } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw circular smt pad", 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 pad: PcbSmtPad = {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pad1",
+    shape: "circle",
+    x: 50,
+    y: 50,
+    radius: 20,
+    layer: "top",
+  }
+
+  drawer.drawElements([pad])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,31 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbSmtPad } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pill smt pad", 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 pad: PcbSmtPad = {
+    type: "pcb_smtpad",
+    pcb_smtpad_id: "pad1",
+    shape: "pill",
+    x: 50,
+    y: 50,
+    width: 50,
+    height: 25,
+    radius: 12.5,
+    layer: "top",
+  }
+
+  drawer.drawElements([pad])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})