circuit-to-canvas 0.0.46 → 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

@@ -456,6 +456,90 @@ function drawSoldermaskRingForOval(ctx, center, radius_x, radius_y, margin, rota
   }
   ctx.restore();
 }
+function offsetPolygonPoints(points, offset) {
+  if (points.length < 3 || offset === 0) return points;
+  let centerX = 0;
+  let centerY = 0;
+  for (const point of points) {
+    centerX += point.x;
+    centerY += point.y;
+  }
+  centerX /= points.length;
+  centerY /= points.length;
+  const result = [];
+  for (const point of points) {
+    const vectorX = point.x - centerX;
+    const vectorY = point.y - centerY;
+    const distance = Math.sqrt(vectorX * vectorX + vectorY * vectorY);
+    if (distance > 0) {
+      const normalizedX = vectorX / distance;
+      const normalizedY = vectorY / distance;
+      result.push({
+        x: point.x + normalizedX * offset,
+        y: point.y + normalizedY * offset
+      });
+    } else {
+      result.push({
+        x: point.x + offset,
+        y: point.y
+      });
+    }
+  }
+  return result;
+}
+function drawSoldermaskRingForPolygon(ctx, points, margin, realToCanvasMat, soldermaskColor, padColor) {
+  if (points.length < 3 || margin >= 0) return;
+  const scaledMargin = Math.abs(margin) * Math.abs(realToCanvasMat.a);
+  const prevCompositeOp = ctx.globalCompositeOperation;
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = "source-atop";
+  }
+  ctx.beginPath();
+  const canvasPoints = points.map(
+    (p) => applyToPoint6(realToCanvasMat, [p.x, p.y])
+  );
+  const firstPoint = canvasPoints[0];
+  if (firstPoint) {
+    const [firstX, firstY] = firstPoint;
+    ctx.moveTo(firstX, firstY);
+    for (let i = 1; i < canvasPoints.length; i++) {
+      const point = canvasPoints[i];
+      if (point) {
+        const [x, y] = point;
+        ctx.lineTo(x, y);
+      }
+    }
+    ctx.closePath();
+    ctx.fillStyle = soldermaskColor;
+    ctx.fill();
+  }
+  if (ctx.globalCompositeOperation !== void 0) {
+    ctx.globalCompositeOperation = prevCompositeOp || "source-over";
+  }
+  const innerPoints = offsetPolygonPoints(points, margin);
+  if (innerPoints.length >= 3) {
+    ctx.beginPath();
+    const innerCanvasPoints = innerPoints.map(
+      (p) => applyToPoint6(realToCanvasMat, [p.x, p.y])
+    );
+    const firstInnerPoint = innerCanvasPoints[0];
+    if (firstInnerPoint) {
+      const [firstX, firstY] = firstInnerPoint;
+      ctx.moveTo(firstX, firstY);
+      for (let i = 1; i < innerCanvasPoints.length; i++) {
+        const point = innerCanvasPoints[i];
+        if (point) {
+          const [x, y] = point;
+          ctx.lineTo(x, y);
+        }
+      }
+      ctx.closePath();
+      ctx.fillStyle = padColor;
+      ctx.fill();
+    }
+  }
+  ctx.restore();
+}
 
 // lib/drawer/elements/pcb-plated-hole.ts
 function getSoldermaskColor(layers, colorMap) {
@@ -643,7 +727,7 @@ function drawPcbPlatedHole(params) {
         height: hole.rect_pad_height + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
-        borderRadius: (hole.rect_border_radius ?? 0) + margin
+        borderRadius: hole.rect_border_radius ?? 0
       });
     }
     drawRect({
@@ -702,7 +786,7 @@ function drawPcbPlatedHole(params) {
         height: hole.rect_pad_height + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
-        borderRadius: (hole.rect_border_radius ?? 0) + margin
+        borderRadius: hole.rect_border_radius ?? 0
       });
     }
     drawRect({
@@ -762,7 +846,7 @@ function drawPcbPlatedHole(params) {
         height: hole.rect_pad_height + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
-        borderRadius: (hole.rect_border_radius ?? 0) + margin,
+        borderRadius: hole.rect_border_radius ?? 0,
         rotation: hole.rect_ccw_rotation
       });
     }
@@ -824,12 +908,39 @@ function drawPcbPlatedHole(params) {
         x: hole.x + point.x,
         y: hole.y + point.y
       }));
+      if (hasSoldermask && margin > 0) {
+        const expandedPoints = offsetPolygonPoints(padPoints, margin);
+        drawPolygon({
+          ctx,
+          points: expandedPoints,
+          fill: positiveMarginColor,
+          realToCanvasMat
+        });
+      }
       drawPolygon({
         ctx,
         points: padPoints,
         fill: copperColor,
         realToCanvasMat
       });
+      if (hasSoldermask && margin < 0) {
+        drawSoldermaskRingForPolygon(
+          ctx,
+          padPoints,
+          margin,
+          realToCanvasMat,
+          soldermaskRingColor,
+          copperColor
+        );
+      }
+      if (isCoveredWithSoldermask) {
+        drawPolygon({
+          ctx,
+          points: padPoints,
+          fill: soldermaskRingColor,
+          realToCanvasMat
+        });
+      }
     }
     if (!isCoveredWithSoldermask) {
       const holeX = hole.x + (hole.hole_offset_x ?? 0);
@@ -1233,7 +1344,7 @@ function drawPcbSmtPad(params) {
         height: pad.height + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
-        borderRadius: getBorderRadius(pad, margin)
+        borderRadius: getBorderRadius(pad)
       });
     }
     drawRect({
@@ -1281,7 +1392,7 @@ function drawPcbSmtPad(params) {
         height: pad.height + margin * 2,
         fill: positiveMarginColor,
         realToCanvasMat,
-        borderRadius: getBorderRadius(pad, margin),
+        borderRadius: getBorderRadius(pad),
         rotation: pad.ccw_rotation ?? 0
       });
     }
@@ -1455,13 +1566,32 @@ function drawPcbSmtPad(params) {
   }
   if (pad.shape === "polygon") {
     if (pad.points && pad.points.length >= 3) {
+      if (hasSoldermask && margin > 0) {
+        const expandedPoints = offsetPolygonPoints(pad.points, margin);
+        drawPolygon({
+          ctx,
+          points: expandedPoints,
+          fill: positiveMarginColor,
+          realToCanvasMat
+        });
+      }
       drawPolygon({
         ctx,
         points: pad.points,
         fill: color,
         realToCanvasMat
       });
-      if (isCoveredWithSoldermask && margin >= 0) {
+      if (hasSoldermask && margin < 0) {
+        drawSoldermaskRingForPolygon(
+          ctx,
+          pad.points,
+          margin,
+          realToCanvasMat,
+          soldermaskRingColor,
+          color
+        );
+      }
+      if (isCoveredWithSoldermask && margin === 0) {
         drawPolygon({
           ctx,
           points: pad.points,
@@ -2024,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);
@@ -2074,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()
 }