Vue initialization and FloatingMenu codebase refactoring and cleanup (#649)

* Clean up Vue initialization-related code * Rename folder: dispatcher -> interop * Rename folder: state -> providers * Comments and clarification * Rename JS dispatcher to subscription router * Assorted cleanup and renaming * Rename: js-messages.ts -> messages.ts * Comments * Remove unused Vue component injects * Clean up coming soon and add warning about freezing the app * Further cleanup * Dangerous changes * Simplify App.vue code * Move more disparate init code from components into managers * Rename folder: providers -> state-providers * Other * Move Document panel options bar separator to backend * Add destructors to managers to fix HMR * Comments and code style * Rename variable: font -> font_file_url * Fix async font loading; refactor janky floating menu openness and min-width measurement; fix Vetur errors * Fix misaligned canvas in viewport until panning on page (re)load * Add Vue bidirectional props documentation * More folder renaming for better terminology; add some documentation
2026-10-02 23:18:11 +08:00 · 2022-05-21 19:46:15 -07:00
parent 4c3c925c2c
commit fc2d983bd7
73 changed files with 1572 additions and 1462 deletions
@@ -0,0 +1,71 @@
+/* eslint-disable max-classes-per-file */
+import { reactive, readonly } from "vue";
+
+import { download, downloadBlob, upload } from "@/utility-functions/files";
+import { Editor } from "@/wasm-communication/editor";
+import { TriggerFileDownload, TriggerRasterDownload, FrontendDocumentDetails, TriggerFileUpload, UpdateActiveDocument, UpdateOpenDocumentsList } from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createPortfolioState(editor: Editor) {
+	const state = reactive({
+		unsaved: false,
+		documents: [] as FrontendDocumentDetails[],
+		activeDocumentIndex: 0,
+	});
+
+	// Set up message subscriptions on creation
+	editor.subscriptions.subscribeJsMessage(UpdateOpenDocumentsList, (updateOpenDocumentList) => {
+		state.documents = updateOpenDocumentList.open_documents;
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateActiveDocument, (updateActiveDocument) => {
+		// Assume we receive a correct document id
+		const activeId = state.documents.findIndex((doc) => doc.id === updateActiveDocument.document_id);
+		state.activeDocumentIndex = activeId;
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerFileUpload, async () => {
+		const extension = editor.raw.file_save_suffix();
+		const data = await upload(extension);
+		editor.instance.open_document_file(data.filename, data.content);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerFileDownload, (triggerFileDownload) => {
+		download(triggerFileDownload.name, triggerFileDownload.document);
+	});
+	editor.subscriptions.subscribeJsMessage(TriggerRasterDownload, (triggerRasterDownload) => {
+		// A canvas to render our svg to in order to get a raster image
+		// https://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser
+		const canvas = document.createElement("canvas");
+		canvas.width = triggerRasterDownload.size.x;
+		canvas.height = triggerRasterDownload.size.y;
+		const context = canvas.getContext("2d");
+		if (!context) return;
+
+		// Fill the canvas with white if jpeg (does not support transparency and defaults to black)
+		if (triggerRasterDownload.mime.endsWith("jpg")) {
+			context.fillStyle = "white";
+			context.fillRect(0, 0, triggerRasterDownload.size.x, triggerRasterDownload.size.y);
+		}
+
+		// Create a blob url for our svg
+		const img = new Image();
+		const svgBlob = new Blob([triggerRasterDownload.document], { type: "image/svg+xml;charset=utf-8" });
+		const url = URL.createObjectURL(svgBlob);
+		img.onload = (): void => {
+			// Draw our svg to the canvas
+			context?.drawImage(img, 0, 0, triggerRasterDownload.size.x, triggerRasterDownload.size.y);
+
+			// Convert the canvas to an image of the correct mime
+			const imgURI = canvas.toDataURL(triggerRasterDownload.mime);
+			// Download our canvas
+			downloadBlob(imgURI, triggerRasterDownload.name);
+
+			// Cleanup resources
+			URL.revokeObjectURL(url);
+		};
+		img.src = url;
+	});
+
+	return {
+		state: readonly(state) as typeof state,
+	};
+}
+export type PortfolioState = ReturnType<typeof createPortfolioState>;