Merge pull request #1141 from elemoine/relay

Do not relay contextmenu and mousemove events

examples/gpx.html

@@ -47,6 +47,7 @@
 
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=gpx" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/gpx.js

@@ -28,9 +28,9 @@ var map = new ol.Map({
   })
 });
 
-map.on(['click', 'mousemove'], function(evt) {
+var displayFeatureInfo = function(pixel) {
   map.getFeatures({
-    pixel: evt.getPixel(),
+    pixel: pixel,
     layers: [vector],
     success: function(featuresByLayer) {
       var features = featuresByLayer[0];
@@ -41,4 +41,14 @@ map.on(['click', 'mousemove'], function(evt) {
       document.getElementById('info').innerHTML = info.join(', ') || ' ';
     }
   });
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  var pixel = evt.getPixel();
+  displayFeatureInfo(pixel);
 });

examples/kml-earthquakes.js

@@ -59,8 +59,8 @@ info.tooltip({
   animation: false,
   trigger: 'manual'
 });
-map.on(['click', 'mousemove'], function(evt) {
+
-  var pixel = evt.getPixel();
+var displayFeatureInfo = function(pixel) {
   info.css({
     left: pixel[0] + 'px',
     top: (pixel[1] - 15) + 'px'
@@ -80,4 +80,14 @@ map.on(['click', 'mousemove'], function(evt) {
       }
     }
   });
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  var pixel = evt.getPixel();
+  displayFeatureInfo(pixel);
 });

examples/kml-timezones.js

@@ -81,8 +81,8 @@ info.tooltip({
   animation: false,
   trigger: 'manual'
 });
-map.on(['click', 'mousemove'], function(evt) {
+
-  var pixel = evt.getPixel();
+var displayFeatureInfo = function(pixel) {
   info.css({
     left: pixel[0] + 'px',
     top: (pixel[1] - 15) + 'px'
@@ -102,4 +102,14 @@ map.on(['click', 'mousemove'], function(evt) {
       }
     }
   });
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  var pixel = evt.getPixel();
+  displayFeatureInfo(pixel);
 });

examples/kml.html

@@ -48,6 +48,7 @@
 
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=kml" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/kml.js

@@ -39,9 +39,9 @@ var map = new ol.Map({
   })
 });
 
-map.on(['click', 'mousemove'], function(evt) {
+var displayFeatureInfo = function(pixel) {
   map.getFeatures({
-    pixel: evt.getPixel(),
+    pixel: pixel,
     layers: [vector],
     success: function(featuresByLayer) {
       var features = featuresByLayer[0];
@@ -52,4 +52,14 @@ map.on(['click', 'mousemove'], function(evt) {
       document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
     }
   });
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  var pixel = evt.getPixel();
+  displayFeatureInfo(pixel);
 });

examples/vector-layer.html

@@ -48,6 +48,7 @@
 
     </div>
 
+    <script src="jquery.min.js" type="text/javascript"></script>
     <script src="loader.js?id=vector-layer" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
 

examples/vector-layer.js

@@ -64,9 +64,9 @@ var map = new ol.Map({
   })
 });
 
-map.on(['click', 'mousemove'], function(evt) {
+var displayFeatureInfo = function(pixel) {
   map.getFeatures({
-    pixel: evt.getPixel(),
+    pixel: pixel,
     layers: [vector],
     success: function(featuresByLayer) {
       var features = featuresByLayer[0];
@@ -75,4 +75,14 @@ map.on(['click', 'mousemove'], function(evt) {
           ' ';
     }
   });
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+  var pixel = map.getEventPixel(evt.originalEvent);
+  displayFeatureInfo(pixel);
+});
+
+map.on('click', function(evt) {
+  var pixel = evt.getPixel();
+  displayFeatureInfo(pixel);
 });

src/ol/map.js

@@ -237,7 +237,9 @@ ol.Map = function(options) {
     goog.events.EventType.CLICK,
     goog.events.EventType.DBLCLICK,
     ol.BrowserFeature.HAS_TOUCH ?
-        goog.events.EventType.TOUCHSTART : goog.events.EventType.MOUSEDOWN
+        goog.events.EventType.TOUCHSTART : goog.events.EventType.MOUSEDOWN,
+    ol.BrowserFeature.HAS_TOUCH ?
+        goog.events.EventType.TOUCHEND : goog.events.EventType.MOUSEUP
   ], goog.events.Event.stopPropagation);
   goog.dom.appendChild(this.viewport_, this.overlayContainerStopEvent_);
 
@@ -704,12 +706,7 @@ ol.Map.prototype.handleMapBrowserEvent = function(mapBrowserEvent) {
     // coordinates so interactions cannot be used.
     return;
   }
-  if (mapBrowserEvent.type == goog.events.EventType.MOUSEOUT ||
+  this.focus_ = mapBrowserEvent.getCoordinate();
-      mapBrowserEvent.type == goog.events.EventType.TOUCHEND) {
-    this.focus_ = null;
-  } else {
-    this.focus_ = mapBrowserEvent.getCoordinate();
-  }
   mapBrowserEvent.frameState = this.frameState_;
   var interactions = this.getInteractions();
   var interactionsArray = /** @type {Array.<ol.interaction.Interaction>} */

src/ol/mapbrowserevent.js

@@ -3,6 +3,7 @@ goog.provide('ol.MapBrowserEvent.EventType');
 goog.provide('ol.MapBrowserEventHandler');
 
 goog.require('goog.array');
+goog.require('goog.asserts');
 goog.require('goog.events');
 goog.require('goog.events.BrowserEvent');
 goog.require('goog.events.EventTarget');
@@ -121,20 +122,18 @@ ol.MapBrowserEventHandler = function(map) {
    */
   this.map_ = map;
 
+  /**
+   * @type {number}
+   * @private
+   */
+  this.clickTimeoutId_ = 0;
+
   /**
    * @type {boolean}
    * @private
    */
   this.dragged_ = false;
 
-  /**
-   * Timestamp for the first click of a double click. Will be set back to 0
-   * as soon as a double click is detected.
-   * @type {?number}
-   * @private
-   */
-  this.timestamp_ = null;
-
   /**
    * @type {Array.<number>}
    * @private
@@ -166,16 +165,7 @@ ol.MapBrowserEventHandler = function(map) {
         this.click_, false, this),
     goog.events.listen(element,
         goog.events.EventType.MOUSEDOWN,
-        this.handleMouseDown_, false, this),
+        this.handleMouseDown_, false, this)
-    goog.events.listen(element,
-        goog.events.EventType.MOUSEMOVE,
-        this.relayEvent_, false, this),
-    goog.events.listen(element,
-        goog.events.EventType.MOUSEOUT,
-        this.relayEvent_, false, this),
-    goog.events.listen(element,
-        goog.events.EventType.CONTEXTMENU,
-        this.relayEvent_, false, this)
   ];
   // touch events
   this.touchListenerKeys_ = [
@@ -205,7 +195,7 @@ ol.MapBrowserEventHandler.prototype.click_ = function(browserEvent) {
   if (!this.dragged_) {
     var newEvent;
     var type = browserEvent.type;
-    if (this.timestamp_ === 0 || type == goog.events.EventType.DBLCLICK) {
+    if (type == goog.events.EventType.DBLCLICK) {
       newEvent = new ol.MapBrowserEvent(
           ol.MapBrowserEvent.EventType.DBLCLICK, this.map_, browserEvent);
       this.dispatchEvent(newEvent);
@@ -332,17 +322,26 @@ ol.MapBrowserEventHandler.prototype.handleTouchEnd_ = function(browserEvent) {
       ol.MapBrowserEvent.EventType.TOUCHEND, this.map_, browserEvent);
   this.dispatchEvent(newEvent);
   if (!this.dragged_) {
-    var now = goog.now();
+    goog.asserts.assert(!goog.isNull(this.down_));
-    if (!this.timestamp_ || now - this.timestamp_ > 250) {
+    if (this.clickTimeoutId_ !== 0) {
-      this.timestamp_ = now;
+      // double-click
+      goog.global.clearTimeout(this.clickTimeoutId_);
+      this.clickTimeoutId_ = 0;
+      newEvent = new ol.MapBrowserEvent(
+          ol.MapBrowserEvent.EventType.DBLCLICK, this.map_, this.down_);
+      this.dispatchEvent(newEvent);
+      this.down_ = null;
     } else {
-      this.timestamp_ = 0;
+      // click
-    }
+      this.clickTimeoutId_ = goog.global.setTimeout(goog.bind(function() {
-    if (!goog.isNull(this.down_)) {
+        this.clickTimeoutId_ = 0;
-      this.click_(this.down_);
+        newEvent = new ol.MapBrowserEvent(
+            ol.MapBrowserEvent.EventType.CLICK, this.map_, this.down_);
+        this.dispatchEvent(newEvent);
+        this.down_ = null;
+      }, this), 250);
     }
   }
-  this.down_ = null;
 };
 
 
@@ -379,8 +378,5 @@ ol.MapBrowserEvent.EventType = {
   DRAGEND: 'dragend',
   TOUCHSTART: goog.events.EventType.TOUCHSTART,
   TOUCHMOVE: goog.events.EventType.TOUCHMOVE,
-  TOUCHEND: goog.events.EventType.TOUCHEND,
+  TOUCHEND: goog.events.EventType.TOUCHEND
-  MOUSEMOVE: goog.events.EventType.MOUSEMOVE,
-  MOUSEOUT: goog.events.EventType.MOUSEOUT,
-  CONTEXTMENU: goog.events.EventType.CONTEXTMENU
 };