circuit-to-canvas 0.0.59 → 0.0.60

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PcbHole, PcbSmtPad, PCBTrace, PcbBoard, PcbPanel, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PCBKeepout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension, PcbFabricationNoteDimension } from 'circuit-json';
+import { AnyCircuitElement, PcbRenderLayer, NinePointAnchor, PcbPlatedHole, PCBVia, PcbHole, PcbSmtPad, PcbTrace, PcbBoard, PcbPanel, PcbSilkscreenText, PcbSilkscreenRect, PcbSilkscreenCircle, PcbSilkscreenLine, PcbSilkscreenPath, PcbSilkscreenPill, PcbSilkscreenOval, PcbCutout, PCBKeepout, PcbCopperPour, PcbCopperText, PcbFabricationNoteText, PcbFabricationNoteRect, PcbNoteRect, PcbFabricationNotePath, PcbNotePath, PcbNoteText, PcbNoteDimension, PcbFabricationNoteDimension } from 'circuit-json';
 import { Matrix } from 'transformation-matrix';
 
 /**
@@ -372,7 +372,7 @@ declare function drawSoldermaskRingForOval(ctx: CanvasContext, center: {
 
 interface DrawPcbTraceParams {
     ctx: CanvasContext;
-    trace: PCBTrace;
+    trace: PcbTrace;
     realToCanvasMat: Matrix;
     colorMap: PcbColorMap;
 }

package/dist/index.js

@@ -3101,32 +3101,165 @@ function processElementSoldermask(params) {
   }
 }
 
-// lib/drawer/elements/pcb-trace.ts
+// lib/drawer/elements/pcb-trace/normalize-trace-direction.ts
+function normalizeTraceDirection(x, y) {
+  const length = Math.hypot(x, y);
+  if (length <= Number.EPSILON) return { x: 0, y: 0 };
+  return { x: x / length, y: y / length };
+}
+
+// lib/drawer/elements/pcb-trace/get-trace-direction-at.ts
+function getTraceDirectionAt(points, index) {
+  const count = points.length;
+  if (count < 2) return { x: 1, y: 0 };
+  if (index <= 0) {
+    const next2 = points[1];
+    const current2 = points[0];
+    if (!next2 || !current2) return { x: 1, y: 0 };
+    const dir = normalizeTraceDirection(next2.x - current2.x, next2.y - current2.y);
+    return dir.x === 0 && dir.y === 0 ? { x: 1, y: 0 } : dir;
+  }
+  if (index >= count - 1) {
+    const prev2 = points[count - 2];
+    const current2 = points[count - 1];
+    if (!prev2 || !current2) return { x: 1, y: 0 };
+    const dir = normalizeTraceDirection(current2.x - prev2.x, current2.y - prev2.y);
+    return dir.x === 0 && dir.y === 0 ? { x: 1, y: 0 } : dir;
+  }
+  const prev = points[index - 1];
+  const current = points[index];
+  const next = points[index + 1];
+  if (!prev || !current || !next) return { x: 1, y: 0 };
+  const prevDir = normalizeTraceDirection(
+    current.x - prev.x,
+    current.y - prev.y
+  );
+  const nextDir = normalizeTraceDirection(
+    next.x - current.x,
+    next.y - current.y
+  );
+  const sum = normalizeTraceDirection(
+    prevDir.x + nextDir.x,
+    prevDir.y + nextDir.y
+  );
+  if (sum.x === 0 && sum.y === 0) {
+    if (prevDir.x !== 0 || prevDir.y !== 0) return prevDir;
+    if (nextDir.x !== 0 || nextDir.y !== 0) return nextDir;
+    return { x: 1, y: 0 };
+  }
+  return sum;
+}
+
+// lib/drawer/elements/pcb-trace/build-trace-polygon.ts
+function buildTracePolygon(points) {
+  const left = [];
+  const right = [];
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i];
+    if (!point) continue;
+    const dir = getTraceDirectionAt(points, i);
+    const normal = normalizeTraceDirection(-dir.y, dir.x);
+    const offset = point.width / 2;
+    left.push({
+      x: point.x + normal.x * offset,
+      y: point.y + normal.y * offset
+    });
+    right.push({
+      x: point.x - normal.x * offset,
+      y: point.y - normal.y * offset
+    });
+  }
+  return left.concat(right.reverse());
+}
+
+// lib/drawer/elements/pcb-trace/collect-trace-segments.ts
+function collectTraceSegments(route) {
+  const segments = [];
+  let current = [];
+  let currentLayer = null;
+  for (const routePoint of route ?? []) {
+    if (!routePoint || routePoint.route_type !== "wire") {
+      if (current.length >= 2) segments.push(current);
+      current = [];
+      currentLayer = null;
+      continue;
+    }
+    const layer = routePoint.layer ?? currentLayer;
+    if (!layer) continue;
+    const x = routePoint.x;
+    const y = routePoint.y;
+    if (typeof x !== "number" || typeof y !== "number") continue;
+    if (typeof routePoint.width !== "number") continue;
+    const width = routePoint.width;
+    if (currentLayer && layer !== currentLayer) {
+      if (current.length >= 2) segments.push(current);
+      current = [];
+    }
+    currentLayer = layer;
+    current.push({
+      route_type: "wire",
+      x,
+      y,
+      width,
+      layer,
+      start_pcb_port_id: "start_pcb_port_id" in routePoint ? routePoint.start_pcb_port_id : void 0,
+      end_pcb_port_id: "end_pcb_port_id" in routePoint ? routePoint.end_pcb_port_id : void 0
+    });
+  }
+  if (current.length >= 2) segments.push(current);
+  return segments;
+}
+
+// lib/drawer/elements/pcb-trace/has-variable-width.ts
+function hasVariableWidth(points) {
+  if (points.length < 2) return false;
+  const baseWidth = points[0]?.width;
+  if (typeof baseWidth !== "number") return false;
+  return points.some(
+    (point) => Math.abs(point.width - baseWidth) > Number.EPSILON
+  );
+}
+
+// lib/drawer/elements/pcb-trace/layer-to-color.ts
 function layerToColor4(layer, colorMap) {
   return colorMap.copper[layer] ?? colorMap.copper.top;
 }
+
+// lib/drawer/elements/pcb-trace/pcb-trace.ts
 function drawPcbTrace(params) {
   const { ctx, trace, realToCanvasMat, colorMap } = params;
   if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
     return;
   }
-  for (let i = 0; i < trace.route.length - 1; i++) {
-    const start = trace.route[i];
-    const end = trace.route[i + 1];
-    if (!start || !end) continue;
-    const layer = "layer" in start ? start.layer : "layer" in end ? end.layer : null;
+  const segments = collectTraceSegments(trace.route);
+  for (const segment of segments) {
+    const layer = segment[0]?.layer;
     if (!layer) continue;
     const color = layerToColor4(layer, colorMap);
-    const traceWidth = "width" in start ? start.width : "width" in end ? end.width : 0.1;
-    drawLine({
-      ctx,
-      start: { x: start.x, y: start.y },
-      end: { x: end.x, y: end.y },
-      strokeWidth: traceWidth,
-      stroke: color,
-      realToCanvasMat,
-      lineCap: "round"
-    });
+    if (hasVariableWidth(segment)) {
+      const polygonPoints = buildTracePolygon(segment);
+      drawPolygon({
+        ctx,
+        points: polygonPoints,
+        fill: color,
+        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: color,
+        realToCanvasMat,
+        lineCap: "round"
+      });
+    }
   }
 }
 

package/lib/drawer/CircuitToCanvasDrawer.ts

@@ -63,7 +63,7 @@ import { drawPcbSilkscreenRect } from "./elements/pcb-silkscreen-rect"
 import { drawPcbSilkscreenText } from "./elements/pcb-silkscreen-text"
 import { drawPcbSmtPad } from "./elements/pcb-smtpad"
 import { drawPcbSoldermask } from "./elements/pcb-soldermask"
-import { drawPcbTrace } from "./elements/pcb-trace"
+import { drawPcbTrace } from "./elements/pcb-trace/pcb-trace"
 import { drawPcbVia } from "./elements/pcb-via"
 import { shouldDrawElement } from "./pcb-render-layer-filter"
 import {

package/lib/drawer/elements/index.ts

@@ -15,7 +15,7 @@ export {
   drawSoldermaskRingForOval,
 } from "./soldermask-margin"
 
-export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace"
+export { drawPcbTrace, type DrawPcbTraceParams } from "./pcb-trace/pcb-trace"
 
 export { drawPcbBoard, type DrawPcbBoardParams } from "./pcb-board"
 

package/lib/drawer/elements/pcb-trace/build-trace-polygon.ts

@@ -0,0 +1,30 @@
+import type { PcbTraceRoutePointWire } from "circuit-json"
+import { getTraceDirectionAt } from "./get-trace-direction-at"
+import { normalizeTraceDirection } from "./normalize-trace-direction"
+
+// Builds a filled polygon representing a variable-width trace segment.
+export function buildTracePolygon(
+  points: PcbTraceRoutePointWire[],
+): Array<{ x: number; y: number }> {
+  const left: Array<{ x: number; y: number }> = []
+  const right: Array<{ x: number; y: number }> = []
+
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i]
+    if (!point) continue
+    const dir = getTraceDirectionAt(points, i)
+    const normal = normalizeTraceDirection(-dir.y, dir.x)
+    const offset = point.width / 2
+
+    left.push({
+      x: point.x + normal.x * offset,
+      y: point.y + normal.y * offset,
+    })
+    right.push({
+      x: point.x - normal.x * offset,
+      y: point.y - normal.y * offset,
+    })
+  }
+
+  return left.concat(right.reverse())
+}

package/lib/drawer/elements/pcb-trace/collect-trace-segments.ts

@@ -0,0 +1,55 @@
+import type { LayerRef, PcbTrace, PcbTraceRoutePointWire } from "circuit-json"
+
+// Splits a trace route into contiguous wire segments by layer.
+export function collectTraceSegments(
+  route: PcbTrace["route"],
+): PcbTraceRoutePointWire[][] {
+  const segments: PcbTraceRoutePointWire[][] = []
+  let current: PcbTraceRoutePointWire[] = []
+  let currentLayer: LayerRef | null = null
+
+  for (const routePoint of route ?? []) {
+    if (!routePoint || routePoint.route_type !== "wire") {
+      if (current.length >= 2) segments.push(current)
+      current = []
+      currentLayer = null
+      continue
+    }
+
+    const layer: LayerRef | null = routePoint.layer ?? currentLayer
+
+    if (!layer) continue
+
+    const x = routePoint.x
+    const y = routePoint.y
+    if (typeof x !== "number" || typeof y !== "number") continue
+
+    if (typeof routePoint.width !== "number") continue
+    const width = routePoint.width
+
+    if (currentLayer && layer !== currentLayer) {
+      if (current.length >= 2) segments.push(current)
+      current = []
+    }
+
+    currentLayer = layer
+    current.push({
+      route_type: "wire",
+      x,
+      y,
+      width,
+      layer,
+      start_pcb_port_id:
+        "start_pcb_port_id" in routePoint
+          ? routePoint.start_pcb_port_id
+          : undefined,
+      end_pcb_port_id:
+        "end_pcb_port_id" in routePoint
+          ? routePoint.end_pcb_port_id
+          : undefined,
+    })
+  }
+
+  if (current.length >= 2) segments.push(current)
+  return segments
+}

package/lib/drawer/elements/pcb-trace/get-trace-direction-at.ts

@@ -0,0 +1,56 @@
+import type { PcbTraceRoutePointWire } from "circuit-json"
+import { normalizeTraceDirection } from "./normalize-trace-direction"
+
+// Returns a unit direction for a trace at a point index.
+export function getTraceDirectionAt(
+  points: PcbTraceRoutePointWire[],
+  index: number,
+): {
+  x: number
+  y: number
+} {
+  const count = points.length
+  if (count < 2) return { x: 1, y: 0 }
+
+  if (index <= 0) {
+    const next = points[1]
+    const current = points[0]
+    if (!next || !current) return { x: 1, y: 0 }
+    const dir = normalizeTraceDirection(next.x - current.x, next.y - current.y)
+    return dir.x === 0 && dir.y === 0 ? { x: 1, y: 0 } : dir
+  }
+
+  if (index >= count - 1) {
+    const prev = points[count - 2]
+    const current = points[count - 1]
+    if (!prev || !current) return { x: 1, y: 0 }
+    const dir = normalizeTraceDirection(current.x - prev.x, current.y - prev.y)
+    return dir.x === 0 && dir.y === 0 ? { x: 1, y: 0 } : dir
+  }
+
+  const prev = points[index - 1]
+  const current = points[index]
+  const next = points[index + 1]
+  if (!prev || !current || !next) return { x: 1, y: 0 }
+
+  const prevDir = normalizeTraceDirection(
+    current.x - prev.x,
+    current.y - prev.y,
+  )
+  const nextDir = normalizeTraceDirection(
+    next.x - current.x,
+    next.y - current.y,
+  )
+  const sum = normalizeTraceDirection(
+    prevDir.x + nextDir.x,
+    prevDir.y + nextDir.y,
+  )
+
+  if (sum.x === 0 && sum.y === 0) {
+    if (prevDir.x !== 0 || prevDir.y !== 0) return prevDir
+    if (nextDir.x !== 0 || nextDir.y !== 0) return nextDir
+    return { x: 1, y: 0 }
+  }
+
+  return sum
+}

package/lib/drawer/elements/pcb-trace/has-variable-width.ts

@@ -0,0 +1,11 @@
+import type { PcbTraceRoutePointWire } from "circuit-json"
+
+// Returns true when any wire point width differs from the first.
+export function hasVariableWidth(points: PcbTraceRoutePointWire[]): boolean {
+  if (points.length < 2) return false
+  const baseWidth = points[0]?.width
+  if (typeof baseWidth !== "number") return false
+  return points.some(
+    (point) => Math.abs(point.width - baseWidth) > Number.EPSILON,
+  )
+}

package/lib/drawer/elements/pcb-trace/layer-to-color.ts

@@ -0,0 +1,10 @@
+import type { LayerRef } from "circuit-json"
+import type { PcbColorMap } from "../../types"
+
+// Resolves a copper layer to its configured trace color.
+export function layerToColor(layer: LayerRef, colorMap: PcbColorMap): string {
+  return (
+    colorMap.copper[layer as keyof typeof colorMap.copper] ??
+    colorMap.copper.top
+  )
+}

package/lib/drawer/elements/pcb-trace/normalize-trace-direction.ts

@@ -0,0 +1,9 @@
+// Returns a unit-length trace direction; used to keep offsets/join math consistent.
+export function normalizeTraceDirection(
+  x: number,
+  y: number,
+): { x: number; y: number } {
+  const length = Math.hypot(x, y)
+  if (length <= Number.EPSILON) return { x: 0, y: 0 }
+  return { x: x / length, y: y / length }
+}

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

@@ -0,0 +1,60 @@
+import type { PcbTrace } from "circuit-json"
+import type { Matrix } from "transformation-matrix"
+import { drawLine } from "../../shapes/line"
+import { drawPolygon } from "../../shapes/polygon"
+import type { CanvasContext, PcbColorMap } from "../../types"
+import { buildTracePolygon } from "./build-trace-polygon"
+import { collectTraceSegments } from "./collect-trace-segments"
+import { hasVariableWidth } from "./has-variable-width"
+import { layerToColor } from "./layer-to-color"
+
+export interface DrawPcbTraceParams {
+  ctx: CanvasContext
+  trace: PcbTrace
+  realToCanvasMat: Matrix
+  colorMap: PcbColorMap
+}
+
+// Draws a PCB trace route as lines or a filled polygon when widths vary.
+export function drawPcbTrace(params: DrawPcbTraceParams): void {
+  const { ctx, trace, realToCanvasMat, colorMap } = params
+
+  if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
+    return
+  }
+
+  const segments = collectTraceSegments(trace.route)
+
+  for (const segment of segments) {
+    const layer = segment[0]?.layer
+    if (!layer) continue
+    const color = layerToColor(layer, colorMap)
+
+    if (hasVariableWidth(segment)) {
+      const polygonPoints = buildTracePolygon(segment)
+      drawPolygon({
+        ctx,
+        points: polygonPoints,
+        fill: color,
+        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: color,
+        realToCanvasMat,
+        lineCap: "round",
+      })
+    }
+  }
+}

package/package.json

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

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

@@ -1,59 +0,0 @@
-import type { PCBTrace } from "circuit-json"
-import type { Matrix } from "transformation-matrix"
-import type { PcbColorMap, CanvasContext } from "../types"
-import { drawLine } from "../shapes/line"
-
-export interface DrawPcbTraceParams {
-  ctx: CanvasContext
-  trace: PCBTrace
-  realToCanvasMat: Matrix
-  colorMap: PcbColorMap
-}
-
-function layerToColor(layer: string, colorMap: PcbColorMap): string {
-  return (
-    colorMap.copper[layer as keyof typeof colorMap.copper] ??
-    colorMap.copper.top
-  )
-}
-
-export function drawPcbTrace(params: DrawPcbTraceParams): void {
-  const { ctx, trace, realToCanvasMat, colorMap } = params
-
-  if (!trace.route || !Array.isArray(trace.route) || trace.route.length < 2) {
-    return
-  }
-
-  // Draw each segment of the trace
-  for (let i = 0; i < trace.route.length - 1; i++) {
-    const start = trace.route[i]
-    const end = trace.route[i + 1]
-
-    if (!start || !end) continue
-
-    // Get the layer from either point
-    const layer =
-      "layer" in start
-        ? start.layer
-        : "layer" in end
-          ? (end as any).layer
-          : null
-    if (!layer) continue
-
-    const color = layerToColor(layer, colorMap)
-
-    // Get the trace width from either point
-    const traceWidth =
-      "width" in start ? start.width : "width" in end ? (end as any).width : 0.1
-
-    drawLine({
-      ctx,
-      start: { x: start.x, y: start.y },
-      end: { x: end.x, y: end.y },
-      strokeWidth: traceWidth,
-      stroke: color,
-      realToCanvasMat,
-      lineCap: "round",
-    })
-  }
-}