use separate pointer event handler for document when dragging

This commit is contained in:
tsauerwein
2014-02-19 16:10:07 +01:00
parent 2e4badb7f3
commit b52f79340d
6 changed files with 47 additions and 197 deletions

View File

@@ -168,11 +168,23 @@ ol.MapBrowserEventHandler = function(map) {
this.trackedTouches_ = {};
/**
* Event handler which generates pointer events for
* the viewport element.
*
* @type {ol.pointer.PointerEventHandler}
* @private
*/
this.pointerEventHandler_ = new ol.pointer.PointerEventHandler(element);
/**
* Event handler which generates pointer events for
* the document (used when dragging).
*
* @type {ol.pointer.PointerEventHandler}
* @private
*/
this.documentPointerEventHandler_ = null;
this.pointerdownListenerKey_ = goog.events.listen(this.pointerEventHandler_,
ol.pointer.EventType.POINTERDOWN,
this.handlePointerDown_, false, this);
@@ -181,8 +193,7 @@ goog.inherits(ol.MapBrowserEventHandler, goog.events.EventTarget);
/**
* Get the last "down" type event. This will be set on mousedown,
* touchstart, and pointerdown.
* Get the last "down" type event. This will be set on pointerdown.
* @return {ol.pointer.PointerEvent} The most recent "down" type event (or null
* if none have occurred).
*/
@@ -246,14 +257,10 @@ ol.MapBrowserEventHandler.prototype.handlePointerUp_ = function(pointerEvent) {
this.dispatchEvent(newEvent);
if (this.activePointers_ <= 0) {
this.pointerEventHandler_.unlistenOnDocument(
ol.MapBrowserEvent.EventType.POINTERMOVE,
this.handlePointerMove_, false, this);
this.pointerEventHandler_.unlistenOnDocument(
ol.MapBrowserEvent.EventType.POINTERUP,
this.handlePointerUp_, false, this);
goog.array.forEach(this.dragListenerKeys_, goog.events.unlistenByKey);
this.dragListenerKeys_ = null;
this.documentPointerEventHandler_.dispose();
this.documentPointerEventHandler_ = null;
}
// We emulate click event on left mouse button click, touch contact, and pen
@@ -282,16 +289,22 @@ ol.MapBrowserEventHandler.prototype.handlePointerDown_ =
this.dragged_ = false;
if (goog.isNull(this.dragListenerKeys_)) {
this.pointerEventHandler_.listenOnDocument(
ol.MapBrowserEvent.EventType.POINTERMOVE,
this.handlePointerMove_, false, this);
this.pointerEventHandler_.listenOnDocument(
ol.MapBrowserEvent.EventType.POINTERUP,
this.handlePointerUp_, false, this);
/* Set up a pointer event handler on the `document`,
* which is required when the pointer is moved outside
* the viewport when dragging.
*/
this.documentPointerEventHandler_ =
new ol.pointer.PointerEventHandler(document);
this.dragListenerKeys_ = [
goog.events.listen(this.documentPointerEventHandler_,
ol.MapBrowserEvent.EventType.POINTERMOVE,
this.handlePointerMove_, false, this),
goog.events.listen(this.documentPointerEventHandler_,
ol.MapBrowserEvent.EventType.POINTERUP,
this.handlePointerUp_, false, this),
goog.events.listen(this.pointerEventHandler_,
[ol.MapBrowserEvent.EventType.POINTERCANCEL],
ol.MapBrowserEvent.EventType.POINTERCANCEL,
this.handlePointerUp_, false, this)
];
}
@@ -330,7 +343,7 @@ ol.MapBrowserEventHandler.prototype.handlePointerMove_ =
/**
* FIXME empty description for jsdoc
* @inheritDoc
*/
ol.MapBrowserEventHandler.prototype.disposeInternal = function() {
if (!goog.isNull(this.pointerdownListenerKey_)) {
@@ -341,10 +354,13 @@ ol.MapBrowserEventHandler.prototype.disposeInternal = function() {
goog.array.forEach(this.dragListenerKeys_, goog.events.unlistenByKey);
this.dragListenerKeys_ = null;
}
if (ol.LEGACY_IE_SUPPORT && ol.IS_LEGACY_IE &&
!goog.isNull(this.ieDblclickListenerKey_)) {
goog.events.unlistenByKey(this.ieDblclickListenerKey_);
this.ieDblclickListenerKey_ = null;
if (!goog.isNull(this.documentPointerEventHandler_)) {
this.documentPointerEventHandler_.dispose();
this.documentPointerEventHandler_ = null;
}
if (!goog.isNull(this.pointerEventHandler_)) {
this.pointerEventHandler_.dispose();
this.pointerEventHandler_ = null;
}
goog.base(this, 'disposeInternal');
};

View File

@@ -41,21 +41,3 @@ ol.pointer.EventSource.prototype.getMapping = goog.abstractMethod;
ol.pointer.EventSource.prototype.getHandlerForEvent = function(eventType) {
return this.getMapping()[eventType];
};
/**
* Setup source listeners for the given pointer event type on the `document`
* element. See also `PointerEventHandler.listenOnDocument()`.
* @param {string} type Pointer event type.
*/
ol.pointer.EventSource.prototype.listenOnDocument = function(type) {
};
/**
* Remove source listeners for the given pointer event type from the `document`
* element. See also `PointerEventHandler.unlistenOnDocument()`.
* @param {string} type Pointer event type.
*/
ol.pointer.EventSource.prototype.unlistenOnDocument = function(type) {
};

View File

@@ -113,30 +113,6 @@ ol.pointer.MouseSource.prototype.getMapping = function() {
};
/** @inheritDoc */
ol.pointer.MouseSource.prototype.listenOnDocument = function(type) {
if (type === 'pointermove') {
this.dispatcher.removeEvent('mousemove');
this.dispatcher.addEvent('mousemove', goog.global.document);
} else if (type === 'pointerup') {
this.dispatcher.removeEvent('mouseup');
this.dispatcher.addEvent('mouseup', goog.global.document);
}
};
/** @inheritDoc */
ol.pointer.MouseSource.prototype.unlistenOnDocument = function(type) {
if (type === 'pointermove') {
this.dispatcher.removeEvent('mousemove', goog.global.document);
this.dispatcher.addEvent('mousemove');
} else if (type === 'pointerup') {
this.dispatcher.removeEvent('mouseup', goog.global.document);
this.dispatcher.addEvent('mouseup');
}
};
/**
* Detect if a mouse event was simulated from a touch by
* checking if previously there was a touch event at the

View File

@@ -111,30 +111,6 @@ ol.pointer.MsSource.prototype.getMapping = function() {
};
/** @inheritDoc */
ol.pointer.MsSource.prototype.listenOnDocument = function(type) {
if (type === 'pointermove') {
this.dispatcher.removeEvent('MSPointerMove');
this.dispatcher.addEvent('MSPointerMove', goog.global.document);
} else if (type === 'pointerup') {
this.dispatcher.removeEvent('MSPointerUp');
this.dispatcher.addEvent('MSPointerUp', goog.global.document);
}
};
/** @inheritDoc */
ol.pointer.MsSource.prototype.unlistenOnDocument = function(type) {
if (type === 'pointermove') {
this.dispatcher.removeEvent('MSPointerMove', goog.global.document);
this.dispatcher.addEvent('MSPointerMove');
} else if (type === 'pointerup') {
this.dispatcher.removeEvent('MSPointerUp', goog.global.document);
this.dispatcher.addEvent('MSPointerUp');
}
};
/**
* @suppress {missingProperties}
* @return {boolean}

View File

@@ -93,30 +93,6 @@ ol.pointer.NativeSource.prototype.getMapping = function() {
};
/** @inheritDoc */
ol.pointer.NativeSource.prototype.listenOnDocument = function(type) {
if (type === 'pointermove') {
this.dispatcher.removeEvent('pointermove');
this.dispatcher.addEvent('pointermove', goog.global.document);
} else if (type === 'pointerup') {
this.dispatcher.removeEvent('pointerup');
this.dispatcher.addEvent('pointerup', goog.global.document);
}
};
/** @inheritDoc */
ol.pointer.NativeSource.prototype.unlistenOnDocument = function(type) {
if (type === 'pointermove') {
this.dispatcher.removeEvent('pointermove', goog.global.document);
this.dispatcher.addEvent('pointermove');
} else if (type === 'pointerup') {
this.dispatcher.removeEvent('pointerup', goog.global.document);
this.dispatcher.addEvent('pointerup');
}
};
/**
* Handler for `pointerdown`.
*

View File

@@ -49,7 +49,7 @@ goog.require('ol.pointer.TouchSource');
/**
* @constructor
* @extends {goog.events.EventTarget}
* @param {Element} element Viewport element.
* @param {Element|HTMLDocument} element Viewport element.
*/
ol.pointer.PointerEventHandler = function(element) {
goog.base(this);
@@ -57,7 +57,7 @@ ol.pointer.PointerEventHandler = function(element) {
/**
* @const
* @private
* @type {Element}
* @type {Element|HTMLDocument}
*/
this.element_ = element;
@@ -203,65 +203,6 @@ ol.pointer.PointerEventHandler.prototype.eventHandler_ = function(inEvent) {
};
/**
* Set up an event listener for the given pointer event type
* by adding source event listeners to the `document` element. The
* original listener on the map viewport is removed.
* This is required for mouse and pointer devices when dragging,
* because no `*move` events are fired, when the mouse/pointer is
* outside the map viewport.
* To remove these listeners again, use `unlistenOnDocument()`.
*
* @param {string} type Pointer event type.
* @param {!Function} listener Callback method, or an object
* with a handleEvent function.
* @param {boolean=} opt_useCapture Whether to fire in capture phase
* (defaults to false).
* @param {Object=} opt_listenerScope Object in whose scope to call the
* listener.
* @return {goog.events.ListenableKey} Unique key for the listener.
*/
ol.pointer.PointerEventHandler.prototype.listenOnDocument = function(
type, listener, opt_useCapture, opt_listenerScope) {
var l = this.eventSourceList_.length;
var eventSource;
for (var i = 0; i < l; i++) {
eventSource = this.eventSourceList_[i];
eventSource.listenOnDocument(type);
}
return this.listen(
type, listener, opt_useCapture, opt_listenerScope);
};
/**
* Removes the source event listeners on the `document` element,
* and listenes to the orginal map viewport element again.
*
* @param {string} type Pointer event type.
* @param {!Function} listener Callback method, or an object
* with a handleEvent function.
* @param {boolean=} opt_useCapture Whether to fire in capture phase
* (defaults to false).
* @param {Object=} opt_listenerScope Object in whose scope to call the
* listener.
* @return {boolean} Whether any listener was removed.
*/
ol.pointer.PointerEventHandler.prototype.unlistenOnDocument = function(
type, listener, opt_useCapture, opt_listenerScope) {
var l = this.eventSourceList_.length;
var eventSource;
for (var i = 0; i < l; i++) {
eventSource = this.eventSourceList_[i];
eventSource.listenOnDocument(type);
}
return this.unlisten(
type, listener, opt_useCapture, opt_listenerScope);
};
/**
* Setup listeners for the given events.
* @private
@@ -275,19 +216,6 @@ ol.pointer.PointerEventHandler.prototype.addEvents_ = function(events) {
};
/**
* Setup listener for the given event.
* @param {string} eventName Event type.
* @param {HTMLDocument|Element=} opt_element Optional element.
*/
ol.pointer.PointerEventHandler.prototype.addEvent = function(
eventName, opt_element) {
var element = goog.isDef(opt_element) ? opt_element : this.element_;
goog.events.listen(element, eventName,
this.eventHandler_, false, this);
};
/**
* Unregister listeners for the given events.
* @private
@@ -301,19 +229,6 @@ ol.pointer.PointerEventHandler.prototype.removeEvents_ = function(events) {
};
/**
* Unregister listener for the given event.
* @param {string} eventName Event type.
* @param {HTMLDocument|Element=} opt_element Optional element.
*/
ol.pointer.PointerEventHandler.prototype.removeEvent = function(
eventName, opt_element) {
var element = goog.isDef(opt_element) ? opt_element : this.element_;
goog.events.unlisten(element, eventName,
this.eventHandler_, false, this);
};
/**
* Returns a snapshot of inEvent, with writable properties.
*
@@ -537,6 +452,15 @@ ol.pointer.PointerEventHandler.prototype.fireNativeEvent =
};
/**
* @inheritDoc
*/
ol.pointer.PointerEventHandler.prototype.disposeInternal = function() {
this.unregister_();
goog.base(this, 'disposeInternal');
};
/**
* Constants for event names.
* @enum {string}