Add support for PcbNotePath

src/utils/silkscreen-texture.ts

@@ -58,6 +58,7 @@ export function createSilkscreenTextureForLayer({
   const pcbSilkscreenCircles = su(circuitJson).pcb_silkscreen_circle.list()
   const pcbFabricationNoteRects =
     su(circuitJson).pcb_fabrication_note_rect.list()
+  const pcbNotePaths = su(circuitJson).pcb_note_path.list()
   const pcbNoteLines = su(circuitJson).pcb_note_line.list()
 
   const textsOnLayer = pcbSilkscreenTexts.filter((t) => t.layer === layer)
@@ -68,6 +69,9 @@ export function createSilkscreenTextureForLayer({
   const fabricationNoteRectsOnLayer = pcbFabricationNoteRects.filter(
     (r) => r.layer === layer,
   )
+  const notePathsOnLayer = pcbNotePaths.filter(
+    (p: any) => (p.layer ?? "top") === layer,
+  )
   const noteLinesOnLayer = pcbNoteLines.filter(
     (l) => (l as any).layer === layer,
   )
@@ -78,6 +82,7 @@ export function createSilkscreenTextureForLayer({
     rectsOnLayer.length === 0 &&
     circlesOnLayer.length === 0 &&
     fabricationNoteRectsOnLayer.length === 0 &&
+    notePathsOnLayer.length === 0 &&
     noteLinesOnLayer.length === 0
   ) {
     return null
@@ -434,6 +439,36 @@ export function createSilkscreenTextureForLayer({
     ctx.restore()
   })
 
+  // Draw PCB Note Paths
+  notePathsOnLayer.forEach((path: any) => {
+    if (path.route.length < 2) return
+
+    // Parse color for note paths (default to light yellow/orange like fabrication notes)
+    let strokeColor = silkscreenColor
+    if (path.color) {
+      strokeColor = parseFabricationNoteColor(path.color)
+    } else {
+      // Default note path color: light yellow/orange
+      strokeColor = "rgb(255, 243, 204)"
+    }
+
+    ctx.save()
+    ctx.beginPath()
+    ctx.strokeStyle = strokeColor
+    ctx.lineWidth =
+      coerceDimensionToMm(path.stroke_width, 0.1) * traceTextureResolution
+    ctx.lineCap = "round"
+    ctx.lineJoin = "round"
+    path.route.forEach((point: any, index: number) => {
+      const canvasX = canvasXFromPcb(parseDimensionToMm(point.x) ?? 0)
+      const canvasY = canvasYFromPcb(parseDimensionToMm(point.y) ?? 0)
+      if (index === 0) ctx.moveTo(canvasX, canvasY)
+      else ctx.lineTo(canvasX, canvasY)
+    })
+    ctx.stroke()
+    ctx.restore()
+  })
+
   // Draw Silkscreen Text
   textsOnLayer.forEach((textS: any) => {
     const fontSize = textS.font_size || 0.25

stories/PcbNotePath.stories.tsx

@@ -0,0 +1,145 @@
+import { CadViewer } from "src/CadViewer"
+
+const pcbNotePathCircuit = [
+  {
+    type: "pcb_board",
+    pcb_board_id: "pcb_board_1",
+    center: { x: 0, y: 0 },
+    width: 15,
+    height: 8,
+    thickness: 1,
+    num_layers: 2,
+    material: "fr4",
+  },
+  {
+    type: "pcb_component",
+    pcb_component_id: "pcb_component_1",
+    center: { x: 0, y: 0 },
+    width: 0,
+    height: 0,
+    rotation: 0,
+    layer: "top",
+    obstructs_within_bounds: false,
+    do_not_place: true,
+  },
+  {
+    type: "pcb_component",
+    pcb_component_id: "pcb_component_bottom",
+    center: { x: 0, y: 0 },
+    width: 0,
+    height: 0,
+    rotation: 0,
+    layer: "bottom",
+    obstructs_within_bounds: false,
+    do_not_place: true,
+  },
+  {
+    type: "pcb_note_path",
+    pcb_note_path_id: "pcb_note_path_1",
+    pcb_component_id: "pcb_component_1",
+    route: [
+      { x: -3, y: 2 },
+      { x: -1, y: 2 },
+      { x: -1, y: 0 },
+      { x: 1, y: 0 },
+    ],
+    stroke_width: "0.15mm",
+    layer: "top",
+  },
+  {
+    type: "pcb_note_path",
+    pcb_note_path_id: "pcb_note_path_2",
+    pcb_component_id: "pcb_component_1",
+    route: [
+      { x: 1, y: 2 },
+      { x: 3, y: 2 },
+      { x: 3, y: 0 },
+      { x: 1, y: 0 },
+      { x: 1, y: 2 },
+    ],
+    stroke_width: "0.2mm",
+    color: "#FF6B6B",
+    layer: "top",
+  },
+  {
+    type: "pcb_note_path",
+    pcb_note_path_id: "pcb_note_path_3",
+    pcb_component_id: "pcb_component_1",
+    route: [
+      { x: -3, y: -1 },
+      { x: -2, y: -2 },
+      { x: -1, y: -1 },
+      { x: 0, y: -2 },
+      { x: 1, y: -1 },
+    ],
+    stroke_width: "0.1mm",
+    color: "#4ECDC4",
+    layer: "top",
+  },
+  {
+    type: "pcb_note_path",
+    pcb_note_path_id: "pcb_note_path_4",
+    pcb_component_id: "pcb_component_1",
+    route: [
+      { x: 2, y: -1 },
+      { x: 4, y: -1 },
+      { x: 4, y: -2.5 },
+      { x: 2, y: -2.5 },
+      { x: 2, y: -1 },
+    ],
+    stroke_width: "0.25mm",
+    layer: "top",
+  },
+  {
+    type: "pcb_note_path",
+    pcb_note_path_id: "pcb_note_path_5",
+    pcb_component_id: "pcb_component_bottom",
+    route: [
+      { x: -2, y: 1 },
+      { x: 0, y: 1 },
+      { x: 0, y: -1 },
+      { x: 2, y: -1 },
+    ],
+    stroke_width: "0.15mm",
+    color: "rgb(255, 200, 100)",
+    layer: "bottom",
+  },
+  {
+    type: "pcb_note_path",
+    pcb_note_path_id: "pcb_note_path_6",
+    pcb_component_id: "pcb_component_1",
+    route: [
+      { x: -4, y: 3 },
+      { x: -4, y: 3.5 },
+      { x: -3.5, y: 3.5 },
+      { x: -3.5, y: 3 },
+      { x: -4, y: 3 },
+    ],
+    stroke_width: "0.1mm",
+    color: "#9B59B6",
+    layer: "top",
+  },
+  {
+    type: "pcb_note_path",
+    pcb_note_path_id: "pcb_note_path_7",
+    pcb_component_id: "pcb_component_1",
+    route: [
+      { x: 4, y: 3 },
+      { x: 5, y: 3.5 },
+      { x: 5.5, y: 3 },
+      { x: 5, y: 2.5 },
+      { x: 4, y: 3 },
+    ],
+    stroke_width: "0.12mm",
+    layer: "top",
+  },
+]
+
+export const PcbNotePaths = () => (
+  <CadViewer circuitJson={pcbNotePathCircuit as any} />
+)
+
+export default {
+  title: "PCB Note Path",
+  component: PcbNotePaths,
+}