Add faux board visibility toggle in Appearance menu

src/CadViewerJscad.tsx

@@ -20,6 +20,7 @@ import { VisibleSTLModel } from "./three-components/VisibleSTLModel"
 import { ThreeErrorBoundary } from "./three-components/ThreeErrorBoundary"
 import { addFauxBoardIfNeeded } from "./utils/preprocess-circuit-json"
 import { tuple } from "./utils/tuple"
+import { useLayerVisibility } from "./contexts/LayerVisibilityContext"
 
 interface Props {
   /**
@@ -121,9 +122,13 @@ export const CadViewerJscad = forwardRef<
 
     // Use the state `boardGeom` which starts simplified and gets updated
     const { stls: boardStls, loading } = useStlsFromGeom(boardGeom)
+    const { visibility } = useLayerVisibility()
 
     const cad_components = su(internalCircuitJson).cad_component.list()
 
+    // If this is a faux board and faux board visibility is disabled, don't render the board
+    const shouldRenderBoard = !(isFauxBoard && !visibility.fauxBoard)
+
     return (
       <CadViewerContainer
         ref={ref}
@@ -135,15 +140,16 @@ export const CadViewerJscad = forwardRef<
         onUserInteraction={onUserInteraction}
         onCameraControllerReady={onCameraControllerReady}
       >
-        {boardStls.map(({ stlData, color, layerType }, index) => (
-          <VisibleSTLModel
-            key={`board-${index}`}
-            stlData={stlData}
-            color={color}
-            opacity={index === 0 ? (isFauxBoard ? 0.8 : 0.95) : 1}
-            layerType={layerType}
-          />
-        ))}
+        {shouldRenderBoard &&
+          boardStls.map(({ stlData, color, layerType }, index) => (
+            <VisibleSTLModel
+              key={`board-${index}`}
+              stlData={stlData}
+              color={color}
+              opacity={index === 0 ? (isFauxBoard ? 0.8 : 0.95) : 1}
+              layerType={layerType}
+            />
+          ))}
         {cad_components.map((cad_component) => (
           <ThreeErrorBoundary
             key={cad_component.cad_component_id}

src/CadViewerManifold.tsx

@@ -28,16 +28,35 @@ declare global {
 const BoardMeshes = ({
   geometryMeshes,
   textureMeshes,
+  isFauxBoard,
 }: {
   geometryMeshes: THREE.Mesh[]
   textureMeshes: THREE.Mesh[]
+  isFauxBoard: boolean
 }) => {
   const { rootObject } = useThree()
   const { visibility } = useLayerVisibility()
 
   useEffect(() => {
     if (!rootObject) return
 
+    // If this is a faux board and faux board visibility is disabled, don't render anything
+    // But we still need to clean up any previously added meshes
+    if (isFauxBoard && !visibility.fauxBoard) {
+      // Clean up any previously added meshes
+      geometryMeshes.forEach((mesh) => {
+        if (mesh.parent === rootObject) {
+          rootObject.remove(mesh)
+        }
+      })
+      textureMeshes.forEach((mesh) => {
+        if (mesh.parent === rootObject) {
+          rootObject.remove(mesh)
+        }
+      })
+      return
+    }
+
     // Filter and add meshes based on visibility settings
     geometryMeshes.forEach((mesh) => {
       let shouldShow = true
@@ -118,7 +137,7 @@ const BoardMeshes = ({
         }
       })
     }
-  }, [rootObject, geometryMeshes, textureMeshes, visibility])
+  }, [rootObject, geometryMeshes, textureMeshes, visibility, isFauxBoard])
 
   return null
 }
@@ -238,6 +257,7 @@ try {
     error: builderError,
     isLoading: builderIsLoading,
     boardData,
+    isFauxBoard,
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson)
 
   const geometryMeshes = useMemo(() => createGeometryMeshes(geoms), [geoms])
@@ -325,6 +345,7 @@ try {
       <BoardMeshes
         geometryMeshes={geometryMeshes}
         textureMeshes={textureMeshes}
+        isFauxBoard={isFauxBoard}
       />
       {cadComponents.map((cad_component: CadComponent) => (
         <ThreeErrorBoundary

src/components/AppearanceMenu.tsx

@@ -126,6 +126,29 @@ export const AppearanceMenu = () => {
               </span>
             </DropdownMenu.Item>
 
+            <DropdownMenu.Item
+              style={{
+                ...itemStyles,
+                backgroundColor:
+                  hoveredItem === "fauxBoard" ? "#404040" : "transparent",
+              }}
+              onSelect={(e) => e.preventDefault()}
+              onPointerDown={(e) => {
+                e.preventDefault()
+                setLayerVisibility("fauxBoard", !visibility.fauxBoard)
+              }}
+              onMouseEnter={() => setHoveredItem("fauxBoard")}
+              onMouseLeave={() => setHoveredItem(null)}
+              onTouchStart={() => setHoveredItem("fauxBoard")}
+            >
+              <span style={iconContainerStyles}>
+                {visibility.fauxBoard && <CheckIcon />}
+              </span>
+              <span style={{ display: "flex", alignItems: "center" }}>
+                Faux Board
+              </span>
+            </DropdownMenu.Item>
+
             <DropdownMenu.Item
               style={{
                 ...itemStyles,

src/contexts/LayerVisibilityContext.tsx

@@ -26,6 +26,7 @@ export interface LayerVisibilityState {
   threedAxis: boolean
   backgroundStart: boolean
   backgroundEnd: boolean
+  fauxBoard: boolean
 }
 
 interface LayerVisibilityContextType {
@@ -56,6 +57,7 @@ const defaultVisibility: LayerVisibilityState = {
   threedAxis: false,
   backgroundStart: true,
   backgroundEnd: true,
+  fauxBoard: true,
 }
 
 const LayerVisibilityContext = createContext<