fix escape issues

voxel51 · Aug 29, 2022 · dda2a84 · dda2a84
1 parent 6f60985
commit dda2a84
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 18 deletions.
diff --git a/app/packages/app/src/components/Modal/Looker.tsx b/app/packages/app/src/components/Modal/Looker.tsx
@@ -115,9 +115,6 @@ const Looker = ({ lookerRef, onClose, onNext, onPrevious }: LookerProps) => {
     if (showJSON === true) {
       jsonPanel.open(sample);
     }
-    if (showJSON === false) {
-      jsonPanel.close();
-    }
   });
 
   onClose && useEventHandler(looker, "close", onClose);

diff --git a/app/packages/looker-3d/src/Looker3d.tsx b/app/packages/looker-3d/src/Looker3d.tsx
@@ -203,7 +203,7 @@ function Polyline({
   selected,
   onClick,
   tooltip,
-  label
+  label,
 }) {
   if (filled) {
     // filled not yet supported
@@ -395,6 +395,15 @@ function Looker3dCore({ sampleOverride: sample }) {
   useHotkey(
     "Escape",
     ({ get, set }) => {
+      if (get(jsonPanel.stateAtom).isOpen) {
+        set(jsonPanel.stateAtom, (s) => ({ ...s, isOpen: false }));
+        return false;
+      }
+      if (get(helpPanel.stateAtom).isOpen) {
+        set(helpPanel.stateAtom, (s) => ({ ...s, isOpen: false }));
+        return false;
+      }
+
       const selectedLabels = get(fos.selectedLabels);
       if (selectedLabels && Object.keys(selectedLabels).length > 0) {
         set(fos.selectedLabels, {});
@@ -404,10 +413,9 @@ function Looker3dCore({ sampleOverride: sample }) {
       const changed = onChangeView("top");
       if (changed) return;
 
-      if (jsonPanel.isOpen) return;
       set(fos.modal, null);
     },
-    [jsonPanel.isOpen, selectedLabels, hovering]
+    [jsonPanel.isOpen, helpPanel.isOpen, selectedLabels, hovering]
   );
 
   useEffect(() => {

diff --git a/app/packages/state/src/hooks/useClearModal.ts b/app/packages/state/src/hooks/useClearModal.ts
@@ -1,11 +1,16 @@
 import { useRecoilTransaction_UNSTABLE } from "recoil";
 
 import * as fos from "../recoil";
-
+import useJSONPanel from "./useJSONPanel";
+import useHelpPanel from "./useHelpPanel";
 export default () => {
+  const jsonPanel = useJSONPanel();
+  const helpPanel = useHelpPanel();
   return useRecoilTransaction_UNSTABLE(
     ({ set, get }) =>
       () => {
+        if (get(jsonPanel.stateAtom).isOpen) return;
+        if (get(helpPanel.stateAtom).isOpen) return;
         const fullscreen = get(fos.fullscreen);
         if (fullscreen) {
           return;

diff --git a/app/packages/state/src/hooks/useHelpPanel.ts b/app/packages/state/src/hooks/useHelpPanel.ts
@@ -47,5 +47,6 @@ export default function useHelpPanel() {
     },
     items,
     isOpen,
+    stateAtom: helpPanelState,
   };
 }
diff --git a/app/packages/state/src/hooks/useJSONPanel.ts b/app/packages/state/src/hooks/useJSONPanel.ts
@@ -36,17 +36,6 @@ export default function useJSONPanel() {
     setState((s) => ({ ...s, isOpen: false }));
   }
 
-  function handleEscape(e) {
-    if (e.key === "Escape") close();
-  }
-
-  useEffect(() => {
-    if (isOpen) {
-      window.addEventListener("keydown", handleEscape);
-    }
-    return () => window.removeEventListener("keydown", handleEscape);
-  }, [isOpen]);
-
   return {
     open(sample) {
       setState((s) => ({ ...s, sample, isOpen: true }));
@@ -67,5 +56,6 @@ export default function useJSONPanel() {
     sample,
     json,
     jsonHTML,
+    stateAtom: jsonPanelState,
   };
 }