neo.mjs 6.21.0 → 6.22.0

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()
                 }

package/src/main/DomEvents.mjs

@@ -139,9 +139,10 @@ class DomEvents extends Base {
      * @param {Object} data
      */
     addDomListener(data) {
-        let me  = this,
-            i   = 0,
-            len = data.events.length,
+        let me       = this,
+            i        = 0,
+            len      = data.events.length,
+            failedId = null,
             event, id, targetNode;
 
         for (; i < len; i++) {
@@ -161,14 +162,22 @@ class DomEvents extends Base {
                 targetNode = document.querySelector(`[data-neo-id='${id}']`)
             }
 
-            targetNode.addEventListener(event.name, me[event.handler].bind(me));
+            if (targetNode) {
+                targetNode.addEventListener(event.name, me[event.handler].bind(me))
+            } else {
+                failedId = id
+            }
+        }
+
+        if (failedId && Neo.config.environment === 'development') {
+            console.warn('DomEvents:addDomListener() => target node not found:', failedId)
         }
 
         Neo.worker.Manager.sendMessage(data.origin, {
             action : 'reply',
             data,
             replyId: data.id,
-            success: true
+            success: !failedId
         })
     }
 

package/src/main/addon/AmCharts.mjs

@@ -90,13 +90,13 @@ class AmCharts extends Base {
 
             me.chartsToCreate = [];
 
-            setTimeout(() => {
+            me.timeout(1000).then(() => {
                 Object.entries(me.dataMap).forEach(([key, dataValue]) => {
                     me.updateData(dataValue)
                 });
 
                 me.dataMap = {}
-            }, 1000)
+            })
         }
     }
 

package/src/main/addon/MapboxGL.mjs

@@ -196,9 +196,9 @@ class MapboxGL extends Base {
     autoResize(data) {
         let map = this.maps[data.id];
 
-        map && setTimeout(() => {
+        map && this.timeout(100).then(() => {
             map.resize()
-        }, 100)
+        })
     }
 
     /**
@@ -337,7 +337,7 @@ class MapboxGL extends Base {
     onMapReallyLoaded(data, event) {
         let me = this;
 
-        setTimeout(() => {
+        me.timeout(100).then(() => {
             if (data.data) {
                 me.updateData({
                     data        : data.data,
@@ -347,7 +347,7 @@ class MapboxGL extends Base {
             } else if (me.dataMap[data.id]) {
                 me.updateData(me.dataMap[data.id])
             }
-        }, 100);
+        })
     }
 
     /**

package/src/manager/DomEvent.mjs

@@ -428,9 +428,9 @@ class DomEvent extends Base {
             });
 
             if (component.mounted) {
-                setTimeout(() => {
+                me.timeout(100).then(() => {
                     me.mountDomListeners(component)
-                }, 100)
+                })
             }
         } else {
             Logger.logError('Component.domListeners have to be an array', component)

package/src/manager/Focus.mjs

@@ -153,11 +153,11 @@ class Focus extends CoreBase {
 
         me.lastFocusOutDate = new Date();
 
-        setTimeout(() => {
+        me.timeout(me.maxFocusInOutGap).then(() => {
             if (me.lastFocusOutDate > me.lastFocusInDate) {
                 me.focusLeave(opts)
             }
-        }, me.maxFocusInOutGap);
+        })
     }
 
     /**

package/src/manager/Toast.mjs

@@ -159,13 +159,15 @@ class Toast extends Base {
     showToast(toast) {
         toast.render(true);
 
+        let me = this;
+
         // increase total of displayed toasts for a position
-        this.running[toast.position].unshift(toast.id);
+        me.running[toast.position].unshift(toast.id);
 
         // todo: we could use a mounted listener
-        setTimeout(() => {
-            this.updateItemsInPosition(toast.id)
-        }, 50)
+        me.timeout(50).then(() => {
+            me.updateItemsInPosition(toast.id)
+        })
     }
 
     /**

package/src/manager/rpc/Message.mjs

@@ -93,9 +93,9 @@ class Message extends Base {
             if (!me.endPointTimeouts.includes(url)) {
                 me.endPointTimeouts.push(url);
 
-                setTimeout(() => {
+                me.timeout(me.requestBuffer).then(() => {
                     me.resolveBufferTimeout(url)
-                }, me.requestBuffer)
+                })
             }
         })
     }