base interaction for zoom box on pointer events

src/ol/interaction/dragboxinteraction.js

@@ -8,7 +8,7 @@ goog.require('goog.asserts');
 goog.require('goog.events.Event');
 goog.require('ol.events.ConditionType');
 goog.require('ol.events.condition');
-goog.require('ol.interaction.Drag');
+goog.require('ol.interaction.PointerInteraction');
 goog.require('ol.render.Box');
 
 
@@ -62,8 +62,13 @@ goog.inherits(ol.DragBoxEvent, goog.events.Event);
 
 
 /**
+ * Allows the user to zoom the map by clicking and dragging on the map,
+ * when the shift key is held down.
+ *
+ * This interaction is only supported for mouse devices.
+ *
  * @constructor
- * @extends {ol.interaction.Drag}
+ * @extends {ol.interaction.PointerInteraction}
  * @param {olx.interaction.DragBoxOptions=} opt_options Options.
  * @todo stability experimental
  */
@@ -99,13 +104,35 @@ ol.interaction.DragBox = function(opt_options) {
       options.condition : ol.events.condition.always;
 
 };
-goog.inherits(ol.interaction.DragBox, ol.interaction.Drag);
+goog.inherits(ol.interaction.DragBox, ol.interaction.PointerInteraction);
+
+
+/**
+ * Returns true if the pointer event is generated by a mouse pointer.
+ * @param {ol.MapBrowserEvent} mapBrowserEvent
+ * @return {boolean}
+ */
+ol.interaction.DragBox.prototype.isMousePointer =
+    function(mapBrowserEvent) {
+  goog.asserts.assertInstanceof(mapBrowserEvent, ol.MapBrowserPointerEvent);
+  var mapBrowserPointerEvent =
+      /** @type {ol.MapBrowserPointerEvent} */ (mapBrowserEvent);
+
+  /* pointerId must be 1 for mouse devices,
+   * see: http://www.w3.org/Submission/pointer-events/#pointerevent-interface
+   */
+  return mapBrowserPointerEvent.pointerEvent.pointerId == 1;
+};
 
 
 /**
  * @inheritDoc
  */
-ol.interaction.DragBox.prototype.handleDrag = function(mapBrowserEvent) {
+ol.interaction.DragBox.prototype.handlePointerDrag = function(mapBrowserEvent) {
+  if (!this.isMousePointer(mapBrowserEvent)) {
+    return;
+  }
+
   this.box_.setPixels(this.startPixel_, mapBrowserEvent.pixel);
 };
 
@@ -129,10 +156,18 @@ ol.interaction.DragBox.prototype.onBoxEnd = goog.nullFunction;
 /**
  * @inheritDoc
  */
-ol.interaction.DragBox.prototype.handleDragEnd =
+ol.interaction.DragBox.prototype.handlePointerUp =
     function(mapBrowserEvent) {
+  if (!this.isMousePointer(mapBrowserEvent)) {
+    return false;
+  }
+
   this.box_.setMap(null);
-  if (this.deltaX * this.deltaX + this.deltaY * this.deltaY >=
+
+  var deltaX = mapBrowserEvent.pixel[0] - this.startPixel_[0];
+  var deltaY = mapBrowserEvent.pixel[1] - this.startPixel_[1];
+
+  if (deltaX * deltaX + deltaY * deltaY >=
       ol.DRAG_BOX_HYSTERESIS_PIXELS_SQUARED) {
     this.onBoxEnd(mapBrowserEvent);
     this.dispatchEvent(new ol.DragBoxEvent(ol.DragBoxEventType.BOXEND,
@@ -144,8 +179,12 @@ ol.interaction.DragBox.prototype.handleDragEnd =
 /**
  * @inheritDoc
  */
-ol.interaction.DragBox.prototype.handleDragStart =
+ol.interaction.DragBox.prototype.handlePointerDown =
     function(mapBrowserEvent) {
+  if (!this.isMousePointer(mapBrowserEvent)) {
+    return false;
+  }
+
   var browserEvent = mapBrowserEvent.browserEvent;
   if (browserEvent.isMouseActionButton() && this.condition_(mapBrowserEvent)) {
     this.startPixel_ = mapBrowserEvent.pixel;

src/ol/interaction/paninteraction.js

@@ -7,6 +7,7 @@ goog.require('ol.Pixel');
 goog.require('ol.PreRenderFunction');
 goog.require('ol.View2D');
 goog.require('ol.coordinate');
+goog.require('ol.events.condition');
 goog.require('ol.interaction.PointerInteraction');
 
 
@@ -42,6 +43,13 @@ ol.interaction.Pan = function(opt_options) {
    */
   this.lastCentroid = null;
 
+  /**
+   * @private
+   * @type {ol.events.ConditionType}
+   */
+  this.condition_ = goog.isDef(opt_options.condition) ?
+      opt_options.condition : ol.events.condition.noModifierKeys;
+
   /**
    * @private
    * @type {boolean}
@@ -118,7 +126,7 @@ ol.interaction.Pan.prototype.handlePointerUp =
  */
 ol.interaction.Pan.prototype.handlePointerDown =
     function(mapBrowserEvent) {
-  if (this.targetTouches.length > 0) {
+  if (this.targetTouches.length > 0 && this.condition_(mapBrowserEvent)) {
     var map = mapBrowserEvent.map;
     var view2D = map.getView().getView2D();
     goog.asserts.assertInstanceof(view2D, ol.View2D);