neo.mjs 4.4.12 → 4.4.14

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

@@ -21,6 +21,10 @@ class MainContainer extends Viewport {
             flex     : 1,
             reference: 'google-maps-component',
 
+            listeners: {
+                zoomChange: 'onMapZoomChance'
+            },
+
             markerStoreConfig: {
                 data: [{
                     id      : '1',
@@ -50,6 +54,7 @@ class MainContainer extends Viewport {
                 listeners           : {change: 'onZoomFieldChange'},
                 minValue            : 0,
                 maxValue            : 10,
+                reference           : 'zoom-field',
                 style               : {marginLeft: '10px'},
                 value               : 8,
                 width               : 100

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

@@ -20,6 +20,13 @@ class MainContainerController extends ComponentController {
         this.getReference('google-maps-component').panTo({lat: 37.655, lng: -122.4175})
     }
 
+    /**
+     * @param {Object} data
+     */
+    onMapZoomChance(data) {
+        this.getReference('zoom-field').value = data.value;
+    }
+
     /**
      * @param {Object} data
      */

package/examples/model/inline/MainContainer.mjs

@@ -70,7 +70,7 @@ class MainContainer extends Viewport {
                     iconCls: 'fa fa-home',
 
                     bind: {
-                        text: data => `${data.button1Text}`
+                        text: data => data.button1Text
                     }
                 }, {
                     handler: 'onButton2Click',
@@ -91,11 +91,7 @@ class MainContainer extends Viewport {
                 width     : 300,
 
                 bind: {
-                    value: data => `${data.button1Text}`
-                },
-
-                listeners: {
-                    change: 'onTextField1Change'
+                    value: {twoWay: true, value: data => data.button1Text}
                 }
             }, {
                 module    : TextField,

package/package.json

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

package/src/button/Base.mjs

@@ -104,9 +104,9 @@ class Base extends Component {
         route_: null,
         /**
          * The text displayed on the button [optional]
-         * @member {String} text_=''
+         * @member {String|null} text_=null
          */
-        text_: '',
+        text_: null,
         /**
          * Transforms the button tag into an a tag [optional]
          * @member {String|null} url_=null
@@ -271,8 +271,8 @@ class Base extends Component {
 
     /**
      * Triggered after the text config got changed
-     * @param {String} value
-     * @param {String} oldValue
+     * @param {String|null} value
+     * @param {String|null} oldValue
      * @protected
      */
     afterSetText(value, oldValue) {
@@ -280,7 +280,7 @@ class Base extends Component {
             vdomRoot = me.getVdomRoot(),
             textNode = vdomRoot.cn[1];
 
-        if (value === '') {
+        if (!value || value === '') {
             NeoArray.add(me._cls,      'no-text');
             NeoArray.add(vdomRoot.cls, 'no-text');
             textNode.removeDom = true;

package/src/component/Base.mjs

@@ -425,9 +425,11 @@ class Base extends CoreBase {
      * @protected
      */
     afterSetConfig(key, value, oldValue) {
-        if (Neo.currentWorker.isUsingViewModels) {
-            if (this.bind?.[key]?.twoWay) {
-                this.getModel()?.setData(key, value);
+        if (Neo.currentWorker.isUsingViewModels && oldValue !== undefined) {
+            let binding = this.bind?.[key];
+
+            if (binding?.twoWay) {
+                this.getModel()?.setData(binding.key, value);
             }
         }
     }

package/src/component/wrapper/GoogleMaps.mjs

@@ -82,9 +82,10 @@ class GoogleMaps extends Base {
         let me = this;
 
         me.addDomListeners({
-            googleMarkerClick: me.parseMarkerClick,
-            local            : false,
-            scope            : me
+            googleMapZoomChange: me.onMapZoomChange,
+            googleMarkerClick  : me.parseMarkerClick,
+            local              : false,
+            scope              : me
         })
     }
 
@@ -181,9 +182,16 @@ class GoogleMaps extends Base {
      */
     afterSetZoom(value, oldValue) {
         if (oldValue !== undefined) {
+            let me = this;
+
             Neo.main.addon.GoogleMaps.setZoom({
-                appName: this.appName,
-                id     : this.id,
+                appName: me.appName,
+                id     : me.id,
+                value
+            });
+
+            me.fire('zoomChange', {
+                id: me.id,
                 value
             })
         }
@@ -226,6 +234,13 @@ class GoogleMaps extends Base {
      */
     onComponentMounted() {}
 
+    /**
+     * @param {Object} data
+     */
+    onMapZoomChange(data) {
+        this.zoom = data.value;
+    }
+
     /**
      * @param {Object} record
      */

package/src/main/addon/GoogleMaps.mjs

@@ -68,23 +68,24 @@ class GoogleMaps extends Base {
      * @param {String} [data.title]
      */
     addMarker(data) {
-        let me = this,
+        let me    = this,
+            mapId = data.mapId,
             listenerId, marker;
 
-        if (!me.maps[data.mapId]) {
-            listenerId = me.on('mapCreated', mapId => {
-                if (data.mapId === mapId) {
+        if (!me.maps[mapId]) {
+            listenerId = me.on('mapCreated', id => {
+                if (mapId === id) {
                     me.un(listenerId);
                     me.addMarker(data);
                 }
             })
         } else {
-            Neo.ns(`${data.mapId}`, true, me.markers);
+            Neo.ns(`${mapId}`, true, me.markers);
 
-            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
+            me.markers[mapId][data.id] = marker = new google.maps.Marker({
+                map     : me.maps[mapId],
+                neoId   : data.id, // custom property
+                neoMapId: mapId,   // custom property
                 position: data.position,
                 title   : data.title,
             });
@@ -105,9 +106,11 @@ class GoogleMaps extends Base {
      * @param {Boolean} data.zoomControl
      */
     create(data) {
-        let me = this;
+        let me = this,
+            id = data.id,
+            map;
 
-        me.maps[data.id] = new google.maps.Map(DomAccess.getElement(data.id), {
+        me.maps[id] = map = new google.maps.Map(DomAccess.getElement(id), {
             center           : data.center,
             fullscreenControl: data.fullscreenControl,
             maxZoom          : data.maxZoom,
@@ -117,7 +120,9 @@ class GoogleMaps extends Base {
             ...data.mapOptions
         });
 
-        me.fire('mapCreated', data.id);
+        map.addListener('zoom_changed', me.onMapZoomChange.bind(me, map, id));
+
+        me.fire('mapCreated', id);
     }
 
     /**
@@ -140,6 +145,19 @@ class GoogleMaps extends Base {
         })
     }
 
+    /**
+     * @param {google.maps.Map} map
+     * @param {String} mapId
+     */
+    onMapZoomChange(map, mapId){
+        DomEvents.sendMessageToApp({
+            id   : mapId,
+            path : [{cls: [], id: mapId}],
+            type : 'googleMapZoomChange',
+            value: map.zoom
+        })
+    }
+
     /**
      * @param {google.maps.Marker} marker
      * @param {Object} event

package/src/model/Component.mjs

@@ -564,6 +564,7 @@ class Component extends Base {
 
             Object.entries(component.bind).forEach(([key, value]) => {
                 if (Neo.isObject(value)) {
+                    value.key = me.getFormatterVariables(value.value)[0];
                     value = value.value;
                 }