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

Merge pull request #8698 from intouch-smartwater/fix-zoom-slider-events

Browse Source 
Fix zoom slider events
This commit is contained in:
Andreas Hocevar
2018-09-24 13:15:43 +02:00
committed by GitHub
parent 708557afef 9c5227850f
commit d9698dcb06
2 changed files with 93 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/ol/control/ZoomSlider.js
View File

@@ -5,7 +5,7 @@ import ViewHint from '../ViewHint.js';
import Control from '../control/Control.js';
import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js';
import {easeOut} from '../easing.js';
import {listen} from '../events.js';
import {listen, unlistenByKey} from '../events.js';
import {stopPropagation} from '../events/Event.js';
import EventType from '../events/EventType.js';
import {clamp} from '../math.js';
@@ -57,6 +57,12 @@ class ZoomSlider extends Control {
render: options.render || render
});
/**
* @type {!Array.<ol.EventsKey>}
* @private
*/
this.dragListenerKeys_ = [];
/**
* Will hold the current resolution of the view.
*
@@ -231,6 +237,17 @@ class ZoomSlider extends Control {
this.previousX_ = event.clientX;
this.previousY_ = event.clientY;
this.dragging_ = true;
if (this.dragListenerKeys_.length === 0) {
const drag = this.handleDraggerDrag_;
const end = this.handleDraggerEnd_;
this.dragListenerKeys_.push(
listen(document, EventType.MOUSEMOVE, drag, this),
listen(document, PointerEventType.POINTERMOVE, drag, this),
listen(document, EventType.MOUSEUP, end, this),
listen(document, PointerEventType.POINTERUP, end, this)
);
}
}
}
@@ -273,6 +290,8 @@ class ZoomSlider extends Control {
this.dragging_ = false;
this.previousX_ = undefined;
this.previousY_ = undefined;
this.dragListenerKeys_.forEach(unlistenByKey);
this.dragListenerKeys_.length = 0;
}
}

73
test/spec/ol/control/zoomslider.test.js
View File

@@ -119,6 +119,7 @@ describe('ol.control.ZoomSlider', function() {
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(16);
expect(control.dragging_).to.be(true);
expect(control.dragListenerKeys_.length).to.be(4);
event.type = 'pointermove';
event.clientX = 6 * control.widthLimit_ / 8;
event.clientY = 0;
@@ -131,8 +132,44 @@ describe('ol.control.ZoomSlider', function() {
event.type = 'pointerup';
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(1);
expect(control.dragListenerKeys_.length).to.be(0);
expect(control.dragging_).to.be(false);
});
it('[horizontal] handles a drag sequence ending outside its bounds', function() {
const control = new ZoomSlider();
map.addControl(control);
map.getView().setZoom(0);
control.element.style.width = '500px';
control.element.style.height = '10px';
control.element.firstChild.style.width = '100px';
control.element.firstChild.style.height = '10px';
map.renderSync();
const dragger = control.dragger_;
const event = new PointerEvent('pointerdown', {
target: control.element.firstElementChild
});
event.clientX = control.widthLimit_;
event.clientY = 0;
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(16);
expect(control.dragging_).to.be(true);
expect(control.dragListenerKeys_.length).to.be(4);
event.type = 'pointermove';
event.clientX = 6 * control.widthLimit_ / 8;
event.clientY = 0;
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(4);
event.type = 'pointermove';
event.clientX = 12 * control.widthLimit_ / 8;
event.clientY = 0;
dragger.dispatchEvent(event);
event.type = 'pointerup';
event.target = 'document';
dragger.dispatchEvent(event);
expect(control.dragListenerKeys_.length).to.be(0);
expect(control.dragging_).to.be(false);
expect(control.currentResolution_).to.be(16);
});
it('[vertical] handles a drag sequence', function() {
const control = new ZoomSlider();
control.element.style.width = '10px';
@@ -151,6 +188,7 @@ describe('ol.control.ZoomSlider', function() {
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(0.0625);
expect(control.dragging_).to.be(true);
expect(control.dragListenerKeys_.length).to.be(4);
event.type = 'pointermove';
event.clientX = 0;
event.clientY = 2 * control.heightLimit_ / 8;
@@ -163,6 +201,41 @@ describe('ol.control.ZoomSlider', function() {
event.type = 'pointerup';
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(1);
expect(control.dragListenerKeys_.length).to.be(0);
expect(control.dragging_).to.be(false);
});
it('[vertical] handles a drag sequence ending outside its bounds', function() {
const control = new ZoomSlider();
control.element.style.width = '10px';
control.element.style.height = '100px';
control.element.firstChild.style.width = '10px';
control.element.firstChild.style.height = '20px';
map.addControl(control);
map.getView().setZoom(8);
map.renderSync();
const dragger = control.dragger_;
const event = new PointerEvent('pointerdown', {
target: control.element.firstElementChild
});
event.clientX = 0;
event.clientY = 0;
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(0.0625);
expect(control.dragging_).to.be(true);
expect(control.dragListenerKeys_.length).to.be(4);
event.type = 'pointermove';
event.clientX = 0;
event.clientY = 2 * control.heightLimit_ / 8;
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(0.25);
event.type = 'pointermove';
event.clientX = 0;
event.clientY = 12 * control.heightLimit_ / 8;
dragger.dispatchEvent(event);
event.type = 'pointerup';
dragger.dispatchEvent(event);
expect(control.currentResolution_).to.be(16);
expect(control.dragListenerKeys_.length).to.be(0);
expect(control.dragging_).to.be(false);
});
});