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

mouse event -> pointer event

Browse Source
This commit is contained in:
Dr.Lt.Data 2023-05-07 10:19:46 +09:00
parent 98d3478349
commit 768c73169c
1 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -306,12 +306,12 @@ 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('pointerdown', (event) => this.handlePointerDown(self,event));
document.addEventListener('mouseup', MaskEditorDialog.handleMouseUp); document.addEventListener('pointerup', MaskEditorDialog.handlePointerUp);
maskCanvas.addEventListener('mousemove', (event) => this.draw_move(self,event)); maskCanvas.addEventListener('pointermove', (event) => this.draw_move(self,event));
maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event)); maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event));
maskCanvas.addEventListener('mouseover', (event) => { this.brush.style.display = "block"; }); maskCanvas.addEventListener('pointerover', (event) => { this.brush.style.display = "block"; });
maskCanvas.addEventListener('mouseleave', (event) => { this.brush.style.display = "none"; }); maskCanvas.addEventListener('pointerleave', (event) => { this.brush.style.display = "none"; });
document.addEventListener('keydown', MaskEditorDialog.handleKeyDown); document.addEventListener('keydown', MaskEditorDialog.handleKeyDown);
} }
@ -332,7 +332,7 @@ class MaskEditorDialog extends ComfyDialog {
self.updateBrushPreview(self); self.updateBrushPreview(self);
} }
static handleMouseUp(event) { static handlePointerUp(event) {
event.preventDefault(); event.preventDefault();
MaskEditorDialog.instance.drawing_mode = false; MaskEditorDialog.instance.drawing_mode = false;
} }
@ -384,12 +384,17 @@ class MaskEditorDialog extends ComfyDialog {
y = event.targetTouches[0].clientY - maskRect.top; y = event.targetTouches[0].clientY - maskRect.top;
} }
var brush_size = this.brush_size;
if(event instanceof PointerEvent && event.pointerType != 'mouse') {
brush_size *= event.pressure;
}
if(diff > 20 && !this.drawing_mode) if(diff > 20 && !this.drawing_mode)
requestAnimationFrame(() => { requestAnimationFrame(() => {
self.maskCtx.beginPath(); self.maskCtx.beginPath();
self.maskCtx.fillStyle = "rgb(0,0,0)"; self.maskCtx.fillStyle = "rgb(0,0,0)";
self.maskCtx.globalCompositeOperation = "source-over"; self.maskCtx.globalCompositeOperation = "source-over";
self.maskCtx.arc(x, y, this.brush_size, 0, Math.PI * 2, false); self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
self.maskCtx.fill(); self.maskCtx.fill();
self.lastx = x; self.lastx = x;
self.lasty = y; self.lasty = y;
@ -399,7 +404,7 @@ class MaskEditorDialog extends ComfyDialog {
self.maskCtx.beginPath(); self.maskCtx.beginPath();
self.maskCtx.fillStyle = "rgb(0,0,0)"; self.maskCtx.fillStyle = "rgb(0,0,0)";
self.maskCtx.globalCompositeOperation = "source-over"; self.maskCtx.globalCompositeOperation = "source-over";
var dx = x - self.lastx; var dx = x - self.lastx;
var dy = y - self.lasty; var dy = y - self.lasty;
@ -410,7 +415,7 @@ class MaskEditorDialog extends ComfyDialog {
for (var i = 0; i < distance; i+=5) { for (var i = 0; i < distance; i+=5) {
var px = self.lastx + (directionX * i); var px = self.lastx + (directionX * i);
var py = self.lasty + (directionY * i); var py = self.lasty + (directionY * i);
self.maskCtx.arc(px, py, this.brush_size, 0, Math.PI * 2, false); self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
self.maskCtx.fill(); self.maskCtx.fill();
} }
self.lastx = x; self.lastx = x;
@ -425,11 +430,16 @@ class MaskEditorDialog extends ComfyDialog {
const x = event.offsetX || event.targetTouches[0].clientX - maskRect.left; const x = event.offsetX || event.targetTouches[0].clientX - maskRect.left;
const y = event.offsetY || event.targetTouches[0].clientY - maskRect.top; const y = event.offsetY || event.targetTouches[0].clientY - maskRect.top;
var brush_size = this.brush_size;
if(event instanceof PointerEvent && event.pointerType != 'mouse') {
brush_size *= event.pressure;
}
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(() => {
self.maskCtx.beginPath(); self.maskCtx.beginPath();
self.maskCtx.globalCompositeOperation = "destination-out"; self.maskCtx.globalCompositeOperation = "destination-out";
self.maskCtx.arc(x, y, this.brush_size, 0, Math.PI * 2, false); self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
self.maskCtx.fill(); self.maskCtx.fill();
self.lastx = x; self.lastx = x;
self.lasty = y; self.lasty = y;
@ -449,7 +459,7 @@ class MaskEditorDialog extends ComfyDialog {
for (var i = 0; i < distance; i+=5) { for (var i = 0; i < distance; i+=5) {
var px = self.lastx + (directionX * i); var px = self.lastx + (directionX * i);
var py = self.lasty + (directionY * i); var py = self.lasty + (directionY * i);
self.maskCtx.arc(px, py, this.brush_size, 0, Math.PI * 2, false); self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
self.maskCtx.fill(); self.maskCtx.fill();
} }
self.lastx = x; self.lastx = x;
@ -460,8 +470,13 @@ class MaskEditorDialog extends ComfyDialog {
} }
} }
handleMouseDown(self, event) { handlePointerDown(self, event) {
if (event.button == 0) { var brush_size = this.brush_size;
if(event instanceof PointerEvent && event.pointerType != 'mouse') {
brush_size *= event.pressure;
}
if (event.buttons == 1) {
self.drawing_mode = true; self.drawing_mode = true;
event.preventDefault(); event.preventDefault();
@ -472,7 +487,7 @@ class MaskEditorDialog extends ComfyDialog {
self.maskCtx.beginPath(); self.maskCtx.beginPath();
self.maskCtx.fillStyle = "rgb(0,0,0)"; self.maskCtx.fillStyle = "rgb(0,0,0)";
self.maskCtx.globalCompositeOperation = "source-over"; self.maskCtx.globalCompositeOperation = "source-over";
self.maskCtx.arc(x, y, this.brush_size, 0, Math.PI * 2, false); self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
self.maskCtx.fill(); self.maskCtx.fill();
self.lastx = x; self.lastx = x;
self.lasty = y; self.lasty = y;
@ -488,7 +503,7 @@ class MaskEditorDialog extends ComfyDialog {
self.maskCtx.beginPath(); self.maskCtx.beginPath();
self.maskCtx.globalCompositeOperation = "destination-out"; self.maskCtx.globalCompositeOperation = "destination-out";
self.maskCtx.arc(x, y, this.brush_size, 0, Math.PI * 2, false); self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
self.maskCtx.fill(); self.maskCtx.fill();
self.lastx = x; self.lastx = x;
self.lasty = y; self.lasty = y;