From 8d454f478597225421c91bd159e1424a7facae1a Mon Sep 17 00:00:00 2001
From: ltdrdata <dr.lt.data@gmail.com>
Date: Fri, 28 Apr 2023 21:47:16 +0900
Subject: [PATCH] support batch images on clipspace, maskeditor

---
 web/extensions/core/clipspace.js  | 44 ++++++++++++++++++++++++++++++-
 web/extensions/core/maskeditor.js | 10 ++++---
 web/scripts/app.js                |  3 ++-
 3 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/web/extensions/core/clipspace.js b/web/extensions/core/clipspace.js
index 4ac6ca54b..3ede7e848 100644
--- a/web/extensions/core/clipspace.js
+++ b/web/extensions/core/clipspace.js
@@ -17,11 +17,20 @@ export class ClipspaceDialog extends ComfyDialog {
 		ClipspaceDialog.items.push(item);
 	}
 
+	static invalidatePreview() {
+		const img_preview = document.getElementById("clipspace_preview");
+		img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
+		img_preview.style.height = "100px";
+	}
+
 	constructor() {
 		super();
 		this.element =
 			$el("div.comfy-modal", { parent: document.body },
-				[$el("div.comfy-modal-content",[...this.createButtons()]),]
+				[$el("div.comfy-modal-content",[
+					this.createImgSelector(),
+					this.createImgPreview(),
+					...this.createButtons()]),]
 				);
 	}
 
@@ -47,8 +56,41 @@ export class ClipspaceDialog extends ComfyDialog {
 		return buttons;
 	}
 
+	createImgSelector() {
+		if(ComfyApp.clipspace.imgs != undefined) {
+			const combo_items = [];
+			const imgs = ComfyApp.clipspace.imgs;
+
+			for(let i=0; i < imgs.length; i++) {
+				combo_items.push($el("option", {value:i}, [`${i}`]));
+			}
+
+			const combo = $el("select",
+				{id:"clipspace_img_selector", onchange:(event) => {
+					ComfyApp.clipspace['selectedIndex'] = event.target.selectedIndex;
+					ClipspaceDialog.invalidatePreview();
+				} }, combo_items);
+			return combo;
+		}
+		else {
+			return [];
+		}
+	}
+
+	createImgPreview() {
+		if(ComfyApp.clipspace.imgs != undefined) {
+			return $el("img",{id:"clipspace_preview"});
+		}
+		else
+			return [];
+	}
+
 	show() {
 		ClipspaceDialog.is_opened = true;
+		const img_preview = document.getElementById("clipspace_preview");
+		img_preview.src = ComfyApp.clipspace.imgs[0].src;
+		img_preview.style.height = "100px";
+		
 		this.element.style.display = "block";
 	}
 }
diff --git a/web/extensions/core/maskeditor.js b/web/extensions/core/maskeditor.js
index 73ede5fed..2896ce9b3 100644
--- a/web/extensions/core/maskeditor.js
+++ b/web/extensions/core/maskeditor.js
@@ -40,9 +40,11 @@ async function uploadMask(filepath, formData) {
 		console.error('Error:', error);
 	});
 
-	ComfyApp.clipspace.imgs[0] = new Image();
-	ComfyApp.clipspace.imgs[0].src = `view?filename=${filepath.filename}&type=${filepath.type}`;
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image();
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = `view?filename=${filepath.filename}&type=${filepath.type}`;
 	ComfyApp.clipspace.images = [filepath];
+
+	ClipspaceDialog.invalidatePreview();
 }
 
 function prepareRGB(image, backupCanvas, backupCtx) {
@@ -276,7 +278,7 @@ class MaskEditorDialog extends ComfyDialog {
 			prepareRGB(touched_image, backupCanvas, backupCtx);
 		};
 
-		const alpha_url = new URL(ComfyApp.clipspace.imgs[0].src)
+		const alpha_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src)
 		alpha_url.searchParams.delete('channel');
 		alpha_url.searchParams.set('channel', 'a');
 		touched_image.src = alpha_url;
@@ -286,7 +288,7 @@ class MaskEditorDialog extends ComfyDialog {
 			window.dispatchEvent(new Event('resize'));
 		};
 
-		const rgb_url = new URL(ComfyApp.clipspace.imgs[0].src);
+		const rgb_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src);
 		rgb_url.searchParams.delete('channel');
 		rgb_url.searchParams.set('channel', 'rgb');
 		orig_image.src = rgb_url;
diff --git a/web/scripts/app.js b/web/scripts/app.js
index 3c6c77755..bf5768bd5 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -163,7 +163,8 @@ export class ComfyApp {
 							'widgets': widgets,
 							'imgs': imgs,
 							'original_imgs': orig_imgs,
-							'images': this.images
+							'images': this.images,
+							'selectedIndex': 0
 							};
 					}
 				});