Hotkeys for img editor

This commit is contained in:
JeLuF 2023-07-02 18:38:16 +02:00
parent 2dfa482b24
commit 84574367b3
2 changed files with 20 additions and 3 deletions

View File

@ -1640,3 +1640,7 @@ body.wait-pause {
bottom: 0; bottom: 0;
} }
} }
.image-editor-button-label::first-letter {
text-decoration: underline;
}

View File

@ -47,6 +47,7 @@ const IMAGE_EDITOR_TOOLS = [
begin: defaultToolBegin, begin: defaultToolBegin,
move: defaultToolMove, move: defaultToolMove,
end: defaultToolEnd, end: defaultToolEnd,
hotkey: "d",
}, },
{ {
id: "erase", id: "erase",
@ -77,6 +78,7 @@ const IMAGE_EDITOR_TOOLS = [
setBrush: (editor, layer) => { setBrush: (editor, layer) => {
layer.ctx.globalCompositeOperation = "destination-out" layer.ctx.globalCompositeOperation = "destination-out"
}, },
hotkey: "e",
}, },
{ {
id: "fill", id: "fill",
@ -92,6 +94,7 @@ const IMAGE_EDITOR_TOOLS = [
}, },
move: toolDoNothing, move: toolDoNothing,
end: toolDoNothing, end: toolDoNothing,
hotkey: "f",
}, },
{ {
id: "colorpicker", id: "colorpicker",
@ -113,6 +116,7 @@ const IMAGE_EDITOR_TOOLS = [
}, },
move: toolDoNothing, move: toolDoNothing,
end: toolDoNothing, end: toolDoNothing,
hotkey: "p",
}, },
] ]
@ -208,7 +212,10 @@ var IMAGE_EDITOR_SECTIONS = [
var icon = document.createElement("i") var icon = document.createElement("i")
tool_info.icon.split(" ").forEach((c) => icon.classList.add(c)) tool_info.icon.split(" ").forEach((c) => icon.classList.add(c))
sub_element.appendChild(icon) 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) element.appendChild(sub_element)
}, },
}, },
@ -702,15 +709,20 @@ class ImageEditor {
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
} }
if (event.key == "y" && event.ctrlKey) { else if (event.key == "y" && event.ctrlKey) {
this.history.redo() this.history.redo()
event.stopPropagation() event.stopPropagation()
event.preventDefault() event.preventDefault()
} }
if (event.key === "Escape") { else if (event.key === "Escape") {
this.hide() this.hide()
event.stopPropagation() event.stopPropagation()
event.preventDefault() 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 return this.options && section_name in this.options ? this.options[section_name] : section.default
} }
selectOption(section_name, option_index) { selectOption(section_name, option_index) {
console.log("SELECT", section_name, option_index)
var section = IMAGE_EDITOR_SECTIONS.find((s) => s.name == section_name) var section = IMAGE_EDITOR_SECTIONS.find((s) => s.name == section_name)
var value = section.options[option_index] var value = section.options[option_index]
this.options[section_name] = value == "custom" ? section.getCustom(this) : value this.options[section_name] = value == "custom" ? section.getCustom(this) : value