neo.mjs 4.4.11 → 4.4.12

package/examples/component/wrapper/googleMaps/MainContainer.mjs

@@ -24,8 +24,12 @@ class MainContainer extends Viewport {
             markerStoreConfig: {
                 data: [{
                     id      : '1',
-                    position: {lat: -34.397, lng: 150.644},
+                    position: {lat: -33.397, lng: 150.644},
                     title   : 'Hello neo'
+                }, {
+                    id      : '2',
+                    position: {lat: -34.397, lng: 150.644},
+                    title   : 'Hello Max'
                 }]
             }
         }, {
@@ -56,7 +60,7 @@ class MainContainer extends Viewport {
                 iconCls: 'fa-solid fa-trash',
                 mode   : 'hide',
                 style  : {marginLeft: '10px'},
-                text   : 'Hide marker'
+                text   : 'Hide marker 1'
             }]
         }]
     }}

package/examples/component/wrapper/googleMaps/MainContainerController.mjs

@@ -31,7 +31,7 @@ class MainContainerController extends ComponentController {
             button.set({
                 iconCls: 'fa fa-location-dot',
                 mode   : 'show',
-                text   : 'Show marker'
+                text   : 'Show marker 1'
             });
 
             map.hideMarker('1')
@@ -39,7 +39,7 @@ class MainContainerController extends ComponentController {
             button.set({
                 iconCls: 'fa-solid fa-trash',
                 mode   : 'hide',
-                text   : 'Hide marker'
+                text   : 'Hide marker 1'
             });
 
             map.showMarker('1')

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.4.11",
+    "version": "4.4.12",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/component/wrapper/GoogleMaps.mjs

@@ -7,6 +7,36 @@ import Store           from '../../data/Store.mjs';
  * @extends Neo.component.Base
  */
 class GoogleMaps extends Base {
+    /**
+     * false hides the default fullscreen control
+     * @member {Boolean} fullscreenControl=true
+     */
+    fullscreenControl = true
+    /**
+     * @member {Object} markerStoreConfig=null
+     */
+    markerStoreConfig = null
+    /**
+     * Pass any options to the map instance which are not explicitly defined here
+     * @member {Object} mapOptions={}
+     */
+    mapOptions = {}
+    /**
+     * null => the maximum zoom from the current map type is used instead
+     * @member {Number|null} maxZoom=null
+     */
+    maxZoom = null
+    /**
+     null => the minimum zoom from the current map type is used instead
+     * @member {Number|null} minZoom=null
+     */
+    minZoom = null
+    /**
+     * false hides the default zoom control
+     * @member {Boolean} zoomControl=true
+     */
+    zoomControl = true
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.component.wrapper.GoogleMaps'
@@ -18,11 +48,6 @@ class GoogleMaps extends Base {
          * @member {Object} center_={lat: -34.397, lng: 150.644}
          */
         center_: {lat: -34.397, lng: 150.644},
-        /**
-         * false hides the default fullscreen control
-         * @member {Boolean} fullscreenControl=true
-         */
-        fullscreenControl: true,
         /**
          * Prefer to use markerStoreConfig instead.
          * @member {Neo.data.Store|Object} markerStore_
@@ -42,31 +67,27 @@ class GoogleMaps extends Base {
                 }]
             }
         },
-        /**
-         * @member {Object} markerStoreConfig: null
-         */
-        markerStoreConfig: null,
-        /**
-         * null => the maximum zoom from the current map type is used instead
-         * @member {Number|null} maxZoom=null
-         */
-        maxZoom: null,
-        /**
-         null => the minimum zoom from the current map type is used instead
-         * @member {Number|null} minZoom=null
-         */
-        minZoom: null,
         /**
          * @member {Number} zoom_=8
          */
-        zoom_: 8,
-        /**
-         * false hides the default zoom control
-         * @member {Boolean} zoomControl=true
-         */
-        zoomControl: true
+        zoom_: 8
     }}
 
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            googleMarkerClick: me.parseMarkerClick,
+            local            : false,
+            scope            : me
+        })
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.id
@@ -137,6 +158,7 @@ class GoogleMaps extends Base {
                 center           : me.center,
                 fullscreenControl: me.fullscreenControl,
                 id               : me.id,
+                mapOptions       : me.mapOptions,
                 maxZoom          : me.maxZoom,
                 minZoom          : me.minZoom,
                 zoom             : me.zoom,
@@ -204,6 +226,13 @@ class GoogleMaps extends Base {
      */
     onComponentMounted() {}
 
+    /**
+     * @param {Object} record
+     */
+    onMarkerClick(record) {
+        console.log('onMarkerClick', record);
+    }
+
     /**
      *
      */
@@ -232,6 +261,23 @@ class GoogleMaps extends Base {
         })
     }
 
+    /**
+     * Internal function. Use onMarkerClick() or the markerClick event instead
+     * @param {Object} data
+     * @protected
+     */
+    parseMarkerClick(data) {
+        let me     = this,
+            record = me.markerStore.get(data.id);
+
+        me.onMarkerClick(record);
+
+        me.fire('markerClick', {
+            id: me.id,
+            record
+        })
+    }
+
     /**
      *
      */

package/src/main/addon/GoogleMaps.mjs

@@ -1,5 +1,6 @@
 import Base       from '../../core/Base.mjs';
 import DomAccess  from '../DomAccess.mjs';
+import DomEvents  from '../DomEvents.mjs';
 import Observable from '../../core/Observable.mjs';
 
 /**
@@ -8,20 +9,21 @@ import Observable from '../../core/Observable.mjs';
  * @singleton
  */
 class GoogleMaps extends Base {
+    /**
+     * @member {Object} maps={}
+     */
+    maps = {}
+    /**
+     * @member {Object} markers={}
+     */
+    markers = {}
+
     static getConfig() {return {
         /**
          * @member {String} className='Neo.main.addon.GoogleMaps'
          * @protected
          */
         className: 'Neo.main.addon.GoogleMaps',
-        /**
-         * @member {Object} maps={}
-         */
-        maps: {},
-        /**
-         * @member {Object} markers={}
-         */
-        markers: {},
         /**
          * @member {Neo.core.Base[]} mixins=[Observable]
          */
@@ -66,10 +68,11 @@ class GoogleMaps extends Base {
      * @param {String} [data.title]
      */
     addMarker(data) {
-        let me = this;
+        let me = this,
+            listenerId, marker;
 
         if (!me.maps[data.mapId]) {
-            let listenerId = me.on('mapCreated', mapId => {
+            listenerId = me.on('mapCreated', mapId => {
                 if (data.mapId === mapId) {
                     me.un(listenerId);
                     me.addMarker(data);
@@ -78,11 +81,15 @@ class GoogleMaps extends Base {
         } else {
             Neo.ns(`${data.mapId}`, true, me.markers);
 
-            me.markers[data.mapId][data.id] = new google.maps.Marker({
-                position: data.position,
+            me.markers[data.mapId][data.id] = marker = new google.maps.Marker({
                 map     : me.maps[data.mapId],
+                neoId   : data.id,    // custom property
+                neoMapId: data.mapId, // custom property
+                position: data.position,
                 title   : data.title,
             });
+
+            marker.addListener('click', me.onMarkerClick.bind(me, marker));
         }
     }
 
@@ -91,6 +98,7 @@ class GoogleMaps extends Base {
      * @param {Object} data.center
      * @param {Boolean} data.fullscreenControl
      * @param {String} data.id
+     * @param {Object} data.mapOptions // Pass any options which are not explicitly defined here
      * @param {Number} data.maxZoom
      * @param {Number} data.minZoom
      * @param {Number} data.zoom
@@ -105,7 +113,8 @@ class GoogleMaps extends Base {
             maxZoom          : data.maxZoom,
             minZoom          : data.minZoom,
             zoom             : data.zoom,
-            zoomControl      : data.zoomControl
+            zoomControl      : data.zoomControl,
+            ...data.mapOptions
         });
 
         me.fire('mapCreated', data.id);
@@ -131,6 +140,22 @@ class GoogleMaps extends Base {
         })
     }
 
+    /**
+     * @param {google.maps.Marker} marker
+     * @param {Object} event
+     * @param {Object} event.domEvent
+     */
+    onMarkerClick(marker, event) {
+        // in theory, we could parse and pass the entire DOM event.
+        // feel free to open a feature request ticket, in case you need more data into the app worker.
+
+        DomEvents.sendMessageToApp({
+            id  : marker.neoId,
+            path: [{cls: [], id: marker.neoMapId}],
+            type: 'googleMarkerClick'
+        })
+    }
+
     /**
      * @param data
      * @param {String} data.mapId