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

Merge pull request #6912 from ahocevar/translate-cursor

Browse Source 
Use class instead of style for Translate cursor
This commit is contained in:
Andreas Hocevar
2017-06-12 14:26:41 +02:00
committed by GitHub
parent 51658a0d7c 9b41ea4017
commit 87d889f96c
3 changed files with 43 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
css/ol.css
View File

@@ -49,6 +49,17 @@
-ms-user-select: auto;
user-select: auto;
}
.ol-grabbing {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
.ol-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.ol-control {
position: absolute;
background-color: rgba(255,255,255,0.4);
@@ -247,4 +258,4 @@
.ol-overviewmap .ol-overviewmap-box:hover {
cursor: move;
}
}

32
src/ol/interaction/translate.js
View File

@@ -32,13 +32,6 @@ ol.interaction.Translate = function(opt_options) {
var options = opt_options ? opt_options : {};
/**
* @type {string|undefined}
* @private
*/
this.previousCursor_ = undefined;
/**
* The last position we translated to.
* @type {ol.Coordinate}
@@ -175,23 +168,15 @@ ol.interaction.Translate.handleDragEvent_ = function(event) {
* @private
*/
ol.interaction.Translate.handleMoveEvent_ = function(event) {
var elem = event.map.getTargetElement();
var elem = event.map.getViewport();
// Change the cursor to grab/grabbing if hovering any of the features managed
// by the interaction
if (this.featuresAtPixel_(event.pixel, event.map)) {
this.previousCursor_ = this.previousCursor_ !== undefined ?
this.previousCursor_ : elem.style.cursor;
// WebKit browsers don't support the grab icons without a prefix
elem.style.cursor = this.lastCoordinate_ ?
'-webkit-grabbing' : '-webkit-grab';
// Thankfully, attempting to set the standard ones will silently fail,
// keeping the prefixed icons
elem.style.cursor = this.lastCoordinate_ ? 'grabbing' : 'grab';
} else if (this.previousCursor_ !== undefined) {
elem.style.cursor = this.previousCursor_;
this.previousCursor_ = undefined;
elem.classList.remove(this.lastCoordinate_ ? 'ol-grab' : 'ol-grabbing');
elem.classList.add(this.lastCoordinate_ ? 'ol-grabbing' : 'ol-grab');
} else {
elem.classList.remove('ol-grab', 'ol-grabbing');
}
};
@@ -266,14 +251,13 @@ ol.interaction.Translate.prototype.handleActiveChanged_ = function() {
ol.interaction.Translate.prototype.updateState_ = function(oldMap) {
var map = this.getMap();
var active = this.getActive();
if ((!map || !active) && this.previousCursor_ !== undefined) {
if ((!map || !active)) {
if (!map) {
map = oldMap;
}
var elem = map.getTargetElement();
elem.style.cursor = this.previousCursor_;
this.previousCursor_ = undefined;
var elem = map.getViewport();
elem.classList.remove('ol-grab', 'ol-grabbing');
}
};

63
test/spec/ol/interaction/translate.test.js
View File

@@ -210,83 +210,66 @@ describe('ol.interaction.Translate', function() {
beforeEach(function() {
translate = new ol.interaction.Translate();
map.addInteraction(translate);
element = map.getTargetElement();
element = map.getViewport();
});
it('changes css cursor', function() {
expect(element.style.cursor).to.eql('');
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(false);
simulateEvent('pointermove', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(true);
simulateEvent('pointerdown', 10, 20);
expect(element.style.cursor).to.match(/grabbing$/);
expect(element.classList.contains('ol-grabbing')).to.be(true);
expect(element.classList.contains('ol-grab')).to.be(false);
simulateEvent('pointerup', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(true);
simulateEvent('pointermove', 0, 0);
expect(element.style.cursor).to.eql('');
});
it('respects existing cursor value', function() {
element.style.cursor = 'pointer';
simulateEvent('pointermove', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
simulateEvent('pointerdown', 10, 20);
expect(element.style.cursor).to.match(/grabbing$/);
simulateEvent('pointerup', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
simulateEvent('pointermove', 0, 0);
expect(element.style.cursor).to.eql('pointer');
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(false);
});
it('resets css cursor when interaction is deactivated while pointer is on feature', function() {
simulateEvent('pointermove', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(true);
translate.setActive(false);
simulateEvent('pointermove', 0, 0);
expect(element.style.cursor).to.eql('');
});
it('resets css cursor to existing cursor when interaction is deactivated while pointer is on feature', function() {
element.style.cursor = 'pointer';
simulateEvent('pointermove', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
translate.setActive(false);
simulateEvent('pointermove', 0, 0);
expect(element.style.cursor).to.eql('pointer');
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(false);
});
it('resets css cursor interaction is removed while pointer is on feature', function() {
simulateEvent('pointermove', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(true);
map.removeInteraction(translate);
simulateEvent('pointermove', 0, 0);
expect(element.style.cursor).to.eql('');
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(false);
});
it('resets css cursor to existing cursor interaction is removed while pointer is on feature', function() {
element.style.cursor = 'pointer';
simulateEvent('pointermove', 10, 20);
expect(element.style.cursor).to.match(/grab$/);
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(true);
map.removeInteraction(translate);
simulateEvent('pointermove', 0, 0);
expect(element.style.cursor).to.eql('pointer');
expect(element.classList.contains('ol-grabbing')).to.be(false);
expect(element.classList.contains('ol-grab')).to.be(false);
});
});