neo.mjs 2.3.18 → 3.0.2

package/src/component/mwc/TextField.mjs

@@ -65,8 +65,8 @@ class TextField extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         if (!Neo.config.mainThreadAddons.includes('Mwc')) {
             console.error('Please include "Mwc" into the mainThreadAddons of your neo-config.json file.');

package/src/container/Panel.mjs

@@ -50,8 +50,8 @@ class Panel extends Container {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/src/controller/Application.mjs

@@ -48,13 +48,13 @@ class Application extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
+    construct(config) {
         // to guarantee that the main view can access Neo.apps at any point,
         // we need to trigger its assignment at the end of the ctor.
         let mainView = config.mainView;
         delete config.mainView;
 
-        super(config);
+        super.construct(config);
 
         let me = this;
 

package/src/controller/Base.mjs

@@ -30,8 +30,8 @@ class Base extends CoreBase {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         HashHistory.on('change', this.onHashChange, this);
     }

package/src/controller/Component.mjs

@@ -38,8 +38,8 @@ class Component extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me        = this,
             component = me.component,

package/src/core/Base.mjs

@@ -74,7 +74,7 @@ class Base {
      * Applies the observable mixin if needed, grants remote access if needed.
      * @param {Object} config={}
      */
-    constructor(config={}) {
+    construct(config={}) {
         let me = this;
 
         Object.defineProperties(me, {
@@ -99,6 +99,9 @@ class Base {
 
         me.getStaticConfig('observable') && me.initObservable(config);
 
+        // assign class field values prior to configs
+        config = me.setFields(config);
+
         me.initConfig(config);
 
         Object.defineProperty(me, 'configsApplied', {
@@ -376,6 +379,8 @@ class Base {
     set(values={}) {
         let me = this;
 
+        values = me.setFields(values);
+
         // If the initial config processing is still running,
         // finish this one first before dropping new values into the configSymbol.
         // see: https://github.com/neomjs/neo/issues/2201
@@ -388,6 +393,25 @@ class Base {
         me.processConfigs(true);
     }
 
+    /**
+     * We want to assign class fields first and remove them from the config object,
+     * so that afterSet(), beforeGet() and beforeSet() methods can get the new values right away
+     * @param {Object} config
+     * @returns {Object}
+     */
+    setFields(config) {
+        let configNames = this.constructor.config;
+
+        Object.entries(config).forEach(([key, value]) => {
+            if (!configNames.hasOwnProperty(key) && !Neo.hasPropertySetter(this, key)) {
+                this[key] = value;
+                delete config[key];
+            }
+        });
+
+        return config;
+    }
+
     /**
      * Sets the value of a static config by a given key
      * @param {String} key The key of a staticConfig defined inside static getStaticConfig

package/src/core/IdGenerator.mjs

@@ -42,7 +42,7 @@ class IdGenerator {
     /**
      * @param config
      */
-    constructor(config) {
+    construct(config) {
         let me = this;
 
         me.idCounter = {};

package/src/core/Observable.mjs

@@ -107,6 +107,10 @@ class Observable extends Base {
             for (i = 0; i < len; i++) {
                 eventConfig = events[i];
 
+                if (!Neo.isFunction(eventConfig.fn)) {
+                    eventConfig.fn = eventConfig.scope[eventConfig.fn];
+                }
+
                 eventConfig.fn.apply(eventConfig.scope || me, eventConfig.data ? args.concat(eventConfig.data) : args);
             }
         }

package/src/data/Store.mjs

@@ -79,8 +79,8 @@ class Store extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/src/dialog/Base.mjs

@@ -125,8 +125,8 @@ class Base extends Panel {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 
@@ -286,10 +286,7 @@ class Base extends Panel {
             appName = me.appName,
             id      = me.getAnimateTargetId();
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: appName,
-            id     : [me.id, me.animateTargetId]
-        }).then(rects => {
+        me.getDomRect([me.id, me.animateTargetId]).then(rects => {
             Neo.currentWorker.promiseMessage('main', {
                 action  : 'mountDom',
                 appName : appName,
@@ -336,10 +333,7 @@ class Base extends Panel {
             appName = me.appName,
             id      = me.getAnimateTargetId();
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            appName: appName,
-            id     : me.animateTargetId
-        }).then(rect => {
+        me.getDomRect(me.animateTargetId).then(rect => {
             Neo.currentWorker.promiseMessage('main', {
                 action  : 'mountDom',
                 appName : appName,
@@ -530,10 +524,7 @@ class Base extends Panel {
             initialTransitionProperty, wrapperStyle;
 
         if (!me.maximized) {
-            Neo.main.DomAccess.getBoundingClientRect({
-                appName: me.appName,
-                id     : me.dragZone.dragProxy.id
-            }).then(rect => {
+            me.getDomRect(me.dragZone.dragProxy.id).then(rect => {
                 wrapperStyle = me.wrapperStyle;
 
                 Object.assign(wrapperStyle, {

package/src/draggable/DragProxyComponent.mjs

@@ -37,8 +37,8 @@ class DragProxyComponent extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/src/draggable/DragZone.mjs

@@ -152,8 +152,8 @@ class DragZone extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         if (!Neo.main.addon.DragDrop) {
             console.error('You can not use Neo.draggable.DragZone without adding Neo.main.addon.DragDrop to the main thread addons', this.id);

package/src/draggable/DropZone.mjs

@@ -25,8 +25,8 @@ class DropZone extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             owner        = me.owner,

package/src/draggable/list/DragZone.mjs

@@ -29,8 +29,8 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             owner        = me.owner,

package/src/draggable/toolbar/DragZone.mjs

@@ -23,8 +23,8 @@ class DragZone extends BaseDragZone {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             owner        = me.owner,

package/src/draggable/toolbar/SortZone.mjs

@@ -204,9 +204,7 @@ class SortZone extends DragZone {
                 });
             });
 
-            Neo.main.DomAccess.getBoundingClientRect({
-                id: [owner.id].concat(owner.items.map(e => e.id))
-            }).then(itemRects => {
+            owner.getDomRect([owner.id].concat(owner.items.map(e => e.id))).then(itemRects => {
                 me.ownerRect = itemRects[0];
 
                 ownerStyle.height = `${itemRects[0].height}px`;

package/src/filter/ToggleOperatorsButton.mjs

@@ -30,8 +30,8 @@ class ToggleOperatorsButton extends Button {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/src/form/field/CheckBox.mjs

@@ -72,8 +72,8 @@ class CheckBox extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;

package/src/form/field/Color.mjs

@@ -47,8 +47,8 @@ class Color extends Select {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             vdom         = me.vdom,

package/src/form/field/Date.mjs

@@ -62,8 +62,8 @@ class DateField extends Picker {
     /**
      * @param config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/src/form/field/Display.mjs

@@ -31,8 +31,8 @@ class Display extends Text {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me      = this,
             vdom    = me.vdom,

package/src/form/field/Picker.mjs

@@ -143,9 +143,7 @@ class Picker extends Text {
     getClientRectsThenShow(callback, callbackScope) {
         let me = this;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: [me.id, me.getInputWrapperId(), 'body']
-        }).then(data => {
+        me.getDomRect([me.id, me.getInputWrapperId(), 'body']).then(data => {
             me.clientRects = data;
             me.showPicker(callback, callbackScope);
         });

package/src/form/field/Range.mjs

@@ -48,8 +48,8 @@ class Range extends Number {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners,

package/src/form/field/Select.mjs

@@ -105,8 +105,8 @@ class Select extends Picker {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this;
 

package/src/form/field/Text.mjs

@@ -123,8 +123,8 @@ class Text extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;
@@ -921,9 +921,7 @@ class Text extends Base {
     updateCenterBorderElWidth(silent=false) {
         let me = this;
 
-        me.mounted && Neo.main.DomAccess.getBoundingClientRect({
-            id: me.getCenterBorderEl().id
-        }).then(data => {
+        me.mounted && me.getDomRect(me.getCenterBorderEl().id).then(data => {
             me.centerBorderElWidth = Math.round(data.width * .7) + 8;
 
             if (!silent) {

package/src/form/field/Time.mjs

@@ -84,8 +84,8 @@ class Time extends Picker {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             clearTrigger = me.getTrigger('clear');

package/src/form/field/trigger/Base.mjs

@@ -82,8 +82,8 @@ class Base extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me             = this,
             domListeners   = me.domListeners || [],

package/src/form/field/trigger/Time.mjs

@@ -50,8 +50,8 @@ class Time extends Picker {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me   = this,
             vdom = me.vdom;

package/src/grid/Container.mjs

@@ -76,8 +76,8 @@ class Container extends BaseContainer {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         this.createRandomViewData(this.amountRows);
     }

package/src/list/Base.mjs

@@ -105,8 +105,8 @@ class Base extends Component {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me           = this,
             domListeners = me.domListeners;
@@ -191,9 +191,9 @@ class Base extends Component {
         let me = this;
 
         value?.on({
-            filter      : me.onStoreFilter,
-            load        : me.onStoreLoad,
-            recordChange: me.onStoreRecordChange,
+            filter      : 'onStoreFilter',
+            load        : 'onStoreLoad',
+            recordChange: 'onStoreRecordChange',
             scope       : me
         });
 

package/src/list/plugin/Animate.mjs

@@ -39,23 +39,30 @@ class Animate extends Base {
          * Read only
          * @member {Number|null} rows=null
          */
-        rows: null
+        rows: null,
+        /**
+         * Time in ms. Please ensure to match the CSS based value, in case you change the default.
+         * @member {Number} transitionDuration=500
+         */
+        transitionDuration: 500
     }}
 
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
-        let me = this;
+        let me    = this,
+            owner = me.owner;
 
         me.adjustCreateItem();
 
-        me.owner.store.on({
-            filter: me.onFilter,
-            sort  : me.onSort,
-            scope : me
+        owner.onStoreFilter = me.onStoreFilter.bind(me);
+
+        owner.store.on({
+            sort : me.onSort,
+            scope: me
         });
     }
 
@@ -77,27 +84,19 @@ class Animate extends Base {
      * @returns {Object}
      */
     createItem(me, record, index) {
-        let item       = me.ownerCreateItem(record, index),
-            itemHeight = me.itemHeight,
-            itemWidth  = me.itemWidth,
-            margin     = me.itemMargin,
-            style      = item.style || {},
-            column, row, x, y;
+        let item     = me.ownerCreateItem(record, index),
+            position = me.getItemPosition(record, index),
+            style    = item.style || {};
 
         if (!me.ownerRect) {
             return null;
         }
 
-        column = index % me.columns;
-        row    = Math.floor(index / me.columns);
-        x      = column * (margin + itemWidth)  + margin;
-        y      = row    * (margin + itemHeight) + margin;
-
         Object.assign(style, {
-            height   : `${itemHeight}px`,
+            height   : `${me.itemHeight}px`,
             position : 'absolute',
-            transform: `translate(${x}px, ${y}px)`,
-            width    : `${itemWidth}px`
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            width    : `${me.itemWidth}px`
         });
 
         item.style = style;
@@ -106,10 +105,20 @@ class Animate extends Base {
     }
 
     /**
-     * @param {Object} data
+     *
+     * @param {Object} record
+     * @param {Number} index
+     * @returns {{x: Number, y: Number}}
      */
-    onFilter(data) {
-        console.log('onFilter', data);
+    getItemPosition(record, index) {
+        let me     = this,
+            column = index % me.columns,
+            margin = me.itemMargin,
+            row    = Math.floor(index / me.columns),
+            x      = column * (margin + me.itemWidth)  + margin,
+            y      = row    * (margin + me.itemHeight) + margin;
+
+        return {x, y};
     }
 
     /**
@@ -118,9 +127,7 @@ class Animate extends Base {
     onOwnerMounted() {
         let me = this;
 
-        Neo.main.DomAccess.getBoundingClientRect({
-            id: me.owner.id
-        }).then(rect => {
+        me.owner.getDomRect().then(rect => {
             Object.assign(me, {
                 columns  : Math.floor(rect.width / me.itemWidth),
                 ownerRect: rect,
@@ -169,6 +176,76 @@ class Animate extends Base {
             }
         }
     }
+
+    /**
+     * @param {Object} data
+     * @param {Boolean} data.isFiltered
+     * @param {Object[]} data.items
+     * @param {Object[]} data.oldItems
+     * @param {Neo.data.Store} data.scope
+     */
+    onStoreFilter(data) {
+        let me           = this,
+            owner        = me.owner,
+            addedItems   = [],
+            movedItems   = [],
+            removedItems = [],
+            vdom         = owner.vdom,
+            index, map, position;
+
+        data.items.forEach((record, index) => {
+            if (!data.oldItems.includes(record)) {
+                addedItems.push({index, record});
+            } else {
+                movedItems.push({index, record});
+            }
+        });
+
+        data.oldItems.forEach((record, index) => {
+            if (!data.items.includes(record)) {
+                removedItems.push({index, record});
+            }
+        });
+
+        addedItems.forEach(obj => {
+            vdom.cn.splice(obj.index, 0, me.createItem(me, obj.record, obj.index));
+
+            obj.item = vdom.cn[obj.index];
+            obj.item.style.opacity = 0;
+        });
+
+        owner.vdom = vdom;
+
+        // ensure to get into the next animation frame
+        setTimeout(() => {
+            vdom = owner.vdom;
+
+            addedItems.forEach(obj => {
+                vdom.cn[obj.index].style.opacity = 1;
+            });
+
+            // new items are already added into the vdom, while old items are not yet removed
+            // => we need a map to ensure getting the correct index
+            map = vdom.cn.map(e => e.id);
+
+            movedItems.forEach(obj => {
+                index    = map.indexOf(owner.getItemId(obj.record[owner.store.keyProperty]));
+                position = me.getItemPosition(obj.record, obj.index);
+                vdom.cn[index].style.transform = `translate(${position.x}px, ${position.y}px)`;
+            });
+
+            removedItems.forEach(obj => {
+                obj.item = vdom.cn[obj.index];
+                obj.item.style.opacity = 0;
+            });
+
+            owner.vdom = vdom;
+
+            setTimeout(() => {
+                owner.createItems();
+            }, me.transitionDuration);
+        }, 50);
+    }
 }
 
 Neo.applyClassConfig(Animate);

package/src/main/DomAccess.mjs

@@ -78,8 +78,8 @@ class DomAccess extends Base {
     /**
      * @param {Object} config
      */
-    constructor(config) {
-        super(config);
+    construct(config) {
+        super.construct(config);
 
         let me = this,
             node;