extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-22 16:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1387 from JeLuF/picker

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/media/css/main.css
View File

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

20
ui/media/js/image-editor.js
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("div")
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,22 @@ 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)
event.stopPropagation()
event.preventDefault()
}
} }
} }