circuit-to-canvas 0.0.1

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

@@ -0,0 +1,90 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import type { PcbPlatedHole } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw circular plated 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: PcbPlatedHole = {
+    type: "pcb_plated_hole",
+    pcb_plated_hole_id: "hole1",
+    shape: "circle",
+    x: 50,
+    y: 50,
+    outer_diameter: 50,
+    hole_diameter: 25,
+    layers: ["top", "bottom"],
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw oval plated 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: PcbPlatedHole = {
+    type: "pcb_plated_hole",
+    pcb_plated_hole_id: "hole1",
+    shape: "oval",
+    x: 50,
+    y: 50,
+    outer_width: 60,
+    outer_height: 40,
+    hole_width: 40,
+    hole_height: 20,
+    layers: ["top", "bottom"],
+    ccw_rotation: 0,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "oval-plated-hole",
+  )
+})
+
+test("draw pill plated 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: PcbPlatedHole = {
+    type: "pcb_plated_hole",
+    pcb_plated_hole_id: "hole1",
+    shape: "pill",
+    x: 50,
+    y: 50,
+    outer_width: 70,
+    outer_height: 35,
+    hole_width: 50,
+    hole_height: 20,
+    layers: ["top", "bottom"],
+    ccw_rotation: 0,
+  }
+
+  drawer.drawElements([hole])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "pill-plated-hole",
+  )
+})

package/tests/fixtures/png-matcher.ts

@@ -0,0 +1,159 @@
+import { expect, type MatcherResult } from "bun:test"
+import * as fs from "node:fs"
+import * as path from "node:path"
+import looksSame from "looks-same"
+
+/**
+ * Matcher for PNG snapshot testing with cross-platform tolerance.
+ *
+ * Usage:
+ *   expect(pngBuffer).toMatchPngSnapshot(import.meta.path, "optionalName");
+ */
+async function toMatchPngSnapshot(
+  // biome-ignore lint/suspicious/noExplicitAny: bun doesn't expose
+  this: any,
+  receivedMaybePromise: Buffer | Uint8Array | Promise<Buffer | Uint8Array>,
+  testPathOriginal: string,
+  pngName?: string,
+): Promise<MatcherResult> {
+  const received = await receivedMaybePromise
+  const testPath = testPathOriginal
+    .replace(/\.test\.tsx?$/, "")
+    .replace(/\.test\.ts$/, "")
+  const snapshotDir = path.join(path.dirname(testPath), "__snapshots__")
+  const snapshotName = pngName
+    ? `${pngName}.snap.png`
+    : `${path.basename(testPath)}.snap.png`
+  const filePath = path.join(snapshotDir, snapshotName)
+
+  if (!fs.existsSync(snapshotDir)) {
+    fs.mkdirSync(snapshotDir, { recursive: true })
+  }
+
+  const updateSnapshot =
+    process.argv.includes("--update-snapshots") ||
+    process.argv.includes("-u") ||
+    Boolean(process.env["BUN_UPDATE_SNAPSHOTS"])
+  const forceUpdate = Boolean(process.env["FORCE_BUN_UPDATE_SNAPSHOTS"])
+
+  const fileExists = fs.existsSync(filePath)
+
+  if (!fileExists) {
+    console.log("Writing PNG snapshot to", filePath)
+    fs.writeFileSync(filePath, received)
+    return {
+      message: () => `PNG snapshot created at ${filePath}`,
+      pass: true,
+    }
+  }
+
+  const existingSnapshot = fs.readFileSync(filePath)
+
+  const result: any = await looksSame(
+    Buffer.from(received),
+    Buffer.from(existingSnapshot),
+    {
+      strict: false,
+      tolerance: 5,
+      antialiasingTolerance: 4,
+      ignoreCaret: true,
+      shouldCluster: true,
+      clustersSize: 10,
+    },
+  )
+
+  if (updateSnapshot) {
+    if (!forceUpdate && result.equal) {
+      return {
+        message: () => "PNG snapshot matches",
+        pass: true,
+      }
+    }
+    console.log("Updating PNG snapshot at", filePath)
+    fs.writeFileSync(filePath, received)
+    return {
+      message: () => `PNG snapshot updated at ${filePath}`,
+      pass: true,
+    }
+  }
+
+  if (result.equal) {
+    return {
+      message: () => "PNG snapshot matches",
+      pass: true,
+    }
+  }
+
+  // Calculate diff percentage for cross-platform tolerance
+  if (result.diffBounds) {
+    // Get image dimensions from the PNG buffer
+    const width = existingSnapshot.readUInt32BE(16)
+    const height = existingSnapshot.readUInt32BE(20)
+    const totalPixels = width * height
+
+    const diffArea =
+      (result.diffBounds.right - result.diffBounds.left) *
+      (result.diffBounds.bottom - result.diffBounds.top)
+    const diffPercentage = (diffArea / totalPixels) * 100
+
+    // Allow up to 5% pixel difference for cross-platform rendering variations
+    const ACCEPTABLE_DIFF_PERCENTAGE = 5.0
+
+    if (diffPercentage <= ACCEPTABLE_DIFF_PERCENTAGE) {
+      console.log(
+        `✓ PNG snapshot matches (${diffPercentage.toFixed(3)}% difference, within ${ACCEPTABLE_DIFF_PERCENTAGE}% threshold)`,
+      )
+      return {
+        message: () =>
+          `PNG snapshot matches (${diffPercentage.toFixed(3)}% difference)`,
+        pass: true,
+      }
+    }
+
+    // If difference is too large, create diff image
+    const diffPath = filePath.replace(/\.snap\.png$/, ".diff.png")
+    await looksSame.createDiff({
+      reference: Buffer.from(existingSnapshot),
+      current: Buffer.from(received),
+      diff: diffPath,
+      highlightColor: "#ff00ff",
+    })
+
+    return {
+      message: () =>
+        `PNG snapshot differs by ${diffPercentage.toFixed(3)}% (threshold: ${ACCEPTABLE_DIFF_PERCENTAGE}%). Diff saved at ${diffPath}. Use BUN_UPDATE_SNAPSHOTS=1 to update the snapshot.`,
+      pass: false,
+    }
+  }
+
+  // Fallback if diffBounds isn't available
+  const diffPath = filePath.replace(/\.snap\.png$/, ".diff.png")
+  await looksSame.createDiff({
+    reference: Buffer.from(existingSnapshot),
+    current: Buffer.from(received),
+    diff: diffPath,
+    highlightColor: "#ff00ff",
+  })
+
+  console.log(`📸 Snapshot mismatch (no diff bounds available)`)
+  console.log(`   Diff saved: ${diffPath}`)
+
+  return {
+    message: () => `PNG snapshot does not match. Diff saved at ${diffPath}`,
+    pass: false,
+  }
+}
+
+// Register the matcher globally for Bun's expect
+expect.extend({
+  toMatchPngSnapshot: toMatchPngSnapshot as any,
+})
+
+declare module "bun:test" {
+  interface Matchers<T = unknown> {
+    toMatchPngSnapshot(
+      testPath: string,
+      pngName?: string,
+    ): Promise<MatcherResult>
+  }
+}

package/tests/fixtures/preload.ts

@@ -0,0 +1,2 @@
+import "bun-match-svg"
+import "./png-matcher"

package/tests/shapes/circle.test.ts

@@ -0,0 +1,24 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import { identity } from "transformation-matrix"
+import { drawCircle } from "../../lib/drawer/shapes/circle"
+
+test("draw circle", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  drawCircle({
+    ctx,
+    center: { x: 50, y: 50 },
+    radius: 30,
+    fill: "#ff0000",
+    transform: identity(),
+  })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/shapes/oval.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import { identity } from "transformation-matrix"
+import { drawOval } from "../../lib/drawer/shapes/oval"
+
+test("draw oval", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  drawOval({
+    ctx,
+    center: { x: 50, y: 50 },
+    width: 70,
+    height: 40,
+    fill: "#0000ff",
+    transform: identity(),
+  })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/shapes/pill.test.ts

@@ -0,0 +1,47 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import { identity } from "transformation-matrix"
+import { drawPill } from "../../lib/drawer/shapes/pill"
+
+test("draw horizontal pill", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  drawPill({
+    ctx,
+    center: { x: 50, y: 50 },
+    width: 70,
+    height: 30,
+    fill: "#ff00ff",
+    transform: identity(),
+  })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw vertical pill", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  drawPill({
+    ctx,
+    center: { x: 50, y: 50 },
+    width: 30,
+    height: 70,
+    fill: "#ff00ff",
+    transform: identity(),
+  })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "pill-vertical",
+  )
+})

package/tests/shapes/rect.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "canvas"
+import { identity } from "transformation-matrix"
+import { drawRect } from "../../lib/drawer/shapes/rect"
+
+test("draw rect", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  drawRect({
+    ctx,
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    fill: "#00ff00",
+    transform: identity(),
+  })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})
+
+test("draw rect with border radius", async () => {
+  const canvas = createCanvas(100, 100)
+  const ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 100, 100)
+
+  drawRect({
+    ctx,
+    center: { x: 50, y: 50 },
+    width: 60,
+    height: 40,
+    fill: "#00ff00",
+    transform: identity(),
+    borderRadius: 10,
+  })
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "rect-rounded",
+  )
+})

package/tests/svg.test.ts

@@ -0,0 +1,11 @@
+import { expect, test } from "bun:test"
+
+const testSvg = `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">                                       
+   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />                                            
+ </svg>`
+
+test("svg snapshot example", async () => {
+  // First run will create the snapshot
+  // Subsequent runs will compare against the saved snapshot
+  await expect(testSvg).toMatchSvgSnapshot(import.meta.path)
+})

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  },
+  "include": ["lib/**/*", "tests/**/*"],
+  "exclude": ["node_modules", "circuit-to-svg"]
+}