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,86 +60,98 @@ 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;
+
+    function onClick(event: MouseEvent) {
+        const upperCanvas = document.querySelector(".upper-canvas");
+        if (event.target == upperCanvas) {
+            showAlignTools = false;
+        }
+    }
+
+    function onMousemove() {
+        if (spaceClicked || move) {
+            disableFunctions();
+            enablePan(canvas);
+        }
+    }
+
+    function onMouseup() {
+        if (spaceClicked) {
+            spaceClicked = false;
+        }
+        if (move) {
+            move = false;
+        }
+        disableFunctions();
+        handleToolChanges(activeTool);
+    }
+
+    function onKeyup(event: KeyboardEvent) {
+        if (
+            event.key === spaceKey ||
+            event.key === controlKey ||
+            event.key === shiftKey
+        ) {
+            spaceClicked = false;
+            controlClicked = false;
+            shiftClicked = false;
+            move = false;
 
-    onMount(() => {
-        window.addEventListener("mousedown", () => {
-            window.addEventListener("keydown", (ev) => {
-                if (ev.key === spaceKey) {
-                    spaceClicked = true;
-                }
-            });
-        });
-        window.addEventListener("mousemove", () => {
-            if (spaceClicked || move) {
-                disableFunctions();
-                enablePan(canvas);
-            }
-        });
-        window.addEventListener("mouseup", () => {
-            if (spaceClicked) {
-                spaceClicked = false;
-            }
-            if (move) {
-                move = false;
-            }
             disableFunctions();
             handleToolChanges(activeTool);
-        });
+        }
-        window.addEventListener("keyup", (event) => {
+    }
-            if (
-                event.key === spaceKey ||
-                event.key === controlKey ||
-                event.key === shiftKey
-            ) {
-                spaceClicked = false;
-                controlClicked = false;
-                shiftClicked = false;
-                move = false;
 
-                disableFunctions();
+    function onKeydown(event: KeyboardEvent) {
-                handleToolChanges(activeTool);
+        if (event.key === spaceKey) {
-            }
+            spaceClicked = true;
-        });
+        }
-        window.addEventListener("keydown", (event) => {
+        if (event.key === controlKey) {
-            if (event.key === spaceKey) {
+            controlClicked = true;
-                spaceClicked = true;
+        }
-            }
+        if (event.key === shiftKey) {
-            if (event.key === controlKey) {
+            shiftClicked = true;
-                controlClicked = true;
+        }
-            }
+    }
-            if (event.key === shiftKey) {
-                shiftClicked = true;
-            }
-        });
-        window.addEventListener("wheel", (event) => {
-            if (event.ctrlKey) {
-                controlClicked = true;
-            }
-            if (event.shiftKey) {
-                shiftClicked = true;
-            }
-        });
-        window.addEventListener(
-            "wheel",
-            (event) => {
-                event.preventDefault();
 
-                if (controlClicked) {
+    function onWheel(event: WheelEvent) {
-                    disableFunctions();
+        if (event.ctrlKey) {
-                    enableZoom(canvas);
+            controlClicked = true;
-                    return;
+        }
-                }
+        if (event.shiftKey) {
+            shiftClicked = true;
+        }
 
-                if (shiftClicked) {
+        event.preventDefault();
-                    onWheelDragX(canvas, event);
-                    return;
-                }
 
-                onWheelDrag(canvas, event);
+        if (controlClicked) {
-            },
+            disableFunctions();
-            { passive: false },
+            enableZoom(canvas);
-        );
+            return;
-    });
+        }
+
+        if (shiftClicked) {
+            onWheelDragX(canvas, event);
+            return;
+        }
+
+        onWheelDrag(canvas, event);
+    }
+
+    // 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;