From 35d7fe88609d0ca167c299f7fc6b0945ddb89e7c Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Thu, 12 Aug 2021 20:34:36 -0700
Subject: [PATCH] Miscellaneous minor code cleanup

# Conflicts:
#	graphene/Cargo.toml
---
 editor/src/tool/tool_options.rs                     |  1 -
 frontend/src/App.vue                                |  2 ++
 frontend/src/components/panels/Document.vue         |  6 +++---
 .../src/components/widgets/buttons/IconButton.vue   |  1 +
 .../components/widgets/buttons/PopoverButton.vue    |  1 +
 .../src/components/widgets/buttons/TextButton.vue   |  1 +
 .../widgets/floating-menus/ColorPicker.vue          | 13 +++++++------
 .../components/widgets/floating-menus/MenuList.vue  |  1 +
 .../src/components/widgets/inputs/CheckboxInput.vue |  1 +
 .../src/components/widgets/inputs/DropdownInput.vue |  1 +
 .../src/components/widgets/inputs/OptionalInput.vue |  1 +
 .../components/widgets/inputs/ShelfItemInput.vue    |  1 +
 .../components/widgets/labels/UserInputLabel.vue    |  1 +
 .../src/components/widgets/options/ToolOptions.vue  |  2 +-
 .../src/components/widgets/separators/Separator.vue |  1 +
 frontend/src/components/window/MainWindow.vue       |  1 +
 .../src/components/window/title-bar/TitleBar.vue    |  1 +
 .../window/title-bar/WindowButtonsWeb.vue           |  2 ++
 .../window/title-bar/WindowButtonsWindows.vue       |  1 +
 frontend/src/main.ts                                |  4 +++-
 20 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/editor/src/tool/tool_options.rs b/editor/src/tool/tool_options.rs
index ee83630f..7fbc5e76 100644
--- a/editor/src/tool/tool_options.rs
+++ b/editor/src/tool/tool_options.rs
@@ -1,6 +1,5 @@
 use serde::{Deserialize, Serialize};
 
-// TODO: Rename this `ToolOption` to not be plural in a separate commit (together with `enum LayerDataTypes`)
 #[derive(Debug, Clone, Copy, Eq, PartialEq, Serialize, Deserialize, Hash)]
 pub enum ToolOptions {
 	Select { append_mode: SelectAppendMode },
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 496c96a8..73e492cd 100644
--- a/frontend/src/App.vue
+++ b/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";
 
diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue
index 091f1882..1abfdfa2 100644
--- a/frontend/src/components/panels/Document.vue
+++ b/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());
diff --git a/frontend/src/components/widgets/buttons/IconButton.vue b/frontend/src/components/widgets/buttons/IconButton.vue
index 91674a08..f67229eb 100644
--- a/frontend/src/components/widgets/buttons/IconButton.vue
+++ b/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({
diff --git a/frontend/src/components/widgets/buttons/PopoverButton.vue b/frontend/src/components/widgets/buttons/PopoverButton.vue
index fa353747..46e1898d 100644
--- a/frontend/src/components/widgets/buttons/PopoverButton.vue
+++ b/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";
 
diff --git a/frontend/src/components/widgets/buttons/TextButton.vue b/frontend/src/components/widgets/buttons/TextButton.vue
index b329d92c..7da0e453 100644
--- a/frontend/src/components/widgets/buttons/TextButton.vue
+++ b/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({
diff --git a/frontend/src/components/widgets/floating-menus/ColorPicker.vue b/frontend/src/components/widgets/floating-menus/ColorPicker.vue
index 0f3db7e9..2b68e1fd 100644
--- a/frontend/src/components/widgets/floating-menus/ColorPicker.vue
+++ b/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);
diff --git a/frontend/src/components/widgets/floating-menus/MenuList.vue b/frontend/src/components/widgets/floating-menus/MenuList.vue
index 00c68563..ce0e956d 100644
--- a/frontend/src/components/widgets/floating-menus/MenuList.vue
+++ b/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";
 
diff --git a/frontend/src/components/widgets/inputs/CheckboxInput.vue b/frontend/src/components/widgets/inputs/CheckboxInput.vue
index 2fb9871f..14a42b1a 100644
--- a/frontend/src/components/widgets/inputs/CheckboxInput.vue
+++ b/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({
diff --git a/frontend/src/components/widgets/inputs/DropdownInput.vue b/frontend/src/components/widgets/inputs/DropdownInput.vue
index a6282066..43f73958 100644
--- a/frontend/src/components/widgets/inputs/DropdownInput.vue
+++ b/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";
diff --git a/frontend/src/components/widgets/inputs/OptionalInput.vue b/frontend/src/components/widgets/inputs/OptionalInput.vue
index bdf86bf6..da286490 100644
--- a/frontend/src/components/widgets/inputs/OptionalInput.vue
+++ b/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({
diff --git a/frontend/src/components/widgets/inputs/ShelfItemInput.vue b/frontend/src/components/widgets/inputs/ShelfItemInput.vue
index 1516d0ce..3234dc2e 100644
--- a/frontend/src/components/widgets/inputs/ShelfItemInput.vue
+++ b/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({
diff --git a/frontend/src/components/widgets/labels/UserInputLabel.vue b/frontend/src/components/widgets/labels/UserInputLabel.vue
index c4e601e6..df036098 100644
--- a/frontend/src/components/widgets/labels/UserInputLabel.vue
+++ b/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 {
diff --git a/frontend/src/components/widgets/options/ToolOptions.vue b/frontend/src/components/widgets/options/ToolOptions.vue
index c8a0ab41..b6647c03 100644
--- a/frontend/src/components/widgets/options/ToolOptions.vue
+++ b/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";
diff --git a/frontend/src/components/widgets/separators/Separator.vue b/frontend/src/components/widgets/separators/Separator.vue
index 6da38a18..e40fce6c 100644
--- a/frontend/src/components/widgets/separators/Separator.vue
+++ b/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({
diff --git a/frontend/src/components/window/MainWindow.vue b/frontend/src/components/window/MainWindow.vue
index 60867de8..f4a39008 100644
--- a/frontend/src/components/window/MainWindow.vue
+++ b/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";
diff --git a/frontend/src/components/window/title-bar/TitleBar.vue b/frontend/src/components/window/title-bar/TitleBar.vue
index 404dda0b..9067d9c0 100644
--- a/frontend/src/components/window/title-bar/TitleBar.vue
+++ b/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";
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue b/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
index bfef6ef4..8dfd211a 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWeb.vue
+++ b/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";
 
diff --git a/frontend/src/components/window/title-bar/WindowButtonsWindows.vue b/frontend/src/components/window/title-bar/WindowButtonsWindows.vue
index 0aeed040..aa3ba881 100644
--- a/frontend/src/components/window/title-bar/WindowButtonsWindows.vue
+++ b/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({
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 4d693239..077b7dc5 100644
--- a/frontend/src/main.ts
+++ b/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());