Merge branch 'main' into feat/cnr

improved: support new front's prompt, alert api
modified: z-indices

js/cm-api.js

@@ -1,6 +1,6 @@
 import { api } from "../../scripts/api.js";
 import { app } from "../../scripts/app.js";
-import { sleep } from "./common.js";
+import { sleep, customConfirm, customAlert } from "./common.js";
 
 async function tryInstallCustomNode(event) {
 	let msg = '-= [ComfyUI Manager] extension installation request =-\n\n';
@@ -19,11 +19,10 @@ async function tryInstallCustomNode(event) {
 	msg += `\n\nRequest message:\n${event.detail.msg}`;
 
 	if(event.detail.target.installed == 'True') {
-		alert(msg);
+		customAlert(msg);
 		return;
 	}
-
-	let res = confirm(msg);
+	const res = await customConfirm(msg);
 	if(res) {
 		if(event.detail.target.installed == 'Disabled') {
 			const response = await api.fetchApi(`/customnode/toggle_active`, {

js/comfyui-manager.js

@@ -11,7 +11,9 @@ import {
 	showYouMLShareDialog
 } from "./comfyui-share-common.js";
 import { OpenArtShareDialog } from "./comfyui-share-openart.js";
-import { free_models, install_pip, install_via_git_url, manager_instance, rebootAPI, migrateAPI, setManagerInstance, show_message } from "./common.js";
+import {
+	free_models, install_pip, install_via_git_url, manager_instance,
+	rebootAPI, migrateAPI, setManagerInstance, show_message, customAlert, customPrompt } from "./common.js";
 import { ComponentBuilderDialog, getPureName, load_components, set_component_policy } from "./components-manager.js";
 import { CustomNodesManager } from "./custom-nodes-manager.js";
 import { ModelManager } from "./model-manager.js";
@@ -41,7 +43,7 @@ docStyle.innerHTML = `
 	width: 1000px;
 	height: 520px;
 	box-sizing: content-box;
-	z-index: 10000;
+	z-index: 1000;
 	overflow-y: auto;
 }
 
@@ -49,7 +51,7 @@ docStyle.innerHTML = `
 	width: 400px;
 	height: 25px;
 	box-sizing: border-box;
-	z-index: 10000;
+	z-index: 1000;
 	margin-top: 10px;
 	margin-bottom: 5px;
 }
@@ -610,7 +612,7 @@ async function updateComfyUI() {
 
 function showVersionSelectorDialog(versions, current, onSelect) {
 		const dialog = new ComfyDialog();
-		dialog.element.style.zIndex = 100003;
+		dialog.element.style.zIndex = 1100;
 		dialog.element.style.width = "300px";
 		dialog.element.style.padding = "0";
 		dialog.element.style.backgroundColor = "#2a2a2a";
@@ -710,7 +712,7 @@ function showVersionSelectorDialog(versions, current, onSelect) {
 							onSelect(selectedVersion);
 							dialog.close();
 						} else {
-							alert("Please select a version.");
+							customAlert("Please select a version.");
 						}
 					},
 					style: {
@@ -972,8 +974,8 @@ class ManagerMenuDialog extends ComfyDialog {
 				$el("button.cm-button", {
 					type: "button",
 					textContent: "Install via Git URL",
-					onclick: () => {
-						var url = prompt("Please enter the URL of the Git repository to install", "");
+					onclick: async () => {
+						var url = await customPrompt("Please enter the URL of the Git repository to install", "");
 
 						if (url !== null) {
 							install_via_git_url(url, self);
@@ -1240,8 +1242,8 @@ class ManagerMenuDialog extends ComfyDialog {
 						type: "button",
 						textContent: "Install PIP packages",
 						onclick:
-							() => {
-								var url = prompt("Please enumerate the pip packages to be installed.\n\nExample: insightface opencv-python-headless>=4.1.1\n", "");
+							async () => {
+								var url = await customPrompt("Please enumerate the pip packages to be installed.\n\nExample: insightface opencv-python-headless>=4.1.1\n", "");
 
 								if (url !== null) {
 									install_pip(url, self);

js/comfyui-share-common.js

@@ -4,6 +4,7 @@ import { $el, ComfyDialog } from "../../scripts/ui.js";
 import { CopusShareDialog } from "./comfyui-share-copus.js";
 import { OpenArtShareDialog } from "./comfyui-share-openart.js";
 import { YouMLShareDialog } from "./comfyui-share-youml.js";
+import { customAlert } from "./common.js";
 
 export const SUPPORTED_OUTPUT_NODE_TYPES = [
 	"PreviewImage",
@@ -252,9 +253,9 @@ export const showShareDialog = async (share_option) => {
         if (potential_output_nodes.length === 0) {
           // todo: add support for other output node types (animatediff combine, etc.)
           const supported_nodes_string = SUPPORTED_OUTPUT_NODE_TYPES.join(", ");
-          alert(`No supported output node found (${supported_nodes_string}). To share this workflow, please add an output node to your graph and re-run your prompt.`);
+          customAlert(`No supported output node found (${supported_nodes_string}). To share this workflow, please add an output node to your graph and re-run your prompt.`);
         } else {
-          alert("To share this, first run a prompt. Once it's done, click 'Share'.\n\nNOTE: Images of the Share target can only be selected in the PreviewImage, SaveImage, and VHS_VideoCombine nodes. In the case of VHS_VideoCombine, only the image/gif and image/webp formats are supported.");
+          customAlert("To share this, first run a prompt. Once it's done, click 'Share'.\n\nNOTE: Images of the Share target can only be selected in the PreviewImage, SaveImage, and VHS_VideoCombine nodes. In the case of VHS_VideoCombine, only the image/gif and image/webp formats are supported.");
         }
         return false;
       }
@@ -512,7 +513,7 @@ export class ShareDialogChooser extends ComfyDialog {
 	}
 	show() {
 		this.element.style.display = "block";
-		this.element.style.zIndex = 10001;
+		this.element.style.zIndex = 1099;
 	}
 }
 export class ShareDialog extends ComfyDialog {
@@ -861,7 +862,7 @@ export class ShareDialog extends ComfyDialog {
 			if (destinations.includes("matrix")) {
 				let definedMatrixAuth = !!this.matrix_homeserver_input.value && !!this.matrix_username_input.value && !!this.matrix_password_input.value;
 				if (!definedMatrixAuth) {
-					alert("Please set your Matrix account details.");
+					customAlert("Please set your Matrix account details.");
 					return;
 				}
 			}
@@ -878,9 +879,9 @@ export class ShareDialog extends ComfyDialog {
 				if (potential_output_nodes.length === 0) {
 					// todo: add support for other output node types (animatediff combine, etc.)
 					const supported_nodes_string = SUPPORTED_OUTPUT_NODE_TYPES.join(", ");
-					alert(`No supported output node found (${supported_nodes_string}). To share this workflow, please add an output node to your graph and re-run your prompt.`);
+					customAlert(`No supported output node found (${supported_nodes_string}). To share this workflow, please add an output node to your graph and re-run your prompt.`);
 				} else {
-					alert("To share this, first run a prompt. Once it's done, click 'Share'.\n\nNOTE: Images of the Share target can only be selected in the PreviewImage, SaveImage, and VHS_VideoCombine nodes. In the case of VHS_VideoCombine, only the image/gif and image/webp formats are supported.");
+					customAlert("To share this, first run a prompt. Once it's done, click 'Share'.\n\nNOTE: Images of the Share target can only be selected in the PreviewImage, SaveImage, and VHS_VideoCombine nodes. In the case of VHS_VideoCombine, only the image/gif and image/webp formats are supported.");
 				}
 				this.selectedOutputIndex = 0;
 				this.close();
@@ -918,16 +919,16 @@ export class ShareDialog extends ComfyDialog {
 				try {
 					const response_json = await response.json();
 					if (response_json.error) {
-						alert(response_json.error);
+						customAlert(response_json.error);
 						this.close();
 						return;
 					} else {
-						alert("Failed to share your art. Please try again.");
+						customAlert("Failed to share your art. Please try again.");
 						this.close();
 						return;
 					}
 				} catch (e) {
-					alert("Failed to share your art. Please try again.");
+					customAlert("Failed to share your art. Please try again.");
 					this.close();
 					return;
 				}

js/comfyui-share-copus.js

@@ -1,5 +1,7 @@
 import { app } from "../../scripts/app.js";
 import { $el, ComfyDialog } from "../../scripts/ui.js";
+import { customAlert } from "./common.js";
+
 const env = "prod";
 
 let DEFAULT_HOMEPAGE_URL = "https://copus.io";
@@ -603,7 +605,7 @@ export class CopusShareDialog extends ComfyDialog {
       this.shareButton.textContent = "Sharing...";
       await this.share();
     } catch (e) {
-      alert(e.message);
+      customAlert(e.message);
     }
     this.shareButton.disabled = false;
     this.shareButton.textContent = "Share";

js/comfyui-share-openart.js

@@ -1,6 +1,7 @@
 import {app} from "../../scripts/app.js";
 import {api} from "../../scripts/api.js";
 import {ComfyDialog, $el} from "../../scripts/ui.js";
+import { customAlert } from "./common.js";
 
 const LOCAL_STORAGE_KEY = "openart_comfy_workflow_key";
 const DEFAULT_HOMEPAGE_URL = "https://openart.ai/workflows/dev?developer=true";
@@ -431,7 +432,7 @@ export class OpenArtShareDialog extends ComfyDialog {
       this.shareButton.textContent = "Sharing...";
       await this.share();
     } catch (e) {
-      alert(e.message);
+      customAlert(e.message);
     }
     this.shareButton.disabled = false;
     this.shareButton.textContent = "Share";

js/comfyui-share-youml.js

@@ -1,6 +1,7 @@
 import {app} from "../../scripts/app.js";
 import {api} from "../../scripts/api.js";
 import {ComfyDialog, $el} from "../../scripts/ui.js";
+import { customAlert } from "./common.js";
 
 const BASE_URL = "https://youml.com";
 //const BASE_URL = "http://localhost:3000";
@@ -347,7 +348,7 @@ export class YouMLShareDialog extends ComfyDialog {
       this.shareButton.textContent = "Sharing...";
       await this.share();
     } catch (e) {
-      alert(e.message);
+      customAlert(e.message);
     } finally {
       this.shareButton.disabled = false;
       this.shareButton.textContent = "Share";

js/common.js

@@ -2,36 +2,174 @@ import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
 import { $el, ComfyDialog } from "../../scripts/ui.js";
 
+
+function internalCustomConfirm(message, confirmMessage, cancelMessage) {
+	return new Promise((resolve) => {
+		// transparent bg
+		const modalOverlay = document.createElement('div');
+		modalOverlay.style.position = 'fixed';
+		modalOverlay.style.top = 0;
+		modalOverlay.style.left = 0;
+		modalOverlay.style.width = '100%';
+		modalOverlay.style.height = '100%';
+		modalOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+		modalOverlay.style.display = 'flex';
+		modalOverlay.style.alignItems = 'center';
+		modalOverlay.style.justifyContent = 'center';
+		modalOverlay.style.zIndex = '1100';
+
+		// Modal window container (dark bg)
+		const modalDialog = document.createElement('div');
+		modalDialog.style.backgroundColor = '#333';
+		modalDialog.style.padding = '20px';
+		modalDialog.style.borderRadius = '4px';
+		modalDialog.style.maxWidth = '400px';
+		modalDialog.style.width = '80%';
+		modalDialog.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.5)';
+		modalDialog.style.color = '#fff';
+
+		// Display message
+		const modalMessage = document.createElement('p');
+		modalMessage.textContent = message;
+		modalMessage.style.margin = '0';
+		modalMessage.style.padding = '0 0 20px';
+		modalMessage.style.wordBreak = 'keep-all';
+
+		// Button container
+		const modalButtons = document.createElement('div');
+		modalButtons.style.display = 'flex';
+		modalButtons.style.justifyContent = 'flex-end';
+
+		// Confirm button (green)
+		const confirmButton = document.createElement('button');
+		if(confirmMessage)
+			confirmButton.textContent = confirmMessage;
+		else
+			confirmButton.textContent = 'Confirm';
+		confirmButton.style.marginLeft = '10px';
+		confirmButton.style.backgroundColor = '#28a745'; // green
+		confirmButton.style.color = '#fff';
+		confirmButton.style.border = 'none';
+		confirmButton.style.padding = '6px 12px';
+		confirmButton.style.borderRadius = '4px';
+		confirmButton.style.cursor = 'pointer';
+		confirmButton.style.fontWeight = 'bold';
+
+		// Cancel button (red)
+		const cancelButton = document.createElement('button');
+		if(cancelMessage)
+			cancelButton.textContent = cancelMessage;
+		else
+			cancelButton.textContent = 'Cancel';
+
+		cancelButton.style.marginLeft = '10px';
+		cancelButton.style.backgroundColor = '#dc3545'; // red
+		cancelButton.style.color = '#fff';
+		cancelButton.style.border = 'none';
+		cancelButton.style.padding = '6px 12px';
+		cancelButton.style.borderRadius = '4px';
+		cancelButton.style.cursor = 'pointer';
+		cancelButton.style.fontWeight = 'bold';
+
+		const closeModal = () => {
+			document.body.removeChild(modalOverlay);
+		};
+
+		confirmButton.addEventListener('click', () => {
+			closeModal();
+			resolve(true);
+		});
+
+		cancelButton.addEventListener('click', () => {
+			closeModal();
+			resolve(false);
+		});
+
+		modalButtons.appendChild(confirmButton);
+		modalButtons.appendChild(cancelButton);
+		modalDialog.appendChild(modalMessage);
+		modalDialog.appendChild(modalButtons);
+		modalOverlay.appendChild(modalDialog);
+		document.body.appendChild(modalOverlay);
+	});
+}
+
 export function show_message(msg) {
 	app.ui.dialog.show(msg);
-	app.ui.dialog.element.style.zIndex = 10010;
+	app.ui.dialog.element.style.zIndex = 1099;
 }
 
 export async function sleep(ms) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+export async function customConfirm(message) {
+	try {
+		let res = await
+			window['app'].extensionManager.dialog
+			.confirm({
+				title: 'Confirm',
+				message: message
+			});
+
+		return res;
+	}
+	catch {
+		let res = await internalCustomConfirm(message);
+		return res;
+	}
+}
+
+
+export function customAlert(message) {
+	try {
+		window['app'].extensionManager.toast.addAlert(message);
+	}
+	catch {
+		alert(message);
+	}
+}
+
+
+export async function customPrompt(title, message) {
+	try {
+		let res = await
+				window['app'].extensionManager.dialog
+				.prompt({
+					title: title,
+					message: message
+				});
+
+		return res;
+	}
+	catch {
+		return prompt(title, message)
+	}
+}
+
+
 export function rebootAPI() {
 	if ('electronAPI' in window) {
-      		window.electronAPI.restartApp();
-      		return true;
-    	}
-	if (confirm("Are you sure you'd like to reboot the server?")) {
-		try {
-			api.fetchApi("/manager/reboot");
-		}
-		catch(exception) {
-
-		}
-		return true;
+			window.electronAPI.restartApp();
+			return true;
 	}
 
+	customConfirm("Are you sure you'd like to reboot the server?").then((isConfirmed) => {
+		if (isConfirmed) {
+			try {
+				api.fetchApi("/manager/reboot");
+			}
+			catch(exception) {}
+		}
+	});
+
 	return false;
 }
 
 
 export async function migrateAPI() {
-	if (confirm("When performing a migration, existing installed custom nodes will be renamed and the server will be restarted. Are you sure you want to apply this?\n\n(If you don't perform the migration, ComfyUI-Manager's start-up time will be longer each time due to re-checking during startup.)")) {
+	let confirmed = await customConfirm("When performing a migration, existing installed custom nodes will be renamed and the server will be restarted. Are you sure you want to apply this?\n\n(If you don't perform the migration, ComfyUI-Manager's start-up time will be longer each time due to re-checking during startup.)")
+	if (confirmed) {
 		try {
 			await api.fetchApi("/manager/migrate_unmanaged_nodes");
 			api.fetchApi("/manager/reboot");

js/components-manager.js

@@ -1,6 +1,6 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js"
-import { sleep, show_message } from "./common.js";
+import { sleep, show_message, customConfirm, customAlert } from "./common.js";
 import { GroupNodeConfig, GroupNodeHandler } from "../../extensions/core/groupNode.js";
 import { ComfyDialog, $el } from "../../scripts/ui.js";
 
@@ -365,7 +365,7 @@ function checkVersion(name, component) {
 	return msg;
 }
 
-function handle_import_components(components) {
+async function handle_import_components(components) {
 	let msg = 'Components:\n';
 	let cnt = 0;
 	for(let name in components) {
@@ -387,8 +387,9 @@ function handle_import_components(components) {
 
 	let last_name = null;
 	msg += '\nWill you load components?\n';
-	if(confirm(msg)) {
-		let mode = confirm('\nWill you save components?\n(cancel=load without save)');
+	const confirmed = await customConfirm(msg);
+	if(confirmed) {
+		const mode = await customConfirm('\nWill you save components?\n(cancel=load without save)');
 
 		for(let name in components) {
 			let component = components[name];
@@ -411,7 +412,7 @@ function handle_import_components(components) {
 	}
 }
 
-function handlePaste(e) {
+async function handlePaste(e) {
 	let data = (e.clipboardData || window.clipboardData);
 	const items = data.items;
 	for(const item of items) {
@@ -421,7 +422,7 @@ function handlePaste(e) {
 				let json_data = JSON.parse(data);
 				if(json_data.kind == 'ComfyUI Components' && last_paste_timestamp != json_data.timestamp) {
 					last_paste_timestamp = json_data.timestamp;
-					handle_import_components(json_data.components);
+					await handle_import_components(json_data.components);
 
 					// disable paste node
 					localStorage.removeItem("litegrapheditor_clipboard", null);
@@ -455,7 +456,7 @@ export class ComponentBuilderDialog extends ComfyDialog {
 		this.invalidateControl();
 
 		this.element.style.display = "block";
-		this.element.style.zIndex = 10001;
+		this.element.style.zIndex = 1099;
 		this.element.style.width = "500px";
 		this.element.style.height = "480px";
 	}
@@ -621,7 +622,7 @@ export class ComponentBuilderDialog extends ComfyDialog {
 				self.version_string.value = self.default_ver;
 			}
 			else {
-				alert('If you are not the author, it is not recommended to change the version, as it may cause component update issues.');
+				customAlert('If you are not the author, it is not recommended to change the version, as it may cause component update issues.');
 			}
 		};
 
@@ -677,7 +678,7 @@ export class ComponentBuilderDialog extends ComfyDialog {
 
 let orig_handleFile = app.handleFile;
 
-function handleFile(file) {
+async function handleFile(file) {
 	if (file.name?.endsWith(".json") || file.name?.endsWith(".pack")) {
 		const reader = new FileReader();
 		reader.onload = async () => {
@@ -690,7 +691,7 @@ function handleFile(file) {
 			}
 
 			if(is_component) {
-				handle_import_components(jsonContent);
+				await handle_import_components(jsonContent);
 			}
 			else {
 				orig_handleFile.call(app, file);

js/custom-nodes-manager.js

@@ -4,7 +4,7 @@ import { api } from "../../scripts/api.js";
 
 import {
 	manager_instance, rebootAPI, install_via_git_url,
-	fetchData, md5, icons, show_message
+	fetchData, md5, icons, show_message, customConfirm, customAlert, customPrompt
 } from  "./common.js";
 
 // https://cenfun.github.io/turbogrid/api.html
@@ -13,7 +13,7 @@ import TG from "./turbogrid.esm.js";
 const pageCss = `
 .cn-manager {
 	--grid-font: -apple-system, BlinkMacSystemFont, "Segue UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-	z-index: 10001;
+	z-index: 1099;
 	width: 80%;
 	height: 80%;
 	display: flex;
@@ -389,7 +389,7 @@ export class CustomNodesManager {
 
 	showVersionSelectorDialog(versions, onSelect) {
 		const dialog = new ComfyDialog();
-		dialog.element.style.zIndex = 100003;
+		dialog.element.style.zIndex = 1100;
 		dialog.element.style.width = "300px";
 		dialog.element.style.padding = "0";
 		dialog.element.style.backgroundColor = "#2a2a2a";
@@ -489,7 +489,7 @@ export class CustomNodesManager {
 							onSelect(selectedVersion);
 							dialog.close();
 						} else {
-							alert("Please select a version.");
+							customAlert("Please select a version.");
 						}
 					},
 					style: {
@@ -753,8 +753,8 @@ export class CustomNodesManager {
 			},
 
 			".cn-manager-install-url": {
-				click: (e) => {
-					const url = prompt("Please enter the URL of the Git repository to install", "");
+				click: async (e) => {
+					const url = await customPrompt("Please enter the URL of the Git repository to install", "");
 					if (url !== null) {
 						install_via_git_url(url, this.manager_dialog);
 					}
@@ -1200,14 +1200,18 @@ export class CustomNodesManager {
 
 		if(mode === "uninstall") {
 			title = title || `${list.length} custom nodes`;
-			if (!confirm(`Are you sure uninstall ${title}?`)) {
+
+			const confirmed = await customConfirm(`Are you sure uninstall ${title}?`);
+			if (!confirmed) {
 				return;
 			}
 		}
 
 		if(mode === "reinstall") {
 			title = title || `${list.length} custom nodes`;
-			if (!confirm(`Are you sure reinstall ${title}?`)) {
+
+			const confirmed = await customConfirm(`Are you sure reinstall ${title}?`);
+			if (!confirmed) {
 				return;
 			}
 		}

js/model-manager.js

@@ -10,7 +10,7 @@ import TG from "./turbogrid.esm.js";
 const pageCss = `
 .cmm-manager {
 	--grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-	z-index: 10001;
+	z-index: 1099;
 	width: 80%;
 	height: 80%;
 	display: flex;

js/snapshot.js

@@ -291,7 +291,7 @@ export class SnapshotManager extends ComfyDialog {
 		try {
 			this.invalidateControl();
 			this.element.style.display = "block";
-			this.element.style.zIndex = 10001;
+			this.element.style.zIndex = 1099;
 		}
 		catch(exception) {
 			app.ui.dialog.show(`Failed to get external model list. / ${exception}`);