use goog.fx.Dragger for map drag

This commit is contained in:
Éric Lemoine
2012-07-23 23:26:48 +02:00
parent 58bd2182a6
commit 6d28ad2740
2 changed files with 53 additions and 38 deletions

View File

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

View File

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