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

frontend/src/components/widgets/inputs/CheckboxInput.vue

@@ -84,7 +84,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { IconName } from "@/utilities/icons";
+import { IconName } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

frontend/src/components/widgets/inputs/ColorInput.vue

@@ -4,8 +4,8 @@
 		<TextInput :value="displayValue" :label="label" :disabled="disabled || !value" @commitText="(value: string) => textInputUpdated(value)" :center="true" />
 		<Separator :type="'Related'" />
 		<LayoutRow class="swatch">
-			<button class="swatch-button" :class="{ 'disabled-swatch': !value }" :style="`--swatch-color: #${value}`" @click="() => menuOpen()"></button>
-			<FloatingMenu :type="'Popover'" :direction="'Bottom'" horizontal ref="colorFloatingMenu">
+			<button class="swatch-button" :class="{ 'disabled-swatch': !value }" :style="`--swatch-color: #${value}`" @click="() => $emit('update:open', true)"></button>
+			<FloatingMenu v-model:open="isOpen" :type="'Popover'" :direction="'Bottom'">
 				<ColorPicker @update:color="(color) => colorPickerUpdated(color)" :color="color" />
 			</FloatingMenu>
 		</LayoutRow>
@@ -70,7 +70,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { RGBA } from "@/dispatcher/js-messages";
+import { RGBA } from "@/wasm-communication/messages";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
@@ -80,13 +80,19 @@ import TextInput from "@/components/widgets/inputs/TextInput.vue";
 import Separator from "@/components/widgets/separators/Separator.vue";
 
 export default defineComponent({
-	emits: ["update:value"],
+	emits: ["update:value", "update:open"],
 	props: {
 		value: { type: String as PropType<string | undefined>, required: true },
+		open: { type: Boolean as PropType<boolean>, required: true },
 		label: { type: String as PropType<string>, required: false },
 		canSetTransparent: { type: Boolean as PropType<boolean>, required: false, default: true },
 		disabled: { type: Boolean as PropType<boolean>, default: false },
 	},
+	data() {
+		return {
+			isOpen: false,
+		};
+	},
 	computed: {
 		color() {
 			if (!this.value) return { r: 0, g: 0, b: 0, a: 1 };
@@ -105,6 +111,15 @@ export default defineComponent({
 			return `#${shortenedIfOpaque}`;
 		},
 	},
+	watch: {
+		// Called only when `open` is changed from outside this component (with v-model)
+		open(newOpen: boolean) {
+			this.isOpen = newOpen;
+		},
+		isOpen(newIsOpen: boolean) {
+			this.$emit("update:open", newIsOpen);
+		},
+	},
 	methods: {
 		colorPickerUpdated(color: RGBA) {
 			const twoDigitHex = (value: number): string => value.toString(16).padStart(2, "0");
@@ -134,9 +149,6 @@ export default defineComponent({
 
 			this.$emit("update:value", sanitized);
 		},
-		menuOpen() {
-			(this.$refs.colorFloatingMenu as typeof FloatingMenu).setOpen();
-		},
 		updateEnabled(value: boolean) {
 			if (value) this.$emit("update:value", "000000");
 			else this.$emit("update:value", undefined);

frontend/src/components/widgets/inputs/DropdownInput.vue

@@ -1,19 +1,18 @@
 <template>
 	<LayoutRow class="dropdown-input">
-		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
+		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => !disabled && (open = true)" ref="dropdownBox" data-hover-menu-spawner>
 			<IconLabel class="dropdown-icon" :icon="activeEntry.icon" v-if="activeEntry.icon" />
 			<span>{{ activeEntry.label }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
 		</LayoutRow>
 		<MenuList
 			v-model:activeEntry="activeEntry"
-			@update:activeEntry="(newActiveEntry: typeof MENU_LIST_ENTRY) => activeEntryChanged(newActiveEntry)"
-			@widthChanged="(newWidth: number) => onWidthChanged(newWidth)"
+			v-model:open="open"
+			@naturalWidth="(newNaturalWidth: number) => (minWidth = newNaturalWidth)"
 			:entries="entries"
-			:direction="'Bottom'"
 			:drawIcon="drawIcon"
+			:direction="'Bottom'"
 			:scrollableY="true"
-			ref="menuList"
 		/>
 	</LayoutRow>
 </template>
@@ -86,16 +85,13 @@
 </style>
 
 <script lang="ts">
-import { defineComponent, PropType } from "vue";
+import { defineComponent, PropType, toRaw } from "vue";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
-// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
-declare global {
-	const MENU_LIST_ENTRY: MenuListEntry;
-}
+const DASH_ENTRY = { label: "-" };
 
 export default defineComponent({
 	emits: ["update:selectedIndex"],
@@ -107,32 +103,31 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			activeEntry: this.selectedIndex !== undefined ? this.entries.flat()[this.selectedIndex] : { label: "-" },
+			activeEntry: this.makeActiveEntry(this.selectedIndex),
+			open: false,
 			minWidth: 0,
 		};
 	},
 	watch: {
 		// Called only when `selectedIndex` is changed from outside this component (with v-model)
-		selectedIndex(newSelectedIndex: number | undefined) {
-			const entries = this.entries.flat();
+		selectedIndex() {
+			this.activeEntry = this.makeActiveEntry();
+		},
+		activeEntry(newActiveEntry: MenuListEntry) {
+			// `toRaw()` pulls it out of the Vue proxy
+			if (toRaw(newActiveEntry) === DASH_ENTRY) return;
 
-			if (newSelectedIndex !== undefined && newSelectedIndex >= 0 && newSelectedIndex < entries.length) {
-				this.activeEntry = entries[newSelectedIndex];
-			} else {
-				this.activeEntry = { label: "-" };
-			}
+			this.$emit("update:selectedIndex", this.entries.flat().indexOf(newActiveEntry));
 		},
 	},
 	methods: {
-		// Called only when `activeEntry` is changed from the child MenuList component via user input
-		activeEntryChanged(newActiveEntry: MenuListEntry) {
-			this.$emit("update:selectedIndex", this.entries.flat().indexOf(newActiveEntry));
-		},
-		clickDropdownBox() {
-			if (!this.disabled) (this.$refs.menuList as typeof MenuList).setOpen();
-		},
-		onWidthChanged(newWidth: number) {
-			this.minWidth = newWidth;
+		makeActiveEntry(): MenuListEntry {
+			const entries = this.entries.flat();
+
+			if (this.selectedIndex !== undefined && this.selectedIndex >= 0 && this.selectedIndex < entries.length) {
+				return entries[this.selectedIndex];
+			}
+			return DASH_ENTRY;
 		},
 	},
 	components: {

frontend/src/components/widgets/inputs/FontInput.vue

@@ -1,10 +1,17 @@
 <template>
 	<LayoutRow class="font-input">
-		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => clickDropdownBox()" data-hover-menu-spawner>
-			<span>{{ activeEntry.label }}</span>
+		<LayoutRow class="dropdown-box" :class="{ disabled }" :style="{ minWidth: `${minWidth}px` }" @click="() => !disabled && (open = true)" data-hover-menu-spawner>
+			<span>{{ activeEntry?.label || "" }}</span>
 			<IconLabel class="dropdown-arrow" :icon="'DropdownArrow'" />
 		</LayoutRow>
-		<MenuList v-model:activeEntry="activeEntry" @widthChanged="(newWidth: number) => onWidthChanged(newWidth)" :entries="entries" :direction="'Bottom'" :scrollableY="true" ref="menuList" />
+		<MenuList
+			v-model:activeEntry="activeEntry"
+			v-model:open="open"
+			@naturalWidth="(newNaturalWidth: number) => (minWidth = newNaturalWidth)"
+			:entries="entries"
+			:direction="'Bottom'"
+			:scrollableY="true"
+		/>
 	</LayoutRow>
 </template>
 
@@ -78,13 +85,12 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { fontNames, getFontFile, getFontStyles } from "@/utilities/fonts";
-
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({
+	inject: ["fonts"],
 	emits: ["update:fontFamily", "update:fontStyle", "changeFont"],
 	props: {
 		fontFamily: { type: String as PropType<string>, required: true },
@@ -93,18 +99,20 @@ export default defineComponent({
 		isStyle: { type: Boolean as PropType<boolean>, default: false },
 	},
 	data() {
-		const { entries, activeEntry } = this.updateEntries();
 		return {
-			entries,
-			activeEntry,
+			open: false,
 			minWidth: 0,
+			entries: [] as SectionsOfMenuListEntries,
+			activeEntry: undefined as undefined | MenuListEntry,
 		};
 	},
+	async mounted() {
+		const { entries, activeEntry } = await this.updateEntries();
+		this.entries = entries;
+		this.activeEntry = activeEntry;
+	},
 	methods: {
-		clickDropdownBox() {
-			if (!this.disabled) (this.$refs.menuList as typeof MenuList).setOpen();
-		},
-		selectFont(newName: string) {
+		async selectFont(newName: string): Promise<void> {
 			let fontFamily;
 			let fontStyle;
 
@@ -117,24 +125,21 @@ export default defineComponent({
 				this.$emit("update:fontFamily", newName);
 
 				fontFamily = newName;
-				fontStyle = getFontStyles(newName)[0];
+				fontStyle = (await this.fonts.getFontStyles(newName))[0];
 			}
 
-			const fontFile = getFontFile(fontFamily, fontStyle);
-			this.$emit("changeFont", { fontFamily, fontStyle, fontFile });
+			const fontFileUrl = await this.fonts.getFontFileUrl(fontFamily, fontStyle);
+			this.$emit("changeFont", { fontFamily, fontStyle, fontFileUrl });
 		},
-		onWidthChanged(newWidth: number) {
-			this.minWidth = newWidth;
-		},
-		updateEntries(): { entries: SectionsOfMenuListEntries; activeEntry: MenuListEntry } {
-			const choices = this.isStyle ? getFontStyles(this.fontFamily) : fontNames();
+		async updateEntries(): Promise<{ entries: SectionsOfMenuListEntries; activeEntry: MenuListEntry }> {
+			const choices = this.isStyle ? await this.fonts.getFontStyles(this.fontFamily) : this.fonts.state.fontNames;
 			const selectedChoice = this.isStyle ? this.fontStyle : this.fontFamily;
 
 			let selectedEntry: MenuListEntry | undefined;
 			const menuListEntries = choices.map((name) => {
 				const result: MenuListEntry = {
 					label: name,
-					action: (): void => this.selectFont(name),
+					action: async (): Promise<void> => this.selectFont(name),
 				};
 
 				if (name === selectedChoice) selectedEntry = result;
@@ -149,13 +154,13 @@ export default defineComponent({
 		},
 	},
 	watch: {
-		fontFamily() {
-			const { entries, activeEntry } = this.updateEntries();
+		async fontFamily() {
+			const { entries, activeEntry } = await this.updateEntries();
 			this.entries = entries;
 			this.activeEntry = activeEntry;
 		},
-		fontStyle() {
-			const { entries, activeEntry } = this.updateEntries();
+		async fontStyle() {
+			const { entries, activeEntry } = await this.updateEntries();
 			this.entries = entries;
 			this.activeEntry = activeEntry;
 		},

frontend/src/components/widgets/inputs/MenuBarInput.vue

@@ -6,11 +6,19 @@
 			</div>
 		</div>
 		<div class="entry-container" v-for="(entry, index) in entries" :key="index">
-			<div @click="() => handleEntryClick(entry)" class="entry" :class="{ open: entry.ref?.isOpen() }" data-hover-menu-spawner>
-				<IconLabel :icon="entry.icon" v-if="entry.icon" />
+			<div @click="() => onClick(entry)" class="entry" :class="{ open: entry.ref?.open }" data-hover-menu-spawner>
+				<IconLabel v-if="entry.icon" :icon="entry.icon" />
 				<span v-if="entry.label">{{ entry.label }}</span>
 			</div>
-			<MenuList :entries="entry.children || []" :direction="'Bottom'" :minWidth="240" :drawIcon="true" :defaultAction="comingSoon" :ref="(ref: any) => setEntryRefs(entry, ref)" />
+			<MenuList
+				:open="entry.ref?.open || false"
+				:entries="entry.children || []"
+				:direction="'Bottom'"
+				:minWidth="240"
+				:drawIcon="true"
+				:defaultAction="() => editor.instance.request_coming_soon_dialog()"
+				:ref="(ref: typeof MenuList) => ref && (entry.ref = ref)"
+			/>
 		</div>
 	</div>
 </template>
@@ -53,12 +61,12 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { EditorState } from "@/state/wasm-loader";
+import { Editor } from "@/wasm-communication/editor";
 
 import MenuList, { MenuListEntry, MenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
-function makeEntries(editor: EditorState): MenuListEntries {
+function makeEntries(editor: Editor): MenuListEntries {
 	return [
 		{
 			label: "File",
@@ -131,14 +139,14 @@ function makeEntries(editor: EditorState): MenuListEntries {
 								{
 									label: "Raise To Front",
 									shortcut: ["KeyControl", "KeyShift", "KeyLeftBracket"],
-									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.rawWasm.i32_max()),
+									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.raw.i32_max()),
 								},
 								{ label: "Raise", shortcut: ["KeyControl", "KeyRightBracket"], action: async (): Promise<void> => editor.instance.reorder_selected_layers(1) },
 								{ label: "Lower", shortcut: ["KeyControl", "KeyLeftBracket"], action: async (): Promise<void> => editor.instance.reorder_selected_layers(-1) },
 								{
 									label: "Lower to Back",
 									shortcut: ["KeyControl", "KeyShift", "KeyRightBracket"],
-									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.rawWasm.i32_min()),
+									action: async (): Promise<void> => editor.instance.reorder_selected_layers(editor.raw.i32_min()),
 								},
 							],
 						],
@@ -189,7 +197,7 @@ function makeEntries(editor: EditorState): MenuListEntries {
 							],
 						],
 					},
-					{ label: "Debug: Panic (DANGER)", action: async (): Promise<void> => editor.rawWasm.intentional_panic() },
+					{ label: "Debug: Panic (DANGER)", action: async (): Promise<void> => editor.instance.intentional_panic() },
 				],
 			],
 		},
@@ -197,15 +205,13 @@ function makeEntries(editor: EditorState): MenuListEntries {
 }
 
 export default defineComponent({
-	inject: ["workspace", "editor", "dialog"],
+	inject: ["editor"],
 	methods: {
-		setEntryRefs(menuEntry: MenuListEntry, ref: typeof MenuList) {
-			if (ref) menuEntry.ref = ref;
-		},
-		handleEntryClick(menuEntry: MenuListEntry) {
-			if (menuEntry.ref) menuEntry.ref.setOpen();
+		onClick(menuEntry: MenuListEntry) {
+			if (menuEntry.ref) menuEntry.ref.isOpen = true;
 			else throw new Error("The menu bar floating menu has no associated ref");
 		},
+		// TODO: Move to backend
 		visitWebsite(url: string) {
 			// This method is required because `window` isn't accessible from the Vue component HTML
 			window.open(url, "_blank");
@@ -214,7 +220,7 @@ export default defineComponent({
 	data() {
 		return {
 			entries: makeEntries(this.editor),
-			comingSoon: (): void => this.dialog.comingSoon(),
+			open: false,
 		};
 	},
 	components: {

frontend/src/components/widgets/inputs/NumberInput.vue

@@ -87,10 +87,11 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { IncrementBehavior, IncrementDirection } from "@/utilities/widgets";
-
 import FieldInput from "@/components/widgets/inputs/FieldInput.vue";
 
+type IncrementBehavior = "Add" | "Multiply" | "Callback" | "None";
+type IncrementDirection = "Decrease" | "Increase";
+
 export default defineComponent({
 	emits: ["update:value"],
 	props: {

frontend/src/components/widgets/inputs/OptionalInput.vue

@@ -37,7 +37,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { IconName } from "@/utilities/icons";
+import { IconName } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";

frontend/src/components/widgets/inputs/RadioInput.vue

@@ -64,7 +64,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
 
-import { IconName } from "@/utilities/icons";
+import { IconName } from "@/utility-functions/icons";
 
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";

frontend/src/components/widgets/inputs/SwatchPairInput.vue

@@ -2,14 +2,14 @@
 	<LayoutCol class="swatch-pair">
 		<LayoutRow class="secondary swatch">
 			<button @click="() => clickSecondarySwatch()" ref="secondaryButton" data-hover-menu-spawner></button>
-			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="secondarySwatchFloatingMenu">
-				<ColorPicker @update:color="(color: RGBA_) => secondaryColorChanged(color)" :color="secondaryColor" />
+			<FloatingMenu :type="'Popover'" :direction="'Right'" v-model:open="secondaryOpen">
+				<ColorPicker @update:color="(color: RGBA) => secondaryColorChanged(color)" :color="secondaryColor" />
 			</FloatingMenu>
 		</LayoutRow>
 		<LayoutRow class="primary swatch">
 			<button @click="() => clickPrimarySwatch()" ref="primaryButton" data-hover-menu-spawner></button>
-			<FloatingMenu :type="'Popover'" :direction="'Right'" horizontal ref="primarySwatchFloatingMenu">
-				<ColorPicker @update:color="(color: RGBA_) => primaryColorChanged(color)" :color="primaryColor" />
+			<FloatingMenu :type="'Popover'" :direction="'Right'" v-model:open="primaryOpen">
+				<ColorPicker @update:color="(color: RGBA) => primaryColorChanged(color)" :color="primaryColor" />
 			</FloatingMenu>
 		</LayoutRow>
 	</LayoutCol>
@@ -68,19 +68,14 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-import { type RGBA, UpdateWorkingColors } from "@/dispatcher/js-messages";
-import { rgbaToDecimalRgba } from "@/utilities/color";
+import { rgbaToDecimalRgba } from "@/utility-functions/color";
+import { type RGBA, UpdateWorkingColors } from "@/wasm-communication/messages";
 
 import LayoutCol from "@/components/layout/LayoutCol.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 import ColorPicker from "@/components/widgets/floating-menus/ColorPicker.vue";
 import FloatingMenu from "@/components/widgets/floating-menus/FloatingMenu.vue";
 
-// Satisfies Volar (https://github.com/johnsoncodehk/volar/issues/596)
-declare global {
-	type RGBA_ = RGBA;
-}
-
 export default defineComponent({
 	inject: ["editor"],
 	components: {
@@ -89,14 +84,22 @@ export default defineComponent({
 		LayoutRow,
 		LayoutCol,
 	},
+	data() {
+		return {
+			primaryOpen: false,
+			secondaryOpen: false,
+			primaryColor: { r: 0, g: 0, b: 0, a: 1 } as RGBA,
+			secondaryColor: { r: 255, g: 255, b: 255, a: 1 } as RGBA,
+		};
+	},
 	methods: {
 		clickPrimarySwatch() {
-			(this.$refs.primarySwatchFloatingMenu as typeof FloatingMenu).setOpen();
-			(this.$refs.secondarySwatchFloatingMenu as typeof FloatingMenu).setClosed();
+			this.primaryOpen = true;
+			this.secondaryOpen = false;
 		},
 		clickSecondarySwatch() {
-			(this.$refs.secondarySwatchFloatingMenu as typeof FloatingMenu).setOpen();
-			(this.$refs.primarySwatchFloatingMenu as typeof FloatingMenu).setClosed();
+			this.primaryOpen = false;
+			this.secondaryOpen = true;
 		},
 		primaryColorChanged(color: RGBA) {
 			this.primaryColor = color;
@@ -123,14 +126,8 @@ export default defineComponent({
 			this.editor.instance.update_secondary_color(color.r, color.g, color.b, color.a);
 		},
 	},
-	data() {
-		return {
-			primaryColor: { r: 0, g: 0, b: 0, a: 1 } as RGBA,
-			secondaryColor: { r: 255, g: 255, b: 255, a: 1 } as RGBA,
-		};
-	},
 	mounted() {
-		this.editor.dispatcher.subscribeJsMessage(UpdateWorkingColors, (updateWorkingColors) => {
+		this.editor.subscriptions.subscribeJsMessage(UpdateWorkingColors, (updateWorkingColors) => {
 			this.primaryColor = updateWorkingColors.primary.toRgba();
 			this.secondaryColor = updateWorkingColors.secondary.toRgba();