From 1c051aa05590ab54c0c43b4af1eff23c826cdbfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 17 Oct 2013 14:23:28 +0200 Subject: [PATCH 1/8] Do not relay contextmenu events --- src/ol/mapbrowserevent.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/ol/mapbrowserevent.js b/src/ol/mapbrowserevent.js index 382954e5a7..67c43e9ae3 100644 --- a/src/ol/mapbrowserevent.js +++ b/src/ol/mapbrowserevent.js @@ -172,9 +172,6 @@ ol.MapBrowserEventHandler = function(map) { 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 @@ -381,6 +378,5 @@ ol.MapBrowserEvent.EventType = { TOUCHMOVE: goog.events.EventType.TOUCHMOVE, TOUCHEND: goog.events.EventType.TOUCHEND, MOUSEMOVE: goog.events.EventType.MOUSEMOVE, - MOUSEOUT: goog.events.EventType.MOUSEOUT, - CONTEXTMENU: goog.events.EventType.CONTEXTMENU + MOUSEOUT: goog.events.EventType.MOUSEOUT }; From 938f45a03260ded9e1adcff201bd93db322b3140 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 17 Oct 2013 14:25:36 +0200 Subject: [PATCH 2/8] Do not relay mousemove events --- src/ol/mapbrowserevent.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/ol/mapbrowserevent.js b/src/ol/mapbrowserevent.js index 67c43e9ae3..b0f04e3271 100644 --- a/src/ol/mapbrowserevent.js +++ b/src/ol/mapbrowserevent.js @@ -167,9 +167,6 @@ ol.MapBrowserEventHandler = function(map) { goog.events.listen(element, goog.events.EventType.MOUSEDOWN, 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) @@ -377,6 +374,5 @@ ol.MapBrowserEvent.EventType = { TOUCHSTART: goog.events.EventType.TOUCHSTART, TOUCHMOVE: goog.events.EventType.TOUCHMOVE, TOUCHEND: goog.events.EventType.TOUCHEND, - MOUSEMOVE: goog.events.EventType.MOUSEMOVE, MOUSEOUT: goog.events.EventType.MOUSEOUT }; From fe3440a83d6fd3fee4ef3c76c56013f999ea046f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 17 Oct 2013 14:35:33 +0200 Subject: [PATCH 3/8] Use jQuery to listen to map mousemove in examples This commit also removes the click listener, which was used for touch devices. The click listener will be added back when the lib will correctly handle clicks on touch devices. --- examples/gpx.html | 1 + examples/gpx.js | 6 ++++-- examples/kml-earthquakes.js | 6 ++++-- examples/kml-timezones.js | 6 ++++-- examples/kml.html | 1 + examples/kml.js | 6 ++++-- examples/vector-layer.html | 1 + examples/vector-layer.js | 6 ++++-- 8 files changed, 23 insertions(+), 10 deletions(-) diff --git a/examples/gpx.html b/examples/gpx.html index f0997c44fb..fbb0d2b084 100644 --- a/examples/gpx.html +++ b/examples/gpx.html @@ -47,6 +47,7 @@ + diff --git a/examples/gpx.js b/examples/gpx.js index bf0dbcff35..0f005a900f 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -28,9 +28,11 @@ var map = new ol.Map({ }) }); -map.on(['click', 'mousemove'], function(evt) { +// FIXME support touch devices +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); map.getFeatures({ - pixel: evt.getPixel(), + pixel: pixel, layers: [vector], success: function(featuresByLayer) { var features = featuresByLayer[0]; diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js index 826f1fb54f..80ecfecfdd 100644 --- a/examples/kml-earthquakes.js +++ b/examples/kml-earthquakes.js @@ -59,8 +59,10 @@ info.tooltip({ animation: false, trigger: 'manual' }); -map.on(['click', 'mousemove'], function(evt) { - var pixel = evt.getPixel(); + +// FIXME support touch devices +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js index 80524a9e00..704c87d336 100644 --- a/examples/kml-timezones.js +++ b/examples/kml-timezones.js @@ -81,8 +81,10 @@ info.tooltip({ animation: false, trigger: 'manual' }); -map.on(['click', 'mousemove'], function(evt) { - var pixel = evt.getPixel(); + +// FIXME support touch devices +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' diff --git a/examples/kml.html b/examples/kml.html index c3d95e7119..8dab466f48 100644 --- a/examples/kml.html +++ b/examples/kml.html @@ -48,6 +48,7 @@ + diff --git a/examples/kml.js b/examples/kml.js index d99e343ecc..666529ef95 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -39,9 +39,11 @@ var map = new ol.Map({ }) }); -map.on(['click', 'mousemove'], function(evt) { +// FIXME support touch devices +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); map.getFeatures({ - pixel: evt.getPixel(), + pixel: pixel, layers: [vector], success: function(featuresByLayer) { var features = featuresByLayer[0]; diff --git a/examples/vector-layer.html b/examples/vector-layer.html index e9ecdd5aea..038a1b9eea 100644 --- a/examples/vector-layer.html +++ b/examples/vector-layer.html @@ -48,6 +48,7 @@ + diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 8ce9b792bf..fc02c28a3c 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -64,9 +64,11 @@ var map = new ol.Map({ }) }); -map.on(['click', 'mousemove'], function(evt) { +// FIXME support touch devices +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); map.getFeatures({ - pixel: evt.getPixel(), + pixel: pixel, layers: [vector], success: function(featuresByLayer) { var features = featuresByLayer[0]; From 70eb5a5f1355482294c531aa5360bd05de339b9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Wed, 16 Oct 2013 18:20:52 +0200 Subject: [PATCH 4/8] Emulate click and dblclick on touch devices --- src/ol/mapbrowserevent.js | 42 +++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/src/ol/mapbrowserevent.js b/src/ol/mapbrowserevent.js index b0f04e3271..0faedd3b2e 100644 --- a/src/ol/mapbrowserevent.js +++ b/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.} * @private @@ -199,7 +198,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); @@ -326,17 +325,26 @@ ol.MapBrowserEventHandler.prototype.handleTouchEnd_ = function(browserEvent) { ol.MapBrowserEvent.EventType.TOUCHEND, this.map_, browserEvent); this.dispatchEvent(newEvent); if (!this.dragged_) { - var now = goog.now(); - if (!this.timestamp_ || now - this.timestamp_ > 250) { - this.timestamp_ = now; + goog.asserts.assert(!goog.isNull(this.down_)); + if (this.clickTimeoutId_ !== 0) { + // 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; - } - if (!goog.isNull(this.down_)) { - this.click_(this.down_); + // click + this.clickTimeoutId_ = goog.global.setTimeout(goog.bind(function() { + this.clickTimeoutId_ = 0; + newEvent = new ol.MapBrowserEvent( + ol.MapBrowserEvent.EventType.CLICK, this.map_, this.down_); + this.dispatchEvent(newEvent); + this.down_ = null; + }, this), 250); } } - this.down_ = null; }; From 4c7f30c139963d71922bafa096c00202c72bc4cd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 17 Oct 2013 15:04:02 +0200 Subject: [PATCH 5/8] Make overlay container stop touchend and mouseup --- src/ol/map.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/ol/map.js b/src/ol/map.js index 24c9d42a37..f791194f97 100644 --- a/src/ol/map.js +++ b/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_); From 4008ab7f6c88a1ec341379bd9a017b9184d5590e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Thu, 17 Oct 2013 15:16:50 +0200 Subject: [PATCH 6/8] Vector examples display feature info on click again --- examples/gpx.js | 14 +++++++++++--- examples/kml-earthquakes.js | 14 +++++++++++--- examples/kml-timezones.js | 14 +++++++++++--- examples/kml.js | 14 +++++++++++--- examples/vector-layer.js | 14 +++++++++++--- 5 files changed, 55 insertions(+), 15 deletions(-) diff --git a/examples/gpx.js b/examples/gpx.js index 0f005a900f..899b9cdb31 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -28,9 +28,7 @@ var map = new ol.Map({ }) }); -// FIXME support touch devices -$(map.getViewport()).on('mousemove', function(evt) { - var pixel = map.getEventPixel(evt.originalEvent); +var displayFeatureInfo = function(pixel) { map.getFeatures({ pixel: pixel, layers: [vector], @@ -43,4 +41,14 @@ $(map.getViewport()).on('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); }); diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js index 80ecfecfdd..fd2405cea9 100644 --- a/examples/kml-earthquakes.js +++ b/examples/kml-earthquakes.js @@ -60,9 +60,7 @@ info.tooltip({ trigger: 'manual' }); -// FIXME support touch devices -$(map.getViewport()).on('mousemove', function(evt) { - var pixel = map.getEventPixel(evt.originalEvent); +var displayFeatureInfo = function(pixel) { info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' @@ -82,4 +80,14 @@ $(map.getViewport()).on('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); }); diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js index 704c87d336..6657961593 100644 --- a/examples/kml-timezones.js +++ b/examples/kml-timezones.js @@ -82,9 +82,7 @@ info.tooltip({ trigger: 'manual' }); -// FIXME support touch devices -$(map.getViewport()).on('mousemove', function(evt) { - var pixel = map.getEventPixel(evt.originalEvent); +var displayFeatureInfo = function(pixel) { info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' @@ -104,4 +102,14 @@ $(map.getViewport()).on('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); }); diff --git a/examples/kml.js b/examples/kml.js index 666529ef95..bce5752903 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -39,9 +39,7 @@ var map = new ol.Map({ }) }); -// FIXME support touch devices -$(map.getViewport()).on('mousemove', function(evt) { - var pixel = map.getEventPixel(evt.originalEvent); +var displayFeatureInfo = function(pixel) { map.getFeatures({ pixel: pixel, layers: [vector], @@ -54,4 +52,14 @@ $(map.getViewport()).on('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); }); diff --git a/examples/vector-layer.js b/examples/vector-layer.js index fc02c28a3c..f1c2df3d7a 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -64,9 +64,7 @@ var map = new ol.Map({ }) }); -// FIXME support touch devices -$(map.getViewport()).on('mousemove', function(evt) { - var pixel = map.getEventPixel(evt.originalEvent); +var displayFeatureInfo = function(pixel) { map.getFeatures({ pixel: pixel, layers: [vector], @@ -77,4 +75,14 @@ $(map.getViewport()).on('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); }); From 08bad9746b25713039f90f09bba5ddc686492e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Fri, 18 Oct 2013 10:00:53 +0200 Subject: [PATCH 7/8] Do not relay mouseout events --- src/ol/mapbrowserevent.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/ol/mapbrowserevent.js b/src/ol/mapbrowserevent.js index 0faedd3b2e..a90bcc64d9 100644 --- a/src/ol/mapbrowserevent.js +++ b/src/ol/mapbrowserevent.js @@ -165,10 +165,7 @@ ol.MapBrowserEventHandler = function(map) { this.click_, false, this), goog.events.listen(element, goog.events.EventType.MOUSEDOWN, - this.handleMouseDown_, false, this), - goog.events.listen(element, - goog.events.EventType.MOUSEOUT, - this.relayEvent_, false, this) + this.handleMouseDown_, false, this) ]; // touch events this.touchListenerKeys_ = [ @@ -381,6 +378,5 @@ ol.MapBrowserEvent.EventType = { DRAGEND: 'dragend', TOUCHSTART: goog.events.EventType.TOUCHSTART, TOUCHMOVE: goog.events.EventType.TOUCHMOVE, - TOUCHEND: goog.events.EventType.TOUCHEND, - MOUSEOUT: goog.events.EventType.MOUSEOUT + TOUCHEND: goog.events.EventType.TOUCHEND }; From 1c890d837eb6b34e981179213ce54ba5a815fe4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Fri, 18 Oct 2013 10:03:59 +0200 Subject: [PATCH 8/8] Unconditonally set the framestate focus --- src/ol/map.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/ol/map.js b/src/ol/map.js index f791194f97..be7e9bc8c9 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -706,12 +706,7 @@ ol.Map.prototype.handleMapBrowserEvent = function(mapBrowserEvent) { // coordinates so interactions cannot be used. return; } - if (mapBrowserEvent.type == goog.events.EventType.MOUSEOUT || - mapBrowserEvent.type == goog.events.EventType.TOUCHEND) { - this.focus_ = null; - } else { - this.focus_ = mapBrowserEvent.getCoordinate(); - } + this.focus_ = mapBrowserEvent.getCoordinate(); mapBrowserEvent.frameState = this.frameState_; var interactions = this.getInteractions(); var interactionsArray = /** @type {Array.} */