neo.mjs 6.18.0 → 6.18.2

package/src/component/Base.mjs

@@ -13,8 +13,10 @@ import VDomUtil         from '../util/VDom.mjs';
 import VNodeUtil        from '../util/VNode.mjs';
 
 const
-    lengthRE = /^\d+\w+$/,
-    addUnits = value => value == null ? value : isNaN(value) ? value : `${value}px`;
+    addUnits          = value => value == null ? value : isNaN(value) ? value : `${value}px`,
+    closestController = Symbol.for('closestController'),
+    closestModel      = Symbol.for('closestModel'),
+    lengthRE          = /^\d+\w+$/;
 
 /**
  * @class Neo.component.Base
@@ -577,9 +579,11 @@ class Base extends CoreBase {
     afterSetDomListeners(value, oldValue) {
         let me = this;
 
-        me.getController()?.parseDomListeners(me);
+        if (value?.[0] || oldValue?.[0]) {
+            me.getController()?.parseDomListeners(me);
 
-        DomEventManager.updateDomListeners(me, value, oldValue)
+            DomEventManager.updateDomListeners(me, value, oldValue)
+        }
     }
 
     /**
@@ -1240,7 +1244,7 @@ class Base extends CoreBase {
      * Creates a KeyNavigation instance if needed.
      * @param {Object} value
      * @param {Object} oldValue
-     * @returns {Neo.util.KeyNavigation}
+     * @returns {Neo.util.KeyNavigation|null}
      * @protected
      */
     beforeSetKeys(value, oldValue) {
@@ -1487,12 +1491,7 @@ class Base extends CoreBase {
      * @param {String} id=this.id
      */
     focus(id=this.id) {
-        Neo.main.DomAccess.focus({
-            id,
-            windowId: this.id
-        }).catch(err => {
-            console.log('Error attempting to receive focus for component', err, this)
-        })
+        Neo.main.DomAccess.focus({id, windowId: this.windowId})
     }
 
     /**
@@ -1503,10 +1502,10 @@ class Base extends CoreBase {
         const result = [];
 
         if (this.floating) {
-            result.push('neo-floating');
+            result.push('neo-floating')
         }
 
-        return result;
+        return result
     }
 
     /**
@@ -1543,7 +1542,24 @@ class Base extends CoreBase {
      * @returns {Neo.controller.Component|null}
      */
     getController(ntype) {
-        return this.getConfigInstanceByNtype('controller', ntype)
+        let me = this,
+            controller;
+
+        if (!ntype) {
+            controller = me[closestController];
+
+            if (controller) {
+                return controller
+            }
+        }
+
+        controller = me.getConfigInstanceByNtype('controller', ntype);
+
+        if (!ntype) {
+            me[closestController] = controller;
+        }
+
+        return controller
     }
 
     /**
@@ -1553,7 +1569,7 @@ class Base extends CoreBase {
      * @returns {Promise<Neo.util.Rectangle>}
      */
     async getDomRect(id=this.id, appName=this.appName) {
-        const result = await Neo.main.DomAccess.getBoundingClientRect({appName, id, windowId: this.windowId});
+        let result = await Neo.main.DomAccess.getBoundingClientRect({appName, id, windowId: this.windowId});
 
         if (Array.isArray(result)) {
             return result.map(rect => Rectangle.clone(rect))
@@ -1572,7 +1588,24 @@ class Base extends CoreBase {
             return null
         }
 
-        return this.getConfigInstanceByNtype('model', ntype)
+        let me = this,
+            model;
+
+        if (!ntype) {
+            model = me[closestModel];
+
+            if (model) {
+                return model
+            }
+        }
+
+        model = me.getConfigInstanceByNtype('model', ntype);
+
+        if (!ntype) {
+            me[closestModel] = model
+        }
+
+        return model
     }
 
     /**

package/src/controller/Base.mjs

@@ -96,15 +96,15 @@ class Base extends CoreBase {
      *
      */
     async onConstructed() {
-        let me            = this,
-            currentHash   = HashHistory.first(),
-            {defaultHash} = me;
+        let me                      = this,
+            {defaultHash, windowId} = me,
+            currentHash             = HashHistory.first(windowId);
 
         // get outside the construction chain => a related cmp & vm has to be constructed too
         await me.timeout(1);
 
         if (currentHash) {
-            if (currentHash.windowId === me.windowId) {
+            if (currentHash.windowId === windowId) {
                 await me.onHashChange(currentHash, null)
             }
         } else {
@@ -113,7 +113,7 @@ class Base extends CoreBase {
              * We only want to set a default route, in case the HashHistory is empty and there is no initial
              * value that will get consumed.
              */
-            !Neo.config.hash && defaultHash && Neo.Main.setRoute({value: defaultHash})
+            !Neo.config.hash && defaultHash && Neo.Main.setRoute({value: defaultHash, windowId})
         }
     }
 

package/src/core/Observable.mjs

@@ -33,12 +33,28 @@ class Observable extends Base {
      * @returns {String|null} eventId null in case an object gets passed as the name (multiple ids)
      */
     addListener(name, opts, scope, eventId, data, order) {
-        let me         = this,
-            delay      = 0,
-            nameObject = typeof name === 'object',
-            once       = false,
+        let me            = this,
+            delay         = 0,
+            eventIdObject = typeof eventId === 'object',
+            nameObject    = typeof name    === 'object',
+            once          = false,
+            optsType      = typeof opts,
             listener, existing, eventConfig;
 
+        /*
+         * let us support the following format too:
+         *
+         * currentWorker.on('connected', () => {
+         *     Base.sendRemotes(className, remote)
+         * }, me, {once: true})
+         */
+        if (eventIdObject && optsType === 'function') {
+            eventId.fn = opts;
+            opts     = eventId;
+            optsType = 'object';
+            eventId  = null;
+        }
+
         if (nameObject) {
             if (name.hasOwnProperty('delay')) {
                 delay = name.delay;
@@ -62,16 +78,16 @@ class Observable extends Base {
                     me.addListener(key, {delay, fn: value, once, scope})
                 }
             })
-        } else if (typeof opts === 'object') {
+        } else if (optsType === 'object') {
             delay    = delay   || opts.delay;
             eventId  = eventId || opts.eventId;
             listener = opts.fn;
             once     = once    || opts.once;
             order    = order   || opts.order;
             scope    = scope   || opts.scope
-        } else if (typeof opts === 'function') {
+        } else if (optsType === 'function') {
             listener = opts
-        } else if (typeof opts === 'string') {
+        } else if (optsType === 'string') {
             listener = opts // VC hook, can get parsed after onConstructed in case the view uses the parent VC
         } else {
             throw new Error('Invalid addListener call: ' + name)

package/src/dialog/Base.mjs

@@ -136,17 +136,10 @@ class Base extends Panel {
         title_: null,
         /**
          * Set to `true` to have tabbing wrap within this Dialog.
-         *
          * Should be used with `modal`.
          * @member {Boolean} trapFocus_=false
          */
-        trapFocus_: false,
-        /**
-         * Set to `true` to have this Dialog centered in the viewport.
-         *
-         * @member {Boolean} centered_=false
-         */
-        centered_: false
+        trapFocus_: false
     }
 
     /**
@@ -154,22 +147,7 @@ class Base extends Panel {
      */
     construct(config) {
         super.construct(config);
-
-        let me      = this,
-            {style} = me;
-
-        me.createHeader();
-
-        if (!me.animateTargetId && !me.centered) {
-            Neo.assignDefaults(style, {
-                left     : '50%',
-                top      : '50%',
-                transform: 'translate(-50%, -50%)',
-                width    : '50%'
-            });
-
-            me.style = style
-        }
+        this.createHeader()
     }
 
     /**
@@ -204,17 +182,6 @@ class Base extends Panel {
         super.afterSetAppName(value, oldValue)
     }
 
-    /**
-     * Triggered after the centered config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetCentered(value, oldValue) {
-        NeoArray.toggle(this.vdom.cls, 'neo-centered', value);
-        this.update();
-    }
-
     /**
      * Triggered after the draggable config got changed
      * @param {Boolean} value
@@ -392,8 +359,12 @@ class Base extends Panel {
             {appName, id, style} = me,
             rect = await me.getDomRect(me.animateTargetId);
 
+        // rendered outside the visible area
         await me.render(true);
 
+        let [dialogRect, bodyRect] = await me.getDomRect([me.id, 'document.body']);
+        console.log(dialogRect, bodyRect);
+
         // Move to cover the animation target
         await Neo.applyDeltas(appName, {
             id,
@@ -415,11 +386,10 @@ class Base extends Panel {
                 add: ['animated-hiding-showing']
             },
             style: {
-                height   : style?.height    || null, // height will point to the animation origin, so we need a reset
-                left     : style?.left      || '50%',
-                top      : style?.top       || '50%',
-                transform: style?.transform || 'translate(-50%, -50%)',
-                width    : style?.width     || '50%'
+                height: style?.height || `${dialogRect.height}px`,
+                left  : style?.left   || `${Math.round(bodyRect.width  / 2 - dialogRect.width  / 2)}px`,
+                top   : style?.top    || `${Math.round(bodyRect.height / 2 - dialogRect.height / 2)}px`,
+                width : style?.width  || `${dialogRect.width}px`
             }
         });
 
@@ -699,8 +669,11 @@ class Base extends Panel {
         }
     }
 
+    /**
+     *
+     */
     onKeyDownEscape() {
-        this.hidden = true;
+        this.hidden = true
     }
 
     /**
@@ -710,7 +683,7 @@ class Base extends Panel {
         let me = this;
 
         if (animate) {
-            me.animateShow();
+            me.animateShow()
         } else {
             if (!me.rendered) {
                 me.render(true)
@@ -726,16 +699,21 @@ class Base extends Panel {
      * @param {String} id=this.id
      */
     syncModalMask(id=this.id) {
+        let {modal, windowId} = this;
+
         // This should sync the visibility and position of the modal mask element.
-        Neo.main.DomAccess.syncModalMask({id, modal: this.modal})
+        Neo.main.DomAccess.syncModalMask({id, modal, windowId})
     }
 
     /**
      *
      */
     syncTrapFocus() {
-        if (this.mounted) {
-            Neo.main.DomAccess.trapFocus({id: this.id, trap: this.trapFocus})
+        let me             = this,
+            {id, windowId} = me;
+
+        if (me.mounted) {
+            Neo.main.DomAccess.trapFocus({id, trap: me.trapFocus, windowId})
         }
     }
 }

package/src/form/field/Color.mjs

@@ -19,9 +19,9 @@ class Color extends ComboBox {
          */
         ntype: 'colorfield',
         /**
-         * @member {String[]} baseCls=['neo-colorfield','neo-selectfield','neo-pickerfield','neo-textfield']
+         * @member {String[]} baseCls=['neo-colorfield','neo-combobox','neo-pickerfield','neo-textfield']
          */
-        baseCls: ['neo-colorfield', 'neo-selectfield', 'neo-pickerfield', 'neo-textfield'],
+        baseCls: ['neo-colorfield', 'neo-combobox', 'neo-pickerfield', 'neo-textfield'],
         /**
          * The data.Model field which contains the color value
          * @member {String} colorField='name'
@@ -95,10 +95,10 @@ class Color extends ComboBox {
      * @returns {String}
      */
     getColor() {
-        let me              = this,
-            {record, value} = me;
+        let me                  = this,
+            {inputValue, value} = me;
 
-        return record ? me.colorFormatter(me, record) : me.forceSelection ? null : value
+        return value ? me.colorFormatter(me, value) : me.forceSelection ? null : inputValue
     }
 
     /**

package/src/main/addon/IntersectionObserver.mjs

@@ -77,6 +77,25 @@ class NeoIntersectionObserver extends Base {
         })
     }
 
+    /**
+     * @param {IntersectionObserverEntry[]} entries
+     * @param {IntersectionObserver} observer
+     */
+    isVisible(entries, observer) {
+        let me = this,
+            data, path, target;
+
+        entries.forEach(entry => {
+            target = entry.target;
+            data   = target.dataset && {...target.dataset} || null;
+            path   = DomEvents.getPathFromElement(entry.target).map(e => DomEvents.getTargetData(e));
+
+            if (entry.isIntersecting) {
+                me.sendMessage({data, id: observer.rootId, isIntersecting: true, path, targetId: target.id})
+            }
+        })
+    }
+
     /**
      * Add more or new items into an existing observer instance
      * @param {Object} data
@@ -128,7 +147,7 @@ class NeoIntersectionObserver extends Base {
      */
     register(data) {
         let me            = this,
-            cache         = me.cache,
+            {cache}       = me,
             {id, observe} = data,
             observer;
 

package/src/model/Component.mjs

@@ -153,12 +153,14 @@ class Component extends Base {
      * @protected
      */
     beforeSetStores(value, oldValue) {
-        let controller = this.component.getController();
+        if (value) {
+            let controller = this.component.getController();
 
-        value && Object.entries(value).forEach(([key, storeValue]) => {
-            controller?.parseConfig(storeValue);
-            value[key] = ClassSystemUtil.beforeSetInstance(storeValue)
-        });
+            Object.entries(value).forEach(([key, storeValue]) => {
+                controller?.parseConfig(storeValue);
+                value[key] = ClassSystemUtil.beforeSetInstance(storeValue)
+            })
+        }
 
         return value
     }
@@ -445,13 +447,13 @@ class Component extends Base {
      * @returns {Neo.model.Component|null}
      */
     getParent() {
-        let me = this;
+        let {parent} = this;
 
-        if (me.parent) {
-            return me.parent
+        if (parent) {
+            return parent
         }
 
-        return me.component.parent?.getModel() || null
+        return this.component.parent?.getModel() || null
     }
 
     /**

package/src/selection/DateSelectorModel.mjs

@@ -138,7 +138,7 @@ class DateSelectorModel extends Model {
         super.register(component);
 
         let scope  = {scope: this.id},
-            {view} = this.view;
+            {view} = this;
 
         view.keys?._keys.push(
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,...scope},
@@ -153,7 +153,7 @@ class DateSelectorModel extends Model {
      */
     unregister() {
         let scope  = {scope: this.id},
-            {view} = this.view;
+            {view} = this;
 
         view.keys?.removeKeys([
             {fn: 'onKeyDownDown'  ,key: 'Down'  ,...scope},

package/src/util/HashHistory.mjs

@@ -8,7 +8,6 @@ import Observable from '../core/Observable.mjs';
  */
 class HashHistory extends Base {
     /**
-     * True automatically applies the core.Observable mixin
      * @member {Boolean} observable=true
      * @static
      */
@@ -16,7 +15,7 @@ class HashHistory extends Base {
 
     static config = {
         /**
-         * @member {String} className='Neo.util.ClassSystem'
+         * @member {String} className='Neo.util.HashHistory'
          * @protected
          */
         className: 'Neo.util.HashHistory',
@@ -31,24 +30,54 @@ class HashHistory extends Base {
          */
         maxItems: 50,
         /**
-         * @member {Array} stack=[]
+         * Storing one stack per windowId
+         * @member {Object} stacks={}
          * @protected
          */
-        stack: []
+        stacks: {}
     }
 
     /**
+     * Convenience shortcut
+     * @param {Number} [windowId]
      * @returns {Object}
      */
-    first() {
-        return this.stack[0] || null
+    first(windowId) {
+        return this.getAt(0, windowId)
     }
 
     /**
+     * @param {Number} index
+     * @param {Number} [windowId]
      * @returns {Number}
      */
-    getCount() {
-        return this.stack.length
+    getAt(index, windowId) {
+        return this.getStack(windowId)[index]
+    }
+
+    /**
+     * @param {Number} [windowId]
+     * @returns {Number}
+     */
+    getCount(windowId) {
+        return this.getStack(windowId).length
+    }
+
+    /**
+     * @param {Number} [windowId]
+     * @returns {Number}
+     */
+    getStack(windowId) {
+        let me       = this,
+            {stacks} = me,
+            stackId  = windowId || Object.keys(stacks)[0],
+            stack    = stacks[stackId];
+
+        if (!stack) {
+            stacks[stackId] = stack = []
+        }
+
+        return stack
     }
 
     /**
@@ -59,10 +88,12 @@ class HashHistory extends Base {
      * @param {Number} data.windowId
      */
     push(data) {
-        let me      = this,
-            {stack} = me;
+        let me         = this,
+            {windowId} = data,
+            stack      = me.getStack(windowId);
 
         if (stack[0]?.hashString !== data.hashString) {
+            delete data[windowId];
             stack.unshift(data);
 
             if (stack.length > me.maxItems) {
@@ -74,10 +105,12 @@ class HashHistory extends Base {
     }
 
     /**
+     * Convenience shortcut
+     * @param {Number} [windowId]
      * @returns {Object}
      */
-    second() {
-        return this.stack[1] || null
+    second(windowId) {
+        return this.getAt(0, windowId)
     }
 }
 

package/src/worker/Base.mjs

@@ -252,9 +252,14 @@ class Base extends CoreBase {
 
         return new Promise(function(resolve, reject) {
             let message = me.sendMessage(dest, opts, transfer),
-                msgId   = message.id;
+                msgId   = message?.id;
 
-            me.promises[msgId] = {reject, resolve}
+            if (!msgId) {
+                // a window got closed and the message port no longer exist (SharedWorkers)
+                reject()
+            } else {
+                me.promises[msgId] = {reject, resolve}
+            }
         })
     }
 
@@ -282,22 +287,24 @@ class Base extends CoreBase {
                 port = me.getPort({id: opts.port}).port
             } else if (opts.windowId) {
                 portObject = me.getPort({windowId: opts.windowId});
-                port       = portObject.port;
+                port       = portObject?.port;
 
-                opts.port = portObject.id
+                opts.port = portObject?.id
             }  else if (opts.appName) {
                 portObject = me.getPort({appName: opts.appName});
-                port       = portObject.port;
+                port       = portObject?.port;
 
-                opts.port = portObject.id
+                opts.port = portObject?.id
             } else {
                 port = me.ports[0].port
             }
         }
 
-        message = new Message(opts);
+        if (port) {
+            message = new Message(opts);
+            port.postMessage(message, transfer);
+        }
 
-        port.postMessage(message, transfer);
         return message
     }
 }