From 84574367b3d7bf6676f8f45f0bd498bd6768f505 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sun, 2 Jul 2023 18:38:16 +0200
Subject: [PATCH] Hotkeys for img editor

---
 ui/media/css/main.css       |  4 ++++
 ui/media/js/image-editor.js | 19 ++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 9eefa4c2..4f528083 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1640,3 +1640,7 @@ body.wait-pause {
         bottom: 0;
     }
 }
+
+.image-editor-button-label::first-letter {
+    text-decoration: underline;
+}
diff --git a/ui/media/js/image-editor.js b/ui/media/js/image-editor.js
index e7de9f2b..8f735972 100644
--- a/ui/media/js/image-editor.js
+++ b/ui/media/js/image-editor.js
@@ -47,6 +47,7 @@ const IMAGE_EDITOR_TOOLS = [
         begin: defaultToolBegin,
         move: defaultToolMove,
         end: defaultToolEnd,
+        hotkey: "d",
     },
     {
         id: "erase",
@@ -77,6 +78,7 @@ const IMAGE_EDITOR_TOOLS = [
         setBrush: (editor, layer) => {
             layer.ctx.globalCompositeOperation = "destination-out"
         },
+        hotkey: "e",
     },
     {
         id: "fill",
@@ -92,6 +94,7 @@ const IMAGE_EDITOR_TOOLS = [
         },
         move: toolDoNothing,
         end: toolDoNothing,
+        hotkey: "f",
     },
     {
         id: "colorpicker",
@@ -113,6 +116,7 @@ const IMAGE_EDITOR_TOOLS = [
         },
         move: toolDoNothing,
         end: toolDoNothing,
+        hotkey: "p",
     },
 ]
 
@@ -208,7 +212,10 @@ var IMAGE_EDITOR_SECTIONS = [
             var icon = document.createElement("i")
             tool_info.icon.split(" ").forEach((c) => icon.classList.add(c))
             sub_element.appendChild(icon)
-            sub_element.append(tool_info.name)
+            var label_element = document.createElement("span")
+            label_element.classList.add("image-editor-button-label")
+            label_element.textContent=tool_info.name
+            sub_element.appendChild(label_element)
             element.appendChild(sub_element)
         },
     },
@@ -702,15 +709,20 @@ class ImageEditor {
                 event.stopPropagation()
                 event.preventDefault()
             }
-            if (event.key == "y" && event.ctrlKey) {
+            else if (event.key == "y" && event.ctrlKey) {
                 this.history.redo()
                 event.stopPropagation()
                 event.preventDefault()
             }
-            if (event.key === "Escape") {
+            else if (event.key === "Escape") {
                 this.hide()
                 event.stopPropagation()
                 event.preventDefault()
+            } else {
+                let toolIndex = IMAGE_EDITOR_TOOLS.findIndex( t => t.hotkey ==event.key )
+                if (toolIndex != -1) {
+                    this.selectOption("tool", toolIndex)
+                }
             }
         }
 
@@ -780,6 +792,7 @@ class ImageEditor {
         return this.options && section_name in this.options ? this.options[section_name] : section.default
     }
     selectOption(section_name, option_index) {
+        console.log("SELECT", section_name, option_index)
         var section = IMAGE_EDITOR_SECTIONS.find((s) => s.name == section_name)
         var value = section.options[option_index]
         this.options[section_name] = value == "custom" ? section.getCustom(this) : value