neo.mjs 6.18.1 → 6.18.2

package/src/component/Base.mjs

@@ -1491,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})
     }
 
     /**

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/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/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
     }
 }