enhance: keyboard events (esc, enter, etc) for modals

debanjandhar12 · Jan 17, 2023 · 6bc8ca8 · 6bc8ca8
1 parent b7b1e99
commit 6bc8ca8
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 0 deletions.
diff --git a/src/ui/Confirm.ts b/src/ui/Confirm.ts
@@ -29,15 +29,28 @@ export async function Confirm(msg: string): Promise<boolean> {
                </div>
             </div>
          </div>`;
+        const onKeydown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                // @ts-ignore
+                window.parent.sync_cancel_action();
+            }
+            else if (e.key === 'Enter') {
+                // @ts-ignore
+                window.parent.sync_yes_action();
+            }
+        }
+        window.parent.document.addEventListener('keydown', onKeydown);
         // @ts-ignore
         window.parent.sync_yes_action = () => {
             resolve(true);
             window.parent.document.body.removeChild(div);
+            window.parent.document.removeEventListener('keydown', onKeydown);
         }
         // @ts-ignore
         window.parent.sync_cancel_action = () => {
             resolve(false);
             window.parent.document.body.removeChild(div);
+            window.parent.document.removeEventListener('keydown', onKeydown);
         }
         window.parent.document.body.appendChild(div);
     });

diff --git a/src/ui/OcclusionEditor.tsx b/src/ui/OcclusionEditor.tsx
@@ -51,6 +51,18 @@ export async function OcclusionEditor(imgURL: string, occlusionArr: Array<any>):
             root.render(<OcclusionEditorComponent imgURL={imgURL} occlusionArr={occlusionArr} ref={fabricRef} />);
         } catch (e) { resolve(false); window.parent.document.body.removeChild(div); logseq.App.showMsg("Failed to mount OcclusionEditor! Error Message: " + e); console.error(e); }
 
+        const onKeydown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                window.parent.occlusion_cancel_action();
+            }
+            else if (e.key === 'Enter') {
+                window.parent.occlusion_save_action();
+            }
+            else if (e.key === 's' && e.ctrlKey) {
+                window.parent.occlusion_save_action();
+            }
+        };
+        window.parent.document.addEventListener('keydown', onKeydown);
         // @ts-ignore
         window.parent.occlusion_save_action = () => {
             // Iterate over all objects and save them
@@ -67,11 +79,13 @@ export async function OcclusionEditor(imgURL: string, occlusionArr: Array<any>):
             });
             resolve(occlusionArr);
             window.parent.document.body.removeChild(div);
+            window.parent.document.removeEventListener('keydown', onKeydown);
         }
         // @ts-ignore
         window.parent.occlusion_cancel_action = () => {
             resolve(false);
             window.parent.document.body.removeChild(div);
+            window.parent.document.removeEventListener('keydown', onKeydown);
         }
     });
 }
@@ -162,6 +176,44 @@ const OcclusionEditorComponent = React.forwardRef(({imgURL, occlusionArr}, fabri
         fabricRef.current.on('object:modified', preventOutOfBounds);
     }, [fabricRef]);
 
+    // Handle some key events
+    React.useEffect(() => {
+        const onKeydown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                fabricRef.current.discardActiveObject();
+            }
+            else if (e.key === 'ArrowUp') {
+                if (fabricSelection) {
+                    fabricSelection.top -= 1;
+                    fabricRef.current.renderAll();
+                    e.preventDefault();
+                }
+            }
+            else if (e.key === 'ArrowDown') {
+                if (fabricSelection) {
+                    fabricSelection.top += 1;
+                    fabricRef.current.renderAll();
+                    e.preventDefault();
+                }
+            }
+            else if (e.key === 'ArrowLeft') {
+                if (fabricSelection) {
+                    fabricSelection.left -= 1;
+                    fabricRef.current.renderAll();
+                }
+            }
+            else if (e.key === 'ArrowRight') {
+                if (fabricSelection) {
+                    fabricSelection.left += 1;
+                    fabricRef.current.renderAll();
+                }
+            }
+        };
+        window.parent.document.addEventListener('keydown', onKeydown);
+        return () => {
+            window.parent.document.removeEventListener('keydown', onKeydown);
+        };
+    });
     // Create the UI
     const addOcclusion = () => {
         let randomLocation = {

diff --git a/src/ui/SelectPrompt.ts b/src/ui/SelectPrompt.ts
@@ -25,6 +25,12 @@ export async function SelectPrompt(msg: string, options: string[]): Promise<stri
             </div>
           </div>
         </div>`;
+        const onKeydown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                window.parent.select_cancel_action();
+            }
+        };
+        window.parent.document.addEventListener('keydown', onKeydown);
         // @ts-ignore
         window.parent.handle_select_action = () => {
             const select = div.querySelector('#select-prompt-selector');
@@ -40,5 +46,6 @@ export async function SelectPrompt(msg: string, options: string[]): Promise<stri
             window.parent.document.body.removeChild(div);
         }
         window.parent.document.body.appendChild(div);
+        (div.querySelector('#select-prompt-selector') as HTMLSelectElement).focus();
     });
 }