neo.mjs 4.4.9 → 4.4.11

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';
 
@@ -18,7 +19,15 @@ class MainContainer extends Viewport {
         items: [{
             module   : GoogleMapsComponent,
             flex     : 1,
-            reference: 'google-maps-component'
+            reference: 'google-maps-component',
+
+            markerStoreConfig: {
+                data: [{
+                    id      : '1',
+                    position: {lat: -34.397, lng: 150.644},
+                    title   : 'Hello neo'
+                }]
+            }
         }, {
             module: Toolbar,
             flex  : 'none',
@@ -26,8 +35,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'
             }]
         }]
     }}

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'
+            });
+
+            map.hideMarker('1')
+        } else {
+            button.set({
+                iconCls: 'fa-solid fa-trash',
+                mode   : 'hide',
+                text   : 'Hide marker'
+            });
+
+            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.9",
+    "version": "4.4.11",
     "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/Base.mjs

@@ -974,8 +974,8 @@ class Base extends CoreBase {
 
     /**
      * Unregisters this instance from the ComponentManager
-     * @param {Boolean} [updateParentVdom=false] true to remove the component from the parent vdom => real dom
-     * @param {Boolean} [silent=false] true to update the vdom silently (useful for destroying multiple child items in a row)
+     * @param {Boolean} updateParentVdom=false true to remove the component from the parent vdom => real dom
+     * @param {Boolean} silent=false true to update the vdom silently (useful for destroying multiple child items in a row)
      * todo: unregister events
      */
     destroy(updateParentVdom=false, silent=false) {

package/src/component/Splitter.mjs

@@ -169,7 +169,7 @@ class Splitter extends Component {
                 if (resizeNext) {
                     newSize = parentRect.width - newSize;
                 } else {
-                    newSize -= size;
+                    newSize += size;
                 }
 
                 newSize = Math.min(Math.max(newSize, 0), parentRect.width - size);

package/src/component/wrapper/GoogleMaps.mjs

@@ -1,4 +1,6 @@
-import Base from '../../component/Base.mjs';
+import Base            from '../../component/Base.mjs';
+import ClassSystemUtil from '../../util/ClassSystem.mjs';
+import Store           from '../../data/Store.mjs';
 
 /**
  * @class Neo.component.wrapper.GoogleMaps
@@ -12,12 +14,108 @@ class GoogleMaps extends Base {
          */
         className: 'Neo.component.wrapper.GoogleMaps',
         /**
-         * @member {Object} _vdom
+         * Specify lat & lng for the current focus position
+         * @member {Object} center_={lat: -34.397, lng: 150.644}
          */
-        _vdom:
-        {}
+        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_
+         * @protected
+         */
+        markerStore_: {
+            model: {
+                fields: [{
+                    name: 'id',
+                    type: 'String'
+                }, {
+                    name: 'position',
+                    type: 'Object'
+                }, {
+                    name: 'title',
+                    type: 'String'
+                }]
+            }
+        },
+        /**
+         * @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
     }}
 
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} data.mapId
+     * @param {Object} data.position
+     * @param {String} [data.title]
+     */
+    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
+            })
+        }
+    }
+
+    /**
+     * Triggered after the markerStore config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetMarkerStore(value, oldValue) {
+        let me = this;
+
+        value.on({
+            load : me.onMarkerStoreLoad,
+            scope: me
+        });
+
+        if (value.items.length > 0) {
+            me.onMarkerStoreLoad();
+        }
+    }
+
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -28,18 +126,21 @@ 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,
+                maxZoom          : me.maxZoom,
+                minZoom          : me.minZoom,
+                zoom             : me.zoom,
+                zoomControl      : me.zoomControl
             };
 
             setTimeout(() => {
@@ -50,11 +151,117 @@ 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
+     * @param {Object} oldValue
+     * @protected
+     */
+    beforeSetMarkerStore(value, oldValue) {
+        oldValue?.destroy();
+
+        return ClassSystemUtil.beforeSetInstance(value, Store, this.markerStoreConfig);
+    }
+
+    /**
+     * @param {Boolean} updateParentVdom=false
+     * @param {Boolean} silent=false
+     */
+    destroy(updateParentVdom=false, silent=false) {
+        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() {}
+
     /**
      *
      */
-    onComponentMounted() {
-        console.log('onComponentMounted', this.id);
+    onMarkerStoreLoad() {
+        let me = this;
+
+        me.markerStore.items.forEach(item => {
+            Neo.main.addon.GoogleMaps.addMarker({
+                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
+        })
+    }
+
+    /**
+     *
+     */
+    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
+        })
     }
 }
 

package/src/container/Base.mjs

@@ -191,6 +191,16 @@ class Base extends Component {
             defaults = me.itemDefaults,
             lazyLoadItem, module;
 
+        if (defaults) {
+            if (item.module) {
+                delete defaults.ntype;
+            }
+
+            if (item.ntype) {
+                delete defaults.module;
+            }
+        }
+
         switch (Neo.typeOf(item)) {
             case 'NeoClass': {
                 item = Neo.create({

package/src/main/addon/GoogleMaps.mjs

@@ -1,5 +1,6 @@
-import Base      from '../../core/Base.mjs';
-import DomAccess from '../DomAccess.mjs';
+import Base       from '../../core/Base.mjs';
+import DomAccess  from '../DomAccess.mjs';
+import Observable from '../../core/Observable.mjs';
 
 /**
  * @class Neo.main.addon.GoogleMaps
@@ -17,13 +18,29 @@ class GoogleMaps extends Base {
          * @member {Object} maps={}
          */
         maps: {},
+        /**
+         * @member {Object} markers={}
+         */
+        markers: {},
+        /**
+         * @member {Neo.core.Base[]} mixins=[Observable]
+         */
+        mixins: [Observable],
         /**
          * @member {Object} remote
          * @protected
          */
         remote: {
             app: [
-                'create'
+                'addMarker',
+                'create',
+                'hideMarker',
+                'panTo',
+                'removeMap',
+                'removeMarker',
+                'setCenter',
+                'setZoom',
+                'showMarker'
             ]
         },
         /**
@@ -44,21 +61,131 @@ class GoogleMaps extends Base {
     /**
      * @param {Object} data
      * @param {String} data.id
+     * @param {String} data.mapId
+     * @param {Object} data.position
+     * @param {String} [data.title]
+     */
+    addMarker(data) {
+        let me = this;
+
+        if (!me.maps[data.mapId]) {
+            let listenerId = me.on('mapCreated', mapId => {
+                if (data.mapId === mapId) {
+                    me.un(listenerId);
+                    me.addMarker(data);
+                }
+            })
+        } else {
+            Neo.ns(`${data.mapId}`, true, me.markers);
+
+            me.markers[data.mapId][data.id] = new google.maps.Marker({
+                position: data.position,
+                map     : me.maps[data.mapId],
+                title   : data.title,
+            });
+        }
+    }
+
+    /**
+     * @param {Object} data
+     * @param {Object} data.center
+     * @param {Boolean} data.fullscreenControl
+     * @param {String} data.id
+     * @param {Number} data.maxZoom
+     * @param {Number} data.minZoom
+     * @param {Number} data.zoom
+     * @param {Boolean} data.zoomControl
      */
     create(data) {
-        this.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
-            center: { lat: -34.397, lng: 150.644 },
-            zoom: 8,
+        let me = this;
+
+        me.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
+            center           : data.center,
+            fullscreenControl: data.fullscreenControl,
+            maxZoom          : data.maxZoom,
+            minZoom          : data.minZoom,
+            zoom             : data.zoom,
+            zoomControl      : data.zoomControl
         });
+
+        me.fire('mapCreated', data.id);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {String} 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 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]);
     }
 }
 

package/src/manager/Component.mjs

@@ -184,11 +184,15 @@ class Component extends Base {
     }
 
     /**
-     * Returns an Array containing all parent components for a given component
-     * @param {Neo.component.Base} component
+     * Returns an Array containing all parent components for a given component or component id
+     * @param {Neo.component.Base|String} component
      * @returns {Neo.component.Base[]} parents
      */
     getParents(component) {
+        if (Neo.isString(component)) {
+            component = this.getById(component);
+        }
+
         let parents = [];
 
         while (component?.parentId) {