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

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;