neo.mjs 4.4.9 → 4.4.10

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

@@ -18,7 +18,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',

package/package.json

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

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
@@ -11,6 +13,29 @@ class GoogleMaps extends Base {
          * @protected
          */
         className: 'Neo.component.wrapper.GoogleMaps',
+        /**
+         * 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,
         /**
          * @member {Object} _vdom
          */
@@ -18,6 +43,36 @@ 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) {
+        Neo.main.addon.GoogleMaps.addMarker(data);
+    }
+
+    /**
+     * 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
@@ -50,12 +105,50 @@ class GoogleMaps extends Base {
         }
     }
 
+    /**
+     * 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) {
+        Neo.main.addon.GoogleMaps.removeMap({
+            mapId: this.id
+        });
+
+        super.destroy(updateParentVdom, silent);
+    }
+
     /**
      *
      */
     onComponentMounted() {
         console.log('onComponentMounted', this.id);
     }
+
+    /**
+     *
+     */
+    onMarkerStoreLoad() {
+        let me = this;
+
+        me.markerStore.items.forEach(item => {
+            Neo.main.addon.GoogleMaps.addMarker({
+                mapId: me.id,
+                ...item
+            })
+        })
+    }
 }
 
 Neo.applyClassConfig(GoogleMaps);

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,23 @@ 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',
+                'removeMap'
             ]
         },
         /**
@@ -41,15 +52,56 @@ class GoogleMaps extends Base {
         this.loadApi();
     }
 
+    /**
+     * @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 {String} data.id
      */
     create(data) {
-        this.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
+        let me = this;
+
+        me.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
             center: { lat: -34.397, lng: 150.644 },
             zoom: 8,
         });
+
+        me.fire('mapCreated', data.id);
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.mapId
+     */
+    removeMap(data) {
+        delete this.maps[data.mapId];
+        delete this.markers[data.mapId];
     }
 
     /**
@@ -58,7 +110,7 @@ class GoogleMaps extends Base {
     loadApi() {
         DomAccess.loadScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA&v=weekly').then(() => {
             console.log('GoogleMaps API loaded');
-        });
+        })
     }
 }
 

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) {