add "Open in MaskEditor" to context menu

web/extensions/core/maskeditor.js

@@ -514,7 +514,7 @@ class MaskEditorDialog extends ComfyDialog {
 		}
 	}
 
-	save() {
+	async save() {
 		const backupCtx = this.backupCanvas.getContext('2d', {willReadFrequently:true});
 
 		backupCtx.clearRect(0,0,this.backupCanvas.width,this.backupCanvas.height);
@@ -570,21 +570,22 @@ class MaskEditorDialog extends ComfyDialog {
 		formData.append('type', "input");
 		formData.append('subfolder', "clipspace");
 
-		uploadMask(item, formData);
+		await uploadMask(item, formData);
 		this.close();
+		ComfyApp.onClipspaceEditorSaved();
 	}
 }
 
 app.registerExtension({
 	name: "Comfy.MaskEditor",
 	init(app) {
-		const callback =
+		ComfyApp.open_maskeditor =
 			function () {
 				let dlg = new MaskEditorDialog(app);
 				dlg.show();
 			};
 
 		const context_predicate = () => ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0
-		ClipspaceDialog.registerButton("MaskEditor", context_predicate, callback);
+		ClipspaceDialog.registerButton("MaskEditor", context_predicate, ComfyApp.open_maskeditor);
 	}
 });

web/scripts/app.js

@@ -26,6 +26,8 @@ export class ComfyApp {
 	 */
 	static clipspace = null;
 	static clipspace_invalidate_handler = null;
+	static open_maskeditor = null;
+	static clipspace_return_node = null;
 
 	constructor() {
 		this.ui = new ComfyUI(this);
@@ -49,6 +51,106 @@ export class ComfyApp {
 		this.shiftDown = false;
 	}
 
+    static isImageNode(node) {
+        console.log(node);
+        return node.imgs || (node && node.widgets && node.widgets.findIndex(obj => obj.name === 'image') >= 0);
+    }
+
+    static onClipspaceEditorSaved() {
+        if(ComfyApp.clipspace_return_node) {
+            ComfyApp.pasteToClipspace(ComfyApp.clipspace_return_node);
+        }
+    }
+
+    static copyToClipspace(node) {
+        var widgets = null;
+        if(node.widgets) {
+            widgets = node.widgets.map(({ type, name, value }) => ({ type, name, value }));
+        }
+
+        var imgs = undefined;
+        var orig_imgs = undefined;
+        if(node.imgs != undefined) {
+            imgs = [];
+            orig_imgs = [];
+
+            for (let i = 0; i < node.imgs.length; i++) {
+                imgs[i] = new Image();
+                imgs[i].src = node.imgs[i].src;
+                orig_imgs[i] = imgs[i];
+            }
+        }
+
+        ComfyApp.clipspace = {
+            'widgets': widgets,
+            'imgs': imgs,
+            'original_imgs': orig_imgs,
+            'images': node.images,
+            'selectedIndex': 0,
+            'img_paste_mode': 'selected' // reset to default im_paste_mode state on copy action
+            };
+
+        ComfyApp.clipspace_return_node = null;
+
+        if(ComfyApp.clipspace_invalidate_handler) {
+            ComfyApp.clipspace_invalidate_handler();
+        }
+    }
+
+    static pasteToClipspace(node) {
+        if(ComfyApp.clipspace) {
+            // image paste
+            if(ComfyApp.clipspace.imgs && node.imgs) {
+                if(node.images && ComfyApp.clipspace.images) {
+                    if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+                        app.nodeOutputs[node.id + ""].images = node.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]];
+
+                    }
+                    else
+                        app.nodeOutputs[node.id + ""].images = node.images = ComfyApp.clipspace.images;
+                }
+
+                if(ComfyApp.clipspace.imgs) {
+                    // deep-copy to cut link with clipspace
+                    if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+                            const img = new Image();
+                            img.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
+                            node.imgs = [img];
+                    }
+                    else {
+                        const imgs = [];
+                        for(let i=0; i<ComfyApp.clipspace.imgs.length; i++) {
+                            imgs[i] = new Image();
+                            imgs[i].src = ComfyApp.clipspace.imgs[i].src;
+                            node.imgs = imgs;
+                        }
+                    }
+                }
+            }
+
+            if(node.widgets) {
+                if(ComfyApp.clipspace.images) {
+                    const clip_image = ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']];
+                    const index = node.widgets.findIndex(obj => obj.name === 'image');
+                    if(index >= 0) {
+                        node.widgets[index].value = clip_image;
+                    }
+                }
+                if(ComfyApp.clipspace.widgets) {
+                    ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
+                        const prop = Object.values(node.widgets).find(obj => obj.type === type && obj.name === name);
+                            if (prop && prop.type != 'button') {
+                                prop.value = value;
+                                prop.callback(value);
+                            }
+                    });
+                }
+            }
+
+            app.graph.setDirtyCanvas(true);
+        }
+    }
+
 	/**
 	 * Invoke an extension callback
 	 * @param {keyof ComfyExtension} method The extension callback to execute
@@ -141,100 +243,29 @@ export class ComfyApp {
 			options.push(
 				{
 					content: "Copy (Clipspace)",
-					callback: (obj) => {
+					callback: (obj) => { ComfyApp.copyToClipspace(this); }
-						var widgets = null;
-						if(this.widgets) {
-							widgets = this.widgets.map(({ type, name, value }) => ({ type, name, value }));
-						}
-						
-						var imgs = undefined;
-						var orig_imgs = undefined;
-						if(this.imgs != undefined) {
-							imgs = [];
-							orig_imgs = [];
-
-							for (let i = 0; i < this.imgs.length; i++) {
-								imgs[i] = new Image();
-								imgs[i].src = this.imgs[i].src;
-								orig_imgs[i] = imgs[i];
-							}
-						}
-
-						ComfyApp.clipspace = {
-							'widgets': widgets,
-							'imgs': imgs,
-							'original_imgs': orig_imgs,
-							'images': this.images,
-							'selectedIndex': 0,
-							'img_paste_mode': 'selected' // reset to default im_paste_mode state on copy action
-							};
-
-						if(ComfyApp.clipspace_invalidate_handler) {
-							ComfyApp.clipspace_invalidate_handler();
-						}
-					}
 				});
 
 			if(ComfyApp.clipspace != null) {
 				options.push(
 					{
 						content: "Paste (Clipspace)",
-						callback: () => {
+						callback: () => { ComfyApp.pasteToClipspace(this); }
-							if(ComfyApp.clipspace) {
-								// image paste
-								if(ComfyApp.clipspace.imgs && this.imgs) {
-									if(this.images && ComfyApp.clipspace.images) {
-										if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
-											app.nodeOutputs[this.id + ""].images = this.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]];
-
-										}
-										else
-											app.nodeOutputs[this.id + ""].images = this.images = ComfyApp.clipspace.images;
-									}
-
-									if(ComfyApp.clipspace.imgs) {
-										// deep-copy to cut link with clipspace
-										if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
-												const img = new Image();
-												img.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
-												this.imgs = [img];
-										}
-										else {
-											const imgs = [];
-											for(let i=0; i<ComfyApp.clipspace.imgs.length; i++) {
-												imgs[i] = new Image();
-												imgs[i].src = ComfyApp.clipspace.imgs[i].src;
-												this.imgs = imgs;
-											}
-										}
-									}
-								}
-
-								if(this.widgets) {
-									if(ComfyApp.clipspace.images) {
-										const clip_image = ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']];
-										const index = this.widgets.findIndex(obj => obj.name === 'image');
-										if(index >= 0) {
-											this.widgets[index].value = clip_image;
-										}
-									}
-									if(ComfyApp.clipspace.widgets) {
-										ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
-											const prop = Object.values(this.widgets).find(obj => obj.type === type && obj.name === name);
-												if (prop && prop.type != 'button') {
-													prop.value = value;
-													prop.callback(value);
-												}
-										});
-									}
-								}
-							}
-
-							app.graph.setDirtyCanvas(true);
-						}
 					}
 				);
 			}
+
+		    if(ComfyApp.isImageNode(this)) {
+                options.push(
+                    {
+                        content: "Open in MaskEditor",
+                        callback: (obj) => {
+                            ComfyApp.copyToClipspace(this);
+                            ComfyApp.clipspace_return_node = this;
+                            ComfyApp.open_maskeditor();
+                        }
+                    });
+		    }
 		};
 	}