Add experimental drag control (to be replaced)

src/ol/control/drag.js

@@ -0,0 +1,106 @@
+// FIXME support touch events?
+// FIXME use goog.fx.Dragger in ol.Map instead?
+
+goog.provide('ol.control.Drag');
+
+goog.require('goog.events.EventType');
+goog.require('goog.functions');
+goog.require('ol.Control');
+goog.require('ol.MapBrowserEvent');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.Control}
+ */
+ol.control.Drag = function() {
+
+  goog.base(this);
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.dragging_ = false;
+
+  /**
+   * @type {number}
+   */
+  this.startX = 0;
+
+  /**
+   * @type {number}
+   */
+  this.startY = 0;
+
+  /**
+   * @type {number}
+   */
+  this.offsetX = 0;
+
+  /**
+   * @type {number}
+   */
+  this.offsetY = 0;
+
+};
+goog.inherits(ol.control.Drag, ol.Control);
+
+
+/**
+ * @param {ol.MapBrowserEvent} event Event.
+ * @protected
+ */
+ol.control.Drag.prototype.handleDrag = goog.nullFunction;
+
+
+/**
+ * @param {ol.MapBrowserEvent} event Event.
+ * @protected
+ * @return {boolean} Capture dragging.
+ */
+ol.control.Drag.prototype.handleDragStart = goog.functions.FALSE;
+
+
+/**
+ * @param {ol.MapBrowserEvent} event Event.
+ * @protected
+ */
+ol.control.Drag.prototype.handleDragEnd = goog.nullFunction;
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.Drag.prototype.handleMapBrowserEvent = function(event) {
+  var browserEventObject;
+  if (this.dragging_) {
+    if (event.type == goog.events.EventType.MOUSEMOVE ||
+        event.type == goog.events.EventType.MOUSEOUT ||
+        event.type == goog.events.EventType.MOUSEUP) {
+      browserEventObject = event.getBrowserEventObject();
+      this.deltaX = browserEventObject.offsetX - this.startX;
+      this.deltaY = browserEventObject.offsetY - this.startY;
+      if (event.type == goog.events.EventType.MOUSEMOVE) {
+        this.handleDrag(event);
+      } else {
+        this.handleDragEnd(event);
+        this.dragging_ = false;
+      }
+      event.preventDefault();
+    }
+  } else {
+    if (event.type == goog.events.EventType.MOUSEDOWN) {
+      browserEventObject = event.getBrowserEventObject();
+      this.startX = browserEventObject.offsetX;
+      this.startY = browserEventObject.offsetY;
+      this.deltaX = 0;
+      this.deltaY = 0;
+      if (this.handleDragStart(event)) {
+        this.dragging_ = true;
+        event.preventDefault();
+      }
+    }
+  }
+};

src/ol/control/dragpan.js

@@ -0,0 +1,49 @@
+goog.provide('ol.control.DragPan');
+
+goog.require('ol.MapBrowserEvent');
+goog.require('ol.control.Drag');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Drag}
+ */
+ol.control.DragPan = function() {
+  goog.base(this);
+};
+goog.inherits(ol.control.DragPan, ol.control.Drag);
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.DragPan.prototype.handleDrag = function(event) {
+  window.console.log(
+      'drag delta (' + this.deltaX + ', ' + this.deltaY + ')');
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.DragPan.prototype.handleDragEnd = function(event) {
+  window.console.log(
+      'drag end at delta (' + this.deltaX + ', ' + this.deltaY + ')');
+};
+
+
+/**
+ * @inheritDoc
+ */
+ol.control.DragPan.prototype.handleDragStart = function(event) {
+  var browserEventObject = event.getBrowserEventObject();
+  if (browserEventObject.shiftKey) {
+    window.console.log('not starting drag while shift key is pressed');
+    return false;
+  } else {
+    window.console.log(
+        'drag start at (' + this.startX + ', ' + this.startY + ')');
+    return true;
+  }
+};

src/ol/createmap.js

@@ -7,6 +7,7 @@ goog.require('ol.Map');
 goog.require('ol.MapProperty');
 goog.require('ol.Projection');
 goog.require('ol.control.DblClickZoom');
+goog.require('ol.control.DragPan');
 goog.require('ol.control.MouseWheelZoom');
 goog.require('ol.dom');
 goog.require('ol.dom.Map');
@@ -67,6 +68,7 @@ ol.createMap = function(target, opt_values, opt_rendererHints) {
   if (!goog.object.containsKey(values, ol.MapProperty.CONTROLS)) {
     var controls = new ol.Array();
     controls.push(new ol.control.DblClickZoom());
+    controls.push(new ol.control.DragPan());
     controls.push(new ol.control.MouseWheelZoom());
     values[ol.MapProperty.CONTROLS] = controls;
   }

src/ol/map.js

@@ -73,7 +73,10 @@ ol.Map = function(target, opt_values, opt_viewportSizeMonitor) {
 
   goog.events.listen(this.eventsPane_, [
     goog.events.EventType.DBLCLICK,
-    goog.events.EventType.CLICK
+    goog.events.EventType.MOUSEDOWN,
+    goog.events.EventType.MOUSEMOVE,
+    goog.events.EventType.MOUSEOUT,
+    goog.events.EventType.MOUSEUP
   ], this.handleBrowserEvent, false, this);
 
   var mouseWheelHandler = new goog.events.MouseWheelHandler(this.eventsPane_);

src/ol/ol.js

@@ -25,6 +25,8 @@ goog.require('ol.TileUrlFunction');
 goog.require('ol.TileUrlFunctionType');
 goog.require('ol.TransformFunction');
 goog.require('ol.control.DblClickZoom');
+goog.require('ol.control.Drag');
+goog.require('ol.control.DragPan');
 goog.require('ol.control.MouseWheelZoom');
 goog.require('ol.createMap');
 goog.require('ol.dom');