From 1f9e88fcd10b09edcb6133323c47e6c9fb4e4b96 Mon Sep 17 00:00:00 2001
From: "Lt.Dr.Data" <lt.dr.data@gmail.com>
Date: Thu, 27 Apr 2023 14:59:02 +0900
Subject: [PATCH] Enable brush preview for key and slider events

---
 web/extensions/core/maskeditor.js | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/web/extensions/core/maskeditor.js b/web/extensions/core/maskeditor.js
index 3ebac7bd2..50e633974 100644
--- a/web/extensions/core/maskeditor.js
+++ b/web/extensions/core/maskeditor.js
@@ -185,6 +185,7 @@ class MaskEditorDialog extends ComfyDialog {
 
 		var brush_size_slider = this.createLeftSlider(self, "Thickness", "20px", (event) => {
 			self.brush_size = event.target.value;
+			self.updateBrushPreview(self, null, null);
 		});
 
 		this.element.appendChild(imgCanvas);
@@ -322,6 +323,8 @@ class MaskEditorDialog extends ComfyDialog {
 		} else if (event.key === '[') {
 			self.brush_size = Math.max(self.brush_size-2, 1);
 		}
+
+		self.updateBrushPreview(self, null, null);
 	}
 
 	static handleMouseUp(event) {
@@ -329,6 +332,18 @@ class MaskEditorDialog extends ComfyDialog {
 		MaskEditorDialog.instance.drawing_mode = false;
 	}
 
+	updateBrushPreview(self) {
+		const brush = self.brush;
+
+		var centerX = self.cursorX;
+		var centerY = self.cursorY;
+
+		brush.style.width = (self.brush_size - 1) * 2 + "px";
+		brush.style.height = (self.brush_size - 1) * 2 + "px";
+		brush.style.left = (centerX - self.brush_size) + "px";
+		brush.style.top = (centerY - self.brush_size) + "px";
+	}
+
 	handleWheelEvent(self, event) {
 		if(event.deltaY < 0)
 			self.brush_size = Math.min(self.brush_size+2, 100);
@@ -337,19 +352,14 @@ class MaskEditorDialog extends ComfyDialog {
 
 		self.brush_slider_input.value = self.brush_size;
 
-		const brush = this.brush;
-		brush.style.width = (this.brush_size - 1) * 2 + "px";
-		brush.style.height = (this.brush_size - 1) * 2 + "px";
-		brush.style.left = (event.pageX - this.brush_size) + "px";
-		brush.style.top = (event.pageY - this.brush_size) + "px";
+		self.updateBrushPreview(self);
 	}
 
 	draw_move(self, event) {
-		const brush = this.brush;
-		brush.style.width = (this.brush_size - 1) * 2 + "px";
-		brush.style.height = (this.brush_size - 1) * 2 + "px";
-		brush.style.left = (event.pageX - this.brush_size) + "px";
-		brush.style.top = (event.pageY - this.brush_size) + "px";
+		this.cursorX = event.pageX;
+		this.cursorY = event.pageY;
+
+		this.updateBrushPreview(self);
 
 		if (event instanceof TouchEvent || event.buttons === 1) {
 			event.preventDefault();