circuit-to-canvas 0.0.58 → 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.58",
+  "version": "0.0.60",
   "type": "module",
   "scripts": {
     "build": "tsup-node ./lib/index.ts --format esm --dts",

package/tests/elements/pcb-trace-hints.test.ts

@@ -0,0 +1,259 @@
+import { expect, test } from "bun:test"
+import { createCanvas } from "@napi-rs/canvas"
+import { CircuitToCanvasDrawer } from "../../lib/drawer"
+
+test("draw trace with port hints", async () => {
+  const canvas = createCanvas(800, 600)
+  const ctx = canvas.getContext("2d")
+  const drawer = new CircuitToCanvasDrawer(ctx)
+
+  drawer.setCameraBounds({ minX: -8, minY: -2, maxX: 0, maxY: 6 })
+
+  ctx.fillStyle = "#1a1a1a"
+  ctx.fillRect(0, 0, 800, 600)
+
+  const circuit: any = [
+    {
+      type: "source_component",
+      source_component_id: "simple_resistor_0",
+      name: "R1",
+      supplier_part_numbers: {},
+      ftype: "simple_resistor",
+      resistance: "10k",
+      pcbX: -5,
+      pcbY: 0,
+    },
+    {
+      type: "schematic_component",
+      source_component_id: "simple_resistor_0",
+      schematic_component_id: "schematic_component_simple_resistor_0",
+      rotation: 0,
+      size: {
+        width: 1,
+        height: 0.3,
+      },
+      center: {
+        x: 0,
+        y: 0,
+      },
+    },
+    {
+      type: "source_port",
+      name: "left",
+      source_port_id: "source_port_0",
+      source_component_id: "simple_resistor_0",
+    },
+    {
+      type: "schematic_port",
+      schematic_port_id: "schematic_port_0",
+      source_port_id: "source_port_0",
+      center: {
+        x: -0.5,
+        y: 0,
+      },
+      facing_direction: "left",
+      schematic_component_id: "schematic_component_simple_resistor_0",
+    },
+    {
+      type: "pcb_port",
+      pcb_port_id: "pcb_port_0",
+      source_port_id: "source_port_0",
+      pcb_component_id: "pcb_component_simple_resistor_0",
+      x: -5.95,
+      y: 0,
+      layers: ["top"],
+    },
+    {
+      type: "source_port",
+      name: "right",
+      source_port_id: "source_port_1",
+      source_component_id: "simple_resistor_0",
+    },
+    {
+      type: "schematic_port",
+      schematic_port_id: "schematic_port_1",
+      source_port_id: "source_port_1",
+      center: {
+        x: 0.5,
+        y: 0,
+      },
+      facing_direction: "right",
+      schematic_component_id: "schematic_component_simple_resistor_0",
+    },
+    {
+      type: "pcb_port",
+      pcb_port_id: "pcb_port_1",
+      source_port_id: "source_port_1",
+      pcb_component_id: "pcb_component_simple_resistor_0",
+      x: -4.05,
+      y: 0,
+      layers: ["top"],
+    },
+    {
+      type: "schematic_text",
+      text: "R1",
+      schematic_text_id: "schematic_text_0",
+      schematic_component_id: "schematic_component_simple_resistor_0",
+      anchor: "left",
+      position: {
+        x: -0.2,
+        y: -0.5,
+      },
+      rotation: 0,
+    },
+    {
+      type: "schematic_text",
+      text: "10k",
+      schematic_text_id: "schematic_text_1",
+      schematic_component_id: "schematic_component_simple_resistor_0",
+      anchor: "left",
+      position: {
+        x: -0.2,
+        y: -0.3,
+      },
+      rotation: 0,
+    },
+    {
+      type: "pcb_component",
+      source_component_id: "simple_resistor_0",
+      pcb_component_id: "pcb_component_simple_resistor_0",
+      layer: "top",
+      center: {
+        x: -5,
+        y: 0,
+      },
+      rotation: 0,
+      width: 3.1,
+      height: 1.2,
+    },
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pcb_smtpad_0",
+      shape: "rect",
+      x: -5.95,
+      y: 0,
+      width: 1.2,
+      height: 1.2,
+      layer: "top",
+      pcb_component_id: "pcb_component_simple_resistor_0",
+      port_hints: ["1", "left"],
+      pcb_port_id: "pcb_port_0",
+    },
+    {
+      type: "pcb_smtpad",
+      pcb_smtpad_id: "pcb_smtpad_1",
+      shape: "rect",
+      x: -4.05,
+      y: 0,
+      width: 1.2,
+      height: 1.2,
+      layer: "top",
+      pcb_component_id: "pcb_component_simple_resistor_0",
+      port_hints: ["2", "right"],
+      pcb_port_id: "pcb_port_1",
+    },
+    {
+      type: "source_trace",
+      source_trace_id: "source_trace_0",
+      connected_source_port_ids: ["source_port_0", "source_port_1"],
+      connected_source_net_ids: [],
+    },
+    {
+      type: "schematic_trace",
+      source_trace_id: "source_trace_0",
+      schematic_trace_id: "schematic_trace_0",
+      edges: [
+        {
+          from: {
+            x: -0.6000000000000001,
+            y: 0,
+          },
+          to: {
+            x: -0.6000000000000001,
+            y: -0.19999999999999996,
+          },
+        },
+        {
+          from: {
+            x: -0.6000000000000001,
+            y: -0.19999999999999996,
+          },
+          to: {
+            x: 0.7000000000000002,
+            y: -0.19999999999999996,
+          },
+        },
+        {
+          from: {
+            x: 0.7000000000000002,
+            y: -0.19999999999999996,
+          },
+          to: {
+            x: 0.7000000000000002,
+            y: 0,
+          },
+        },
+        {
+          from: {
+            x: -0.5,
+            y: 0,
+            ti: 0,
+          },
+          to: {
+            x: -0.6000000000000001,
+            y: 0,
+          },
+        },
+        {
+          from: {
+            x: 0.5,
+            y: 0,
+            ti: 1,
+          },
+          to: {
+            x: 0.7000000000000002,
+            y: 0,
+          },
+        },
+      ],
+    },
+    {
+      type: "pcb_trace",
+      pcb_trace_id: "pcb_trace_0",
+      source_trace_id: "source_trace_0",
+      route_thickness_mode: "interpolated",
+      route: [
+        {
+          route_type: "wire",
+          layer: "top",
+          width: 0.2,
+          x: -4,
+          y: 0,
+          start_pcb_port_id: "pcb_port_0",
+        },
+        {
+          route_type: "wire",
+          layer: "top",
+          width: 0.5,
+          x: -5.9,
+          y: 4,
+          start_pcb_port_id: "pcb_port_1",
+        },
+        {
+          route_type: "wire",
+          layer: "top",
+          width: 0.5,
+          x: -5.9,
+          y: 0,
+          start_pcb_port_id: "pcb_port_1",
+        },
+      ],
+    },
+  ]
+
+  drawer.drawElements(circuit)
+
+  await expect(canvas.toBuffer("image/png")).toMatchPngSnapshot(
+    import.meta.path,
+  )
+})

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",
-    })
-  }
-}