neo.mjs 6.3.10 → 6.4.0

package/src/main/DomAccess.mjs

@@ -1,6 +1,24 @@
 import Base         from '../core/Base.mjs';
 import DeltaUpdates from './mixin/DeltaUpdates.mjs';
 import Observable   from '../core/Observable.mjs';
+import Rectangle from '../util/Rectangle.mjs';
+
+const
+    lengthRE      = /^\d+\w+$/,
+    fontSizeProps = [
+        'font-size',
+        'font-size-adjust',
+        'font-style',
+        'font-weight',
+        'font-family',
+        'font-kerning',
+        'font-stretch',
+        'line-height',
+        'text-transform',
+        'text-decoration',
+        'letter-spacing',
+        'word-break'
+    ];
 
 /**
  * @class Neo.main.DomAccess
@@ -44,12 +62,14 @@ class DomAccess extends Base {
         remote: {
             app: [
                 'addScript',
+                'align',
                 'applyBodyCls',
                 'blur',
                 'execCommand',
                 'focus',
                 'getAttributes',
                 'getBoundingClientRect',
+                'measure',
                 'scrollBy',
                 'scrollIntoView',
                 'scrollTo',
@@ -82,10 +102,13 @@ class DomAccess extends Base {
     construct(config) {
         super.construct(config);
 
-        let me = this,
-            node;
+        const
+            me              = this,
+            syncAligns      = me.syncAligns.bind(me);
 
         if (Neo.config.renderCountDeltas) {
+            let node;
+
             setInterval(() => {
                 node = document.getElementById('neo-delta-updates');
 
@@ -94,8 +117,58 @@ class DomAccess extends Base {
                 }
 
                 me.countDeltasPer250ms = 0;
-            }, 250);
+            }, 250)
         }
+
+        // Set up our aligning callback which is called when things change which may
+        // mean that alignments need to be updated.
+        me.syncAligns = () => requestAnimationFrame(syncAligns);
+    }
+
+    /**
+     * @param {Object} alignSpec
+     */
+    addAligned(alignSpec) {
+        const
+            me                     = this,
+            { id }                 = alignSpec,
+            aligns                 = me._aligns || (me._aligns = new Map()),
+            resizeObserver         = me._alignResizeObserver || (me._alignResizeObserver = new ResizeObserver(me.syncAligns)),
+            { constrainToElement } = alignSpec;
+
+        // Set up listeners which monitor for changes
+        if (!aligns.has(id)) {
+            // Realign when target's layout-controlling element changes size
+            resizeObserver.observe(alignSpec.offsetParent);
+
+            // Realign when align to target changes size
+            resizeObserver.observe(alignSpec.targetElement);
+
+            // Realign when constraining element changes size
+            if (constrainToElement) {
+                resizeObserver.observe(constrainToElement);
+            }
+        }
+
+        if (!me.hasDocumentScrollListener) {
+            document.addEventListener('scroll', me.syncAligns, {
+                capture: true,
+                passive: true
+            });
+
+            me.hasDocumentScrollListener = true;
+        }
+
+        if (!me.documentMutationObserver) {
+            me.documentMutationObserver = new MutationObserver(me.onDocumentMutation.bind(me));
+
+            me.documentMutationObserver.observe(document.body, {
+                childList: true,
+                subtree  : true
+            })
+        }
+
+        aligns.set(id, alignSpec)
     }
 
     /**
@@ -116,6 +189,58 @@ class DomAccess extends Base {
         document.head.appendChild(script);
     }
 
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     */
+    async align(data) {
+        const
+            me              = this,
+            { constrainTo } = data,
+            subject         = data.subject = me.getElement(data.id),
+            { style }       = subject,
+            align           = {...data},
+            lastAlign       = me._aligns?.get(data.id);
+
+        if (lastAlign) {
+            subject.classList.remove(`neo-aligned-${lastAlign.result.position}`);
+        }
+
+        // Release any constrainTo or matchSize sizing which may have been imposed
+        // by a previous align call.
+        me.resetDimensions(align);
+
+        // The Rectangle's align spec target and constrainTo must be Rectangles
+        align.target = me.getBoundingClientRect({ id : data.targetElement = me.getElementOrBody(data.target) });
+        data.offsetParent = data.targetElement.offsetParent
+        if (constrainTo) {
+            align.constrainTo = me.getBoundingClientRect({ id : data.constrainToElement = me.getElementOrBody(constrainTo) });
+        }
+
+        // Get an aligned clone of myRect aligned according to the align object
+        const
+            myRect = me.getBoundingClientRect(data),
+            result = data.result = myRect.alignTo(align);
+
+        Object.assign(style, {
+            top       : 0,
+            left      : 0,
+            transform : `translate(${result.x}px,${result.y}px)`
+        });
+        if (result.width !== myRect.width) {
+            style.width = `${result.width}px`;
+        }
+        if (result.height !== myRect.height) {
+            style.height = `${result.height}px`;
+        }
+
+        // Place box shadow at correct edge
+        subject.classList.add(`neo-aligned-${result.position}`);
+
+        // Register an alignment to be kept in sync
+        me.addAligned(data);
+    }
+
     /**
      * @param {Object} data
      * @param {String[]} data.cls
@@ -170,7 +295,7 @@ class DomAccess extends Base {
      * @param {Object} data
      * @param {Array|String} data.id either an id or an array of ids
      * @param {Array|String} data.attributes either an attribute or an array of attributes
-     * @returns {Array|Object} In case id is an array, an array of atrrbute objects is returned, otherwise an object
+     * @returns {Array|Object} In case id is an array, an array of attribute objects is returned, otherwise an object
      */
     getAttributes(data) {
         let returnData;
@@ -220,54 +345,73 @@ class DomAccess extends Base {
             });
         } else {
             let node = this.getElementOrBody(data.id),
-                rect = {};
+                rect = {}, style, minWidth, minHeight;
 
             returnData = {};
 
             if (node) {
-                rect = node.getBoundingClientRect();
+                rect      = node.getBoundingClientRect();
+                style     = node.ownerDocument.defaultView.getComputedStyle(node);
+                minWidth  = style.getPropertyValue('min-width'),
+                minHeight = style.getPropertyValue('min-height');
 
                 // DomRect does not support spreading => {...DomRect} => {}
-                Object.assign(returnData, {
-                    bottom: rect.bottom,
-                    height: rect.height,
-                    left  : rect.left,
-                    right : rect.right,
-                    top   : rect.top,
-                    width : rect.width,
-                    x     : rect.x,
-                    y     : rect.y
-                });
+                returnData = Rectangle.clone(rect);
+
+                // Measure minWidth/minHeight in other units like em/rem etc
+                // Note that 0px is what the DOM reports if no minWidth is specified
+                // so we do not report a minimum in these cases.
+                if (lengthRE.test(minWidth) && minWidth !== '0px') {
+                    returnData.minWidth = this.measure({ value : minWidth, id : node});
+                }
+                if (lengthRE.test(minHeight) && minHeight !== '0px') {
+                    returnData.minHeight = this.measure({ value : minHeight, id : node });
+                }
             }
         }
 
         return returnData;
     }
 
+    onDocumentMutation(mutations) {
+        const me = this;
+
+        // If the mutations are purely align subjects being added or removed, take no action.
+        if (!mutations.every(({ type, addedNodes, removedNodes }) => {
+            if (type === 'childList') {
+                const nodes = [...Array.from(addedNodes), ...Array.from(removedNodes)];
+
+                return nodes.every(a => me.isAlignSubject(a))
+            }
+        })) {
+            me.syncAligns();
+        }
+    }
+
     /**
-     * @param {String} nodeId
+     * @param {String|HTMLElement} nodeId
      * @returns {HTMLElement}
      * @protected
      */
     getElement(nodeId) {
-        if (Neo.config.useDomIds) {
-            return document.getElementById(nodeId);
-        }
-
-        return document.querySelector(`[data-neo-id='${nodeId}']`);
+        return nodeId.nodeType ? nodeId : Neo.config.useDomIds ?  document.getElementById(nodeId) : document.querySelector(`[data-neo-id='${nodeId}']`);
     }
 
     /**
-     * @param {String} [nodeId='document.body']
+     * @param {String|HTMLElement} [nodeId='document.body']
      * @returns {HTMLElement}
      * @protected
      */
     getElementOrBody(nodeId='document.body') {
-        if (nodeId === 'body' || nodeId === 'document.body') {
-            return document.body;
-        }
+        return nodeId.nodeType ? nodeId : (nodeId === 'body' || nodeId === 'document.body') ? document.body : this.getElement(nodeId);
+    }
 
-        return this.getElement(nodeId);
+    /**
+     * @param {HTMLElement} el
+     * @returns {Boolean}
+     */
+    isAlignSubject(el) {
+        return [...this._aligns?.values()].some(align => align.subject === el);
     }
 
     /**
@@ -313,7 +457,53 @@ class DomAccess extends Base {
             });
 
             document.head.appendChild(link);
-        });
+        })
+    }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.id
+     * @param {Number|String} data.value
+     * @returns {Number|String}
+     */
+    measure({ value, id }) {
+        const node = id.nodeType === 1 ? id : this.getElement(id);
+
+        if (value.endsWith('%')) {
+            const fraction = parseFloat(value) / 100;
+
+            return (node.offsetParent?.getBoundingClientRect().height || 0) * fraction;
+        }
+        // If it's any other CSS unit than px, it needs to be measured using the DOM
+        else if (isNaN(value) && !value.endsWith('px')) {
+            const elStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+
+            let d = this._measuringDiv;
+
+            if (!d) {
+                d = this._measuringDiv = document.createElement('div');
+                d.style = 'position:fixed;top:-10000px;left:-10000px';
+            }
+            // In case a DOM update cleared it out
+            document.body.appendChild(d);
+
+            // Set all the font-size, font-weight etc style properties so that
+            // em/ex/rem etc units will match
+            fontSizeProps.forEach(prop => {
+                d.style[prop] = elStyle[prop];
+            });
+            d.className = node.className;
+            d.style.width = value;
+
+            // Read back the resulting computed pixel width
+            value = elStyle.width;
+
+        }
+        // If it's a number, or ends with px, use the numeric value.
+        else {
+            value = parseFloat(value);
+        }
+        return value;
     }
 
     /**
@@ -419,6 +609,24 @@ class DomAccess extends Base {
         }
     }
 
+    /**
+     * Resets any DOM sizing configs to the last externally configured value.
+     *
+     * This is used during aligning to release any constraints applied by a previous alignment.
+     * @protected
+     */
+    async resetDimensions(align) {
+        const { style } = this.getElement(align.id);
+
+        style.flex      = align.configuredFlex;
+        style.width     = align.configuredWidth;
+        style.height    = align.configuredHeight;
+        style.minWidth  = align.configuredMinWidth;
+        style.minHeight = align.configuredMinHeight;
+        style.maxWidth  = align.configuredMaxWidth;
+        style.maxHeight = align.configuredMaxHeight;
+    }
+
     /**
      * @param {Object} data
      * @param {String} data.direction left, top
@@ -555,6 +763,42 @@ class DomAccess extends Base {
         return {id: data.id};
     }
 
+    /**
+     *
+     */
+    syncAligns() {
+        const
+            me          = this,
+            { _aligns } = me;
+
+        // Keep all registered aligns aligned on any detected change
+        _aligns?.forEach(align => {
+            // Align subject and target still in the DOM - correct its alignment
+            if (document.contains(align.subject) && document.contains(align.targetElement)) {
+                me.align(align);
+            }
+            // Align subject or target no longer in the DOM - remove it.
+            else {
+                const
+                    { _alignResizeObserver } = me,
+                    { constrainToElement }   = align;
+
+                // Stop observing the align elements
+                _alignResizeObserver.unobserve(align.subject);
+                _alignResizeObserver.unobserve(align.offsetParent);
+                _alignResizeObserver.unobserve(align.targetElement);
+                if (constrainToElement) {
+                    _alignResizeObserver.unobserve(constrainToElement);
+                }
+
+                // Clear the last aligned class.
+                align.subject.classList.remove(`neo-aligned-${align.result?.position}`);
+
+                _aligns.delete(align.id);
+            }
+        })
+    }
+
     /**
      * @param {Object} data
      * @param {String} [data.behavior='smooth'] // auto or smooth

package/src/menu/List.mjs

@@ -1,6 +1,5 @@
 import BaseList  from '../list/Base.mjs';
 import ListModel from '../selection/menu/ListModel.mjs';
-import NeoArray  from '../util/Array.mjs';
 import Store     from './Store.mjs';
 
 /**
@@ -28,11 +27,6 @@ class List extends BaseList {
          * @member {String[]} baseCls=['neo-menu-list','neo-list']
          */
         baseCls: ['neo-menu-list', 'neo-list'],
-        /**
-         * True will add 'neo-floating' to the instance cls list.
-         * @member {Boolean} floating_=false
-         */
-        floating_: false,
         /**
          * setTimeout() id after a focus-leave event.
          * @member {Number|null} focusTimeoutId=null
@@ -115,19 +109,6 @@ class List extends BaseList {
      */
     parentComponent = null
 
-    /**
-     * Triggered after the floating config got changed
-     * @param {Object[]} value
-     * @param {Object[]} oldValue
-     * @protected
-     */
-    afterSetFloating(value, oldValue) {
-        let cls = this.cls;
-
-        NeoArray[value ? 'add' : 'remove'](cls, 'neo-floating');
-        this.cls = cls
-    }
-
     /**
      * Triggered after the items config got changed
      * @param {Object[]} value
@@ -168,40 +149,17 @@ class List extends BaseList {
     }
 
     /**
-     * Triggered after the mounted config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
+     * Triggered after the theme config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
      * @protected
      */
-    afterSetMounted(value, oldValue) {
-        super.afterSetMounted(value, oldValue);
+    afterSetTheme(value, oldValue) {
+        super.afterSetTheme(value, oldValue);
 
-        let me           = this,
-            id           = me.id,
-            parentId     = me.parentComponent?.id;
-
-        if (parentId) {
-            if (value) {
-                Neo.main.addon.ScrollSync.register({
-                    sourceId: parentId,
-                    targetId: id
-                });
-
-                !me.parentMenu && me.getDomRect([id, parentId]).then(rects => {
-                    let style = me.style || {};
-
-                    style.left = `${rects[1].right - rects[0].width}px`;
-                    style.top  = `${rects[1].bottom + 1}px`;
-
-                    me.style = style
-                })
-            } else if (oldValue !== undefined) {
-                Neo.main.addon.ScrollSync.unregister({
-                    sourceId: parentId,
-                    targetId: id
-                })
-            }
-        }
+        Object.values(this.subMenuMap || {}).forEach(menu => {
+            menu.theme = value
+        })
     }
 
     /**
@@ -243,9 +201,7 @@ class List extends BaseList {
     destroy(...args) {
         let me            = this,
             activeSubMenu = me.activeSubMenu,
-            subMenuMap    = me.subMenuMap;
-
-        me.store.destroy();
+            subMenuMap    = me.subMenuMap || {};
 
         activeSubMenu?.unmount();
 
@@ -335,16 +291,6 @@ class List extends BaseList {
         }
     }
 
-    /**
-     * @param {Object} node
-     * @param {Object} data
-     */
-    onItemClick(node, data) {
-        super.onItemClick(node, data);
-
-        this.onKeyDownEnter(node.id)
-    }
-
     /**
      * @param {String} nodeId
      */
@@ -401,48 +347,35 @@ class List extends BaseList {
      * @param {Object} record
      */
     showSubMenu(nodeId, record) {
-        let me           = this,
+        const
+            me           = this,
             store        = me.store,
             recordId     = record[store.keyProperty],
-            subMenuMap   = me.subMenuMap || {},
+            subMenuMap   = me.subMenuMap || (me.subMenuMap = {}),
             subMenuMapId = me.getMenuMapId(recordId),
-            subMenu      = subMenuMap[subMenuMapId],
-            menuStyle, style;
-
-        me.getDomRect(nodeId).then(rect => {
-            style = {
-                left: `${rect.right + me.subMenuGap}px`,
-                top : `${rect.top - 1}px` // minus the border
-            };
-
-            if (subMenu) {
-                menuStyle = subMenu.style;
-
-                Object.assign(menuStyle, style);
-
-                subMenu.setSilent({style: menuStyle})
-            } else {
-                subMenuMap[subMenuMapId] = subMenu = Neo.create({
-                    module         : List,
-                    appName        : me.appName,
-                    displayField   : me.displayField,
-                    floating       : true,
-                    items          : record.items,
-                    isRoot         : false,
-                    parentComponent: me.parentComponent,
-                    parentId       : Neo.apps[me.appName].mainView.id,
-                    parentIndex    : store.indexOf(record),
-                    parentMenu     : me,
-                    style,
-                    zIndex         : me.zIndex + 1
-                })
-            }
-
-            me.activeSubMenu = subMenu;
-            me.subMenuMap    = subMenuMap;
-
-            subMenu.render(true)
-        });
+            subMenu      = subMenuMap[subMenuMapId] || (subMenuMap[subMenuMapId] = Neo.create({
+                align          : {
+                    target       : nodeId,
+                    edgeAlign    : 'l0-r0',
+                    axisLock     : true,
+                    targetMargin : me.subMenuGap
+                },
+                module         : List,
+                appName        : me.appName,
+                displayField   : me.displayField,
+                floating       : true,
+                items          : record.items,
+                isRoot         : false,
+                parentComponent: me.parentComponent,
+                parentId       : Neo.apps[me.appName].mainView.id,
+                parentIndex    : store.indexOf(record),
+                parentMenu     : me,
+                theme          : me.theme,
+                zIndex         : me.zIndex + 1
+            }));
+
+        me.activeSubMenu = subMenu;
+        subMenu.render(true)
     }
 
     /**

package/src/table/Container.mjs

@@ -1,6 +1,6 @@
 import BaseContainer   from '../container/Base.mjs';
 import ClassSystemUtil from '../util/ClassSystem.mjs';
-import Css             from '../util/Css.mjs';
+import CssUtil         from '../util/Css.mjs';
 import NeoArray        from '../util/Array.mjs';
 import RowModel        from '../selection/table/RowModel.mjs';
 import Store           from '../data/Store.mjs';
@@ -207,7 +207,7 @@ class Container extends BaseContainer {
             cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-right: ' + me.dockRightMargin + 'px;}');
         }
         if (cssRules.length > 0) {
-            Css.insertRules(cssRules);
+            CssUtil.insertRules(me.appName, cssRules);
         }
 
         me.scrollbarsCssApplied = true;

package/src/table/View.mjs

@@ -70,6 +70,7 @@ class View extends Component {
             dataField,
             index,
             record,
+            tableContainer,
             value: fieldValue
         });