@tscircuit/3d-viewer 0.0.351 → 0.0.352

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import * as react from 'react';
-import * as THREE from 'three';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AnyCircuitElement, PcbBoard } from 'circuit-json';
+import * as React from 'react';
+import * as THREE from 'three';
 import { GLTFExporterOptions } from 'three-stdlib';
 import { ManifoldToplevel } from 'manifold-3d/manifold.d.ts';
 import { JSDOM } from 'jsdom';
 
-declare const CadViewer: react.ForwardRefExoticComponent<Omit<any, "ref"> & react.RefAttributes<THREE.Object3D<THREE.Object3DEventMap>>>;
+declare const CadViewer: (props: any) => react_jsx_runtime.JSX.Element;
 
 interface CircuitToSvgOptions {
     width?: number;
@@ -33,11 +34,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 useState16, useCallback as useCallback8, useRef as useRef10, useEffect as useEffect23, forwardRef as forwardRef5 } from "react";
+import { useState as useState15, useCallback as useCallback7, useRef as useRef9, useEffect as useEffect22 } 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.350",
+  version: "0.0.351",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -25994,14 +25994,9 @@ var OrbitControls = ({
   ]);
   useEffect11(() => {
     if (!controls || !onStart) return;
-    const handleStart = (event) => {
-      if (event.button !== 2) {
-        onStart();
-      }
-    };
-    controls.addEventListener("start", handleStart);
+    controls.addEventListener("start", onStart);
     return () => {
-      controls.removeEventListener("start", handleStart);
+      controls.removeEventListener("start", onStart);
     };
   }, [controls, onStart]);
   useEffect11(() => {
@@ -27768,7 +27763,7 @@ var CadViewerJscad = forwardRef3(
 
 // src/CadViewerManifold.tsx
 import { su as su13 } from "@tscircuit/circuit-json-util";
-import { forwardRef as forwardRef4, useEffect as useEffect20, useMemo as useMemo18, useState as useState13 } from "react";
+import { 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";
@@ -28878,51 +28873,50 @@ var BoardMeshes = ({
   return null;
 };
 var MANIFOLD_CDN_BASE_URL = "https://cdn.jsdelivr.net/npm/manifold-3d@3.2.1";
-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"}`
-          );
-        }
-      };
+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 = () => {
       if (window.ManifoldModule) {
         initManifold(window.ManifoldModule);
-        return;
+      } else {
+        const errText = "ManifoldModule not found on window after script load.";
+        console.error(errText);
+        setManifoldLoadingError(errText);
       }
-      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 = `
+    };
+    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;
@@ -28932,125 +28926,123 @@ 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 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 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..." });
-    }
+  }
+  if (!manifoldJSModule) {
+    return /* @__PURE__ */ jsx13("div", { style: { padding: "1em" }, children: "Loading Manifold module..." });
+  }
+  if (builderError) {
     return /* @__PURE__ */ jsxs7(
-      CadViewerContainer,
+      "div",
       {
-        ref,
-        initialCameraPosition,
-        autoRotateDisabled,
-        clickToInteractEnabled,
-        boardDimensions,
-        onUserInteraction,
+        style: {
+          color: "red",
+          padding: "1em",
+          border: "1px solid red",
+          margin: "1em"
+        },
         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
-          ))
+          "Error: ",
+          builderError
         ]
       }
     );
   }
-);
+  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
@@ -29155,87 +29147,13 @@ 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 = forwardRef5((props, ref) => {
-  const [engine, setEngine] = useState16("manifold");
-  const containerRef = useRef10(null);
-  const [autoRotate, setAutoRotate] = useState16(true);
-  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState16(false);
+var CadViewer = (props) => {
+  const [engine, setEngine] = useState15("manifold");
+  const containerRef = useRef9(null);
+  const [autoRotate, setAutoRotate] = useState15(true);
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState15(false);
   const {
     menuVisible,
     menuPos,
@@ -29243,28 +29161,14 @@ var CadViewer = forwardRef5((props, ref) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  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);
+  const autoRotateUserToggledRef = useRef9(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const handleUserInteraction = useCallback8(() => {
+  const handleUserInteraction = useCallback7(() => {
     if (!autoRotateUserToggledRef.current) {
       setAutoRotate(false);
     }
   }, []);
-  const toggleAutoRotate = useCallback8(() => {
+  const toggleAutoRotate = useCallback7(() => {
     setAutoRotate((prev) => !prev);
     setAutoRotateUserToggled(true);
   }, []);
@@ -29272,17 +29176,13 @@ var CadViewer = forwardRef5((props, ref) => {
     setEngine(newEngine);
     setMenuVisible(false);
   };
-  const handleDownloadGltf = useCallback8(() => {
-    saveGltfAs("pcb.glb");
-    setMenuVisible(false);
-  }, [saveGltfAs, setMenuVisible]);
-  useEffect23(() => {
+  useEffect22(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect23(() => {
+  useEffect22(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -29297,19 +29197,15 @@ var CadViewer = forwardRef5((props, ref) => {
           CadViewerJscad,
           {
             ...props,
-            ref: mergedRef,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
-            onUserInteraction: handleUserInteraction,
-            children: props.children
+            onUserInteraction: handleUserInteraction
           }
         ) : /* @__PURE__ */ jsx14(
           CadViewerManifold_default,
           {
             ...props,
-            ref: mergedRef,
             autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
-            onUserInteraction: handleUserInteraction,
-            children: props.children
+            onUserInteraction: handleUserInteraction
           }
         ),
         /* @__PURE__ */ jsxs8(
@@ -29416,26 +29312,6 @@ var CadViewer = forwardRef5((props, ref) => {
                   ]
                 }
               ),
-              /* @__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",
                 {
@@ -29470,7 +29346,7 @@ var CadViewer = forwardRef5((props, ref) => {
     },
     viewerKey
   );
-});
+};
 
 // src/convert-circuit-json-to-3d-svg.ts
 var import_debug = __toESM(require_browser(), 1);
@@ -29739,6 +29615,66 @@ 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.351",
+  "version": "0.0.352",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",