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

@@ -0,0 +1,56 @@
+/**
+ * @typedef {  string | string[] | Record<string, boolean> } ClassList
+ */
+
+/**
+ * @param { HTMLElement } element
+ * @param { ClassList } classList
+ * @param { string[] } requiredClasses
+ */
+export function applyClasses(element, classList, ...requiredClasses) {
+	classList ??= "";
+
+	let str;
+	if (typeof classList === "string") {
+		str = classList;
+	} else if (classList instanceof Array) {
+		str = classList.join(" ");
+	} else {
+		str = Object.entries(classList).reduce((p, c) => {
+			if (c[1]) {
+				p += (p.length ? " " : "") + c[0];
+			}
+			return p;
+		}, "");
+	}
+	element.className = str;
+	if (requiredClasses) {
+		element.classList.add(...requiredClasses);
+	}
+}
+
+/**
+ * @param { HTMLElement } element
+ * @param { { onHide?: (el: HTMLElement) => void, onShow?: (el: HTMLElement, value) => void } } [param1]
+ * @returns
+ */
+export function toggleElement(element, { onHide, onShow } = {}) {
+	let placeholder;
+	let hidden;
+	return (value) => {
+		if (value) {
+			if (hidden) {
+				hidden = false;
+				placeholder.replaceWith(element);
+			}
+			onShow?.(element, value);
+		} else {
+			if (!placeholder) {
+				placeholder = document.createComment("");
+			}
+			hidden = true;
+			element.replaceWith(placeholder);
+			onHide?.(element);
+		}
+	};
+}