@tscircuit/3d-viewer 0.0.589 → 0.0.591

package/dist/index.d.ts

@@ -64,7 +64,14 @@ interface LayerVisibilityState {
     pcbNotes: boolean;
     backgroundStart: boolean;
     backgroundEnd: boolean;
+    /**
+     * Three-state display for the single assembled enclosure CAD entity. This is
+     * viewer state, not Circuit JSON: hidden to work unobstructed, translucent to
+     * check openings against the board, opaque to inspect the print itself.
+     */
+    enclosure: EnclosureVisibility;
 }
+type EnclosureVisibility = "hidden" | "translucent" | "opaque";
 
 interface CombinedBoardTextures {
     topBoard?: THREE.CanvasTexture | null;

package/dist/index.js

@@ -14452,6 +14452,12 @@ import {
   useMemo
 } from "react";
 import { jsx } from "react/jsx-runtime";
+var ENCLOSURE_VISIBILITY_CYCLE = [
+  "translucent",
+  "opaque",
+  "hidden"
+];
+var nextEnclosureVisibility = (current) => ENCLOSURE_VISIBILITY_CYCLE[(ENCLOSURE_VISIBILITY_CYCLE.indexOf(current) + 1) % ENCLOSURE_VISIBILITY_CYCLE.length];
 var defaultVisibility = {
   boardBody: true,
   topCopper: true,
@@ -14472,7 +14478,8 @@ var defaultVisibility = {
   threedAxis: false,
   pcbNotes: false,
   backgroundStart: true,
-  backgroundEnd: true
+  backgroundEnd: true,
+  enclosure: "translucent"
 };
 var LayerVisibilityContext = createContext(void 0);
 var LayerVisibilityProvider = ({ children }) => {
@@ -32389,6 +32396,19 @@ var getRenderedCadModelType = (modelType) => {
   return modelType === "step" ? "glb" : modelType;
 };
 
+// src/utils/is-legacy-fdm-enclosure.ts
+var isLegacyFdmEnclosure = (cadComponent, circuitJson) => {
+  if (!cadComponent.model_jscad || cadComponent.model_origin_alignment !== "bottom_center_of_component") {
+    return false;
+  }
+  const pcbComponent = circuitJson.find(
+    (element) => element.type === "pcb_component" && element.pcb_component_id === cadComponent.pcb_component_id
+  );
+  return Boolean(
+    pcbComponent && pcbComponent.do_not_place && pcbComponent.is_allowed_to_be_off_board && pcbComponent.obstructs_within_bounds === false
+  );
+};
+
 // src/utils/resolve-model-url.ts
 var resolveModelUrl = (modelUrl, resolveStaticAsset) => {
   if (!modelUrl) return void 0;
@@ -32483,6 +32503,11 @@ var AnyCadComponent = ({
     (elm) => elm.type === "pcb_component" && elm.source_component_id === cad_component.source_component_id
   );
   const layer = pcbComponent?.layer ?? "top";
+  const isEnclosure = useMemo8(
+    () => isLegacyFdmEnclosure(cad_component, circuitJson),
+    [cad_component, circuitJson]
+  );
+  const isTranslucent = isEnclosure ? visibility.enclosure === "translucent" : Boolean(cad_component.show_as_translucent_model);
   const sourceModelType = getCadModelType(cad_component);
   const renderedModelType = getRenderedCadModelType(sourceModelType);
   const gltfModelType = cad_component.model_glb_url ? "glb" : "gltf";
@@ -32518,7 +32543,7 @@ var AnyCadComponent = ({
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
-            isTranslucent: cad_component.show_as_translucent_model
+            isTranslucent
           },
           `${cad_component.cad_component_id}-gltf-${gltfUrl}`
         )
@@ -32543,7 +32568,7 @@ var AnyCadComponent = ({
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
-            isTranslucent: cad_component.show_as_translucent_model
+            isTranslucent
           },
           `${cad_component.cad_component_id}-mixed-${url}`
         )
@@ -32568,7 +32593,7 @@ var AnyCadComponent = ({
             onHover: handleHover,
             onUnhover: handleUnhover,
             isHovered,
-            isTranslucent: cad_component.show_as_translucent_model
+            isTranslucent
           },
           `${cad_component.cad_component_id}-step-${stepUrl}`
         )
@@ -32580,7 +32605,7 @@ var AnyCadComponent = ({
     cad_component.cad_component_id,
     cad_component.footprinter_string,
     cad_component.model_jscad,
-    cad_component.show_as_translucent_model,
+    isTranslucent,
     gltfUrl,
     gltfModelType,
     handleHover,
@@ -32642,7 +32667,7 @@ var AnyCadComponent = ({
         onHover: handleHover,
         onUnhover: handleUnhover,
         isHovered,
-        isTranslucent: cad_component.show_as_translucent_model
+        isTranslucent
       },
       cad_component.cad_component_id
     );
@@ -32657,21 +32682,17 @@ var AnyCadComponent = ({
         onHover: handleHover,
         onUnhover: handleUnhover,
         isHovered,
-        isTranslucent: cad_component.show_as_translucent_model
+        isTranslucent
       }
     );
   }
-  if (cad_component.show_as_translucent_model) {
-    if (!visibility.translucentModels) {
-      return null;
-    }
+  if (isEnclosure) {
+    if (visibility.enclosure === "hidden") return null;
+  } else if (cad_component.show_as_translucent_model) {
+    if (!visibility.translucentModels) return null;
   } else {
-    if (isThroughHole && !visibility.throughHoleModels) {
-      return null;
-    }
-    if (!isThroughHole && !visibility.smtModels) {
-      return null;
-    }
+    if (isThroughHole && !visibility.throughHoleModels) return null;
+    if (!isThroughHole && !visibility.smtModels) return null;
   }
   return /* @__PURE__ */ jsxs2(Fragment4, { children: [
     modelComponent,
@@ -32704,7 +32725,7 @@ import * as THREE23 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.588",
+  version: "0.0.590",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -32734,7 +32755,7 @@ var package_default = {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.465",
-    "circuit-to-canvas": "^0.0.119",
+    "circuit-to-canvas": "^0.0.123",
     "react-hot-toast": "^2.6.0",
     three: "^0.165.0",
     "three-stdlib": "^2.36.0",
@@ -46668,6 +46689,21 @@ var ChevronRightIcon = ({ isOpen }) => /* @__PURE__ */ jsx32(
     children: /* @__PURE__ */ jsx32("path", { d: "m9 18 6-6-6-6" })
   }
 );
+var CheckMinusIcon = () => /* @__PURE__ */ jsx32(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx32("path", { d: "M5 12h14" })
+  }
+);
 var DotIcon = () => /* @__PURE__ */ jsx32(
   "svg",
   {
@@ -47060,6 +47096,35 @@ var AppearanceMenu = () => {
                   /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Through-Hole Components" })
                 ]
               }
+            ),
+            /* @__PURE__ */ jsx33(Separator2, { style: separatorStyles }),
+            /* @__PURE__ */ jsxs7(
+              Item22,
+              {
+                style: {
+                  ...itemStyles,
+                  backgroundColor: hoveredItem === "enclosure" ? "#404040" : "transparent"
+                },
+                onSelect: (e) => e.preventDefault(),
+                onPointerDown: (e) => {
+                  e.preventDefault();
+                  setLayerVisibility(
+                    "enclosure",
+                    nextEnclosureVisibility(visibility.enclosure)
+                  );
+                },
+                onMouseEnter: () => setHoveredItem("enclosure"),
+                onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("enclosure"),
+                title: `Enclosure: ${visibility.enclosure}`,
+                children: [
+                  /* @__PURE__ */ jsxs7("span", { style: iconContainerStyles, children: [
+                    visibility.enclosure === "opaque" && /* @__PURE__ */ jsx33(CheckIcon, {}),
+                    visibility.enclosure === "translucent" && /* @__PURE__ */ jsx33(CheckMinusIcon, {})
+                  ] }),
+                  /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Enclosure" })
+                ]
+              }
             )
           ]
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.589",
+  "version": "0.0.591",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -30,7 +30,7 @@
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
     "circuit-json": "^0.0.465",
-    "circuit-to-canvas": "^0.0.119",
+    "circuit-to-canvas": "^0.0.123",
     "react-hot-toast": "^2.6.0",
     "three": "^0.165.0",
     "three-stdlib": "^2.36.0",