Fix number overlay hotkeys conflict with screenshot in macos (#222)

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") {
+        if (waveEvent.key === "Control" || waveEvent.key === "Shift") {
-            globalStore.set(simpleCmdShiftAtom, false);
+            unsetControlShift();
-            globalStore.set(atoms.cmdShiftDelayAtom, false);
+        }
+        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) {
+        if (waveEvent.key === "Control" || waveEvent.key === "Shift" || waveEvent.key === "Meta") {
-            globalStore.set(simpleCmdShiftAtom, true);
+            if (waveEvent.control && waveEvent.shift && !waveEvent.meta) {
-            setTimeout(() => {
+                // Set the control and shift without the Meta key
-                const simpleState = globalStore.get(simpleCmdShiftAtom);
+                setControlShift();
-                if (simpleState) {
+            } else {
-                    globalStore.set(atoms.cmdShiftDelayAtom, true);
+                // Unset if Meta is pressed
-                }
+                unsetControlShift();
-            }, 400);
+            }
             return false;
         }
 

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 = {};

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,
     };
 }

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>;
     };