Use user projection for event coordinate

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_;
   }

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);
+    });
+
+  });
+});

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;