Add View Toggle For Fabrication Notes (Default Hidden)

Author: ShiboSoftwareDev

src/components/CanvasPrimitiveRenderer.tsx

@@ -71,25 +71,25 @@ export const CanvasPrimitiveRenderer = ({
   const canvasRefs = useRef<Record<string, HTMLCanvasElement>>({})
   const selectedLayer = useGlobalStore((s) => s.selected_layer)
   const isShowingSolderMask = useGlobalStore((s) => s.is_showing_solder_mask)
+  const isShowingFabricationNotes = useGlobalStore(
+    (s) => s.is_showing_fabrication_notes,
+  )
 
   useEffect(() => {
     if (!canvasRefs.current) return
     if (Object.keys(canvasRefs.current).length === 0) return
 
-    // Filter out null canvas refs and solder mask layers when disabled
-    const filteredCanvasRefs = Object.fromEntries(
+    // Keep all non-null canvas refs so hidden layers are still cleared.
+    const availableCanvasRefs = Object.fromEntries(
       Object.entries(canvasRefs.current).filter(([layer, canvas]) => {
         if (!canvas) return false
-        if (!isShowingSolderMask && layer.includes("soldermask")) {
-          return false
-        }
         return true
       }),
     )
 
-    if (Object.keys(filteredCanvasRefs).length === 0) return
+    if (Object.keys(availableCanvasRefs).length === 0) return
 
-    const drawer = new Drawer(filteredCanvasRefs)
+    const drawer = new Drawer(availableCanvasRefs)
     if (transform) drawer.transform = transform
     drawer.clear()
     drawer.foregroundLayer = selectedLayer
@@ -98,6 +98,9 @@ export const CanvasPrimitiveRenderer = ({
     // Also filter out SMT pad primitives since they're drawn with circuit-to-canvas
     const filteredPrimitives = primitives
       .filter((p) => isShowingSolderMask || !p.layer?.includes("soldermask"))
+      .filter(
+        (p) => isShowingFabricationNotes || !p.layer?.includes("fabrication"),
+      )
       .filter((p) => p.layer !== "board")
       .filter((p) => p._element?.type !== "pcb_smtpad")
       .filter((p) => p._element?.type !== "pcb_plated_hole")
@@ -304,25 +307,27 @@ export const CanvasPrimitiveRenderer = ({
       }
 
       // Draw top fabrication
-      const topFabCanvas = canvasRefs.current.top_fabrication
-      if (topFabCanvas) {
-        drawFabricationNoteElementsForLayer({
-          canvas: topFabCanvas,
-          elements,
-          layers: ["top_fabrication_note"],
-          realToCanvasMat: transform,
-        })
-      }
+      if (isShowingFabricationNotes) {
+        const topFabCanvas = canvasRefs.current.top_fabrication
+        if (topFabCanvas) {
+          drawFabricationNoteElementsForLayer({
+            canvas: topFabCanvas,
+            elements,
+            layers: ["top_fabrication_note"],
+            realToCanvasMat: transform,
+          })
+        }
 
-      // Draw bottom fabrication
-      const bottomFabCanvas = canvasRefs.current.bottom_fabrication
-      if (bottomFabCanvas) {
-        drawFabricationNoteElementsForLayer({
-          canvas: bottomFabCanvas,
-          elements,
-          layers: ["bottom_fabrication_note"],
-          realToCanvasMat: transform,
-        })
+        // Draw bottom fabrication
+        const bottomFabCanvas = canvasRefs.current.bottom_fabrication
+        if (bottomFabCanvas) {
+          drawFabricationNoteElementsForLayer({
+            canvas: bottomFabCanvas,
+            elements,
+            layers: ["bottom_fabrication_note"],
+            realToCanvasMat: transform,
+          })
+        }
       }
 
       // Draw bottom notes
@@ -417,7 +422,14 @@ export const CanvasPrimitiveRenderer = ({
     }
 
     drawer.orderAndFadeLayers()
-  }, [primitives, elements, transform, selectedLayer, isShowingSolderMask])
+  }, [
+    primitives,
+    elements,
+    transform,
+    selectedLayer,
+    isShowingSolderMask,
+    isShowingFabricationNotes,
+  ])
 
   return (
     <div

src/components/ToolbarOverlay.tsx

@@ -244,6 +244,7 @@ export const ToolbarOverlay = ({ children, elements }: Props) => {
     setIsShowingPcbGroups,
     setIsShowingGroupAnchorOffsets,
     setIsShowingSolderMask,
+    setIsShowingFabricationNotes,
     setPcbGroupViewMode,
     setHoveredErrorId,
   } = useGlobalStore((s) => ({
@@ -264,6 +265,7 @@ export const ToolbarOverlay = ({ children, elements }: Props) => {
       is_showing_pcb_groups: s.is_showing_pcb_groups,
       is_showing_group_anchor_offsets: s.is_showing_group_anchor_offsets,
       is_showing_solder_mask: s.is_showing_solder_mask,
+      is_showing_fabrication_notes: s.is_showing_fabrication_notes,
       pcb_group_view_mode: s.pcb_group_view_mode,
     },
     setEditMode: s.setEditMode,
@@ -275,6 +277,7 @@ export const ToolbarOverlay = ({ children, elements }: Props) => {
     setIsShowingPcbGroups: s.setIsShowingPcbGroups,
     setIsShowingGroupAnchorOffsets: s.setIsShowingGroupAnchorOffsets,
     setIsShowingSolderMask: s.setIsShowingSolderMask,
+    setIsShowingFabricationNotes: s.setIsShowingFabricationNotes,
     setPcbGroupViewMode: s.setPcbGroupViewMode,
     setHoveredErrorId: s.setHoveredErrorId,
   }))
@@ -823,6 +826,15 @@ export const ToolbarOverlay = ({ children, elements }: Props) => {
                     setIsShowingSolderMask(!viewSettings.is_showing_solder_mask)
                   }}
                 />
+                <CheckboxMenuItem
+                  label="Show Fabrication Notes"
+                  checked={viewSettings.is_showing_fabrication_notes}
+                  onClick={() => {
+                    setIsShowingFabricationNotes(
+                      !viewSettings.is_showing_fabrication_notes,
+                    )
+                  }}
+                />
                 <CheckboxMenuItem
                   label="Show Group Anchor Offsets"
                   checked={viewSettings.is_showing_group_anchor_offsets}

src/global-store.ts

@@ -34,6 +34,7 @@ export interface State {
   is_showing_pcb_groups: boolean
   is_showing_group_anchor_offsets: boolean
   is_showing_solder_mask: boolean
+  is_showing_fabrication_notes: boolean
   pcb_group_view_mode: "all" | "named_only"
 
   hovered_error_id: string | null
@@ -51,6 +52,7 @@ export interface State {
   setIsShowingPcbGroups: (is_showing: boolean) => void
   setIsShowingGroupAnchorOffsets: (is_showing: boolean) => void
   setIsShowingSolderMask: (is_showing: boolean) => void
+  setIsShowingFabricationNotes: (is_showing: boolean) => void
   setPcbGroupViewMode: (mode: "all" | "named_only") => void
   setHoveredErrorId: (errorId: string | null) => void
 }
@@ -100,6 +102,10 @@ export const createStore = (
           STORAGE_KEYS.IS_SHOWING_SOLDER_MASK,
           false,
         ),
+        is_showing_fabrication_notes: getStoredBoolean(
+          STORAGE_KEYS.IS_SHOWING_FABRICATION_NOTES,
+          false,
+        ),
         pcb_group_view_mode: disablePcbGroups
           ? "all"
           : (getStoredString(
@@ -153,6 +159,13 @@ export const createStore = (
           setStoredBoolean(STORAGE_KEYS.IS_SHOWING_SOLDER_MASK, is_showing)
           set({ is_showing_solder_mask: is_showing })
         },
+        setIsShowingFabricationNotes: (is_showing) => {
+          setStoredBoolean(
+            STORAGE_KEYS.IS_SHOWING_FABRICATION_NOTES,
+            is_showing,
+          )
+          set({ is_showing_fabrication_notes: is_showing })
+        },
         setPcbGroupViewMode: (mode) => {
           if (disablePcbGroups) return
           setStoredString(STORAGE_KEYS.PCB_GROUP_VIEW_MODE, mode)

src/hooks/useLocalStorage.ts

@@ -6,6 +6,7 @@ export const STORAGE_KEYS = {
   IS_SHOWING_COPPER_POURS: "pcb_viewer_is_showing_copper_pours",
   IS_SHOWING_GROUP_ANCHOR_OFFSETS: "pcb_viewer_is_showing_group_anchor_offsets",
   IS_SHOWING_SOLDER_MASK: "pcb_viewer_is_showing_solder_mask",
+  IS_SHOWING_FABRICATION_NOTES: "pcb_viewer_is_showing_fabrication_notes",
 } as const
 
 export const getStoredBoolean = (