From 8824082cebb38fa6c2ee9a568f762cccebff5ad6 Mon Sep 17 00:00:00 2001
From: flx-sta <50131232+flx-sta@users.noreply.github.com>
Date: Tue, 28 May 2024 12:02:49 -0700
Subject: [PATCH] Fix for the zoom issue (#1326) (#1329)

* #1326: add touchstart event to dpadCenter to prevent zoom behavior

* #1326: improve variable naming for preventElementZoom

* #1326: change selector to "#dpad"

instead of just "#dpadCenter"
---
 src/touch-controls.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/touch-controls.js b/src/touch-controls.js
index 8390df50ec8..e0729573139 100644
--- a/src/touch-controls.js
+++ b/src/touch-controls.js
@@ -115,3 +115,29 @@ function bindKey(node, key, buttonMap) {
     }
   });
 }
+
+/**
+ * {@link https://stackoverflow.com/a/39778831/4622620|Source}
+ *
+ * Prevent zoom on specified element
+ * @param {HTMLElement} element
+ */
+function preventElementZoom(element) {
+  element.addEventListener("touchstart", (event) => {
+    const currentTouchTimeStamp = event.timeStamp;
+    const previousTouchTimeStamp = event.currentTarget.dataset.lastTouchTimeStamp || currentTouchTimeStamp;
+    const timeStampDifference = currentTouchTimeStamp - previousTouchTimeStamp;
+    const fingers = event.touches.length;
+    event.currentTarget.dataset.lastTouchTimeStamp = currentTouchTimeStamp;
+
+    if (!timeStampDifference || timeStampDifference > 500 || fingers > 1) {
+      return;
+    } // not double-tap
+
+    event.preventDefault();
+    event.target.click();
+  });
+}
+
+const dpadDiv = document.querySelector("#dpad");
+preventElementZoom(dpadDiv);