From 84574367b3d7bf6676f8f45f0bd498bd6768f505 Mon Sep 17 00:00:00 2001 From: JeLuF 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