From 4b7fa9865aa5d43ff68af6df30bfb4eefb898490 Mon Sep 17 00:00:00 2001
From: Kevin Schaul <kevin.schaul@gmail.com>
Date: Mon, 30 Jan 2023 11:10:00 -0600
Subject: [PATCH] Change how meta key is detected for coop. gestures

UIEvents like 'wheel' include properties for whether some keys are
currently pressed, including ctrl and meta. [0] This should be less
prone to error, specifically when the user presses or depresses one of
these keys while the browser document is not active.

Adds a debug page for cooperative gestures because this feature cannot
be tested with a fullscreen map, and the only other test page is
a fullscreen map.

[0] https://w3c.github.io/uievents/#dom-mouseevent-ctrlkey
---
 src/ui/handler/scroll_zoom.ts              |   2 +-
 src/ui/map.ts                              |  15 +-
 test/debug-pages/cooperative-gestures.html | 152 +++++++++++++++++++++
 3 files changed, 157 insertions(+), 12 deletions(-)
 create mode 100644 test/debug-pages/cooperative-gestures.html

diff --git a/src/ui/handler/scroll_zoom.ts b/src/ui/handler/scroll_zoom.ts
index 936c549bbd..854dc6428a 100644
--- a/src/ui/handler/scroll_zoom.ts
+++ b/src/ui/handler/scroll_zoom.ts
@@ -158,7 +158,7 @@ class ScrollZoomHandler {
     wheel(e: WheelEvent) {
         if (!this.isEnabled()) return;
         if (this._map._cooperativeGestures) {
-            if (this._map._metaPress) {
+            if (e[this._map._metaKey]) {
                 e.preventDefault();
             } else {
                 return;
diff --git a/src/ui/map.ts b/src/ui/map.ts
index d73a56dac0..a764171c6b 100644
--- a/src/ui/map.ts
+++ b/src/ui/map.ts
@@ -297,7 +297,7 @@ class Map extends Camera {
     _interactive: boolean;
     _cooperativeGestures: boolean | GestureOptions;
     _cooperativeGesturesScreen: HTMLElement;
-    _metaPress: boolean;
+    _metaKey: string;
     _showTileBoundaries: boolean;
     _showCollisionBoxes: boolean;
     _showPadding: boolean;
@@ -2589,28 +2589,21 @@ class Map extends Camera {
 
     _setupCooperativeGestures() {
         const container = this._container;
-        this._metaPress = false;
         this._cooperativeGesturesScreen = DOM.create('div', 'maplibregl-cooperative-gesture-screen', container);
-        let modifierKeyName = 'Control';
+        this._metaKey = 'ctrlKey';
         let desktopMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.windowsHelpText ? this._cooperativeGestures.windowsHelpText : 'Use Ctrl + scroll to zoom the map';
         if (navigator.platform.indexOf('Mac') === 0) {
             desktopMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.macHelpText ? this._cooperativeGestures.macHelpText : 'Use ⌘ + scroll to zoom the map';
-            modifierKeyName = 'Meta';
+            this._metaKey = 'metaKey';
         }
         const mobileMessage = typeof this._cooperativeGestures !== 'boolean' && this._cooperativeGestures.mobileHelpText ? this._cooperativeGestures.mobileHelpText : 'Use two fingers to move the map';
         this._cooperativeGesturesScreen.innerHTML = `
             <div class="maplibregl-desktop-message">${desktopMessage}</div>
             <div class="maplibregl-mobile-message">${mobileMessage}</div>
         `;
-        document.addEventListener('keydown', (event) => {
-            if (event.key === modifierKeyName) this._metaPress = true;
-        });
-        document.addEventListener('keyup', (event) => {
-            if (event.key === modifierKeyName) this._metaPress = false;
-        });
         // Add event to canvas container since gesture container is pointer-events: none
         this._canvasContainer.addEventListener('wheel', (e) => {
-            this._onCooperativeGesture(e, this._metaPress, 1);
+            this._onCooperativeGesture(e, e[this._metaKey], 1);
         }, false);
         // Remove the traditional pan classes
         this._canvasContainer.classList.remove('maplibregl-touch-drag-pan');
diff --git a/test/debug-pages/cooperative-gestures.html b/test/debug-pages/cooperative-gestures.html
new file mode 100644
index 0000000000..3fd87b2096
--- /dev/null
+++ b/test/debug-pages/cooperative-gestures.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>MapLibre GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='../../dist/maplibre-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body { height: 2000px; }
+        #map {
+            height: 300px;
+            margin-top: 100px;
+        }
+
+        #checkboxes {
+            position: absolute;
+            background: #fff;
+            top:0;
+            left:0;
+            padding:10px;
+        }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<div id='checkboxes'>
+    <label><input id='show-tile-boundaries-checkbox' type='checkbox'> tile debug</label><br />
+    <label><input id='show-symbol-collision-boxes-checkbox' type='checkbox'> collision debug</label><br />
+    <label><input id='show-overdraw-checkbox' type='checkbox'> overdraw debug</label><br />
+    <label><input id='pitch-checkbox' type='checkbox' checked> pitch with rotate</label><br />
+</div>
+
+<script src='../../dist/maplibre-gl-dev.js'></script>
+<script>
+
+var map = window.map = new maplibregl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'https://demotiles.maplibre.org/style.json',
+    hash: true,
+    cooperativeGestures: true
+});
+
+map.addControl(new maplibregl.NavigationControl());
+map.addControl(new maplibregl.GeolocateControl({
+    positionOptions: {
+        enableHighAccuracy: true
+    },
+    trackUserLocation: true,
+    showUserLocation: true,
+    fitBoundsOptions: {
+        maxZoom: 20
+    }
+}));
+map.addControl(new maplibregl.ScaleControl());
+map.addControl(new maplibregl.FullscreenControl());
+
+map.on('load', function() {
+    map.addSource('geojson', {
+        'type': 'geojson',
+        'data': '../integration/assets/data/linestring.geojson',
+        'attribution': 'GeoJSON Attribution'
+    });
+    map.addLayer({
+        'id': 'route',
+        'type': 'line',
+        'source': 'geojson',
+        'paint': {
+            'line-color': '#EC8D8D',
+            'line-width': {'base': 1.5, 'stops': [[5, 0.75], [18, 32]]}
+        }
+    }, 'country-label-lg');
+
+    map.addSource('points', {
+        'type': 'geojson',
+        'data': '/test/debug-pages/cross_source_points.geojson'
+    });
+
+    map.addLayer({
+        'id': 'points',
+        'type': 'symbol',
+        'source': 'points',
+        'layout': {
+            'text-field': '{name}',
+            'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold']
+        }
+    });
+
+    map.addLayer({
+        id: 'marker',
+        type: 'symbol',
+        source: 'points',
+        layout: {
+            'icon-image': 'bus-11',
+            'icon-size': 2,
+            'icon-ignore-placement': true,
+            'icon-allow-overlap': true
+        }
+    });
+
+    map.addLayer({
+        id: 'marker-hover',
+        type: 'symbol',
+        filter: ['==', 'name', ''],
+        source: 'points',
+        layout: {
+            'icon-image': 'bus-15',
+            'icon-size': 2,
+            'icon-ignore-placement': true,
+            'icon-allow-overlap': true
+        }
+    });
+
+    map.on('mouseenter', 'marker', function(e) {
+        map.setFilter('marker-hover', ['==', 'name', e.features[0].properties.name]);
+    });
+    map.on('mouseleave', 'marker', function(_) {
+        map.setFilter('marker-hover', ['==', 'name', '']);
+    });
+
+});
+
+map.on('click', function(e) {
+    if (e.originalEvent.shiftKey) return;
+    (new maplibregl.Popup())
+        .setLngLat(map.unproject(e.point))
+        .setHTML('<h1>Hello World!</h1>')
+        .addTo(map);
+});
+
+document.getElementById('show-tile-boundaries-checkbox').onclick = function() {
+    map.showTileBoundaries = !!this.checked;
+};
+
+document.getElementById('show-symbol-collision-boxes-checkbox').onclick = function() {
+    map.showCollisionBoxes = !!this.checked;
+};
+
+document.getElementById('show-overdraw-checkbox').onclick = function() {
+    map.showOverdrawInspector = !!this.checked;
+};
+
+document.getElementById('pitch-checkbox').onclick = function() {
+    map.dragRotate._pitchWithRotate = !!this.checked;
+};
+
+</script>
+</body>
+</html>