From 321b1f72adf130e31409db1726dd60abd5cd448c Mon Sep 17 00:00:00 2001 From: Axel Utech Date: Fri, 9 Dec 2016 18:02:36 +0100 Subject: [PATCH 1/3] add an option to make the pinchZoom constrain zoom levels to integers Changes the default behavior of ol.interaction.PinchZoom to keep the fractional zoom level after the gesture. The old behavior of zooming to the next whole-number level can be enforced with the new parameter `constrainResolution`. --- externs/olx.js | 9 ++++++++- src/ol/interaction/pinchzoom.js | 22 +++++++++++++++------- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/externs/olx.js b/externs/olx.js index 5d9bd288f56..178ffc19f2d 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -3104,6 +3104,13 @@ olx.interaction.PinchZoomOptions; */ olx.interaction.PinchZoomOptions.prototype.duration; +/** + * Zoom to the closest integer zoom level after the pinch gesture ends. Default is `false`. + * @type {boolean|undefined} + * @api + */ +olx.interaction.PinchZoomOptions.prototype.constrainResolution; + /** * @typedef {{handleDownEvent: (function(ol.MapBrowserPointerEvent):boolean|undefined), @@ -7613,7 +7620,7 @@ olx.view.FitOptions.prototype.maxZoom; /** - * The duration of the animation in milliseconds. By default, there is no + * The duration of the animation in milliseconds. By default, there is no * animations. * @type {number|undefined} * @api diff --git a/src/ol/interaction/pinchzoom.js b/src/ol/interaction/pinchzoom.js index ac0bc45f3a1..412cc7ce124 100644 --- a/src/ol/interaction/pinchzoom.js +++ b/src/ol/interaction/pinchzoom.js @@ -27,6 +27,12 @@ ol.interaction.PinchZoom = function(opt_options) { var options = opt_options ? opt_options : {}; + /** + * @private + * @type {boolean} + */ + this.constrainResolution_ = options.constrainResolution || false; + /** * @private * @type {ol.Coordinate} @@ -111,13 +117,15 @@ ol.interaction.PinchZoom.handleUpEvent_ = function(mapBrowserEvent) { var map = mapBrowserEvent.map; var view = map.getView(); view.setHint(ol.View.Hint.INTERACTING, -1); - var resolution = view.getResolution(); - // Zoom to final resolution, with an animation, and provide a - // direction not to zoom out/in if user was pinching in/out. - // Direction is > 0 if pinching out, and < 0 if pinching in. - var direction = this.lastScaleDelta_ - 1; - ol.interaction.Interaction.zoom(map, view, resolution, - this.anchor_, this.duration_, direction); + if (this.constrainResolution_) { + var resolution = view.getResolution(); + // Zoom to final resolution, with an animation, and provide a + // direction not to zoom out/in if user was pinching in/out. + // Direction is > 0 if pinching out, and < 0 if pinching in. + var direction = this.lastScaleDelta_ - 1; + ol.interaction.Interaction.zoom(map, view, resolution, + this.anchor_, this.duration_, direction); + } return false; } else { return true; From f5a27d27881cdae18673edbfc79941ce62da37f3 Mon Sep 17 00:00:00 2001 From: Axel Utech Date: Fri, 9 Dec 2016 18:03:01 +0100 Subject: [PATCH 2/3] add a pinchZoom example demonstrating the old behavior with constrained zooms --- examples/pinchZoom.html | 10 ++++++++++ examples/pinchZoom.js | 25 +++++++++++++++++++++++++ 2 files changed, 35 insertions(+) create mode 100644 examples/pinchZoom.html create mode 100644 examples/pinchZoom.js diff --git a/examples/pinchZoom.html b/examples/pinchZoom.html new file mode 100644 index 00000000000..d7056048a1f --- /dev/null +++ b/examples/pinchZoom.html @@ -0,0 +1,10 @@ +--- +layout: example.html +title: PinchZoom +shortdesc: A basic example for a pinch zoom with a restriction to integer zooms. +docs: > +

Use a pinch zoom gesture to zoom the map. + After the gesture the map will zoomed to the next whole-number zoom level with an animtation.

+tags: "pinch, zoom, interaction" +--- +
diff --git a/examples/pinchZoom.js b/examples/pinchZoom.js new file mode 100644 index 00000000000..5e3227f1677 --- /dev/null +++ b/examples/pinchZoom.js @@ -0,0 +1,25 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.interaction'); +goog.require('ol.interaction.PinchZoom'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + + +var map = new ol.Map({ + interactions: ol.interaction.defaults({pinchZoom: false}).extend([ + new ol.interaction.PinchZoom({ + constrainResolution: true // force zooming to a integer zoom + }) + ]), + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + target: 'map', + view: new ol.View({ + center: [0, 0], + zoom: 2 + }) +}); From 61ac0c47ed8ed518b4df7be918358ffed6f3746e Mon Sep 17 00:00:00 2001 From: Axel Utech Date: Fri, 9 Dec 2016 18:03:20 +0100 Subject: [PATCH 3/3] add an upgrade note about the new pinchZoom behavior --- changelog/upgrade-notes.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md index 22f5e10096a..91c493e7274 100644 --- a/changelog/upgrade-notes.md +++ b/changelog/upgrade-notes.md @@ -51,6 +51,19 @@ ol.proj.getPointResolution(projection, resolution, point); Note that if you were previously creating a projection with a `getPointResolution` function in the constructor (or calling `projection.setGetPointResolution()` after construction), this function will be used by `ol.proj.getPointResolution()`. +#### `ol.interaction.PinchZoom` no longer zooms to a whole-number zoom level after the gesture ends + +The old behavior of `ol.interaction.PinchZoom` was to zoom to the next integer zoom level after the user ends the gesture. + +Now the pinch zoom keeps the user selected zoom level even if it is a fractional zoom. + +To get the old behavior set the new `constrainResolution` parameter to `true` like this: +```js +new ol.interaction.PinchZoom({constrainResolution: true}) +``` + +See the new `pinchZoom` example for a complete implementation. + ### v3.19.1 #### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern`