circuit-to-canvas 0.0.17 → 0.0.19

package/tests/elements/pcb-note-dimension-angled-and-vertical.test.ts

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - angled", async () => {
+  const width = 240
+  const height = 160
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, width, height)
+
+  const angledDim: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_angled_1",
+    from: { x: 40, y: 120 },
+    to: { x: 200, y: 40 }, // angled up-right
+    arrow_size: 6,
+    font_size: 8,
+    text: "sqrt( (160)^2 + (80)^2 )",
+    font: "tscircuit2024",
+    // slight offset so extension lines are visible and text sits off the line
+    offset_distance: 12,
+  }
+
+  drawer.drawElements([angledDim])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-dimension-basic.test.ts

@@ -0,0 +1,36 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - basic", async () => {
+  const width = 200
+  const height = 100
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  // Use logical dimensions when filling background (canvas is scaled)
+  ctx.fillRect(0, 0, width, height)
+
+  const dim: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_basic_1",
+    from: { x: 20, y: 50 },
+    to: { x: 180, y: 50 },
+    arrow_size: 4,
+    font_size: 6,
+    font: "tscircuit2024",
+    text: "160",
+  }
+
+  drawer.drawElements([dim])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-dimension-vertical.test.ts

@@ -0,0 +1,42 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - vertical with rotation", async () => {
+  const width = 160
+  const height = 240
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, width, height)
+
+  const verticalDim: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_vertical_1",
+    from: { x: 80, y: 40 },
+    to: { x: 80, y: 200 }, // vertical line downwards
+    arrow_size: 6,
+    font_size: 9,
+    text: "160",
+    font: "tscircuit2024",
+    // Provide explicit text rotation (counter-clockwise degrees),
+    // which should align text along the vertical dimension.
+    text_ccw_rotation: 90,
+    // Offset horizontally so the dimension line sits right of the points,
+    // and extension lines from the points are drawn to the dimension line.
+    offset_distance: 14,
+    offset_direction: { x: 1, y: 0 },
+  }
+
+  drawer.drawElements([verticalDim])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/elements/pcb-note-dimension-with-offset.test.ts

@@ -0,0 +1,38 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import type { PcbNoteDimension } from "circuit-json"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw pcb note dimension - with offset", async () => {
+  const width = 200
+  const height = 120
+  const dpr = 2
+  const canvas = createCanvas(width * dpr, height * dpr)
+  const ctx = canvas.getContext("2d")
+  ctx.scale(dpr, dpr)
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Background
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, width, height)
+
+  const dimWithOffset: PcbNoteDimension = {
+    type: "pcb_note_dimension",
+    pcb_note_dimension_id: "note_dimension_offset_1",
+    from: { x: 40, y: 70 },
+    to: { x: 160, y: 70 },
+    arrow_size: 5,
+    font_size: 7,
+    text: "120",
+    font: "tscircuit2024",
+    // Offset the dimension line along a custom direction, ensuring extension lines are drawn
+    offset_distance: 10,
+    offset_direction: { x: 0, y: -1 }, // offset upward by 10 units
+  }
+
+  drawer.drawElements([dimWithOffset])
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/fixtures/getStackedPngSvgComparison.ts

@@ -0,0 +1,62 @@
+import { createCanvas } from "@napi-rs/canvas"
+import type { AnyCircuitElement } from "circuit-json"
+import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
+import type { Bounds } from "@tscircuit/math-utils"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+import { stackPngsVertically, svgToPng } from "./stackPngsVertically"
+import { getBoundsOfPcbElements } from "@tscircuit/circuit-json-util"
+
+export interface StackedPngSvgComparisonOptions {
+  width?: number
+  height?: number
+  padding?: number
+}
+
+/**
+ * Generate a stacked PNG comparison of circuit-to-canvas vs circuit-to-svg rendering.
+ *
+ * @param circuitJson - Array of circuit elements to render
+ * @param options - Optional configuration for width, height, and padding
+ * @returns Promise<Buffer> - Stacked PNG with both renderings labeled
+ */
+export async function getStackedPngSvgComparison(
+  circuitJson: AnyCircuitElement[],
+  options: StackedPngSvgComparisonOptions = {},
+): Promise<Buffer> {
+  const { width = 400, height = 800, padding = 4 } = options
+
+  const bounds = getBoundsOfPcbElements(circuitJson)
+
+  // Generate circuit-to-canvas PNG
+  const canvas = createCanvas(width, height)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#000000"
+  ctx.fillRect(0, 0, width, height)
+
+  drawer.setCameraBounds({
+    minX: bounds.minX,
+    maxX: bounds.maxX,
+    minY: bounds.minY,
+    maxY: bounds.maxY,
+  })
+  drawer.drawElements(circuitJson)
+
+  const canvasPng = canvas.toBuffer("image/png")
+
+  // Generate circuit-to-svg PNG
+  const svg = convertCircuitJsonToPcbSvg(circuitJson, {
+    width,
+    height,
+  })
+  const svgPng = svgToPng(svg)
+
+  // Stack both PNGs vertically with labels
+  const stackedPng = await stackPngsVertically([
+    { png: canvasPng, label: "circuit-to-canvas" },
+    { png: svgPng, label: "circuit-to-svg" },
+  ])
+
+  return stackedPng
+}

package/tests/fixtures/stackPngsVertically.ts

@@ -0,0 +1,82 @@
+import { createCanvas, loadImage } from "@napi-rs/canvas"
+import { Resvg } from "@resvg/resvg-js"
+import * as fs from "node:fs"
+import * as path from "node:path"
+
+// Pre-generated label PNGs for common labels
+const labelPngCache: Map<string, Buffer> = new Map()
+const assetsDir = path.join(__dirname, "assets")
+
+const getPreGeneratedLabelPng = (label: string): Buffer => {
+  const cacheKey = label
+  if (labelPngCache.has(cacheKey)) {
+    return labelPngCache.get(cacheKey)!
+  }
+
+  const filename = `label-${label}.png`
+  const filepath = path.join(assetsDir, filename)
+  if (fs.existsSync(filepath)) {
+    const png = fs.readFileSync(filepath)
+    labelPngCache.set(cacheKey, png)
+    return png
+  }
+  throw new Error(`Label PNG not found for label: ${label}`)
+}
+
+export const stackPngsVertically = async (
+  pngs: Array<{ png: Buffer; label: string }>,
+): Promise<Buffer> => {
+  if (pngs.length === 0) {
+    throw new Error("No PNGs provided to stack")
+  }
+
+  if (pngs.length === 1) {
+    return pngs[0]!.png
+  }
+
+  // Load all images to get dimensions
+  const images = await Promise.all(
+    pngs.map(async ({ png }) => await loadImage(png)),
+  )
+
+  // Calculate the maximum width and total height
+  const maxWidth = Math.max(...images.map((img) => img.width))
+  const totalHeight = images.reduce((sum, img) => sum + img.height, 0)
+
+  // Create the final canvas
+  const canvas = createCanvas(maxWidth, totalHeight)
+  const ctx = canvas.getContext("2d")
+
+  // Fill with dark background
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, maxWidth, totalHeight)
+
+  // Draw each image and its label
+  let currentY = 0
+  for (let i = 0; i < pngs.length; i++) {
+    const { label } = pngs[i]!
+    const img = images[i]!
+    const width = img.width
+    const height = img.height
+
+    // Center horizontally if image is narrower than max width
+    const left = Math.floor((maxWidth - width) / 2)
+
+    // Draw the image
+    ctx.drawImage(img, left, currentY)
+
+    // Draw the label
+    const labelPng = getPreGeneratedLabelPng(label)
+    const labelImg = await loadImage(labelPng!)
+    ctx.drawImage(labelImg, 0, currentY)
+
+    currentY += height
+  }
+
+  return canvas.toBuffer("image/png")
+}
+
+export const svgToPng = (svg: string): Buffer => {
+  const resvg = new Resvg(svg)
+  return resvg.render().asPng()
+}

package/tsconfig.json

@@ -7,6 +7,7 @@
     "moduleDetection": "force",
     "jsx": "react-jsx",
     "allowJs": true,
+    "resolveJsonModule": true,
 
     // Bundler mode
     "moduleResolution": "bundler",