Merge pull request #1387 from JeLuF/picker

Keyboard shortcuts for the image editor
This commit is contained in:
cmdr2 2023-07-04 14:34:52 +05:30 committed by GitHub
commit 99ab2d2a81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 3 deletions

View File

@ -1611,6 +1611,14 @@ body.wait-pause {
color: red;
}
.image-editor-button-label {
display: inline-block;
}
.image-editor-button-label::first-letter {
text-decoration: underline;
}
@keyframes slideInRight {
from {
right: -300px;
@ -1641,3 +1649,4 @@ body.wait-pause {
bottom: 0;
}
}

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("div")
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,22 @@ 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)
event.stopPropagation()
event.preventDefault()
}
}
}