Keyboard shortcuts for rotation and navigation too

gmalette · Jan 2, 2025 · 9db7c20 · 9db7c20
1 parent b20aef7
commit 9db7c20
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 18 deletions.
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
@@ -233,6 +233,11 @@ async fn clear_project(app_handle: AppHandle) {
     let _ = app_handle.emit("rancher://did-clear-project", ());
 }
 
+#[tauri::command]
+async fn clear_project_command(app_handle: AppHandle) {
+    clear_project(app_handle).await;
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
@@ -282,7 +287,7 @@ pub fn run() {
         .menu(|app| {
             let open_file = MenuItem::with_id(app, "open-file", "Open File…", true, Some("CmdOrCtrl+O"))?;
             let export = MenuItem::with_id(app, "export", "Export…", true, Some("CmdOrCtrl+E"))?;
-            let clear = MenuItem::with_id(app, "clear", "Clear", true, Some("CmdOrCtrl+K"))?;
+            let clear = MenuItem::with_id(app, "clear", "Clear", true, Some("CmdOrCtrl+Shift+K"))?;
             let submenu = SubmenuBuilder::new(app, "File")
                 .items(&[
                     &open_file,
@@ -316,7 +321,8 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             open_files_command,
             load_project_command,
-            export_command
+            export_command,
+            clear_project_command,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

diff --git a/src/App.svelte b/src/App.svelte
@@ -2,16 +2,22 @@
   import {attachConsole, info} from "@tauri-apps/plugin-log";
   import {invoke} from '@tauri-apps/api/core'
   import {listen} from "@tauri-apps/api/event";
-  import { dndzone } from 'svelte-dnd-action';
+  import {dndzone} from 'svelte-dnd-action';
   import Banners from "./lib/Banners.svelte";
   import FocusedPage from "./lib/FocusedPage.svelte";
   import {type Ordering, type Project, type SourceFile} from "./lib/project";
   import Preview from "./lib/Preview.svelte";
   import {
     DRAGGING_OVER,
-    DraggingOverState, EXPORTING, ExportingState, FOCUSED,
+    DraggingOverState,
+    EXPORTING,
+    ExportingState,
+    FOCUSED,
     type Focused,
-    FocusedState, IMPORTING, ImportingState,
+    FocusedState,
+    IMPORTING,
+    ImportingState,
+    LIST,
     ListState,
     type UiState
   } from "./lib/ui_state";
@@ -55,6 +61,14 @@
     });
   }
 
+  function beginExport() {
+    // select only enabled pages
+    const ordering = project.ordering.filter((ordering) => ordering.enabled).map((ordering) => {
+      return {...ordering, rotation: ordering.rotation.toString()}
+    })
+    invoke("export_command", { ordering })
+  }
+
   $effect(() => {
     loadProject()
   })
@@ -70,11 +84,7 @@
   })
 
   listen("rancher://export-requested", () => {
-    // select only enabled pages
-    const ordering = project.ordering.filter((ordering) => ordering.enabled).map((ordering) => {
-      return {...ordering, rotation: ordering.rotation.toString()}
-    })
-    invoke("export_command", { ordering })
+    beginExport()
   })
 
   listen("rancher://will-export", () => {
@@ -144,29 +154,61 @@
     uiState = FocusedState(pageNum)
   }
 
-  function closeFocus(focusedState: Focused, newRotation: number) {
-    const focused = focusedState.ordering
-
-    const oldOrdering = project.ordering[focused];
+  function setRotation(pageNum: number, newRotation: number) {
+    const ordering = project.ordering[pageNum]
     const newOrdering = {
-      ...oldOrdering,
+      ...ordering,
       rotation: newRotation,
     }
+
     project = {
       ...project,
       ordering: [
-        ...project.ordering.slice(0, focused),
+        ...project.ordering.slice(0, pageNum),
         newOrdering,
-        ...project.ordering.slice(focused + 1),
+        ...project.ordering.slice(pageNum + 1),
       ],
     }
+  }
+
+  function closeFocus(focusedState: Focused, newRotation: number) {
+    const focused = focusedState.ordering
+
+    setRotation(focused, newRotation)
 
     uiState = ListState()
   }
 
+  function handleKeyPress(e: KeyboardEvent) {
+    if (uiState.type !== LIST) {
+      return
+    }
+
+    // Q rotates counterclockwise, E rotates clockwise
+    if ((e.key === "q" || e.key === "e") && !(e.metaKey || e.ctrlKey || e.altKey || e.shiftKey)) {
+      const page = document.querySelector("page:hover");
+      if (!page) {
+        return;
+      }
+      const index = parseInt(page.getAttribute("index")!);
+      const ordering = project.ordering[index];
+
+      let newRotation;
+      if (e.key === "q") {
+        newRotation = (ordering.rotation + 270) % 360;
+      } else {
+        newRotation = (ordering.rotation + 90) % 360;
+      }
+
+      return setRotation(index, newRotation);
+    }
+  }
+
   attachConsole();
 </script>
 
+<svelte:window onkeypress={handleKeyPress}/>
+
 <Banners/>
 
 <project>
@@ -186,7 +228,8 @@
         <page
             oncontextmenu={(e: MouseEvent) => onContextMenu(e, pageNum)}
             onclick={(_: MouseEvent) => onPageClick(pageNum)}
-            class:disabled={!ordering.enabled}>
+            class:disabled={!ordering.enabled}
+            index={pageNum}>
 
           <Preview jpg="{page(ordering).preview_jpg}" rotation={ordering.rotation} pageNum={pageNum + 1}/>
 

diff --git a/src/lib/FocusedPage.svelte b/src/lib/FocusedPage.svelte
@@ -17,8 +17,16 @@
   function closeAndSave(_: MouseEvent) {
     closeFocus(newRotation);
   }
+
+  function handleKeyPress(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      closeFocus(newRotation);
+    }
+  }
 </script>
 
+<svelte:window onkeypress={handleKeyPress}/>
+
 <div>
   <tools>
     <button onclick={closeAndSave}>Close</button>