From 8af5ae1bbbd2754cc002b2401cf5e0ccea3e3c70 Mon Sep 17 00:00:00 2001
From: Jordan Irwin <antumdeluge@gmail.com>
Date: Mon, 18 Mar 2024 03:05:57 -0700
Subject: [PATCH] Add option to enable/disable pinch & double-tap zoom

Closes: https://github.com/arianne/stendhal/issues/687
---
 .../java/org/stendhalgame/client/ClientView.java  |  6 +++---
 srcjs/stendhal.css                                |  5 -----
 srcjs/stendhal.html                               |  1 +
 srcjs/stendhal/ui/dialog/SettingsDialog.ts        |  8 ++++++++
 srcjs/stendhal/util/ConfigManager.ts              |  3 ++-
 srcjs/stendhal/util/SessionManager.ts             | 15 +++++++++++++++
 6 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/android/client/src/main/java/org/stendhalgame/client/ClientView.java b/app/android/client/src/main/java/org/stendhalgame/client/ClientView.java
index 741dc787a2e..ca2aa1e9bb9 100644
--- a/app/android/client/src/main/java/org/stendhalgame/client/ClientView.java
+++ b/app/android/client/src/main/java/org/stendhalgame/client/ClientView.java
@@ -130,9 +130,9 @@ private void onInit() {
 		viewSettings.setLoadWithOverviewMode(true);
 		viewSettings.setUseWideViewPort(true);
 
-		// disable zoom
-		viewSettings.setSupportZoom(false);
-		viewSettings.setBuiltInZoomControls(false);
+		// zoom controls
+		viewSettings.setSupportZoom(true);
+		viewSettings.setBuiltInZoomControls(true);
 		viewSettings.setDisplayZoomControls(false);
 
 		// allow autoplay of music
diff --git a/srcjs/stendhal.css b/srcjs/stendhal.css
index e4650cf9289..f7c83976d74 100644
--- a/srcjs/stendhal.css
+++ b/srcjs/stendhal.css
@@ -8,11 +8,6 @@
 	overflow: hidden;
 }
 
-/* disable double-tap zoom in browsers that support it */
-html {
-	touch-action: pan-x pan-y; /* manipulation does not work in Chrome */
-}
-
 /* disable pull down refresh in browsers that support it */
 html, body {
 	overscroll-behavior: none;
diff --git a/srcjs/stendhal.html b/srcjs/stendhal.html
index 7537fb19330..80db1557980 100644
--- a/srcjs/stendhal.html
+++ b/srcjs/stendhal.html
@@ -278,6 +278,7 @@ <h3></h3>
 			<label class="checksetting"><input type="checkbox" id="chk_activityindicator">Object activity indicator</label>
 			<label class="checksetting"><input type="checkbox" id="chk_floatchat">Floating chat panel</label>
 			<label class="checksetting"><input type="checkbox" id="chk_hidechat" class="experimental">Auto-hide chat panel</label>
+			<label class="checksetting"><input type="checkbox" id="chk_zoom">Touch zoom</label>
 		</div>
 		<div id="settings_panel2" class="verticalgroup vgroupcol">
 			<label class="checksetting"><input type="checkbox" id="chk_dblclick">Double-click items</label>
diff --git a/srcjs/stendhal/ui/dialog/SettingsDialog.ts b/srcjs/stendhal/ui/dialog/SettingsDialog.ts
index e61b1d68125..67f65b1ab56 100644
--- a/srcjs/stendhal/ui/dialog/SettingsDialog.ts
+++ b/srcjs/stendhal/ui/dialog/SettingsDialog.ts
@@ -102,6 +102,14 @@ export class SettingsDialog extends DialogContentComponent {
 		this.createCheckBox("chk_hidechat", "chat.autohide",
 				"Chat panel will be hidden after sending text", "Chat panel will remain on-screen");
 
+		// FIXME: are there unique properties for pinch & tap zooming?
+		this.createCheckBox("chk_zoom", "zoom.touch",
+				"Touch zooming enabled (may not work with all browsers)",
+				"Touch zooming disabled (may not work with all browsers)",
+				function() {
+					stendhal.session.update();
+				});
+
 
 		/* *** center panel *** */
 
diff --git a/srcjs/stendhal/util/ConfigManager.ts b/srcjs/stendhal/util/ConfigManager.ts
index bcd234896fe..7de915e65a2 100644
--- a/srcjs/stendhal/util/ConfigManager.ts
+++ b/srcjs/stendhal/util/ConfigManager.ts
@@ -80,7 +80,8 @@ export class ConfigManager {
 		"window.settings": "20,20",
 		"window.shortcuts": "20,20",
 		"window.trade": "200,100",
-		"window.travel-log": "160,50"
+		"window.travel-log": "160,50",
+		"zoom.touch": "false"
 	};
 
 	/**
diff --git a/srcjs/stendhal/util/SessionManager.ts b/srcjs/stendhal/util/SessionManager.ts
index 1278ae50ef8..b624943af6a 100644
--- a/srcjs/stendhal/util/SessionManager.ts
+++ b/srcjs/stendhal/util/SessionManager.ts
@@ -75,6 +75,8 @@ export class SessionManager {
 			}
 			this.set(key, value);
 		}
+
+		this.update();
 	}
 
 	/**
@@ -175,6 +177,19 @@ export class SessionManager {
 		return this.charname || "";
 	}
 
+	/**
+	 * Syncs inteface with updated settings.
+	 */
+	update() {
+		if (stendhal.config.getBoolean("zoom.touch")) {
+			document.documentElement.style.removeProperty("touch-action");
+		} else {
+			// disable double-tap zoom in browsers that support it
+			// NOTE: "manipulation" does not work in Chrome
+			document.documentElement.style.setProperty("touch-action", "pan-x pan-y");
+		}
+	}
+
 	/**
 	 * Detects if test client is being used based on data path.
 	 *