neo.mjs 6.20.1 → 6.22.0

package/src/component/Helix.mjs

@@ -548,9 +548,9 @@ class Helix extends Component {
         if (!me.mounted) {
             const listenerId = me.on('mounted', () => {
                 me.un('mounted', listenerId);
-                setTimeout(() => {
-                    me.createItems(startIndex);
-                }, 100)
+                me.timeout(100).then(() => {
+                    me.createItems(startIndex)
+                })
             })
         } else {
             for (; i < len; i++) {
@@ -601,9 +601,9 @@ class Helix extends Component {
                 me[itemsMounted] = true;
                 me.fire('itemsMounted');
 
-                setTimeout(() => {
+                me.timeout(200).then(() => {
                     me[lockWheel] = false
-                }, 200)
+                })
             })
         }
     }
@@ -642,9 +642,9 @@ class Helix extends Component {
             me.clonedItems = [];
 
             Neo.applyDeltas(me.appName, deltas).then(data => {
-                setTimeout(() => {
+                me.timeout(650).then(() => {
                     Neo.applyDeltas(me.appName, removeDeltas)
-                }, 650)
+                })
             })
         }
     }
@@ -701,7 +701,7 @@ class Helix extends Component {
             }).then(data => {
                 me.clonedItems.push(itemVdom);
 
-                setTimeout(() => {
+                me.timeout(50).then(() => {
                     Neo.applyDeltas(appName, {
                         id   : itemVdom.id,
                         style: {
@@ -709,7 +709,7 @@ class Helix extends Component {
                             transform: me.getCloneTransform()
                         }
                     })
-                }, 50)
+                })
             })
         }
     }
@@ -756,7 +756,7 @@ class Helix extends Component {
     getOffsetValues(delay=100) {
         let me = this;
 
-        setTimeout(() => {
+        me.timeout(delay).then(() => {
             Neo.currentWorker.promiseMessage('main', {
                 action    : 'readDom',
                 appName   : me.appName,
@@ -764,9 +764,9 @@ class Helix extends Component {
                 vnodeId   : me.id
             }).then(data => {
                 me.offsetHeight = data.attributes.offsetHeight;
-                me.offsetWidth  = data.attributes.offsetWidth;
+                me.offsetWidth  = data.attributes.offsetWidth
             })
-        }, delay)
+        })
     }
 
     /**
@@ -876,6 +876,9 @@ class Helix extends Component {
      * @param {Object} data
      */
     onTouchMove(data) {
+        data.deltaX *= 1.5;
+        data.deltaY *= 3;
+
         this.onMouseWheel(data)
     }
 

package/src/component/Toast.mjs

@@ -124,7 +124,7 @@ class Toast extends Base {
      * Timeout in ms after which the toast is removed
      * @member {Number} timeout=3000
      */
-    timeout = 3000
+    timeout = 3000 // todo: conflicting class field name => timeout()
 
     /**
      * @param {Object} config

package/src/component/wrapper/AmChart.mjs

@@ -114,9 +114,9 @@ class AmChart extends Component {
                 opts.dataPath = me.dataPath;
             }
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.addon.AmCharts.create(opts).then(me.onChartMounted)
-            }, 50)
+            })
         }
     }
 

package/src/component/wrapper/CesiumJS.mjs

@@ -50,11 +50,11 @@ class CesiumJS extends Component {
         if (value) {
             let opts = {appName, createOsmBuildings, id, windowId};
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.addon.CesiumJS.create(opts).then(() => {
                     me.onComponentMounted()
                 })
-            }, 50)
+            })
         }
     }
 

package/src/component/wrapper/GoogleMaps.mjs

@@ -193,12 +193,12 @@ class GoogleMaps extends Base {
                 zoomControl      : me.zoomControl
             };
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.addon.GoogleMaps.create(opts).then(() => {
                     me.mapCreated = true;
                     me.onComponentMounted()
                 })
-            }, 50)
+            })
         }
     }
 

package/src/component/wrapper/MonacoEditor.mjs

@@ -159,14 +159,14 @@ class MonacoEditor extends Base {
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
 
-        value && setTimeout(() => {
-            let me = this;
+        let me = this;
 
+        value && me.timeout(150).then(() => {
             Neo.main.addon.MonacoEditor.createInstance(me.getInitialOptions()).then(() => {
                 // use this custom method as needed inside your class extensions
                 me.onEditorMounted?.()
             })
-        }, 150)
+        })
     }
 
     /**

package/src/core/Observable.mjs

@@ -148,9 +148,9 @@ class Observable extends Base {
      * @param {Number} delay
      */
     delayedCallback(cb, args, delay) {
-        setTimeout(() => {
+        this.timeout(delay).then(() => {
             cb.fn.apply(cb.scope, args)
-        }, delay)
+        })
     }
 
     /**

package/src/data/Store.mjs

@@ -398,9 +398,9 @@ class Store extends Base {
         }
 
         if (me.autoLoad) {
-            setTimeout(() => { // todo
+            me.timeout(100).then(() => { // todo
                 me.load()
-            }, 100)
+            })
         }
     }
 

package/src/dialog/Base.mjs

@@ -142,6 +142,13 @@ class Base extends Panel {
         trapFocus_: false
     }
 
+    /**
+     * @member {Neo.component.Base|null} animateTarget=null
+     */
+    get animateTarget() {
+        return Neo.getComponent(this.animateTargetId)
+    }
+
     /**
      * @param {Object} config
      */
@@ -225,12 +232,21 @@ class Base extends Panel {
      * @param {Boolean} oldValue
      * @protected
      */
-    afterSetMaximized(value, oldValue) {
-        let me    = this,
-            {cls} = me.vdom; // todo: using wrapperCls
+    async afterSetMaximized(value, oldValue) {
+        let me        = this,
+            firstCall = oldValue === undefined,
+            {cls}     = me.vdom;
 
+        !firstCall && NeoArray.add(cls, 'animated-hiding-showing');
         NeoArray.toggle(cls, 'neo-maximized', value);
-        me.update()
+        me.update();
+
+        if (!firstCall) {
+            await(me.timeout(250));
+
+            NeoArray.remove(cls, 'animated-hiding-showing');
+            me.update()
+        }
     }
 
     /**
@@ -293,8 +309,10 @@ class Base extends Panel {
      * @protected
      */
     afterSetTitle(value, oldValue) {
-        if (this.headerToolbar) {
-            this.headerToolbar.title = value
+        let {headerToolbar} = this;
+
+        if (headerToolbar) {
+            headerToolbar.title = value
         }
     }
 
@@ -312,9 +330,15 @@ class Base extends Panel {
      *
      */
     async animateHide() {
-        let me            = this,
-            {appName, id} = me,
-            rects         = await me.getDomRect([id, me.animateTargetId]);
+        let me                  = this,
+            {animateTarget, id} = me,
+            appName, rects;
+
+        // Assuming that we want to show the dialog inside the same browser window as the animation target
+        me.windowId = animateTarget.windowId;
+        me.appName  = appName = animateTarget.appName;
+
+        rects = await me.getDomRect([id, me.animateTargetId])
 
         await Neo.applyDeltas(appName, {
             id,
@@ -355,9 +379,15 @@ class Base extends Panel {
      *
      */
     async animateShow() {
-        let me   = this,
-            {appName, id, style} = me,
-            rect = await me.getDomRect(me.animateTargetId);
+        let me                         = this,
+            {animateTarget, id, style} = me,
+            appName, rect;
+
+        // Assuming that we want to show the dialog inside the same browser window as the animation target
+        me.windowId = animateTarget.windowId;
+        me.appName  = appName = animateTarget.appName;
+
+        rect = await me.getDomRect(me.animateTargetId);
 
         // rendered outside the visible area
         await me.render(true);
@@ -599,13 +629,13 @@ class Base extends Panel {
 
                     style.transitionProperty = 'none';
 
-                    setTimeout(() => {
+                    me.timeout(50).then(() => {
                         style = me.style;
 
                         style.transitionProperty = initialTransitionProperty;
 
                         me.style = style
-                    }, 50)
+                    })
                 }
 
                 me.style = style;

package/src/draggable/DragZone.mjs

@@ -235,13 +235,13 @@ class DragZone extends Base {
         let me = this,
             id = me.dragProxy.id;
 
-        setTimeout(() => {
+        me.timeout(me.moveInMainThread ? 0 : 30).then(() => {
             Neo.currentWorker.promiseMessage('main', {
                 action : 'updateDom',
                 appName: me.appName,
                 deltas : [{action: 'removeNode', id: id}]
             });
-        }, me.moveInMainThread ? 0 : 30);
+        });
 
         me.dragProxy.destroy()
     }
@@ -425,9 +425,9 @@ class DragZone extends Base {
      *
      */
     resetData() {
-        setTimeout(() => {
+        this.timeout(50).then(() => {
             this.data = null
-        }, 30)
+        })
     }
 
     /**

package/src/draggable/list/DragZone.mjs

@@ -98,16 +98,16 @@ class DragZone extends BaseDragZone {
             proxy.cls = cls;
 
             // ensure to get into the next animation frame
-            setTimeout(() => {
+            me.timeout(30).then(() => {
                 wrapperStyle.left = `${rect.left}px`;
                 wrapperStyle.top  = `${rect.top}px`;
 
                 proxy.wrapperStyle = wrapperStyle;
 
-                setTimeout(() => {
+                me.timeout(300).then(() => {
                     me.dragEnd()
-                }, 300)
-            }, 30)
+                })
+            })
         }
     }
 

package/src/draggable/tab/header/toolbar/SortZone.mjs

@@ -40,14 +40,14 @@ class SortZone extends BaseSortZone {
     onDragEnd(data) {
         super.onDragEnd(data);
 
-        setTimeout(() => {
+        this.timeout(300).then(() => {
             let me      = this,
                 {owner} = me,
                 cls     = owner.cls || [];
 
             NeoArray.remove(cls, 'neo-no-animation');
             owner.cls = cls
-        }, 300)
+        })
     }
 
     /**

package/src/draggable/toolbar/DragZone.mjs

@@ -72,16 +72,16 @@ class DragZone extends BaseDragZone {
             proxy.cls = cls;
 
             // ensure to get into the next animation frame
-            setTimeout(() => {
+            me.timeout(30).then(() => {
                 wrapperStyle.left = `${rect.left}px`;
                 wrapperStyle.top  = `${rect.top}px`;
 
                 proxy.wrapperStyle = wrapperStyle;
 
-                setTimeout(() => {
+                me.timeout(100).then(() => {
                     me.dragEnd()
-                }, 100)
-            }, 30)
+                })
+            })
         }
     }
 

package/src/draggable/toolbar/SortZone.mjs

@@ -234,11 +234,11 @@ class SortZone extends DragZone {
                 });
 
                 // we need to add a short (1 frame) delay to ensure the item has switched to an absolute position
-                setTimeout(() => {
+                me.timeout(5).then(() => {
                     itemStyle = button.style || {};
                     itemStyle.visibility = 'hidden';
-                    button.style = itemStyle;
-                }, 5)
+                    button.style = itemStyle
+                })
             })
         }
     }

package/src/form/field/ComboBox.mjs

@@ -401,11 +401,12 @@ class ComboBox extends Picker {
                 selectionModel.select(record);
                 selectionModel.suspendEvents = false
             }
-            setTimeout(() => {
+
+            me.timeout(100).then(() => {
                 const index = store.indexOf(record);
                 list._focusIndex = -1; // silent update to ensure afterSetFocusIndex() always gets called
                 list.focusIndex  = index > -1 ? index : 0
-            }, 100)
+            })
         }
         // Filtered down to nothing - hide picker if it has been created.
         else {

package/src/form/field/FileUpload.mjs

@@ -382,7 +382,7 @@ class FileUpload extends Base {
         me.file = me.document = null;
 
         // We have to wait for the DOM to have changed, and the input field to be visible
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await me.timeout(100);
         me.focus(me.getInputEl().id);
     }
 
@@ -445,7 +445,7 @@ class FileUpload extends Base {
         me.state = 'starting';
 
         // We have to wait for the DOM to have changed, and the action button to be visible
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await me.timeout(100);
         me.focus(me.vdom.cn[2].id);
 
         me.vdom.cn[1].cn[0].innerHTML = StringUtil.escapeHtml(file.name);
@@ -641,7 +641,7 @@ class FileUpload extends Base {
 
                 switch (status) {
                     case 'scanning':
-                        setTimeout(() => me.checkDocumentStatus(), me.statusScanInterval);
+                        me.timeout(me.statusScanInterval).then(() => {me.checkDocumentStatus()});
                         break;
                     case 'deleted':
                         me.error = `${me.documentText} ${me.documentId} ${isNoLongerAvailable}`;

package/src/form/field/Text.mjs

@@ -571,9 +571,9 @@ class Text extends Base {
 
             me.updateInputWidth();
 
-            !isEmpty && setTimeout(() => {
+            !isEmpty && me.timeout(20).then(() => {
                 me.updateCenterBorderElWidth(false)
-            }, 20)
+            })
         } else {
             // changes from e.g. left to top
             me.updateInputWidth()

package/src/form/field/TextArea.mjs

@@ -168,13 +168,13 @@ class TextArea extends Text {
         super.afterSetValue(value, oldValue);
 
         if (me.autoGrow && me.mounted && me.readOnly) {
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.DomAccess.monitorAutoGrowHandler({
                     appName : me.appName,
                     id      : inputEl.id,
                     windowId: me.windowId
                 })
-            }, 50)
+            })
         }
     }
 

package/src/grid/Container.mjs

@@ -304,9 +304,9 @@ class Container extends BaseContainer {
         } else {
             listenerId = me.on('rendered', () => {
                 me.un('rendered', listenerId);
-                setTimeout(() => {
+                me.timeout(50).then(() => {
                     me.createViewData(data)
-                }, 50)
+                })
             })
         }
     }

package/src/layout/Cube.mjs

@@ -417,12 +417,10 @@ class Cube extends Card {
         let {container}     = this,
             {height, width} = await container.getDomRect(container.id);
 
-        console.log({height, width});
-
         this.set({
             sideX: width,
             sideY: height,
-            sideZ: Math.min(height, width)
+            sideZ: width
         })
     }
 }

package/src/list/plugin/Animate.mjs

@@ -166,7 +166,7 @@ class Animate extends Base {
             x      = column * (margin + owner.itemWidth)  + margin,
             y      = row    * (margin + owner.itemHeight) + margin;
 
-        return {x, y};
+        return {x, y}
     }
 
     /**
@@ -177,13 +177,13 @@ class Animate extends Base {
      */
     getItemIndex(obj, map, intercept) {
         if (!intercept) {
-            return obj.index;
+            return obj.index
         }
 
         let owner = this.owner,
             key   = owner.getKeyProperty();
 
-        return map.indexOf(owner.getItemId(obj.record[key]));
+        return map.indexOf(owner.getItemId(obj.record[key]))
     }
 
     /**
@@ -201,8 +201,8 @@ class Animate extends Base {
             });
 
             // if the store got loaded before this plugin is ready, create the items now
-            owner.store.getCount() > 0 && owner.createItems();
-        });
+            owner.store.getCount() > 0 && owner.createItems()
+        })
     }
 
     /**
@@ -241,15 +241,15 @@ class Animate extends Base {
                     item.reAdded = true;
                 }
 
-                addedItems.push(item);
+                addedItems.push(item)
             } else {
-                movedItems.push(item);
+                movedItems.push(item)
             }
         });
 
         data.oldItems.forEach((record, index) => {
             if (!data.items.includes(record)) {
-                removedItems.push({index, record});
+                removedItems.push({index, record})
             }
         });
 
@@ -263,7 +263,7 @@ class Animate extends Base {
                     vdom.cn.splice(index, 0, me.createItem(me, obj.record, obj.index));
 
                     obj.item = vdom.cn[index];
-                    obj.item.style.opacity = 0;
+                    obj.item.style.opacity = 0
                 }
             }
         });
@@ -271,7 +271,7 @@ class Animate extends Base {
         hasAddedItems && owner.update();
 
         // ensure to get into the next animation frame
-        setTimeout(() => {
+        me.timeout(50).then(() => {
             // 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);
@@ -281,7 +281,7 @@ class Animate extends Base {
 
                 if (index > -1) {
                     // we can change the opacity for re-added items too => the vdom engine will ignore this
-                    vdom.cn[index].style.opacity = 1;
+                    vdom.cn[index].style.opacity = 1
                 }
             });
 
@@ -294,7 +294,7 @@ class Animate extends Base {
                     Object.assign(vdom.cn[index].style, {
                         opacity  : 1,
                         transform: `translate(${position.x}px, ${position.y}px)`
-                    });
+                    })
                 }
             });
 
@@ -303,13 +303,13 @@ class Animate extends Base {
 
                 if (index > -1) {
                     obj.item = vdom.cn[index];
-                    obj.item.style.opacity = 0;
+                    obj.item.style.opacity = 0
                 }
             });
 
             owner.update();
-            me.triggerTransitionCallback();
-        }, 50);
+            me.triggerTransitionCallback()
+        })
     }
 
     /**
@@ -351,7 +351,7 @@ class Animate extends Base {
                 newVdomCn.push(vdom.cn[fromIndex]);
 
                 if (fromIndex !== index) {
-                    hasChange = true;
+                    hasChange = true
                 }
             });
 
@@ -360,9 +360,9 @@ class Animate extends Base {
                 owner.update();
 
                 // we need to ensure to get this call into the next animation frame
-                setTimeout(() => {
-                    owner.createItems();
-                }, 50);
+                me.timeout(50).then(() => {
+                    owner.createItems()
+                })
             }
         }
     }
@@ -391,10 +391,10 @@ class Animate extends Base {
                 item      = vdom.cn[fromIndex];
                 position  = me.getItemPosition(record, index);
 
-                item.style.transform = `translate(${position.x}px, ${position.y}px)`;
+                item.style.transform = `translate(${position.x}px, ${position.y}px)`
             });
 
-            owner.update();
+            owner.update()
         }
     }
 
@@ -407,8 +407,8 @@ class Animate extends Base {
         me.transitionTimeoutId = setTimeout(() => {
             me.transitionTimeoutId = null;
 
-            me.owner.createItems();
-        }, me.transitionDuration);
+            me.owner.createItems()
+        }, me.transitionDuration)
     }
 
     /**

package/src/main/DomAccess.mjs

@@ -911,7 +911,7 @@ class DomAccess extends Base {
 
                     node.scrollIntoView(opts);
 
-                    !hasListener && setTimeout(() => resolve(), 500)
+                    !hasListener && this.timeout(500).then(() => {resolve()})
                 } else {
                     resolve()
                 }