circuit-to-canvas 0.0.65 → 0.0.67

package/dist/index.d.ts

@@ -69,7 +69,10 @@ interface PcbColorMap {
         bottom: string;
     };
     substrate: string;
-    courtyard: string;
+    courtyard: {
+        top: string;
+        bottom: string;
+    };
     keepout: string;
     fabricationNote: string;
 }

package/dist/index.js

@@ -674,13 +674,16 @@ function drawCircle(params) {
 }
 
 // lib/drawer/elements/pcb-courtyard-circle.ts
+function layerToCourtyardColor(layer, colorMap) {
+  return layer === "bottom" ? colorMap.courtyard.bottom : colorMap.courtyard.top;
+}
 function drawPcbCourtyardCircle(params) {
   const { ctx, circle, realToCanvasMat, colorMap } = params;
   drawCircle({
     ctx,
     center: circle.center,
     radius: circle.radius,
-    stroke: colorMap.courtyard,
+    stroke: layerToCourtyardColor(circle.layer, colorMap),
     strokeWidth: 0.05,
     // Default thin line for courtyard info
     realToCanvasMat
@@ -688,6 +691,9 @@ function drawPcbCourtyardCircle(params) {
 }
 
 // lib/drawer/elements/pcb-courtyard-rect.ts
+function layerToCourtyardColor2(layer, colorMap) {
+  return layer === "bottom" ? colorMap.courtyard.bottom : colorMap.courtyard.top;
+}
 function drawPcbCourtyardRect(params) {
   const { ctx, rect, realToCanvasMat, colorMap } = params;
   drawRect({
@@ -695,7 +701,7 @@ function drawPcbCourtyardRect(params) {
     center: rect.center,
     width: rect.width,
     height: rect.height,
-    stroke: colorMap.courtyard,
+    stroke: layerToCourtyardColor2(rect.layer, colorMap),
     strokeWidth: 0.05,
     // Default thin line for courtyard info
     realToCanvasMat
@@ -3038,103 +3044,6 @@ function drawNegativeMarginRingForPad(params) {
   }
 }
 
-// lib/drawer/elements/pcb-soldermask/via.ts
-import { applyToPoint as applyToPoint21 } from "transformation-matrix";
-function processViaSoldermask(params) {
-  const { ctx, via, realToCanvasMat, colorMap } = params;
-  const [cx, cy] = applyToPoint21(realToCanvasMat, [via.x, via.y]);
-  const scaledRadius = via.outer_diameter / 2 * Math.abs(realToCanvasMat.a);
-  ctx.fillStyle = colorMap.substrate;
-  ctx.beginPath();
-  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
-  ctx.closePath();
-  ctx.fill();
-}
-
-// lib/drawer/elements/pcb-soldermask/index.ts
-function drawPcbSoldermask(params) {
-  const {
-    ctx,
-    board,
-    elements,
-    realToCanvasMat,
-    colorMap,
-    layer,
-    drawSoldermask
-  } = params;
-  const soldermaskColor = colorMap.soldermask[layer] ?? colorMap.soldermask.top;
-  const soldermaskOverCopperColor = colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
-  if (drawSoldermask) {
-    drawBoardSoldermask({ ctx, board, realToCanvasMat, soldermaskColor });
-  }
-  for (const element of elements) {
-    processElementSoldermask({
-      ctx,
-      element,
-      realToCanvasMat,
-      colorMap,
-      soldermaskOverCopperColor,
-      layer,
-      drawSoldermask
-    });
-  }
-}
-function processElementSoldermask(params) {
-  const {
-    ctx,
-    element,
-    realToCanvasMat,
-    colorMap,
-    soldermaskOverCopperColor,
-    layer,
-    drawSoldermask
-  } = params;
-  if (element.type === "pcb_smtpad") {
-    processSmtPadSoldermask({
-      ctx,
-      pad: element,
-      realToCanvasMat,
-      colorMap,
-      soldermaskOverCopperColor,
-      layer,
-      drawSoldermask
-    });
-  } else if (element.type === "pcb_plated_hole") {
-    processPlatedHoleSoldermask({
-      ctx,
-      hole: element,
-      realToCanvasMat,
-      colorMap,
-      soldermaskOverCopperColor,
-      layer,
-      drawSoldermask
-    });
-  } else if (element.type === "pcb_hole") {
-    processHoleSoldermask({
-      ctx,
-      hole: element,
-      realToCanvasMat,
-      colorMap,
-      soldermaskOverCopperColor,
-      drawSoldermask
-    });
-  } else if (element.type === "pcb_via") {
-    processViaSoldermask({
-      ctx,
-      via: element,
-      realToCanvasMat,
-      colorMap
-    });
-  } else if (element.type === "pcb_cutout") {
-    processCutoutSoldermask({
-      ctx,
-      cutout: element,
-      realToCanvasMat,
-      colorMap
-    });
-  }
-}
-
 // lib/drawer/elements/pcb-trace/normalize-trace-direction.ts
 function normalizeTraceDirection(x, y) {
   const length = Math.hypot(x, y);
@@ -3254,6 +3163,163 @@ function hasVariableWidth(points) {
   );
 }
 
+// lib/drawer/elements/pcb-soldermask/trace.ts
+function processTraceSoldermask(params) {
+  const {
+    ctx,
+    trace,
+    realToCanvasMat,
+    soldermaskOverCopperColor,
+    layer,
+    drawSoldermask
+  } = params;
+  if (!drawSoldermask) return;
+  if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
+    return;
+  }
+  const segments = collectTraceSegments(trace.route);
+  for (const segment of segments) {
+    const segmentLayer = segment[0]?.layer;
+    if (segmentLayer !== layer) continue;
+    if (hasVariableWidth(segment)) {
+      const polygonPoints = buildTracePolygon(segment);
+      drawPolygon({
+        ctx,
+        points: polygonPoints,
+        fill: soldermaskOverCopperColor,
+        realToCanvasMat
+      });
+      continue;
+    }
+    for (let i = 0; i < segment.length - 1; i++) {
+      const start = segment[i];
+      const end = segment[i + 1];
+      if (!start || !end) continue;
+      drawLine({
+        ctx,
+        start: { x: start.x, y: start.y },
+        end: { x: end.x, y: end.y },
+        strokeWidth: start.width,
+        stroke: soldermaskOverCopperColor,
+        realToCanvasMat,
+        lineCap: "round"
+      });
+    }
+  }
+}
+
+// lib/drawer/elements/pcb-soldermask/via.ts
+import { applyToPoint as applyToPoint21 } from "transformation-matrix";
+function processViaSoldermask(params) {
+  const { ctx, via, realToCanvasMat, colorMap } = params;
+  const [cx, cy] = applyToPoint21(realToCanvasMat, [via.x, via.y]);
+  const scaledRadius = via.outer_diameter / 2 * Math.abs(realToCanvasMat.a);
+  ctx.fillStyle = colorMap.substrate;
+  ctx.beginPath();
+  ctx.arc(cx, cy, scaledRadius, 0, Math.PI * 2);
+  ctx.closePath();
+  ctx.fill();
+}
+
+// lib/drawer/elements/pcb-soldermask/index.ts
+function drawPcbSoldermask(params) {
+  const {
+    ctx,
+    board,
+    elements,
+    realToCanvasMat,
+    colorMap,
+    layer,
+    drawSoldermask
+  } = params;
+  const soldermaskColor = colorMap.soldermask[layer] ?? colorMap.soldermask.top;
+  const soldermaskOverCopperColor = colorMap.soldermaskOverCopper[layer] ?? colorMap.soldermaskOverCopper.top;
+  if (drawSoldermask) {
+    drawBoardSoldermask({ ctx, board, realToCanvasMat, soldermaskColor });
+  }
+  if (drawSoldermask) {
+    for (const element of elements) {
+      if (element.type !== "pcb_trace") continue;
+      processTraceSoldermask({
+        ctx,
+        trace: element,
+        realToCanvasMat,
+        soldermaskOverCopperColor,
+        layer,
+        drawSoldermask
+      });
+    }
+  }
+  for (const element of elements) {
+    processElementSoldermask({
+      ctx,
+      element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      layer,
+      drawSoldermask
+    });
+  }
+}
+function processElementSoldermask(params) {
+  const {
+    ctx,
+    element,
+    realToCanvasMat,
+    colorMap,
+    soldermaskOverCopperColor,
+    layer,
+    drawSoldermask
+  } = params;
+  if (element.type === "pcb_smtpad") {
+    processSmtPadSoldermask({
+      ctx,
+      pad: element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      layer,
+      drawSoldermask
+    });
+  } else if (element.type === "pcb_plated_hole") {
+    processPlatedHoleSoldermask({
+      ctx,
+      hole: element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      layer,
+      drawSoldermask
+    });
+  } else if (element.type === "pcb_hole") {
+    processHoleSoldermask({
+      ctx,
+      hole: element,
+      realToCanvasMat,
+      colorMap,
+      soldermaskOverCopperColor,
+      drawSoldermask
+    });
+  } else if (element.type === "pcb_via") {
+    processViaSoldermask({
+      ctx,
+      via: element,
+      realToCanvasMat,
+      colorMap
+    });
+  } else if (element.type === "pcb_cutout") {
+    processCutoutSoldermask({
+      ctx,
+      cutout: element,
+      realToCanvasMat,
+      colorMap
+    });
+  } else if (element.type === "pcb_trace") {
+    return;
+  }
+}
+
 // lib/drawer/elements/pcb-trace/layer-to-color.ts
 function layerToColor4(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
@@ -3360,7 +3426,10 @@ var DEFAULT_PCB_COLOR_MAP = {
     bottom: "#5da9e9"
   },
   boardOutline: "rgba(255, 255, 255, 0.5)",
-  courtyard: "#FF00FF",
+  courtyard: {
+    top: "#FF00FF",
+    bottom: "rgb(38, 233, 255)"
+  },
   keepout: "#FF6B6B",
   // Red color for keepout zones
   fabricationNote: "rgba(255, 255, 255, 0.5)"
@@ -3550,7 +3619,7 @@ var CircuitToCanvasDrawer = class {
           colorMap: this.colorMap
         });
       }
-      if (element.type === "pcb_trace") {
+      if (element.type === "pcb_trace" && (!drawSoldermask || !board)) {
         drawPcbTrace({
           ctx: this.ctx,
           trace: element,

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -332,7 +332,7 @@ export class CircuitToCanvasDrawer {
         })
       }
 
-      if (element.type === "pcb_trace") {
+      if (element.type === "pcb_trace" && (!drawSoldermask || !board)) {
         drawPcbTrace({
           ctx: this.ctx,
           trace: element as PcbTrace,

package/lib/drawer/elements/pcb-courtyard-circle.ts

@@ -10,6 +10,10 @@ export interface DrawPcbCourtyardCircleParams {
   colorMap: PcbColorMap
 }
 
+function layerToCourtyardColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom" ? colorMap.courtyard.bottom : colorMap.courtyard.top
+}
+
 export function drawPcbCourtyardCircle(
   params: DrawPcbCourtyardCircleParams,
 ): void {
@@ -19,7 +23,7 @@ export function drawPcbCourtyardCircle(
     ctx,
     center: circle.center,
     radius: circle.radius,
-    stroke: colorMap.courtyard,
+    stroke: layerToCourtyardColor(circle.layer, colorMap),
     strokeWidth: 0.05, // Default thin line for courtyard info
     realToCanvasMat,
   })

package/lib/drawer/elements/pcb-courtyard-rect.ts

@@ -10,6 +10,10 @@ export interface DrawPcbCourtyardRectParams {
   colorMap: PcbColorMap
 }
 
+function layerToCourtyardColor(layer: string, colorMap: PcbColorMap): string {
+  return layer === "bottom" ? colorMap.courtyard.bottom : colorMap.courtyard.top
+}
+
 export function drawPcbCourtyardRect(params: DrawPcbCourtyardRectParams): void {
   const { ctx, rect, realToCanvasMat, colorMap } = params
 
@@ -18,7 +22,7 @@ export function drawPcbCourtyardRect(params: DrawPcbCourtyardRectParams): void {
     center: rect.center,
     width: rect.width,
     height: rect.height,
-    stroke: colorMap.courtyard,
+    stroke: layerToCourtyardColor(rect.layer, colorMap),
     strokeWidth: 0.05, // Default thin line for courtyard info
     realToCanvasMat,
   })

package/lib/drawer/elements/pcb-soldermask/index.ts

@@ -6,6 +6,7 @@ import { processCutoutSoldermask } from "./cutout"
 import { processHoleSoldermask } from "./hole"
 import { processPlatedHoleSoldermask } from "./plated-hole"
 import { processSmtPadSoldermask } from "./smt-pad"
+import { processTraceSoldermask } from "./trace"
 import { processViaSoldermask } from "./via"
 
 export interface DrawPcbSoldermaskParams {
@@ -56,7 +57,22 @@ export function drawPcbSoldermask(params: DrawPcbSoldermaskParams): void {
     drawBoardSoldermask({ ctx, board, realToCanvasMat, soldermaskColor })
   }
 
-  // Step 2: Process each element - draw cutouts and light green areas as needed
+  // Step 2: Draw soldermask over traces first so pads can open over them.
+  if (drawSoldermask) {
+    for (const element of elements) {
+      if (element.type !== "pcb_trace") continue
+      processTraceSoldermask({
+        ctx,
+        trace: element,
+        realToCanvasMat,
+        soldermaskOverCopperColor,
+        layer,
+        drawSoldermask,
+      })
+    }
+  }
+
+  // Step 3: Process remaining elements - draw cutouts and openings as needed
   for (const element of elements) {
     processElementSoldermask({
       ctx,
@@ -136,5 +152,7 @@ function processElementSoldermask(params: {
       realToCanvasMat,
       colorMap,
     })
+  } else if (element.type === "pcb_trace") {
+    return
   }
 }

package/lib/drawer/elements/pcb-soldermask/trace.ts

@@ -0,0 +1,65 @@
+import type { PcbTrace } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import type { CanvasContext } from "../../types"
+import { drawLine } from "../../shapes/line"
+import { drawPolygon } from "../../shapes/polygon"
+import { buildTracePolygon } from "../pcb-trace/build-trace-polygon"
+import { collectTraceSegments } from "../pcb-trace/collect-trace-segments"
+import { hasVariableWidth } from "../pcb-trace/has-variable-width"
+
+export function processTraceSoldermask(params: {
+  ctx: CanvasContext
+  trace: PcbTrace
+  realToCanvasMat: Matrix
+  soldermaskOverCopperColor: string
+  layer: "top" | "bottom"
+  drawSoldermask: boolean
+}): void {
+  const {
+    ctx,
+    trace,
+    realToCanvasMat,
+    soldermaskOverCopperColor,
+    layer,
+    drawSoldermask,
+  } = params
+
+  if (!drawSoldermask) return
+  if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
+    return
+  }
+
+  const segments = collectTraceSegments(trace.route)
+
+  for (const segment of segments) {
+    const segmentLayer = segment[0]?.layer
+    if (segmentLayer !== layer) continue
+
+    if (hasVariableWidth(segment)) {
+      const polygonPoints = buildTracePolygon(segment)
+      drawPolygon({
+        ctx,
+        points: polygonPoints,
+        fill: soldermaskOverCopperColor,
+        realToCanvasMat,
+      })
+      continue
+    }
+
+    for (let i = 0; i < segment.length - 1; i++) {
+      const start = segment[i]
+      const end = segment[i + 1]
+      if (!start || !end) continue
+
+      drawLine({
+        ctx,
+        start: { x: start.x, y: start.y },
+        end: { x: end.x, y: end.y },
+        strokeWidth: start.width,
+        stroke: soldermaskOverCopperColor,
+        realToCanvasMat,
+        lineCap: "round",
+      })
+    }
+  }
+}

package/lib/drawer/types.ts

@@ -91,7 +91,10 @@ export interface PcbColorMap {
     bottom: string
   }
   substrate: string
-  courtyard: string
+  courtyard: {
+    top: string
+    bottom: string
+  }
   keepout: string
   fabricationNote: string
 }
@@ -126,7 +129,10 @@ export const DEFAULT_PCB_COLOR_MAP: PcbColorMap = {
     bottom: "#5da9e9",
   },
   boardOutline: "rgba(255, 255, 255, 0.5)",
-  courtyard: "#FF00FF",
+  courtyard: {
+    top: "#FF00FF",
+    bottom: "rgb(38, 233, 255)",
+  },
   keepout: "#FF6B6B", // Red color for keepout zones
   fabricationNote: "rgba(255, 255, 255, 0.5)",
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "circuit-to-canvas",
   "main": "dist/index.js",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "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.374",
+    "circuit-json": "^0.0.375",
     "circuit-json-to-connectivity-map": "^0.0.23",
-    "circuit-to-svg": "^0.0.323",
+    "circuit-to-svg": "^0.0.324",
     "looks-same": "^10.0.1",
     "schematic-symbols": "^0.0.202",
     "tsup": "^8.5.1"