diff --git a/src/objectliterals.exports b/src/objectliterals.exports index 4af5ad024f..a990d913c6 100644 --- a/src/objectliterals.exports +++ b/src/objectliterals.exports @@ -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 diff --git a/src/ol/interaction/touchrotateandzoominteraction.js b/src/ol/interaction/touchrotateinteraction.js similarity index 69% rename from src/ol/interaction/touchrotateandzoominteraction.js rename to src/ol/interaction/touchrotateinteraction.js index d06d6ee93d..1253866fdc 100644 --- a/src/ol/interaction/touchrotateandzoominteraction.js +++ b/src/ol/interaction/touchrotateinteraction.js @@ -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; diff --git a/src/ol/interaction/touchzoominteraction.js b/src/ol/interaction/touchzoominteraction.js new file mode 100644 index 0000000000..3d5bd178ae --- /dev/null +++ b/src/ol/interaction/touchzoominteraction.js @@ -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; + } +}; diff --git a/src/ol/map.js b/src/ol/map.js index ad1fa4d8c0..1a16c95136 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -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) ? diff --git a/test/spec/ol/map.test.js b/test/spec/ol/map.test.js index db5ed7f546..43cda9f703 100644 --- a/test/spec/ol/map.test.js +++ b/test/spec/ol/map.test.js @@ -79,7 +79,8 @@ describe('ol.Map', function() { mouseWheelZoom: false, shiftDragZoom: false, touchPan: false, - touchRotateZoom: false + touchRotate: false, + touchZoom: false }; });