@tscircuit/3d-viewer 0.0.431 → 0.0.433

package/dist/index.js

@@ -14228,7 +14228,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState33, useCallback as useCallback20, useRef as useRef22, useEffect as useEffect39 } from "react";
+import { useState as useState33, useCallback as useCallback20, useRef as useRef23, useEffect as useEffect39 } from "react";
 
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/circuit-json-util";
@@ -28168,13 +28168,13 @@ var AnyCadComponent = ({
 };
 
 // src/CadViewerContainer.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo15, useState as useState8 } from "react";
+import { forwardRef as forwardRef2, useMemo as useMemo15, useRef as useRef6, useState as useState8 } from "react";
 import * as THREE14 from "three";
 
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.430",
+  version: "0.0.432",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -28460,7 +28460,7 @@ var configureRenderer = (renderer) => {
 // src/react-three/Canvas.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 var Canvas = forwardRef(
-  ({ children, scene: sceneProps, camera: cameraProps, style }, ref) => {
+  ({ children, scene: sceneProps, camera: cameraProps, style, onCreated }, ref) => {
     const mountRef = useRef4(null);
     const [contextState, setContextState] = useState7(
       null
@@ -28468,6 +28468,8 @@ var Canvas = forwardRef(
     const frameListeners = useRef4(
       []
     );
+    const onCreatedRef = useRef4(void 0);
+    onCreatedRef.current = onCreated;
     const addFrameListener = useCallback4(
       (listener) => {
         frameListeners.current.push(listener);
@@ -28526,6 +28528,7 @@ var Canvas = forwardRef(
         addFrameListener,
         removeFrameListener
       });
+      onCreatedRef.current?.({ camera, renderer });
       let animationFrameId;
       const clock = new THREE10.Clock();
       const animate = () => {
@@ -28585,10 +28588,17 @@ var OrbitControls = ({
     return new ThreeOrbitControls(camera, renderer.domElement);
   }, [camera, renderer]);
   useEffect13(() => {
-    if (!onControlsChange) return;
-    onControlsChange(controls ?? null);
+    onControlsChange?.(controls ?? null);
+    return () => onControlsChange?.(null);
+  }, [controls, onControlsChange]);
+  useEffect13(() => {
+    if (!controls) return;
+    const handleChange = () => {
+      onControlsChange?.(controls);
+    };
+    controls.addEventListener("change", handleChange);
     return () => {
-      onControlsChange(null);
+      controls.removeEventListener("change", handleChange);
     };
   }, [controls, onControlsChange]);
   useEffect13(() => {
@@ -28754,6 +28764,45 @@ var Lights = () => {
   return null;
 };
 
+// src/hooks/useSessionCamera.ts
+var CAMERA_KEY = "cadViewerCameraStateSession";
+var saveCameraToSession = (camera, controls) => {
+  try {
+    const savedCameraSession = {
+      position: camera.position.toArray(),
+      quaternion: camera.quaternion.toArray(),
+      up: camera.up.toArray(),
+      fov: camera.fov ?? 50,
+      target: controls.target.toArray()
+    };
+    sessionStorage.setItem(CAMERA_KEY, JSON.stringify(savedCameraSession));
+  } catch (err) {
+    console.warn("Failed to save camera:", err);
+  }
+};
+var loadCameraFromSession = (camera, controls) => {
+  try {
+    const raw = sessionStorage.getItem(CAMERA_KEY);
+    if (!raw) return false;
+    const state = JSON.parse(raw);
+    camera.position.fromArray(state.position);
+    camera.quaternion.fromArray(state.quaternion);
+    camera.up.fromArray(state.up);
+    if ("fov" in camera) {
+      const persp = camera;
+      persp.fov = state.fov;
+      persp.updateProjectionMatrix?.();
+    }
+    controls.target.fromArray(state.target);
+    controls.update();
+    camera.updateMatrixWorld();
+    return true;
+  } catch (err) {
+    console.warn("Failed to restore camera:", err);
+    return false;
+  }
+};
+
 // src/hooks/useCameraController.ts
 import { useCallback as useCallback5, useEffect as useEffect16, useMemo as useMemo14, useRef as useRef5 } from "react";
 import * as THREE13 from "three";
@@ -29045,6 +29094,10 @@ var CadViewerContainer = forwardRef2(
     const [isInteractionEnabled, setIsInteractionEnabled] = useState8(
       !clickToInteractEnabled
     );
+    const saveTimeoutRef = useRef6(null);
+    const controlsRef = useRef6(null);
+    const cameraRef = useRef6(null);
+    const restoredOnceRef = useRef6(false);
     const gridSectionSize = useMemo15(() => {
       if (!boardDimensions) return 10;
       const width10 = boardDimensions.width ?? 0;
@@ -29098,6 +29151,23 @@ var CadViewerContainer = forwardRef2(
           ref,
           scene: { up: new THREE14.Vector3(0, 0, 1) },
           camera: { up: [0, 0, 1], position: initialCameraPosition },
+          onCreated: ({ camera }) => {
+            cameraRef.current = camera;
+            if (!restoredOnceRef.current && controlsRef.current) {
+              const restored = loadCameraFromSession(
+                cameraRef.current,
+                controlsRef.current
+              );
+              if (restored) restoredOnceRef.current = true;
+            }
+            if (controlsRef.current && !restoredOnceRef.current) {
+              setTimeout(() => {
+                if (cameraRef.current && controlsRef.current) {
+                  saveCameraToSession(cameraRef.current, controlsRef.current);
+                }
+              }, 0);
+            }
+          },
           children: [
             /* @__PURE__ */ jsx12(CameraAnimator, { ...cameraAnimatorProps }),
             /* @__PURE__ */ jsx12(RotationTracker, {}),
@@ -29113,7 +29183,26 @@ var CadViewerContainer = forwardRef2(
                 enableDamping: true,
                 dampingFactor: 0.1,
                 target: orbitTarget,
-                onControlsChange: handleControlsChange
+                onControlsChange: (controls) => {
+                  handleControlsChange(controls);
+                  controlsRef.current = controls;
+                  if (cameraRef.current && controlsRef.current && !restoredOnceRef.current) {
+                    const restored = loadCameraFromSession(
+                      cameraRef.current,
+                      controlsRef.current
+                    );
+                    if (restored) {
+                      restoredOnceRef.current = true;
+                      return;
+                    }
+                  }
+                  clearTimeout(saveTimeoutRef.current);
+                  saveTimeoutRef.current = setTimeout(() => {
+                    if (cameraRef.current && controlsRef.current) {
+                      saveCameraToSession(cameraRef.current, controlsRef.current);
+                    }
+                  }, 150);
+                }
               }
             ),
             /* @__PURE__ */ jsx12(Lights, {}),
@@ -29237,7 +29326,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState10, useEffect as useEffect18, useRef as useRef6 } from "react";
+import { useState as useState10, useEffect as useEffect18, useRef as useRef7 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -31098,7 +31187,7 @@ var BoardGeomBuilder = class {
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
   const [boardGeom, setBoardGeom] = useState10(null);
-  const isProcessingRef = useRef6(false);
+  const isProcessingRef = useRef7(false);
   useEffect18(() => {
     let isCancelled = false;
     if (!circuitJson) {
@@ -31476,7 +31565,7 @@ import { su as su13 } from "@tscircuit/circuit-json-util";
 import { useEffect as useEffect22, useMemo as useMemo21, useState as useState15 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
-import { useState as useState14, useEffect as useEffect21, useMemo as useMemo20, useRef as useRef7 } from "react";
+import { useState as useState14, useEffect as useEffect21, useMemo as useMemo20, useRef as useRef8 } from "react";
 import { su as su12 } from "@tscircuit/circuit-json-util";
 import * as THREE24 from "three";
 
@@ -32821,7 +32910,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
   const [pcbThickness, setPcbThickness] = useState14(null);
   const [error, setError] = useState14(null);
   const [isLoading, setIsLoading] = useState14(true);
-  const manifoldInstancesForCleanup = useRef7([]);
+  const manifoldInstancesForCleanup = useRef8([]);
   const boardData = useMemo20(() => {
     const boards = su12(circuitJson).pcb_board.list();
     if (boards.length === 0) {
@@ -33470,17 +33559,17 @@ try {
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
-import { useState as useState16, useCallback as useCallback8, useRef as useRef8, useEffect as useEffect23 } from "react";
+import { useState as useState16, useCallback as useCallback8, useRef as useRef9, useEffect as useEffect23 } from "react";
 var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState16(false);
   const [menuPos, setMenuPos] = useState16({
     x: 0,
     y: 0
   });
-  const menuRef = useRef8(null);
-  const interactionOriginPosRef = useRef8(null);
-  const longPressTimeoutRef = useRef8(null);
-  const ignoreNextContextMenuRef = useRef8(false);
+  const menuRef = useRef9(null);
+  const interactionOriginPosRef = useRef9(null);
+  const longPressTimeoutRef = useRef9(null);
+  const ignoreNextContextMenuRef = useRef9(false);
   const clearLongPressTimeout = () => {
     if (longPressTimeoutRef.current !== null) {
       clearTimeout(longPressTimeoutRef.current);
@@ -33574,9 +33663,16 @@ var useContextMenu = ({ containerRef }) => {
   }, []);
   const handleClickAway = useCallback8((e) => {
     const target = e.target;
-    if (menuRef.current && !menuRef.current.contains(target)) {
-      setMenuVisible(false);
+    if (menuRef.current && menuRef.current.contains(target)) {
+      return;
     }
+    const isInRadixPortal = target.closest?.(
+      "[data-radix-popper-content-wrapper], [data-radix-dropdown-menu-content], [data-radix-dropdown-menu-sub-content]"
+    );
+    if (isInRadixPortal) {
+      return;
+    }
+    setMenuVisible(false);
   }, []);
   useEffect23(() => {
     if (menuVisible) {
@@ -39156,6 +39252,7 @@ var AppearanceMenu = () => {
           },
           onMouseEnter: () => setHoveredItem("appearance"),
           onMouseLeave: () => setHoveredItem(null),
+          onTouchStart: () => setHoveredItem("appearance"),
           children: [
             /* @__PURE__ */ jsx32("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: "Appearance" }),
             /* @__PURE__ */ jsx32(
@@ -39194,6 +39291,7 @@ var AppearanceMenu = () => {
                 },
                 onMouseEnter: () => setHoveredItem("boardBody"),
                 onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("boardBody"),
                 children: [
                   /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.boardBody && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
                   /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Board Body" })
@@ -39214,6 +39312,7 @@ var AppearanceMenu = () => {
                 },
                 onMouseEnter: () => setHoveredItem("topCopper"),
                 onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("topCopper"),
                 children: [
                   /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.topCopper && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
                   /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Top Copper" })
@@ -39234,6 +39333,7 @@ var AppearanceMenu = () => {
                 },
                 onMouseEnter: () => setHoveredItem("bottomCopper"),
                 onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("bottomCopper"),
                 children: [
                   /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.bottomCopper && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
                   /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Copper" })
@@ -39254,6 +39354,7 @@ var AppearanceMenu = () => {
                 },
                 onMouseEnter: () => setHoveredItem("topSilkscreen"),
                 onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("topSilkscreen"),
                 children: [
                   /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.topSilkscreen && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
                   /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Top Silkscreen" })
@@ -39274,6 +39375,7 @@ var AppearanceMenu = () => {
                 },
                 onMouseEnter: () => setHoveredItem("bottomSilkscreen"),
                 onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("bottomSilkscreen"),
                 children: [
                   /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.bottomSilkscreen && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
                   /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "Bottom Silkscreen" })
@@ -39294,6 +39396,7 @@ var AppearanceMenu = () => {
                 },
                 onMouseEnter: () => setHoveredItem("smtModels"),
                 onMouseLeave: () => setHoveredItem(null),
+                onTouchStart: () => setHoveredItem("smtModels"),
                 children: [
                   /* @__PURE__ */ jsx32("span", { style: iconContainerStyles, children: visibility.smtModels && /* @__PURE__ */ jsx32(CheckIcon, {}) }),
                   /* @__PURE__ */ jsx32("span", { style: { display: "flex", alignItems: "center" }, children: "CAD Models" })
@@ -39423,6 +39526,7 @@ var ContextMenu = ({
                     },
                     onMouseEnter: () => setHoveredItem("camera"),
                     onMouseLeave: () => setHoveredItem(null),
+                    onTouchStart: () => setHoveredItem("camera"),
                     children: [
                       /* @__PURE__ */ jsx33(
                         "span",
@@ -39469,6 +39573,7 @@ var ContextMenu = ({
                         },
                         onMouseEnter: () => setHoveredItem(option),
                         onMouseLeave: () => setHoveredItem(null),
+                        onTouchStart: () => setHoveredItem(option),
                         children: [
                           /* @__PURE__ */ jsx33("span", { style: iconContainerStyles2, children: cameraPreset === option && /* @__PURE__ */ jsx33(DotIcon, {}) }),
                           /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: option })
@@ -39494,6 +39599,7 @@ var ContextMenu = ({
                   },
                   onMouseEnter: () => setHoveredItem("autorotate"),
                   onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("autorotate"),
                   children: [
                     /* @__PURE__ */ jsx33("span", { style: iconContainerStyles2, children: autoRotate && /* @__PURE__ */ jsx33(CheckIcon, {}) }),
                     /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Auto rotate" })
@@ -39513,6 +39619,7 @@ var ContextMenu = ({
                   onSelect: onDownloadGltf,
                   onMouseEnter: () => setHoveredItem("download"),
                   onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("download"),
                   children: /* @__PURE__ */ jsx33("span", { style: { display: "flex", alignItems: "center" }, children: "Download GLTF" })
                 }
               ),
@@ -39532,6 +39639,7 @@ var ContextMenu = ({
                   },
                   onMouseEnter: () => setHoveredItem("engine"),
                   onMouseLeave: () => setHoveredItem(null),
+                  onTouchStart: () => setHoveredItem("engine"),
                   children: [
                     /* @__PURE__ */ jsxs9("span", { style: { flex: 1, display: "flex", alignItems: "center" }, children: [
                       "Switch to ",
@@ -39594,7 +39702,7 @@ var ContextMenu = ({
 import { jsx as jsx34, jsxs as jsxs10 } from "react/jsx-runtime";
 var CadViewerInner = (props) => {
   const [engine, setEngine] = useState33("manifold");
-  const containerRef = useRef22(null);
+  const containerRef = useRef23(null);
   const [autoRotate, setAutoRotate] = useState33(() => {
     const stored = window.localStorage.getItem("cadViewerAutoRotate");
     return stored === "false" ? false : true;
@@ -39605,7 +39713,7 @@ var CadViewerInner = (props) => {
   });
   const [cameraPreset, setCameraPreset] = useState33("Custom");
   const { visibility, toggleLayer } = useLayerVisibility();
-  const cameraControllerRef = useRef22(null);
+  const cameraControllerRef = useRef23(null);
   const externalCameraControllerReady = props.onCameraControllerReady;
   const {
     menuVisible,
@@ -39614,10 +39722,10 @@ var CadViewerInner = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef22(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef23(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
-  const isAnimatingRef = useRef22(false);
-  const lastPresetSelectTime = useRef22(0);
+  const isAnimatingRef = useRef23(false);
+  const lastPresetSelectTime = useRef23(0);
   const PRESET_COOLDOWN = 1e3;
   const handleUserInteraction = useCallback20(() => {
     if (isAnimatingRef.current || Date.now() - lastPresetSelectTime.current < PRESET_COOLDOWN) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.431",
+  "version": "0.0.433",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",