circuit-to-canvas 0.0.22 → 0.0.24

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

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

@@ -0,0 +1,34 @@
+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 polygon 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: "polygon",
+    layer: "top",
+    points: [
+      { x: 30, y: 30 },
+      { x: 70, y: 30 },
+      { x: 80, y: 50 },
+      { x: 70, y: 70 },
+      { x: 30, y: 70 },
+      { x: 20, y: 50 },
+    ],
+  }
+
+  drawer.drawElements([pad])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-smtpad-rect-border-radius.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 rectangular smt pad with border radius", 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: "top",
+    rect_border_radius: 5,
+  }
+
+  drawer.drawElements([pad])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-smtpad-rect.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 rectangular 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: "top",
+  }
+
+  drawer.drawElements([pad])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-smtpad-rotated-rect.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 rotated rectangular 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: "rotated_rect",
+    x: 50,
+    y: 50,
+    width: 40,
+    height: 20,
+    layer: "top",
+    ccw_rotation: 45,
+  }
+
+  drawer.drawElements([pad])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -1,186 +0,0 @@
-import type {
-  PcbSilkscreenText,
-  PcbSilkscreenRect,
-  PcbSilkscreenCircle,
-  PcbSilkscreenLine,
-  PcbSilkscreenPath,
-} from "circuit-json"
-import type { Matrix } from "transformation-matrix"
-import { applyToPoint } from "transformation-matrix"
-import type { PcbColorMap, CanvasContext } from "../types"
-import { drawRect } from "../shapes/rect"
-import { drawCircle } from "../shapes/circle"
-import { drawLine } from "../shapes/line"
-import { drawPath } from "../shapes/path"
-import {
-  getAlphabetLayout,
-  strokeAlphabetText,
-  getTextStartPosition,
-  type AnchorAlignment,
-} from "../shapes/text"
-
-export interface DrawPcbSilkscreenTextParams {
-  ctx: CanvasContext
-  text: PcbSilkscreenText
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenRectParams {
-  ctx: CanvasContext
-  rect: PcbSilkscreenRect
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenCircleParams {
-  ctx: CanvasContext
-  circle: PcbSilkscreenCircle
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenLineParams {
-  ctx: CanvasContext
-  line: PcbSilkscreenLine
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-export interface DrawPcbSilkscreenPathParams {
-  ctx: CanvasContext
-  path: PcbSilkscreenPath
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-function layerToSilkscreenColor(layer: string, colorMap: PcbColorMap): string {
-  return layer === "bottom"
-    ? colorMap.silkscreen.bottom
-    : colorMap.silkscreen.top
-}
-
-function mapAnchorAlignment(alignment?: string): AnchorAlignment {
-  if (!alignment) return "center"
-  return alignment as AnchorAlignment
-}
-
-export function drawPcbSilkscreenText(
-  params: DrawPcbSilkscreenTextParams,
-): void {
-  const { ctx, text, realToCanvasMat, colorMap } = params
-
-  const content = text.text ?? ""
-  if (!content) return
-
-  const color = layerToSilkscreenColor(text.layer, colorMap)
-  const [x, y] = applyToPoint(realToCanvasMat, [
-    text.anchor_position.x,
-    text.anchor_position.y,
-  ])
-  const scale = Math.abs(realToCanvasMat.a)
-  const fontSize = (text.font_size ?? 1) * scale
-  const rotation = text.ccw_rotation ?? 0
-
-  const layout = getAlphabetLayout(content, fontSize)
-  const alignment = mapAnchorAlignment(text.anchor_alignment)
-  const startPos = getTextStartPosition(alignment, layout)
-
-  ctx.save()
-  ctx.translate(x, y)
-
-  // Apply rotation (CCW rotation in degrees)
-  if (rotation !== 0) {
-    ctx.rotate(-rotation * (Math.PI / 180))
-  }
-
-  if (text.layer === "bottom") {
-    ctx.scale(-1, 1)
-  }
-
-  ctx.lineWidth = layout.strokeWidth
-  ctx.lineCap = "round"
-  ctx.lineJoin = "round"
-  ctx.strokeStyle = color
-
-  strokeAlphabetText(ctx, content, layout, startPos.x, startPos.y)
-
-  ctx.restore()
-}
-
-export function drawPcbSilkscreenRect(
-  params: DrawPcbSilkscreenRectParams,
-): void {
-  const { ctx, rect, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(rect.layer, colorMap)
-
-  drawRect({
-    ctx,
-    center: rect.center,
-    width: rect.width,
-    height: rect.height,
-    fill: color,
-    realToCanvasMat,
-  })
-}
-
-export function drawPcbSilkscreenCircle(
-  params: DrawPcbSilkscreenCircleParams,
-): void {
-  const { ctx, circle, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(circle.layer, colorMap)
-
-  drawCircle({
-    ctx,
-    center: circle.center,
-    radius: circle.radius,
-    fill: color,
-    realToCanvasMat,
-  })
-}
-
-export function drawPcbSilkscreenLine(
-  params: DrawPcbSilkscreenLineParams,
-): void {
-  const { ctx, line, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(line.layer, colorMap)
-
-  drawLine({
-    ctx,
-    start: { x: line.x1, y: line.y1 },
-    end: { x: line.x2, y: line.y2 },
-    strokeWidth: line.stroke_width ?? 0.1,
-    stroke: color,
-    realToCanvasMat,
-  })
-}
-
-export function drawPcbSilkscreenPath(
-  params: DrawPcbSilkscreenPathParams,
-): void {
-  const { ctx, path, realToCanvasMat, colorMap } = params
-
-  const color = layerToSilkscreenColor(path.layer, colorMap)
-
-  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,
-      realToCanvasMat,
-    })
-  }
-}