From 688ed8a8703a1caa548b52acbc7f026442dbc052 Mon Sep 17 00:00:00 2001
From: Red J Adaya <red.adaya@gmail.com>
Date: Thu, 15 Aug 2024 05:38:02 +0800
Subject: [PATCH] Fix number overlay hotkeys conflict with screenshot in macos
 (#222)

---
 frontend/app/app.tsx              | 43 ++++++++++++++++++++++---------
 frontend/app/block/blockframe.tsx |  2 +-
 frontend/app/store/global.ts      |  4 +--
 frontend/types/custom.d.ts        |  2 +-
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/frontend/app/app.tsx b/frontend/app/app.tsx
index 6d940a72..343222c0 100644
--- a/frontend/app/app.tsx
+++ b/frontend/app/app.tsx
@@ -360,28 +360,47 @@ function genericClose(tabId: string) {
     services.ObjectService.DeleteBlock(activeBlockId);
 }
 
-const simpleCmdShiftAtom = jotai.atom(false);
+const simpleControlShiftAtom = jotai.atom(false);
 
 const AppKeyHandlers = () => {
     const tabId = jotai.useAtomValue(atoms.activeTabId);
 
+    function setControlShift() {
+        globalStore.set(simpleControlShiftAtom, true);
+        setTimeout(() => {
+            const simpleState = globalStore.get(simpleControlShiftAtom);
+            if (simpleState) {
+                globalStore.set(atoms.controlShiftDelayAtom, true);
+            }
+        }, 400);
+    }
+
+    function unsetControlShift() {
+        globalStore.set(simpleControlShiftAtom, false);
+        globalStore.set(atoms.controlShiftDelayAtom, false);
+    }
+
     function handleKeyUp(event: KeyboardEvent) {
         const waveEvent = keyutil.adaptFromReactOrNativeKeyEvent(event);
-        if (waveEvent.key == "Control" || waveEvent.key == "Shift") {
-            globalStore.set(simpleCmdShiftAtom, false);
-            globalStore.set(atoms.cmdShiftDelayAtom, false);
+        if (waveEvent.key === "Control" || waveEvent.key === "Shift") {
+            unsetControlShift();
+        }
+        if (waveEvent.key == "Meta") {
+            if (waveEvent.control && waveEvent.shift) {
+                setControlShift();
+            }
         }
     }
 
     function handleKeyDown(waveEvent: WaveKeyboardEvent): boolean {
-        if ((waveEvent.key == "Control" || waveEvent.key == "Shift") && waveEvent.control && waveEvent.shift) {
-            globalStore.set(simpleCmdShiftAtom, true);
-            setTimeout(() => {
-                const simpleState = globalStore.get(simpleCmdShiftAtom);
-                if (simpleState) {
-                    globalStore.set(atoms.cmdShiftDelayAtom, true);
-                }
-            }, 400);
+        if (waveEvent.key === "Control" || waveEvent.key === "Shift" || waveEvent.key === "Meta") {
+            if (waveEvent.control && waveEvent.shift && !waveEvent.meta) {
+                // Set the control and shift without the Meta key
+                setControlShift();
+            } else {
+                // Unset if Meta is pressed
+                unsetControlShift();
+            }
             return false;
         }
 
diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx
index 60a80dac..aa5ea831 100644
--- a/frontend/app/block/blockframe.tsx
+++ b/frontend/app/block/blockframe.tsx
@@ -228,7 +228,7 @@ function BlockNum({ blockId }: { blockId: string }) {
 }
 
 const BlockMask = ({ blockId, preview, isFocused }: { blockId: string; preview: boolean; isFocused: boolean }) => {
-    const isLayoutMode = jotai.useAtomValue(atoms.cmdShiftDelayAtom);
+    const isLayoutMode = jotai.useAtomValue(atoms.controlShiftDelayAtom);
     const [blockData] = WOS.useWaveObjectValue<Block>(WOS.makeORef("block", blockId));
 
     const style: React.CSSProperties = {};
diff --git a/frontend/app/store/global.ts b/frontend/app/store/global.ts
index f89231cb..96b985df 100644
--- a/frontend/app/store/global.ts
+++ b/frontend/app/store/global.ts
@@ -103,7 +103,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         }
         return windowData.activetabid;
     });
-    const cmdShiftDelayAtom = jotai.atom(false);
+    const controlShiftDelayAtom = jotai.atom(false);
     const updateStatusAtom = jotai.atom<UpdaterStatus>("up-to-date") as jotai.PrimitiveAtom<UpdaterStatus>;
     try {
         globalStore.set(updateStatusAtom, getApi().getUpdaterStatus());
@@ -126,7 +126,7 @@ function initGlobalAtoms(initOpts: GlobalInitOptions) {
         tabAtom: tabAtom,
         activeTabId: activeTabIdAtom,
         isFullScreen: isFullScreenAtom,
-        cmdShiftDelayAtom: cmdShiftDelayAtom,
+        controlShiftDelayAtom: controlShiftDelayAtom,
         updaterStatusAtom: updateStatusAtom,
     };
 }
diff --git a/frontend/types/custom.d.ts b/frontend/types/custom.d.ts
index 5eeeae71..5beedde5 100644
--- a/frontend/types/custom.d.ts
+++ b/frontend/types/custom.d.ts
@@ -16,7 +16,7 @@ declare global {
         tabAtom: jotai.Atom<Tab>; // driven from WOS
         activeTabId: jotai.Atom<string>; // derrived from windowDataAtom
         isFullScreen: jotai.PrimitiveAtom<boolean>;
-        cmdShiftDelayAtom: jotai.PrimitiveAtom<boolean>;
+        controlShiftDelayAtom: jotai.PrimitiveAtom<boolean>;
         updaterStatusAtom: jotai.PrimitiveAtom<UpdaterStatus>;
     };