neo.mjs 4.4.10 → 4.4.12

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

@@ -1,6 +1,7 @@
 import Button                  from '../../../../src/button/Base.mjs';
 import GoogleMapsComponent     from '../../../../src/component/wrapper/GoogleMaps.mjs';
 import MainContainerController from './MainContainerController.mjs';
+import NumberField             from '../../../../src/form/field/Number.mjs';
 import Toolbar                 from '../../../../src/toolbar/Base.mjs';
 import Viewport                from '../../../../src/container/Viewport.mjs';
 
@@ -23,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'
                 }]
             }
         }, {
@@ -34,8 +39,28 @@ class MainContainer extends Viewport {
             items : [{
                 module : Button,
                 handler: 'onFlyToButtonClick',
+                height : 27,
                 iconCls: 'fa-solid fa-plane',
                 text   : 'Fly to San Fran'
+            }, {
+                module              : NumberField,
+                clearToOriginalValue: true,
+                labelPosition       : 'inline',
+                labelText           : 'zoom',
+                listeners           : {change: 'onZoomFieldChange'},
+                minValue            : 0,
+                maxValue            : 10,
+                style               : {marginLeft: '10px'},
+                value               : 8,
+                width               : 100
+            }, {
+                module : Button,
+                handler: 'onRemoveMarkerButtonClick',
+                height : 27,
+                iconCls: 'fa-solid fa-trash',
+                mode   : 'hide',
+                style  : {marginLeft: '10px'},
+                text   : 'Hide marker 1'
             }]
         }]
     }}

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

@@ -17,12 +17,40 @@ class MainContainerController extends ComponentController {
      * @param {Object} data
      */
     onFlyToButtonClick(data) {
-        // todo
-        /*this.getReference('google-maps-component').flyTo({
-            destination: [-122.4175, 37.655, 400],
-            heading    : 0.0,
-            pitch      : -15.0
-        });*/
+        this.getReference('google-maps-component').panTo({lat: 37.655, lng: -122.4175})
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onRemoveMarkerButtonClick(data) {
+        let button = data.component,
+            map    = this.getReference('google-maps-component');
+
+        if (button.mode === 'hide') {
+            button.set({
+                iconCls: 'fa fa-location-dot',
+                mode   : 'show',
+                text   : 'Show marker 1'
+            });
+
+            map.hideMarker('1')
+        } else {
+            button.set({
+                iconCls: 'fa-solid fa-trash',
+                mode   : 'hide',
+                text   : 'Hide marker 1'
+            });
+
+            map.showMarker('1')
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    onZoomFieldChange(data) {
+        this.getReference('google-maps-component').zoom = data.value;
     }
 }
 

package/examples/component/wrapper/googleMaps/neo-config.json

@@ -2,6 +2,7 @@
     "appPath"         : "examples/component/wrapper/googleMaps/app.mjs",
     "basePath"        : "../../../../",
     "environment"     : "development",
+    "googleMapsApiKey": "AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA",
     "mainPath"        : "./Main.mjs",
     "mainThreadAddons": ["GoogleMaps", "Stylesheet"]
 }

package/package.json

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

package/src/DefaultConfig.mjs

@@ -52,6 +52,14 @@ const DefaultConfig = {
      * @type String
      */
     environment: 'dist/production',
+    /**
+     * In case you are using the GoogleMaps main thread addon, you can pass the API key here.
+     * @default ''
+     * @memberOf! module:Neo
+     * @name config.googleMapsApiKey
+     * @type String
+     */
+    googleMapsApiKey: '',
     /**
      * In case you are using the GoogleAnalytics main thread addon or useGoogleAnalytics: true,
      * you can change the gtag id here. Required for the online examples (gh pages)

package/src/component/wrapper/GoogleMaps.mjs

@@ -7,12 +7,47 @@ 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'
          * @protected
          */
         className: 'Neo.component.wrapper.GoogleMaps',
+        /**
+         * Specify lat & lng for the current focus position
+         * @member {Object} center_={lat: -34.397, lng: 150.644}
+         */
+        center_: {lat: -34.397, lng: 150.644},
         /**
          * Prefer to use markerStoreConfig instead.
          * @member {Neo.data.Store|Object} markerStore_
@@ -33,16 +68,26 @@ class GoogleMaps extends Base {
             }
         },
         /**
-         * @member {Object} markerStoreConfig: null
-         */
-        markerStoreConfig: null,
-        /**
-         * @member {Object} _vdom
+         * @member {Number} zoom_=8
          */
-        _vdom:
-        {}
+        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
@@ -51,7 +96,26 @@ class GoogleMaps extends Base {
      * @param {String} [data.title]
      */
     addMarker(data) {
-        Neo.main.addon.GoogleMaps.addMarker(data);
+        Neo.main.addon.GoogleMaps.addMarker({
+            appName: this.appName,
+            ...data
+        });
+    }
+
+    /**
+     * Triggered after the center config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetCenter(value, oldValue) {
+        if (oldValue !== undefined) {
+            Neo.main.addon.GoogleMaps.setCenter({
+                appName: this.appName,
+                id     : this.id,
+                value
+            })
+        }
     }
 
     /**
@@ -83,18 +147,22 @@ class GoogleMaps extends Base {
         let me = this;
 
         if (value === false && oldValue !== undefined) {
-            Neo.main.addon.GoogleMaps.destroy({
-                appName: me.appName,
-                id     : me.id
-            });
+            me.removeMap();
         }
 
         super.afterSetMounted(value, oldValue);
 
         if (value) {
             let opts = {
-                appName: me.appName,
-                id     : me.id
+                appName          : me.appName,
+                center           : me.center,
+                fullscreenControl: me.fullscreenControl,
+                id               : me.id,
+                mapOptions       : me.mapOptions,
+                maxZoom          : me.maxZoom,
+                minZoom          : me.minZoom,
+                zoom             : me.zoom,
+                zoomControl      : me.zoomControl
             };
 
             setTimeout(() => {
@@ -105,6 +173,22 @@ class GoogleMaps extends Base {
         }
     }
 
+    /**
+     * Triggered after the zoom config got changed
+     * @param {Number} value
+     * @param {Number} oldValue
+     * @protected
+     */
+    afterSetZoom(value, oldValue) {
+        if (oldValue !== undefined) {
+            Neo.main.addon.GoogleMaps.setZoom({
+                appName: this.appName,
+                id     : this.id,
+                value
+            })
+        }
+    }
+
     /**
      * Triggered before the markerStore config gets changed.
      * @param {Object} value
@@ -122,18 +206,31 @@ class GoogleMaps extends Base {
      * @param {Boolean} silent=false
      */
     destroy(updateParentVdom=false, silent=false) {
-        Neo.main.addon.GoogleMaps.removeMap({
-            mapId: this.id
-        });
-
+        this.removeMap();
         super.destroy(updateParentVdom, silent);
     }
 
     /**
-     *
+     * @param {String} id
+     */
+    hideMarker(id) {
+        Neo.main.addon.GoogleMaps.hideMarker({
+            appName: this.appName,
+            id,
+            mapId  : this.id
+        })
+    }
+
+    /**
+     * Hook to use once the map instance got rendered
+     */
+    onComponentMounted() {}
+
+    /**
+     * @param {Object} record
      */
-    onComponentMounted() {
-        console.log('onComponentMounted', this.id);
+    onMarkerClick(record) {
+        console.log('onMarkerClick', record);
     }
 
     /**
@@ -144,11 +241,74 @@ class GoogleMaps extends Base {
 
         me.markerStore.items.forEach(item => {
             Neo.main.addon.GoogleMaps.addMarker({
-                mapId: me.id,
+                appName: me.appName,
+                mapId  : me.id,
                 ...item
             })
         })
     }
+
+    /**
+     * @param {Object} position
+     * @param {Number} position.lat
+     * @param {Number} position.lng
+     */
+    panTo(position) {
+        Neo.main.addon.GoogleMaps.panTo({
+            appName: this.appName,
+            mapId  : this.id,
+            position
+        })
+    }
+
+    /**
+     * 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
+        })
+    }
+
+    /**
+     *
+     */
+    removeMap() {
+        Neo.main.addon.GoogleMaps.removeMap({
+            appName: this.appName,
+            mapId  : this.id
+        })
+    }
+
+    /**
+     * @param {String} id
+     */
+    removeMarker(id) {
+        Neo.main.addon.GoogleMaps.removeMarker({
+            appName: this.appName,
+            id,
+            mapId  : this.id
+        })
+    }
+
+    /**
+     * @param {String} id
+     */
+    showMarker(id) {
+        Neo.main.addon.GoogleMaps.showMarker({
+            appName: this.appName,
+            id,
+            mapId  : this.id
+        })
+    }
 }
 
 Neo.applyClassConfig(GoogleMaps);

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]
          */
@@ -34,7 +36,13 @@ class GoogleMaps extends Base {
             app: [
                 'addMarker',
                 'create',
-                'removeMap'
+                'hideMarker',
+                'panTo',
+                'removeMap',
+                'removeMarker',
+                'setCenter',
+                'setZoom',
+                'showMarker'
             ]
         },
         /**
@@ -60,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);
@@ -72,24 +81,40 @@ 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));
         }
     }
 
     /**
      * @param {Object} data
+     * @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
+     * @param {Boolean} data.zoomControl
      */
     create(data) {
         let me = this;
 
         me.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
-            center: { lat: -34.397, lng: 150.644 },
-            zoom: 8,
+            center           : data.center,
+            fullscreenControl: data.fullscreenControl,
+            maxZoom          : data.maxZoom,
+            minZoom          : data.minZoom,
+            zoom             : data.zoom,
+            zoomControl      : data.zoomControl,
+            ...data.mapOptions
         });
 
         me.fire('mapCreated', data.id);
@@ -97,21 +122,96 @@ class GoogleMaps extends Base {
 
     /**
      * @param {Object} data
+     * @param {String} data.id
      * @param {String} data.mapId
      */
-    removeMap(data) {
-        delete this.maps[data.mapId];
-        delete this.markers[data.mapId];
+    hideMarker(data) {
+        this.markers[data.mapId][data.id].setMap(null);
     }
 
     /**
      * @protected
      */
     loadApi() {
-        DomAccess.loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA&v=weekly').then(() => {
+        let key = Neo.config.googleMapsApiKey;
+
+        DomAccess.loadScript(`https://maps.googleapis.com/maps/api/js?key=${key}&v=weekly`).then(() => {
             console.log('GoogleMaps API loaded');
         })
     }
+
+    /**
+     * @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
+     * @param {Object} data.position
+     */
+    panTo(data) {
+        this.maps[data.mapId].panTo(data.position);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.mapId
+     */
+    removeMap(data) {
+        delete this.maps[data.mapId];
+        delete this.markers[data.mapId];
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.mapId
+     */
+    removeMarker(data) {
+        let markers = this.markers[data.mapId];
+
+        markers[data.id].setMap(null);
+        delete markers[data.id];
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Object} data.value
+     */
+    setCenter(data) {
+        this.maps[data.id].setCenter(data.value);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Number} data.value
+     */
+    setZoom(data) {
+        this.maps[data.id].setZoom(data.value);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.mapId
+     */
+    showMarker(data) {
+        this.markers[data.mapId][data.id].setMap(this.maps[data.mapId]);
+    }
 }
 
 Neo.applyClassConfig(GoogleMaps);