@tscircuit/3d-viewer 0.0.639 → 0.0.641

package/README.md

@@ -121,6 +121,7 @@ const svgString = await convert3dCircuitToSvg(circuitJson, options)
 ```
 
 The `convert3dCircuitToSvg` function accepts the following options:
+
 - `width`: Width of the output SVG (default: 800)
 - `height`: Height of the output SVG (default: 600)
 - `backgroundColor`: Background color in hex format (default: "#ffffff")
@@ -137,6 +138,7 @@ The `convert3dCircuitToSvg` function accepts the following options:
 Main component for rendering the 3D PCB viewer.
 
 Props:
+
 - `circuit-json`: (optional) An array of AnyCircuitElement objects representing the PCB layout.
 - `children`: (optional) React children elements describing the PCB layout (alternative to using `circuit-json`).
 - `resolveStaticAsset`: (optional) Function that receives each component model URL (`obj`, `wrl`, `stl`, `gltf`, `glb`, `step`) and returns the resolved URL to load.
@@ -146,12 +148,14 @@ Props:
 Defines the PCB board dimensions.
 
 Props:
+
 - `width`: Width of the board (e.g., "20mm").
 - `height`: Height of the board (e.g., "20mm").
 
 ### Component Elements
 
 Various component elements can be used as children of the `<board>` element:
+
 - `<resistor>`
 - `<capacitor>`
 - `<chip>`
@@ -306,7 +310,6 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-
 ### Section views
 
 Right-click the viewer and choose **Advanced → Section View…**.

package/dist/index.js

@@ -19303,6 +19303,17 @@ var useObjectVisibility = (circuitKey) => {
   };
 };
 
+// src/utils/find-model-object.ts
+var findModelObject = (root, objectId) => {
+  let model;
+  root.traverse((object) => {
+    const { cad_component_id, cad_cable_id } = object.userData;
+    if (!model && (cad_component_id ?? cad_cable_id) === objectId)
+      model = object;
+  });
+  return model;
+};
+
 // src/utils/configure-runtime-font.ts
 import { configureTextBuilder } from "troika-three-text";
 
@@ -22333,7 +22344,7 @@ import * as THREE31 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.638",
+  version: "0.0.640",
   repository: {
     type: "git",
     url: "https://github.com/tscircuit/3d-viewer"
@@ -22849,6 +22860,7 @@ var Canvas = forwardRef(
           mountRef.current.removeChild(renderer.domElement);
         }
         renderer.dispose();
+        renderer.forceContextLoss();
         scene.remove(rootObject.current);
         if (window.__TSCIRCUIT_THREE_OBJECT === rootObject.current) {
           window.__TSCIRCUIT_THREE_OBJECT = void 0;
@@ -39249,6 +39261,7 @@ var ContextMenu = ({
   onSectionView,
   onExplosionView,
   explosionAvailable = false,
+  downloadModelName,
   onDownloadGltf,
   onOpenKeyboardShortcuts
 }) => {
@@ -39559,7 +39572,7 @@ var ContextMenu = ({
                 }
               ),
               /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 }),
-              /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsxs10(
                 DropdownMenuItem,
                 {
                   style: {
@@ -39571,7 +39584,10 @@ var ContextMenu = ({
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
                   onTouchStart: () => setHoveredItem("download"),
-                  children: /* @__PURE__ */ jsx40("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
+                  children: [
+                    /* @__PURE__ */ jsx40("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Download GLTF" }),
+                    downloadModelName && /* @__PURE__ */ jsx40("span", { style: { opacity: 0.55, fontSize: 13 }, children: downloadModelName })
+                  ]
                 }
               ),
               /* @__PURE__ */ jsx40(DropdownMenuSeparator, { style: separatorStyles2 }),
@@ -40400,34 +40416,51 @@ function createSectionExport(root, spec) {
 // src/hooks/useGlobalDownloadGltf.ts
 import { useCallback as useCallback24 } from "react";
 import { GLTFExporter as GLTFExporter2 } from "three/examples/jsm/exporters/GLTFExporter.js";
+
+// src/utils/clone-model-for-export.ts
+var cloneModelForExport = (root, objectId) => {
+  const source = findModelObject(root, objectId);
+  if (!source) return;
+  source.updateWorldMatrix(true, true);
+  const output = source.clone(true);
+  source.matrixWorld.decompose(output.position, output.quaternion, output.scale);
+  return output;
+};
+
+// src/hooks/useGlobalDownloadGltf.ts
 var useGlobalDownloadGltf = () => {
-  return useCallback24(() => {
-    const root = window.__TSCIRCUIT_THREE_OBJECT;
-    if (!root) return;
-    const section = root.userData.sectionView;
-    const sectionExport = section ? createSectionExport(root, section) : void 0;
-    const exporter = new GLTFExporter2();
-    exporter.parse(
-      sectionExport?.root ?? root,
-      (gltf) => {
-        sectionExport?.dispose();
-        const blob = new Blob(
-          [gltf instanceof ArrayBuffer ? gltf : JSON.stringify(gltf)],
-          { type: "model/gltf+json" }
-        );
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = url;
-        link.download = "scene.gltf";
-        link.click();
-        URL.revokeObjectURL(url);
-      },
-      (err) => {
-        sectionExport?.dispose();
-        console.error("Failed to export GLTF", err);
-      }
-    );
-  }, []);
+  return useCallback24(
+    (model, root = window.__TSCIRCUIT_THREE_OBJECT) => {
+      if (!root) return;
+      const target = model ? cloneModelForExport(root, model.objectId) : root;
+      if (!target) return;
+      if (model) target.name = model.name;
+      const section = root.userData.sectionView;
+      const sectionExport = section ? createSectionExport(target, section) : void 0;
+      const exporter = new GLTFExporter2();
+      exporter.parse(
+        sectionExport?.root ?? target,
+        (gltf) => {
+          sectionExport?.dispose();
+          const blob = new Blob(
+            [gltf instanceof ArrayBuffer ? gltf : JSON.stringify(gltf)],
+            { type: "model/gltf+json" }
+          );
+          const url = URL.createObjectURL(blob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.download = model ? `${model.name}.gltf` : "scene.gltf";
+          link.click();
+          URL.revokeObjectURL(url);
+        },
+        (err) => {
+          sectionExport?.dispose();
+          console.error("Failed to export GLTF", err);
+        }
+      );
+    },
+    []
+  );
 };
 
 // src/CadViewer.tsx
@@ -40493,10 +40526,13 @@ var CadViewerInner = (props) => {
   const sceneRef = useContext13(SchematicNavigationContext);
   const [selectedComponent, setSelectedComponent] = useState46();
   const [selectedObject, setSelectedObject] = useState46();
+  const [selectedModel, setSelectedModel] = useState46();
   const handleMenuOpen = useCallback25(
     (position) => {
-      setSelectedObject(
-        pickSceneObject(sceneRef.current, position, circuitJson)
+      const picked = pickSceneObject(sceneRef.current, position, circuitJson);
+      setSelectedObject(picked);
+      setSelectedModel(
+        picked && sceneRef.current && findModelObject(sceneRef.current.rootObject, picked.objectId) ? picked : void 0
       );
       setSelectedComponent(
         props.onViewSchematicComponent ? pickSchematicComponent(sceneRef.current, position, circuitJson) : void 0
@@ -40775,8 +40811,9 @@ var CadViewerInner = (props) => {
               setCameraPreset("Custom");
               closeMenu();
             },
+            downloadModelName: selectedModel?.name,
             onDownloadGltf: () => {
-              downloadGltf();
+              downloadGltf(selectedModel, sceneRef.current?.rootObject);
               closeMenu();
             },
             onOpenKeyboardShortcuts: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.639",
+  "version": "0.0.641",
   "repository": {
     "type": "git",
     "url": "https://github.com/tscircuit/3d-viewer"