From 93b3688538882181adf81942379a2e005347be66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@synacek.org>
Date: Sun, 19 Nov 2023 20:23:39 +0100
Subject: [PATCH] fix multiple clicks

Whenever button was activated (either via mouse or keyboard or gamepad),
the related handler would be triggered multiple times.

This was caused by the logic in panel module and the reason behind this
was that the handlers were attached repeatedly whenever fill tool
was used.

Fill tools deactivates & activates UI. During activation, the panel
would re-attach handlers **but** without discarding the old handlers.

This resulted in multiple handlers being fired, e.g. prompt for clearing
canvas shown multiple times.
---
 js/ui/panel.mjs | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/js/ui/panel.mjs b/js/ui/panel.mjs
index 0af8c7a..521bbe9 100644
--- a/js/ui/panel.mjs
+++ b/js/ui/panel.mjs
@@ -50,13 +50,19 @@ function activatePanelButtonOnCoordinates(x, y) {
 }
 
 function attachMouseListeners() {
-  window.addEventListener("click", (event) => {
+  function handleMouseClick(event) {
     activatePanelButtonOnCoordinates(event.clientX, event.clientY);
-  });
+  }
+
+  window.addEventListener("click", handleMouseClick);
+
+  return function dispose() {
+    window.removeEventListener("click", handleMouseClick);
+  };
 }
 
 function attachKeyboardListeners(state) {
-  window.addEventListener("keydown", (event) => {
+  function handleKeyDown(event) {
     if (event.key !== "Enter") {
       return;
     }
@@ -64,7 +70,13 @@ function attachKeyboardListeners(state) {
     const cursor = state.get((prevState) => prevState.cursor);
 
     activatePanelButtonOnCoordinates(cursor.x, cursor.y);
-  });
+  }
+
+  window.addEventListener("keydown", handleKeyDown);
+
+  return function dispose() {
+    window.removeEventListener("keydown", handleKeyDown);
+  };
 }
 
 function attachGamepadListeners(state) {