Redispatch compass mouse events to canvasContainer (closes #1104)

mapbox · Nov 18, 2015 · 73a15d8 · 73a15d8
1 parent c6da72b
commit 73a15d8
Showing 1 changed file with 22 additions and 18 deletions.
diff --git a/js/ui/control/navigation.js b/js/ui/control/navigation.js
@@ -27,6 +27,7 @@ Navigation.prototype = util.inherit(Control, {
         var className = 'mapboxgl-ctrl';
 
         var container = this._container = DOM.create('div', className + '-group', map.getContainer());
+        this._container.addEventListener('contextmenu', this._onContextMenu.bind(this));
 
         this._zoomInButton = this._createButton(className + '-icon ' + className + '-zoom-in', map.zoomIn.bind(map));
         this._zoomOutButton = this._createButton(className + '-icon ' + className + '-zoom-out', map.zoomOut.bind(map));
@@ -41,45 +42,48 @@ Navigation.prototype = util.inherit(Control, {
         map.on('rotate', this._rotateCompassArrow.bind(this));
         this._rotateCompassArrow();
 
+        this._el = map.getCanvasContainer();
+
         return container;
     },
 
+    _onContextMenu: function(e) {
+        e.preventDefault();
+    },
+
     _onCompassDown: function(e) {
-        DOM.disableDrag();
+        if (e.button !== 0) return;
 
+        DOM.disableDrag();
         document.addEventListener('mousemove', this._onCompassMove);
         document.addEventListener('mouseup', this._onCompassUp);
-        this._prevX = e.screenX;
+
+        var evt = new MouseEvent('mousedown', util.extend({}, e, { button: 2, buttons: 2 }));
+        this._el.dispatchEvent(evt);
 
         e.stopPropagation();
     },
 
     _onCompassMove: function(e) {
-        var x = e.screenX,
-            d = x < 2 ? -5 : // left edge of the screen, continue rotating
-                x > window.screen.width - 2 ? 5 : // right edge
-                (x - this._prevX) / 4;
+        if (e.button !== 0) return;
 
-        this._map.setBearing(this._map.getBearing() - d);
-        this._prevX = e.screenX;
-        this._moved = true;
+        var evt = new MouseEvent('mousemove', util.extend({}, e, { button: 2, buttons: 2 }));
+        this._el.dispatchEvent(evt);
 
-        e.preventDefault();
+        e.stopPropagation();
     },
 
-    _onCompassUp: function() {
+    _onCompassUp: function(e) {
+        if (e.button !== 0) return;
+
         document.removeEventListener('mousemove', this._onCompassMove);
         document.removeEventListener('mouseup', this._onCompassUp);
         DOM.enableDrag();
 
-        if (this._moved) {
-            this._moved = false;
-            DOM.suppressClick();
-        } else {
-            this._map.setPitch(0);
-        }
+        var evt = new MouseEvent('mouseup', util.extend({}, e, { button: 2, buttons: 2 }));
+        this._el.dispatchEvent(evt);
 
-        this._map.snapToNorth();
+        e.stopPropagation();
     },
 
     _createButton: function(className, fn) {