@tscircuit/3d-viewer 0.0.431 → 0.0.432

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.431",
   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);
@@ -39594,7 +39683,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 +39694,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 +39703,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.432",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",