Port frontend from Vue to Svelte (WIP in separate folder, many bugs) (#964)

* Make `tauri build` just work

* Move folder: frontend/wasm -> wasm

* Create SvelteKit project with 'npx create-svelte'

* Move wasm-communication into seperate npm package

* Use wasm-pack directly and pack package.json

* Got it to work

* Add primitive build script for wasm npm module

* Fix wasm build script (python)

* Clean up glue code

* Rewrite wasm build script in node.js

* Add serde-reflection to trace types

* Add traced types

* Generate typescript (.d.ts) from Rust types

* Update .d.ts

* Finalize TS types

* Add script to update .d.ts

* Add watch command to build wasm-bindgen

* Make wasm work again

* Add sass; fix build script for windows

* Describe requirement for wasm-pack

* Add license

* Copy and reorganize vue components

* translate LayoutCol.vue

* Split app.scss into pieces

* Translate LayoutRow.svelte

* Rename scss files

* Fix compile issues on Windows

* WIP port TitleBar

* Support classes for LayoutCol/Row

* Restructure based on Vue codebase

* Port all components in window folder

* Port FloatingMenu

* Port Document panel component

* Update readme after folder move

* Update typegen: print discriminant by default

* Update typegen: Merge from branch 'tailwind' 4f14fedb

Fixes bigint & bytes

* Made Vue/webpack/eslint to accept wasm package at new location

This is quite a hack.

Those two packages are both named the same. Yes, it's an npm package inside another npm package.

- frontend/src/wasm-communication/
- frontend-svelte/glue/

'wasm/pkg/index.js' imports the correct one registered when linking.

* Port LayerTree

* Port NodeGraph

* Port Properties

* Port components in /floating-menus

* Finish porting all Vue -> Svelte components

* Change import prefix

* Revert type generation

* Revert moved wasm folder

* Revert all of @locriacyber's work on this branch

- Remove Vite and restore Webpack
- Remove SvelteKit
- Remove everything except the components I ported to Svelte
- Restore all frontend files from Vue code, now altered for Svelte

* Convert Vue's 'reactive' and 'provide' to Svelte's stores and contexts

* Fix event emitting and bi-di data flow

* Undo removal of 'update:' events

* Fix 'update:' event dispatching

* Fix usage in parent of bi-di component props

* Fix component typing, more progress towards no errors

* The page builds and opens!

* Add loading spinner and remove postcss dependency

* Make the basics of document editing work

* Fix rebase history

Co-authored-by: Locria Cyber <74560659+locriacyber@users.noreply.github.com>

frontend-svelte/src/state-providers/dialog.ts

@@ -0,0 +1,60 @@
+import {writable} from "svelte/store";
+
+import { type IconName } from "@/utility-functions/icons";
+import { type Editor } from "@/wasm-communication/editor";
+import { type TextButtonWidget, type WidgetLayout, defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, patchWidgetLayout } from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createDialogState(editor: Editor) {
+	const { subscribe, update } = writable({
+		visible: false,
+		icon: "" as IconName,
+		widgets: defaultWidgetLayout(),
+		// Special case for the crash dialog because we cannot handle button widget callbacks from Rust once the editor instance has panicked
+		jsCallbackBasedButtons: undefined as undefined | TextButtonWidget[],
+	});
+
+	function dismissDialog(): void {
+		update((state) => {
+			state.visible = false;
+			return state;
+		});
+	}
+
+	// Creates a panic dialog from JS.
+	// Normal dialogs are created in the Rust backend, but for the crash dialog, the editor instance has panicked so it cannot respond to widget callbacks.
+	function createPanicDialog(icon: IconName, widgets: WidgetLayout, jsCallbackBasedButtons: TextButtonWidget[]): void {
+		update((state) => {
+			state.visible = true;
+			state.icon = icon;
+			state.widgets = widgets;
+			state.jsCallbackBasedButtons = jsCallbackBasedButtons;
+			return state;
+		});
+	}
+
+	// Subscribe to process backend events
+	editor.subscriptions.subscribeJsMessage(DisplayDialog, (displayDialog) => {
+		update((state) => {
+			state.visible = true;
+			state.icon = displayDialog.icon;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateDialogDetails, (updateDialogDetails) => {
+		update((state) => {
+			patchWidgetLayout(state.widgets, updateDialogDetails);
+
+			state.jsCallbackBasedButtons = undefined;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(DisplayDialogDismiss, dismissDialog);
+
+	return {
+		subscribe,
+		dismissDialog,
+		createPanicDialog,
+	};
+}
+export type DialogState = ReturnType<typeof createDialogState>;

frontend-svelte/src/state-providers/document.ts

@@ -0,0 +1,88 @@
+import {tick} from "svelte";
+import {writable} from "svelte/store";
+
+import { type Editor } from "@/wasm-communication/editor";
+import {
+	defaultWidgetLayout,
+	patchWidgetLayout,
+	TriggerRefreshBoundsOfViewports,
+	UpdateDocumentBarLayout,
+	UpdateDocumentModeLayout,
+	UpdateToolOptionsLayout,
+	UpdateToolShelfLayout,
+	UpdateWorkingColorsLayout,
+} from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createDocumentState(editor: Editor) {
+	const state = writable({
+		// Layouts
+		documentModeLayout: defaultWidgetLayout(),
+		toolOptionsLayout: defaultWidgetLayout(),
+		documentBarLayout: defaultWidgetLayout(),
+		toolShelfLayout: defaultWidgetLayout(),
+		workingColorsLayout: defaultWidgetLayout(),
+	});
+	const { subscribe, update } = state;
+
+	// Update layouts
+	editor.subscriptions.subscribeJsMessage(UpdateDocumentModeLayout, async (updateDocumentModeLayout) => {
+		await tick();
+		
+		update((state) => {
+			// `state.documentModeLayout` is mutated in the function
+			patchWidgetLayout(state.documentModeLayout, updateDocumentModeLayout);
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateToolOptionsLayout, async (updateToolOptionsLayout) => {
+		await tick();
+		
+		update((state) => {
+			// `state.documentModeLayout` is mutated in the function
+			patchWidgetLayout(state.toolOptionsLayout, updateToolOptionsLayout);
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateDocumentBarLayout, async (updateDocumentBarLayout) => {
+		await tick();
+		
+		update((state) => {
+			// `state.documentModeLayout` is mutated in the function
+			patchWidgetLayout(state.documentBarLayout, updateDocumentBarLayout);
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateToolShelfLayout, async (updateToolShelfLayout) => {
+		await tick();
+		
+		update((state) => {
+			// `state.documentModeLayout` is mutated in the function
+			patchWidgetLayout(state.toolShelfLayout, updateToolShelfLayout);
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateWorkingColorsLayout, async (updateWorkingColorsLayout) => {
+		await tick();
+		
+		update((state) => {
+			// `state.documentModeLayout` is mutated in the function
+			patchWidgetLayout(state.workingColorsLayout, updateWorkingColorsLayout);
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerRefreshBoundsOfViewports, async () => {
+		// Wait to display the unpopulated document panel (missing: tools, options bar content, scrollbar positioning, and canvas)
+		await tick();
+		// Wait to display the populated document panel
+		await tick();
+
+		// Request a resize event so the viewport gets measured now that the canvas is populated and positioned correctly
+		window.dispatchEvent(new CustomEvent("resize"));
+	});
+
+	return {
+		subscribe,
+	};
+}
+export type DocumentState = ReturnType<typeof createDocumentState>;

frontend-svelte/src/state-providers/fonts.ts

@@ -0,0 +1,100 @@
+import { writable } from "svelte/store";
+
+import { type Editor } from "@/wasm-communication/editor";
+import { TriggerFontLoad } from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createFontsState(editor: Editor) {
+	// TODO: Svelte: refactor to remove the need for this empty store
+	const { subscribe } = writable({});
+
+	function createURL(font: string): URL {
+		const url = new URL("https://fonts.googleapis.com/css2");
+		url.searchParams.set("display", "swap");
+		url.searchParams.set("family", font);
+		url.searchParams.set("text", font);
+		return url;
+	}
+
+	async function fontNames(): Promise<{ name: string; url: URL | undefined }[]> {
+		return (await fontList).map((font) => ({ name: font.family, url: createURL(font.family) }));
+	}
+
+	async function getFontStyles(fontFamily: string): Promise<{ name: string; url: URL | undefined }[]> {
+		const font = (await fontList).find((value) => value.family === fontFamily);
+		return font?.variants.map((variant) => ({ name: variant, url: undefined })) || [];
+	}
+
+	async function getFontFileUrl(fontFamily: string, fontStyle: string): Promise<string | undefined> {
+		const font = (await fontList).find((value) => value.family === fontFamily);
+		const fontFileUrl = font?.files.get(fontStyle);
+		return fontFileUrl?.replace("http://", "https://");
+	}
+
+	function formatFontStyleName(fontStyle: string): string {
+		const isItalic = fontStyle.endsWith("italic");
+		const weight = fontStyle === "regular" || fontStyle === "italic" ? 400 : parseInt(fontStyle, 10);
+		let weightName = "";
+
+		let bestWeight = Infinity;
+		weightNameMapping.forEach((nameChecking, weightChecking) => {
+			if (Math.abs(weightChecking - weight) < bestWeight) {
+				bestWeight = Math.abs(weightChecking - weight);
+				weightName = nameChecking;
+			}
+		});
+
+		return `${weightName}${isItalic ? " Italic" : ""} (${weight})`;
+	}
+
+	// Subscribe to process backend events
+	editor.subscriptions.subscribeJsMessage(TriggerFontLoad, async (triggerFontLoad) => {
+		const url = await getFontFileUrl(triggerFontLoad.font.fontFamily, triggerFontLoad.font.fontStyle);
+		if (url) {
+			const response = await (await fetch(url)).arrayBuffer();
+			editor.instance.onFontLoad(triggerFontLoad.font.fontFamily, triggerFontLoad.font.fontStyle, url, new Uint8Array(response), triggerFontLoad.isDefault);
+		} else {
+			editor.instance.errorDialog("Failed to load font", `The font ${triggerFontLoad.font.fontFamily} with style ${triggerFontLoad.font.fontStyle} does not exist`);
+		}
+	});
+
+	const fontList = new Promise<{ family: string; variants: string[]; files: Map<string, string> }[]>((resolve) => {
+		fetch(fontListAPI)
+			.then((response) => response.json())
+			.then((fontListResponse) => {
+				const fontListData = fontListResponse.items as { family: string; variants: string[]; files: Record<string, string> }[];
+				const result = fontListData.map((font) => {
+					const { family } = font;
+					const variants = font.variants.map(formatFontStyleName);
+					const files = new Map(font.variants.map((x) => [formatFontStyleName(x), font.files[x]]));
+					return { family, variants, files };
+				});
+
+				resolve(result);
+			});
+	});
+
+	return {
+		subscribe,
+		fontNames,
+		getFontStyles,
+		getFontFileUrl,
+	};
+}
+export type FontsState = ReturnType<typeof createFontsState>;
+
+const fontListAPI = "https://api.graphite.rs/font-list";
+
+// From https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping
+const weightNameMapping = new Map([
+	[100, "Thin"],
+	[200, "Extra Light"],
+	[300, "Light"],
+	[400, "Normal"],
+	[500, "Medium"],
+	[600, "Semi Bold"],
+	[700, "Bold"],
+	[800, "Extra Bold"],
+	[900, "Black"],
+	[950, "Extra Black"],
+]);

frontend-svelte/src/state-providers/fullscreen.ts

@@ -0,0 +1,62 @@
+import {writable} from "svelte/store";
+
+import { type Editor } from "@/wasm-communication/editor";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createFullscreenState(_: Editor) {
+	const { subscribe, update } = writable({
+		windowFullscreen: false,
+		keyboardLocked: false,
+	});
+
+	function fullscreenModeChanged(): void {
+		update((state) => {
+			state.windowFullscreen = Boolean(document.fullscreenElement);
+			if (!state.windowFullscreen) state.keyboardLocked = false;
+			return state;
+		});
+	}
+
+	async function enterFullscreen(): Promise<void> {
+		await document.documentElement.requestFullscreen();
+
+		if (keyboardLockApiSupported) {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			await (navigator as any).keyboard.lock(["ControlLeft", "ControlRight"]);
+
+			update((state) => {
+				state.keyboardLocked = true;
+				return state;
+			});
+		}
+	}
+
+	async function exitFullscreen(): Promise<void> {
+		await document.exitFullscreen();
+	}
+
+	async function toggleFullscreen(): Promise<void> {
+		return new Promise((resolve, reject) => {
+			update((state) => {
+				if (state.windowFullscreen) exitFullscreen().then(resolve).catch(reject);
+				else enterFullscreen().then(resolve).catch(reject);
+
+				return state;
+			});
+		});
+	}
+
+	// Experimental Keyboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/keyboard
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const keyboardLockApiSupported: Readonly<boolean> = "keyboard" in navigator && (navigator as any).keyboard && "lock" in (navigator as any).keyboard;
+
+	return {
+		subscribe,
+		fullscreenModeChanged,
+		enterFullscreen,
+		exitFullscreen,
+		toggleFullscreen,
+		keyboardLockApiSupported,
+	};
+}
+export type FullscreenState = ReturnType<typeof createFullscreenState>;

frontend-svelte/src/state-providers/node-graph.ts

@@ -0,0 +1,50 @@
+import {tick} from "svelte";
+import {writable} from "svelte/store";
+
+import { type Editor } from "@/wasm-communication/editor";
+import {
+	type FrontendNode,
+	type FrontendNodeLink,
+	type FrontendNodeType,
+	UpdateNodeGraph,
+	UpdateNodeTypes,
+	UpdateNodeGraphBarLayout,
+	defaultWidgetLayout,
+	patchWidgetLayout,
+} from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createNodeGraphState(editor: Editor) {
+	const { subscribe, update } = writable({
+		nodes: [] as FrontendNode[],
+		links: [] as FrontendNodeLink[],
+		nodeTypes: [] as FrontendNodeType[],
+		nodeGraphBarLayout: defaultWidgetLayout(),
+	});
+
+	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraph, (updateNodeGraph) => {
+		update((state) => {
+			state.nodes = updateNodeGraph.nodes;
+			state.links = updateNodeGraph.links;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateNodeTypes, (updateNodeTypes) => {
+		update((state) => {
+			state.nodeTypes = updateNodeTypes.nodeTypes;
+			return state;
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphBarLayout, (updateNodeGraphBarLayout) => {
+		update((state) => {
+			patchWidgetLayout(state.nodeGraphBarLayout, updateNodeGraphBarLayout);
+			return state;
+		});
+	});
+
+	return {
+		subscribe,
+	};
+}
+export type NodeGraphState = ReturnType<typeof createNodeGraphState>;

frontend-svelte/src/state-providers/portfolio.ts

@@ -0,0 +1,134 @@
+/* eslint-disable max-classes-per-file */
+
+import {writable} from "svelte/store";
+
+import { downloadFileText, downloadFileBlob, upload } from "@/utility-functions/files";
+import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, updateBackendImage } from "@/utility-functions/imaginate";
+import { rasterizeSVG, rasterizeSVGCanvas } from "@/utility-functions/rasterization";
+import { type Editor } from "@/wasm-communication/editor";
+import {
+	type FrontendDocumentDetails,
+	TriggerFileDownload,
+	TriggerImport,
+	TriggerOpenDocument,
+	TriggerRasterDownload,
+	TriggerImaginateGenerate,
+	TriggerImaginateTerminate,
+	TriggerImaginateCheckServerStatus,
+	TriggerNodeGraphFrameGenerate,
+	UpdateActiveDocument,
+	UpdateOpenDocumentsList,
+	UpdateImageData,
+	TriggerRevokeBlobUrl,
+} from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createPortfolioState(editor: Editor) {
+	const { subscribe, update } = writable({
+		unsaved: false,
+		documents: [] as FrontendDocumentDetails[],
+		activeDocumentIndex: 0,
+	});
+
+	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeJsMessage(UpdateOpenDocumentsList, (updateOpenDocumentList) => {
+		update((state) => {
+			state.documents = updateOpenDocumentList.openDocuments;
+			return state;
+		})
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateActiveDocument, (updateActiveDocument) => {
+		update((state) => {
+			// Assume we receive a correct document id
+			const activeId = state.documents.findIndex((doc) => doc.id === updateActiveDocument.documentId);
+			state.activeDocumentIndex = activeId;
+			return state;
+		})
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerOpenDocument, async () => {
+		const extension = editor.instance.fileSaveSuffix();
+		const data = await upload(extension, "text");
+		editor.instance.openDocumentFile(data.filename, data.content);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerImport, async () => {
+		const data = await upload("image/*", "data");
+		editor.instance.pasteImage(data.type, Uint8Array.from(data.content));
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerFileDownload, (triggerFileDownload) => {
+		downloadFileText(triggerFileDownload.name, triggerFileDownload.document);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerRasterDownload, async (triggerRasterDownload) => {
+		const { svg, name, mime, size } = triggerRasterDownload;
+
+		// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)
+		const backgroundColor = mime.endsWith("jpeg") ? "white" : undefined;
+
+		// Rasterize the SVG to an image file
+		const blob = await rasterizeSVG(svg, size.x, size.y, mime, backgroundColor);
+
+		// Have the browser download the file to the user's disk
+		downloadFileBlob(name, blob);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerImaginateCheckServerStatus, async (triggerImaginateCheckServerStatus) => {
+		const { hostname } = triggerImaginateCheckServerStatus;
+
+		imaginateCheckConnection(hostname, editor);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerImaginateGenerate, async (triggerImaginateGenerate) => {
+		const { documentId, layerPath, nodePath, hostname, refreshFrequency, baseImage, maskImage, maskPaintMode, maskBlurPx, maskFillContent, parameters } = triggerImaginateGenerate;
+
+		// Handle img2img mode
+		let image: Blob | undefined;
+		if (parameters.denoisingStrength !== undefined && baseImage !== undefined) {
+			const buffer = new Uint8Array(baseImage.imageData.values()).buffer;
+
+			image = new Blob([buffer], { type: baseImage.mime });
+			updateBackendImage(editor, image, documentId, layerPath, nodePath);
+		}
+
+		// Handle layer mask
+		let mask: Blob | undefined;
+		if (maskImage !== undefined) {
+			// Rasterize the SVG to an image file
+			mask = await rasterizeSVG(maskImage.svg, maskImage.size[0], maskImage.size[1], "image/png");
+		}
+
+		imaginateGenerate(parameters, image, mask, maskPaintMode, maskBlurPx, maskFillContent, hostname, refreshFrequency, documentId, layerPath, nodePath, editor);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerImaginateTerminate, async (triggerImaginateTerminate) => {
+		const { documentId, layerPath, nodePath, hostname } = triggerImaginateTerminate;
+
+		imaginateTerminate(hostname, documentId, layerPath, nodePath, editor);
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateImageData, (updateImageData) => {
+		updateImageData.imageData.forEach(async (element) => {
+			const buffer = new Uint8Array(element.imageData.values()).buffer;
+			const blob = new Blob([buffer], { type: element.mime });
+
+			const blobURL = URL.createObjectURL(blob);
+
+			// Pre-decode the image so it is ready to be drawn instantly once it's placed into the viewport SVG
+			const image = new Image();
+			image.src = blobURL;
+			await image.decode();
+
+			editor.instance.setImageBlobURL(updateImageData.documentId, element.path, blobURL, image.naturalWidth, image.naturalHeight);
+		});
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerNodeGraphFrameGenerate, async (triggerNodeGraphFrameGenerate) => {
+		const { documentId, layerPath, svg, size, imaginateNode } = triggerNodeGraphFrameGenerate;
+
+		// Rasterize the SVG to an image file
+		const imageData = (await rasterizeSVGCanvas(svg, size[0], size[1])).getContext("2d")?.getImageData(0, 0, size[0], size[1]);
+
+		if (imageData) editor.instance.processNodeGraphFrame(documentId, layerPath, new Uint8Array(imageData.data), imageData.width, imageData.height, imaginateNode);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerRevokeBlobUrl, async (triggerRevokeBlobUrl) => {
+		URL.revokeObjectURL(triggerRevokeBlobUrl.url);
+	});
+
+	return {
+		subscribe,
+	};
+}
+export type PortfolioState = ReturnType<typeof createPortfolioState>;

frontend-svelte/src/state-providers/workspace.ts

@@ -0,0 +1,31 @@
+/* eslint-disable max-classes-per-file */
+
+import {tick} from "svelte";
+import {writable} from "svelte/store";
+
+import { type Editor } from "@/wasm-communication/editor";
+import { UpdateNodeGraphVisibility } from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createWorkspaceState(editor: Editor) {
+	const { subscribe, update } = writable({
+		nodeGraphVisible: false,
+	});
+
+	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeJsMessage(UpdateNodeGraphVisibility, async (updateNodeGraphVisibility) => {
+		update((state) => {
+			state.nodeGraphVisible = updateNodeGraphVisibility.visible;
+			return state;
+		});
+		
+		// Update the viewport bounds
+		await tick();
+		window.dispatchEvent(new Event("resize"));
+	});
+
+	return {
+		subscribe,
+	};
+}
+export type WorkspaceState = ReturnType<typeof createWorkspaceState>;