circuit-to-canvas 0.0.3 → 0.0.5

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

@@ -0,0 +1,102 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbCopperText } from "circuit-json"
+import { scale } from "transformation-matrix"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw copper text", 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: PcbCopperText[] = [
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-1",
+      pcb_component_id: "component1",
+      layer: "top",
+      text: "T1",
+      anchor_position: { x: 40, y: 40 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+    },
+
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "T2",
+      anchor_position: { x: 60, y: 60 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 6,
+      is_mirrored: true,
+      ccw_rotation: 90,
+    },
+  ]
+
+  drawer.drawElements(text)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "pcb-copper-text",
+  )
+})
+
+test("draw copper text knockout mirrored with padding", async () => {
+  const SCALE = 4
+  const canvas = createCanvas(100 * SCALE, 60 * 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)
+
+  drawer.realToCanvasMat = scale(2, 2)
+
+  const text: PcbCopperText[] = [
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-2",
+      pcb_component_id: "component1",
+      layer: "bottom",
+      text: "KO1",
+      anchor_position: { x: 25, y: 15 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 10,
+      is_knockout: true,
+      is_mirrored: true,
+    },
+
+    {
+      type: "pcb_copper_text",
+      pcb_copper_text_id: "copper-text-3",
+      pcb_component_id: "component1",
+      layer: "top",
+      text: "KO2",
+      anchor_position: { x: 40, y: 20 },
+      anchor_alignment: "center",
+      font: "tscircuit2024",
+      font_size: 8,
+      is_knockout: true,
+      is_mirrored: false,
+      ccw_rotation: 45,
+    },
+  ]
+
+  drawer.drawElements(text)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "pcb-copper-text-knockout",
+  )
+})

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

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNotePath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note path 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 path: PcbFabricationNotePath = {
+    type: "pcb_fabrication_note_path",
+    pcb_fabrication_note_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,
+    color: "#FF0000", // Red color
+  }
+
+  drawer.drawElements([path])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNotePath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note path with thick 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 path: PcbFabricationNotePath = {
+    type: "pcb_fabrication_note_path",
+    pcb_fabrication_note_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: 5, // Thick stroke
+    color: "#00FFFF", // Cyan color
+  }
+
+  drawer.drawElements([path])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNotePath } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication 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: PcbFabricationNotePath = {
+    type: "pcb_fabrication_note_path",
+    pcb_fabrication_note_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-fabrication-note-rect-all-features.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note rect 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 rect: PcbFabricationNoteRect = {
+    type: "pcb_fabrication_note_rect",
+    pcb_fabrication_note_rect_id: "rect7",
+    pcb_component_id: "component1",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    layer: "top",
+    stroke_width: 2,
+    color: "#00FFFF", // Cyan color
+    corner_radius: 5,
+    is_filled: true,
+    has_stroke: true,
+    is_stroke_dashed: true,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note rect with corner 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 rect: PcbFabricationNoteRect = {
+    type: "pcb_fabrication_note_rect",
+    pcb_fabrication_note_rect_id: "rect5",
+    pcb_component_id: "component1",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    layer: "top",
+    stroke_width: 2,
+    color: "#FFFF00", // Yellow color
+    corner_radius: 5,
+    has_stroke: true,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note rect 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 rect: PcbFabricationNoteRect = {
+    type: "pcb_fabrication_note_rect",
+    pcb_fabrication_note_rect_id: "rect1",
+    pcb_component_id: "component1",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    layer: "top",
+    stroke_width: 2,
+    color: "#FF0000", // Red color
+    has_stroke: true,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note rect 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 rect: PcbFabricationNoteRect = {
+    type: "pcb_fabrication_note_rect",
+    pcb_fabrication_note_rect_id: "rect4",
+    pcb_component_id: "component1",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    layer: "top",
+    stroke_width: 2,
+    color: "#0000FF", // Blue color
+    has_stroke: true,
+    is_stroke_dashed: true,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note rect with default 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 rect: PcbFabricationNoteRect = {
+    type: "pcb_fabrication_note_rect",
+    pcb_fabrication_note_rect_id: "rect2",
+    pcb_component_id: "component1",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    layer: "top",
+    stroke_width: 2,
+    // No color specified - should use default
+    has_stroke: true,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,34 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note text with rgba 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: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-rgba",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "RGBA",
+    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-fabrication-note-text-small.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbFabricationNoteText } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw fabrication note text small 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: PcbFabricationNoteText = {
+    type: "pcb_fabrication_note_text",
+    pcb_fabrication_note_text_id: "fab-note-small",
+    pcb_component_id: "component1",
+    layer: "top",
+    text: "SMAL",
+    anchor_position: { x: 50, y: 50 },
+    anchor_alignment: "center",
+    font: "tscircuit2024",
+    font_size: 16,
+  }
+
+  drawer.drawElements([text])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,38 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note rect 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 rect: PcbNoteRect = {
+    type: "pcb_note_rect",
+    pcb_note_rect_id: "note_rect1",
+    pcb_component_id: "component1",
+    pcb_group_id: "group1",
+    subcircuit_id: "subcircuit1",
+    name: "Test Note",
+    text: "This is a test note",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    stroke_width: 2,
+    corner_radius: 5,
+    is_filled: true,
+    has_stroke: true,
+    is_stroke_dashed: true,
+    color: "#00FFFF", // Cyan color
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note rect with dashed stroke and no fill", 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: PcbNoteRect = {
+    type: "pcb_note_rect",
+    pcb_note_rect_id: "note_rect2",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    stroke_width: 2,
+    is_filled: false,
+    has_stroke: true,
+    is_stroke_dashed: true,
+    color: "#0000FF", // Blue color
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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

@@ -0,0 +1,32 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbNoteRect } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note rect with fill and no 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 rect: PcbNoteRect = {
+    type: "pcb_note_rect",
+    pcb_note_rect_id: "note_rect3",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    stroke_width: 2,
+    corner_radius: 8,
+    is_filled: true,
+    has_stroke: false,
+    is_stroke_dashed: false,
+  }
+
+  drawer.drawElements([rect])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})