use goog.fx.Dragger for map drag

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.DBLCLICK
-    goog.events.EventType.MOUSEDOWN,
-    goog.events.EventType.MOUSEMOVE,
-    goog.events.EventType.MOUSEOUT,
-    goog.events.EventType.MOUSEUP
   ], 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) {
+ol.Map.prototype.handleBrowserEvent = function(event, opt_type) {
-  var mapBrowserEvent = new ol.MapBrowserEvent(event.type, this, event);
+  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.<ol.Control>} */ 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
  */

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 map = mapBrowserEvent.map;
-  var resolution = mapBrowserEvent.map.getResolution();
+  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 ||
+    if (mapBrowserEvent.type == goog.fx.Dragger.EventType.DRAG) {
-        mapBrowserEvent.type == goog.events.EventType.MOUSEOUT ||
+      goog.asserts.assert(browserEvent instanceof goog.events.BrowserEvent);
-        mapBrowserEvent.type == goog.events.EventType.MOUSEUP) {
+      this.deltaX = browserEvent.clientX - this.startX;
-      browserEvent = mapBrowserEvent.browserEvent;
+      this.deltaY = browserEvent.clientY - this.startY;
-      this.deltaX = browserEvent.offsetX - this.startX;
+      this.handleDrag(mapBrowserEvent);
-      this.deltaY = browserEvent.offsetY - this.startY;
+    } else if (mapBrowserEvent.type == goog.fx.Dragger.EventType.END) {
-      if (mapBrowserEvent.type == goog.events.EventType.MOUSEMOVE) {
+      goog.asserts.assert(browserEvent instanceof goog.events.BrowserEvent);
-        this.handleDrag(mapBrowserEvent);
+      this.deltaX = browserEvent.clientX - this.startX;
-      } else {
+      this.deltaY = browserEvent.clientY - this.startY;
-        this.handleDragEnd(mapBrowserEvent);
+      this.handleDragEnd(mapBrowserEvent);
-        this.dragging_ = false;
+      this.dragging_ = false;
-      }
-      mapBrowserEvent.preventDefault();
     }
-  } else {
+  } else if (mapBrowserEvent.type == goog.fx.Dragger.EventType.START) {
-    if (mapBrowserEvent.type == goog.events.EventType.MOUSEDOWN) {
+    goog.asserts.assert(browserEvent instanceof goog.events.BrowserEvent);
-      browserEvent = mapBrowserEvent.browserEvent;
+    this.startX = browserEvent.clientX;
-      this.startX = browserEvent.offsetX;
+    this.startY = browserEvent.clientY;
-      this.startY = browserEvent.offsetY;
+    this.deltaX = 0;
-      this.deltaX = 0;
+    this.deltaY = 0;
-      this.deltaY = 0;
+    this.startCenter = center;
-      this.startCenter = center;
+    this.startCoordinate = mapBrowserEvent.getCoordinate();
-      this.startCoordinate = mapBrowserEvent.getCoordinate();
+    if (this.handleDragStart(mapBrowserEvent)) {
-      if (this.handleDragStart(mapBrowserEvent)) {
+      this.dragging_ = true;
-        this.dragging_ = true;
+      mapBrowserEvent.preventDefault();
-        mapBrowserEvent.preventDefault();
-      }
     }
   }
 };