Fix spacebar causing stutter when editing cards (#3150)

* Fix spacebar causing stutter when editing cards

* Remove IO toolbar event handlers on unmount

* Remove nested keydown handlers

ts/routes/image-occlusion/Toolbar.svelte

@@ -5,8 +5,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr from "@generated/ftl";
     import { directionKey } from "@tslib/context-keys";
+    import { on } from "@tslib/events";
     import { getPlatformString } from "@tslib/shortcuts";
-    import { getContext, onMount } from "svelte";
+    import type { Callback } from "@tslib/typing";
+    import { singleCallback } from "@tslib/typing";
+    import { getContext, onDestroy, onMount } from "svelte";
     import type { Readable } from "svelte/store";
 
     import DropdownItem from "$lib/components/DropdownItem.svelte";
@@ -49,14 +52,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let maksOpacity = false;
     let showFloating = false;
     const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);
-
-    document.addEventListener("click", (event) => {
-        const upperCanvas = document.querySelector(".upper-canvas");
-        if (event.target == upperCanvas) {
-            showAlignTools = false;
-        }
-    });
-
     // handle zoom event when mouse scroll and ctrl key are hold for panzoom
     let spaceClicked = false;
     let controlClicked = false;
@@ -65,22 +60,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     const spaceKey = " ";
     const controlKey = "Control";
     const shiftKey = "Shift";
+    let removeHandlers: Callback;
 
-    onMount(() => {
+    function onClick(event: MouseEvent) {
-        window.addEventListener("mousedown", () => {
+        const upperCanvas = document.querySelector(".upper-canvas");
-            window.addEventListener("keydown", (ev) => {
+        if (event.target == upperCanvas) {
-                if (ev.key === spaceKey) {
+            showAlignTools = false;
-                    spaceClicked = true;
         }
-            });
+    }
-        });
+
-        window.addEventListener("mousemove", () => {
+    function onMousemove() {
         if (spaceClicked || move) {
             disableFunctions();
             enablePan(canvas);
         }
-        });
+    }
-        window.addEventListener("mouseup", () => {
+
+    function onMouseup() {
         if (spaceClicked) {
             spaceClicked = false;
         }
@@ -89,8 +85,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
         disableFunctions();
         handleToolChanges(activeTool);
-        });
+    }
-        window.addEventListener("keyup", (event) => {
+
+    function onKeyup(event: KeyboardEvent) {
         if (
             event.key === spaceKey ||
             event.key === controlKey ||
@@ -104,8 +101,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             disableFunctions();
             handleToolChanges(activeTool);
         }
-        });
+    }
-        window.addEventListener("keydown", (event) => {
+
+    function onKeydown(event: KeyboardEvent) {
         if (event.key === spaceKey) {
             spaceClicked = true;
         }
@@ -115,18 +113,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         if (event.key === shiftKey) {
             shiftClicked = true;
         }
-        });
+    }
-        window.addEventListener("wheel", (event) => {
+
+    function onWheel(event: WheelEvent) {
         if (event.ctrlKey) {
             controlClicked = true;
         }
         if (event.shiftKey) {
             shiftClicked = true;
         }
-        });
+
-        window.addEventListener(
-            "wheel",
-            (event) => {
         event.preventDefault();
 
         if (controlClicked) {
@@ -141,10 +137,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         }
 
         onWheelDrag(canvas, event);
-            },
+    }
-            { passive: false },
+
-        );
+    // initializes lastPosX and lastPosY because it is undefined in touchmove event
-    });
+    function onTouchstart(event: TouchEvent) {
+        canvas.lastPosX = event.touches[0].clientX;
+        canvas.lastPosY = event.touches[0].clientY;
+    }
+
+    // initializes lastPosX and lastPosY because it is undefined before mousemove event
+    function onMousemoveDocument(event: MouseEvent) {
+        if (spaceClicked) {
+            canvas.lastPosX = event.clientX;
+            canvas.lastPosY = event.clientY;
+        }
+    }
 
     const handleToolChanges = (activeTool: string) => {
         disableFunctions();
@@ -188,6 +195,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         $hideAllGuessOne = occlusionType === "all";
         emitChangeSignal();
     }
+
+    onMount(() => {
+        removeHandlers = singleCallback(
+            on(document, "click", onClick),
+            on(window, "mousemove", onMousemove),
+            on(window, "mouseup", onMouseup),
+            on(window, "keyup", onKeyup),
+            on(window, "keydown", onKeydown),
+            on(window, "wheel", onWheel, { passive: false }),
+            on(document, "touchstart", onTouchstart),
+            on(document, "mousemove", onMousemoveDocument),
+        );
+    });
+
+    onDestroy(() => {
+        removeHandlers();
+    });
 </script>
 
 <div class="tool-bar-container">

ts/routes/image-occlusion/tools/tool-zoom.ts

@@ -132,24 +132,6 @@ export const onMouseMove = (opt) => {
     onDrag(canvas, opt);
 };
 
-// initializes lastPosX and lastPosY because it is undefined in touchmove event
-document.addEventListener("touchstart", (e) => {
-    const canvas = globalThis.canvas;
-    canvas.lastPosX = e.touches[0].clientX;
-    canvas.lastPosY = e.touches[0].clientY;
-});
-
-// initializes lastPosX and lastPosY because it is undefined before mousemove event
-document.addEventListener("mousemove", (event) => {
-    document.addEventListener("keydown", (e) => {
-        if (e.key === " ") {
-            const canvas = globalThis.canvas;
-            canvas.lastPosX = event.clientX;
-            canvas.lastPosY = event.clientY;
-        }
-    });
-});
-
 export const onPinchZoom = (opt): boolean => {
     const { e } = opt;
     const canvas = globalThis.canvas;