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

refactor: Replace brush preview feature with missionfloyd implementation

Browse Source
This commit is contained in:
Lt.Dr.Data 2023-04-27 10:25:04 +09:00
parent fc976f48b1
commit d662e9298e
1 changed files with 45 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,7 +132,7 @@ class MaskEditorDialog extends ComfyDialog {
return divElement; return divElement;
} }
setLayout(imgCanvas, maskCanvas, cursorCanvas) { setlayout(imgCanvas, maskCanvas) {
const self = this; const self = this;
// If it is specified as relative, using it only as a hidden placeholder for padding is recommended // If it is specified as relative, using it only as a hidden placeholder for padding is recommended
@ -148,6 +148,23 @@ class MaskEditorDialog extends ComfyDialog {
bottom_panel.style.right = "0"; bottom_panel.style.right = "0";
bottom_panel.style.height = "50px"; bottom_panel.style.height = "50px";
var brush = document.createElement("div");
brush.id = "brush";
brush.style.backgroundColor = "transparent";
brush.style.border = "1px dashed black";
brush.style.borderRadius = "50%";
brush.style.MozBorderRadius = "50%";
brush.style.WebkitBorderRadius = "50%";
brush.style.position = "absolute";
brush.style.zIndex = 100;
brush.style.pointerEvents = "none";
this.brush = brush;
this.element.appendChild(imgCanvas);
this.element.appendChild(maskCanvas);
this.element.appendChild(placeholder); // must below z-index than bottom_panel to avoid covering button
this.element.appendChild(bottom_panel);
document.body.appendChild(brush);
var clearButton = this.createLeftButton("Clear", "280px", var clearButton = this.createLeftButton("Clear", "280px",
() => { () => {
self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height); self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height);
@ -171,7 +188,6 @@ class MaskEditorDialog extends ComfyDialog {
}); });
this.element.appendChild(imgCanvas); this.element.appendChild(imgCanvas);
this.element.appendChild(cursorCanvas);
this.element.appendChild(maskCanvas); this.element.appendChild(maskCanvas);
this.element.appendChild(placeholder); // must below z-index than bottom_panel to avoid covering button this.element.appendChild(placeholder); // must below z-index than bottom_panel to avoid covering button
this.element.appendChild(bottom_panel); this.element.appendChild(bottom_panel);
@ -187,30 +203,27 @@ class MaskEditorDialog extends ComfyDialog {
imgCanvas.style.left = "0"; imgCanvas.style.left = "0";
maskCanvas.style.position = "absolute"; maskCanvas.style.position = "absolute";
cursorCanvas.style.position = "absolute";
} }
show() { show() {
// layout // layout
const imgCanvas = document.createElement('canvas'); const imgCanvas = document.createElement('canvas');
const maskCanvas = document.createElement('canvas'); const maskCanvas = document.createElement('canvas');
const cursorCanvas = document.createElement('canvas');
const backupCanvas = document.createElement('canvas'); const backupCanvas = document.createElement('canvas');
imgCanvas.id = "imageCanvas"; imgCanvas.id = "imageCanvas";
maskCanvas.id = "maskCanvas"; maskCanvas.id = "maskCanvas";
cursorCanvas.id = "cursorCanvas";
backupCanvas.id = "backupCanvas"; backupCanvas.id = "backupCanvas";
this.setlayout(imgCanvas, maskCanvas);
// prepare content
this.maskCanvas = maskCanvas; this.maskCanvas = maskCanvas;
this.backupCanvas = backupCanvas; this.backupCanvas = backupCanvas;
this.cursorCanvas = cursorCanvas;
this.maskCtx = maskCanvas.getContext('2d'); this.maskCtx = maskCanvas.getContext('2d');
this.cursorCtx = cursorCanvas.getContext('2d');
this.backupCtx = backupCanvas.getContext('2d'); this.backupCtx = backupCanvas.getContext('2d');
this.setLayout(imgCanvas, maskCanvas, cursorCanvas);
// separate original_imgs and imgs // separate original_imgs and imgs
if(ComfyApp.clipspace.imgs[0] === ComfyApp.clipspace.original_imgs[0]) { if(ComfyApp.clipspace.imgs[0] === ComfyApp.clipspace.original_imgs[0]) {
var copiedImage = new Image(); var copiedImage = new Image();
@ -218,46 +231,14 @@ class MaskEditorDialog extends ComfyDialog {
ComfyApp.clipspace.imgs = [copiedImage]; ComfyApp.clipspace.imgs = [copiedImage];
} }
this.setImages(imgCanvas, backupCanvas, cursorCanvas); this.setImages(imgCanvas, backupCanvas);
this.setEventHandler(maskCanvas); this.setEventHandler(maskCanvas);
} }
invalidateCursorCanvas(self, update_brush_size_only, x, y) { setImages(imgCanvas, backupCanvas) {
const ctx = self.cursorCtx;
if(self.cursorCtx.lastX == null) {
ctx.clearRect(0,0,self.cursorCanvas.width,self.cursorCanvas.height);
}
else {
const lastBrushSize = ctx.lastBrushSize;
const lastX = ctx.lastX;
const lastY = ctx.lastY;
ctx.clearRect(lastX - lastBrushSize - 10, lastY - lastBrushSize - 10, 2*lastBrushSize + 20, 2*lastBrushSize + 20);
}
if(update_brush_size_only) {
x = ctx.lastX;
y = ctx.lastY;
}
if(x != null && y != null) {
ctx.lastX = x;
ctx.lastY = y;
ctx.lastBrushSize = self.brush_size;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.setLineDash([2, 2]);
ctx.arc(x, y, self.brush_size, 0, Math.PI * 2);
ctx.stroke();
}
}
setImages(imgCanvas, backupCanvas, cursorCanvas) {
const imgCtx = imgCanvas.getContext('2d'); const imgCtx = imgCanvas.getContext('2d');
const backupCtx = backupCanvas.getContext('2d'); const backupCtx = backupCanvas.getContext('2d');
const maskCtx = this.maskCtx; const maskCtx = this.maskCtx;
const cursorCtx = this.cursorCtx;
const maskCanvas = this.maskCanvas; const maskCanvas = this.maskCanvas;
// image load // image load
@ -284,16 +265,10 @@ class MaskEditorDialog extends ComfyDialog {
// update mask // update mask
backupCtx.drawImage(maskCanvas, 0, 0, maskCanvas.width, maskCanvas.height, 0, 0, backupCanvas.width, backupCanvas.height); backupCtx.drawImage(maskCanvas, 0, 0, maskCanvas.width, maskCanvas.height, 0, 0, backupCanvas.width, backupCanvas.height);
maskCanvas.width = drawWidth;
cursorCanvas.width = maskCanvas.width = drawWidth; maskCanvas.height = drawHeight;
cursorCanvas.height = maskCanvas.height = drawHeight; maskCanvas.style.top = imgCanvas.offsetTop + "px";
cursorCanvas.style.top = maskCanvas.style.top = imgCanvas.offsetTop + "px"; maskCanvas.style.left = imgCanvas.offsetLeft + "px";
cursorCanvas.style.left = maskCanvas.style.left = imgCanvas.offsetLeft + "px";
cursorCtx.lastX = null;
cursorCtx.lastY = null;
this.invalidateCursorCanvas(this, false, null, null);
maskCtx.drawImage(backupCanvas, 0, 0, backupCanvas.width, backupCanvas.height, 0, 0, maskCanvas.width, maskCanvas.height); maskCtx.drawImage(backupCanvas, 0, 0, backupCanvas.width, backupCanvas.height, 0, 0, maskCanvas.width, maskCanvas.height);
}); });
@ -360,22 +335,27 @@ class MaskEditorDialog extends ComfyDialog {
else else
self.brush_size = Math.max(self.brush_size-2, 1); self.brush_size = Math.max(self.brush_size-2, 1);
self.brush_slider_input.value = self.brush_size; self.brush_slider_input.value = self.brush_size;
self.invalidateCursorCanvas(self, true, null, null); // self.brush_slider_input.dispatchEvent(new Event('input'));
} }
draw_move(self, event) { draw_move(self, event) {
const maskRect = self.maskCanvas.getBoundingClientRect(); const brush = this.brush;
const x = event.offsetX || event.targetTouches[0].clientX - maskRect.left; brush.style.width = (this.brush_size - 1) * 2 + "px";
const y = event.offsetY || event.targetTouches[0].clientY - maskRect.top; brush.style.height = (this.brush_size - 1) * 2 + "px";
brush.style.left = (event.pageX - this.brush_size) + "px";
self.invalidateCursorCanvas(self, false, x, y); brush.style.top = (event.pageY - this.brush_size) + "px";
if (event instanceof TouchEvent || event.buttons === 1) { if (event instanceof TouchEvent || event.buttons === 1) {
event.preventDefault(); event.preventDefault();
var diff = performance.now() - self.lasttime; var diff = performance.now() - self.lasttime;
const maskRect = self.maskCanvas.getBoundingClientRect();
const x = event.offsetX || event.targetTouches[0].clientX - maskRect.left;
const y = event.offsetY || event.targetTouches[0].clientY - maskRect.top;
if(diff > 20 && !this.drawing_mode) if(diff > 20 && !this.drawing_mode)
requestAnimationFrame(() => { requestAnimationFrame(() => {
self.maskCtx.beginPath(); self.maskCtx.beginPath();
@ -413,6 +393,9 @@ class MaskEditorDialog extends ComfyDialog {
} }
else if(event.buttons === 2) { else if(event.buttons === 2) {
event.preventDefault(); event.preventDefault();
const maskRect = self.maskCanvas.getBoundingClientRect();
const x = event.offsetX || event.targetTouches[0].clientX - maskRect.left;
const y = event.offsetY || event.targetTouches[0].clientY - maskRect.top;
if(diff > 20 && !drawing_mode) // cannot tracking drawing_mode for touch event if(diff > 20 && !drawing_mode) // cannot tracking drawing_mode for touch event
requestAnimationFrame(() => { requestAnimationFrame(() => {