ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

former touch interactions now use pointer events

Browse Source
This commit is contained in:
tsauerwein
2014-02-06 16:52:01 +01:00
parent 014ef96c31
commit 1c75ecc260
13 changed files with 90 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/objectliterals.jsdoc
View File

@@ -442,10 +442,10 @@
* desired. Default is `true`.
* @property {boolean|undefined} shiftDragZoom Whether Shift-drag zoom is
* desired. Default is `true`.
* @property {boolean|undefined} touchPan Whether touch pan is
* @property {boolean|undefined} pan Whether pan is
* desired. Default is `true`.
* @property {boolean|undefined} touchRotate Whether touch rotate is desired. Default is `true`.
* @property {boolean|undefined} touchZoom Whether touch zoom is desired. Default is `true`.
* @property {boolean|undefined} rotate Whether rotate is desired. Default is `true`.
* @property {boolean|undefined} zoom Whether zoom is desired. Default is `true`.
* @property {number|undefined} zoomDelta Zoom delta.
* @property {number|undefined} zoomDuration Zoom duration.
* @todo stability experimental
@@ -512,7 +512,7 @@
*/
/**
* @typedef {Object} olx.interaction.TouchPanOptions
* @typedef {Object} olx.interaction.PanOptions
* @property {ol.Kinetic|undefined} kinetic Kinetic inertia to apply to the
* pan.
* @todo stability experimental
@@ -527,14 +527,14 @@
*/
/**
* @typedef {Object} olx.interaction.TouchRotateOptions
* @typedef {Object} olx.interaction.RotateOptions
* @property {number|undefined} threshold Minimal angle in radians to start a rotation.
* Default is `0.3`.
* @todo stability experimental
*/
/**
* @typedef {Object} olx.interaction.TouchZoomOptions
* @typedef {Object} olx.interaction.ZoomOptions
* @property {number|undefined} duration Animation duration in milliseconds. Default is `400`.
* @todo stability experimental
*/

30
src/ol/interaction/interactiondefaults.js
View File

@@ -9,9 +9,9 @@ goog.require('ol.interaction.DragZoom');
goog.require('ol.interaction.KeyboardPan');
goog.require('ol.interaction.KeyboardZoom');
goog.require('ol.interaction.MouseWheelZoom');
goog.require('ol.interaction.TouchPan');
goog.require('ol.interaction.TouchRotate');
goog.require('ol.interaction.TouchZoom');
goog.require('ol.interaction.Pan');
goog.require('ol.interaction.Rotate');
goog.require('ol.interaction.Zoom');
/**
@@ -51,24 +51,24 @@ ol.interaction.defaults = function(opt_options) {
}));
}
var touchPan = goog.isDef(options.touchPan) ?
options.touchPan : true;
if (touchPan) {
interactions.push(new ol.interaction.TouchPan({
var pan = goog.isDef(options.pan) ?
options.pan : true;
if (pan) {
interactions.push(new ol.interaction.Pan({
kinetic: kinetic
}));
}
var touchRotate = goog.isDef(options.touchRotate) ?
options.touchRotate : true;
if (touchRotate) {
interactions.push(new ol.interaction.TouchRotate());
var rotate = goog.isDef(options.rotate) ?
options.rotate : true;
if (rotate) {
interactions.push(new ol.interaction.Rotate());
}
var touchZoom = goog.isDef(options.touchZoom) ?
options.touchZoom : true;
if (touchZoom) {
interactions.push(new ol.interaction.TouchZoom({
var zoom = goog.isDef(options.zoom) ?
options.zoom : true;
if (zoom) {
interactions.push(new ol.interaction.Zoom({
duration: options.zoomDuration
}));
}

1
src/ol/interaction/paninteraction.exports Normal file
View File

@@ -0,0 +1 @@
@exportSymbol ol.interaction.Pan

20
src/ol/interaction/touchpaninteraction.js → src/ol/interaction/paninteraction.js
View File

@@ -1,5 +1,5 @@
// FIXME works for View2D only
goog.provide('ol.interaction.TouchPan');
goog.provide('ol.interaction.Pan');
goog.require('goog.asserts');
goog.require('ol.Kinetic');
@@ -7,7 +7,7 @@ goog.require('ol.Pixel');
goog.require('ol.PreRenderFunction');
goog.require('ol.View2D');
goog.require('ol.coordinate');
goog.require('ol.interaction.Touch');
goog.require('ol.interaction.PointerInteraction');
@@ -15,11 +15,11 @@ goog.require('ol.interaction.Touch');
* Allows the user to pan the map by touching and dragging
* on a touch screen.
* @constructor
* @extends {ol.interaction.Touch}
* @param {olx.interaction.TouchPanOptions=} opt_options Options.
* @extends {ol.interaction.PointerInteraction}
* @param {olx.interaction.PanOptions=} opt_options Options.
* @todo stability experimental
*/
ol.interaction.TouchPan = function(opt_options) {
ol.interaction.Pan = function(opt_options) {
goog.base(this);
@@ -49,15 +49,15 @@ ol.interaction.TouchPan = function(opt_options) {
this.noKinetic_ = false;
};
goog.inherits(ol.interaction.TouchPan, ol.interaction.Touch);
goog.inherits(ol.interaction.Pan, ol.interaction.PointerInteraction);
/**
* @inheritDoc
*/
ol.interaction.TouchPan.prototype.handleTouchMove = function(mapBrowserEvent) {
ol.interaction.Pan.prototype.handlePointerMove = function(mapBrowserEvent) {
goog.asserts.assert(this.targetTouches.length >= 1);
var centroid = ol.interaction.Touch.centroid(this.targetTouches);
var centroid = ol.interaction.PointerInteraction.centroid(this.targetTouches);
if (!goog.isNull(this.lastCentroid)) {
if (this.kinetic_) {
this.kinetic_.update(centroid[0], centroid[1]);
@@ -83,7 +83,7 @@ ol.interaction.TouchPan.prototype.handleTouchMove = function(mapBrowserEvent) {
/**
* @inheritDoc
*/
ol.interaction.TouchPan.prototype.handleTouchEnd =
ol.interaction.Pan.prototype.handlePointerUp =
function(mapBrowserEvent) {
var map = mapBrowserEvent.map;
var view2D = map.getView().getView2D();
@@ -116,7 +116,7 @@ ol.interaction.TouchPan.prototype.handleTouchEnd =
/**
* @inheritDoc
*/
ol.interaction.TouchPan.prototype.handleTouchStart =
ol.interaction.Pan.prototype.handlePointerDown =
function(mapBrowserEvent) {
if (this.targetTouches.length > 0) {
var map = mapBrowserEvent.map;

59
src/ol/interaction/touchinteraction.js → src/ol/interaction/pointerinteraction.js
View File

@@ -1,4 +1,4 @@
goog.provide('ol.interaction.Touch');
goog.provide('ol.interaction.PointerInteraction');
goog.require('goog.asserts');
goog.require('goog.functions');
@@ -16,7 +16,7 @@ goog.require('ol.interaction.Interaction');
* @constructor
* @extends {ol.interaction.Interaction}
*/
ol.interaction.Touch = function() {
ol.interaction.PointerInteraction = function() {
goog.base(this);
@@ -39,14 +39,14 @@ ol.interaction.Touch = function() {
this.targetTouches = [];
};
goog.inherits(ol.interaction.Touch, ol.interaction.Interaction);
goog.inherits(ol.interaction.PointerInteraction, ol.interaction.Interaction);
/**
* @param {Array.<Object>} touches TouchEvents.
* @return {ol.Pixel} Centroid pixel.
*/
ol.interaction.Touch.centroid = function(touches) {
ol.interaction.PointerInteraction.centroid = function(touches) {
var length = touches.length;
var clientX = 0;
var clientY = 0;
@@ -64,12 +64,12 @@ ol.interaction.Touch.centroid = function(touches) {
* or touchend event.
* @private
*/
ol.interaction.Touch.isTouchEvent_ = function(mapBrowserEvent) {
ol.interaction.PointerInteraction.isTouchEvent_ = function(mapBrowserEvent) {
var type = mapBrowserEvent.type;
return (
type === ol.MapBrowserEvent.EventType.TOUCHSTART ||
type === ol.MapBrowserEvent.EventType.TOUCHMOVE ||
type === ol.MapBrowserEvent.EventType.TOUCHEND);
type === ol.MapBrowserEvent.EventType.POINTERDOWN ||
type === ol.MapBrowserEvent.EventType.POINTERMOVE ||
type === ol.MapBrowserEvent.EventType.POINTERUP);
};
@@ -77,24 +77,17 @@ ol.interaction.Touch.isTouchEvent_ = function(mapBrowserEvent) {
* @param {ol.MapBrowserEvent} mapBrowserEvent Event.
* @private
*/
ol.interaction.Touch.prototype.updateTrackedTouches_ =
ol.interaction.PointerInteraction.prototype.updateTrackedTouches_ =
function(mapBrowserEvent) {
if (ol.interaction.Touch.isTouchEvent_(mapBrowserEvent)) {
if (ol.interaction.PointerInteraction.isTouchEvent_(mapBrowserEvent)) {
var event = mapBrowserEvent.originalEvent;
if (goog.isDef(event.targetTouches)) {
// W3C touch events
this.targetTouches = event.targetTouches;
} else if (goog.isDef(event.pointerId)) {
// IE pointer event
if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.TOUCHEND) {
delete this.trackedTouches_[event.pointerId];
} else {
this.trackedTouches_[event.pointerId] = event;
}
this.targetTouches = goog.object.getValues(this.trackedTouches_);
if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERUP) {
delete this.trackedTouches_[event.pointerId];
} else {
goog.asserts.fail('unknown touch event model');
this.trackedTouches_[event.pointerId] = event;
}
this.targetTouches = goog.object.getValues(this.trackedTouches_);
}
};
@@ -103,7 +96,7 @@ ol.interaction.Touch.prototype.updateTrackedTouches_ =
* @param {ol.MapBrowserEvent} mapBrowserEvent Event.
* @protected
*/
ol.interaction.Touch.prototype.handleTouchMove = goog.nullFunction;
ol.interaction.PointerInteraction.prototype.handlePointerMove = goog.nullFunction;
/**
@@ -111,7 +104,8 @@ ol.interaction.Touch.prototype.handleTouchMove = goog.nullFunction;
* @protected
* @return {boolean} Capture dragging.
*/
ol.interaction.Touch.prototype.handleTouchEnd = goog.functions.FALSE;
ol.interaction.PointerInteraction.prototype.handlePointerUp =
goog.functions.FALSE;
/**
@@ -119,28 +113,29 @@ ol.interaction.Touch.prototype.handleTouchEnd = goog.functions.FALSE;
* @protected
* @return {boolean} Capture dragging.
*/
ol.interaction.Touch.prototype.handleTouchStart = goog.functions.FALSE;
ol.interaction.PointerInteraction.prototype.handlePointerDown =
goog.functions.FALSE;
/**
* @inheritDoc
*/
ol.interaction.Touch.prototype.handleMapBrowserEvent =
ol.interaction.PointerInteraction.prototype.handleMapBrowserEvent =
function(mapBrowserEvent) {
var view = mapBrowserEvent.map.getView();
this.updateTrackedTouches_(mapBrowserEvent);
if (this.handled_) {
if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.TOUCHMOVE) {
this.handleTouchMove(mapBrowserEvent);
} else if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.TOUCHEND) {
this.handled_ = this.handleTouchEnd(mapBrowserEvent);
if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERMOVE) {
this.handlePointerMove(mapBrowserEvent);
} else if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERUP) {
this.handled_ = this.handlePointerUp(mapBrowserEvent);
if (!this.handled_) {
view.setHint(ol.ViewHint.INTERACTING, -1);
}
}
}
if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.TOUCHSTART) {
var handled = this.handleTouchStart(mapBrowserEvent);
if (mapBrowserEvent.type == ol.MapBrowserEvent.EventType.POINTERDOWN) {
var handled = this.handlePointerDown(mapBrowserEvent);
if (!this.handled_ && handled) {
view.setHint(ol.ViewHint.INTERACTING, 1);
}

1
src/ol/interaction/rotateinteraction.exports Normal file
View File

@@ -0,0 +1 @@
@exportSymbol ol.interaction.Rotate

24
src/ol/interaction/touchrotateinteraction.js → src/ol/interaction/rotateinteraction.js
View File

@@ -1,18 +1,18 @@
// FIXME works for View2D only
goog.provide('ol.interaction.TouchRotate');
goog.provide('ol.interaction.Rotate');
goog.require('goog.asserts');
goog.require('goog.style');
goog.require('ol.Coordinate');
goog.require('ol.interaction.Interaction');
goog.require('ol.interaction.Touch');
goog.require('ol.interaction.PointerInteraction');
/**
* @define {number} Animation duration.
*/
ol.interaction.TOUCHROTATE_ANIMATION_DURATION = 250;
ol.interaction.ROTATE_ANIMATION_DURATION = 250;
@@ -20,11 +20,11 @@ ol.interaction.TOUCHROTATE_ANIMATION_DURATION = 250;
* Allows the user to rotate the map by twisting with two fingers
* on a touch screen.
* @constructor
* @extends {ol.interaction.Touch}
* @param {olx.interaction.TouchRotateOptions=} opt_options Options.
* @extends {ol.interaction.PointerInteraction}
* @param {olx.interaction.RotateOptions=} opt_options Options.
* @todo stability experimental
*/
ol.interaction.TouchRotate = function(opt_options) {
ol.interaction.Rotate = function(opt_options) {
goog.base(this);
@@ -61,13 +61,13 @@ ol.interaction.TouchRotate = function(opt_options) {
this.threshold_ = goog.isDef(options.threshold) ? options.threshold : 0.3;
};
goog.inherits(ol.interaction.TouchRotate, ol.interaction.Touch);
goog.inherits(ol.interaction.Rotate, ol.interaction.PointerInteraction);
/**
* @inheritDoc
*/
ol.interaction.TouchRotate.prototype.handleTouchMove =
ol.interaction.Rotate.prototype.handlePointerMove =
function(mapBrowserEvent) {
goog.asserts.assert(this.targetTouches.length >= 2);
var rotationDelta = 0.0;
@@ -97,7 +97,7 @@ ol.interaction.TouchRotate.prototype.handleTouchMove =
// FIXME: should be the intersection point between the lines:
// touch0,touch1 and previousTouch0,previousTouch1
var viewportPosition = goog.style.getClientPosition(map.getViewport());
var centroid = ol.interaction.Touch.centroid(this.targetTouches);
var centroid = ol.interaction.PointerInteraction.centroid(this.targetTouches);
centroid[0] -= viewportPosition.x;
centroid[1] -= viewportPosition.y;
this.anchor_ = map.getCoordinateFromPixel(centroid);
@@ -117,7 +117,7 @@ ol.interaction.TouchRotate.prototype.handleTouchMove =
/**
* @inheritDoc
*/
ol.interaction.TouchRotate.prototype.handleTouchEnd =
ol.interaction.Rotate.prototype.handlePointerUp =
function(mapBrowserEvent) {
if (this.targetTouches.length < 2) {
var map = mapBrowserEvent.map;
@@ -127,7 +127,7 @@ ol.interaction.TouchRotate.prototype.handleTouchEnd =
if (this.rotating_) {
ol.interaction.Interaction.rotate(
map, view, view2DState.rotation, this.anchor_,
ol.interaction.TOUCHROTATE_ANIMATION_DURATION);
ol.interaction.ROTATE_ANIMATION_DURATION);
}
return false;
} else {
@@ -139,7 +139,7 @@ ol.interaction.TouchRotate.prototype.handleTouchEnd =
/**
* @inheritDoc
*/
ol.interaction.TouchRotate.prototype.handleTouchStart =
ol.interaction.Rotate.prototype.handlePointerDown =
function(mapBrowserEvent) {
if (this.targetTouches.length >= 2) {
var map = mapBrowserEvent.map;

1
src/ol/interaction/touchpan.exports
View File

@@ -1 +0,0 @@
@exportSymbol ol.interaction.TouchPan

1
src/ol/interaction/touchrotate.exports
View File

@@ -1 +0,0 @@
@exportSymbol ol.interaction.TouchRotate

1
src/ol/interaction/touchzoom.exports
View File

@@ -1 +0,0 @@
@exportSymbol ol.interaction.TouchZoom

1
src/ol/interaction/zoominteraction.exports Normal file
View File

@@ -0,0 +1 @@
@exportSymbol ol.interaction.Zoom

20
src/ol/interaction/touchzoominteraction.js → src/ol/interaction/zoominteraction.js
View File

@@ -1,12 +1,12 @@
// FIXME works for View2D only
goog.provide('ol.interaction.TouchZoom');
goog.provide('ol.interaction.Zoom');
goog.require('goog.asserts');
goog.require('goog.style');
goog.require('ol.Coordinate');
goog.require('ol.interaction.Interaction');
goog.require('ol.interaction.Touch');
goog.require('ol.interaction.PointerInteraction');
@@ -14,11 +14,11 @@ goog.require('ol.interaction.Touch');
* Allows the user to zoom the map by pinching with two fingers
* on a touch screen.
* @constructor
* @extends {ol.interaction.Touch}
* @param {olx.interaction.TouchZoomOptions=} opt_options Options.
* @extends {ol.interaction.PointerInteraction}
* @param {olx.interaction.ZoomOptions=} opt_options Options.
* @todo stability experimental
*/
ol.interaction.TouchZoom = function(opt_options) {
ol.interaction.Zoom = function(opt_options) {
var options = goog.isDef(opt_options) ? opt_options : {};
@@ -49,13 +49,13 @@ ol.interaction.TouchZoom = function(opt_options) {
this.lastScaleDelta_ = 1;
};
goog.inherits(ol.interaction.TouchZoom, ol.interaction.Touch);
goog.inherits(ol.interaction.Zoom, ol.interaction.PointerInteraction);
/**
* @inheritDoc
*/
ol.interaction.TouchZoom.prototype.handleTouchMove =
ol.interaction.Zoom.prototype.handlePointerMove =
function(mapBrowserEvent) {
goog.asserts.assert(this.targetTouches.length >= 2);
var scaleDelta = 1.0;
@@ -83,7 +83,7 @@ ol.interaction.TouchZoom.prototype.handleTouchMove =
// scale anchor point.
var viewportPosition = goog.style.getClientPosition(map.getViewport());
var centroid = ol.interaction.Touch.centroid(this.targetTouches);
var centroid = ol.interaction.PointerInteraction.centroid(this.targetTouches);
centroid[0] -= viewportPosition.x;
centroid[1] -= viewportPosition.y;
this.anchor_ = map.getCoordinateFromPixel(centroid);
@@ -99,7 +99,7 @@ ol.interaction.TouchZoom.prototype.handleTouchMove =
/**
* @inheritDoc
*/
ol.interaction.TouchZoom.prototype.handleTouchEnd =
ol.interaction.Zoom.prototype.handlePointerUp =
function(mapBrowserEvent) {
if (this.targetTouches.length < 2) {
var map = mapBrowserEvent.map;
@@ -122,7 +122,7 @@ ol.interaction.TouchZoom.prototype.handleTouchEnd =
/**
* @inheritDoc
*/
ol.interaction.TouchZoom.prototype.handleTouchStart =
ol.interaction.Zoom.prototype.handlePointerDown =
function(mapBrowserEvent) {
if (this.targetTouches.length >= 2) {
var map = mapBrowserEvent.map;

11
src/ol/mapbrowserevent.js
View File

@@ -193,13 +193,15 @@ ol.MapBrowserEventHandler.prototype.emulateClick_ = function(browserEvent) {
}
};
/**
* Keeps track on how many pointers are currently active.
*
* @param {goog.events.BrowserEvent} browserEvent Browser event.
* @private
*/
ol.MapBrowserEventHandler.prototype.updateActivePointers_ = function(browserEvent) {
ol.MapBrowserEventHandler.prototype.updateActivePointers_ =
function(browserEvent) {
var event = browserEvent.getBrowserEvent();
if (event.type == ol.MapBrowserEvent.EventType.POINTERUP ||
@@ -210,6 +212,7 @@ ol.MapBrowserEventHandler.prototype.updateActivePointers_ = function(browserEven
}
};
/**
* @param {goog.events.BrowserEvent} browserEvent Browser event.
* @private
@@ -217,7 +220,7 @@ ol.MapBrowserEventHandler.prototype.updateActivePointers_ = function(browserEven
ol.MapBrowserEventHandler.prototype.handlePointerUp_ = function(browserEvent) {
this.updateActivePointers_(browserEvent);
var newEvent = new ol.MapBrowserEvent(
ol.MapBrowserEvent.EventType.TOUCHEND, this.map_, browserEvent);
ol.MapBrowserEvent.EventType.POINTERUP, this.map_, browserEvent);
this.dispatchEvent(newEvent);
if (this.activePointers_ <= 0) {
@@ -244,7 +247,7 @@ ol.MapBrowserEventHandler.prototype.handlePointerDown_ =
function(browserEvent) {
this.updateActivePointers_(browserEvent);
var newEvent = new ol.MapBrowserEvent(
ol.MapBrowserEvent.EventType.TOUCHSTART, this.map_, browserEvent);
ol.MapBrowserEvent.EventType.POINTERDOWN, this.map_, browserEvent);
this.dispatchEvent(newEvent);
this.down_ = browserEvent;
@@ -283,7 +286,7 @@ ol.MapBrowserEventHandler.prototype.handlePointerMove_ =
browserEvent.clientY != this.down_.clientY) {
this.dragged_ = true;
var newEvent = new ol.MapBrowserEvent(
ol.MapBrowserEvent.EventType.TOUCHMOVE, this.map_, browserEvent);
ol.MapBrowserEvent.EventType.POINTERMOVE, this.map_, browserEvent);
this.dispatchEvent(newEvent);
}