diff --git a/src/ol/pointer/EventSource.js b/src/ol/pointer/EventSource.js index 46547520d3..6f3971506b 100644 --- a/src/ol/pointer/EventSource.js +++ b/src/ol/pointer/EventSource.js @@ -1,42 +1,45 @@ /** * @module ol/pointer/EventSource */ -/** - * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. - * @param {!Object.} mapping Event mapping. - * @constructor - */ + class EventSource { + + /** + * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. + * @param {!Object.} mapping Event mapping. + */ constructor(dispatcher, mapping) { + /** - * @type {module:ol/pointer/PointerEventHandler} - */ + * @type {module:ol/pointer/PointerEventHandler} + */ this.dispatcher = dispatcher; /** - * @private - * @const - * @type {!Object.} - */ + * @private + * @const + * @type {!Object.} + */ this.mapping_ = mapping; } /** - * List of events supported by this source. - * @return {Array.} Event names - */ + * List of events supported by this source. + * @return {Array.} Event names + */ getEvents() { return Object.keys(this.mapping_); } /** - * Returns the handler that should handle a given event type. - * @param {string} eventType The event type. - * @return {function(Event)} Handler - */ + * Returns the handler that should handle a given event type. + * @param {string} eventType The event type. + * @return {function(Event)} Handler + */ getHandlerForEvent(eventType) { return this.mapping_[eventType]; } + } export default EventSource; diff --git a/src/ol/pointer/MouseSource.js b/src/ol/pointer/MouseSource.js index 1c8c69e345..90b2f27ef7 100644 --- a/src/ol/pointer/MouseSource.js +++ b/src/ol/pointer/MouseSource.js @@ -1,6 +1,7 @@ /** * @module ol/pointer/MouseSource */ + // Based on https://github.com/Polymer/PointerEvents // Copyright (c) 2013 The Polymer Authors. All rights reserved. @@ -31,7 +32,6 @@ // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -import {inherits} from '../util.js'; import EventSource from '../pointer/EventSource.js'; @@ -54,22 +54,97 @@ export const POINTER_TYPE = 'mouse'; */ const DEDUP_DIST = 25; +/** + * Handler for `mousedown`. + * + * @this {module:ol/pointer/MouseSource} + * @param {MouseEvent} inEvent The in event. + */ +function mousedown(inEvent) { + if (!this.isEventSimulatedFromTouch_(inEvent)) { + // TODO(dfreedman) workaround for some elements not sending mouseup + // http://crbug/149091 + if (POINTER_ID.toString() in this.pointerMap) { + this.cancel(inEvent); + } + const e = prepareEvent(inEvent, this.dispatcher); + this.pointerMap[POINTER_ID.toString()] = inEvent; + this.dispatcher.down(e, inEvent); + } +} /** - * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. - * @constructor - * @extends {module:ol/pointer/EventSource} + * Handler for `mousemove`. + * + * @this {module:ol/pointer/MouseSource} + * @param {MouseEvent} inEvent The in event. */ -class MouseSource { +function mousemove(inEvent) { + if (!this.isEventSimulatedFromTouch_(inEvent)) { + const e = prepareEvent(inEvent, this.dispatcher); + this.dispatcher.move(e, inEvent); + } +} + +/** + * Handler for `mouseup`. + * + * @this {module:ol/pointer/MouseSource} + * @param {MouseEvent} inEvent The in event. + */ +function mouseup(inEvent) { + if (!this.isEventSimulatedFromTouch_(inEvent)) { + const p = this.pointerMap[POINTER_ID.toString()]; + + if (p && p.button === inEvent.button) { + const e = prepareEvent(inEvent, this.dispatcher); + this.dispatcher.up(e, inEvent); + this.cleanupMouse(); + } + } +} + +/** + * Handler for `mouseover`. + * + * @this {module:ol/pointer/MouseSource} + * @param {MouseEvent} inEvent The in event. + */ +function mouseover(inEvent) { + if (!this.isEventSimulatedFromTouch_(inEvent)) { + const e = prepareEvent(inEvent, this.dispatcher); + this.dispatcher.enterOver(e, inEvent); + } +} + +/** + * Handler for `mouseout`. + * + * @this {module:ol/pointer/MouseSource} + * @param {MouseEvent} inEvent The in event. + */ +function mouseout(inEvent) { + if (!this.isEventSimulatedFromTouch_(inEvent)) { + const e = prepareEvent(inEvent, this.dispatcher); + this.dispatcher.leaveOut(e, inEvent); + } +} + + +class MouseSource extends EventSource { + + /** + * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. + */ constructor(dispatcher) { const mapping = { - 'mousedown': this.mousedown, - 'mousemove': this.mousemove, - 'mouseup': this.mouseup, - 'mouseover': this.mouseover, - 'mouseout': this.mouseout + 'mousedown': mousedown, + 'mousemove': mousemove, + 'mouseup': mouseup, + 'mouseover': mouseover, + 'mouseout': mouseout }; - EventSource.call(this, dispatcher, mapping); + super(dispatcher, mapping); /** * @const @@ -123,77 +198,6 @@ class MouseSource { return false; } - /** - * Handler for `mousedown`. - * - * @param {MouseEvent} inEvent The in event. - */ - mousedown(inEvent) { - if (!this.isEventSimulatedFromTouch_(inEvent)) { - // TODO(dfreedman) workaround for some elements not sending mouseup - // http://crbug/149091 - if (POINTER_ID.toString() in this.pointerMap) { - this.cancel(inEvent); - } - const e = prepareEvent(inEvent, this.dispatcher); - this.pointerMap[POINTER_ID.toString()] = inEvent; - this.dispatcher.down(e, inEvent); - } - } - - /** - * Handler for `mousemove`. - * - * @param {MouseEvent} inEvent The in event. - */ - mousemove(inEvent) { - if (!this.isEventSimulatedFromTouch_(inEvent)) { - const e = prepareEvent(inEvent, this.dispatcher); - this.dispatcher.move(e, inEvent); - } - } - - /** - * Handler for `mouseup`. - * - * @param {MouseEvent} inEvent The in event. - */ - mouseup(inEvent) { - if (!this.isEventSimulatedFromTouch_(inEvent)) { - const p = this.pointerMap[POINTER_ID.toString()]; - - if (p && p.button === inEvent.button) { - const e = prepareEvent(inEvent, this.dispatcher); - this.dispatcher.up(e, inEvent); - this.cleanupMouse(); - } - } - } - - /** - * Handler for `mouseover`. - * - * @param {MouseEvent} inEvent The in event. - */ - mouseover(inEvent) { - if (!this.isEventSimulatedFromTouch_(inEvent)) { - const e = prepareEvent(inEvent, this.dispatcher); - this.dispatcher.enterOver(e, inEvent); - } - } - - /** - * Handler for `mouseout`. - * - * @param {MouseEvent} inEvent The in event. - */ - mouseout(inEvent) { - if (!this.isEventSimulatedFromTouch_(inEvent)) { - const e = prepareEvent(inEvent, this.dispatcher); - this.dispatcher.leaveOut(e, inEvent); - } - } - /** * Dispatches a `pointercancel` event. * @@ -213,8 +217,6 @@ class MouseSource { } } -inherits(MouseSource, EventSource); - /** * Creates a copy of the original event that will be used diff --git a/src/ol/pointer/MsSource.js b/src/ol/pointer/MsSource.js index 230b0aba9d..17e174c0c6 100644 --- a/src/ol/pointer/MsSource.js +++ b/src/ol/pointer/MsSource.js @@ -31,7 +31,6 @@ // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -import {inherits} from '../util.js'; import EventSource from '../pointer/EventSource.js'; @@ -47,41 +46,130 @@ const POINTER_TYPES = [ 'mouse' ]; +/** + * Handler for `msPointerDown`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. + */ +function msPointerDown(inEvent) { + this.pointerMap[inEvent.pointerId.toString()] = inEvent; + const e = this.prepareEvent_(inEvent); + this.dispatcher.down(e, inEvent); +} /** - * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. - * @constructor - * @extends {module:ol/pointer/EventSource} + * Handler for `msPointerMove`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. */ -class MsSource { +function msPointerMove(inEvent) { + const e = this.prepareEvent_(inEvent); + this.dispatcher.move(e, inEvent); +} + +/** + * Handler for `msPointerUp`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. + */ +function msPointerUp(inEvent) { + const e = this.prepareEvent_(inEvent); + this.dispatcher.up(e, inEvent); + this.cleanup(inEvent.pointerId); +} + +/** + * Handler for `msPointerOut`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. + */ +function msPointerOut(inEvent) { + const e = this.prepareEvent_(inEvent); + this.dispatcher.leaveOut(e, inEvent); +} + +/** + * Handler for `msPointerOver`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. + */ +function msPointerOver(inEvent) { + const e = this.prepareEvent_(inEvent); + this.dispatcher.enterOver(e, inEvent); +} + +/** + * Handler for `msPointerCancel`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. + */ +function msPointerCancel(inEvent) { + const e = this.prepareEvent_(inEvent); + this.dispatcher.cancel(e, inEvent); + this.cleanup(inEvent.pointerId); +} + +/** + * Handler for `msLostPointerCapture`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. + */ +function msLostPointerCapture(inEvent) { + const e = this.dispatcher.makeEvent('lostpointercapture', inEvent, inEvent); + this.dispatcher.dispatchEvent(e); +} + +/** + * Handler for `msGotPointerCapture`. + * + * @this {module:ol/pointer/MsSource} + * @param {MSPointerEvent} inEvent The in event. + */ +function msGotPointerCapture(inEvent) { + const e = this.dispatcher.makeEvent('gotpointercapture', inEvent, inEvent); + this.dispatcher.dispatchEvent(e); +} + +class MsSource extends EventSource { + + /** + * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. + */ constructor(dispatcher) { const mapping = { - 'MSPointerDown': this.msPointerDown, - 'MSPointerMove': this.msPointerMove, - 'MSPointerUp': this.msPointerUp, - 'MSPointerOut': this.msPointerOut, - 'MSPointerOver': this.msPointerOver, - 'MSPointerCancel': this.msPointerCancel, - 'MSGotPointerCapture': this.msGotPointerCapture, - 'MSLostPointerCapture': this.msLostPointerCapture + 'MSPointerDown': msPointerDown, + 'MSPointerMove': msPointerMove, + 'MSPointerUp': msPointerUp, + 'MSPointerOut': msPointerOut, + 'MSPointerOver': msPointerOver, + 'MSPointerCancel': msPointerCancel, + 'MSGotPointerCapture': msGotPointerCapture, + 'MSLostPointerCapture': msLostPointerCapture }; - EventSource.call(this, dispatcher, mapping); + super(dispatcher, mapping); /** - * @const - * @type {!Object.} - */ + * @const + * @type {!Object.} + */ this.pointerMap = dispatcher.pointerMap; } /** - * Creates a copy of the original event that will be used - * for the fake pointer event. - * - * @private - * @param {MSPointerEvent} inEvent The in event. - * @return {Object} The copied event. - */ + * Creates a copy of the original event that will be used + * for the fake pointer event. + * + * @private + * @param {MSPointerEvent} inEvent The in event. + * @return {Object} The copied event. + */ prepareEvent_(inEvent) { let e = inEvent; if (typeof inEvent.pointerType === 'number') { @@ -93,97 +181,13 @@ class MsSource { } /** - * Remove this pointer from the list of active pointers. - * @param {number} pointerId Pointer identifier. - */ + * Remove this pointer from the list of active pointers. + * @param {number} pointerId Pointer identifier. + */ cleanup(pointerId) { delete this.pointerMap[pointerId.toString()]; } - /** - * Handler for `msPointerDown`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msPointerDown(inEvent) { - this.pointerMap[inEvent.pointerId.toString()] = inEvent; - const e = this.prepareEvent_(inEvent); - this.dispatcher.down(e, inEvent); - } - - /** - * Handler for `msPointerMove`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msPointerMove(inEvent) { - const e = this.prepareEvent_(inEvent); - this.dispatcher.move(e, inEvent); - } - - /** - * Handler for `msPointerUp`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msPointerUp(inEvent) { - const e = this.prepareEvent_(inEvent); - this.dispatcher.up(e, inEvent); - this.cleanup(inEvent.pointerId); - } - - /** - * Handler for `msPointerOut`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msPointerOut(inEvent) { - const e = this.prepareEvent_(inEvent); - this.dispatcher.leaveOut(e, inEvent); - } - - /** - * Handler for `msPointerOver`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msPointerOver(inEvent) { - const e = this.prepareEvent_(inEvent); - this.dispatcher.enterOver(e, inEvent); - } - - /** - * Handler for `msPointerCancel`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msPointerCancel(inEvent) { - const e = this.prepareEvent_(inEvent); - this.dispatcher.cancel(e, inEvent); - this.cleanup(inEvent.pointerId); - } - - /** - * Handler for `msLostPointerCapture`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msLostPointerCapture(inEvent) { - const e = this.dispatcher.makeEvent('lostpointercapture', inEvent, inEvent); - this.dispatcher.dispatchEvent(e); - } - - /** - * Handler for `msGotPointerCapture`. - * - * @param {MSPointerEvent} inEvent The in event. - */ - msGotPointerCapture(inEvent) { - const e = this.dispatcher.makeEvent('gotpointercapture', inEvent, inEvent); - this.dispatcher.dispatchEvent(e); - } } -inherits(MsSource, EventSource); - export default MsSource; diff --git a/src/ol/pointer/NativeSource.js b/src/ol/pointer/NativeSource.js index 0ac60c42bd..34986ecbec 100644 --- a/src/ol/pointer/NativeSource.js +++ b/src/ol/pointer/NativeSource.js @@ -1,6 +1,7 @@ /** * @module ol/pointer/NativeSource */ + // Based on https://github.com/Polymer/PointerEvents // Copyright (c) 2013 The Polymer Authors. All rights reserved. @@ -31,103 +32,107 @@ // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -import {inherits} from '../util.js'; import EventSource from '../pointer/EventSource.js'; /** - * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. - * @constructor - * @extends {module:ol/pointer/EventSource} + * Handler for `pointerdown`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. */ -class NativeSource { - constructor(dispatcher) { - const mapping = { - 'pointerdown': this.pointerDown, - 'pointermove': this.pointerMove, - 'pointerup': this.pointerUp, - 'pointerout': this.pointerOut, - 'pointerover': this.pointerOver, - 'pointercancel': this.pointerCancel, - 'gotpointercapture': this.gotPointerCapture, - 'lostpointercapture': this.lostPointerCapture - }; - EventSource.call(this, dispatcher, mapping); - } - - /** - * Handler for `pointerdown`. - * - * @param {Event} inEvent The in event. - */ - pointerDown(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } - - /** - * Handler for `pointermove`. - * - * @param {Event} inEvent The in event. - */ - pointerMove(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } - - /** - * Handler for `pointerup`. - * - * @param {Event} inEvent The in event. - */ - pointerUp(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } - - /** - * Handler for `pointerout`. - * - * @param {Event} inEvent The in event. - */ - pointerOut(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } - - /** - * Handler for `pointerover`. - * - * @param {Event} inEvent The in event. - */ - pointerOver(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } - - /** - * Handler for `pointercancel`. - * - * @param {Event} inEvent The in event. - */ - pointerCancel(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } - - /** - * Handler for `lostpointercapture`. - * - * @param {Event} inEvent The in event. - */ - lostPointerCapture(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } - - /** - * Handler for `gotpointercapture`. - * - * @param {Event} inEvent The in event. - */ - gotPointerCapture(inEvent) { - this.dispatcher.fireNativeEvent(inEvent); - } +function pointerDown(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); } -inherits(NativeSource, EventSource); +/** + * Handler for `pointermove`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. + */ +function pointerMove(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); +} +/** + * Handler for `pointerup`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. + */ +function pointerUp(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); +} + +/** + * Handler for `pointerout`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. + */ +function pointerOut(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); +} + +/** + * Handler for `pointerover`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. + */ +function pointerOver(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); +} + +/** + * Handler for `pointercancel`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. + */ +function pointerCancel(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); +} + +/** + * Handler for `lostpointercapture`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. + */ +function lostPointerCapture(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); +} + +/** + * Handler for `gotpointercapture`. + * + * @this {module:ol/pointer/NativeSource} + * @param {Event} inEvent The in event. + */ +function gotPointerCapture(inEvent) { + this.dispatcher.fireNativeEvent(inEvent); +} + +class NativeSource extends EventSource { + + /** + * @param {module:ol/pointer/PointerEventHandler} dispatcher Event handler. + */ + constructor(dispatcher) { + const mapping = { + 'pointerdown': pointerDown, + 'pointermove': pointerMove, + 'pointerup': pointerUp, + 'pointerout': pointerOut, + 'pointerover': pointerOver, + 'pointercancel': pointerCancel, + 'gotpointercapture': gotPointerCapture, + 'lostpointercapture': lostPointerCapture + }; + super(dispatcher, mapping); + } + +} export default NativeSource; diff --git a/src/ol/pointer/PointerEvent.js b/src/ol/pointer/PointerEvent.js index f21ad0aa11..acaffe16c7 100644 --- a/src/ol/pointer/PointerEvent.js +++ b/src/ol/pointer/PointerEvent.js @@ -1,6 +1,7 @@ /** * @module ol/pointer/PointerEvent */ + // Based on https://github.com/Polymer/PointerEvents // Copyright (c) 2013 The Polymer Authors. All rights reserved. @@ -31,7 +32,6 @@ // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -import {inherits} from '../util.js'; import Event from '../events/Event.js'; @@ -42,155 +42,154 @@ import Event from '../events/Event.js'; let HAS_BUTTONS = false; -/** - * A class for pointer events. - * - * This class is used as an abstraction for mouse events, - * touch events and even native pointer events. - * - * @constructor - * @extends {module:ol/events/Event} - * @param {string} type The type of the event to create. - * @param {Event} originalEvent The event. - * @param {Object.=} opt_eventDict An optional dictionary of - * initial event properties. - */ -class PointerEvent { +class PointerEvent extends Event { + + /** + * A class for pointer events. + * + * This class is used as an abstraction for mouse events, + * touch events and even native pointer events. + * + * @param {string} type The type of the event to create. + * @param {Event} originalEvent The event. + * @param {Object.=} opt_eventDict An optional dictionary of + * initial event properties. + */ constructor(type, originalEvent, opt_eventDict) { - Event.call(this, type); + super(type); /** - * @const - * @type {Event} - */ + * @const + * @type {Event} + */ this.originalEvent = originalEvent; const eventDict = opt_eventDict ? opt_eventDict : {}; /** - * @type {number} - */ + * @type {number} + */ this.buttons = this.getButtons_(eventDict); /** - * @type {number} - */ + * @type {number} + */ this.pressure = this.getPressure_(eventDict, this.buttons); // MouseEvent related properties /** - * @type {boolean} - */ + * @type {boolean} + */ this.bubbles = 'bubbles' in eventDict ? eventDict['bubbles'] : false; /** - * @type {boolean} - */ + * @type {boolean} + */ this.cancelable = 'cancelable' in eventDict ? eventDict['cancelable'] : false; /** - * @type {Object} - */ + * @type {Object} + */ this.view = 'view' in eventDict ? eventDict['view'] : null; /** - * @type {number} - */ + * @type {number} + */ this.detail = 'detail' in eventDict ? eventDict['detail'] : null; /** - * @type {number} - */ + * @type {number} + */ this.screenX = 'screenX' in eventDict ? eventDict['screenX'] : 0; /** - * @type {number} - */ + * @type {number} + */ this.screenY = 'screenY' in eventDict ? eventDict['screenY'] : 0; /** - * @type {number} - */ + * @type {number} + */ this.clientX = 'clientX' in eventDict ? eventDict['clientX'] : 0; /** - * @type {number} - */ + * @type {number} + */ this.clientY = 'clientY' in eventDict ? eventDict['clientY'] : 0; /** - * @type {boolean} - */ + * @type {boolean} + */ this.ctrlKey = 'ctrlKey' in eventDict ? eventDict['ctrlKey'] : false; /** - * @type {boolean} - */ + * @type {boolean} + */ this.altKey = 'altKey' in eventDict ? eventDict['altKey'] : false; /** - * @type {boolean} - */ + * @type {boolean} + */ this.shiftKey = 'shiftKey' in eventDict ? eventDict['shiftKey'] : false; /** - * @type {boolean} - */ + * @type {boolean} + */ this.metaKey = 'metaKey' in eventDict ? eventDict['metaKey'] : false; /** - * @type {number} - */ + * @type {number} + */ this.button = 'button' in eventDict ? eventDict['button'] : 0; /** - * @type {Node} - */ + * @type {Node} + */ this.relatedTarget = 'relatedTarget' in eventDict ? eventDict['relatedTarget'] : null; // PointerEvent related properties /** - * @const - * @type {number} - */ + * @const + * @type {number} + */ this.pointerId = 'pointerId' in eventDict ? eventDict['pointerId'] : 0; /** - * @type {number} - */ + * @type {number} + */ this.width = 'width' in eventDict ? eventDict['width'] : 0; /** - * @type {number} - */ + * @type {number} + */ this.height = 'height' in eventDict ? eventDict['height'] : 0; /** - * @type {number} - */ + * @type {number} + */ this.tiltX = 'tiltX' in eventDict ? eventDict['tiltX'] : 0; /** - * @type {number} - */ + * @type {number} + */ this.tiltY = 'tiltY' in eventDict ? eventDict['tiltY'] : 0; /** - * @type {string} - */ + * @type {string} + */ this.pointerType = 'pointerType' in eventDict ? eventDict['pointerType'] : ''; /** - * @type {number} - */ + * @type {number} + */ this.hwTimestamp = 'hwTimestamp' in eventDict ? eventDict['hwTimestamp'] : 0; /** - * @type {boolean} - */ + * @type {boolean} + */ this.isPrimary = 'isPrimary' in eventDict ? eventDict['isPrimary'] : false; // keep the semantics of preventDefault @@ -202,10 +201,10 @@ class PointerEvent { } /** - * @private - * @param {Object.} eventDict The event dictionary. - * @return {number} Button indicator. - */ + * @private + * @param {Object.} eventDict The event dictionary. + * @return {number} Button indicator. + */ getButtons_(eventDict) { // According to the w3c spec, // http://www.w3.org/TR/DOM-Level-3-Events/#events-MouseEvent-button @@ -243,11 +242,11 @@ class PointerEvent { } /** - * @private - * @param {Object.} eventDict The event dictionary. - * @param {number} buttons Button indicator. - * @return {number} The pressure. - */ + * @private + * @param {Object.} eventDict The event dictionary. + * @param {number} buttons Button indicator. + * @return {number} The pressure. + */ getPressure_(eventDict, buttons) { // Spec requires that pointers without pressure specified use 0.5 for down // state and 0 for up state. @@ -261,8 +260,6 @@ class PointerEvent { } } -inherits(PointerEvent, Event); - /** * Checks if the `buttons` property is supported. diff --git a/src/ol/pointer/PointerEventHandler.js b/src/ol/pointer/PointerEventHandler.js index aa9becd009..a7a350129d 100644 --- a/src/ol/pointer/PointerEventHandler.js +++ b/src/ol/pointer/PointerEventHandler.js @@ -1,6 +1,7 @@ /** * @module ol/pointer/PointerEventHandler */ + // Based on https://github.com/Polymer/PointerEvents // Copyright (c) 2013 The Polymer Authors. All rights reserved. @@ -31,7 +32,6 @@ // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -import {inherits} from '../util.js'; import {listen, unlisten} from '../events.js'; import EventTarget from '../events/EventTarget.js'; import {POINTER, MSPOINTER, TOUCH} from '../has.js'; @@ -83,14 +83,13 @@ const CLONE_PROPS = [ ]; -/** - * @constructor - * @extends {module:ol/events/EventTarget} - * @param {Element|HTMLDocument} element Viewport element. - */ -class PointerEventHandler { +class PointerEventHandler extends EventTarget { + + /** + * @param {Element|HTMLDocument} element Viewport element. + */ constructor(element) { - EventTarget.call(this); + super(); /** * @const @@ -416,6 +415,4 @@ class PointerEventHandler { } } -inherits(PointerEventHandler, EventTarget); - export default PointerEventHandler; diff --git a/src/ol/pointer/TouchSource.js b/src/ol/pointer/TouchSource.js index 92d34fa54d..b5331144a4 100644 --- a/src/ol/pointer/TouchSource.js +++ b/src/ol/pointer/TouchSource.js @@ -1,6 +1,7 @@ /** * @module ol/pointer/TouchSource */ + // Based on https://github.com/Polymer/PointerEvents // Copyright (c) 2013 The Polymer Authors. All rights reserved. @@ -31,7 +32,6 @@ // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -import {inherits} from '../util.js'; import {remove} from '../array.js'; import EventSource from '../pointer/EventSource.js'; import {POINTER_ID} from '../pointer/MouseSource.js'; @@ -42,28 +42,75 @@ import {POINTER_ID} from '../pointer/MouseSource.js'; */ const CLICK_COUNT_TIMEOUT = 200; - /** * @type {string} */ const POINTER_TYPE = 'touch'; +/** + * Handler for `touchstart`, triggers `pointerover`, + * `pointerenter` and `pointerdown` events. + * + * @this {module:ol/pointer/TouchSource} + * @param {TouchEvent} inEvent The in event. + */ +function touchstart(inEvent) { + this.vacuumTouches_(inEvent); + this.setPrimaryTouch_(inEvent.changedTouches[0]); + this.dedupSynthMouse_(inEvent); + this.clickCount_++; + this.processTouches_(inEvent, this.overDown_); +} /** - * @constructor - * @param {module:ol/pointer/PointerEventHandler} dispatcher The event handler. - * @param {module:ol/pointer/MouseSource} mouseSource Mouse source. - * @extends {module:ol/pointer/EventSource} + * Handler for `touchmove`. + * + * @this {module:ol/pointer/TouchSource} + * @param {TouchEvent} inEvent The in event. */ -class TouchSource { +function touchmove(inEvent) { + inEvent.preventDefault(); + this.processTouches_(inEvent, this.moveOverOut_); +} + +/** + * Handler for `touchend`, triggers `pointerup`, + * `pointerout` and `pointerleave` events. + * + * @this {module:ol/pointer/TouchSource} + * @param {TouchEvent} inEvent The event. + */ +function touchend(inEvent) { + this.dedupSynthMouse_(inEvent); + this.processTouches_(inEvent, this.upOut_); +} + +/** + * Handler for `touchcancel`, triggers `pointercancel`, + * `pointerout` and `pointerleave` events. + * + * @this {module:ol/pointer/TouchSource} + * @param {TouchEvent} inEvent The in event. + */ +function touchcancel(inEvent) { + this.processTouches_(inEvent, this.cancelOut_); +} + + +class TouchSource extends EventSource { + + /** + * @param {module:ol/pointer/PointerEventHandler} dispatcher The event handler. + * @param {module:ol/pointer/MouseSource} mouseSource Mouse source. + */ constructor(dispatcher, mouseSource) { const mapping = { - 'touchstart': this.touchstart, - 'touchmove': this.touchmove, - 'touchend': this.touchend, - 'touchcancel': this.touchcancel + 'touchstart': touchstart, + 'touchmove': touchmove, + 'touchend': touchend, + 'touchcancel': touchcancel }; - EventSource.call(this, dispatcher, mapping); + super(dispatcher, mapping); /** * @const @@ -269,20 +316,6 @@ class TouchSource { } } - /** - * Handler for `touchstart`, triggers `pointerover`, - * `pointerenter` and `pointerdown` events. - * - * @param {TouchEvent} inEvent The in event. - */ - touchstart(inEvent) { - this.vacuumTouches_(inEvent); - this.setPrimaryTouch_(inEvent.changedTouches[0]); - this.dedupSynthMouse_(inEvent); - this.clickCount_++; - this.processTouches_(inEvent, this.overDown_); - } - /** * @private * @param {TouchEvent} browserEvent The event. @@ -299,16 +332,6 @@ class TouchSource { this.dispatcher.down(inPointer, browserEvent); } - /** - * Handler for `touchmove`. - * - * @param {TouchEvent} inEvent The in event. - */ - touchmove(inEvent) { - inEvent.preventDefault(); - this.processTouches_(inEvent, this.moveOverOut_); - } - /** * @private * @param {TouchEvent} browserEvent The event. @@ -343,17 +366,6 @@ class TouchSource { pointer.outTarget = event.target; } - /** - * Handler for `touchend`, triggers `pointerup`, - * `pointerout` and `pointerleave` events. - * - * @param {TouchEvent} inEvent The event. - */ - touchend(inEvent) { - this.dedupSynthMouse_(inEvent); - this.processTouches_(inEvent, this.upOut_); - } - /** * @private * @param {TouchEvent} browserEvent An event. @@ -366,16 +378,6 @@ class TouchSource { this.cleanUpPointer_(inPointer); } - /** - * Handler for `touchcancel`, triggers `pointercancel`, - * `pointerout` and `pointerleave` events. - * - * @param {TouchEvent} inEvent The in event. - */ - touchcancel(inEvent) { - this.processTouches_(inEvent, this.cancelOut_); - } - /** * @private * @param {TouchEvent} browserEvent The event. @@ -420,7 +422,4 @@ class TouchSource { } } -inherits(TouchSource, EventSource); - - export default TouchSource;