@tscircuit/3d-viewer 0.0.348 → 0.0.350

package/dist/index.d.ts

@@ -1,12 +1,11 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AnyCircuitElement, PcbBoard } from 'circuit-json';
-import * as React from 'react';
+import * as react from 'react';
 import * as THREE from 'three';
+import { AnyCircuitElement, PcbBoard } from 'circuit-json';
 import { GLTFExporterOptions } from 'three-stdlib';
 import { ManifoldToplevel } from 'manifold-3d/manifold.d.ts';
 import { JSDOM } from 'jsdom';
 
-declare const CadViewer: (props: any) => react_jsx_runtime.JSX.Element;
+declare const CadViewer: react.ForwardRefExoticComponent<Omit<any, "ref"> & react.RefAttributes<THREE.Object3D<THREE.Object3DEventMap>>>;
 
 interface CircuitToSvgOptions {
     width?: number;
@@ -34,11 +33,11 @@ type Options = Omit<GLTFExporterOptions, "animations" | "includeCustomExtensions
 declare function useSaveGltfAs(options?: Options & {
     filename?: string;
 }): [
-    ref3D: React.ForwardedRef<THREE.Object3D>,
+    ref3D: react.ForwardedRef<THREE.Object3D>,
     saveAs: (filename?: string) => Promise<void>
 ];
 declare function useExportGltfUrl(options?: Options): [
-    ref3D: React.ForwardedRef<THREE.Object3D>,
+    ref3D: react.ForwardedRef<THREE.Object3D>,
     url: string | undefined,
     error: ErrorEvent | undefined
 ];

package/dist/index.js

@@ -14228,7 +14228,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState15, useCallback as useCallback7, useRef as useRef9, useEffect as useEffect22 } from "react";
+import { useState as useState16, useCallback as useCallback8, useRef as useRef10, useEffect as useEffect23, forwardRef as forwardRef5 } from "react";
 
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/circuit-json-util";
@@ -25583,7 +25583,7 @@ import * as THREE10 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.347",
+  version: "0.0.349",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -25630,7 +25630,7 @@ var package_default = {
     "@storybook/blocks": "9.0.0-alpha.17",
     "@storybook/react-vite": "^9.1.2",
     "@tscircuit/circuit-json-util": "^0.0.66",
-    "@tscircuit/core": "^0.0.631",
+    "@tscircuit/core": "^0.0.673",
     "@tscircuit/props": "^0.0.288",
     "@types/jsdom": "^21.1.7",
     "@types/react": "19",
@@ -25994,9 +25994,14 @@ var OrbitControls = ({
   ]);
   useEffect11(() => {
     if (!controls || !onStart) return;
-    controls.addEventListener("start", onStart);
+    const handleStart = (event) => {
+      if (event.button !== 2) {
+        onStart();
+      }
+    };
+    controls.addEventListener("start", handleStart);
     return () => {
-      controls.removeEventListener("start", onStart);
+      controls.removeEventListener("start", handleStart);
     };
   }, [controls, onStart]);
   useEffect11(() => {
@@ -27763,7 +27768,7 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su13 } from "@tscircuit/circuit-json-util";
-import { useEffect as useEffect20, useMemo as useMemo18, useState as useState13 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect20, useMemo as useMemo18, useState as useState13 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
 import { useState as useState12, useEffect as useEffect19, useMemo as useMemo17, useRef as useRef7 } from "react";
@@ -28873,50 +28878,51 @@ var BoardMeshes = ({
   return null;
 };
 var MANIFOLD_CDN_BASE_URL = "https://cdn.jsdelivr.net/npm/manifold-3d@3.2.1";
-var CadViewerManifold = ({
-  circuitJson: circuitJsonProp,
-  autoRotateDisabled,
-  clickToInteractEnabled,
-  onUserInteraction,
-  children
-}) => {
-  const childrenCircuitJson = useConvertChildrenToSoup(children);
-  const circuitJson = useMemo18(() => {
-    return circuitJsonProp ?? childrenCircuitJson;
-  }, [circuitJsonProp, childrenCircuitJson]);
-  const [manifoldJSModule, setManifoldJSModule] = useState13(null);
-  const [manifoldLoadingError, setManifoldLoadingError] = useState13(null);
-  useEffect20(() => {
-    const initManifold = async (ManifoldModule) => {
-      try {
-        const loadedModule = await ManifoldModule();
-        loadedModule.setup();
-        setManifoldJSModule(loadedModule);
-      } catch (error) {
-        console.error("Failed to initialize Manifold:", error);
-        setManifoldLoadingError(
-          `Failed to initialize Manifold: ${error instanceof Error ? error.message : "Unknown error"}`
-        );
-      }
-    };
-    if (window.ManifoldModule) {
-      initManifold(window.ManifoldModule);
-      return;
-    }
-    const eventName = "manifoldLoaded";
-    const handleLoad = () => {
+var CadViewerManifold = forwardRef4(
+  ({
+    circuitJson: circuitJsonProp,
+    autoRotateDisabled,
+    clickToInteractEnabled,
+    onUserInteraction,
+    children
+  }, ref) => {
+    const childrenCircuitJson = useConvertChildrenToSoup(children);
+    const circuitJson = useMemo18(() => {
+      return circuitJsonProp ?? childrenCircuitJson;
+    }, [circuitJsonProp, childrenCircuitJson]);
+    const [manifoldJSModule, setManifoldJSModule] = useState13(null);
+    const [manifoldLoadingError, setManifoldLoadingError] = useState13(null);
+    useEffect20(() => {
+      const initManifold = async (ManifoldModule) => {
+        try {
+          const loadedModule = await ManifoldModule();
+          loadedModule.setup();
+          setManifoldJSModule(loadedModule);
+        } catch (error) {
+          console.error("Failed to initialize Manifold:", error);
+          setManifoldLoadingError(
+            `Failed to initialize Manifold: ${error instanceof Error ? error.message : "Unknown error"}`
+          );
+        }
+      };
       if (window.ManifoldModule) {
         initManifold(window.ManifoldModule);
-      } else {
-        const errText = "ManifoldModule not found on window after script load.";
-        console.error(errText);
-        setManifoldLoadingError(errText);
+        return;
       }
-    };
-    window.addEventListener(eventName, handleLoad, { once: true });
-    const script = document.createElement("script");
-    script.type = "module";
-    script.innerHTML = `
+      const eventName = "manifoldLoaded";
+      const handleLoad = () => {
+        if (window.ManifoldModule) {
+          initManifold(window.ManifoldModule);
+        } else {
+          const errText = "ManifoldModule not found on window after script load.";
+          console.error(errText);
+          setManifoldLoadingError(errText);
+        }
+      };
+      window.addEventListener(eventName, handleLoad, { once: true });
+      const script = document.createElement("script");
+      script.type = "module";
+      script.innerHTML = `
 try {
   const { default: ManifoldModule } = await import('${MANIFOLD_CDN_BASE_URL}/manifold.js');
   window.ManifoldModule = ManifoldModule;
@@ -28926,123 +28932,125 @@ try {
   window.dispatchEvent(new CustomEvent('${eventName}'));
 }
     `.trim();
-    const scriptError = (err) => {
-      const errText = "Failed to load Manifold loader script.";
-      console.error(errText, err);
-      setManifoldLoadingError(errText);
-      window.removeEventListener(eventName, handleLoad);
-    };
-    script.addEventListener("error", scriptError);
-    document.body.appendChild(script);
-    return () => {
-      window.removeEventListener(eventName, handleLoad);
-      script.removeEventListener("error", scriptError);
-    };
-  }, []);
-  const {
-    geoms,
-    textures,
-    pcbThickness,
-    error: builderError,
-    isLoading: builderIsLoading,
-    boardData
-  } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
-  const geometryMeshes = useMemo18(() => createGeometryMeshes(geoms), [geoms]);
-  const textureMeshes = useMemo18(
-    () => createTextureMeshes(textures, boardData, pcbThickness),
-    [textures, boardData, pcbThickness]
-  );
-  const cadComponents = useMemo18(
-    () => su13(circuitJson).cad_component.list(),
-    [circuitJson]
-  );
-  const boardDimensions = useMemo18(() => {
-    if (!boardData) return void 0;
-    const { width: width10 = 0, height: height10 = 0 } = boardData;
-    return { width: width10, height: height10 };
-  }, [boardData]);
-  const initialCameraPosition = useMemo18(() => {
-    if (!boardData) return [5, 5, 5];
-    const { width: width10 = 0, height: height10 = 0 } = boardData;
-    const safeWidth = Math.max(width10, 1);
-    const safeHeight = Math.max(height10, 1);
-    const largestDim = Math.max(safeWidth, safeHeight, 5);
-    return [largestDim * 0.75, largestDim * 0.75, largestDim * 0.75];
-  }, [boardData]);
-  if (manifoldLoadingError) {
-    return /* @__PURE__ */ jsxs7(
-      "div",
-      {
-        style: {
-          color: "red",
-          padding: "1em",
-          border: "1px solid red",
-          margin: "1em"
-        },
-        children: [
-          "Error: ",
-          manifoldLoadingError
-        ]
-      }
+      const scriptError = (err) => {
+        const errText = "Failed to load Manifold loader script.";
+        console.error(errText, err);
+        setManifoldLoadingError(errText);
+        window.removeEventListener(eventName, handleLoad);
+      };
+      script.addEventListener("error", scriptError);
+      document.body.appendChild(script);
+      return () => {
+        window.removeEventListener(eventName, handleLoad);
+        script.removeEventListener("error", scriptError);
+      };
+    }, []);
+    const {
+      geoms,
+      textures,
+      pcbThickness,
+      error: builderError,
+      isLoading: builderIsLoading,
+      boardData
+    } = useManifoldBoardBuilder(manifoldJSModule, circuitJson);
+    const geometryMeshes = useMemo18(() => createGeometryMeshes(geoms), [geoms]);
+    const textureMeshes = useMemo18(
+      () => createTextureMeshes(textures, boardData, pcbThickness),
+      [textures, boardData, pcbThickness]
     );
-  }
-  if (!manifoldJSModule) {
-    return /* @__PURE__ */ jsx13("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
-  }
-  if (builderError) {
+    const cadComponents = useMemo18(
+      () => su13(circuitJson).cad_component.list(),
+      [circuitJson]
+    );
+    const boardDimensions = useMemo18(() => {
+      if (!boardData) return void 0;
+      const { width: width10 = 0, height: height10 = 0 } = boardData;
+      return { width: width10, height: height10 };
+    }, [boardData]);
+    const initialCameraPosition = useMemo18(() => {
+      if (!boardData) return [5, 5, 5];
+      const { width: width10 = 0, height: height10 = 0 } = boardData;
+      const safeWidth = Math.max(width10, 1);
+      const safeHeight = Math.max(height10, 1);
+      const largestDim = Math.max(safeWidth, safeHeight, 5);
+      return [largestDim * 0.75, largestDim * 0.75, largestDim * 0.75];
+    }, [boardData]);
+    if (manifoldLoadingError) {
+      return /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          style: {
+            color: "red",
+            padding: "1em",
+            border: "1px solid red",
+            margin: "1em"
+          },
+          children: [
+            "Error: ",
+            manifoldLoadingError
+          ]
+        }
+      );
+    }
+    if (!manifoldJSModule) {
+      return /* @__PURE__ */ jsx13("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+    }
+    if (builderError) {
+      return /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          style: {
+            color: "red",
+            padding: "1em",
+            border: "1px solid red",
+            margin: "1em"
+          },
+          children: [
+            "Error: ",
+            builderError
+          ]
+        }
+      );
+    }
+    if (builderIsLoading) {
+      return /* @__PURE__ */ jsx13("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
+    }
     return /* @__PURE__ */ jsxs7(
-      "div",
+      CadViewerContainer,
       {
-        style: {
-          color: "red",
-          padding: "1em",
-          border: "1px solid red",
-          margin: "1em"
-        },
+        ref,
+        initialCameraPosition,
+        autoRotateDisabled,
+        clickToInteractEnabled,
+        boardDimensions,
+        onUserInteraction,
         children: [
-          "Error: ",
-          builderError
+          /* @__PURE__ */ jsx13(
+            BoardMeshes,
+            {
+              geometryMeshes,
+              textureMeshes
+            }
+          ),
+          cadComponents.map((cad_component2) => /* @__PURE__ */ jsx13(
+            ThreeErrorBoundary,
+            {
+              fallback: ({ error }) => /* @__PURE__ */ jsx13(Error3d, { cad_component: cad_component2, error }),
+              children: /* @__PURE__ */ jsx13(
+                AnyCadComponent,
+                {
+                  cad_component: cad_component2,
+                  circuitJson
+                }
+              )
+            },
+            cad_component2.cad_component_id
+          ))
         ]
       }
     );
   }
-  if (builderIsLoading) {
-    return /* @__PURE__ */ jsx13("div", { style: { padding: "1em" }, children: "Processing board geometry..." });
-  }
-  return /* @__PURE__ */ jsxs7(
-    CadViewerContainer,
-    {
-      initialCameraPosition,
-      autoRotateDisabled,
-      clickToInteractEnabled,
-      boardDimensions,
-      onUserInteraction,
-      children: [
-        /* @__PURE__ */ jsx13(
-          BoardMeshes,
-          {
-            geometryMeshes,
-            textureMeshes
-          }
-        ),
-        cadComponents.map((cad_component2) => /* @__PURE__ */ jsx13(
-          ThreeErrorBoundary,
-          {
-            fallback: ({ error }) => /* @__PURE__ */ jsx13(Error3d, { cad_component: cad_component2, error }),
-            children: /* @__PURE__ */ jsx13(
-              AnyCadComponent,
-              {
-                cad_component: cad_component2,
-                circuitJson
-              }
-            )
-          },
-          cad_component2.cad_component_id
-        ))
-      ]
-    }
-  );
-};
+);
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
@@ -29147,13 +29155,87 @@ var useContextMenu = ({ containerRef }) => {
   };
 };
 
+// src/hooks/exporter/gltf.ts
+import { GLTFExporter } from "three-stdlib";
+import { useEffect as useEffect22, useState as useState15, useMemo as useMemo19, useCallback as useCallback7, useRef as useRef9 } from "react";
+function useSaveGltfAs(options = {}) {
+  const parse = useParser(options);
+  const link = useMemo19(() => document.createElement("a"), []);
+  const instanceRef = useRef9(null);
+  const saveAs = async (filename) => {
+    const name = filename ?? options.filename ?? "";
+    if (options.binary == null) options.binary = name.endsWith(".glb");
+    if (!instanceRef.current) {
+      console.error("No 3D object available for export");
+      return;
+    }
+    try {
+      const url = await parse(instanceRef.current);
+      link.download = name;
+      link.href = url;
+      link.dispatchEvent(new MouseEvent("click"));
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error("Failed to export GLTF:", error);
+    }
+  };
+  useEffect22(
+    () => () => {
+      link.remove();
+      instanceRef.current = null;
+    },
+    []
+  );
+  const ref = useCallback7((obj3D) => {
+    instanceRef.current = obj3D;
+  }, []);
+  return [ref, saveAs];
+}
+function useExportGltfUrl(options = {}) {
+  const parse = useParser(options);
+  const [url, setUrl] = useState15();
+  const [error, setError] = useState15();
+  const instanceRef = useRef9(null);
+  const ref = useCallback7(
+    (instance) => {
+      instanceRef.current = instance;
+      if (instance) {
+        parse(instance).then(setUrl).catch(setError);
+      }
+    },
+    [parse]
+  );
+  useEffect22(() => () => URL.revokeObjectURL(url), [url]);
+  return [ref, url, error];
+}
+function useParser(options = {}) {
+  const exporter = useMemo19(() => new GLTFExporter(), []);
+  return (instance) => {
+    const { promise, resolve, reject } = Promise.withResolvers();
+    exporter.parse(
+      instance,
+      (gltf) => {
+        const type = options.binary ? "gltf-binary" : "gltf+json";
+        const blob = new Blob(
+          [gltf instanceof ArrayBuffer ? gltf : JSON.stringify(gltf)],
+          { type: `model/${type}` }
+        );
+        resolve(URL.createObjectURL(blob));
+      },
+      reject,
+      options
+    );
+    return promise;
+  };
+}
+
 // src/CadViewer.tsx
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var CadViewer = (props) => {
-  const [engine, setEngine] = useState15("manifold");
-  const containerRef = useRef9(null);
-  const [autoRotate, setAutoRotate] = useState15(true);
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState15(false);
+var CadViewer = forwardRef5((props, ref) => {
+  const [engine, setEngine] = useState16("manifold");
+  const containerRef = useRef10(null);
+  const [autoRotate, setAutoRotate] = useState16(true);
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState16(false);
   const {
     menuVisible,
     menuPos,
@@ -29161,14 +29243,28 @@ var CadViewer = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef9(autoRotateUserToggled);
+  const [sceneRef, saveGltfAs] = useSaveGltfAs();
+  function useCombinedRefs(...refs) {
+    return useCallback8(
+      (value) => {
+        refs.forEach((ref2) => {
+          if (!ref2) return;
+          if (typeof ref2 === "function") ref2(value);
+          else ref2.current = value;
+        });
+      },
+      [refs]
+    );
+  }
+  const mergedRef = useCombinedRefs(ref, sceneRef);
+  const autoRotateUserToggledRef = useRef10(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const handleUserInteraction = useCallback7(() => {
+  const handleUserInteraction = useCallback8(() => {
     if (!autoRotateUserToggledRef.current) {
       setAutoRotate(false);
     }
   }, []);
-  const toggleAutoRotate = useCallback7(() => {
+  const toggleAutoRotate = useCallback8(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
@@ -29176,13 +29272,17 @@ var CadViewer = (props) => {
     setEngine(newEngine);
     setMenuVisible(false);
   };
-  useEffect22(() => {
+  const handleDownloadGltf = useCallback8(() => {
+    saveGltfAs("pcb.glb");
+    setMenuVisible(false);
+  }, [saveGltfAs, setMenuVisible]);
+  useEffect23(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect22(() => {
+  useEffect23(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -29197,15 +29297,19 @@ var CadViewer = (props) => {
           CadViewerJscad,
           {
             ...props,
+            ref: mergedRef,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
-            onUserInteraction: handleUserInteraction
+            onUserInteraction: handleUserInteraction,
+            children: props.children
           }
         ) : /* @__PURE__ */ jsx14(
           CadViewerManifold_default,
           {
             ...props,
+            ref: mergedRef,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
-            onUserInteraction: handleUserInteraction
+            onUserInteraction: handleUserInteraction,
+            children: props.children
           }
         ),
         /* @__PURE__ */ jsxs8(
@@ -29312,6 +29416,26 @@ var CadViewer = (props) => {
                   ]
                 }
               ),
+              /* @__PURE__ */ jsx14(
+                "div",
+                {
+                  style: {
+                    padding: "12px 18px",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    color: "#f5f6fa",
+                    fontWeight: 500,
+                    borderRadius: 6,
+                    transition: "background 0.1s"
+                  },
+                  onClick: handleDownloadGltf,
+                  onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
+                  onMouseOut: (e) => e.currentTarget.style.background = "transparent",
+                  children: "Download GLTF"
+                }
+              ),
               /* @__PURE__ */ jsx14(
                 "div",
                 {
@@ -29346,7 +29470,7 @@ var CadViewer = (props) => {
     },
     viewerKey
   );
-};
+});
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
@@ -29615,66 +29739,6 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
   return serialized;
 }
 
-// src/hooks/exporter/gltf.ts
-import { GLTFExporter } from "three-stdlib";
-import { useEffect as useEffect23, useState as useState16, useMemo as useMemo19, useCallback as useCallback8 } from "react";
-function useSaveGltfAs(options = {}) {
-  const parse = useParser(options);
-  const link = useMemo19(() => document.createElement("a"), []);
-  const saveAs = async (filename) => {
-    const name = filename ?? options.filename ?? "";
-    if (options.binary == null) options.binary = name.endsWith(".glb");
-    const url = await parse(instance);
-    link.download = name;
-    link.href = url;
-    link.dispatchEvent(new MouseEvent("click"));
-    URL.revokeObjectURL(url);
-  };
-  useEffect23(
-    () => () => {
-      link.remove();
-      instance = null;
-    },
-    []
-  );
-  let instance;
-  const ref = useCallback8((obj3D) => {
-    instance = obj3D;
-  }, []);
-  return [ref, saveAs];
-}
-function useExportGltfUrl(options = {}) {
-  const parse = useParser(options);
-  const [url, setUrl] = useState16();
-  const [error, setError] = useState16();
-  const ref = useCallback8(
-    (instance) => parse(instance).then(setUrl).catch(setError),
-    []
-  );
-  useEffect23(() => () => URL.revokeObjectURL(url), [url]);
-  return [ref, url, error];
-}
-function useParser(options = {}) {
-  const exporter = useMemo19(() => new GLTFExporter(), []);
-  return (instance) => {
-    const { promise, resolve, reject } = Promise.withResolvers();
-    exporter.parse(
-      instance,
-      (gltf) => {
-        const type = options.binary ? "gltf-binary" : "gltf+json";
-        const blob = new Blob(
-          [gltf instanceof ArrayBuffer ? gltf : JSON.stringify(gltf)],
-          { type: `model/${type}` }
-        );
-        resolve(URL.createObjectURL(blob));
-      },
-      reject,
-      options
-    );
-    return promise;
-  };
-}
-
 // src/utils/jsdom-shim.ts
 function applyJsdomShim(jsdom) {
   global.window = jsdom.window;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.348",
+  "version": "0.0.350",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -47,7 +47,7 @@
     "@storybook/blocks": "9.0.0-alpha.17",
     "@storybook/react-vite": "^9.1.2",
     "@tscircuit/circuit-json-util": "^0.0.66",
-    "@tscircuit/core": "^0.0.631",
+    "@tscircuit/core": "^0.0.673",
     "@tscircuit/props": "^0.0.288",
     "@types/jsdom": "^21.1.7",
     "@types/react": "19",