diff --git a/src/ol/control/drag.js b/src/ol/control/drag.js new file mode 100644 index 0000000000..2049d66f0c --- /dev/null +++ b/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(); + } + } + } +}; diff --git a/src/ol/control/dragpan.js b/src/ol/control/dragpan.js new file mode 100644 index 0000000000..c02374fdcc --- /dev/null +++ b/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; + } +}; diff --git a/src/ol/createmap.js b/src/ol/createmap.js index 3a9e9089d9..64515f186c 100644 --- a/src/ol/createmap.js +++ b/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; } diff --git a/src/ol/map.js b/src/ol/map.js index 3ffcd317dd..b8bb18b0be 100644 --- a/src/ol/map.js +++ b/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_); diff --git a/src/ol/ol.js b/src/ol/ol.js index fe31aa9114..16f2a34e7f 100644 --- a/src/ol/ol.js +++ b/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');