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-01 11:48:12 +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,53 @@
+import { reactive, readonly } from "vue";
+
+import { TextButtonWidget } from "@/components/widgets/buttons/TextButton";
+import { IconName } from "@/utility-functions/icons";
+import { Editor } from "@/wasm-communication/editor";
+import { defaultWidgetLayout, DisplayDialog, DisplayDialogDismiss, UpdateDialogDetails, WidgetLayout } from "@/wasm-communication/messages";
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function createDialogState(editor: Editor) {
+	const state = reactive({
+		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 {
+		state.visible = false;
+	}
+
+	function dialogIsVisible(): boolean {
+		return state.visible;
+	}
+
+	// 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 {
+		state.visible = true;
+		state.icon = icon;
+		state.widgets = widgets;
+		state.jsCallbackBasedButtons = jsCallbackBasedButtons;
+	}
+
+	// Subscribe to process backend events
+	editor.subscriptions.subscribeJsMessage(DisplayDialog, (displayDialog) => {
+		state.visible = true;
+		state.icon = displayDialog.icon;
+	});
+	editor.subscriptions.subscribeJsMessage(UpdateDialogDetails, (updateDialogDetails) => {
+		state.widgets = updateDialogDetails;
+		state.jsCallbackBasedButtons = undefined;
+	});
+	editor.subscriptions.subscribeJsMessage(DisplayDialogDismiss, dismissDialog);
+
+	return {
+		state: readonly(state) as typeof state,
+		dismissDialog,
+		dialogIsVisible,
+		createPanicDialog,
+	};
+}
+export type DialogState = ReturnType<typeof createDialogState>;