New Menu & Workflow Management (#3112)

* menu

* wip

* wip

* wip

* wip

* wip

* workflow saving/loading

* Support inserting workflows
Move buttosn to top of lists

* fix session storage
implement renaming

* temp

* refactor, better workflow instance management

* wip

* progress on progress

* added send to workflow
various fixes

* Support multiple image loaders

* Support dynamic size breakpoints based on content

* various fixes
add close unsaved warning

* Add filtering tree

* prevent renaming unsaved

* fix zindex on hover

* fix top offset

* use filename as workflow name

* resize on setting change

* hide element until it is drawn

* remove glow

* Fix export name

* Fix test, revert accidental changes to groupNode

* Fix colors on all themes

* show hover items on smaller screen (mobile)

* remove debugging code

* dialog fix

* Dont reorder open workflows
Allow elements around canvas

* Toggle body display on setting change

* Fix menu disappearing on chrome

* Increase delay when typing, remove margin on Safari, fix dialog location

* Fix overflow issue on iOS

* Add reset view button
Prevent view changes causing history entries

* Bottom menu wip

* Various fixes

* Fix merge

* Fix breaking old menu position

* Fix merge adding restore view to loadGraphData

web/scripts/ui/components/asyncDialog.js

@@ -0,0 +1,64 @@
+import { ComfyDialog } from "../dialog.js";
+import { $el } from "../../ui.js";
+
+export class ComfyAsyncDialog extends ComfyDialog {
+	#resolve;
+
+	constructor(actions) {
+		super(
+			"dialog.comfy-dialog.comfyui-dialog",
+			actions?.map((opt) => {
+				if (typeof opt === "string") {
+					opt = { text: opt };
+				}
+				return $el("button.comfyui-button", {
+					type: "button",
+					textContent: opt.text,
+					onclick: () => this.close(opt.value ?? opt.text),
+				});
+			})
+		);
+	}
+
+	show(html) {
+		this.element.addEventListener("close", () => {
+			this.close();
+		});
+
+		super.show(html);
+
+		return new Promise((resolve) => {
+			this.#resolve = resolve;
+		});
+	}
+
+	showModal(html) {
+		this.element.addEventListener("close", () => {
+			this.close();
+		});
+
+		super.show(html);
+		this.element.showModal();
+
+		return new Promise((resolve) => {
+			this.#resolve = resolve;
+		});
+	}
+
+	close(result = null) {
+		this.#resolve(result);
+		this.element.close();
+		super.close();
+	}
+
+	static async prompt({ title = null, message, actions }) {
+		const dialog = new ComfyAsyncDialog(actions);
+		const content = [$el("span", message)];
+		if (title) {
+			content.unshift($el("h3", title));
+		}
+		const res = await dialog.showModal(content);
+		dialog.element.remove();
+		return res;
+	}
+}