@tscircuit/3d-viewer 0.0.352 → 0.0.354

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 useState15, useCallback as useCallback8, 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.351",
+  version: "0.0.353",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -25912,6 +25912,7 @@ var Canvas = forwardRef(
       }
       camera.lookAt(0, 0, 0);
       scene.add(rootObject.current);
+      window.__TSCIRCUIT_THREE_OBJECT = rootObject.current;
       setContextState({
         scene,
         camera,
@@ -25949,6 +25950,9 @@ var Canvas = forwardRef(
         }
         renderer.dispose();
         scene.remove(rootObject.current);
+        if (window.__TSCIRCUIT_THREE_OBJECT === rootObject.current) {
+          window.__TSCIRCUIT_THREE_OBJECT = void 0;
+        }
       };
     }, [scene, addFrameListener, removeFrameListener]);
     return /* @__PURE__ */ jsx9("div", { ref: mountRef, style: { width: "100%", height: "100%", ...style }, children: contextState && /* @__PURE__ */ jsx9(ThreeContext.Provider, { value: contextState, children: /* @__PURE__ */ jsx9(HoverProvider, { children }) }) });
@@ -29055,11 +29059,23 @@ var useContextMenu = ({ containerRef }) => {
   });
   const menuRef = useRef8(null);
   const interactionOriginPosRef = useRef8(null);
+  const longPressTimeoutRef = useRef8(null);
+  const ignoreNextContextMenuRef = useRef8(false);
+  const clearLongPressTimeout = () => {
+    if (longPressTimeoutRef.current !== null) {
+      clearTimeout(longPressTimeoutRef.current);
+      longPressTimeoutRef.current = null;
+    }
+  };
   const handleContextMenu = useCallback6(
     (e) => {
       e.preventDefault();
       const eventX = typeof e.clientX === "number" ? e.clientX : 0;
       const eventY = typeof e.clientY === "number" ? e.clientY : 0;
+      if (ignoreNextContextMenuRef.current) {
+        ignoreNextContextMenuRef.current = false;
+        return;
+      }
       if (!interactionOriginPosRef.current) {
         return;
       }
@@ -29077,18 +29093,39 @@ var useContextMenu = ({ containerRef }) => {
     },
     [setMenuPos, setMenuVisible]
   );
-  const handleTouchStart = useCallback6((e) => {
-    if (e.touches.length === 1) {
-      const touch = e.touches[0];
-      if (touch) {
-        interactionOriginPosRef.current = { x: touch.clientX, y: touch.clientY };
+  const handleTouchStart = useCallback6(
+    (e) => {
+      if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        if (touch) {
+          interactionOriginPosRef.current = {
+            x: touch.clientX,
+            y: touch.clientY
+          };
+          clearLongPressTimeout();
+          longPressTimeoutRef.current = window.setTimeout(() => {
+            if (!interactionOriginPosRef.current) return;
+            if (containerRef.current) {
+              const rect = containerRef.current.getBoundingClientRect();
+              setMenuPos({
+                x: rect.left + rect.width / 2,
+                y: rect.top + rect.height / 2
+              });
+              setMenuVisible(true);
+              ignoreNextContextMenuRef.current = true;
+            }
+            interactionOriginPosRef.current = null;
+          }, 600);
+        } else {
+          interactionOriginPosRef.current = null;
+        }
       } else {
         interactionOriginPosRef.current = null;
+        clearLongPressTimeout();
       }
-    } else {
-      interactionOriginPosRef.current = null;
-    }
-  }, []);
+    },
+    [containerRef]
+  );
   const handleTouchMove = useCallback6((e) => {
     if (!interactionOriginPosRef.current || e.touches.length !== 1) {
       return;
@@ -29100,12 +29137,15 @@ var useContextMenu = ({ containerRef }) => {
       const swipeThreshold = 10;
       if (dx > swipeThreshold || dy > swipeThreshold) {
         interactionOriginPosRef.current = null;
+        clearLongPressTimeout();
       }
     } else {
       interactionOriginPosRef.current = null;
+      clearLongPressTimeout();
     }
   }, []);
   const handleTouchEnd = useCallback6(() => {
+    clearLongPressTimeout();
     setTimeout(() => {
       if (interactionOriginPosRef.current) {
         interactionOriginPosRef.current = null;
@@ -29121,7 +29161,11 @@ var useContextMenu = ({ containerRef }) => {
   useEffect21(() => {
     if (menuVisible) {
       document.addEventListener("mousedown", handleClickAway);
-      return () => document.removeEventListener("mousedown", handleClickAway);
+      document.addEventListener("touchstart", handleClickAway);
+      return () => {
+        document.removeEventListener("mousedown", handleClickAway);
+        document.removeEventListener("touchstart", handleClickAway);
+      };
     }
   }, [menuVisible, handleClickAway]);
   const contextMenuEventHandlers = {
@@ -29147,6 +29191,35 @@ var useContextMenu = ({ containerRef }) => {
   };
 };
 
+// src/hooks/useGlobalDownloadGltf.ts
+import { useCallback as useCallback7 } from "react";
+import { GLTFExporter } from "three-stdlib";
+var useGlobalDownloadGltf = () => {
+  return useCallback7(() => {
+    const root = window.__TSCIRCUIT_THREE_OBJECT;
+    if (!root) return;
+    const exporter = new GLTFExporter();
+    exporter.parse(
+      root,
+      (gltf) => {
+        const blob = new Blob(
+          [gltf instanceof ArrayBuffer ? gltf : JSON.stringify(gltf)],
+          { type: "model/gltf+json" }
+        );
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "scene.gltf";
+        link.click();
+        URL.revokeObjectURL(url);
+      },
+      (err) => {
+        console.error("Failed to export GLTF", err);
+      }
+    );
+  }, []);
+};
+
 // src/CadViewer.tsx
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var CadViewer = (props) => {
@@ -29163,15 +29236,16 @@ var CadViewer = (props) => {
   } = useContextMenu({ containerRef });
   const autoRotateUserToggledRef = useRef9(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);
   }, []);
+  const downloadGltf = useGlobalDownloadGltf();
   const handleMenuClick = (newEngine) => {
     setEngine(newEngine);
     setMenuVisible(false);
@@ -29190,7 +29264,16 @@ var CadViewer = (props) => {
     "div",
     {
       ref: containerRef,
-      style: { width: "100%", height: "100%", position: "relative" },
+      style: {
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        userSelect: "none",
+        MozUserSelect: "none",
+        msUserSelect: "none",
+        WebkitUserSelect: "none",
+        WebkitTouchCallout: "none"
+      },
       ...contextMenuEventHandlers,
       children: [
         engine === "jscad" ? /* @__PURE__ */ jsx14(
@@ -29312,6 +29395,29 @@ 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: () => {
+                    downloadGltf();
+                    setMenuVisible(false);
+                  },
+                  onMouseOver: (e) => e.currentTarget.style.background = "#2d313a",
+                  onMouseOut: (e) => e.currentTarget.style.background = "transparent",
+                  children: "Download GLTF"
+                }
+              ),
               /* @__PURE__ */ jsx14(
                 "div",
                 {
@@ -29616,8 +29722,8 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 }
 
 // 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";
+import { GLTFExporter as GLTFExporter2 } from "three-stdlib";
+import { useEffect as useEffect23, useState as useState16, useMemo as useMemo19, useCallback as useCallback9 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
   const link = useMemo19(() => document.createElement("a"), []);
@@ -29638,7 +29744,7 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback8((obj3D) => {
+  const ref = useCallback9((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
@@ -29647,7 +29753,7 @@ function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
   const [url, setUrl] = useState16();
   const [error, setError] = useState16();
-  const ref = useCallback8(
+  const ref = useCallback9(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );
@@ -29655,7 +29761,7 @@ function useExportGltfUrl(options = {}) {
   return [ref, url, error];
 }
 function useParser(options = {}) {
-  const exporter = useMemo19(() => new GLTFExporter(), []);
+  const exporter = useMemo19(() => new GLTFExporter2(), []);
   return (instance) => {
     const { promise, resolve, reject } = Promise.withResolvers();
     exporter.parse(

package/package.json

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