Revert broken compass touch support; fix flow issues and passive even…

…ts on iOS (#8292)

* Revert "Add touch support for NavigationControl's compass button + add pitch indication to icon (#8226)"

This reverts commit 8e9a34b.

* fix passive events regression on iOS

src/ui/control/navigation_control.js

@@ -68,7 +68,7 @@ class NavigationControl {
     }
 
     _rotateCompassArrow() {
-        const rotate = `rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle * (180 / Math.PI)}deg)`;
+        const rotate = `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
         this._compassArrow.style.transform = rotate;
     }
 
@@ -80,11 +80,9 @@ class NavigationControl {
         }
         if (this.options.showCompass) {
             this._map.on('rotate', this._rotateCompassArrow);
-            this._map.on('pitch', this._rotateCompassArrow);
             this._rotateCompassArrow();
             this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass});
             DOM.addEventListener(this._compass, 'mousedown', this._handler.onMouseDown);
-            DOM.addEventListener(this._compass, 'touchstart', this._handler.onMouseDown);
             this._handler.enable();
         }
         return this._container;
@@ -97,9 +95,7 @@ class NavigationControl {
         }
         if (this.options.showCompass) {
             this._map.off('rotate', this._rotateCompassArrow);
-            this._map.off('pitch', this._rotateCompassArrow);
             DOM.removeEventListener(this._compass, 'mousedown', this._handler.onMouseDown);
-            DOM.removeEventListener(this._compass, 'touchstart', this._handler.onMouseDown);
             this._handler.disable();
             delete this._handler;
         }

src/ui/handler/drag_rotate.js

@@ -128,16 +128,12 @@ class DragRotateHandler {
     onMouseDown(e: MouseEvent) {
         if (this._state !== 'enabled') return;
 
-        const touchEvent = e.type === 'touchstart';
-
-        if (!touchEvent) {
-            if (this._button === 'right') {
-                this._eventButton = DOM.mouseButton(e);
-                if (this._eventButton !== (e.ctrlKey ? 0 : 2)) return;
-            } else {
-                if (e.ctrlKey || DOM.mouseButton(e) !== 0) return;
-                this._eventButton = 0;
-            }
+        if (this._button === 'right') {
+            this._eventButton = DOM.mouseButton(e);
+            if (this._eventButton !== (e.ctrlKey ? 0 : 2)) return;
+        } else {
+            if (e.ctrlKey || DOM.mouseButton(e) !== 0) return;
+            this._eventButton = 0;
         }
 
         DOM.disableDrag();
@@ -147,32 +143,23 @@ class DragRotateHandler {
         // window-level event listeners give us the best shot at capturing events that
         // fall outside the map canvas element. Use `{capture: true}` for the move event
         // to prevent map move events from being fired during a drag.
-        const moveEvent = touchEvent ? 'touchmove' : 'mousemove';
-        const upEvent = touchEvent ? 'touchend' : 'mouseup';
-
-        window.document.addEventListener(moveEvent, this._onMouseMove, { capture: true });
-        window.document.addEventListener(upEvent, this._onMouseUp);
+        window.document.addEventListener('mousemove', this._onMouseMove, {capture: true});
+        window.document.addEventListener('mouseup', this._onMouseUp);
 
         // Deactivate when the window loses focus. Otherwise if a mouseup occurs when the window
         // isn't in focus, dragging will continue even though the mouse is no longer pressed.
         window.addEventListener('blur', this._onBlur);
 
         this._state = 'pending';
         this._inertia = [[browser.now(), this._map.getBearing()]];
-        this._startPos = this._lastPos = touchEvent ?
-            DOM.touchPos(this._el, e)[0] :
-            DOM.mousePos(this._el, e);
+        this._startPos = this._lastPos = DOM.mousePos(this._el, e);
         this._center = this._map.transform.centerPoint;  // Center of rotation
 
         e.preventDefault();
     }
 
     _onMouseMove(e: MouseEvent) {
-        const touchEvent = e.type === 'touchmove';
-        const pos = touchEvent ?
-            DOM.touchPos(this._el, e)[0] :
-            DOM.mousePos(this._el, e);
-
+        const pos = DOM.mousePos(this._el, e);
         if (this._lastPos.equals(pos)) {
             return;
         }
@@ -227,13 +214,6 @@ class DragRotateHandler {
     }
 
     _onMouseUp(e: MouseEvent) {
-        const touchEvent = e.type === 'touchend';
-
-        if (touchEvent) {
-            if (this._lastPos === this._startPos) {
-                this._el.click();
-            }
-        }
         if (DOM.mouseButton(e) !== this._eventButton) return;
         switch (this._state) {
         case 'active':
@@ -278,8 +258,6 @@ class DragRotateHandler {
     _unbind() {
         window.document.removeEventListener('mousemove', this._onMouseMove, {capture: true});
         window.document.removeEventListener('mouseup', this._onMouseUp);
-        window.document.removeEventListener('touchmove', this._onMouseMove, { capture: true });
-        window.document.removeEventListener('touchend', this._onMouseUp);
         window.removeEventListener('blur', this._onBlur);
         DOM.enableDrag();
     }

src/util/dom.js

@@ -60,12 +60,12 @@ DOM.setTransform = function(el: HTMLElement, value: string) {
 let passiveSupported = false;
 
 try {
+    // https://github.com/facebook/flow/issues/285
+    // $FlowFixMe
     const options = Object.defineProperty({}, "passive", {
-        get() {
+        get() { // eslint-disable-line
             passiveSupported = true;
-            return false;
-        },
-        value: false
+        }
     });
     window.addEventListener("test", options, options);
     window.removeEventListener("test", options, options);