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
This commit is contained in:
Keavon Chambers
2022-05-21 19:46:15 -07:00
parent 4c3c925c2c
commit fc2d983bd7
73 changed files with 1572 additions and 1462 deletions
@@ -63,7 +63,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { IconName, IconSize } from "@/utilities/icons";
import { IconName, IconSize } from "@/utility-functions/icons";
import IconLabel from "@/components/widgets/labels/IconLabel.vue";
@@ -1,7 +1,7 @@
<template>
<LayoutRow class="popover-button">
<IconButton :action="handleClick" :icon="icon" :size="16" data-hover-menu-spawner />
<FloatingMenu :type="'Popover'" :direction="'Bottom'" ref="floatingMenu">
<IconButton :action="() => onClick()" :icon="icon" :size="16" data-hover-menu-spawner />
<FloatingMenu v-model:open="open" :type="'Popover'" :direction="'Bottom'">
<slot></slot>
</FloatingMenu>
</LayoutRow>
@@ -49,7 +49,7 @@
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { PopoverButtonIcon } from "@/utilities/widgets";
import { IconName } from "@/utility-functions/icons";
import LayoutRow from "@/components/layout/LayoutRow.vue";
import IconButton from "@/components/widgets/buttons/IconButton.vue";
@@ -63,11 +63,16 @@ export default defineComponent({
},
props: {
action: { type: Function as PropType<() => void>, required: false },
icon: { type: String as PropType<PopoverButtonIcon>, default: "DropdownArrow" },
icon: { type: String as PropType<IconName>, default: "DropdownArrow" },
},
data() {
return {
open: false,
};
},
methods: {
handleClick() {
(this.$refs.floatingMenu as typeof FloatingMenu).setOpen();
onClick() {
this.open = true;
this.action?.();
},
@@ -0,0 +1,16 @@
// TODO: Try and get rid of the need for this file
export interface TextButtonWidget {
kind: "TextButton";
tooltip?: string;
message?: string | object;
callback?: () => void;
props: {
// `action` is used via `IconButtonWidget.callback`
label: string;
emphasized?: boolean;
disabled?: boolean;
minWidth?: number;
gapAfter?: boolean;
};
}