Merge branch 'html5-dialog' of https://github.com/reaper47/ComfyUI

web/extensions/core/colorPalette.js

@@ -56,7 +56,9 @@ const colorPalettes = {
 				"descrip-text": "#999",
 				"drag-text": "#ccc",
 				"error-text": "#ff4444",
-				"border-color": "#4e4e4e"
+				"border-color": "#4e4e4e",
+				"tr-even-bg-color": "#222",
+				"tr-odd-bg-color": "#353535",
 			}
 		},
 	},
@@ -111,7 +113,9 @@ const colorPalettes = {
 				"descrip-text": "#444",
 				"drag-text": "#555",
 				"error-text": "#F44336",
-				"border-color": "#888"
+				"border-color": "#888",
+				"tr-even-bg-color": "#f9f9f9",
+				"tr-odd-bg-color": "#fff",
 			}
 		},
 	},
@@ -165,7 +169,9 @@ const colorPalettes = {
 				"descrip-text": "#586e75", // Base01
 				"drag-text": "#839496", // Base0
 				"error-text": "#dc322f", // Solarized Red
-				"border-color": "#657b83" // Base00
+				"border-color": "#657b83", // Base00
+				"tr-even-bg-color": "#002b36",
+				"tr-odd-bg-color": "#073642",
 			}
 		},
 	}
@@ -194,7 +200,7 @@ app.registerExtension({
 				const nodeData = defs[nodeId];
 
 				var inputs = nodeData["input"]["required"];
-				if (nodeData["input"]["optional"] != undefined) {
+				if (nodeData["input"]["optional"] !== undefined) {
 					inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
 				}
 
@@ -214,7 +220,7 @@ app.registerExtension({
 			}
 
 			return types;
-		};
+		}
 
 		function completeColorPalette(colorPalette) {
 			var types = getSlotTypes();
@@ -228,7 +234,7 @@ app.registerExtension({
 			colorPalette.colors.node_slot = sortObjectKeys(colorPalette.colors.node_slot);
 
 			return colorPalette;
-		};
+		}
 
 		const getColorPaletteTemplate = async () => {
 			let colorPalette = {
@@ -267,31 +273,31 @@ app.registerExtension({
 
 		const addCustomColorPalette = async (colorPalette) => {
 			if (typeof (colorPalette) !== "object") {
-				app.ui.dialog.show("Invalid color palette");
+				alert("Invalid color palette.");
 				return;
 			}
 
 			if (!colorPalette.id) {
-				app.ui.dialog.show("Color palette missing id");
+				alert("Color palette missing id.");
 				return;
 			}
 
 			if (!colorPalette.name) {
-				app.ui.dialog.show("Color palette missing name");
+				alert("Color palette missing name.");
 				return;
 			}
 
 			if (!colorPalette.colors) {
-				app.ui.dialog.show("Color palette missing colors");
+				alert("Color palette missing colors.");
 				return;
 			}
 
 			if (colorPalette.colors.node_slot && typeof (colorPalette.colors.node_slot) !== "object") {
-				app.ui.dialog.show("Invalid color palette colors.node_slot");
+				alert("Invalid color palette colors.node_slot.");
 				return;
 			}
 
-			let customColorPalettes = getCustomColorPalettes();
+			const customColorPalettes = getCustomColorPalettes();
 			customColorPalettes[colorPalette.id] = colorPalette;
 			setCustomColorPalettes(customColorPalettes);
 
@@ -312,7 +318,7 @@ app.registerExtension({
 		};
 
 		const deleteCustomColorPalette = async (colorPaletteId) => {
-			let customColorPalettes = getCustomColorPalettes();
+			const customColorPalettes = getCustomColorPalettes();
 			delete customColorPalettes[colorPaletteId];
 			setCustomColorPalettes(customColorPalettes);
 
@@ -387,8 +393,7 @@ app.registerExtension({
 			style: {display: "none"},
 			parent: document.body,
 			onchange: () => {
-				let file = fileInput.files[0];
+				const file = fileInput.files[0];
-
 				if (file.type === "application/json" || file.name.endsWith(".json")) {
 					const reader = new FileReader();
 					reader.onload = async () => {
@@ -403,35 +408,45 @@ app.registerExtension({
 			id,
 			name: "Color Palette",
 			type: (name, setter, value) => {
-				let options = [];
+				const options = [
-
+					...Object.values(colorPalettes).map(c=> $el("option", {
-				for (const c in colorPalettes) {
+						textContent: c.name,
-					const colorPalette = colorPalettes[c];
+						value: c.id,
-					options.push($el("option", {
+						selected: c.id === value
-						textContent: colorPalette.name,
+					})),
-						value: colorPalette.id,
+					...Object.values(getCustomColorPalettes()).map(c=>$el("option", {
-						selected: colorPalette.id === value
+						textContent: `${c.name} (custom)`,
-					}));
+						value: `custom_${c.id}`,
-				}
+						selected: `custom_${c.id}` === value
+					}))	,
+				];
 
-				let customColorPalettes = getCustomColorPalettes();
-				for (const c in customColorPalettes) {
-					const colorPalette = customColorPalettes[c];
-					options.push($el("option", {
-						textContent: colorPalette.name + " (custom)",
-						value: "custom_" + colorPalette.id,
-						selected: "custom_" + colorPalette.id === value
-					}));
-				}
-
-				return $el("div", [
-					$el("label", {textContent: name || id}, [
 				els.select = $el("select", {
+					style: {
+						marginBottom: "0.15rem",
+						width: "100%",
+					},
 					onchange: (e) => {
 						setter(e.target.value);
 					}
 				}, options)
+
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							for: id.replaceAll(".", "-"),
+							textContent: "Color palette:",
+						}),
 					]),
+					$el("td", [
+						els.select,
+						$el("div", {
+							style: {
+								display: "grid",
+								gap: "4px",
+								gridAutoFlow: "column",
+							},
+						}, [
 							$el("input", {
 								type: "button",
 								value: "Export",
@@ -489,7 +504,7 @@ app.registerExtension({
 									let colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
 
 									if (colorPalettes[colorPaletteId]) {
-								app.ui.dialog.show("You cannot delete built-in color palette");
+										alert("You cannot delete a built-in color palette.");
 										return;
 									}
 
@@ -500,7 +515,9 @@ app.registerExtension({
 									await deleteCustomColorPalette(colorPaletteId);
 								}
 							}),
-				]);
+						]),
+					]),
+				])
 			},
 			defaultValue: defaultColorPaletteId,
 			async onChange(value) {

web/extensions/core/slotDefaults.js

@@ -10,7 +10,7 @@ app.registerExtension({
 		LiteGraph.middle_click_slot_add_default_node = true;
 		this.suggestionsNumber = app.ui.settings.addSetting({
 			id: "Comfy.NodeSuggestions.number",
-			name: "number of nodes suggestions",
+			name: "Number of nodes suggestions",
 			type: "slider",
 			attrs: {
 				min: 1,

web/scripts/ui.js

@@ -3,7 +3,10 @@ import { api } from "./api.js";
 export function $el(tag, propsOrChildren, children) {
 	const split = tag.split(".");
 	const element = document.createElement(split.shift());
+	if (split.length > 0) {
 		element.classList.add(...split);
+	}
+
 	if (propsOrChildren) {
 		if (Array.isArray(propsOrChildren)) {
 			element.append(...propsOrChildren);
@@ -14,6 +17,10 @@ export function $el(tag, propsOrChildren, children) {
 			delete propsOrChildren.dataset;
 			delete propsOrChildren.style;
 
+			if (Object.hasOwn(propsOrChildren, "for")) {
+				element.setAttribute("for", propsOrChildren.for)
+			}
+
 			if (style) {
 				Object.assign(element.style, style);
 			}
@@ -119,6 +126,7 @@ function dragElement(dragEl, settings) {
 			savePos = value;
 		},
 	});
+
 	function dragMouseDown(e) {
 		e = e || window.event;
 		e.preventDefault();
@@ -193,7 +201,22 @@ export class ComfyDialog {
 class ComfySettingsDialog extends ComfyDialog {
 	constructor() {
 		super();
-		this.element.classList.add("comfy-settings");
+		this.element = $el("dialog", {
+			id: "comfy-settings-dialog",
+			parent: document.body,
+		}, [
+			$el("table.comfy-modal-content.comfy-table", [
+				$el("caption", {textContent: "Settings"}),
+				$el("tbody", {$: (tbody) => (this.textElement = tbody)}),
+				$el("button", {
+					type: "button",
+					textContent: "Close",
+					onclick: () => {
+						this.element.close();
+					},
+				}),
+			]),
+		]);
 		this.settings = [];
 	}
 
@@ -212,11 +235,12 @@ class ComfySettingsDialog extends ComfyDialog {
 		if (!id) {
 			throw new Error("Settings must have an ID");
 		}
+
 		if (this.settings.find((s) => s.id === id)) {
-			throw new Error("Setting IDs must be unique");
+			throw new Error(`Setting ${id} of type ${type} must have a unique ID.`);
 		}
 
-		const settingId = "Comfy.Settings." + id;
+		const settingId = `Comfy.Settings.${id}`;
 		const v = localStorage[settingId];
 		let value = v == null ? defaultValue : JSON.parse(v);
 
@@ -234,34 +258,50 @@ class ComfySettingsDialog extends ComfyDialog {
 					localStorage[settingId] = JSON.stringify(v);
 					value = v;
 				};
+				value = this.getSettingValue(id, defaultValue);
 
 				let element;
-				value = this.getSettingValue(id, defaultValue);
+				const htmlID = id.replaceAll(".", "-");
+
+				const labelCell = $el("td", [
+					$el("label", {
+						for: htmlID,
+						classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
+						textContent: name.endsWith(":") ? name : `${name}:`,
+					})
+				]);
 
 				if (typeof type === "function") {
 					element = type(name, setter, value, attrs);
 				} else {
 					switch (type) {
 						case "boolean":
-							element = $el("div", [
+							element = $el("tr", [
-								$el("label", { textContent: name || id }, [
+								labelCell,
+								$el("td", [
 									$el("input", {
+										id: htmlID,
 										type: "checkbox",
-										checked: !!value,
+										checked: value,
-										oninput: (e) => {
+										onchange: (event) => {
-											setter(e.target.checked);
+											const isChecked = event.target.checked;
+											if (onChange !== undefined) {
+												onChange(isChecked)
+											}
+											this.setSettingValue(id, isChecked);
 										},
-										...attrs
 									}),
 								]),
-							]);
+							])
 							break;
 						case "number":
-							element = $el("div", [
+							element = $el("tr", [
-								$el("label", { textContent: name || id }, [
+								labelCell,
+								$el("td", [
 									$el("input", {
 										type,
 										value,
+										id: htmlID,
 										oninput: (e) => {
 											setter(e.target.value);
 										},
@@ -271,39 +311,55 @@ class ComfySettingsDialog extends ComfyDialog {
 							]);
 							break;
 						case "slider":
-							element = $el("div", [
+							element = $el("tr", [
-								$el("label", { textContent: name }, [
+								labelCell,
+								$el("td", [
+									$el("div", {
+										style: {
+											display: "grid",
+											gridAutoFlow: "column",
+										},
+									}, [
 										$el("input", {
-										type: "range",
+											...attrs,
 											value,
+											type: "range",
 											oninput: (e) => {
 												setter(e.target.value);
 												e.target.nextElementSibling.value = e.target.value;
 											},
-										...attrs
 										}),
 										$el("input", {
-										type: "number",
+											...attrs,
 											value,
+											id: htmlID,
+											type: "number",
+											style: {maxWidth: "4rem"},
 											oninput: (e) => {
 												setter(e.target.value);
 												e.target.previousElementSibling.value = e.target.value;
 											},
-										...attrs
 										}),
 									]),
+								]),
 							]);
 							break;
+						case "text":
 						default:
-							console.warn("Unsupported setting type, defaulting to text");
+							if (type !== "text") {
-							element = $el("div", [
+								console.warn(`Unsupported setting type '${type}, defaulting to text`);
-								$el("label", { textContent: name || id }, [
+							}
+
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
 									$el("input", {
 										value,
+										id: htmlID,
 										oninput: (e) => {
 											setter(e.target.value);
 										},
-										...attrs
+										...attrs,
 									}),
 								]),
 							]);
@@ -330,13 +386,16 @@ class ComfySettingsDialog extends ComfyDialog {
 	}
 
 	show() {
-		super.show();
+		this.textElement.replaceChildren(
-		Object.assign(this.textElement.style, {
+			$el("tr", {
-			display: "flex",
+				style: {display: "none"},
-			flexDirection: "column",
+			}, [
-			gap: "10px"
+				$el("th"),
-		});
+				$el("th", {style: {width: "33%"}})
-		this.textElement.replaceChildren(...this.settings.map((s) => s.render()));
+			]),
+			...this.settings.map((s) => s.render()),
+		)
+		this.element.showModal();
 	}
 }
 
@@ -475,8 +534,8 @@ export class ComfyUI {
 		 */
 		const previewImage = this.settings.addSetting({
 			id: "Comfy.PreviewFormat",
-			name: "When displaying a preview in the image widget, convert it to a lightweight image. (webp, jpeg, webp;50, ...)",
+			name: "When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.",
-			type: "string",
+			type: "text",
 			defaultValue: "",
 		});
 
@@ -492,7 +551,14 @@ export class ComfyUI {
 		});
 
 		this.menuContainer = $el("div.comfy-menu", {parent: document.body}, [
-			$el("div.drag-handle", { style: { overflow: "hidden", position: "relative", width: "100%", cursor: "default" } }, [
+			$el("div.drag-handle", {
+				style: {
+					overflow: "hidden",
+					position: "relative",
+					width: "100%",
+					cursor: "default"
+				}
+			}, [
 				$el("span.drag-handle"),
 				$el("span", {$: (q) => (this.queueSize = q)}),
 				$el("button.comfy-settings-btn", {textContent: "⚙️", onclick: () => this.settings.show()}),
@@ -547,7 +613,11 @@ export class ComfyUI {
 				]),
 			]),
 			$el("div.comfy-menu-btns", [
-				$el("button", { id: "queue-front-button", textContent: "Queue Front", onclick: () => app.queuePrompt(-1, this.batchCount) }),
+				$el("button", {
+					id: "queue-front-button",
+					textContent: "Queue Front",
+					onclick: () => app.queuePrompt(-1, this.batchCount)
+				}),
 				$el("button", {
 					$: (b) => (this.queue.button = b),
 					id: "comfy-view-queue-button",
@@ -598,19 +668,27 @@ export class ComfyUI {
 				},
 			}),
 			$el("button", {id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click()}),
-			$el("button", { id: "comfy-refresh-button", textContent: "Refresh", onclick: () => app.refreshComboInNodes() }),
+			$el("button", {
+				id: "comfy-refresh-button",
+				textContent: "Refresh",
+				onclick: () => app.refreshComboInNodes()
+			}),
 			$el("button", {id: "comfy-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace()}),
-			$el("button", { id: "comfy-clear-button", textContent: "Clear", onclick: () => {
+			$el("button", {
+				id: "comfy-clear-button", textContent: "Clear", onclick: () => {
 					if (!confirmClear.value || confirm("Clear workflow?")) {
 						app.clean();
 						app.graph.clear();
 					}
-			}}),
+				}
-			$el("button", { id: "comfy-load-default-button", textContent: "Load Default", onclick: () => {
+			}),
+			$el("button", {
+				id: "comfy-load-default-button", textContent: "Load Default", onclick: () => {
 					if (!confirmClear.value || confirm("Load default workflow?")) {
 						app.loadGraphData()
 					}
-			}}),
+				}
+			}),
 		]);
 
 		dragElement(this.menuContainer, this.settings);

web/style.css

@@ -8,6 +8,8 @@
 	--drag-text: #ccc;
 	--error-text: #ff4444;
 	--border-color: #4e4e4e;
+	--tr-even-bg-color: #222;
+	--tr-odd-bg-color: #353535;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -246,6 +248,11 @@ button.comfy-queue-btn {
 	font-size: inherit;
 }
 
+.comfy-tooltip-indicator {
+	text-decoration: underline;
+	text-decoration-style: dashed;
+}
+
 @media only screen and (max-height: 850px) {
 	.comfy-menu {
 		top: 0 !important;
@@ -254,6 +261,7 @@ button.comfy-queue-btn {
 		right: 0 !important;
 		border-radius: 0;
 	}
+
 	.comfy-menu span.drag-handle {
 		visibility: hidden
 	}
@@ -287,6 +295,70 @@ button.comfy-queue-btn {
 	border-radius: 12px 0 0 12px;
 }
 
+/* Dialogs */
+
+dialog {
+	box-shadow: 0 0 20px #888888;
+}
+
+dialog::backdrop {
+	background: rgba(0, 0, 0, 0.5);
+}
+
+#comfy-settings-dialog {
+	padding: 0;
+	width: 41rem;
+}
+
+#comfy-settings-dialog tr > td:first-child {
+	text-align: right;
+}
+
+#comfy-settings-dialog button {
+	background-color: var(--bg-color);
+	border: 1px var(--border-color) solid;
+	border-radius: 0;
+	color: var(--input-text);
+	font-size: 1rem;
+	padding: 0.5rem;
+}
+
+#comfy-settings-dialog button:hover {
+	background-color: var(--tr-odd-bg-color);
+}
+
+/* General CSS for tables */
+
+.comfy-table {
+	border-collapse: collapse;
+	color: var(--input-text);
+	font-family: Arial, sans-serif;
+	width: 100%;
+}
+
+.comfy-table caption {
+	background-color: var(--bg-color);
+	color: var(--input-text);
+	font-size: 1rem;
+	font-weight: bold;
+	padding: 8px;
+	text-align: center;
+}
+
+.comfy-table tr:nth-child(even) {
+	background-color: var(--tr-even-bg-color);
+}
+
+.comfy-table tr:nth-child(odd) {
+	background-color: var(--tr-odd-bg-color);
+}
+
+.comfy-table td,
+.comfy-table th {
+	border: 1px solid var(--border-color);
+	padding: 8px;
+}
+
 /* Context menu */
 
 .litegraph .dialog {