circuit-to-canvas 0.0.30 → 0.0.32

package/lib/drawer/elements/soldermask-margin.ts

@@ -0,0 +1,266 @@
+import type { Matrix } from "transformation-matrix"
+import type { CanvasContext } from "../types"
+import { applyToPoint } from "transformation-matrix"
+
+/**
+ * Draws a soldermask ring for rectangular shapes with negative margin
+ * (soldermask appears inside the pad boundary)
+ */
+export function drawSoldermaskRingForRect(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  width: number,
+  height: number,
+  margin: number,
+  borderRadius: number,
+  rotation: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  padColor: string,
+): void {
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledWidth = width * Math.abs(realToCanvasMat.a)
+  const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a)
+  const scaledRadius = borderRadius * Math.abs(realToCanvasMat.a)
+
+  ctx.save()
+  ctx.translate(cx, cy)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  // For negative margins, outer is pad boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the pad
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer rectangle filled (at pad boundary)
+  const outerWidth = scaledWidth
+  const outerHeight = scaledHeight
+  const outerRadius = scaledRadius
+
+  ctx.beginPath()
+  if (outerRadius > 0) {
+    const x = -outerWidth / 2
+    const y = -outerHeight / 2
+    const r = Math.min(outerRadius, outerWidth / 2, outerHeight / 2)
+
+    ctx.moveTo(x + r, y)
+    ctx.lineTo(x + outerWidth - r, y)
+    ctx.arcTo(x + outerWidth, y, x + outerWidth, y + r, r)
+    ctx.lineTo(x + outerWidth, y + outerHeight - r)
+    ctx.arcTo(
+      x + outerWidth,
+      y + outerHeight,
+      x + outerWidth - r,
+      y + outerHeight,
+      r,
+    )
+    ctx.lineTo(x + r, y + outerHeight)
+    ctx.arcTo(x, y + outerHeight, x, y + outerHeight - r, r)
+    ctx.lineTo(x, y + r)
+    ctx.arcTo(x, y, x + r, y, r)
+  } else {
+    ctx.rect(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight)
+  }
+
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore pad color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore pad color in inner rectangle (reduced by margin)
+  const innerWidth = scaledWidth - scaledMargin * 2
+  const innerHeight = scaledHeight - scaledMargin * 2
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin)
+
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath()
+    if (innerRadius > 0) {
+      const x = -innerWidth / 2
+      const y = -innerHeight / 2
+      const r = Math.min(innerRadius, innerWidth / 2, innerHeight / 2)
+
+      ctx.moveTo(x + r, y)
+      ctx.lineTo(x + innerWidth - r, y)
+      ctx.arcTo(x + innerWidth, y, x + innerWidth, y + r, r)
+      ctx.lineTo(x + innerWidth, y + innerHeight - r)
+      ctx.arcTo(
+        x + innerWidth,
+        y + innerHeight,
+        x + innerWidth - r,
+        y + innerHeight,
+        r,
+      )
+      ctx.lineTo(x + r, y + innerHeight)
+      ctx.arcTo(x, y + innerHeight, x, y + innerHeight - r, r)
+      ctx.lineTo(x, y + r)
+      ctx.arcTo(x, y, x + r, y, r)
+    } else {
+      ctx.rect(-innerWidth / 2, -innerHeight / 2, innerWidth, innerHeight)
+    }
+
+    ctx.fillStyle = padColor
+    ctx.fill()
+  }
+
+  ctx.restore()
+}
+
+/**
+ * Draws a soldermask ring for circular shapes with negative margin
+ * (soldermask appears inside the pad boundary)
+ */
+export function drawSoldermaskRingForCircle(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  radius: number,
+  margin: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  padColor: string,
+): void {
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledRadius = radius * Math.abs(realToCanvasMat.a)
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a)
+
+  ctx.save()
+
+  // For negative margins, outer is pad boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the pad
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer circle filled (at pad boundary)
+  ctx.beginPath()
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2)
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore pad color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore pad color in inner circle (reduced by margin)
+  const innerRadius = Math.max(0, scaledRadius - scaledMargin)
+  if (innerRadius > 0) {
+    ctx.beginPath()
+    ctx.arc(cx, cy, innerRadius, 0, Math.PI * 2)
+    ctx.fillStyle = padColor
+    ctx.fill()
+  }
+
+  ctx.restore()
+}
+
+/**
+ * Draws a soldermask ring for pill shapes with negative margin
+ * (soldermask appears inside the pad boundary)
+ */
+export function drawSoldermaskRingForPill(
+  ctx: CanvasContext,
+  center: { x: number; y: number },
+  width: number,
+  height: number,
+  margin: number,
+  rotation: number,
+  realToCanvasMat: Matrix,
+  soldermaskColor: string,
+  padColor: string,
+): void {
+  const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
+  const scaledWidth = width * Math.abs(realToCanvasMat.a)
+  const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a)
+
+  ctx.save()
+  ctx.translate(cx, cy)
+
+  if (rotation !== 0) {
+    ctx.rotate(-rotation * (Math.PI / 180))
+  }
+
+  // For negative margins, outer is pad boundary, inner is reduced by margin
+  // Use source-atop so the ring only appears on the pad
+  const prevCompositeOp = ctx.globalCompositeOperation
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = "source-atop"
+  }
+
+  // Draw outer pill filled (at pad boundary)
+  const outerWidth = scaledWidth
+  const outerHeight = scaledHeight
+
+  ctx.beginPath()
+
+  if (outerWidth > outerHeight) {
+    const radius = outerHeight / 2
+    const straightLength = outerWidth - outerHeight
+    ctx.moveTo(-straightLength / 2, -radius)
+    ctx.lineTo(straightLength / 2, -radius)
+    ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2)
+    ctx.lineTo(-straightLength / 2, radius)
+    ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2)
+  } else if (outerHeight > outerWidth) {
+    const radius = outerWidth / 2
+    const straightLength = outerHeight - outerWidth
+    ctx.moveTo(radius, -straightLength / 2)
+    ctx.lineTo(radius, straightLength / 2)
+    ctx.arc(0, straightLength / 2, radius, 0, Math.PI)
+    ctx.lineTo(-radius, -straightLength / 2)
+    ctx.arc(0, -straightLength / 2, radius, Math.PI, 0)
+  } else {
+    ctx.arc(0, 0, outerWidth / 2, 0, Math.PI * 2)
+  }
+
+  ctx.fillStyle = soldermaskColor
+  ctx.fill()
+
+  // Reset composite operation and restore pad color in inner area
+  if (ctx.globalCompositeOperation !== undefined) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over"
+  }
+
+  // Restore pad color in inner pill (reduced by margin)
+  const innerWidth = scaledWidth - scaledMargin * 2
+  const innerHeight = scaledHeight - scaledMargin * 2
+
+  if (innerWidth > 0 && innerHeight > 0) {
+    ctx.beginPath()
+
+    if (innerWidth > innerHeight) {
+      const radius = innerHeight / 2
+      const straightLength = innerWidth - innerHeight
+      ctx.moveTo(-straightLength / 2, -radius)
+      ctx.lineTo(straightLength / 2, -radius)
+      ctx.arc(straightLength / 2, 0, radius, -Math.PI / 2, Math.PI / 2)
+      ctx.lineTo(-straightLength / 2, radius)
+      ctx.arc(-straightLength / 2, 0, radius, Math.PI / 2, -Math.PI / 2)
+    } else if (innerHeight > innerWidth) {
+      const radius = innerWidth / 2
+      const straightLength = innerHeight - innerWidth
+      ctx.moveTo(radius, -straightLength / 2)
+      ctx.lineTo(radius, straightLength / 2)
+      ctx.arc(0, straightLength / 2, radius, 0, Math.PI)
+      ctx.lineTo(-radius, -straightLength / 2)
+      ctx.arc(0, -straightLength / 2, radius, Math.PI, 0)
+    } else {
+      ctx.arc(0, 0, innerWidth / 2, 0, Math.PI * 2)
+    }
+
+    ctx.fillStyle = padColor
+    ctx.fill()
+  }
+
+  ctx.restore()
+}

package/lib/drawer/shapes/oval.ts

@@ -5,9 +5,11 @@ import type { CanvasContext } from "../types"
 export interface DrawOvalParams {
   ctx: CanvasContext
   center: { x: number; y: number }
-  width: number
-  height: number
-  fill: string
+  radius_x: number
+  radius_y: number
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
   realToCanvasMat: Matrix
   rotation?: number
 }
@@ -16,16 +18,19 @@ export function drawOval(params: DrawOvalParams): void {
   const {
     ctx,
     center,
-    width,
-    height,
+    radius_x,
+    radius_y,
     fill,
+    stroke,
+    strokeWidth = 0.1,
     realToCanvasMat,
     rotation = 0,
   } = params
 
   const [cx, cy] = applyToPoint(realToCanvasMat, [center.x, center.y])
-  const scaledWidth = width * Math.abs(realToCanvasMat.a)
-  const scaledHeight = height * Math.abs(realToCanvasMat.a)
+  const scaledRadiusX = radius_x * Math.abs(realToCanvasMat.a)
+  const scaledRadiusY = radius_y * Math.abs(realToCanvasMat.a)
+  const scaledStrokeWidth = strokeWidth * Math.abs(realToCanvasMat.a)
 
   ctx.save()
   ctx.translate(cx, cy)
@@ -35,8 +40,18 @@ export function drawOval(params: DrawOvalParams): void {
   }
 
   ctx.beginPath()
-  ctx.ellipse(0, 0, scaledWidth / 2, scaledHeight / 2, 0, 0, Math.PI * 2)
-  ctx.fillStyle = fill
-  ctx.fill()
+  ctx.ellipse(0, 0, scaledRadiusX, scaledRadiusY, 0, 0, Math.PI * 2)
+
+  if (fill) {
+    ctx.fillStyle = fill
+    ctx.fill()
+  }
+
+  if (stroke) {
+    ctx.strokeStyle = stroke
+    ctx.lineWidth = scaledStrokeWidth
+    ctx.stroke()
+  }
+
   ctx.restore()
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",
@@ -17,9 +17,9 @@
     "@tscircuit/math-utils": "^0.0.29",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.14",
-    "circuit-json": "^0.0.346",
+    "circuit-json": "^0.0.348",
     "circuit-json-to-connectivity-map": "^0.0.23",
-    "circuit-to-svg": "^0.0.297",
+    "circuit-to-svg": "^0.0.303",
     "looks-same": "^10.0.1",
     "schematic-symbols": "^0.0.202",
     "tsup": "^8.5.1"

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

@@ -0,0 +1,37 @@
+import { expect, test } from "bun:test"
+import type { AnyCircuitElement, PcbSilkscreenOval } from "circuit-json"
+import { getStackedPngSvgComparison } from "../fixtures/getStackedPngSvgComparison"
+
+test("draw silkscreen oval", async () => {
+  const oval: PcbSilkscreenOval = {
+    type: "pcb_silkscreen_oval",
+    layer: "top" as const,
+    pcb_component_id: "pcb_component_1",
+    pcb_silkscreen_oval_id: "oval_1",
+    center: { x: 0, y: 0 },
+    radius_x: 2,
+    radius_y: 1,
+    ccw_rotation: 45,
+  }
+
+  const circuitJson: AnyCircuitElement[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board1",
+      center: { x: 0, y: 0 },
+      width: 10,
+      height: 10,
+      thickness: 1.6,
+      num_layers: 2,
+      material: "fr4",
+    },
+    oval,
+  ]
+
+  const stackedPng = await getStackedPngSvgComparison(circuitJson, {
+    width: 400,
+    height: 800,
+  })
+
+  await expect(stackedPng).toMatchPngSnapshot(import.meta.path)
+})

package/tests/elements/pcb-smtpad-soldermask-margin.test.ts

@@ -0,0 +1,163 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw smt pads with positive and negative soldermask margins", async () => {
+  const canvas = createCanvas(800, 600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 800, 600)
+
+  const circuit: any = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board0",
+      center: { x: 0, y: 0 },
+      width: 14,
+      height: 10,
+    },
+    // Rectangle with positive margin (mask extends beyond pad)
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pad_rect_positive",
+      shape: "rect",
+      layer: "top",
+      x: -4,
+      y: 2,
+      width: 1.6,
+      height: 1.1,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.2,
+    },
+    // Rectangle with negative margin (spacing around copper, copper visible)
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pad_rect_negative",
+      shape: "rect",
+      layer: "top",
+      x: -4,
+      y: -2,
+      width: 1.6,
+      height: 1.1,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: -0.15,
+    },
+    // Circle with positive margin
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pad_circle_positive",
+      shape: "circle",
+      layer: "top",
+      x: 0,
+      y: 2,
+      radius: 0.75,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.15,
+    },
+    // Circle with negative margin
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pad_circle_negative",
+      shape: "circle",
+      layer: "top",
+      x: 0,
+      y: -2,
+      radius: 0.75,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: -0.2,
+    },
+    // Pill with positive margin
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pad_pill_positive",
+      shape: "pill",
+      layer: "top",
+      x: 4,
+      y: 2,
+      width: 2.4,
+      height: 1,
+      radius: 0.5,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: 0.1,
+    },
+    // Pill with negative margin
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pad_pill_negative",
+      shape: "pill",
+      layer: "top",
+      x: 4,
+      y: -2,
+      width: 2.4,
+      height: 1,
+      radius: 0.5,
+      is_covered_with_solder_mask: true,
+      soldermask_margin: -0.12,
+    },
+    // Silkscreen labels for positive margin pads (top row)
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_rect_pos",
+      layer: "top",
+      anchor_position: { x: -4, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.2mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_circle_pos",
+      layer: "top",
+      anchor_position: { x: 0, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_pill_pos",
+      layer: "top",
+      anchor_position: { x: 4, y: 3.2 },
+      anchor_alignment: "center",
+      text: "+0.1mm",
+      font_size: 0.4,
+    },
+    // Silkscreen labels for negative margin pads (bottom row)
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_rect_neg",
+      layer: "top",
+      anchor_position: { x: -4, y: -3.2 },
+      anchor_alignment: "center",
+      text: "-0.15mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_circle_neg",
+      layer: "top",
+      anchor_position: { x: 0, y: -3.2 },
+      anchor_alignment: "center",
+      text: "-0.2mm",
+      font_size: 0.4,
+    },
+    {
+      type: "pcb_silkscreen_text",
+      pcb_silkscreen_text_id: "text_pill_neg",
+      layer: "top",
+      anchor_position: { x: 4, y: -3.2 },
+      anchor_alignment: "center",
+      text: "-0.12mm",
+      font_size: 0.4,
+    },
+  ]
+
+  drawer.setCameraBounds({ minX: -7, maxX: 7, minY: -5, maxY: 5 })
+  drawer.drawElements(circuit)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

package/tests/shapes/oval.test.ts

@@ -13,10 +13,11 @@ test("draw oval", async () => {
   drawOval({
     ctx,
     center: { x: 50, y: 50 },
-    width: 70,
-    height: 40,
+    radius_x: 50,
+    radius_y: 25,
     fill: "#0000ff",
     realToCanvasMat: identity(),
+    rotation: 45,
   })
 
   await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(