Map: Add location field to ClickEvent type and pass event to onClick (#29074)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

packages/devextreme/js/__internal/ui/map/m_provider.dynamic.azure.ts

@@ -195,7 +195,10 @@ const AzureProvider = DynamicProvider.inherit({
 
   _clickActionHandler(e) {
     if (e.type === 'click') {
-      this._fireClickAction({ location: this._normalizeLocation(e.position) });
+      this._fireClickAction({
+        location: this._normalizeLocation(e.position),
+        event: e.originalEvent,
+      });
     }
   },
 

packages/devextreme/js/__internal/ui/map/m_provider.dynamic.google.ts

@@ -228,7 +228,7 @@ const GoogleProvider = DynamicProvider.inherit({
   },
 
   _clickActionHandler(e) {
-    this._fireClickAction({ location: this._normalizeLocation(e.latLng) });
+    this._fireClickAction({ location: this._normalizeLocation(e.latLng), event: e.domEvent });
   },
 
   updateDimensions() {

packages/devextreme/js/ui/map.d.ts

@@ -26,7 +26,10 @@ export type MapType = 'hybrid' | 'roadmap' | 'satellite';
  * @type object
  * @inherits NativeEventInfo
  */
-export type ClickEvent = NativeEventInfo<dxMap, MouseEvent | PointerEvent>;
+export type ClickEvent = NativeEventInfo<dxMap, MouseEvent | PointerEvent> & {
+  /** @docid _ui_map_ClickEvent.location */
+  location: MapLocation;
+};
 
 /**
  * @docid _ui_map_DisposingEvent
@@ -133,6 +136,7 @@ export type RouteRemovedEvent = EventInfo<dxMap> & {
 };
 
 /**
+ * @docid
  * @public
  * @namespace DevExpress.ui
  */

packages/devextreme/js/ui/map.js

@@ -48,11 +48,6 @@ export default Map;
  * @hidden
  */
 
-/**
- * @name MapLocation
- * @hidden
- */
-
 /**
  * @name dxMapOptions.onContentReady
  * @hidden true

packages/devextreme/testing/helpers/forMap/googleMock.js

@@ -397,6 +397,7 @@
             MouseEvent: function(latLng) {
                 this.stop = function() {};
                 this.latLng = latLng;
+                this.domEvent = new MouseEvent({ type: 'click' });
             }
         }
     };

packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/azureTests.js

@@ -466,18 +466,24 @@ QUnit.module('basic options', moduleConfig, () => {
     QUnit.test('Should add onClick handler with correct args', function(assert) {
         const done = assert.async();
         let clickFired = 0;
+        const originalEvent = new PointerEvent({ type: 'click' });
 
         const map = $('#map').dxMap({
             provider: 'azure',
             onClick: (e) => {
                 assert.strictEqual(e.component, map, 'click event includes component instance');
                 assert.strictEqual($(e.element).is($('#map')), true, 'click event includes root element');
                 assert.deepEqual(e.location, { lat: 88, lng: 88 }, 'click event includes correct location');
+                assert.deepEqual(e.event, originalEvent, 'click event is equal to passed originalEvent');
 
                 clickFired++;
             },
             onReady: () => {
-                atlas.clickActionCallback({ type: 'click', position: [88, 88] });
+                atlas.clickActionCallback({
+                    type: 'click',
+                    position: [88, 88],
+                    originalEvent,
+                });
                 assert.strictEqual(clickFired, 1, 'click action fired');
 
                 done();

packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/googleStaticTests.js

@@ -471,20 +471,25 @@ QUnit.test('click', function(assert) {
     let clicked = 0;
     let eventFired = 0;
 
+    const clickEvent = $.Event('click');
+
     return new Promise(function(resolve) {
-        new Map($('#map'), {
+        const map = new Map($('#map'), {
             provider: 'googleStatic',
             width: 400,
             height: 500,
-            onClick: function() {
+            onClick: function(e) {
+                assert.strictEqual(e.component, map, 'component is passed correctly');
+                assert.strictEqual($(e.element).is($('#map')), true, 'click event includes root element');
+                assert.strictEqual(e.event.originalEvent, clickEvent, 'event is passed correctly');
                 clicked++;
             },
             onReady: function(e) {
                 const $element = $(e.element);
                 $element.dxMap('instance').on('click', function() {
                     eventFired++;
                 });
-                $element.children().trigger('dxclick');
+                $element.children().trigger(clickEvent);
 
                 resolve();
             }

packages/devextreme/testing/tests/DevExpress.ui.widgets/mapParts/googleTests.js

@@ -1525,6 +1525,8 @@ QUnit.test('click', function(assert) {
     let clicked = 0;
     let eventFired = 0;
 
+    let mouseEvent;
+
     const $map = $('#map').dxMap({
         provider: 'google',
         width: 400,
@@ -1534,6 +1536,7 @@ QUnit.test('click', function(assert) {
                 lat: 2,
                 lng: 10
             }, 'correct location passed');
+            assert.strictEqual(e.event, mouseEvent.domEvent, 'click event is equal to the original event');
             clicked++;
         },
         onReady: function() {
@@ -1546,7 +1549,8 @@ QUnit.test('click', function(assert) {
     });
 
     d.done(function() {
-        window.google.clickActionCallback(new google.maps.MouseEvent(new google.maps.LatLng(2, 10)));
+        mouseEvent = new google.maps.MouseEvent(new google.maps.LatLng(2, 10));
+        window.google.clickActionCallback(mouseEvent);
         assert.equal(clicked, 1);
         assert.equal(eventFired, 1);
         done();

packages/devextreme/ts/dx.all.d.ts

@@ -21074,7 +21074,12 @@ declare module DevExpress.ui {
     export type ClickEvent = DevExpress.common.core.events.NativeEventInfo<
       dxMap,
       MouseEvent | PointerEvent
-    >;
+    > & {
+      /**
+       * [descr:_ui_map_ClickEvent.location]
+       */
+      location: MapLocation;
+    };
     /**
      * [descr:_ui_map_DisposingEvent]
      */
@@ -31045,6 +31050,9 @@ declare module DevExpress.ui {
      */
     selectedExpr?: string | Function;
   }
+  /**
+   * [descr:MapLocation]
+   */
   export interface MapLocation {
     /**
      * [descr:MapLocation.lat]