diff --git a/src/ol/interaction/dragboxinteraction.js b/src/ol/interaction/dragboxinteraction.js index f12f1c2f7c..63a24d3eaf 100644 --- a/src/ol/interaction/dragboxinteraction.js +++ b/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; diff --git a/src/ol/interaction/paninteraction.js b/src/ol/interaction/paninteraction.js index 4f21664d33..cb6d54a3ee 100644 --- a/src/ol/interaction/paninteraction.js +++ b/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);