diff --git a/src/examples/2026/sparkfun-boards.fixture.tsx b/src/examples/2026/sparkfun-boards.fixture.tsx
new file mode 100644
index 00000000..d563dc3a
--- /dev/null
+++ b/src/examples/2026/sparkfun-boards.fixture.tsx
@@ -0,0 +1,116 @@
+import type React from "react"
+import { PCBViewer } from "../../PCBViewer"
+
+export const SparkfunBoards: React.FC = () => {
+
+ return (
+
+ )
+}
+
+export default SparkfunBoards
diff --git a/src/lib/draw-pcb-trace.ts b/src/lib/draw-pcb-trace.ts
index ce361baf..a1e075ee 100644
--- a/src/lib/draw-pcb-trace.ts
+++ b/src/lib/draw-pcb-trace.ts
@@ -1,4 +1,4 @@
-import type { AnyCircuitElement, PcbRenderLayer } from "circuit-json"
+import type { AnyCircuitElement, PcbRenderLayer, PcbTrace } from "circuit-json"
import {
CircuitToCanvasDrawer,
DEFAULT_PCB_COLOR_MAP,
@@ -25,7 +25,7 @@ const HOVER_COLOR_MAP: PcbColorMap = {
},
}
-export function isPcbTrace(element: AnyCircuitElement) {
+export function isPcbTrace(element: AnyCircuitElement): element is PcbTrace {
return element.type === "pcb_trace"
}
@@ -34,6 +34,25 @@ const normalizeCopperLayers = (layers: PcbRenderLayer[]) =>
layer.endsWith("_copper") ? layer.replace("_copper", "") : layer,
)
+const filterTraceByLayers = (
+ trace: PcbTrace,
+ targetLayers: Set,
+): PcbTrace | null => {
+ const filteredRoute = trace.route.filter(
+ (segment) =>
+ segment.route_type === "wire" &&
+ "layer" in segment &&
+ targetLayers.has(segment.layer),
+ )
+
+ if (filteredRoute.length === 0) return null
+
+ return {
+ ...trace,
+ route: filteredRoute,
+ }
+}
+
export function drawPcbTraceElementsForLayer({
canvas,
elements,
@@ -48,16 +67,11 @@ export function drawPcbTraceElementsForLayer({
primitives?: Primitive[]
}) {
const targetLayers = new Set(normalizeCopperLayers(layers))
+
const traceElements = elements
.filter(isPcbTrace)
- .filter((element) =>
- element.route.some(
- (segment) =>
- segment.route_type === "wire" &&
- "layer" in segment &&
- targetLayers.has(segment.layer),
- ),
- )
+ .map((trace) => filterTraceByLayers(trace, targetLayers))
+ .filter((trace): trace is PcbTrace => trace !== null)
if (traceElements.length === 0) return
@@ -73,12 +87,15 @@ export function drawPcbTraceElementsForLayer({
}
}
- const highlightedElements = traceElements.filter((element) =>
- highlightedElementIds.has(element.pcb_trace_id),
- )
- const nonHighlightedElements = traceElements.filter(
- (element) => !highlightedElementIds.has(element.pcb_trace_id),
- )
+ const highlightedElements: PcbTrace[] = []
+ const nonHighlightedElements: PcbTrace[] = []
+ for (const element of traceElements) {
+ if (highlightedElementIds.has(element.pcb_trace_id)) {
+ highlightedElements.push(element)
+ } else {
+ nonHighlightedElements.push(element)
+ }
+ }
if (nonHighlightedElements.length > 0) {
const drawer = new CircuitToCanvasDrawer(canvas)