diff --git a/src/ol/MapBrowserEvent.js b/src/ol/MapBrowserEvent.js index ce60448307..956c639f24 100644 --- a/src/ol/MapBrowserEvent.js +++ b/src/ol/MapBrowserEvent.js @@ -36,7 +36,7 @@ class MapBrowserEvent extends MapEvent { this.pixel_ = null; /** - * The coordinate in view projection corresponding to the original browser event. + * The coordinate in the user projection corresponding to the original browser event. * @type {import("./coordinate.js").Coordinate} */ this.coordinate_ = null; @@ -68,13 +68,14 @@ class MapBrowserEvent extends MapEvent { } /** - * The coordinate in view projection corresponding to the original browser event. + * The coordinate corresponding to the original browser event. This will be in the user + * projection if one is set. Otherwise it will be in the view projection. * @type {import("./coordinate.js").Coordinate} * @api */ get coordinate() { if (!this.coordinate_) { - this.coordinate_ = this.map.getCoordinateFromPixelInternal(this.pixel); + this.coordinate_ = this.map.getCoordinateFromPixel(this.pixel); } return this.coordinate_; } diff --git a/test/spec/ol/MapBrowserEvent.test.js b/test/spec/ol/MapBrowserEvent.test.js new file mode 100644 index 0000000000..d7093d1f90 --- /dev/null +++ b/test/spec/ol/MapBrowserEvent.test.js @@ -0,0 +1,143 @@ +import {Map, View} from '../../../src/ol/index.js'; +import MapBrowserEvent from '../../../src/ol/MapBrowserEvent.js'; +import Event from '../../../src/ol/events/Event.js'; +import {useGeographic, clearUserProjection} from '../../../src/ol/proj.js'; + +function createMap() { + const size = 256; + const target = document.createElement('div'); + Object.assign(target.style, { + width: `${size}px`, + height: `${size}px`, + position: 'absolute', + top: 0, + left: 0 + }); + document.body.appendChild(target); + + const map = new Map({ + target: target, + view: new View({ + center: [0, 0], + zoom: 0 + }) + }); + return {map, target, size}; +} + + +describe('ol/MapBrowserEvent', function() { + + describe('pixel', function() { + let ref; + beforeEach(() => { + ref = createMap(); + }); + + afterEach(() => { + ref.map.dispose(); + document.body.removeChild(ref.target); + }); + + it('is the pixel position of the event', () => { + const x = 10; + const y = 15; + + const event = new Event(); + event.clientX = x; + event.clientY = y; + const mapEvent = new MapBrowserEvent('test', ref.map, event); + + expect(mapEvent.pixel).to.eql([x, y]); + }); + + it('is settable', () => { + const x = 10; + const y = 15; + + const event = new Event(); + event.clientX = x; + event.clientY = y; + const mapEvent = new MapBrowserEvent('test', ref.map, event); + + expect(mapEvent.pixel).to.eql([x, y]); + + const pixel = [x + 5, y + 5]; + mapEvent.pixel = pixel; + expect(mapEvent.pixel).to.eql(pixel); + }); + + }); + + describe('coordinate', function() { + let ref; + beforeEach(() => { + ref = createMap(); + ref.map.renderSync(); + }); + + afterEach(() => { + ref.map.dispose(); + document.body.removeChild(ref.target); + }); + + it('is the map coordinate of the event', () => { + const x = ref.size / 2; + const y = ref.size / 2; + + const event = new Event(); + event.clientX = x; + event.clientY = y; + const mapEvent = new MapBrowserEvent('test', ref.map, event); + + expect(mapEvent.coordinate).to.eql([0, 0]); + }); + + it('is settable', () => { + const x = ref.size / 2; + const y = ref.size / 2; + + const event = new Event(); + event.clientX = x; + event.clientY = y; + const mapEvent = new MapBrowserEvent('test', ref.map, event); + + expect(mapEvent.coordinate).to.eql([0, 0]); + + const coordinate = [1, 2]; + mapEvent.coordinate = coordinate; + expect(mapEvent.coordinate).to.eql(coordinate); + }); + + }); + + describe('coordinate - with useGeographic()', function() { + let ref; + beforeEach(() => { + useGeographic(); + ref = createMap(); + ref.map.renderSync(); + }); + + afterEach(() => { + clearUserProjection(); + ref.map.dispose(); + document.body.removeChild(ref.target); + }); + + it('is the geographic coordinate of the event', () => { + const x = ref.size / 4; + const y = ref.size / 4; + + const event = new Event(); + event.clientX = x; + event.clientY = y; + const mapEvent = new MapBrowserEvent('test', ref.map, event); + + const coord = mapEvent.coordinate; + expect(coord[0]).to.be(-90); + expect(coord[1]).to.roughlyEqual(66.5132, 1e-4); + }); + + }); +}); diff --git a/test/spec/ol/mapbrowserevent.test.js b/test/spec/ol/MapBrowserEventHandler.test.js similarity index 99% rename from test/spec/ol/mapbrowserevent.test.js rename to test/spec/ol/MapBrowserEventHandler.test.js index 846b457282..15d6db9586 100644 --- a/test/spec/ol/mapbrowserevent.test.js +++ b/test/spec/ol/MapBrowserEventHandler.test.js @@ -4,7 +4,7 @@ import {listen} from '../../../src/ol/events.js'; import {DEVICE_PIXEL_RATIO} from '../../../src/ol/has.js'; import Event from '../../../src/ol/events/Event.js'; -describe('ol.MapBrowserEventHandler', function() { +describe('ol/MapBrowserEventHandler', function() { describe('#emulateClick_', function() { let clock; let handler;