Merge pull request #173 from musehq/dev

v2.12.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spacesvr",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "private": true,
   "description": "A standardized reality for future of the 3D Web",
   "keywords": [

src/layers/Environment/ui/PauseMenu/index.tsx

@@ -40,7 +40,7 @@ export default function PauseMenu(props: PauseMenuProps) {
   const PAUSE_ITEMS: MenuItem[] = [
     ...pauseMenuItems,
     {
-      text: "v2.12.0",
+      text: "v2.12.1",
       link: "https://www.npmjs.com/package/spacesvr",
     },
     ...menuItems,

src/layers/Toolbelt/ideas/ToolSwitcher.tsx

@@ -22,6 +22,7 @@ const Container = styled.div<{ open: boolean }>`
   z-index: 2;
   padding: ${FIXED_PADDING}px ${FIXED_PADDING}px 0 ${FIXED_PADDING}px;
   border-radius: ${OUTER_BORDER_RADIUS}px;
+  pointer-events: ${(props) => (props.open ? "all" : "none")};
 
   display: flex;
   max-width: calc(100% - 80px);

src/logic/toggle.ts

@@ -1,25 +1,33 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Timeout = NodeJS.Timeout;
 
 /**
  * A hook that allows you to toggle a boolean value.
  * @param delay time in ms
  */
 export const useDelayedToggle = (delay = 1000) => {
-  const lastTimeSet = useRef(0);
+  const timeoutId = useRef<Timeout | null>(null);
   const [active, setActiveState] = useState(false);
 
-  if (active && Date.now() - lastTimeSet.current > delay) {
-    lastTimeSet.current = Date.now();
-    setActiveState(!active);
-  }
-
   const setActive = useCallback(() => {
+    if (timeoutId.current !== null) {
+      clearTimeout(timeoutId.current);
+    }
+
     setActiveState(true);
-    lastTimeSet.current = Date.now();
-    setTimeout(() => {
-      if (Date.now() - lastTimeSet.current > delay) setActiveState(false);
+
+    timeoutId.current = setTimeout(() => {
+      setActiveState(false);
     }, delay);
   }, [delay]);
 
+  useEffect(() => {
+    return () => {
+      if (timeoutId.current !== null) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+
   return { active, setActive };
 };