@tscircuit/3d-viewer 0.0.320 → 0.0.321

package/dist/index.js

@@ -15804,7 +15804,7 @@ var require_browser = __commonJS({
 });
 
 // src/CadViewer.tsx
-import { useState as useState16, useCallback as useCallback7, useRef as useRef8, useEffect as useEffect22 } from "react";
+import { useState as useState16, useCallback as useCallback7, useRef as useRef9, useEffect as useEffect22 } from "react";
 
 // src/CadViewerJscad.tsx
 import { su as su4 } from "@tscircuit/circuit-json-util";
@@ -15824,7 +15824,8 @@ import {
   useState,
   useCallback,
   useMemo,
-  useEffect
+  useEffect,
+  useRef
 } from "react";
 import * as THREE from "three";
 
@@ -15859,26 +15860,43 @@ var useHover = () => {
 var HoverProvider = ({ children }) => {
   const { camera, renderer } = useThree();
   const [hoverables, setHoverables] = useState([]);
-  const [hoveredObject, setHoveredObject] = useState(
-    null
-  );
   const raycaster = useMemo(() => new THREE.Raycaster(), []);
   const mouse = useMemo(() => new THREE.Vector2(), []);
+  const hoverablesRef = useRef(hoverables);
+  hoverablesRef.current = hoverables;
+  const hoveredObjectRef = useRef(null);
   const addHoverable = useCallback((hoverable) => {
     setHoverables((prev) => [...prev, hoverable]);
   }, []);
   const removeHoverable = useCallback((object) => {
+    if (hoveredObjectRef.current) {
+      let isAncestor = false;
+      let current2 = hoveredObjectRef.current.object;
+      while (current2) {
+        if (current2 === object) {
+          isAncestor = true;
+          break;
+        }
+        current2 = current2.parent;
+      }
+      if (isAncestor) {
+        hoveredObjectRef.current = null;
+      }
+    }
     setHoverables((prev) => prev.filter((h) => h.object !== object));
   }, []);
-  const findHoverable = (object) => {
-    let current2 = object;
-    while (current2) {
-      const found = hoverables.find((h) => h.object === current2);
-      if (found) return found;
-      current2 = current2.parent;
-    }
-    return void 0;
-  };
+  const findHoverable = useCallback(
+    (object) => {
+      let current2 = object;
+      while (current2) {
+        const found = hoverablesRef.current.find((h) => h.object === current2);
+        if (found) return found;
+        current2 = current2.parent;
+      }
+      return void 0;
+    },
+    []
+  );
   const onMouseMove2 = useCallback(
     (event) => {
       if (!renderer.domElement) return;
@@ -15886,8 +15904,14 @@ var HoverProvider = ({ children }) => {
       mouse.x = (event.clientX - rect.left) / rect.width * 2 - 1;
       mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
       raycaster.setFromCamera(mouse, camera);
-      const objectsToIntersect = hoverables.map((h) => h.object);
-      if (objectsToIntersect.length === 0) return;
+      const objectsToIntersect = hoverablesRef.current.map((h) => h.object);
+      if (objectsToIntersect.length === 0) {
+        if (hoveredObjectRef.current) {
+          hoveredObjectRef.current.onUnhover();
+          hoveredObjectRef.current = null;
+        }
+        return;
+      }
       const intersects = raycaster.intersectObjects(objectsToIntersect, true);
       if (intersects.length > 0) {
         const firstIntersect = intersects[0];
@@ -15900,27 +15924,27 @@ var HoverProvider = ({ children }) => {
               firstIntersect.point.z
             ]
           };
-          if (hoveredObject !== newHovered) {
-            hoveredObject?.onUnhover();
+          if (hoveredObjectRef.current !== newHovered) {
+            hoveredObjectRef.current?.onUnhover();
             newHovered.onHover(eventPayload);
-            setHoveredObject(newHovered);
+            hoveredObjectRef.current = newHovered;
           } else {
             newHovered.onHover(eventPayload);
           }
         } else {
-          if (hoveredObject) {
-            hoveredObject.onUnhover();
-            setHoveredObject(null);
+          if (hoveredObjectRef.current) {
+            hoveredObjectRef.current.onUnhover();
+            hoveredObjectRef.current = null;
           }
         }
       } else {
-        if (hoveredObject) {
-          hoveredObject.onUnhover();
-          setHoveredObject(null);
+        if (hoveredObjectRef.current) {
+          hoveredObjectRef.current.onUnhover();
+          hoveredObjectRef.current = null;
         }
       }
     },
-    [camera, renderer, raycaster, mouse, hoverables, hoveredObject]
+    [camera, renderer, raycaster, mouse, findHoverable]
   );
   useEffect(() => {
     const domElement = renderer.domElement;
@@ -23600,7 +23624,7 @@ var require_react_development = __commonJS2({
           var dispatcher = resolveDispatcher();
           return dispatcher.useReducer(reducer, initialArg, init);
         }
-        function useRef9(initialValue) {
+        function useRef10(initialValue) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useRef(initialValue);
         }
@@ -24394,7 +24418,7 @@ var require_react_development = __commonJS2({
         exports.useLayoutEffect = useLayoutEffect;
         exports.useMemo = useMemo22;
         exports.useReducer = useReducer;
-        exports.useRef = useRef9;
+        exports.useRef = useRef10;
         exports.useState = useState18;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
@@ -101537,12 +101561,12 @@ var FootprinterModel = ({
 var tuple = (...args) => args;
 
 // src/react-three/Html.tsx
-import { useRef, useEffect as useEffect7, useState as useState4 } from "react";
+import { useRef as useRef2, useEffect as useEffect7, useState as useState4 } from "react";
 import ReactDOM from "react-dom";
 import * as THREE5 from "three";
 var Html = ({ children, position, style }) => {
   const { camera, renderer } = useThree();
-  const el = useRef(document.createElement("div"));
+  const el = useRef2(document.createElement("div"));
   const [portal, setPortal] = useState4(null);
   useEffect7(() => {
     const rendererNode = renderer?.domElement.parentNode;
@@ -101686,7 +101710,7 @@ import * as THREE10 from "three";
 // package.json
 var package_default = {
   name: "@tscircuit/3d-viewer",
-  version: "0.0.319",
+  version: "0.0.320",
   main: "./dist/index.js",
   module: "./dist/index.js",
   type: "module",
@@ -101950,7 +101974,7 @@ var CubeWithLabeledSides = ({}) => {
 
 // src/react-three/Canvas.tsx
 import {
-  useRef as useRef3,
+  useRef as useRef4,
   useEffect as useEffect10,
   useState as useState6,
   useCallback as useCallback3,
@@ -101962,11 +101986,11 @@ import * as THREE7 from "three";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var Canvas = forwardRef(
   ({ children, scene: sceneProps, camera: cameraProps, style }, ref) => {
-    const mountRef = useRef3(null);
+    const mountRef = useRef4(null);
     const [contextState, setContextState] = useState6(
       null
     );
-    const frameListeners = useRef3(
+    const frameListeners = useRef4(
       []
     );
     const addFrameListener = useCallback3(
@@ -101987,7 +102011,7 @@ var Canvas = forwardRef(
     if (sceneProps?.up) {
       scene.up.set(sceneProps.up.x, sceneProps.up.y, sceneProps.up.z);
     }
-    const rootObject = useRef3(new THREE7.Object3D());
+    const rootObject = useRef4(new THREE7.Object3D());
     useImperativeHandle(ref, () => rootObject.current);
     useEffect10(() => {
       if (!mountRef.current) return;
@@ -102439,7 +102463,7 @@ var useStlsFromGeom = (geom) => {
 };
 
 // src/hooks/useBoardGeomBuilder.ts
-import { useState as useState9, useEffect as useEffect16, useRef as useRef5 } from "react";
+import { useState as useState9, useEffect as useEffect16, useRef as useRef6 } from "react";
 
 // src/soup-to-3d/index.ts
 var import_primitives2 = __toESM(require_primitives(), 1);
@@ -103554,7 +103578,7 @@ var BoardGeomBuilder = class {
 // src/hooks/useBoardGeomBuilder.ts
 var useBoardGeomBuilder = (circuitJson) => {
   const [boardGeom, setBoardGeom] = useState9(null);
-  const isProcessingRef = useRef5(false);
+  const isProcessingRef = useRef6(false);
   useEffect16(() => {
     let isCancelled = false;
     if (!circuitJson) {
@@ -103869,7 +103893,7 @@ import ManifoldModule from "manifold-3d";
 import { useEffect as useEffect20, useMemo as useMemo19, useState as useState14 } from "react";
 
 // src/hooks/useManifoldBoardBuilder.ts
-import { useState as useState13, useEffect as useEffect19, useMemo as useMemo18, useRef as useRef6 } from "react";
+import { useState as useState13, useEffect as useEffect19, useMemo as useMemo18, useRef as useRef7 } from "react";
 import { su as su12 } from "@tscircuit/circuit-json-util";
 import * as THREE19 from "three";
 
@@ -104629,7 +104653,7 @@ var useManifoldBoardBuilder = (manifoldJSModule, circuitJson) => {
   const [pcbThickness, setPcbThickness] = useState13(null);
   const [error, setError] = useState13(null);
   const [isLoading, setIsLoading] = useState13(true);
-  const manifoldInstancesForCleanup = useRef6([]);
+  const manifoldInstancesForCleanup = useRef7([]);
   const boardData = useMemo18(() => {
     const boards = su12(circuitJson).pcb_board.list();
     if (boards.length === 0) {
@@ -105056,15 +105080,15 @@ var CadViewerManifold = ({
 var CadViewerManifold_default = CadViewerManifold;
 
 // src/hooks/useContextMenu.ts
-import { useState as useState15, useCallback as useCallback6, useRef as useRef7, useEffect as useEffect21 } from "react";
+import { useState as useState15, useCallback as useCallback6, useRef as useRef8, useEffect as useEffect21 } from "react";
 var useContextMenu = ({ containerRef }) => {
   const [menuVisible, setMenuVisible] = useState15(false);
   const [menuPos, setMenuPos] = useState15({
     x: 0,
     y: 0
   });
-  const menuRef = useRef7(null);
-  const interactionOriginPosRef = useRef7(null);
+  const menuRef = useRef8(null);
+  const interactionOriginPosRef = useRef8(null);
   const handleContextMenu = useCallback6(
     (e) => {
       e.preventDefault();
@@ -105161,7 +105185,7 @@ var useContextMenu = ({ containerRef }) => {
 import { jsx as jsx43, jsxs as jsxs7 } from "react/jsx-runtime";
 var CadViewer = (props) => {
   const [engine, setEngine] = useState16("manifold");
-  const containerRef = useRef8(null);
+  const containerRef = useRef9(null);
   const [autoRotate, setAutoRotate] = useState16(true);
   const [autoRotateUserToggled, setAutoRotateUserToggled] = useState16(false);
   const {
@@ -105171,7 +105195,7 @@ var CadViewer = (props) => {
     contextMenuEventHandlers,
     setMenuVisible
   } = useContextMenu({ containerRef });
-  const autoRotateUserToggledRef = useRef8(autoRotateUserToggled);
+  const autoRotateUserToggledRef = useRef9(autoRotateUserToggled);
   autoRotateUserToggledRef.current = autoRotateUserToggled;
   const handleUserInteraction = useCallback7(() => {
     if (!autoRotateUserToggledRef.current) {

package/package.json

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