Beautify settings dialog

web/scripts/ui.js

@@ -1,19 +1,26 @@
-import { api } from "./api.js";
+import {api} from "./api.js";
 
 export function $el(tag, propsOrChildren, children) {
 	const split = tag.split(".");
 	const element = document.createElement(split.shift());
-	element.classList.add(...split);
+	if (split.length > 0) {
+		element.classList.add(...split);
+	}
+
 	if (propsOrChildren) {
 		if (Array.isArray(propsOrChildren)) {
 			element.append(...propsOrChildren);
 		} else {
-			const { parent, $: cb, dataset, style } = propsOrChildren;
+			const {parent, $: cb, dataset, style} = propsOrChildren;
 			delete propsOrChildren.parent;
 			delete propsOrChildren.$;
 			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();
@@ -161,8 +169,8 @@ function dragElement(dragEl, settings) {
 
 export class ComfyDialog {
 	constructor() {
-		this.element = $el("div.comfy-modal", { parent: document.body }, [
-			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
+		this.element = $el("div.comfy-modal", {parent: document.body}, [
+			$el("div.comfy-modal-content", [$el("p", {$: (p) => (this.textElement = p)}), ...this.createButtons()]),
 		]);
 	}
 
@@ -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 = [];
 	}
 
@@ -208,15 +231,16 @@ class ComfySettingsDialog extends ComfyDialog {
 		localStorage[settingId] = JSON.stringify(value);
 	}
 
-	addSetting({ id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", }) {
+	addSetting({id, name, type, defaultValue, onChange, attrs = {}, tooltip = "",}) {
 		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", [
-								$el("label", { textContent: name || id }, [
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
 									$el("input", {
+										id: htmlID,
 										type: "checkbox",
-										checked: !!value,
-										oninput: (e) => {
-											setter(e.target.checked);
+										checked: value,
+										onchange: (event) => {
+											const isChecked = event.target.checked;
+											if (onChange !== undefined) {
+												onChange(isChecked)
+											}
+											this.setSettingValue(id, isChecked);
 										},
-										...attrs
 									}),
 								]),
-							]);
+							])
 							break;
 						case "number":
-							element = $el("div", [
-								$el("label", { textContent: name || id }, [
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
 									$el("input", {
 										type,
 										value,
+										id: htmlID,
 										oninput: (e) => {
 											setter(e.target.value);
 										},
@@ -271,46 +311,62 @@ class ComfySettingsDialog extends ComfyDialog {
 							]);
 							break;
 						case "slider":
-							element = $el("div", [
-								$el("label", { textContent: name }, [
-									$el("input", {
-										type: "range",
-										value,
-										oninput: (e) => {
-											setter(e.target.value);
-											e.target.nextElementSibling.value = e.target.value;
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
+									$el("div", {
+										style: {
+											display: "grid",
+											gridAutoFlow: "column",
 										},
-										...attrs
-									}),
-									$el("input", {
-										type: "number",
-										value,
-										oninput: (e) => {
-											setter(e.target.value);
-											e.target.previousElementSibling.value = e.target.value;
-										},
-										...attrs
-									}),
+									}, [
+										$el("input", {
+											...attrs,
+											value,
+											type: "range",
+											oninput: (e) => {
+												setter(e.target.value);
+												e.target.nextElementSibling.value = e.target.value;
+											},
+										}),
+										$el("input", {
+											...attrs,
+											value,
+											id: htmlID,
+											type: "number",
+											style: {maxWidth: "4rem"},
+											oninput: (e) => {
+												setter(e.target.value);
+												e.target.previousElementSibling.value = e.target.value;
+											},
+										}),
+									]),
 								]),
 							]);
 							break;
+						case "text":
 						default:
-							console.warn("Unsupported setting type, defaulting to text");
-							element = $el("div", [
-								$el("label", { textContent: name || id }, [
+							if (type !== "text") {
+								console.warn(`Unsupported setting type '${type}, defaulting to text`);
+							}
+
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
 									$el("input", {
 										value,
+										id: htmlID,
 										oninput: (e) => {
 											setter(e.target.value);
 										},
-										...attrs
+										...attrs,
 									}),
 								]),
 							]);
 							break;
 					}
 				}
-				if(tooltip) {
+				if (tooltip) {
 					element.title = tooltip;
 				}
 
@@ -330,13 +386,16 @@ class ComfySettingsDialog extends ComfyDialog {
 	}
 
 	show() {
-		super.show();
-		Object.assign(this.textElement.style, {
-			display: "flex",
-			flexDirection: "column",
-			gap: "10px"
-		});
-		this.textElement.replaceChildren(...this.settings.map((s) => s.render()));
+		this.textElement.replaceChildren(
+			$el("tr", {
+				style: {display: "none"},
+			}, [
+				$el("th"),
+				$el("th", {style: {width: "33%"}})
+			]),
+			...this.settings.map((s) => s.render()),
+		)
+		this.element.showModal();
 	}
 }
 
@@ -369,7 +428,7 @@ class ComfyList {
 							name: "Delete",
 							cb: () => api.deleteItem(this.#type, item.prompt[1]),
 						};
-						return $el("div", { textContent: item.prompt[0] + ": " }, [
+						return $el("div", {textContent: item.prompt[0] + ": "}, [
 							$el("button", {
 								textContent: "Load",
 								onclick: () => {
@@ -398,7 +457,7 @@ class ComfyList {
 						await this.load();
 					},
 				}),
-				$el("button", { textContent: "Refresh", onclick: () => this.load() }),
+				$el("button", {textContent: "Refresh", onclick: () => this.load()}),
 			])
 		);
 	}
@@ -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, ...)",
-			type: "string",
+			name: "When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.",
+			type: "text",
 			defaultValue: "",
 		});
 
@@ -484,18 +543,25 @@ export class ComfyUI {
 			id: "comfy-file-input",
 			type: "file",
 			accept: ".json,image/png,.latent",
-			style: { display: "none" },
+			style: {display: "none"},
 			parent: document.body,
 			onchange: () => {
 				app.handleFile(fileInput.files[0]);
 			},
 		});
 
-		this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
-			$el("div.drag-handle", { style: { overflow: "hidden", position: "relative", width: "100%", cursor: "default" } }, [
+		this.menuContainer = $el("div.comfy-menu", {parent: document.body}, [
+			$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() }),
+				$el("span", {$: (q) => (this.queueSize = q)}),
+				$el("button.comfy-settings-btn", {textContent: "⚙️", onclick: () => this.settings.show()}),
 			]),
 			$el("button.comfy-queue-btn", {
 				id: "queue-button",
@@ -503,7 +569,7 @@ export class ComfyUI {
 				onclick: () => app.queuePrompt(0, this.batchCount),
 			}),
 			$el("div", {}, [
-				$el("label", { innerHTML: "Extra options" }, [
+				$el("label", {innerHTML: "Extra options"}, [
 					$el("input", {
 						type: "checkbox",
 						onchange: (i) => {
@@ -514,14 +580,14 @@ export class ComfyUI {
 					}),
 				]),
 			]),
-			$el("div", { id: "extraOptions", style: { width: "100%", display: "none" } }, [
-				$el("label", { innerHTML: "Batch count" }, [
+			$el("div", {id: "extraOptions", style: {width: "100%", display: "none"}}, [
+				$el("label", {innerHTML: "Batch count"}, [
 					$el("input", {
 						id: "batchCountInputNumber",
 						type: "number",
 						value: this.batchCount,
 						min: "1",
-						style: { width: "35%", "margin-left": "0.4em" },
+						style: {width: "35%", "margin-left": "0.4em"},
 						oninput: (i) => {
 							this.batchCount = i.target.value;
 							document.getElementById("batchCountInputRange").value = this.batchCount;
@@ -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",
@@ -582,12 +652,12 @@ export class ComfyUI {
 						}
 					}
 					const json = JSON.stringify(app.graph.serialize(), null, 2); // convert the data to a JSON string
-					const blob = new Blob([json], { type: "application/json" });
+					const blob = new Blob([json], {type: "application/json"});
 					const url = URL.createObjectURL(blob);
 					const a = $el("a", {
 						href: url,
 						download: filename,
-						style: { display: "none" },
+						style: {display: "none"},
 						parent: document.body,
 					});
 					a.click();
@@ -597,25 +667,33 @@ export class ComfyUI {
 					}, 0);
 				},
 			}),
-			$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-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace() }),
-			$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-button", textContent: "Load", onclick: () => fileInput.click()}),
+			$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: () => {
+					if (!confirmClear.value || confirm("Clear workflow?")) {
+						app.clean();
+						app.graph.clear();
+					}
 				}
-			}}),
-			$el("button", { id: "comfy-load-default-button", textContent: "Load Default", onclick: () => {
-				if (!confirmClear.value || confirm("Load default workflow?")) {
-					app.loadGraphData()
+			}),
+			$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);
 
-		this.setStatus({ exec_info: { queue_remaining: "X" } });
+		this.setStatus({exec_info: {queue_remaining: "X"}});
 	}
 
 	setStatus(status) {