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;
}
}
.image-editor-button-label::first-letter {
text-decoration: underline;
}

View File

@ -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