From 164407bc8360442238f2cd91c9a35234decaa99e Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sun, 12 Oct 2014 18:21:27 -0600 Subject: [PATCH 1/8] (x - 1) * -1 == 1 - x --- src/ol/control/zoomslidercontrol.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index db46fc3a7f..215f5d3fb9 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -236,34 +236,31 @@ ol.control.ZoomSlider.prototype.amountDragged_ = function(x, y) { /** - * Calculates the corresponding resolution of the thumb by the amount it has - * been dragged from its minimum. + * Calculates the corresponding resolution of the thumb given its relative + * position (where 0 is the minimum and 1 is the maximum). * * @param {number} amount The amount the thumb has been dragged. * @return {number} The corresponding resolution. * @private */ ol.control.ZoomSlider.prototype.resolutionForAmount_ = function(amount) { - // FIXME do we really need this affine transform? - amount = (goog.math.clamp(amount, 0, 1) - 1) * -1; var fn = this.getMap().getView().getResolutionForValueFunction(); - return fn(amount); + return fn(1 - goog.math.clamp(amount, 0, 1)); }; /** - * Determines an amount of dragging relative to this minimum position by the - * given resolution. + * Determines the relative position of the slider for the given resolution. A + * relative position of 0 corresponds to the minimum view resolution. A + * relative position of 1 corresponds to the maximum view resolution. * - * @param {number} res The resolution to get the amount for. - * @return {number} The corresponding value (between 0 and 1). + * @param {number} res The resolution. + * @return {number} The relative position value (between 0 and 1). * @private */ ol.control.ZoomSlider.prototype.amountForResolution_ = function(res) { var fn = this.getMap().getView().getValueForResolutionFunction(); - var value = fn(res); - // FIXME do we really need this affine transform? - return (value - 1) * -1; + return 1 - fn(res); }; From d45283c55e6e979db10a6651faaa39873028c672 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sun, 12 Oct 2014 18:31:17 -0600 Subject: [PATCH 2/8] Animate from the current resolution --- src/ol/control/zoomslidercontrol.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 215f5d3fb9..62483cf336 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -178,18 +178,18 @@ ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) { ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) { var map = this.getMap(); var view = map.getView(); - var resolution; var amountDragged = this.amountDragged_(browserEvent.offsetX, browserEvent.offsetY); - resolution = this.resolutionForAmount_(amountDragged); - goog.asserts.assert(goog.isDef(resolution)); + var currentResolution = view.getResolution(); + goog.asserts.assert(goog.isDef(currentResolution)); map.beforeRender(ol.animation.zoom({ - resolution: resolution, + resolution: currentResolution, duration: ol.ZOOMSLIDER_ANIMATION_DURATION, easing: ol.easing.easeOut })); - resolution = view.constrainResolution(resolution); - view.setResolution(resolution); + var resolution = this.resolutionForAmount_(amountDragged); + goog.asserts.assert(goog.isDef(resolution)); + view.setResolution(view.constrainResolution(resolution)); }; From 6f20afeba95469475dd97336a789b6aa88bf81cd Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Sun, 12 Oct 2014 18:51:35 -0600 Subject: [PATCH 3/8] Set interaction hint while dragging --- src/ol/control/zoomslidercontrol.js | 86 +++++++++++++++++------------ 1 file changed, 50 insertions(+), 36 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 62483cf336..6c20db6a40 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -15,6 +15,7 @@ goog.require('goog.math'); goog.require('goog.math.Rect'); goog.require('goog.style'); goog.require('ol'); +goog.require('ol.ViewHint'); goog.require('ol.animation'); goog.require('ol.control.Control'); goog.require('ol.css'); @@ -77,10 +78,12 @@ ol.control.ZoomSlider = function(opt_options) { this.dragger_ = new goog.fx.Dragger(thumbElement); this.registerDisposable(this.dragger_); - goog.events.listen(this.dragger_, [ - goog.fx.Dragger.EventType.DRAG, - goog.fx.Dragger.EventType.END - ], this.handleSliderChange_, undefined, this); + goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.START, + this.handleDraggerStart_, false, this); + goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.DRAG, + this.handleDraggerDrag_, false, this); + goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.END, + this.handleDraggerEnd_, false, this); goog.events.listen(sliderElement, goog.events.EventType.CLICK, this.handleContainerClick_, false, this); @@ -193,6 +196,49 @@ ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) { }; +/** + * Handle dragger start events. + * @param {goog.fx.DragDropEvent} event The dragdropevent. + * @private + */ +ol.control.ZoomSlider.prototype.handleDraggerStart_ = function(event) { + this.getMap().getView().setHint(ol.ViewHint.INTERACTING, 1); +}; + + +/** + * Handle dragger drag events. + * + * @param {goog.fx.DragDropEvent} event The dragdropevent. + * @private + */ +ol.control.ZoomSlider.prototype.handleDraggerDrag_ = function(event) { + var amountDragged = this.amountDragged_(event.left, event.top); + this.currentResolution_ = this.resolutionForAmount_(amountDragged); + this.getMap().getView().setResolution(this.currentResolution_); +}; + + +/** + * Handle dragger end events. + * @param {goog.fx.DragDropEvent} event The dragdropevent. + * @private + */ +ol.control.ZoomSlider.prototype.handleDraggerEnd_ = function(event) { + var map = this.getMap(); + var view = map.getView(); + view.setHint(ol.ViewHint.INTERACTING, -1); + goog.asserts.assert(goog.isDef(this.currentResolution_)); + map.beforeRender(ol.animation.zoom({ + resolution: this.currentResolution_, + duration: ol.ZOOMSLIDER_ANIMATION_DURATION, + easing: ol.easing.easeOut + })); + var resolution = view.constrainResolution(this.currentResolution_); + view.setResolution(resolution); +}; + + /** * Positions the thumb inside its container according to the given resolution. * @@ -262,35 +308,3 @@ ol.control.ZoomSlider.prototype.amountForResolution_ = function(res) { var fn = this.getMap().getView().getValueForResolutionFunction(); return 1 - fn(res); }; - - -/** - * Handles the user caused changes of the slider thumb and adjusts the - * resolution of our map accordingly. Will be called both while dragging and - * when dragging ends. - * - * @param {goog.fx.DragDropEvent} e The dragdropevent. - * @private - */ -ol.control.ZoomSlider.prototype.handleSliderChange_ = function(e) { - var map = this.getMap(); - var view = map.getView(); - var resolution; - if (e.type === goog.fx.Dragger.EventType.DRAG) { - var amountDragged = this.amountDragged_(e.left, e.top); - resolution = this.resolutionForAmount_(amountDragged); - if (resolution !== this.currentResolution_) { - this.currentResolution_ = resolution; - view.setResolution(resolution); - } - } else { - goog.asserts.assert(goog.isDef(this.currentResolution_)); - map.beforeRender(ol.animation.zoom({ - resolution: this.currentResolution_, - duration: ol.ZOOMSLIDER_ANIMATION_DURATION, - easing: ol.easing.easeOut - })); - resolution = view.constrainResolution(this.currentResolution_); - view.setResolution(resolution); - } -}; From b8369ad3f073eec6bb5d145b67196635980d6aab Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 13 Oct 2014 08:40:51 -0600 Subject: [PATCH 4/8] Allow thumb to range over the entire container size --- src/ol/control/zoomslidercontrol.js | 32 ++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 6c20db6a40..45942016f8 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -127,22 +127,22 @@ ol.control.ZoomSlider.prototype.setMap = function(map) { * @private */ ol.control.ZoomSlider.prototype.initSlider_ = function() { - var container = this.element, - thumb = goog.dom.getFirstElementChild(container), - elemSize = goog.style.getContentBoxSize(container), - thumbBounds = goog.style.getBounds(thumb), - thumbMargins = goog.style.getMarginBox(thumb), - thumbBorderBox = goog.style.getBorderBox(thumb), - w = elemSize.width - - thumbMargins.left - thumbMargins.right - - thumbBorderBox.left - thumbBorderBox.right - - thumbBounds.width, - h = elemSize.height - - thumbMargins.top - thumbMargins.bottom - - thumbBorderBox.top - thumbBorderBox.bottom - - thumbBounds.height, - limits; - if (elemSize.width > elemSize.height) { + var container = this.element; + var containerSize = goog.style.getSize(container); + var thumb = goog.dom.getFirstElementChild(container); + var thumbBounds = goog.style.getBounds(thumb); + var thumbMargins = goog.style.getMarginBox(thumb); + var thumbBorderBox = goog.style.getBorderBox(thumb); + var w = containerSize.width - + thumbMargins.left - thumbMargins.right - + thumbBorderBox.left - thumbBorderBox.right - + thumbBounds.width; + var h = containerSize.height - + thumbMargins.top - thumbMargins.bottom - + thumbBorderBox.top - thumbBorderBox.bottom - + thumbBounds.height; + var limits; + if (containerSize.width > containerSize.height) { this.direction_ = ol.control.ZoomSlider.direction.HORIZONTAL; limits = new goog.math.Rect(0, 0, w, 0); } else { From 26be3a5450ab965590e08c9dbf909b99bef01b84 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 13 Oct 2014 08:42:45 -0600 Subject: [PATCH 5/8] Example style update --- examples/zoomslider.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/examples/zoomslider.html b/examples/zoomslider.html index b7c1945044..34361ecd87 100644 --- a/examples/zoomslider.html +++ b/examples/zoomslider.html @@ -14,7 +14,7 @@ * zoom-out buttons. */ #map2 .ol-zoom .ol-zoom-out { - margin-top: 202px; + margin-top: 206px; } #map2 .ol-zoomslider { background-color: transparent; @@ -28,6 +28,16 @@ top: 2.75em; } +#map2 .ol-zoom-in.ol-has-tooltip:hover [role=tooltip], +#map2 .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] { + top: 3px; +} + +#map2 .ol-zoom-out.ol-has-tooltip:hover [role=tooltip], +#map2 .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] { + top: 232px; +} + /** * The zoomslider in the third map shall be horizontal, placed in the top-right * corner, smaller and orange. @@ -60,7 +70,7 @@ background-color: rgba(255,69,0,0.7); } - ol3 ZoomSlider demo + Zoom slider example From 9dd5b611c7014fc65a42843574984bc6e6f27327 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 13 Oct 2014 09:22:21 -0600 Subject: [PATCH 6/8] Give container ol-control class and tidy css --- css/ol.css | 16 +++------------- src/ol/control/zoomslidercontrol.js | 9 +++++---- 2 files changed, 8 insertions(+), 17 deletions(-) diff --git a/css/ol.css b/css/ol.css index 824c28cc8e..f39721ff8f 100644 --- a/css/ol.css +++ b/css/ol.css @@ -259,28 +259,18 @@ button.ol-full-screen-true:after { left: .5em; background: #eee; background: rgba(255, 255, 255, 0.4); - border-radius: 4px; - outline: none; - overflow: hidden; - width: 1.5675em; + width: 1.7em; height: 200px; - padding: 3px; - margin: 0; } .ol-zoomslider-thumb { position: absolute; - display: block; background: #7b98bc; background: rgba(0,60,136,0.5); border-radius: 2px; - outline: none; - overflow: hidden; cursor: pointer; - font-size: 1.14em; - height: 1em; - width: 1.375em; + height: 1.1em; + width: 1.6em; margin: 3px; - padding: 0; } .ol-touch .ol-zoomslider { top: 5.5em; diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 45942016f8..eee1c4bf22 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -68,8 +68,9 @@ ol.control.ZoomSlider = function(opt_options) { options.className : 'ol-zoomslider'; var thumbElement = goog.dom.createDom(goog.dom.TagName.DIV, [className + '-thumb', ol.css.CLASS_UNSELECTABLE]); - var sliderElement = goog.dom.createDom(goog.dom.TagName.DIV, - [className, ol.css.CLASS_UNSELECTABLE], thumbElement); + var containerElement = goog.dom.createDom(goog.dom.TagName.DIV, + [className, ol.css.CLASS_UNSELECTABLE, ol.css.CLASS_CONTROL], + thumbElement); /** * @type {goog.fx.Dragger} @@ -85,13 +86,13 @@ ol.control.ZoomSlider = function(opt_options) { goog.events.listen(this.dragger_, goog.fx.Dragger.EventType.END, this.handleDraggerEnd_, false, this); - goog.events.listen(sliderElement, goog.events.EventType.CLICK, + goog.events.listen(containerElement, goog.events.EventType.CLICK, this.handleContainerClick_, false, this); goog.events.listen(thumbElement, goog.events.EventType.CLICK, goog.events.Event.stopPropagation); goog.base(this, { - element: sliderElement + element: containerElement }); }; goog.inherits(ol.control.ZoomSlider, ol.control.Control); From c1afd513b7b628cdbf0cd6e19bd18b026587e4ea Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 13 Oct 2014 10:13:50 -0600 Subject: [PATCH 7/8] Account for the thumb size when handling clicks --- css/ol.css | 7 +++--- examples/zoomslider.html | 2 +- src/ol/control/zoomslidercontrol.js | 39 ++++++++++++++++++----------- 3 files changed, 30 insertions(+), 18 deletions(-) diff --git a/css/ol.css b/css/ol.css index f39721ff8f..ae7397c844 100644 --- a/css/ol.css +++ b/css/ol.css @@ -259,7 +259,7 @@ button.ol-full-screen-true:after { left: .5em; background: #eee; background: rgba(255, 255, 255, 0.4); - width: 1.7em; + width: 24px; height: 200px; } .ol-zoomslider-thumb { @@ -268,10 +268,11 @@ button.ol-full-screen-true:after { background: rgba(0,60,136,0.5); border-radius: 2px; cursor: pointer; - height: 1.1em; - width: 1.6em; + height: 10px; + width: 22px; margin: 3px; } + .ol-touch .ol-zoomslider { top: 5.5em; width: 2.052em; diff --git a/examples/zoomslider.html b/examples/zoomslider.html index 34361ecd87..f5da737e26 100644 --- a/examples/zoomslider.html +++ b/examples/zoomslider.html @@ -14,7 +14,7 @@ * zoom-out buttons. */ #map2 .ol-zoom .ol-zoom-out { - margin-top: 206px; + margin-top: 204px; } #map2 .ol-zoomslider { background-color: transparent; diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index eee1c4bf22..64c89efbe8 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -15,6 +15,7 @@ goog.require('goog.math'); goog.require('goog.math.Rect'); goog.require('goog.style'); goog.require('ol'); +goog.require('ol.Size'); goog.require('ol.ViewHint'); goog.require('ol.animation'); goog.require('ol.control.Control'); @@ -57,6 +58,14 @@ ol.control.ZoomSlider = function(opt_options) { */ this.direction_ = ol.control.ZoomSlider.direction.VERTICAL; + /** + * The calculated thumb size (border box plus margins). Set when initSlider_ + * is called. + * @type {ol.Size} + * @private + */ + this.thumbSize_ = null; + /** * Whether the slider is initialized. * @type {boolean} @@ -130,25 +139,26 @@ ol.control.ZoomSlider.prototype.setMap = function(map) { ol.control.ZoomSlider.prototype.initSlider_ = function() { var container = this.element; var containerSize = goog.style.getSize(container); + var thumb = goog.dom.getFirstElementChild(container); - var thumbBounds = goog.style.getBounds(thumb); var thumbMargins = goog.style.getMarginBox(thumb); - var thumbBorderBox = goog.style.getBorderBox(thumb); - var w = containerSize.width - - thumbMargins.left - thumbMargins.right - - thumbBorderBox.left - thumbBorderBox.right - - thumbBounds.width; - var h = containerSize.height - - thumbMargins.top - thumbMargins.bottom - - thumbBorderBox.top - thumbBorderBox.bottom - - thumbBounds.height; + var thumbBorderBoxSize = goog.style.getBorderBoxSize(thumb); + var thumbWidth = thumbBorderBoxSize.width + + thumbMargins.right + thumbMargins.left; + var thumbHeight = thumbBorderBoxSize.height + + thumbMargins.top + thumbMargins.bottom; + this.thumbSize_ = [thumbWidth, thumbHeight]; + + var width = containerSize.width - thumbWidth; + var height = containerSize.height - thumbHeight; + var limits; if (containerSize.width > containerSize.height) { this.direction_ = ol.control.ZoomSlider.direction.HORIZONTAL; - limits = new goog.math.Rect(0, 0, w, 0); + limits = new goog.math.Rect(0, 0, width, 0); } else { this.direction_ = ol.control.ZoomSlider.direction.VERTICAL; - limits = new goog.math.Rect(0, 0, 0, h); + limits = new goog.math.Rect(0, 0, 0, height); } this.dragger_.setLimits(limits); this.sliderInitialized_ = true; @@ -182,8 +192,9 @@ ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) { ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) { var map = this.getMap(); var view = map.getView(); - var amountDragged = this.amountDragged_(browserEvent.offsetX, - browserEvent.offsetY); + var amountDragged = this.amountDragged_( + browserEvent.offsetX - this.thumbSize_[0] / 2, + browserEvent.offsetY - this.thumbSize_[1] / 2); var currentResolution = view.getResolution(); goog.asserts.assert(goog.isDef(currentResolution)); map.beforeRender(ol.animation.zoom({ From d2bea2692c3003f06d90d2789901d725e9a5417f Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 13 Oct 2014 10:29:33 -0600 Subject: [PATCH 8/8] Renaming for clarity --- src/ol/control/zoomslidercontrol.js | 53 ++++++++++++++--------------- 1 file changed, 26 insertions(+), 27 deletions(-) diff --git a/src/ol/control/zoomslidercontrol.js b/src/ol/control/zoomslidercontrol.js index 64c89efbe8..2bac8ca4c0 100644 --- a/src/ol/control/zoomslidercontrol.js +++ b/src/ol/control/zoomslidercontrol.js @@ -172,15 +172,14 @@ ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) { if (goog.isNull(mapEvent.frameState)) { return; } - goog.asserts.assert( - goog.isDefAndNotNull(mapEvent.frameState.viewState)); + goog.asserts.assert(goog.isDefAndNotNull(mapEvent.frameState.viewState)); if (!this.sliderInitialized_) { this.initSlider_(); } var res = mapEvent.frameState.viewState.resolution; if (res !== this.currentResolution_) { this.currentResolution_ = res; - this.positionThumbForResolution_(res); + this.setThumbPosition_(res); } }; @@ -192,9 +191,6 @@ ol.control.ZoomSlider.prototype.handleMapPostrender = function(mapEvent) { ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) { var map = this.getMap(); var view = map.getView(); - var amountDragged = this.amountDragged_( - browserEvent.offsetX - this.thumbSize_[0] / 2, - browserEvent.offsetY - this.thumbSize_[1] / 2); var currentResolution = view.getResolution(); goog.asserts.assert(goog.isDef(currentResolution)); map.beforeRender(ol.animation.zoom({ @@ -202,8 +198,10 @@ ol.control.ZoomSlider.prototype.handleContainerClick_ = function(browserEvent) { duration: ol.ZOOMSLIDER_ANIMATION_DURATION, easing: ol.easing.easeOut })); - var resolution = this.resolutionForAmount_(amountDragged); - goog.asserts.assert(goog.isDef(resolution)); + var relativePosition = this.getRelativePosition_( + browserEvent.offsetX - this.thumbSize_[0] / 2, + browserEvent.offsetY - this.thumbSize_[1] / 2); + var resolution = this.getResolutionForPosition_(relativePosition); view.setResolution(view.constrainResolution(resolution)); }; @@ -225,8 +223,8 @@ ol.control.ZoomSlider.prototype.handleDraggerStart_ = function(event) { * @private */ ol.control.ZoomSlider.prototype.handleDraggerDrag_ = function(event) { - var amountDragged = this.amountDragged_(event.left, event.top); - this.currentResolution_ = this.resolutionForAmount_(amountDragged); + var relativePosition = this.getRelativePosition_(event.left, event.top); + this.currentResolution_ = this.getResolutionForPosition_(relativePosition); this.getMap().getView().setResolution(this.currentResolution_); }; @@ -257,39 +255,40 @@ ol.control.ZoomSlider.prototype.handleDraggerEnd_ = function(event) { * @param {number} res The res. * @private */ -ol.control.ZoomSlider.prototype.positionThumbForResolution_ = function(res) { - var amount = this.amountForResolution_(res), - dragger = this.dragger_, - thumb = goog.dom.getFirstElementChild(this.element); +ol.control.ZoomSlider.prototype.setThumbPosition_ = function(res) { + var position = this.getPositionForResolution_(res); + var dragger = this.dragger_; + var thumb = goog.dom.getFirstElementChild(this.element); if (this.direction_ == ol.control.ZoomSlider.direction.HORIZONTAL) { - var left = dragger.limits.left + dragger.limits.width * amount; + var left = dragger.limits.left + dragger.limits.width * position; goog.style.setPosition(thumb, left); } else { - var top = dragger.limits.top + dragger.limits.height * amount; + var top = dragger.limits.top + dragger.limits.height * position; goog.style.setPosition(thumb, dragger.limits.left, top); } }; /** - * Calculates the amount the thumb has been dragged to allow for calculation - * of the corresponding resolution. + * Calculates the relative position of the thumb given x and y offsets. The + * relative position scales from 0 to 1. The x and y offsets are assumed to be + * in pixel units within the dragger limits. * * @param {number} x Pixel position relative to the left of the slider. * @param {number} y Pixel position relative to the top of the slider. - * @return {number} The amount the thumb has been dragged. + * @return {number} The relative position of the thumb. * @private */ -ol.control.ZoomSlider.prototype.amountDragged_ = function(x, y) { - var draggerLimits = this.dragger_.limits, - amount = 0; +ol.control.ZoomSlider.prototype.getRelativePosition_ = function(x, y) { + var draggerLimits = this.dragger_.limits; + var amount; if (this.direction_ === ol.control.ZoomSlider.direction.HORIZONTAL) { amount = (x - draggerLimits.left) / draggerLimits.width; } else { amount = (y - draggerLimits.top) / draggerLimits.height; } - return amount; + return goog.math.clamp(amount, 0, 1); }; @@ -297,13 +296,13 @@ ol.control.ZoomSlider.prototype.amountDragged_ = function(x, y) { * Calculates the corresponding resolution of the thumb given its relative * position (where 0 is the minimum and 1 is the maximum). * - * @param {number} amount The amount the thumb has been dragged. + * @param {number} position The relative position of the thumb. * @return {number} The corresponding resolution. * @private */ -ol.control.ZoomSlider.prototype.resolutionForAmount_ = function(amount) { +ol.control.ZoomSlider.prototype.getResolutionForPosition_ = function(position) { var fn = this.getMap().getView().getResolutionForValueFunction(); - return fn(1 - goog.math.clamp(amount, 0, 1)); + return fn(1 - position); }; @@ -316,7 +315,7 @@ ol.control.ZoomSlider.prototype.resolutionForAmount_ = function(amount) { * @return {number} The relative position value (between 0 and 1). * @private */ -ol.control.ZoomSlider.prototype.amountForResolution_ = function(res) { +ol.control.ZoomSlider.prototype.getPositionForResolution_ = function(res) { var fn = this.getMap().getView().getValueForResolutionFunction(); return 1 - fn(res); };