From 6d28ad27405aba252a238937f8d4d8df73de6279 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 23 Jul 2012 23:26:48 +0200 Subject: [PATCH] use goog.fx.Dragger for map drag --- src/ol/base/map.js | 33 +++++++++++++++++++----- src/ol/control/drag.js | 58 ++++++++++++++++++++---------------------- 2 files changed, 53 insertions(+), 38 deletions(-) diff --git a/src/ol/base/map.js b/src/ol/base/map.js index db54a07e71..3dc7eb63fd 100644 --- a/src/ol/base/map.js +++ b/src/ol/base/map.js @@ -20,6 +20,8 @@ goog.require('goog.events.KeyHandler.EventType'); goog.require('goog.events.MouseWheelEvent'); goog.require('goog.events.MouseWheelHandler'); goog.require('goog.events.MouseWheelHandler.EventType'); +goog.require('goog.fx.DragEvent'); +goog.require('goog.fx.Dragger'); goog.require('goog.fx.anim'); goog.require('goog.fx.anim.Animated'); goog.require('goog.object'); @@ -99,11 +101,7 @@ ol.Map = function(target, opt_values, opt_viewportSizeMonitor) { target.appendChild(this.eventsPane_); goog.events.listen(this.eventsPane_, [ - goog.events.EventType.DBLCLICK, - goog.events.EventType.MOUSEDOWN, - goog.events.EventType.MOUSEMOVE, - goog.events.EventType.MOUSEOUT, - goog.events.EventType.MOUSEUP + goog.events.EventType.DBLCLICK ], this.handleBrowserEvent, false, this); // FIXME we probably shouldn't listen on document... @@ -118,6 +116,16 @@ ol.Map = function(target, opt_values, opt_viewportSizeMonitor) { this.handleBrowserEvent, false, this); this.registerDisposable(mouseWheelHandler); + var dragger = new goog.fx.Dragger(this.eventsPane_); + dragger.defaultAction = function() {}; + goog.events.listen(dragger, [ + goog.fx.Dragger.EventType.START, + goog.fx.Dragger.EventType.DRAG, + goog.fx.Dragger.EventType.END, + goog.fx.Dragger.EventType.EARLY_CANCEL + ], this.handleDraggerEvent, false, this); + this.registerDisposable(dragger); + /** * @private * @type {goog.fx.anim.Animated} @@ -445,9 +453,11 @@ ol.Map.prototype.handleBackgroundColorChanged = goog.nullFunction; /** * @param {goog.events.BrowserEvent} event Event. + * @param {string=} opt_type Type. */ -ol.Map.prototype.handleBrowserEvent = function(event) { - var mapBrowserEvent = new ol.MapBrowserEvent(event.type, this, event); +ol.Map.prototype.handleBrowserEvent = function(event, opt_type) { + var type = goog.isDef(opt_type) ? opt_type : event.type; + var mapBrowserEvent = new ol.MapBrowserEvent(type, this, event); var controls = this.getControls(); var controlsArray = /** @type {Array.} */ controls.getArray(); goog.array.every(controlsArray, function(control) { @@ -457,6 +467,15 @@ ol.Map.prototype.handleBrowserEvent = function(event) { }; +/** + * @param {goog.fx.DragEvent} event Event. + */ +ol.Map.prototype.handleDraggerEvent = function(event) { + var browserEvent = event.browserEvent; + this.handleBrowserEvent(browserEvent, event.type); +}; + + /** * @protected */ diff --git a/src/ol/control/drag.js b/src/ol/control/drag.js index 9a547663ac..77da1cd074 100644 --- a/src/ol/control/drag.js +++ b/src/ol/control/drag.js @@ -1,8 +1,7 @@ -// FIXME support touch events? -// FIXME use goog.fx.Dragger in ol.Map instead? goog.provide('ol.control.Drag'); +goog.require('goog.asserts'); goog.require('goog.events.EventType'); goog.require('goog.functions'); goog.require('ol.Control'); @@ -85,40 +84,37 @@ ol.control.Drag.prototype.handleDragEnd = goog.nullFunction; * @inheritDoc */ ol.control.Drag.prototype.handleMapBrowserEvent = function(mapBrowserEvent) { - var center = mapBrowserEvent.map.getCenter(); - var resolution = mapBrowserEvent.map.getResolution(); + var map = mapBrowserEvent.map; + var center = map.getCenter(); + var resolution = map.getResolution(); if (!goog.isDef(center) || !goog.isDef(resolution)) { return; } - var browserEvent; + var browserEvent = mapBrowserEvent.browserEvent; if (this.dragging_) { - if (mapBrowserEvent.type == goog.events.EventType.MOUSEMOVE || - mapBrowserEvent.type == goog.events.EventType.MOUSEOUT || - mapBrowserEvent.type == goog.events.EventType.MOUSEUP) { - browserEvent = mapBrowserEvent.browserEvent; - this.deltaX = browserEvent.offsetX - this.startX; - this.deltaY = browserEvent.offsetY - this.startY; - if (mapBrowserEvent.type == goog.events.EventType.MOUSEMOVE) { - this.handleDrag(mapBrowserEvent); - } else { - this.handleDragEnd(mapBrowserEvent); - this.dragging_ = false; - } - mapBrowserEvent.preventDefault(); + if (mapBrowserEvent.type == goog.fx.Dragger.EventType.DRAG) { + goog.asserts.assert(browserEvent instanceof goog.events.BrowserEvent); + this.deltaX = browserEvent.clientX - this.startX; + this.deltaY = browserEvent.clientY - this.startY; + this.handleDrag(mapBrowserEvent); + } else if (mapBrowserEvent.type == goog.fx.Dragger.EventType.END) { + goog.asserts.assert(browserEvent instanceof goog.events.BrowserEvent); + this.deltaX = browserEvent.clientX - this.startX; + this.deltaY = browserEvent.clientY - this.startY; + this.handleDragEnd(mapBrowserEvent); + this.dragging_ = false; } - } else { - if (mapBrowserEvent.type == goog.events.EventType.MOUSEDOWN) { - browserEvent = mapBrowserEvent.browserEvent; - this.startX = browserEvent.offsetX; - this.startY = browserEvent.offsetY; - this.deltaX = 0; - this.deltaY = 0; - this.startCenter = center; - this.startCoordinate = mapBrowserEvent.getCoordinate(); - if (this.handleDragStart(mapBrowserEvent)) { - this.dragging_ = true; - mapBrowserEvent.preventDefault(); - } + } else if (mapBrowserEvent.type == goog.fx.Dragger.EventType.START) { + goog.asserts.assert(browserEvent instanceof goog.events.BrowserEvent); + this.startX = browserEvent.clientX; + this.startY = browserEvent.clientY; + this.deltaX = 0; + this.deltaY = 0; + this.startCenter = center; + this.startCoordinate = mapBrowserEvent.getCoordinate(); + if (this.handleDragStart(mapBrowserEvent)) { + this.dragging_ = true; + mapBrowserEvent.preventDefault(); } } };