circuit-to-canvas 0.0.47 → 0.0.48

package/dist/index.d.ts

@@ -8,10 +8,10 @@ import { Matrix } from 'transformation-matrix';
 interface CanvasContext {
     beginPath(): void;
     closePath(): void;
-    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void;
     arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
     ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number): void;
-    fill(): void;
+    fill(fillRule?: "nonzero" | "evenodd"): void;
     stroke(): void;
     rect(x: number, y: number, w: number, h: number): void;
     lineTo(x: number, y: number): void;
@@ -25,6 +25,7 @@ interface CanvasContext {
     globalCompositeOperation?: string;
     fillStyle: string | CanvasGradient | CanvasPattern;
     strokeStyle: string | CanvasGradient | CanvasPattern;
+    globalAlpha: number;
     lineWidth: number;
     lineCap: "butt" | "round" | "square";
     lineJoin: "bevel" | "round" | "miter";

package/dist/index.js

@@ -2154,6 +2154,128 @@ import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 function layerToColor3(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
+function computeArcFromBulge(startX, startY, endX, endY, bulge) {
+  if (Math.abs(bulge) < 1e-10) {
+    return null;
+  }
+  const chordX = endX - startX;
+  const chordY = endY - startY;
+  const chordLength = Math.hypot(chordX, chordY);
+  if (chordLength < 1e-10) {
+    return null;
+  }
+  const sagitta = Math.abs(bulge) * (chordLength / 2);
+  const halfChord = chordLength / 2;
+  const radius = (sagitta * sagitta + halfChord * halfChord) / (2 * sagitta);
+  const distToCenter = radius - sagitta;
+  const midX = (startX + endX) / 2;
+  const midY = (startY + endY) / 2;
+  const perpX = -chordY / chordLength;
+  const perpY = chordX / chordLength;
+  const sign = bulge > 0 ? -1 : 1;
+  const centerX = midX + sign * perpX * distToCenter;
+  const centerY = midY + sign * perpY * distToCenter;
+  return { centerX, centerY, radius };
+}
+function drawArcFromBulge(ctx, realStartX, realStartY, realEndX, realEndY, bulge, realToCanvasMat) {
+  if (Math.abs(bulge) < 1e-10) {
+    const [endX, endY] = applyToPoint12(realToCanvasMat, [realEndX, realEndY]);
+    ctx.lineTo(endX, endY);
+    return;
+  }
+  const arc = computeArcFromBulge(
+    realStartX,
+    realStartY,
+    realEndX,
+    realEndY,
+    bulge
+  );
+  if (!arc) {
+    const [endX, endY] = applyToPoint12(realToCanvasMat, [realEndX, realEndY]);
+    ctx.lineTo(endX, endY);
+    return;
+  }
+  const [canvasStartX, canvasStartY] = applyToPoint12(realToCanvasMat, [
+    realStartX,
+    realStartY
+  ]);
+  const [canvasEndX, canvasEndY] = applyToPoint12(realToCanvasMat, [
+    realEndX,
+    realEndY
+  ]);
+  const [canvasCenterX, canvasCenterY] = applyToPoint12(realToCanvasMat, [
+    arc.centerX,
+    arc.centerY
+  ]);
+  const canvasRadius = Math.hypot(
+    canvasStartX - canvasCenterX,
+    canvasStartY - canvasCenterY
+  );
+  const startAngle = Math.atan2(
+    canvasStartY - canvasCenterY,
+    canvasStartX - canvasCenterX
+  );
+  const endAngle = Math.atan2(
+    canvasEndY - canvasCenterY,
+    canvasEndX - canvasCenterX
+  );
+  const det = realToCanvasMat.a * realToCanvasMat.d - realToCanvasMat.b * realToCanvasMat.c;
+  const isFlipped = det < 0;
+  const counterclockwise = bulge > 0 ? !isFlipped : isFlipped;
+  ctx.arc(
+    canvasCenterX,
+    canvasCenterY,
+    canvasRadius,
+    startAngle,
+    endAngle,
+    counterclockwise
+  );
+}
+function drawRing(ctx, ring, realToCanvasMat) {
+  if (ring.vertices.length < 2) return;
+  if (ring.vertices.length === 2) {
+    const v0 = ring.vertices[0];
+    const v1 = ring.vertices[1];
+    if (v0 && v1 && Math.abs((v0.bulge ?? 0) - 1) < 1e-10 && Math.abs((v1.bulge ?? 0) - 1) < 1e-10) {
+      const [x0, y0] = applyToPoint12(realToCanvasMat, [v0.x, v0.y]);
+      ctx.moveTo(x0, y0);
+      drawArcFromBulge(ctx, v0.x, v0.y, v1.x, v1.y, 1, realToCanvasMat);
+      drawArcFromBulge(ctx, v1.x, v1.y, v0.x, v0.y, 1, realToCanvasMat);
+      return;
+    }
+  }
+  const firstVertex = ring.vertices[0];
+  if (!firstVertex) return;
+  const [firstX, firstY] = applyToPoint12(realToCanvasMat, [
+    firstVertex.x,
+    firstVertex.y
+  ]);
+  ctx.moveTo(firstX, firstY);
+  for (let i = 0; i < ring.vertices.length; i++) {
+    const currentVertex = ring.vertices[i];
+    const nextIndex = (i + 1) % ring.vertices.length;
+    const nextVertex = ring.vertices[nextIndex];
+    if (!currentVertex || !nextVertex) continue;
+    const bulge = currentVertex.bulge ?? 0;
+    if (Math.abs(bulge) < 1e-10) {
+      const [nextX, nextY] = applyToPoint12(realToCanvasMat, [
+        nextVertex.x,
+        nextVertex.y
+      ]);
+      ctx.lineTo(nextX, nextY);
+    } else {
+      drawArcFromBulge(
+        ctx,
+        currentVertex.x,
+        currentVertex.y,
+        nextVertex.x,
+        nextVertex.y,
+        bulge,
+        realToCanvasMat
+      );
+    }
+  }
+}
 function drawPcbCopperPour(params) {
   const { ctx, pour, realToCanvasMat, colorMap } = params;
   const color = layerToColor3(pour.layer, colorMap);
@@ -2204,6 +2326,20 @@ function drawPcbCopperPour(params) {
     ctx.restore();
     return;
   }
+  if (pour.shape === "brep") {
+    ctx.beginPath();
+    drawRing(ctx, pour.brep_shape.outer_ring, realToCanvasMat);
+    if (pour.brep_shape.inner_rings) {
+      for (const innerRing of pour.brep_shape.inner_rings) {
+        drawRing(ctx, innerRing, realToCanvasMat);
+      }
+    }
+    ctx.fillStyle = color;
+    ctx.globalAlpha = 0.5;
+    ctx.fill("evenodd");
+    ctx.restore();
+    return;
+  }
   ctx.restore();
 }
 

package/lib/drawer/elements/pcb-copper-pour.ts

@@ -4,6 +4,7 @@ import { applyToPoint } from "transformation-matrix"
 import type { PcbColorMap, CanvasContext } from "../types"
 import { drawRect } from "../shapes/rect"
 import { drawPolygon } from "../shapes/polygon"
+import type { Ring } from "circuit-json"
 
 export interface DrawPcbCopperPourParams {
   ctx: CanvasContext
@@ -19,6 +20,219 @@ function layerToColor(layer: string, colorMap: PcbColorMap): string {
   )
 }
 
+/**
+ * Compute arc center and radius from two points and a bulge value.
+ * Bulge is the tangent of 1/4 of the included angle.
+ * - bulge = 0: straight line
+ * - bulge = 1: semicircle (180 degrees)
+ * - bulge > 0: arc bulges to the left of the direction from start to end
+ * - bulge < 0: arc bulges to the right
+ */
+function computeArcFromBulge(
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number,
+  bulge: number,
+): { centerX: number; centerY: number; radius: number } | null {
+  if (Math.abs(bulge) < 1e-10) {
+    return null
+  }
+
+  // Calculate chord vector and length
+  const chordX = endX - startX
+  const chordY = endY - startY
+  const chordLength = Math.hypot(chordX, chordY)
+
+  if (chordLength < 1e-10) {
+    return null
+  }
+
+  // The sagitta (bulge height) is: s = bulge * (chord_length / 2)
+  // This is because bulge = tan(theta/4) and s = r - r*cos(theta/2)
+  // After simplification: s = (chord/2) * tan(theta/4) = (chord/2) * bulge
+  const sagitta = Math.abs(bulge) * (chordLength / 2)
+
+  // Calculate radius from sagitta and chord:
+  // From geometry: r = (s^2 + (chord/2)^2) / (2*s)
+  const halfChord = chordLength / 2
+  const radius = (sagitta * sagitta + halfChord * halfChord) / (2 * sagitta)
+
+  // Distance from chord midpoint to center
+  const distToCenter = radius - sagitta
+
+  // Midpoint of the chord
+  const midX = (startX + endX) / 2
+  const midY = (startY + endY) / 2
+
+  // Unit vector perpendicular to chord
+  // "Left" of the direction from start to end (in standard Y-up coords)
+  const perpX = -chordY / chordLength
+  const perpY = chordX / chordLength
+
+  // For positive bulge, arc bulges left, so center is to the RIGHT of chord direction
+  // For negative bulge, arc bulges right, so center is to the LEFT of chord direction
+  const sign = bulge > 0 ? -1 : 1
+  const centerX = midX + sign * perpX * distToCenter
+  const centerY = midY + sign * perpY * distToCenter
+
+  return { centerX, centerY, radius }
+}
+
+/**
+ * Draws an arc between two points given a bulge value.
+ * Coordinates are in canvas space, but we need the original real-space points
+ * to correctly compute the arc direction.
+ */
+function drawArcFromBulge(
+  ctx: CanvasContext,
+  realStartX: number,
+  realStartY: number,
+  realEndX: number,
+  realEndY: number,
+  bulge: number,
+  realToCanvasMat: Matrix,
+): void {
+  if (Math.abs(bulge) < 1e-10) {
+    const [endX, endY] = applyToPoint(realToCanvasMat, [realEndX, realEndY])
+    ctx.lineTo(endX, endY)
+    return
+  }
+
+  // Compute arc in real coordinates
+  const arc = computeArcFromBulge(
+    realStartX,
+    realStartY,
+    realEndX,
+    realEndY,
+    bulge,
+  )
+
+  if (!arc) {
+    const [endX, endY] = applyToPoint(realToCanvasMat, [realEndX, realEndY])
+    ctx.lineTo(endX, endY)
+    return
+  }
+
+  // Transform all points to canvas coordinates
+  const [canvasStartX, canvasStartY] = applyToPoint(realToCanvasMat, [
+    realStartX,
+    realStartY,
+  ])
+  const [canvasEndX, canvasEndY] = applyToPoint(realToCanvasMat, [
+    realEndX,
+    realEndY,
+  ])
+  const [canvasCenterX, canvasCenterY] = applyToPoint(realToCanvasMat, [
+    arc.centerX,
+    arc.centerY,
+  ])
+
+  // Calculate radius in canvas space (may be scaled)
+  const canvasRadius = Math.hypot(
+    canvasStartX - canvasCenterX,
+    canvasStartY - canvasCenterY,
+  )
+
+  // Calculate start and end angles in canvas space
+  const startAngle = Math.atan2(
+    canvasStartY - canvasCenterY,
+    canvasStartX - canvasCenterX,
+  )
+  const endAngle = Math.atan2(
+    canvasEndY - canvasCenterY,
+    canvasEndX - canvasCenterX,
+  )
+
+  // Determine arc direction
+  // In real coords: positive bulge = counterclockwise (left-hand rule)
+  // The transformation may flip Y, which reverses the apparent direction
+  // Check if transformation flips by looking at the determinant (a*d - b*c)
+  const det =
+    realToCanvasMat.a * realToCanvasMat.d -
+    realToCanvasMat.b * realToCanvasMat.c
+  const isFlipped = det < 0
+
+  // Positive bulge in real coords = counterclockwise in real coords
+  // If flipped, counterclockwise becomes clockwise in canvas coords
+  const counterclockwise = bulge > 0 ? !isFlipped : isFlipped
+
+  ctx.arc(
+    canvasCenterX,
+    canvasCenterY,
+    canvasRadius,
+    startAngle,
+    endAngle,
+    counterclockwise,
+  )
+}
+
+function drawRing(
+  ctx: CanvasContext,
+  ring: Ring,
+  realToCanvasMat: Matrix,
+): void {
+  if (ring.vertices.length < 2) return
+
+  // Special case: a circle defined by 2 vertices with bulge=1 each
+  if (ring.vertices.length === 2) {
+    const v0 = ring.vertices[0]
+    const v1 = ring.vertices[1]
+    if (
+      v0 &&
+      v1 &&
+      Math.abs((v0.bulge ?? 0) - 1) < 1e-10 &&
+      Math.abs((v1.bulge ?? 0) - 1) < 1e-10
+    ) {
+      // This is a full circle - draw two semicircles
+      const [x0, y0] = applyToPoint(realToCanvasMat, [v0.x, v0.y])
+
+      ctx.moveTo(x0, y0)
+      drawArcFromBulge(ctx, v0.x, v0.y, v1.x, v1.y, 1, realToCanvasMat)
+      drawArcFromBulge(ctx, v1.x, v1.y, v0.x, v0.y, 1, realToCanvasMat)
+      return
+    }
+  }
+
+  const firstVertex = ring.vertices[0]
+  if (!firstVertex) return
+  const [firstX, firstY] = applyToPoint(realToCanvasMat, [
+    firstVertex.x,
+    firstVertex.y,
+  ])
+  ctx.moveTo(firstX, firstY)
+
+  for (let i = 0; i < ring.vertices.length; i++) {
+    const currentVertex = ring.vertices[i]
+    const nextIndex = (i + 1) % ring.vertices.length
+    const nextVertex = ring.vertices[nextIndex]
+
+    if (!currentVertex || !nextVertex) continue
+
+    const bulge = currentVertex.bulge ?? 0
+
+    if (Math.abs(bulge) < 1e-10) {
+      // No bulge, draw straight line
+      const [nextX, nextY] = applyToPoint(realToCanvasMat, [
+        nextVertex.x,
+        nextVertex.y,
+      ])
+      ctx.lineTo(nextX, nextY)
+    } else {
+      // Draw arc based on bulge value (pass real coordinates)
+      drawArcFromBulge(
+        ctx,
+        currentVertex.x,
+        currentVertex.y,
+        nextVertex.x,
+        nextVertex.y,
+        bulge,
+        realToCanvasMat,
+      )
+    }
+  }
+}
+
 export function drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
   const { ctx, pour, realToCanvasMat, colorMap } = params
 
@@ -45,7 +259,7 @@ export function drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
     ctx.beginPath()
     ctx.rect(-scaledWidth / 2, -scaledHeight / 2, scaledWidth, scaledHeight)
     ctx.fillStyle = color
-    ;(ctx as any).globalAlpha = 0.5
+    ctx.globalAlpha = 0.5
     ctx.fill()
     ctx.restore()
     return
@@ -76,12 +290,31 @@ export function drawPcbCopperPour(params: DrawPcbCopperPourParams): void {
 
       ctx.closePath()
       ctx.fillStyle = color
-      ;(ctx as any).globalAlpha = 0.5
+      ctx.globalAlpha = 0.5
       ctx.fill()
     }
     ctx.restore()
     return
   }
 
+  if (pour.shape === "brep") {
+    ctx.beginPath()
+    // Draw outer ring
+    drawRing(ctx, pour.brep_shape.outer_ring, realToCanvasMat)
+
+    // Draw inner rings (holes) - use evenodd fill rule to create holes
+    if (pour.brep_shape.inner_rings) {
+      for (const innerRing of pour.brep_shape.inner_rings) {
+        drawRing(ctx, innerRing, realToCanvasMat)
+      }
+    }
+
+    ctx.fillStyle = color
+    ctx.globalAlpha = 0.5
+    ctx.fill("evenodd")
+    ctx.restore()
+    return
+  }
+
   ctx.restore()
 }

package/lib/drawer/types.ts

@@ -13,6 +13,7 @@ export interface CanvasContext {
     radius: number,
     startAngle: number,
     endAngle: number,
+    counterclockwise?: boolean,
   ): void
   arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   ellipse(
@@ -24,7 +25,7 @@ export interface CanvasContext {
     startAngle: number,
     endAngle: number,
   ): void
-  fill(): void
+  fill(fillRule?: "nonzero" | "evenodd"): void
   stroke(): void
   rect(x: number, y: number, w: number, h: number): void
   lineTo(x: number, y: number): void
@@ -38,6 +39,7 @@ export interface CanvasContext {
   globalCompositeOperation?: string
   fillStyle: string | CanvasGradient | CanvasPattern
   strokeStyle: string | CanvasGradient | CanvasPattern
+  globalAlpha: number
   lineWidth: number
   lineCap: "butt" | "round" | "square"
   lineJoin: "bevel" | "round" | "miter"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

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

@@ -119,3 +119,174 @@ test("draw copper pour with trace", async () => {
     "copper-pour-with-trace",
   )
 })
+
+test("draw brep copper pours", async () => {
+  const canvas = createCanvas(200, 200)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  // Set camera bounds to fit all elements
+  drawer.setCameraBounds({
+    minX: -100,
+    maxX: 100,
+    minY: -50,
+    maxY: 50,
+  })
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 200, 200)
+
+  const soup: any[] = [
+    {
+      type: "pcb_board",
+      pcb_board_id: "board1",
+      center: { x: 0, y: 0 },
+      width: 200,
+      height: 100,
+      material: "fr4",
+      num_layers: 2,
+      thickness: 1.6,
+    },
+    // pour_brep_1: square with rounded-square hole
+    {
+      type: "pcb_copper_pour",
+      pcb_copper_pour_id: "pour_brep_1",
+      layer: "top",
+      shape: "brep",
+      source_net_id: "net1",
+      brep_shape: {
+        outer_ring: {
+          vertices: [
+            { x: -30, y: 30 },
+            { x: -50, y: 30 },
+            { x: -50, y: 10 },
+            { x: -30, y: 10 },
+          ],
+        },
+        inner_rings: [
+          {
+            vertices: [
+              { x: -35, y: 25, bulge: 0.5 },
+              { x: -45, y: 25 },
+              { x: -45, y: 15 },
+              { x: -35, y: 15 },
+            ],
+          },
+        ],
+      },
+    } as PcbCopperPour,
+    // pour_brep_2: Bulgy outer ring, two holes
+    {
+      type: "pcb_copper_pour",
+      pcb_copper_pour_id: "pour_brep_2",
+      layer: "top",
+      shape: "brep",
+      source_net_id: "net2",
+      brep_shape: {
+        outer_ring: {
+          vertices: [
+            { x: 10, y: 30, bulge: -0.5 },
+            { x: -10, y: 30 },
+            { x: -10, y: 10, bulge: 0.5 },
+            { x: 10, y: 10 },
+          ],
+        },
+        inner_rings: [
+          {
+            // square hole
+            vertices: [
+              { x: -5, y: 25 },
+              { x: -8, y: 25 },
+              { x: -8, y: 22 },
+              { x: -5, y: 22 },
+            ],
+          },
+          {
+            // triangular hole
+            vertices: [
+              { x: 5, y: 25 },
+              { x: 8, y: 22 },
+              { x: 5, y: 22 },
+            ],
+          },
+        ],
+      },
+    } as PcbCopperPour,
+    // pour_brep_3: Circular pour with square hole
+    {
+      type: "pcb_copper_pour",
+      pcb_copper_pour_id: "pour_brep_3",
+      layer: "top",
+      shape: "brep",
+      source_net_id: "net3",
+      brep_shape: {
+        outer_ring: {
+          vertices: [
+            { x: 30, y: 20, bulge: 1 },
+            { x: 50, y: 20, bulge: 1 },
+          ],
+        },
+        inner_rings: [
+          {
+            vertices: [
+              { x: 38, y: 22 },
+              { x: 42, y: 22 },
+              { x: 42, y: 18 },
+              { x: 38, y: 18 },
+            ],
+          },
+        ],
+      },
+    } as PcbCopperPour,
+    // pour_brep_4: bottom layer pour
+    {
+      type: "pcb_copper_pour",
+      pcb_copper_pour_id: "pour_brep_4",
+      layer: "bottom",
+      shape: "brep",
+      source_net_id: "net4",
+      brep_shape: {
+        outer_ring: {
+          vertices: [
+            { x: -30, y: -10 },
+            { x: -50, y: -10 },
+            { x: -50, y: -30 },
+            { x: -30, y: -30, bulge: 0.5 },
+          ],
+        },
+      },
+    } as PcbCopperPour,
+    // pour_rect_1: A rect pour with rotation
+    {
+      type: "pcb_copper_pour",
+      pcb_copper_pour_id: "pour_rect_1",
+      layer: "top",
+      shape: "rect",
+      source_net_id: "net5",
+      center: { x: 0, y: -20 },
+      width: 20,
+      height: 10,
+      rotation: 15,
+    } as PcbCopperPour,
+    // pour_polygon_1: A polygon pour (triangle)
+    {
+      type: "pcb_copper_pour",
+      pcb_copper_pour_id: "pour_polygon_1",
+      layer: "top",
+      shape: "polygon",
+      source_net_id: "net6",
+      points: [
+        { x: 30, y: -10 },
+        { x: 50, y: -30 },
+        { x: 30, y: -30 },
+      ],
+    } as PcbCopperPour,
+  ]
+
+  drawer.drawElements(soup)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+    "brep-copper-pours",
+  )
+})