circuit-to-canvas 0.0.1 → 0.0.2

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

@@ -0,0 +1,120 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbCopperPour } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw rectangular copper pour", 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 pour: PcbCopperPour = {
+    type: "pcb_copper_pour",
+    pcb_copper_pour_id: "pour1",
+    shape: "rect",
+    layer: "top",
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    covered_with_solder_mask: false,
+  }
+
+  drawer.drawElements([pour])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw polygon copper pour", 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 pour: PcbCopperPour = {
+    type: "pcb_copper_pour",
+    pcb_copper_pour_id: "pour1",
+    shape: "polygon",
+    layer: "bottom",
+    points: [
+      { x: 10, y: 10 },
+      { x: 90, y: 10 },
+      { x: 90, y: 90 },
+      { x: 10, y: 90 },
+    ],
+    covered_with_solder_mask: false,
+  }
+
+  drawer.drawElements([pour])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "polygon-copper-pour",
+  )
+})
+
+test("draw copper pour with trace", 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 elements = [
+    {
+      type: "pcb_copper_pour" as const,
+      pcb_copper_pour_id: "pour1",
+      shape: "polygon" as const,
+      layer: "top" as const,
+      points: [
+        { x: 10, y: 10 },
+        { x: 90, y: 10 },
+        { x: 90, y: 90 },
+        { x: 10, y: 90 },
+      ],
+    },
+    {
+      type: "pcb_trace" as const,
+      pcb_trace_id: "trace1",
+      route: [
+        {
+          route_type: "wire" as const,
+          x: 20,
+          y: 50,
+          width: 5,
+          layer: "top" as const,
+        },
+        {
+          route_type: "wire" as const,
+          x: 80,
+          y: 50,
+          width: 5,
+          layer: "top" as const,
+        },
+      ],
+    },
+    {
+      type: "pcb_via" as const,
+      pcb_via_id: "via1",
+      x: 50,
+      y: 50,
+      outer_diameter: 15,
+      hole_diameter: 8,
+      layers: ["top", "bottom"],
+    },
+  ]
+
+  drawer.drawElements(elements)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "copper-pour-with-trace",
+  )
+})

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

@@ -0,0 +1,82 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbCutout } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw rectangular cutout", 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 cutout: PcbCutout = {
+    type: "pcb_cutout",
+    pcb_cutout_id: "cutout1",
+    shape: "rect",
+    center: { x: 50, y: 50 },
+    width: 30,
+    height: 20,
+  }
+
+  drawer.drawElements([cutout])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw circular cutout", 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 cutout: PcbCutout = {
+    type: "pcb_cutout",
+    pcb_cutout_id: "cutout1",
+    shape: "circle",
+    center: { x: 50, y: 50 },
+    radius: 20,
+  }
+
+  drawer.drawElements([cutout])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "circular-cutout",
+  )
+})
+
+test("draw polygon cutout", 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 cutout: PcbCutout = {
+    type: "pcb_cutout",
+    pcb_cutout_id: "cutout1",
+    shape: "polygon",
+    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([cutout])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "polygon-cutout",
+  )
+})

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

@@ -0,0 +1,105 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PCBHole } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw circular hole", 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 hole: PCBHole = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "circle",
+    hole_diameter: 30,
+    x: 50,
+    y: 50,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw square hole", 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 hole: PCBHole = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "square",
+    hole_diameter: 30,
+    x: 50,
+    y: 50,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "square-hole",
+  )
+})
+
+test("draw oval hole", 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 hole: PCBHole = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "oval",
+    hole_width: 50,
+    hole_height: 30,
+    x: 50,
+    y: 50,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "oval-hole",
+  )
+})
+
+test("draw pill hole", 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 hole: PCBHole = {
+    type: "pcb_hole",
+    pcb_hole_id: "hole1",
+    hole_shape: "pill",
+    hole_width: 60,
+    hole_height: 30,
+    x: 50,
+    y: 50,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "pill-hole",
+  )
+})

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

@@ -0,0 +1,245 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type {
+  PcbSilkscreenText,
+  PcbSilkscreenRect,
+  PcbSilkscreenCircle,
+  PcbSilkscreenLine,
+  PcbSilkscreenPath,
+} 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,
+  )
+})
+
+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,
+    "silkscreen-text-bottom",
+  )
+})
+
+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,
+    "silkscreen-rect",
+  )
+})
+
+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,
+    "silkscreen-circle",
+  )
+})
+
+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,
+    "silkscreen-line",
+  )
+})
+
+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,
+    "silkscreen-path",
+  )
+})
+
+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",
+      layer: "top" as const,
+      center: { x: 75, y: 50 },
+      width: 60,
+      height: 30,
+    },
+    // Pin 1 indicator
+    {
+      type: "pcb_silkscreen_circle" as const,
+      pcb_silkscreen_circle_id: "pin1marker",
+      layer: "top" as const,
+      center: { x: 55, y: 40 },
+      radius: 3,
+    },
+    // Component label
+    {
+      type: "pcb_silkscreen_text" as const,
+      pcb_silkscreen_text_id: "label1",
+      layer: "top" as const,
+      text: "IC1",
+      anchor_position: { x: 75, y: 50 },
+      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,
+    "silkscreen-on-component",
+  )
+})