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

@@ -1,4 +1,5 @@
 import { $el } from "./ui.js";
+import { api } from "./api.js";
 
 // Simple date formatter
 const parts = {
@@ -25,6 +26,19 @@ function formatDate(text, date) {
 	});
 }
 
+
+export function clone(obj) {
+	try {
+		if (typeof structuredClone !== "undefined") {
+			return structuredClone(obj);
+		}
+	} catch (error) {
+		// structuredClone is stricter than using JSON.parse/stringify so fallback to that
+	}
+
+	return JSON.parse(JSON.stringify(obj));
+}
+
 export function applyTextReplacements(app, value) {
 	return value.replace(/%([^%]+)%/g, function (match, text) {
 		const split = text.split(".");
@@ -86,3 +100,57 @@ export async function addStylesheet(urlOrFile, relativeTo) {
 		});
 	});
 }
+
+/**
+ * @param { string } filename
+ * @param { Blob } blob
+ */
+export function downloadBlob(filename, blob) {
+	const url = URL.createObjectURL(blob);
+	const a = $el("a", {
+		href: url,
+		download: filename,
+		style: { display: "none" },
+		parent: document.body,
+	});
+	a.click();
+	setTimeout(function () {
+		a.remove();
+		window.URL.revokeObjectURL(url);
+	}, 0);
+}
+
+/**
+ * @template T
+ * @param {string} name
+ * @param {T} [defaultValue]
+ * @param {(currentValue: any, previousValue: any)=>void} [onChanged]
+ * @returns {T}
+ */
+export function prop(target, name, defaultValue, onChanged) {
+	let currentValue;
+	Object.defineProperty(target, name, {
+		get() {
+			return currentValue;
+		},
+		set(newValue) {
+			const prevValue = currentValue;
+			currentValue = newValue;
+			onChanged?.(currentValue, prevValue, target, name);
+		},
+	});
+	return defaultValue;
+}
+
+export function getStorageValue(id) {
+	const clientId = api.clientId ?? api.initialClientId;
+	return (clientId && sessionStorage.getItem(`${id}:${clientId}`)) ?? localStorage.getItem(id);
+}
+
+export function setStorageValue(id, value) {
+	const clientId = api.clientId ?? api.initialClientId;
+	if (clientId) {
+		sessionStorage.setItem(`${id}:${clientId}`, value);
+	}
+	localStorage.setItem(id, value);
+}