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/dialog.js

@@ -1,20 +1,26 @@
 import { $el } from "../ui.js";
 
-export class ComfyDialog {
-	constructor() {
-		this.element = $el("div.comfy-modal", { parent: document.body }, [
+export class ComfyDialog extends EventTarget {
+	#buttons;
+
+	constructor(type = "div", buttons = null) {
+		super();
+		this.#buttons = buttons;
+		this.element = $el(type + ".comfy-modal", { parent: document.body }, [
 			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
 		]);
 	}
 
 	createButtons() {
-		return [
-			$el("button", {
-				type: "button",
-				textContent: "Close",
-				onclick: () => this.close(),
-			}),
-		];
+		return (
+			this.#buttons ?? [
+				$el("button", {
+					type: "button",
+					textContent: "Close",
+					onclick: () => this.close(),
+				}),
+			]
+		);
 	}
 
 	close() {
@@ -25,7 +31,7 @@ export class ComfyDialog {
 		if (typeof html === "string") {
 			this.textElement.innerHTML = html;
 		} else {
-			this.textElement.replaceChildren(html);
+			this.textElement.replaceChildren(...(html instanceof Array ? html : [html]));
 		}
 		this.element.style.display = "flex";
 	}