Miscellaneous minor code cleanup

# Conflicts:
#	graphene/Cargo.toml

frontend/src/App.vue

@@ -212,9 +212,11 @@ img {
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import dialog from "@/utilities/dialog";
 import documents from "@/utilities/documents";
 import fullscreen from "@/utilities/fullscreen";
+
 import MainWindow from "@/components/window/MainWindow.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";
 

frontend/src/components/panels/Document.vue

@@ -232,6 +232,8 @@ import OptionalInput from "@/components/widgets/inputs/OptionalInput.vue";
 import ToolOptions from "@/components/widgets/options/ToolOptions.vue";
 import { SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 
+const wasm = import("@/../wasm/pkg");
+
 const documentModeEntries: SectionsOfMenuListEntries = [
 	[
 		{ label: "Design Mode", icon: "ViewportDesignMode" },
@@ -245,8 +247,6 @@ const viewModeEntries: RadioEntries = [
 	{ value: "pixels", icon: "ViewModePixels", tooltip: "View Mode: Pixels", action: () => comingSoon(320) },
 ];
 
-const wasm = import("@/../wasm/pkg");
-
 export default defineComponent({
 	methods: {
 		async viewportResize() {
@@ -349,7 +349,7 @@ export default defineComponent({
 		});
 
 		// TODO: Move event listeners to `main.ts`
-		const canvas = this.$refs.canvas as HTMLDivElement;
+		const canvas = this.$refs.canvas as HTMLElement;
 		canvas.addEventListener("wheel", this.canvasMouseScroll, { passive: false });
 
 		window.addEventListener("resize", () => this.viewportResize());

frontend/src/components/widgets/buttons/IconButton.vue

@@ -53,6 +53,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({

frontend/src/components/widgets/buttons/PopoverButton.vue

@@ -49,6 +49,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import FloatingMenu, { MenuDirection, MenuType } from "@/components/widgets/floating-menus/FloatingMenu.vue";
 

frontend/src/components/widgets/buttons/TextButton.vue

@@ -50,6 +50,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 
 export default defineComponent({

frontend/src/components/widgets/floating-menus/ColorPicker.vue

@@ -118,6 +118,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import { hsvToRgb, rgbToHsv, isRGB } from "@/utilities/color";
 import { clamp } from "@/utilities/math";
 
@@ -220,21 +221,21 @@ export default defineComponent({
 		updateRects() {
 			const { colorPicker } = this.$data._;
 
-			const saturationPicker = this.getRef<HTMLDivElement>("saturationPicker");
+			const saturationPicker = this.getRef<HTMLElement>("saturationPicker");
 			const saturation = saturationPicker.getBoundingClientRect();
 			colorPicker.saturation.rect.width = saturation.width;
 			colorPicker.saturation.rect.height = saturation.height;
 			colorPicker.saturation.rect.left = saturation.left;
 			colorPicker.saturation.rect.top = saturation.top;
 
-			const huePicker = this.getRef<HTMLDivElement>("huePicker");
+			const huePicker = this.getRef<HTMLElement>("huePicker");
 			const hue = huePicker.getBoundingClientRect();
 			colorPicker.hue.rect.width = hue.width;
 			colorPicker.hue.rect.height = hue.height;
 			colorPicker.hue.rect.left = hue.left;
 			colorPicker.hue.rect.top = hue.top;
 
-			const opacityPicker = this.getRef<HTMLDivElement>("opacityPicker");
+			const opacityPicker = this.getRef<HTMLElement>("opacityPicker");
 			const opacity = opacityPicker.getBoundingClientRect();
 			colorPicker.opacity.rect.width = opacity.width;
 			colorPicker.opacity.rect.height = opacity.height;
@@ -243,7 +244,7 @@ export default defineComponent({
 		},
 		setSaturationPosition(x: number, y: number) {
 			const { colorPicker } = this.$data._;
-			const saturationCursor = this.getRef<HTMLDivElement>("saturationCursor");
+			const saturationCursor = this.getRef<HTMLElement>("saturationCursor");
 			const saturationPosition = [clamp(x, 0, colorPicker.saturation.rect.width), clamp(y, 0, colorPicker.saturation.rect.height)];
 			saturationCursor.style.transform = `translate(${saturationPosition[0]}px, ${saturationPosition[1]}px)`;
 			colorPicker.color.s = saturationPosition[0] / colorPicker.saturation.rect.width;
@@ -251,14 +252,14 @@ export default defineComponent({
 		},
 		setHuePosition(y: number) {
 			const { colorPicker } = this.$data._;
-			const hueCursor = this.getRef<HTMLDivElement>("hueCursor");
+			const hueCursor = this.getRef<HTMLElement>("hueCursor");
 			const huePosition = clamp(y, 0, colorPicker.hue.rect.height);
 			hueCursor.style.transform = `translateY(${huePosition}px)`;
 			colorPicker.color.h = clamp(1 - huePosition / colorPicker.hue.rect.height);
 		},
 		setOpacityPosition(y: number) {
 			const { colorPicker } = this.$data._;
-			const opacityCursor = this.getRef<HTMLDivElement>("opacityCursor");
+			const opacityCursor = this.getRef<HTMLElement>("opacityCursor");
 			const opacityPosition = clamp(y, 0, colorPicker.opacity.rect.height);
 			opacityCursor.style.transform = `translateY(${opacityPosition}px)`;
 			colorPicker.color.a = clamp(1 - opacityPosition / colorPicker.opacity.rect.height);

frontend/src/components/widgets/floating-menus/MenuList.vue

@@ -133,6 +133,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
+
 import { keyboardLockApiSupported } from "@/utilities/fullscreen";
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 

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

@@ -81,6 +81,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({

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

@@ -89,6 +89,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import MenuList, { MenuListEntry, SectionsOfMenuListEntries } from "@/components/widgets/floating-menus/MenuList.vue";
 import { MenuDirection } from "@/components/widgets/floating-menus/FloatingMenu.vue";

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

@@ -35,6 +35,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
 
 export default defineComponent({

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

@@ -31,6 +31,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 
 export default defineComponent({

frontend/src/components/widgets/labels/UserInputLabel.vue

@@ -90,6 +90,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export enum MouseInputInteraction {

frontend/src/components/widgets/options/ToolOptions.vue

@@ -26,8 +26,8 @@
 import { defineComponent } from "vue";
 
 import { comingSoon } from "@/utilities/errors";
-
 import { WidgetRow, SeparatorType, IconButtonWidget } from "@/components/widgets/widgets";
+
 import Separator from "@/components/widgets/separators/Separator.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";

frontend/src/components/widgets/separators/Separator.vue

@@ -70,6 +70,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import { SeparatorDirection, SeparatorType } from "@/components/widgets/widgets";
 
 export default defineComponent({

frontend/src/components/window/MainWindow.vue

@@ -37,6 +37,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import TitleBar from "@/components/window/title-bar/TitleBar.vue";
 import StatusBar from "@/components/window/status-bar/StatusBar.vue";
 import LayoutRow from "@/components/layout/LayoutRow.vue";

frontend/src/components/window/title-bar/TitleBar.vue

@@ -33,6 +33,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import WindowTitle from "@/components/window/title-bar/WindowTitle.vue";
 import WindowButtonsWindows from "@/components/window/title-bar/WindowButtonsWindows.vue";
 import WindowButtonsMac from "@/components/window/title-bar/WindowButtonsMac.vue";

frontend/src/components/window/title-bar/WindowButtonsWeb.vue

@@ -26,7 +26,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import fullscreen, { keyboardLockApiSupported, enterFullscreen, exitFullscreen } from "@/utilities/fullscreen";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 import TextLabel from "@/components/widgets/labels/TextLabel.vue";
 

frontend/src/components/window/title-bar/WindowButtonsWindows.vue

@@ -39,6 +39,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+
 import IconLabel from "@/components/widgets/labels/IconLabel.vue";
 
 export default defineComponent({

frontend/src/main.ts

@@ -1,9 +1,11 @@
 import { createApp } from "vue";
+
 import { fullscreenModeChanged } from "@/utilities/fullscreen";
 import { handleKeyUp, handleKeyDown, handleMouseDown } from "@/utilities/input";
-import App from "@/App.vue";
 import "@/utilities/errors";
 
+import App from "@/App.vue";
+
 // Bind global browser events
 document.addEventListener("contextmenu", (e) => e.preventDefault());
 document.addEventListener("fullscreenchange", () => fullscreenModeChanged());