circuit-to-canvas 0.0.17 → 0.0.18

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",