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
@@ -0,0 +1,47 @@
import { reactive, readonly } from "vue";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createFullscreenState() {
const state = reactive({
windowFullscreen: false,
keyboardLocked: false,
});
function fullscreenModeChanged(): void {
state.windowFullscreen = Boolean(document.fullscreenElement);
if (!state.windowFullscreen) state.keyboardLocked = false;
}
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"]);
state.keyboardLocked = true;
}
}
async function exitFullscreen(): Promise<void> {
await document.exitFullscreen();
}
async function toggleFullscreen(): Promise<void> {
if (state.windowFullscreen) await exitFullscreen();
else await enterFullscreen();
}
// 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 {
state: readonly(state) as typeof state,
fullscreenModeChanged,
enterFullscreen,
exitFullscreen,
toggleFullscreen,
keyboardLockApiSupported,
};
}
export type FullscreenState = ReturnType<typeof createFullscreenState>;