neo.mjs 4.3.8 → 4.3.10

package/src/calendar/view/week/TimeAxisComponent.mjs

@@ -146,9 +146,6 @@ class TimeAxisComponent extends Component {
                 vdom.cn[i].removeDom = (i < startTime || i - 1 >= endTime);
             }
 
-            // silent update: the view containing this component will trigger the vdom update
-            me._vdom = vdom;
-
             me.fire('change', {
                 component: me,
                 rowHeight,

package/src/component/Base.mjs

@@ -405,7 +405,7 @@ class Base extends CoreBase {
             vdomRoot.cls = [...value];
         } else {
             // we need to merge changes
-            cls = [...me.wrapperCls, ...value];
+            cls = NeoArray.union(me.wrapperCls, value);
             NeoArray.remove(cls, NeoArray.difference(oldValue, value));
             vdom.cls = cls;
         }
@@ -664,9 +664,7 @@ class Base extends CoreBase {
                 delete me._vdom[key];
             });
 
-            Object.assign(me._vdom, vdom);
-        } else {
-            me._vdom = vdom;
+            vdom = Object.assign(me._vdom, vdom);
         }
 
         if (me.silentVdomUpdate) {
@@ -729,7 +727,7 @@ class Base extends CoreBase {
 
         if (vdom === vdomRoot) {
             // we need to merge changes
-            cls = [...cls, ...value];
+            cls = NeoArray.union(cls, value);
             NeoArray.remove(cls, NeoArray.difference(oldValue, value));
             vdom.cls = cls;
 
@@ -763,11 +761,11 @@ class Base extends CoreBase {
             let me   = this,
                 vdom = me.vdom;
 
-            if (!me.vdom.id) {
+            if (!vdom.id) {
                 vdom.style = value;
-                me.vdom = vdom;
+                me.update();
             } else {
-                me.updateStyle(value, oldValue, me.vdom.id);
+                me.updateStyle(value, oldValue, vdom.id);
             }
         }
     }
@@ -932,8 +930,7 @@ class Base extends CoreBase {
      */
     changeVdomRootKey(key, value) {
         let me   = this,
-            root = me.getVdomRoot(),
-            vdom = me.vdom;
+            root = me.getVdomRoot();
 
         if (value) {
             root[key] = value;
@@ -941,7 +938,7 @@ class Base extends CoreBase {
             delete root[key];
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -1211,9 +1208,8 @@ class Base extends CoreBase {
 
         if (me.hideMode !== 'visibility') {
             let removeFn = function() {
-                let vdom = me.vdom;
-                vdom.removeDom = true;
-                me.vdom = vdom;
+                me.vdom.removeDom = true;
+                me.update();
             }
 
             if (timeout) {
@@ -1416,26 +1412,24 @@ class Base extends CoreBase {
      * @returns {Promise<any>}
      */
     promiseVdomUpdate(vdom=this.vdom, vnode=this.vnode) {
-        let me = this;
+        let me    = this,
+            _vdom = me.vdom;
 
         // todo: updateVdom() should handle this
         // It is important to keep the vdom tree stable to ensure that containers do not lose the references to their
         // child vdom trees. The if case should not happen, but in case it does, keeping the reference and merging
         // the content over seems to be the best strategy
-        if (me._vdom !== vdom) {
+        if (_vdom !== vdom) {
             Logger.warn('vdom got replaced for: ' + me.id + '. Copying the content into the reference holder object');
 
-            Object.keys(me._vdom).forEach(key => {
-                delete me._vdom[key];
+            Object.keys(_vdom).forEach(key => {
+                delete _vdom[key];
             });
 
-            Object.assign(me._vdom, vdom);
-        } else {
-            me._vdom = vdom;
+            vdom = Object.assign(me._vdom, vdom);
         }
 
         if (me.silentVdomUpdate) {
-            me._vdom = vdom;
             return Promise.resolve();
         }
 
@@ -1443,7 +1437,7 @@ class Base extends CoreBase {
             if (me.mounted) {
                 me.updateVdom(vdom, vnode, resolve, reject);
             } else {
-                me.vdom = vdom;
+                me.update();
                 resolve();
             }
         });
@@ -1567,7 +1561,6 @@ class Base extends CoreBase {
         me.silentVdomUpdate = false;
 
         if (silent || !me.needsVdomUpdate) {
-            me._vdom = vdom;
             return Promise.resolve();
         } else {
             return me.promiseVdomUpdate();
@@ -1591,9 +1584,8 @@ class Base extends CoreBase {
         let me = this;
 
         if (me.hideMode !== 'visibility') {
-            let vdom = me.vdom;
-            vdom.removeDom = false;
-            me.vdom = vdom;
+            me.vdom.removeDom = false;
+            me.update();
         } else {
             let style = me.style;
             style.visibility = 'visible';
@@ -1714,6 +1706,13 @@ class Base extends CoreBase {
         return ComponentManager.up(this.id, config);
     }
 
+    /**
+     *
+     */
+    update() {
+        this.afterSetVdom(this.vdom, null);
+    }
+
     /**
      * Delta updates for the cls config. Gets called after the cls config gets changed in case the component is mounted.
      * @param {String[]} cls

package/src/component/Carousel.mjs

@@ -115,8 +115,7 @@ class Carousel extends Component {
      */
     afterSetAutoRun(value, oldValue) {
         if (value) {
-            let me   = this,
-                vdom = me._vdom;
+            let me = this;
 
             TaskManager.start({
                 id      : me.id,
@@ -126,9 +125,8 @@ class Carousel extends Component {
                 }
             });
 
-            vdom.cn[0].cn[0].removeDom = true;
-
-            me._vdom = vdom;
+            me.vdom.cn[0].cn[0].removeDom = true;
+            me.update();
         }
     }
 
@@ -166,7 +164,6 @@ class Carousel extends Component {
      */
     createBaseItems() {
         let me       = this,
-            vdom     = me._vdom,
             itemRoot = me.#getItemRoot(),
             items    = [],
             i        = 0;
@@ -176,7 +173,7 @@ class Carousel extends Component {
         }
 
         itemRoot.cn = items;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -216,7 +213,6 @@ class Carousel extends Component {
             action        = (typeof event === 'string') ? event : event.target.data.carouselaction,
             store         = me.store,
             countItems    = store.getCount(),
-            vdom          = me.vdom,
             index         = me.itemIndex,
             positionArray = me.positionArray,
             root          = me.#getItemRoot(),
@@ -256,7 +252,7 @@ class Carousel extends Component {
             return cn;
         })
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/component/Chip.mjs

@@ -81,11 +81,8 @@ class Chip extends Component {
      * @protected
      */
     afterSetClosable(value, oldValue) {
-        let me   = this,
-            vdom = me.vdom;
-
-        vdom.cn[2].removeDom = !value;
-        me.vdom = vdom;
+        this.vdom.cn[2].removeDom = !value;
+        this.update();
     }
 
     /**
@@ -108,8 +105,7 @@ class Chip extends Component {
      */
     afterSetIconCls(value, oldValue) {
         let me       = this,
-            vdom     = me.vdom,
-            iconNode = vdom.cn[0];
+            iconNode = me.vdom.cn[0];
 
         NeoArray.remove(iconNode.cls, oldValue);
 
@@ -120,7 +116,7 @@ class Chip extends Component {
             NeoArray.add(iconNode.cls, value);
         }
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -130,9 +126,7 @@ class Chip extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        let me       = this,
-            vdom     = me.vdom,
-            textNode = vdom.cn[1];
+        let textNode = this.vdom.cn[1];
 
         if (!value || value === '') {
             textNode.removeDom = true;
@@ -141,7 +135,7 @@ class Chip extends Component {
             textNode.innerHTML = value;
         }
 
-        me.vdom = vdom;
+        this.update();
     }
 
     /**

package/src/component/Circle.mjs

@@ -132,8 +132,7 @@ class Circle extends Component {
             cls : ['neo-circle', 'neo-circle-back']
         });
 
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         if (!me.backsideIconPath) {
             me.backsideIconPath = Neo.config.resourcesPath + 'images/circle/';
@@ -177,7 +176,7 @@ class Circle extends Component {
         me.updateOuterCircle(true);
         me.updateTitle(true);
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -205,8 +204,7 @@ class Circle extends Component {
     afterSetMaxItems(value, oldValue) {
         if (oldValue && this.rendered) {
             let me      = this,
-                frontEl = me.getFrontEl(),
-                vdom    = me.vdom;
+                frontEl = me.getFrontEl();
 
             if (value < oldValue) {
                 if (me.collapsed) {
@@ -216,12 +214,12 @@ class Circle extends Component {
 
                     setTimeout(() => {
                         frontEl.cn.splice(value + 2);
-                        me.vdom = vdom;
+                        me.update();
                     }, 300);
                 }
 
                 me.updateItemPositions(true);
-                me.vdom = vdom;
+                me.update();
             } else {
                 me.createItems(oldValue, true);
                 me.updateItemPositions(true);
@@ -229,7 +227,7 @@ class Circle extends Component {
                 me.promiseVdomUpdate().then(() => {
                     if (!me.collapsed) {
                         me.updateItemOpacity(1, true, oldValue);
-                        me.vdom = vdom;
+                        me.update();
                     }
                 });
             }
@@ -372,8 +370,7 @@ class Circle extends Component {
     collapseItem(data) {
         let me    = this,
             item  = me.getItemEl(data.path[0].id),
-            style = item.cn[0].style,
-            vdom  = me.vdom;
+            style = item.cn[0].style;
 
         delete style.marginLeft;
         delete style.marginTop;
@@ -382,7 +379,7 @@ class Circle extends Component {
         style.height = me.itemSize + 'px';
         style.width  = me.itemSize + 'px';
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -470,8 +467,7 @@ class Circle extends Component {
      */
     expandItem(data) {
         let me   = this,
-            item = me.getItemEl(data.path[0].id),
-            vdom = me.vdom;
+            item = me.getItemEl(data.path[0].id);
 
         item.cn[0].style = {
             height    : (me.itemSize + 20) + 'px',
@@ -481,17 +477,16 @@ class Circle extends Component {
             zIndex    : 40
         };
 
-        me.vdom = vdom;
+        me.update();
     }
 
     flipCircle() {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
-        NeoArray[me.isFlipped ? 'remove': 'add'](vdom.cn[0].cls, 'neo-flipped');
+        NeoArray[me.isFlipped ? 'remove': 'add'](me.vdom.cn[0].cls, 'neo-flipped');
 
         me.isFlipped = !me.isFlipped;
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -644,8 +639,7 @@ class Circle extends Component {
      */
     rotate() {
         let me             = this,
-            vdom           = me.vdom,
-            circleCenterEl = vdom.cn[0],
+            circleCenterEl = me.vdom.cn[0],
             transform = [
                 `rotateX(${me.rotateX}deg)`,
                 `rotateY(${me.rotateY}deg)`,
@@ -660,12 +654,12 @@ class Circle extends Component {
             me.promiseVdomUpdate().then(() => {
                 me.updateItemAngle(true);
                 circleCenterEl.style.transform = transform;
-                me.vdom = vdom;
+                me.update();
             });
         } else {
             me.updateItemAngle(true);
             circleCenterEl.style.transform = transform;
-            me.vdom = vdom;
+            me.update();
         }
     }
 

package/src/component/Clock.mjs

@@ -113,7 +113,7 @@ class Clock extends Component {
         vdom.cn[0].style.transform = `rotate(${minutesAngle}deg)`;
         vdom.cn[1].style.transform = `rotate(${hoursAngle}deg)`;
 
-        this.vdom = vdom;
+        this.update();
     }
 }
 

package/src/component/DateSelector.mjs

@@ -231,14 +231,13 @@ class DateSelector extends Component {
     afterSetLocale(value, oldValue) {
         if (oldValue !== undefined) {
             let me   = this,
-                dt   = new Intl.DateTimeFormat(me.locale, {month: 'short'}),
-                vdom = me.vdom;
+                dt   = new Intl.DateTimeFormat(me.locale, {month: 'short'});
 
             me.updateHeaderDays(me.dayNameFormat, '', true);
 
             me.getHeaderMonthEl().html = dt.format(me.currentDate);
 
-            me.vdom = vdom;
+            me.update();
         }
     }
 
@@ -423,7 +422,7 @@ class DateSelector extends Component {
                     me.promiseVdomUpdate().then(() => {
                         me.changeMonthTransitionCallback({data: data[0], slideDirection: slideDirection});
                         me.updateHeaderMonthTransitionCallback(headerMonthOpts);
-                        me.vdom = vdom;
+                        me.update();
 
                         setTimeout(() => {
                             me.changeMonthWrapperCallback(slideDirection);
@@ -453,7 +452,6 @@ class DateSelector extends Component {
 
         x = slideDirection === 'right' ? -data.width : 0;
         vdom.cn[1].cn[0].style.transform = `translateX(${x}px)`;
-        me._vdom = vdom; // silent update
     }
 
     /**
@@ -466,7 +464,6 @@ class DateSelector extends Component {
             vdom = me.vdom;
 
         vdom.cn[1] = vdom.cn[1].cn[0].cn[slideDirection === 'right' ? 1 : 0];
-        me._vdom = vdom; // silent update
     }
 
     /**
@@ -511,7 +508,7 @@ class DateSelector extends Component {
                     me.promiseVdomUpdate(vdom).then(() => {
                         y = scrollFromTop ? -data.height : 0;
                         vdom.cn[1].cn[0].style.transform = `translateY(${y}px)`;
-                        me.vdom = vdom;
+                        me.update();
 
                         setTimeout(() => {
                             vdom.cn[1] = vdom.cn[1].cn[0].cn[scrollFromTop ? 1 : 0];
@@ -926,7 +923,6 @@ class DateSelector extends Component {
 
         y = slideDirection === 'top' ? -data.height : 0;
         headerCenterEl.cn[0].cn[0].style.transform = `translateY(${y}px)`;
-        me._vdom = vdom; // silent update
     }
 
     /**
@@ -944,7 +940,6 @@ class DateSelector extends Component {
             slideDirection = yearIncrement > 0 ? 'bottom' : yearIncrement < 0 ? 'top' : increment < 0 ? 'top' : 'bottom';
 
         headerCenterEl.cn[0] = headerCenterEl.cn[0].cn[0].cn[slideDirection === 'top' ? 1 : 0];
-        me._vdom = vdom; // silent update
     }
 
     /**

package/src/component/Gallery.mjs

@@ -211,8 +211,7 @@ class Gallery extends Component {
         super.afterSetId(value, oldValue);
 
         let me     = this,
-            vdom   = me.vdom,
-            origin = vdom.cn[0],
+            origin = me.vdom.cn[0],
             camera = origin.cn[0],
             dolly  = camera.cn[0],
             view   = dolly.cn[0],
@@ -223,7 +222,7 @@ class Gallery extends Component {
         origin.id = prefix + 'origin';
         view  .id = prefix + 'view';
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**
@@ -297,7 +296,6 @@ class Gallery extends Component {
             let me   = this,
                 i    = 0,
                 len  = Math.min(me.maxItems, me.store.items.length),
-                vdom = me.vdom,
                 view = me.getItemsRoot();
 
             if (me.rendered) {
@@ -308,7 +306,7 @@ class Gallery extends Component {
                         view.cn[i].style.transform = me.getItemTransform(i);
                     }
 
-                    me.vdom = vdom;
+                    me.update();
 
                     setTimeout(() => {
                         let sm = me.selectionModel;
@@ -453,12 +451,11 @@ class Gallery extends Component {
      */
     destroyItems(startIndex, amountItems) {
         let me           = this,
-            vdom         = me.vdom,
             countItems   = amountItems || me.store.getCount(),
             selectedItem = me.selectionModel.items[0];
 
         me.getItemsRoot().cn.splice(startIndex || 0, countItems);
-        me.vdom = vdom;
+        me.update();
 
         if (me.selectionModel.hasSelection() && selectedItem > startIndex && selectedItem < startIndex + countItems) {
             me.afterSetMounted(true, false);
@@ -546,12 +543,10 @@ class Gallery extends Component {
      *
      */
     moveOrigin() {
-        let me   = this,
-            vdom = me.vdom;
-
-        vdom.cn[0].style.transform = me.translate3d(me.translateX, me.translateY, me.translateZ);
+        let me = this;
 
-        me.vdom = vdom;
+        me.vdom.cn[0].style.transform = me.translate3d(me.translateX, me.translateY, me.translateZ);
+        me.update();
     }
 
     /**
@@ -595,7 +590,7 @@ class Gallery extends Component {
             itemHeight     = me.itemHeight,
             itemWidth      = me.itemWidth,
             vdom           = me.vdom,
-            camera         = vdom.cn[0].cn[0],
+            camera         = me.vdom.cn[0].cn[0],
             cameraStyle    = camera.style,
             dollyTransform = me.getCameraTransformForCell(index),
             height         = me.offsetHeight / (me.amountRows + 2),
@@ -651,17 +646,15 @@ class Gallery extends Component {
                 cameraStyle.transform          = `rotateY(${angle}deg)`;
                 cameraStyle.transitionDuration = '330ms';
 
-                me.vdom = vdom;
+                me.update();
 
                 timeoutId = setTimeout(() => {
                     NeoArray.remove(me.transitionTimeouts, timeoutId);
 
-                    vdom = me.vdom;
-
                     cameraStyle.transform          = 'rotateY(0deg)';
                     cameraStyle.transitionDuration = '5000ms';
 
-                    me.vdom = vdom;
+                    me.update();
                 }, 330);
 
                 me.transitionTimeouts.push(timeoutId);
@@ -678,7 +671,6 @@ class Gallery extends Component {
                 hasChange = false,
                 items     = [...me.store.items || []],
                 newCn     = [],
-                vdom      = me.vdom,
                 view      = me.getItemsRoot(),
                 vdomMap   = view.cn.map(e => e.id),
                 fromIndex, vdomId;
@@ -699,7 +691,7 @@ class Gallery extends Component {
 
                 if (hasChange) {
                     view.cn = newCn;
-                    me.vdom = vdom;
+                    me.update();
 
                     setTimeout(() => {
                         me.afterSetOrderByRow(me.orderByRow, !me.orderByRow);
@@ -725,7 +717,6 @@ class Gallery extends Component {
             amountRows       = me.amountRows,
             orderByRow       = me.orderByRow,
             secondLastColumn = amountRows - 1,
-            vdom             = me.vdom,
             view             = me.getItemsRoot(),
             amountColumns;
 
@@ -741,7 +732,7 @@ class Gallery extends Component {
             }
         });
 
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/component/Helix.mjs

@@ -637,11 +637,10 @@ class Helix extends Component {
      * @param {Number} [amountItems]
      */
     destroyItems(startIndex, amountItems) {
-        let me   = this,
-            vdom = me.vdom;
+        let me = this;
 
         me.getItemsRoot().cn.splice(startIndex || 0, amountItems || me.store.getCount());
-        me.vdom = vdom;
+        me.update();
     }
 
     /**

package/src/component/Label.mjs

@@ -39,9 +39,8 @@ class Label extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.html = value;
-        this.vdom = vdom;
+        this.vdom.html = value;
+        this.update();
     }
 }
 

package/src/component/Legend.mjs

@@ -51,9 +51,8 @@ class Legend extends Component {
      * @protected
      */
     afterSetIconCls(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.cn[0].html = `<i class="neo-legend-icon ${value}"></i>`;
-        this.vdom = vdom;
+        this.vdom.cn[0].html = `<i class="neo-legend-icon ${value}"></i>`;
+        this.update();
     }
 
     /**
@@ -63,9 +62,8 @@ class Legend extends Component {
      * @protected
      */
     afterSetText(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.cn[1].html = value;
-        this.vdom = vdom;
+        this.vdom.cn[1].html = value;
+        this.update();
     }
 
     /**
@@ -75,9 +73,8 @@ class Legend extends Component {
      * @protected
      */
     afterSetUseIcon(value, oldValue) {
-        let vdom = this.vdom;
-        vdom.cn[0].removeDom = !value;
-        this.vdom = vdom;
+        this.vdom.cn[0].removeDom = !value;
+        this.update();
     }
 }