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

Split TouchRotateAndZoom interaction.

Browse Source 
Split TouchRotateAndZoom interaction into two new interaction:
TouchRotate and TouchZoom.
This commit is contained in:
Frederic Junod
2013-02-25 10:30:04 +01:00
parent 940ba8afa7
commit c0aa50abfc
5 changed files with 126 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/objectliterals.exports
View File

@@ -13,7 +13,8 @@
@exportObjectLiteralProperty ol.MapOptions.shiftDragZoom boolean|undefined
@exportObjectLiteralProperty ol.MapOptions.target Element|string
@exportObjectLiteralProperty ol.MapOptions.touchPan boolean|undefined
@exportObjectLiteralProperty ol.MapOptions.touchRotateZoom boolean|undefined
@exportObjectLiteralProperty ol.MapOptions.touchRotate boolean|undefined
@exportObjectLiteralProperty ol.MapOptions.touchZoom boolean|undefined
@exportObjectLiteralProperty ol.MapOptions.view ol.IView|undefined
@exportObjectLiteralProperty ol.MapOptions.zoomControl boolean|undefined
@exportObjectLiteralProperty ol.MapOptions.zoomDelta number|undefined

44
src/ol/interaction/touchrotateandzoominteraction.js → src/ol/interaction/touchrotateinteraction.js
View File

@@ -1,6 +1,6 @@
// FIXME works for View2D only
goog.provide('ol.interaction.TouchRotateAndZoom');
goog.provide('ol.interaction.TouchRotate');
goog.require('goog.asserts');
goog.require('ol.View');
@@ -12,8 +12,10 @@ goog.require('ol.interaction.Touch');
/**
* @constructor
* @extends {ol.interaction.Touch}
* @param {number=} opt_threshold Minimal angle to start a rotation.
* Default to 0.3 (radian).
*/
ol.interaction.TouchRotateAndZoom = function() {
ol.interaction.TouchRotate = function(opt_threshold) {
goog.base(this);
@@ -23,12 +25,6 @@ ol.interaction.TouchRotateAndZoom = function() {
*/
this.lastAngle_;
/**
* @private
* @type {number|undefined}
*/
this.lastDistance_;
/**
* @private
* @type {boolean}
@@ -45,23 +41,20 @@ ol.interaction.TouchRotateAndZoom = function() {
* @private
* @type {number}
*/
this.rotationThreshold_ = 0.3;
this.threshold_ = goog.isDef(opt_threshold) ? opt_threshold : 0.3;
};
goog.inherits(ol.interaction.TouchRotateAndZoom, ol.interaction.Touch);
goog.inherits(ol.interaction.TouchRotate, ol.interaction.Touch);
/**
* @inheritDoc
*/
ol.interaction.TouchRotateAndZoom.prototype.handleTouchMove =
ol.interaction.TouchRotate.prototype.handleTouchMove =
function(mapBrowserEvent) {
goog.asserts.assert(this.targetTouches.length >= 2);
var scaleDelta = 1.0;
var rotationDelta = 0.0;
var centroid = ol.interaction.Touch.centroid(this.targetTouches);
var touch0 = this.targetTouches[0];
var touch1 = this.targetTouches[1];
var dx = touch0.clientX - touch1.clientX;
@@ -72,19 +65,11 @@ ol.interaction.TouchRotateAndZoom.prototype.handleTouchMove =
touch1.clientY - touch0.clientY,
touch1.clientX - touch0.clientX);
// distance between touches
var distance = Math.sqrt(dx * dx + dy * dy);
if (goog.isDef(this.lastDistance_)) {
scaleDelta = this.lastDistance_ / distance;
}
this.lastDistance_ = distance;
if (goog.isDef(this.lastAngle_)) {
var delta = angle - this.lastAngle_;
this.rotationDelta_ += delta;
if (!this.rotating_ &&
Math.abs(this.rotationDelta_) > this.rotationThreshold_) {
Math.abs(this.rotationDelta_) > this.threshold_) {
this.rotating_ = true;
}
rotationDelta = delta;
@@ -94,17 +79,15 @@ ol.interaction.TouchRotateAndZoom.prototype.handleTouchMove =
var map = mapBrowserEvent.map;
var view = map.getView();
// rotate / scale anchor point.
// rotate anchor point.
// 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);
centroid.x -= viewportPosition.x;
centroid.y -= viewportPosition.y;
var anchor = map.getCoordinateFromPixel(centroid);
// scale, bypass the resolution constraint
view.zoom_(map, view.getResolution() * scaleDelta, anchor);
// rotate
if (this.rotating_) {
view.rotate(map, view.getRotation() + rotationDelta, anchor);
@@ -115,13 +98,11 @@ ol.interaction.TouchRotateAndZoom.prototype.handleTouchMove =
/**
* @inheritDoc
*/
ol.interaction.TouchRotateAndZoom.prototype.handleTouchEnd =
ol.interaction.TouchRotate.prototype.handleTouchEnd =
function(mapBrowserEvent) {
if (this.targetTouches.length < 2) {
var map = mapBrowserEvent.map;
var view = map.getView();
// take the resolution constraint into account
view.zoomToResolution(map, view.getResolution());
view.setHint(ol.ViewHint.PANNING, -1);
return false;
} else {
@@ -133,11 +114,10 @@ ol.interaction.TouchRotateAndZoom.prototype.handleTouchEnd =
/**
* @inheritDoc
*/
ol.interaction.TouchRotateAndZoom.prototype.handleTouchStart =
ol.interaction.TouchRotate.prototype.handleTouchStart =
function(mapBrowserEvent) {
if (this.targetTouches.length >= 2) {
var view = mapBrowserEvent.map.getView();
this.lastDistance_ = undefined;
this.lastAngle_ = undefined;
this.rotating_ = false;
this.rotationDelta_ = 0.0;

98
src/ol/interaction/touchzoominteraction.js Normal file
View File

@@ -0,0 +1,98 @@
// FIXME works for View2D only
goog.provide('ol.interaction.TouchZoom');
goog.require('goog.asserts');
goog.require('ol.View');
goog.require('ol.ViewHint');
goog.require('ol.interaction.Touch');
/**
* @constructor
* @extends {ol.interaction.Touch}
*/
ol.interaction.TouchZoom = function() {
goog.base(this);
/**
* @private
* @type {number|undefined}
*/
this.lastDistance_;
};
goog.inherits(ol.interaction.TouchZoom, ol.interaction.Touch);
/**
* @inheritDoc
*/
ol.interaction.TouchZoom.prototype.handleTouchMove =
function(mapBrowserEvent) {
goog.asserts.assert(this.targetTouches.length >= 2);
var scaleDelta = 1.0;
var touch0 = this.targetTouches[0];
var touch1 = this.targetTouches[1];
var dx = touch0.clientX - touch1.clientX;
var dy = touch0.clientY - touch1.clientY;
// distance between touches
var distance = Math.sqrt(dx * dx + dy * dy);
if (goog.isDef(this.lastDistance_)) {
scaleDelta = this.lastDistance_ / distance;
}
this.lastDistance_ = distance;
var map = mapBrowserEvent.map;
var view = map.getView();
// scale anchor point.
var viewportPosition = goog.style.getClientPosition(map.getViewport());
var centroid = ol.interaction.Touch.centroid(this.targetTouches);
centroid.x -= viewportPosition.x;
centroid.y -= viewportPosition.y;
var anchor = map.getCoordinateFromPixel(centroid);
// scale, bypass the resolution constraint
view.zoom_(map, view.getResolution() * scaleDelta, anchor);
};
/**
* @inheritDoc
*/
ol.interaction.TouchZoom.prototype.handleTouchEnd =
function(mapBrowserEvent) {
if (this.targetTouches.length < 2) {
var map = mapBrowserEvent.map;
var view = map.getView();
// take the resolution constraint into account
view.zoomToResolution(map, view.getResolution());
view.setHint(ol.ViewHint.PANNING, -1);
return false;
} else {
return true;
}
};
/**
* @inheritDoc
*/
ol.interaction.TouchZoom.prototype.handleTouchStart =
function(mapBrowserEvent) {
if (this.targetTouches.length >= 2) {
var view = mapBrowserEvent.map.getView();
this.lastDistance_ = undefined;
view.setHint(ol.ViewHint.PANNING, 1);
return true;
} else {
return false;
}
};

17
src/ol/map.js
View File

@@ -55,7 +55,8 @@ goog.require('ol.interaction.KeyboardPan');
goog.require('ol.interaction.KeyboardZoom');
goog.require('ol.interaction.MouseWheelZoom');
goog.require('ol.interaction.TouchPan');
goog.require('ol.interaction.TouchRotateAndZoom');
goog.require('ol.interaction.TouchRotate');
goog.require('ol.interaction.TouchZoom');
goog.require('ol.interaction.condition');
goog.require('ol.layer.Layer');
goog.require('ol.renderer.Map');
@@ -967,10 +968,16 @@ ol.Map.createInteractions_ = function(mapOptions) {
interactions.push(new ol.interaction.TouchPan());
}
var touchRotateZoom = goog.isDef(mapOptions.touchRotateZoom) ?
mapOptions.touchRotateZoom : true;
if (touchRotateZoom) {
interactions.push(new ol.interaction.TouchRotateAndZoom());
var touchRotate = goog.isDef(mapOptions.touchRotate) ?
mapOptions.touchRotate : true;
if (touchRotate) {
interactions.push(new ol.interaction.TouchRotate());
}
var touchZoom = goog.isDef(mapOptions.touchZoom) ?
mapOptions.touchZoom : true;
if (touchZoom) {
interactions.push(new ol.interaction.TouchZoom());
}
var dragPan = goog.isDef(mapOptions.dragPan) ?

3
test/spec/ol/map.test.js
View File

@@ -79,7 +79,8 @@ describe('ol.Map', function() {
mouseWheelZoom: false,
shiftDragZoom: false,
touchPan: false,
touchRotateZoom: false
touchRotate: false,
touchZoom: false
};
});