Account for the thumb size when handling clicks

This commit is contained in:
Tim Schaub
2014-10-13 10:13:50 -06:00
parent 9dd5b611c7
commit c1afd513b7
3 changed files with 30 additions and 18 deletions

View File

@@ -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({