@tscircuit/3d-viewer 0.0.306 → 0.0.308

package/dist/index.js

@@ -13980,7 +13980,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState11, useRef as useRef8, useEffect as useEffect8 } from "react";
+import { useState as useState11, useCallback as useCallback6, useRef as useRef8, useEffect as useEffect8 } from "react";
 
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/soup-util";
@@ -17286,7 +17286,7 @@ import {
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.305",
+  version: "0.0.307",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17318,7 +17318,7 @@ var package_default = {
     "@react-three/drei": "^9.121.4",
     "@react-three/fiber": "^8.17.14",
     "@tscircuit/core": "^0.0.580",
-    "@tscircuit/props": "^0.0.268",
+    "@tscircuit/props": "^0.0.269",
     "@tscircuit/soup-util": "^0.0.41",
     "jscad-electronics": "^0.0.29",
     "jscad-fiber": "^0.0.79",
@@ -17475,7 +17475,8 @@ var CadViewerContainer = forwardRef(
     initialCameraPosition = [5, 5, 5],
     autoRotateDisabled,
     clickToInteractEnabled = false,
-    boardDimensions
+    boardDimensions,
+    onUserInteraction
   }, ref) => {
     const [isInteractionEnabled, setIsInteractionEnabled] = useState3(
       !clickToInteractEnabled
@@ -17526,7 +17527,8 @@ var CadViewerContainer = forwardRef(
               OrbitControls,
               {
                 autoRotate: !autoRotateDisabled,
-                autoRotateSpeed: 1
+                autoRotateSpeed: 1,
+                onStart: onUserInteraction
               }
             ),
             /* @__PURE__ */ jsx7("ambientLight", { intensity: Math.PI / 2 }),
@@ -18981,7 +18983,14 @@ var ThreeErrorBoundary = class extends React.Component {
 // src/CadViewerJscad.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var CadViewerJscad = forwardRef2(
-  ({ soup, circuitJson, children, autoRotateDisabled, clickToInteractEnabled }, ref) => {
+  ({
+    soup,
+    circuitJson,
+    children,
+    autoRotateDisabled,
+    clickToInteractEnabled,
+    onUserInteraction
+  }, ref) => {
     const childrenSoup = useConvertChildrenToSoup(children);
     const internalCircuitJson = useMemo6(() => {
       const cj = soup ?? circuitJson;
@@ -19028,6 +19037,7 @@ var CadViewerJscad = forwardRef2(
         initialCameraPosition,
         clickToInteractEnabled,
         boardDimensions,
+        onUserInteraction,
         children: [
           boardStls.map(({ stlUrl, color }, index) => /* @__PURE__ */ jsx10(
             STLModel,
@@ -20097,6 +20107,7 @@ var CadViewerManifold = ({
   circuitJson: circuitJsonProp,
   autoRotateDisabled,
   clickToInteractEnabled,
+  onUserInteraction,
   children
 }) => {
   const childrenCircuitJson = useConvertChildrenToSoup(children);
@@ -20208,6 +20219,7 @@ var CadViewerManifold = ({
       autoRotateDisabled,
       clickToInteractEnabled,
       boardDimensions,
+      onUserInteraction,
       children: [
         geometryMeshes.map((mesh, index) => /* @__PURE__ */ jsx11("primitive", { object: mesh }, `${mesh.name}-${index}`)),
         textureMeshes.map((mesh, index) => /* @__PURE__ */ jsx11("primitive", { object: mesh }, `${mesh.name}-${index}`)),
@@ -20338,6 +20350,8 @@ import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var CadViewer = (props) => {
   const [engine, setEngine] = useState11("manifold");
   const containerRef = useRef8(null);
+  const [autoRotate, setAutoRotate] = useState11(true);
+  const [autoRotateUserToggled, setAutoRotateUserToggled] = useState11(false);
   const {
     menuVisible,
     menuPos,
@@ -20345,6 +20359,15 @@ var CadViewer = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
+  const handleUserInteraction = useCallback6(() => {
+    if (!autoRotateUserToggled) {
+      setAutoRotate(false);
+    }
+  }, [autoRotateUserToggled]);
+  const toggleAutoRotate = useCallback6(() => {
+    setAutoRotate((prev) => !prev);
+    setAutoRotateUserToggled(true);
+  }, []);
   const handleMenuClick = (newEngine) => {
     setEngine(newEngine);
     setMenuVisible(false);
@@ -20366,7 +20389,21 @@ var CadViewer = (props) => {
       style: { width: "100%", height: "100%", position: "relative" },
       ...contextMenuEventHandlers,
       children: [
-        engine === "jscad" ? /* @__PURE__ */ jsx12(CadViewerJscad, { ...props }) : /* @__PURE__ */ jsx12(CadViewerManifold_default, { ...props }),
+        engine === "jscad" ? /* @__PURE__ */ jsx12(
+          CadViewerJscad,
+          {
+            ...props,
+            autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
+            onUserInteraction: handleUserInteraction
+          }
+        ) : /* @__PURE__ */ jsx12(
+          CadViewerManifold_default,
+          {
+            ...props,
+            autoRotateDisabled: props.autoRotateDisabled || !autoRotate,
+            onUserInteraction: handleUserInteraction
+          }
+        ),
         /* @__PURE__ */ jsxs9(
           "div",
           {
@@ -20388,7 +20425,7 @@ var CadViewer = (props) => {
             ]
           }
         ),
-        menuVisible && /* @__PURE__ */ jsx12(
+        menuVisible && /* @__PURE__ */ jsxs9(
           "div",
           {
             ref: menuRef,
@@ -20408,42 +20445,70 @@ var CadViewer = (props) => {
               fontWeight: 500,
               transition: "opacity 0.1s"
             },
-            children: /* @__PURE__ */ jsxs9(
-              "div",
-              {
-                style: {
-                  padding: "12px 18px",
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 10,
-                  color: "#f5f6fa",
-                  fontWeight: 500,
-                  borderRadius: 6,
-                  transition: "background 0.1s"
-                },
-                onClick: () => handleMenuClick(engine === "jscad" ? "manifold" : "jscad"),
-                onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
-                onMouseOut: (e) => e.currentTarget.style.background = "transparent",
-                children: [
-                  "Switch to ",
-                  engine === "jscad" ? "Manifold" : "JSCAD",
-                  " Engine",
-                  /* @__PURE__ */ jsx12(
-                    "span",
-                    {
-                      style: {
-                        fontSize: 12,
-                        marginLeft: "auto",
-                        opacity: 0.5,
-                        fontWeight: 400
-                      },
-                      children: engine === "jscad" ? "experimental" : "default"
-                    }
-                  )
-                ]
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  style: {
+                    padding: "12px 18px",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    color: "#f5f6fa",
+                    fontWeight: 500,
+                    borderRadius: 6,
+                    transition: "background 0.1s"
+                  },
+                  onClick: () => handleMenuClick(engine === "jscad" ? "manifold" : "jscad"),
+                  onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
+                  onMouseOut: (e) => e.currentTarget.style.background = "transparent",
+                  children: [
+                    "Switch to ",
+                    engine === "jscad" ? "Manifold" : "JSCAD",
+                    " Engine",
+                    /* @__PURE__ */ jsx12(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 12,
+                          marginLeft: "auto",
+                          opacity: 0.5,
+                          fontWeight: 400
+                        },
+                        children: engine === "jscad" ? "experimental" : "default"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs9(
+                "div",
+                {
+                  style: {
+                    padding: "12px 18px",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    color: "#f5f6fa",
+                    fontWeight: 500,
+                    borderRadius: 6,
+                    transition: "background 0.1s"
+                  },
+                  onClick: () => {
+                    toggleAutoRotate();
+                    setMenuVisible(false);
+                  },
+                  onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
+                  onMouseOut: (e) => e.currentTarget.style.background = "transparent",
+                  children: [
+                    /* @__PURE__ */ jsx12("span", { style: { marginRight: 8 }, children: autoRotate ? "\u2714" : "" }),
+                    "Auto rotate"
+                  ]
+                }
+              )
+            ]
           }
         )
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/3d-viewer",
-  "version": "0.0.306",
+  "version": "0.0.308",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "type": "module",
@@ -32,7 +32,7 @@
     "@react-three/drei": "^9.121.4",
     "@react-three/fiber": "^8.17.14",
     "@tscircuit/core": "^0.0.580",
-    "@tscircuit/props": "^0.0.268",
+    "@tscircuit/props": "^0.0.269",
     "@tscircuit/soup-util": "^0.0.41",
     "jscad-electronics": "^0.0.29",
     "jscad-fiber": "^0.0.79",