more extensions

workflows/comfy/ComfyUI/web/extensions/core/maskeditor.js

@@ -62,7 +62,7 @@ async function uploadMask(filepath, formData) {
 	ClipspaceDialog.invalidatePreview();
 }
 
-function prepare_mask(image, maskCanvas, maskCtx) {
+function prepare_mask(image, maskCanvas, maskCtx, maskColor) {
 	// paste mask data into alpha channel
 	maskCtx.drawImage(image, 0, 0, maskCanvas.width, maskCanvas.height);
 	const maskData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
@@ -74,9 +74,9 @@ function prepare_mask(image, maskCanvas, maskCtx) {
 		else
 			maskData.data[i+3] = 255;
 
-		maskData.data[i] = 0;
-		maskData.data[i+1] = 0;
-		maskData.data[i+2] = 0;
+		maskData.data[i] = maskColor.r;
+		maskData.data[i+1] = maskColor.g;
+		maskData.data[i+2] = maskColor.b;
 	}
 
 	maskCtx.globalCompositeOperation = 'source-over';
@@ -194,14 +194,29 @@ class MaskEditorDialog extends ComfyDialog {
 		this.element.appendChild(bottom_panel);
 		document.body.appendChild(brush);
 
+		var clearButton = this.createLeftButton("Clear", () => {
+			self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height);
+		});
+		
 		this.brush_size_slider = this.createLeftSlider(self, "Thickness", (event) => {
 			self.brush_size = event.target.value;
 			self.updateBrushPreview(self, null, null);
 		});
-		var clearButton = this.createLeftButton("Clear",
-			() => {
-				self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height);
-			});
+
+		this.colorButton = this.createLeftButton(this.getColorButtonText(), () => {
+			if (self.brush_color_mode === "black") {
+				self.brush_color_mode = "white";
+			}
+			else if (self.brush_color_mode === "white") {
+				self.brush_color_mode = "negative";
+			}
+			else {
+				self.brush_color_mode = "black";
+			}
+
+			self.updateWhenBrushColorModeChanged();
+		});
+
 		var cancelButton = this.createRightButton("Cancel", () => {
 			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
 			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
@@ -222,6 +237,7 @@ class MaskEditorDialog extends ComfyDialog {
 		bottom_panel.appendChild(this.saveButton);
 		bottom_panel.appendChild(cancelButton);
 		bottom_panel.appendChild(this.brush_size_slider);
+		bottom_panel.appendChild(this.colorButton);
 
 		imgCanvas.style.position = "absolute";
 		maskCanvas.style.position = "absolute";
@@ -231,6 +247,10 @@ class MaskEditorDialog extends ComfyDialog {
 
 		maskCanvas.style.top = imgCanvas.style.top;
 		maskCanvas.style.left = imgCanvas.style.left;
+
+		const maskCanvasStyle = this.getMaskCanvasStyle();
+		maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode;
+		maskCanvas.style.opacity = maskCanvasStyle.opacity;
 	}
 
 	async show() {
@@ -316,7 +336,7 @@ class MaskEditorDialog extends ComfyDialog {
 		let maskCtx = this.maskCanvas.getContext('2d', {willReadFrequently: true });
 
 		imgCtx.drawImage(orig_image, 0, 0, orig_image.width, orig_image.height);
-		prepare_mask(mask_image, this.maskCanvas, maskCtx);
+		prepare_mask(mask_image, this.maskCanvas, maskCtx, this.getMaskColor());
 	}
 
 	async setImages(imgCanvas) {
@@ -442,7 +462,84 @@ class MaskEditorDialog extends ComfyDialog {
 		}
 	}
 
+	getMaskCanvasStyle() {
+		if (this.brush_color_mode === "negative") {
+			return {
+				mixBlendMode: "difference",
+				opacity: "1",
+			};
+		}
+		else {
+			return {
+				mixBlendMode: "initial",
+				opacity: "0.7",
+			};
+		}
+	}
+
+	getMaskColor() {
+		if (this.brush_color_mode === "black") {
+			return { r: 0, g: 0, b: 0 };
+		}
+		if (this.brush_color_mode === "white") {
+			return { r: 255, g: 255, b: 255 };
+		}
+		if (this.brush_color_mode === "negative") {
+			// negative effect only works with white color
+			return { r: 255, g: 255, b: 255 };
+		}
+
+		return { r: 0, g: 0, b: 0 };
+	}
+
+	getMaskFillStyle() {
+		const maskColor = this.getMaskColor();
+
+		return "rgb(" + maskColor.r + "," + maskColor.g + "," + maskColor.b + ")";
+	}
+
+	getColorButtonText() {
+		let colorCaption = "unknown";
+
+		if (this.brush_color_mode === "black") {
+			colorCaption = "black";
+		}
+		else if (this.brush_color_mode === "white") {
+			colorCaption = "white";
+		}
+		else if (this.brush_color_mode === "negative") {
+			colorCaption = "negative";
+		}
+
+		return "Color: " + colorCaption;
+	}
+
+	updateWhenBrushColorModeChanged() {
+		this.colorButton.innerText = this.getColorButtonText();
+
+		// update mask canvas css styles
+
+		const maskCanvasStyle = this.getMaskCanvasStyle();
+		this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode;
+		this.maskCanvas.style.opacity = maskCanvasStyle.opacity;
+
+		// update mask canvas rgb colors
+
+		const maskColor = this.getMaskColor();
+
+		const maskData = this.maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+		
+		for (let i = 0; i < maskData.data.length; i += 4) {
+			maskData.data[i] = maskColor.r;
+			maskData.data[i+1] = maskColor.g;
+			maskData.data[i+2] = maskColor.b;
+		}
+	
+		this.maskCtx.putImageData(maskData, 0, 0);
+	}
+
 	brush_size = 10;
+	brush_color_mode = "black";
 	drawing_mode = false;
 	lastx = -1;
 	lasty = -1;
@@ -521,6 +618,19 @@ class MaskEditorDialog extends ComfyDialog {
 			event.preventDefault();
 			self.pan_move(self, event);
 		}
+
+		let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1;
+
+		if(event.shiftKey && left_button_down) {
+			self.drawing_mode = false;
+
+			const y = event.clientY;
+			let delta = (self.zoom_lasty - y)*0.005;
+			self.zoom_ratio = Math.max(Math.min(10.0, self.last_zoom_ratio - delta), 0.2);
+
+			this.invalidatePanZoom();
+			return;
+		}
 	}
 
 	pan_move(self, event) {
@@ -538,7 +648,7 @@ class MaskEditorDialog extends ComfyDialog {
 	}
 
 	draw_move(self, event) {
-		if(event.ctrlKey) {
+		if(event.ctrlKey || event.shiftKey) {
 			return;
 		}
 
@@ -549,7 +659,10 @@ class MaskEditorDialog extends ComfyDialog {
 
 		self.updateBrushPreview(self);
 
-		if (window.TouchEvent && event instanceof TouchEvent || event.buttons == 1) {
+		let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1;
+		let right_button_down = [2, 5, 32].includes(event.buttons);
+
+		if (!event.altKey && left_button_down) {
 			var diff = performance.now() - self.lasttime;
 
 			const maskRect = self.maskCanvas.getBoundingClientRect();
@@ -584,7 +697,7 @@ class MaskEditorDialog extends ComfyDialog {
 			if(diff > 20 && !this.drawing_mode)
 				requestAnimationFrame(() => {
 					self.maskCtx.beginPath();
-					self.maskCtx.fillStyle = "rgb(0,0,0)";
+					self.maskCtx.fillStyle = this.getMaskFillStyle();
 					self.maskCtx.globalCompositeOperation = "source-over";
 					self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
 					self.maskCtx.fill();
@@ -594,7 +707,7 @@ class MaskEditorDialog extends ComfyDialog {
 			else
 				requestAnimationFrame(() => {
 					self.maskCtx.beginPath();
-					self.maskCtx.fillStyle = "rgb(0,0,0)";
+					self.maskCtx.fillStyle = this.getMaskFillStyle();
 					self.maskCtx.globalCompositeOperation = "source-over";
 
 					var dx = x - self.lastx;
@@ -616,7 +729,7 @@ class MaskEditorDialog extends ComfyDialog {
 
 			self.lasttime = performance.now();
 		}
-		else if(event.buttons == 2 || event.buttons == 5 || event.buttons == 32) {
+		else if((event.altKey && left_button_down) || right_button_down) {
 			const maskRect = self.maskCanvas.getBoundingClientRect();
 			const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio;
 			const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio;
@@ -690,13 +803,20 @@ class MaskEditorDialog extends ComfyDialog {
 			self.drawing_mode = true;
 
 			event.preventDefault();
+
+			if(event.shiftKey) {
+				self.zoom_lasty = event.clientY;
+				self.last_zoom_ratio = self.zoom_ratio;
+				return;
+			}
+
 			const maskRect = self.maskCanvas.getBoundingClientRect();
 			const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio;
 			const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio;
 
 			self.maskCtx.beginPath();
-			if (event.button == 0) {
-				self.maskCtx.fillStyle = "rgb(0,0,0)";
+			if (!event.altKey && event.button == 0) {
+				self.maskCtx.fillStyle = this.getMaskFillStyle();
 				self.maskCtx.globalCompositeOperation = "source-over";
 			} else {
 				self.maskCtx.globalCompositeOperation = "destination-out";

workflows/comfy/ComfyUI/web/extensions/core/simpleTouchSupport.js

@@ -0,0 +1,102 @@
+import { app } from "../../scripts/app.js";
+
+let touchZooming;
+let touchCount = 0;
+
+app.registerExtension({
+	name: "Comfy.SimpleTouchSupport",
+	setup() {
+		let zoomPos;
+		let touchTime;
+		let lastTouch;
+
+		function getMultiTouchPos(e) {
+			return Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+		}
+
+		app.canvasEl.addEventListener(
+			"touchstart",
+			(e) => {
+				touchCount++;
+				lastTouch = null;
+				if (e.touches?.length === 1) {
+					// Store start time for press+hold for context menu
+					touchTime = new Date();
+					lastTouch = e.touches[0];
+				} else {
+					touchTime = null;
+					if (e.touches?.length === 2) {
+						// Store center pos for zoom
+						zoomPos = getMultiTouchPos(e);
+						app.canvas.pointer_is_down = false;
+					}
+				}
+			},
+			true
+		);
+
+		app.canvasEl.addEventListener("touchend", (e) => {
+			touchZooming = false;
+			touchCount = e.touches?.length ?? touchCount - 1;
+			if (touchTime && !e.touches?.length) {
+				if (new Date() - touchTime > 600) {
+					try {
+						// hack to get litegraph to use this event
+						e.constructor = CustomEvent;
+					} catch (error) {}
+					e.clientX = lastTouch.clientX;
+					e.clientY = lastTouch.clientY;
+
+					app.canvas.pointer_is_down = true;
+					app.canvas._mousedown_callback(e);
+				}
+				touchTime = null;
+			}
+		});
+
+		app.canvasEl.addEventListener(
+			"touchmove",
+			(e) => {
+				touchTime = null;
+				if (e.touches?.length === 2) {
+					app.canvas.pointer_is_down = false;
+					touchZooming = true;
+					LiteGraph.closeAllContextMenus();
+					app.canvas.search_box?.close();
+					const newZoomPos = getMultiTouchPos(e);
+
+					const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+					const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+
+					let scale = app.canvas.ds.scale;
+					const diff = zoomPos - newZoomPos;
+					if (diff > 0.5) {
+						scale *= 1 / 1.07;
+					} else if (diff < -0.5) {
+						scale *= 1.07;
+					}
+					app.canvas.ds.changeScale(scale, [midX, midY]);
+					app.canvas.setDirty(true, true);
+					zoomPos = newZoomPos;
+				}
+			},
+			true
+		);
+	},
+});
+
+const processMouseDown = LGraphCanvas.prototype.processMouseDown;
+LGraphCanvas.prototype.processMouseDown = function (e) {
+	if (touchZooming || touchCount) {
+		return;
+	}
+	return processMouseDown.apply(this, arguments);
+};
+
+const processMouseMove = LGraphCanvas.prototype.processMouseMove;
+LGraphCanvas.prototype.processMouseMove = function (e) {
+	if (touchZooming || touchCount > 1) {
+		return;
+	}
+	return processMouseMove.apply(this, arguments);
+};

workflows/comfy/ComfyUI/web/extensions/core/widgetInputs.js

@@ -22,6 +22,7 @@ function isConvertableWidget(widget, config) {
 }
 
 function hideWidget(node, widget, suffix = "") {
+	if (widget.type?.startsWith(CONVERTED_TYPE)) return;
 	widget.origType = widget.type;
 	widget.origComputeSize = widget.computeSize;
 	widget.origSerializeValue = widget.serializeValue;
@@ -260,6 +261,12 @@ app.registerExtension({
 	async beforeRegisterNodeDef(nodeType, nodeData, app) {
 		// Add menu options to conver to/from widgets
 		const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+		nodeType.prototype.convertWidgetToInput = function (widget) {
+			const config = getConfig.call(this, widget.name) ?? [widget.type, widget.options || {}];
+			if (!isConvertableWidget(widget, config)) return false;
+			convertToInput(this, widget, config);
+			return true;
+		};
 		nodeType.prototype.getExtraMenuOptions = function (_, options) {
 			const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : undefined;