wangbo/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2026-02-09 21:12:36 +08:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

event listener patch

Browse Source 
add ], [ key event for brush size
remove listener on close
This commit is contained in:
ltdrdata 2023-04-24 00:01:20 +09:00
parent cc7ad627a8
commit ea19315b4d
1 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/extensions/core/maskeditor.js
View File

@ -67,14 +67,14 @@ function removeRGB(image, backupCanvas, backupCtx, maskCtx) {
} }
class MaskEditorDialog extends ComfyDialog { class MaskEditorDialog extends ComfyDialog {
static instance = null;
constructor() { constructor() {
super(); super();
this.element = $el("div.comfy-modal", { parent: document.body }, this.element = $el("div.comfy-modal", { parent: document.body },
[ [ $el("div.comfy-modal-content",
$el("div.comfy-modal-content", [...this.createButtons()]),
[
...this.createButtons()]),
]); ]);
MaskEditorDialog.instance = this;
} }
createButtons() { createButtons() {
@ -143,11 +143,14 @@ class MaskEditorDialog extends ComfyDialog {
var minusButton = this.createLeftButton("Brush -", "160px", () => { self.brush_size = Math.max(self.brush_size-5, 1); }); var minusButton = this.createLeftButton("Brush -", "160px", () => { self.brush_size = Math.max(self.brush_size-5, 1); });
var saveButton = this.createRightButton("Save", "90px", () => { var saveButton = this.createRightButton("Save", "90px", () => {
document.addEventListener('mouseup', this.handleMouseUp); document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
document.removeEventListener("keyup", MaskEditorDialog.handleKeyUp);
self.save(); self.save();
}); });
var cancelButton = this.createRightButton("Cancel", "0px", () => { var cancelButton = this.createRightButton("Cancel", "0px", () => {
document.addEventListener('mouseup', this.handleMouseUp); document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
document.removeEventListener("keyup", MaskEditorDialog.handleKeyUp);
self.close(); self.close();
}); });
@ -267,10 +270,10 @@ class MaskEditorDialog extends ComfyDialog {
const self = this; const self = this;
maskCanvas.addEventListener('wheel', (event) => this.handleWheelEvent(self,event)); maskCanvas.addEventListener('wheel', (event) => this.handleWheelEvent(self,event));
maskCanvas.addEventListener('mousedown', (event) => this.handleMouseDown(self,event)); maskCanvas.addEventListener('mousedown', (event) => this.handleMouseDown(self,event));
document.addEventListener('mouseup', (event) => this.handleMouseUp(self,event)); document.addEventListener('mouseup', MaskEditorDialog.handleMouseUp);
maskCanvas.addEventListener('mousemove', (event) => this.draw_move(self,event)); maskCanvas.addEventListener('mousemove', (event) => this.draw_move(self,event));
maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event)); maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event));
document.addEventListener('keyup', MaskEditorDialog.handleKeyUp);
} }
brush_size = 10; brush_size = 10;
@ -279,6 +282,20 @@ class MaskEditorDialog extends ComfyDialog {
lasty = -1; lasty = -1;
lasttime = 0; lasttime = 0;
static handleKeyUp(event) {
const self = MaskEditorDialog.instance;
if (event.key === ']') {
self.brush_size = Math.min(self.brush_size+2, 100);
} else if (event.key === '[') {
self.brush_size = Math.max(self.brush_size-2, 1);
}
}
static handleMouseUp(event) {
event.preventDefault();
MaskEditorDialog.instance.drawing_mode = false;
}
handleWheelEvent(self, event) { handleWheelEvent(self, event) {
if(event.deltaY < 0) if(event.deltaY < 0)
self.brush_size = Math.min(self.brush_size+2, 100); self.brush_size = Math.min(self.brush_size+2, 100);
@ -408,11 +425,6 @@ class MaskEditorDialog extends ComfyDialog {
} }
} }
handleMouseUp(self, event) {
event.preventDefault();
self.drawing_mode = false;
}
save() { save() {
const backupCtx = this.backupCanvas.getContext('2d', {willReadFrequently:true}); const backupCtx = this.backupCanvas.getContext('2d', {willReadFrequently:true});