From 726152759f4b6413faefb3e0fe1ce3086cc0bdcc Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 14 Jul 2021 14:31:09 -0700
Subject: [PATCH] Frontend refactor to move response handler, key input
 handling, and more into new utilities folder (#260)

Part of #124
---
 client/web/.eslintrc.js                       |  1 +
 client/web/src/components/panels/Document.vue | 44 ++----------------
 .../web/src/components/panels/LayerTree.vue   |  2 +-
 .../widgets/floating-menus/ColorPicker.vue    |  3 +-
 .../widgets/inputs/SwatchPairInput.vue        |  6 +--
 client/web/src/components/workspace/Panel.vue |  2 +-
 .../src/components/workspace/Workspace.vue    |  2 +-
 client/web/src/main.ts                        |  8 ++--
 .../src/{lib/utils.ts => utilities/color.ts}  |  4 --
 client/web/src/utilities/input.ts             | 45 +++++++++++++++++++
 client/web/src/utilities/math.ts              |  3 ++
 .../src/utilities/response-handler-binding.ts |  4 ++
 .../src/{ => utilities}/response-handler.ts   | 20 ++++-----
 client/web/wasm/src/lib.rs                    |  2 +-
 14 files changed, 80 insertions(+), 66 deletions(-)
 rename client/web/src/{lib/utils.ts => utilities/color.ts} (93%)
 create mode 100644 client/web/src/utilities/input.ts
 create mode 100644 client/web/src/utilities/math.ts
 create mode 100644 client/web/src/utilities/response-handler-binding.ts
 rename client/web/src/{ => utilities}/response-handler.ts (95%)

diff --git a/client/web/.eslintrc.js b/client/web/.eslintrc.js
index e4eb13e19..3182ebcf5 100644
--- a/client/web/.eslintrc.js
+++ b/client/web/.eslintrc.js
@@ -31,6 +31,7 @@ module.exports = {
 		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
 		"no-param-reassign": ["error", { props: false }],
+		"import/prefer-default-export": "off",
 		"max-len": ["error", { code: 200, tabWidth: 4 }],
 		"@typescript-eslint/camelcase": "off",
 		"@typescript-eslint/no-use-before-define": "off",
diff --git a/client/web/src/components/panels/Document.vue b/client/web/src/components/panels/Document.vue
index a03193e46..6ac091a88 100644
--- a/client/web/src/components/panels/Document.vue
+++ b/client/web/src/components/panels/Document.vue
@@ -192,7 +192,8 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetRotation } from "../../response-handler";
+import { makeModifiersBitfield } from "@/utilities/input";
+import { ResponseType, registerResponseHandler, Response, UpdateCanvas, SetActiveTool, ExportDocument, SetCanvasZoom, SetRotation } from "../../utilities/response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import WorkingColors from "../widgets/WorkingColors.vue";
@@ -217,26 +218,6 @@ const modeMenuEntries: SectionsOfMenuListEntries = [
 
 const wasm = import("../../../wasm/pkg");
 
-function redirectKeyboardEventToBackend(e: KeyboardEvent): boolean {
-	// Don't redirect user input from text entry into HTML elements
-	const target = e.target as HTMLElement;
-	if (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable) return false;
-
-	// Don't redirect a fullscreen request
-	if (e.key.toLowerCase() === "f11") return false;
-
-	// Don't redirect debugging tools
-	if (e.key.toLowerCase() === "f12") return false;
-	if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "c") return false;
-
-	return true;
-}
-
-function makeModifiersBitfield(control: boolean, shift: boolean, alt: boolean): number {
-	// eslint-disable-next-line no-bitwise
-	return Number(control) | (Number(shift) << 1) | (Number(alt) << 2);
-}
-
 export default defineComponent({
 	methods: {
 		async viewportResize() {
@@ -273,28 +254,11 @@ export default defineComponent({
 			const { set_rotation } = await wasm;
 			set_rotation(newRotation * (Math.PI / 180));
 		},
-		async keyDown(e: KeyboardEvent) {
-			if (redirectKeyboardEventToBackend(e)) {
-				e.preventDefault();
-				const { on_key_down } = await wasm;
-				const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
-				on_key_down(e.key, modifiers);
-			}
-		},
-		async keyUp(e: KeyboardEvent) {
-			if (redirectKeyboardEventToBackend(e)) {
-				e.preventDefault();
-				const { on_key_up } = await wasm;
-				const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
-				on_key_up(e.key, modifiers);
-			}
-		},
 		async selectTool(toolName: string) {
 			const { select_tool } = await wasm;
 			select_tool(toolName);
 		},
 		async viewModeChanged(toolIndex: number) {
-			console.log(toolIndex);
 			function todo(_: number) {
 				return _;
 			}
@@ -341,10 +305,10 @@ export default defineComponent({
 			}
 		});
 
-		window.addEventListener("keyup", (e: KeyboardEvent) => this.keyUp(e));
+		// TODO: Move event listeners to `main.ts`
 		const canvas = this.$refs.canvas as HTMLDivElement;
 		canvas.addEventListener("wheel", this.canvasMouseScroll, { passive: false });
-		window.addEventListener("keydown", (e: KeyboardEvent) => this.keyDown(e));
+
 		window.addEventListener("resize", () => this.viewportResize());
 		window.addEventListener("DOMContentLoaded", () => this.viewportResize());
 
diff --git a/client/web/src/components/panels/LayerTree.vue b/client/web/src/components/panels/LayerTree.vue
index 505213464..75a400ba1 100644
--- a/client/web/src/components/panels/LayerTree.vue
+++ b/client/web/src/components/panels/LayerTree.vue
@@ -104,7 +104,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../response-handler";
+import { ResponseType, registerResponseHandler, Response, ExpandFolder, LayerPanelEntry } from "../../utilities/response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import Separator, { SeparatorType } from "../widgets/Separator.vue";
diff --git a/client/web/src/components/widgets/floating-menus/ColorPicker.vue b/client/web/src/components/widgets/floating-menus/ColorPicker.vue
index 7aff1366d..c5c719b10 100644
--- a/client/web/src/components/widgets/floating-menus/ColorPicker.vue
+++ b/client/web/src/components/widgets/floating-menus/ColorPicker.vue
@@ -118,7 +118,8 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { clamp, hsvToRgb, rgbToHsv, isRGB } from "../../../lib/utils";
+import { hsvToRgb, rgbToHsv, isRGB } from "@/utilities/color";
+import { clamp } from "@/utilities/math";
 
 const enum ColorPickerState {
 	Idle = "Idle",
diff --git a/client/web/src/components/widgets/inputs/SwatchPairInput.vue b/client/web/src/components/widgets/inputs/SwatchPairInput.vue
index 80944d7e2..5c9f8fe6b 100644
--- a/client/web/src/components/widgets/inputs/SwatchPairInput.vue
+++ b/client/web/src/components/widgets/inputs/SwatchPairInput.vue
@@ -66,13 +66,13 @@
 </style>
 
 <script lang="ts">
-import { rgbToDecimalRgb } from "@/lib/utils";
+import { rgbToDecimalRgb } from "@/utilities/color";
 import { defineComponent } from "vue";
 import ColorPicker from "../floating-menus/ColorPicker.vue";
 import FloatingMenu, { MenuDirection, MenuType } from "../floating-menus/FloatingMenu.vue";
-import { ResponseType, registerResponseHandler, Response, UpdateWorkingColors } from "../../../response-handler";
+import { ResponseType, registerResponseHandler, Response, UpdateWorkingColors } from "../../../utilities/response-handler";
 
-const wasm = import("../../../../wasm/pkg");
+const wasm = import("@/../wasm/pkg");
 
 export default defineComponent({
 	components: {
diff --git a/client/web/src/components/workspace/Panel.vue b/client/web/src/components/workspace/Panel.vue
index d2fe90b6e..874c4d20f 100644
--- a/client/web/src/components/workspace/Panel.vue
+++ b/client/web/src/components/workspace/Panel.vue
@@ -150,7 +150,7 @@ import Minimap from "../panels/Minimap.vue";
 import IconButton from "../widgets/buttons/IconButton.vue";
 import PopoverButton, { PopoverButtonIcon } from "../widgets/buttons/PopoverButton.vue";
 import { MenuDirection } from "../widgets/floating-menus/FloatingMenu.vue";
-import { ResponseType, registerResponseHandler, Response } from "../../response-handler";
+import { ResponseType, registerResponseHandler, Response } from "../../utilities/response-handler";
 
 const wasm = import("../../../wasm/pkg");
 
diff --git a/client/web/src/components/workspace/Workspace.vue b/client/web/src/components/workspace/Workspace.vue
index b7f3315e5..326d7e3cf 100644
--- a/client/web/src/components/workspace/Workspace.vue
+++ b/client/web/src/components/workspace/Workspace.vue
@@ -46,7 +46,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ResponseType, registerResponseHandler, Response, SetActiveDocument, NewDocument, CloseDocument } from "../../response-handler";
+import { ResponseType, registerResponseHandler, Response, SetActiveDocument, NewDocument, CloseDocument } from "../../utilities/response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import Panel from "./Panel.vue";
diff --git a/client/web/src/main.ts b/client/web/src/main.ts
index d4785a3fe..c1cb0f2b3 100644
--- a/client/web/src/main.ts
+++ b/client/web/src/main.ts
@@ -1,9 +1,11 @@
 import { createApp } from "vue";
+import { handleKeyUp, handleKeyDown } from "@/utilities/input";
 import App from "./App.vue";
-import { attachResponseHandlerToPage } from "./response-handler";
 
+// Bind global browser events
 document.addEventListener("contextmenu", (e) => e.preventDefault());
+window.addEventListener("keyup", (e: KeyboardEvent) => handleKeyUp(e));
+window.addEventListener("keydown", (e: KeyboardEvent) => handleKeyDown(e));
 
-attachResponseHandlerToPage();
-
+// Initialize the Vue application
 createApp(App).mount("#app");
diff --git a/client/web/src/lib/utils.ts b/client/web/src/utilities/color.ts
similarity index 93%
rename from client/web/src/lib/utils.ts
rename to client/web/src/utilities/color.ts
index 3054c932a..03434e749 100644
--- a/client/web/src/lib/utils.ts
+++ b/client/web/src/utilities/color.ts
@@ -63,10 +63,6 @@ export function rgbToDecimalRgb(rgb: RGB) {
 	return { r, g, b, a: rgb.a };
 }
 
-export function clamp(value: number, min = 0, max = 1) {
-	return Math.max(min, Math.min(value, max));
-}
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function isRGB(data: any): data is RGB {
 	if (typeof data !== "object" || data === null) return false;
diff --git a/client/web/src/utilities/input.ts b/client/web/src/utilities/input.ts
new file mode 100644
index 000000000..b69549852
--- /dev/null
+++ b/client/web/src/utilities/input.ts
@@ -0,0 +1,45 @@
+const wasm = import("@/../wasm/pkg");
+
+export function shouldRedirectKeyboardEventToBackend(e: KeyboardEvent): boolean {
+	// Don't redirect user input from text entry into HTML elements
+	const target = e.target as HTMLElement;
+	if (target.nodeName === "INPUT" || target.nodeName === "TEXTAREA" || target.isContentEditable) return false;
+
+	// Don't redirect a fullscreen request
+	if (e.key.toLowerCase() === "f11") return false;
+
+	// Don't redirect a reload request
+	if (e.key.toLowerCase() === "f5") return false;
+
+	// Don't redirect debugging tools
+	if (e.key.toLowerCase() === "f12") return false;
+	if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "c") return false;
+	if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "i") return false;
+	if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "j") return false;
+
+	// Redirect to the backend
+	return true;
+}
+
+export async function handleKeyDown(e: KeyboardEvent) {
+	if (shouldRedirectKeyboardEventToBackend(e)) {
+		e.preventDefault();
+		const { on_key_down } = await wasm;
+		const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
+		on_key_down(e.key, modifiers);
+	}
+}
+
+export async function handleKeyUp(e: KeyboardEvent) {
+	if (shouldRedirectKeyboardEventToBackend(e)) {
+		e.preventDefault();
+		const { on_key_up } = await wasm;
+		const modifiers = makeModifiersBitfield(e.ctrlKey, e.shiftKey, e.altKey);
+		on_key_up(e.key, modifiers);
+	}
+}
+
+export function makeModifiersBitfield(control: boolean, shift: boolean, alt: boolean): number {
+	// eslint-disable-next-line no-bitwise
+	return Number(control) | (Number(shift) << 1) | (Number(alt) << 2);
+}
diff --git a/client/web/src/utilities/math.ts b/client/web/src/utilities/math.ts
new file mode 100644
index 000000000..5c8eea268
--- /dev/null
+++ b/client/web/src/utilities/math.ts
@@ -0,0 +1,3 @@
+export function clamp(value: number, min = 0, max = 1) {
+	return Math.max(min, Math.min(value, max));
+}
diff --git a/client/web/src/utilities/response-handler-binding.ts b/client/web/src/utilities/response-handler-binding.ts
new file mode 100644
index 000000000..6851f8966
--- /dev/null
+++ b/client/web/src/utilities/response-handler-binding.ts
@@ -0,0 +1,4 @@
+// This file is instantiated by wasm-bindgen in `client\web\wasm\src\lib.rs` and re-exports the `handleResponse` function to
+// provide access to the global copy of `response-handler.ts` with its shared state, not an isolated duplicate with empty state
+
+export { handleResponse } from "@/utilities/response-handler";
diff --git a/client/web/src/response-handler.ts b/client/web/src/utilities/response-handler.ts
similarity index 95%
rename from client/web/src/response-handler.ts
rename to client/web/src/utilities/response-handler.ts
index 7902f6fb0..887355cf4 100644
--- a/client/web/src/response-handler.ts
+++ b/client/web/src/utilities/response-handler.ts
@@ -1,14 +1,15 @@
+import { reactive } from "vue";
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 type ResponseCallback = (responseData: Response) => void;
 type ResponseMap = {
 	[response: string]: ResponseCallback | undefined;
 };
-declare global {
-	interface Window {
-		responseMap: ResponseMap;
-	}
-}
+
+const state = reactive({
+	responseMap: {} as ResponseMap,
+});
 
 export enum ResponseType {
 	UpdateCanvas = "UpdateCanvas",
@@ -25,17 +26,13 @@ export enum ResponseType {
 	SetRotation = "SetRotation",
 }
 
-export function attachResponseHandlerToPage() {
-	window.responseMap = {};
-}
-
 export function registerResponseHandler(responseType: ResponseType, callback: ResponseCallback) {
-	window.responseMap[responseType] = callback;
+	state.responseMap[responseType] = callback;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function handleResponse(responseType: string, responseData: any) {
-	const callback = window.responseMap[responseType];
+	const callback = state.responseMap[responseType];
 	const data = parseResponse(responseType, responseData);
 
 	if (callback && data) {
@@ -97,6 +94,7 @@ export interface Color {
 	alpha: number;
 }
 function newColor(input: any): Color {
+	// TODO: Possibly change this in the Rust side to avoid any pitfalls
 	return { red: input.red * 255, green: input.green * 255, blue: input.blue * 255, alpha: input.alpha };
 }
 
diff --git a/client/web/wasm/src/lib.rs b/client/web/wasm/src/lib.rs
index ac6c4edd1..7701bec11 100644
--- a/client/web/wasm/src/lib.rs
+++ b/client/web/wasm/src/lib.rs
@@ -30,7 +30,7 @@ fn send_response(response_type: String, response_data: FrontendMessage) {
 	let _ = handleResponse(response_type, response_data).map_err(|error| log::error!("javascript threw an error: {:?}", error));
 }
 
-#[wasm_bindgen(module = "/../src/response-handler.ts")]
+#[wasm_bindgen(module = "/../src/utilities/response-handler-binding.ts")]
 extern "C" {
 	#[wasm_bindgen(catch)]
 	fn handleResponse(responseType: String, responseData: JsValue) -> Result<(), JsValue>;