@tscircuit/3d-viewer 0.0.233 → 0.0.234

package/dist/index.js

@@ -13980,7 +13980,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState9, useCallback as useCallback4, useRef as useRef7, useEffect as useEffect7 } from "react";
+import { useState as useState10, useRef as useRef8, useEffect as useEffect8 } from "react";
 
 // src/hooks/use-convert-children-to-soup.ts
 import { Circuit } from "@tscircuit/core";
@@ -16985,7 +16985,7 @@ import { Canvas, useFrame as useFrame2 } from "@react-three/fiber";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.232",
+  version: "0.0.233",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -17313,7 +17313,7 @@ var colors = {
 var MANIFOLD_Z_OFFSET = 1e-3;
 var SMOOTH_CIRCLE_SEGMENTS = 32;
 var DEFAULT_SMT_PAD_THICKNESS = 0.035;
-var TRACE_TEXTURE_RESOLUTION = 200;
+var TRACE_TEXTURE_RESOLUTION = 50;
 var boardMaterialColors = {
   fr1: colors.fr1Copper,
   fr4: colors.fr4Green
@@ -19905,29 +19905,76 @@ var CadViewerManifold = ({
 };
 var CadViewerManifold_default = CadViewerManifold;
 
-// src/CadViewer.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var CadViewer = (props) => {
-  const [engine, setEngine] = useState9("jscad");
+// src/hooks/useContextMenu.ts
+import { useState as useState9, useCallback as useCallback4, useRef as useRef7, useEffect as useEffect7 } from "react";
+var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState9(false);
   const [menuPos, setMenuPos] = useState9({
     x: 0,
     y: 0
   });
-  const containerRef = useRef7(null);
   const menuRef = useRef7(null);
-  const handleContextMenu = useCallback4((e) => {
-    e.preventDefault();
-    setMenuPos({ x: e.clientX, y: e.clientY });
-    setMenuVisible(true);
+  const interactionOriginPosRef = useRef7(null);
+  const handleContextMenu = useCallback4(
+    (e) => {
+      e.preventDefault();
+      const eventX = typeof e.clientX === "number" ? e.clientX : 0;
+      const eventY = typeof e.clientY === "number" ? e.clientY : 0;
+      if (!interactionOriginPosRef.current) {
+        return;
+      }
+      const { x: originX, y: originY } = interactionOriginPosRef.current;
+      const dx = Math.abs(eventX - originX);
+      const dy = Math.abs(eventY - originY);
+      const swipeThreshold = 10;
+      if (dx > swipeThreshold || dy > swipeThreshold) {
+        interactionOriginPosRef.current = null;
+        return;
+      }
+      setMenuPos({ x: eventX, y: eventY });
+      setMenuVisible(true);
+      interactionOriginPosRef.current = null;
+    },
+    [setMenuPos, setMenuVisible]
+  );
+  const handleTouchStart = useCallback4((e) => {
+    if (e.touches.length === 1) {
+      const touch = e.touches[0];
+      if (touch) {
+        interactionOriginPosRef.current = { x: touch.clientX, y: touch.clientY };
+      } else {
+        interactionOriginPosRef.current = null;
+      }
+    } else {
+      interactionOriginPosRef.current = null;
+    }
+  }, []);
+  const handleTouchMove = useCallback4((e) => {
+    if (!interactionOriginPosRef.current || e.touches.length !== 1) {
+      return;
+    }
+    const touch = e.touches[0];
+    if (touch) {
+      const dx = Math.abs(touch.clientX - interactionOriginPosRef.current.x);
+      const dy = Math.abs(touch.clientY - interactionOriginPosRef.current.y);
+      const swipeThreshold = 10;
+      if (dx > swipeThreshold || dy > swipeThreshold) {
+        interactionOriginPosRef.current = null;
+      }
+    } else {
+      interactionOriginPosRef.current = null;
+    }
+  }, []);
+  const handleTouchEnd = useCallback4(() => {
+    setTimeout(() => {
+      if (interactionOriginPosRef.current) {
+        interactionOriginPosRef.current = null;
+      }
+    }, 0);
   }, []);
-  const handleMenuClick = (newEngine) => {
-    setEngine(newEngine);
-    setMenuVisible(false);
-  };
   const handleClickAway = useCallback4((e) => {
     const target = e.target;
-    if (!menuRef.current || !menuRef.current.contains(target)) {
+    if (menuRef.current && !menuRef.current.contains(target)) {
       setMenuVisible(false);
     }
   }, []);
@@ -19937,13 +19984,52 @@ var CadViewer = (props) => {
       return () => document.removeEventListener("mousedown", handleClickAway);
     }
   }, [menuVisible, handleClickAway]);
-  useEffect7(() => {
+  const contextMenuEventHandlers = {
+    onMouseDown: (e) => {
+      if (e.button === 2) {
+        interactionOriginPosRef.current = { x: e.clientX, y: e.clientY };
+      } else {
+        interactionOriginPosRef.current = null;
+      }
+    },
+    onContextMenu: handleContextMenu,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
+  };
+  return {
+    menuVisible,
+    menuPos,
+    menuRef,
+    contextMenuEventHandlers,
+    setMenuVisible
+    // Expose setMenuVisible for direct control if needed
+  };
+};
+
+// src/CadViewer.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var CadViewer = (props) => {
+  const [engine, setEngine] = useState10("jscad");
+  const containerRef = useRef8(null);
+  const {
+    menuVisible,
+    menuPos,
+    menuRef,
+    contextMenuEventHandlers,
+    setMenuVisible
+  } = useContextMenu({ containerRef });
+  const handleMenuClick = (newEngine) => {
+    setEngine(newEngine);
+    setMenuVisible(false);
+  };
+  useEffect8(() => {
     const stored = window.localStorage.getItem("cadViewerEngine");
     if (stored === "jscad" || stored === "manifold") {
       setEngine(stored);
     }
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     window.localStorage.setItem("cadViewerEngine", engine);
   }, [engine]);
   const viewerKey = props.circuitJson ? JSON.stringify(props.circuitJson) : void 0;
@@ -19952,7 +20038,7 @@ var CadViewer = (props) => {
     {
       ref: containerRef,
       style: { width: "100%", height: "100%", position: "relative" },
-      onContextMenu: handleContextMenu,
+      ...contextMenuEventHandlers,
       children: [
         engine === "jscad" ? /* @__PURE__ */ jsx12(CadViewerJscad, { ...props }) : /* @__PURE__ */ jsx12(CadViewerManifold_default, { ...props }),
         /* @__PURE__ */ jsxs9(
@@ -19970,11 +20056,6 @@ var CadViewer = (props) => {
               opacity: 0.7,
               userSelect: "none"
             },
-            onClick: () => {
-              if ("ontouchstart" in window) {
-                setEngine(engine === "jscad" ? "manifold" : "jscad");
-              }
-            },
             children: [
               "Engine: ",
               /* @__PURE__ */ jsx12("b", { children: engine === "jscad" ? "JSCAD" : "Manifold" })
@@ -20308,7 +20389,7 @@ async function convertCircuitJsonTo3dSvg(circuitJson, options = {}) {
 }
 
 // src/hooks/exporter/gltf.ts
-import { useEffect as useEffect8, useState as useState10, useMemo as useMemo8, useCallback as useCallback5 } from "react";
+import { useEffect as useEffect9, useState as useState11, useMemo as useMemo8, useCallback as useCallback6 } from "react";
 function useSaveGltfAs(options = {}) {
   const parse = useParser(options);
   const link = useMemo8(() => document.createElement("a"), []);
@@ -20321,7 +20402,7 @@ function useSaveGltfAs(options = {}) {
     link.dispatchEvent(new MouseEvent("click"));
     URL.revokeObjectURL(url);
   };
-  useEffect8(
+  useEffect9(
     () => () => {
       link.remove();
       instance = null;
@@ -20329,20 +20410,20 @@ function useSaveGltfAs(options = {}) {
     []
   );
   let instance;
-  const ref = useCallback5((obj3D) => {
+  const ref = useCallback6((obj3D) => {
     instance = obj3D;
   }, []);
   return [ref, saveAs];
 }
 function useExportGltfUrl(options = {}) {
   const parse = useParser(options);
-  const [url, setUrl] = useState10();
-  const [error, setError] = useState10();
-  const ref = useCallback5(
+  const [url, setUrl] = useState11();
+  const [error, setError] = useState11();
+  const ref = useCallback6(
     (instance) => parse(instance).then(setUrl).catch(setError),
     []
   );
-  useEffect8(() => () => URL.revokeObjectURL(url), [url]);
+  useEffect9(() => () => URL.revokeObjectURL(url), [url]);
   return [ref, url, error];
 }
 function useParser(options = {}) {

package/package.json

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