neo.mjs 6.3.10 → 6.4.0

package/src/table/header/Button.mjs

@@ -9,11 +9,11 @@ import TextField  from '../../form/field/Text.mjs';
 class Button extends BaseButton {
     /**
      * Valid values for align
-     * @member {String[]} alignValues: ['left','center','right']
+     * @member {String[]} cellAlignValues: ['left','center','right']
      * @protected
      * @static
      */
-    static alignValues = ['left', 'center', 'right']
+    static cellAlignValues = ['left', 'center', 'right']
 
     static config = {
         /**
@@ -26,15 +26,15 @@ class Button extends BaseButton {
          * @protected
          */
         ntype: 'table-header-button',
-        /**
-         * Alignment of the matching table cells. Valid values are left, center, right
-         * @member {String} align_='left'
-         */
-        align_: 'left',
         /**
          * @member {String[]} baseCls=['neo-table-header-button']
          */
         baseCls: ['neo-table-header-button'],
+        /**
+         * Alignment of the matching table cells. Valid values are left, center, right
+         * @member {String} cellAlign_='left'
+         */
+        cellAlign_: 'left',
         /**
          * @member {String|null} dataField=null
          */
@@ -111,19 +111,17 @@ class Button extends BaseButton {
     construct(config) {
         super.construct(config);
 
-        let me        = this;
-        
-        if (me.draggable) {
-            me.addDomListeners({
-                dragend  : me.onDragEnd,
-                dragenter: me.onDragEnter,
-                dragleave: me.onDragLeave,
-                dragover : me.onDragOver,
-                dragstart: me.onDragStart,
-                drop     : me.onDrop,
-                scope    : me
-            });
-        }
+        let me = this;
+
+        me.draggable && me.addDomListeners({
+            dragend  : me.onDragEnd,
+            dragenter: me.onDragEnter,
+            dragleave: me.onDragLeave,
+            dragover : me.onDragOver,
+            dragstart: me.onDragStart,
+            drop     : me.onDrop,
+            scope    : me
+        })
     }
 
     /**
@@ -255,13 +253,13 @@ class Button extends BaseButton {
     }
 
     /**
-     * Triggered before the align config gets changed
+     * Triggered before the cellAlign config gets changed
      * @param {String} value
      * @param {String} oldValue
      * @protected
      */
-    beforeSetAlign(value, oldValue) {
-        return this.beforeSetEnumValue(value, oldValue, 'align', 'alignValues');
+    beforeSetCellAlign(value, oldValue) {
+        return this.beforeSetEnumValue(value, oldValue, 'cellAlign', 'cellAlignValues');
     }
 
     /**

package/src/tree/Accordion.mjs

@@ -266,7 +266,7 @@ class AccordionTree extends TreeList {
                     cn : [{
                         flag     : 'iconCls',
                         tag      : 'span',
-                        cls      : ['neo-accordion-item-icon', item[me.fields.icon]],
+                        cls      : itemIconCls,
                         id       : id + '__icon',
                         removeDom: (!item.isLeaf || !me.showIcon)
                     }, {

package/src/util/Array.mjs

@@ -132,29 +132,15 @@ class NeoArray extends Base {
     }
 
     /**
-     * Returns an array of items which are present in array1 and array2
+     * Returns an array of items which are present in the passed arrays.
+     * Multiple arrays may be passed.
      * Only supports primitive items
      * @param {Array} array1
      * @param {Array} array2
      * @returns {Array}
      */
-    static union(array1, array2) {
-        let result = [],
-            merge  = array1.concat(array2),
-            len    = merge.length,
-            assoc  = {},
-            item;
-
-        while (len--) {
-            item = merge[len];
-
-            if (!assoc[item]) {
-                result.unshift(item);
-                assoc[item] = true;
-            }
-        }
-
-        return result;
+    static union() {
+        return [...new Set(Array.prototype.concat(...arguments))];
     }
 
     /**

package/src/util/Css.mjs

@@ -15,29 +15,27 @@ class Css extends Base {
 
     /**
      * Pass the selectorText of the rules which you want to remove
+     * @param {String} appName
      * @param {String[]|String} rules
      */
-    static deleteRules(rules) {
+    static deleteRules(appName, rules) {
         if (!Array.isArray(rules)) {
             rules = [rules];
         }
 
-        Neo.main.addon.Stylesheet.deleteCssRules({
-            rules: rules
-        });
+        Neo.main.addon.Stylesheet.deleteCssRules({appName, rules})
     }
 
     /**
+     * @param {String} appName
      * @param {String[]|String} rules
      */
-    static insertRules(rules) {
+    static insertRules(appName, rules) {
         if (!Array.isArray(rules)) {
             rules = [rules];
         }
 
-        Neo.main.addon.Stylesheet.insertCssRules({
-            rules: rules
-        });
+        Neo.main.addon.Stylesheet.insertCssRules({appName, rules})
     }
 }
 

package/src/util/HashHistory.mjs

@@ -41,14 +41,14 @@ class HashHistory extends Base {
      * @returns {Object}
      */
     first() {
-        return this.stack[0];
+        return this.stack[0] || null
     }
 
     /**
      * @returns {Number}
      */
     getCount() {
-        return this.stack.length;
+        return this.stack.length
     }
 
     /**
@@ -65,12 +65,19 @@ class HashHistory extends Base {
             stack.unshift(data);
 
             if (stack.length > me.maxItems) {
-                stack.pop();
+                stack.pop()
             }
 
             me.fire('change', data, stack[1] || null)
         }
     }
+
+    /**
+     * @returns {Object}
+     */
+    second() {
+        return this.stack[1] || null
+    }
 }
 
 let instance = Neo.applyClassConfig(HashHistory);

package/src/util/Rectangle.mjs

@@ -1,11 +1,84 @@
-import Base from '../core/Base.mjs';
-
 /**
  * The class contains utility methods for working with DOMRect Objects
  * @class Neo.util.Rectangle
- * @extends Neo.core.Base
+ * @extends DOMRect
  */
-class Rectangle extends Base {
+
+const
+    emptyArray = Object.freeze([]),
+    // Convert edge array values into the [T,R,B,L] form.
+    parseEdgeValue = (e = 0) => {
+        if (!Array.isArray(e)) {
+            e = [e];
+        }
+        switch (e.length) {
+            case 1:
+                e.length = 4;
+                return e.fill(e[0], 1, 4);
+            case 2:// top&bottom, left&right
+                return [e[0], e[1], e[0], e[1]];
+            case 3:// top, left&right, bottom
+                return [e[0], e[1], e[2], e[1]];
+        }
+        return e;
+    },
+    parseEdgeAlign = edgeAlign => {
+        const
+            edgeParts     = edgeAlignRE.exec(edgeAlign),
+            ourEdgeZone   = edgeZone[edgeParts[1]],
+            theirEdgeZone = edgeZone[edgeParts[4]];
+
+        return {
+            ourEdge         : edgeParts[1],
+            ourEdgeOffset   : parseInt(edgeParts[2] || 50),
+            ourEdgeUnit     : edgeParts[3] || '%',
+            ourEdgeZone,
+            theirEdge       : edgeParts[4],
+            theirEdgeOffset : parseInt(edgeParts[5] || 50),
+            theirEdgeUnit   : edgeParts[6] || '%',
+            theirEdgeZone,
+
+            // Aligned to an edge, *outside* of the target.
+            // A normal align as a combo dropdown might request
+            edgeAligned     : (ourEdgeZone & 1) === (theirEdgeZone & 1) && ourEdgeZone !== theirEdgeZone
+        }
+    },
+    // The opposite of parseEdgeAlign, and it has to flip the edges
+    createReversedEdgeAlign = edges => {
+        const
+            ourEdge   = oppositeEdge[edges.ourEdge],
+            theirEdge = oppositeEdge[edges.theirEdge];
+
+        // reconstitute a rule string with the edges flipped to the opposite sides
+        return `${ourEdge}${edges.ourEdgeOffset}${edges.ourEdgeUnit}-${theirEdge}${edges.theirEdgeOffset}${edges.theirEdgeUnit}`
+
+    },
+    getElRect = el => {
+        const r = el instanceof DOMRect ? el : (el?.nodeType === 1 ? el : typeof el === 'string' ? document.getElementById(el) : null)?.getBoundingClientRect();
+
+        // Convert DOMRect into Rectangle
+        return r && new Rectangle(r.x, r.y, r.width, r.height);
+    },
+    oppositeEdge = {
+        t : 'b',
+        r : 'l',
+        b : 't',
+        l : 'r'
+    },
+    edgeZone = {
+        t : 0,
+        r : 1,
+        b : 2,
+        l : 3
+    },
+    zoneNames = ['top', 'right', 'bottom', 'left'],
+    zoneEdges = ['t', 'r', 'b', 'l'],
+    zoneDimension = ['width', 'height'],
+    zoneCoord = [0, 1, 0, 1],
+    zeroMargins = [0, 0, 0, 0],
+    edgeAlignRE = /^([trblc])(\d*)(%|px)?-([trblc])(\d*)(%|px)?$/;
+
+export default class Rectangle extends DOMRect {
     static config = {
         /**
          * @member {String} className='Neo.util.Rectangle'
@@ -147,8 +220,372 @@ class Rectangle extends Base {
 
         return movedRect;
     }
-}
 
-Neo.applyClassConfig(Rectangle);
+    set bottom(b) {
+        this.height += b - this.bottom;
+    }
+    get bottom() {
+        return super.bottom;
+    }
+
+    set right(r) {
+        this.width += r - this.right;
+    }
+    get right() {
+        return super.right;
+    }
+
+    // Change the x without moving the Rectangle. The left side moves and the right side doesn't
+    changeX(x) {
+        const widthDelta = this.x - x;
+
+        this.x = x;
+        this.width += widthDelta;
+    }
+
+    // Change the y without moving the Rectangle. The top side moves and the bottom side doesn't
+    changeY(y) {
+        const heightDelta = this.y - y;
+
+        this.y = y;
+        this.height += heightDelta;
+    }
+
+    clone() {
+        return Rectangle.clone(this);
+    }
+
+    static clone(r) {
+        const result = new Rectangle(r.x, r.y, r.width, r.height);
+
+        result.minWidth = r.minWidth;
+        result.minHeight = r.minHeight;
+
+        return result;
+    }
+
+    intersects(other) {
+        const me = this;
+
+        if (other.height && other.width) {
+            const
+                left   = Math.max(me.x, other.x),
+                top    = Math.max(me.y, other.y),
+                right  = Math.min(me.x + me.width, other.x + other.width),
+                bottom = Math.min(me.y + me.height, other.y + other.height);
+        
+            if (left >= right || top >= bottom) {
+                return false;
+            }
+        
+            return new Rectangle(left, top, right - left, bottom - top);
+        }
+        // We're dealing with a point here - zero dimensions
+        else {
+            return (other.x >= me.x && other.y >= me.y && other.right <= me.right && other.bottom <= me.bottom);
+        }
+    }
+
+    /**
+     * Checks if the other Rectangle is fully contained inside this Rectangle
+     * @param {Object} other
+     * @returns {Boolean}
+     */
+    contains(other) {
+        return this.bottom >= other.bottom
+            && this.left   <= other.left
+            && this.right  >= other.right
+            && this.top    <= other.top;
+    }
+
+    /**
+     * Returns a clone of this Rectangle expanded according to the edges array.
+     * @param {Number}Number[]} edges 
+     * @returns 
+     */
+    expand(edges) {
+        edges = parseEdgeValue(edges);
+
+        return new this.constructor(this.x - edges[3], this.y - edges[0], this.width + edges[1] + edges[3], this.height + edges[0] + edges[2]);
+    }
 
-export default Rectangle;
+    moveBy(x = 0, y = 0) {
+        const result = this.clone();
+
+        if (Array.isArray(x)) {
+            y = x[1];
+            x = x[0];
+        }
+        result.x += x;
+        result.y += y;
+        return result;
+    }
+
+    /**
+     * Returns `true` if this Rectangle completely contains the other Rectangle
+     * @param {Rectangle} other 
+     */
+    contains(other) {
+        return this.constructor.includes(this, other);
+    }
+
+    /**
+     * Returns a copy of this Rectangle constrained to fit within the passed Rectangle
+     * @param {Rectangle} constrainTo
+     * @returns {Rectangle|Boolean} A new Rectangle constrained to te passed Rectangle, or false if it could not be constrained.
+     */
+    constrainTo(constrainTo) {
+        const
+            me        = this,
+            minWidth  = me.minWidth  || me.width,
+            minHeight = me.minHeight || me.height;
+
+        // Not possible, even when shrunk to minima
+        if (minHeight > constrainTo.height || minWidth > constrainTo.width) {
+            return false;
+        }
+
+        // We do not mutate this Rectangle, but return a constrained version
+        const result = me.clone();
+
+        // Translate result so that the top and left are visible
+        result.x = Math.max(me.x + Math.min(constrainTo.right  - result.right,  0), constrainTo.x);
+        result.y = Math.max(me.y + Math.min(constrainTo.bottom - result.bottom, 0), constrainTo.y);
+
+        // Pull in any resulting overflow
+        result.bottom = Math.min(result.bottom, constrainTo.bottom);
+        result.right = Math.min(result.right, constrainTo.right);
+
+        return result;
+    }
+
+    alignTo(align) {
+        const
+            me             = this,
+            {
+                minWidth,
+                minHeight
+            }              = me,
+            {
+                constrainTo,    // Element or Rectangle result must fit into
+                target,         // Element or Rectangle to align to
+                edgeAlign,      // t50-b50 type string
+                axisLock,       // true for flip, 'flexible' for flip, then try the other edges
+                offset,         // Final [x, y] vector to move the result by.
+                matchSize
+            }              = align,
+            targetMargin   = align.targetMargin ? parseEdgeValue(align.targetMargin) : zeroMargins,
+            targetRect     = getElRect(target),
+            constrainRect  = getElRect(constrainTo),
+            edges          = parseEdgeAlign(edgeAlign),
+            matchDimension = zoneDimension[edges.theirEdgeZone & 1];
+
+        let result = me.clone();
+
+        if (matchSize) {
+            result[matchDimension] = targetRect[matchDimension];
+        }
+
+        // Must do the calculations after the aligned side has been matched in size if requested.
+        const
+            myPoint     = result.getAnchorPoint(edges.ourEdgeZone, edges.ourEdgeOffset, edges.ourEdgeUnit),
+            targetPoint = targetRect.getAnchorPoint(edges.theirEdgeZone, edges.theirEdgeOffset, edges.theirEdgeUnit, targetMargin),
+            vector      = [targetPoint[0] - myPoint[0], targetPoint[1] - myPoint[1]];
+ 
+        result = result.moveBy(vector);
+
+        // A useful property in the resulting rectangle which specifies which zone of the target
+        // It is being places in, T,R,B or L - 0, 1, 2, 3
+        // Some code may want to treat DOM elements differently depending on the zone
+        result.zone = edges.theirEdgeZone;
+        result.position = zoneNames[result.zone];
+
+        // Now we create the four Rectangles around the target, into which we may be constrained
+        // Zones T,R,B,L 0 9, 1, 2, 3:
+        // +-----------------------------------------------------------------------------------+
+        // | +-------------------------+------------------------+----------------------------+ |
+        // | |          ^              |                        |             ^              | |
+        // | |          |              |                        |             |              | |
+        // | |  <-------+--------------+---------Zone 0---------+-------------+---------->   | |
+        // | |          |              |                        |             |              | |
+        // | |          |              |                        |             |              | |
+        // | +----------+--------------+------------------------+-------------+--------------+ |
+        // | |          |              | +--------------------+ |             |              | |
+        // | |          |              | |                    | |             |              | |
+        // | |          |              | |                    | |             |              | |
+        // | |       Zone 3            | |                    | |          Zone 1            | |
+        // | |          |              | |                    | |             |              | |
+        // | |          |              | |                    | |             |              | |
+        // | |          |              | +--------------------+ |             |              | |
+        // | ++---------+--------------+------------------------+-------------+--------------+ |
+        // | |          |              |                        |             |              | |
+        // | |          |              |                        |             |              | |
+        // | |          |              |                        |             |              | |
+        // | |  <-------+--------------+--------Zone 2----------+-------------+------------> | |
+        // | |          |              |                        |             |              | |
+        // | |          v              |                        |             v              | |
+        // | ++------------------------+------------------------+----------------------------+ |
+        // +-----------------------------------------------------------------------------------+
+        if (constrainRect && !constrainRect.contains(result)) {
+            // They asked to overlap the target, for example t0-t0
+            // In these cases, we just return the result
+            if (targetRect.intersects(result)) {
+                return result;
+            }
+
+            // This is the zone we try to fit into first, the one that was asked for
+            let zone = edges.theirEdgeZone;
+
+            // We create an array of four rectangles into which we try to fit with appropriate align specs.
+            // We must start with the requested zone, whatever that is.
+            const zonesToTry = [{
+                zone,
+                edgeAlign
+            }];
+
+            if (axisLock) {
+                // Flip to the opposite side for the second try.
+                // The alignment string has to be reversed
+                // so r20-l30 has to become l20-r30.
+                // The other two zones revert to centered so are easier
+                zonesToTry[1] = {
+                    zone      : zone = (zone + 2) % 4,
+                    edgeAlign : createReversedEdgeAlign(edges)
+                }
+
+                // Fall back to the other two zones if we are allowed to
+                if (axisLock === 'flexible') {
+                    zonesToTry.push({
+                        zone      : zone = (alignSpec.startZone + 1) % 4,
+                        edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
+                    });
+                    zonesToTry.push({
+                        zone      : zone = (zone + 2) % 4,
+                        edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
+                    });
+                }
+            }
+            else {
+                // go through the other zones in order
+                for (let i = 1; i < 4; i++) {
+                    zonesToTry.push({
+                        zone      : zone = (zone + 1) % 4,
+                        edgeAlign : `${oppositeEdge[zoneEdges[zone]]}-${zoneEdges[zone]}`
+                    });
+                }
+            }
+
+            // Calculate the constraint Rectangle for each zone
+            for (let i = 0; i < zonesToTry.length; i++) {
+                // We clone the outer constraining rectangle
+                // and move it into position
+                const c = constrainRect.clone();
+
+                switch (zonesToTry[i].zone) {
+                    case 0:
+                        // The zone i2 above the target - zone 0/T
+                        c.bottom = targetRect.y - targetMargin[0];
+                        break;
+                    case 1:
+                        // The zone is to the right of the target - zone 1/R
+                        c.changeX(targetRect.right + targetMargin[1]);
+                        break;
+                    case 2:
+                        // The zone is below the target - zone 2/B
+                        c.changeY(targetRect.bottom + targetMargin[2]);
+                        break;
+                    case 3:
+                        // The zone is to the left of the target - zone 3/L
+                        c.right = targetRect.x - targetMargin[3];
+                        break;
+                }
+                zonesToTry[i].constrainRect = c;
+            }
+
+            // Now try to constrain our result into each zone's constraintZone
+            for (let i = 0; i < zonesToTry.length; i++) {
+                const
+                    {
+                        zone,
+                        edgeAlign,
+                        constrainRect
+                    }    = zonesToTry[i],
+                    edge = zoneEdges[zone];
+
+                if (matchSize) {
+                    // If we are aligning to the requested edge, or it's opposite edge then
+                    // match that edge size, else revert it to our own size
+                    result[matchDimension] = edge === edges.theirEdge || edge == oppositeEdge[edges.theirEdge] ? targetRect[matchDimension] : me[matchDimension];
+                }
+
+                // Do a simple align to the current edge
+                result = result.alignTo({
+                    target : targetRect,
+                    edgeAlign,
+                    targetMargin
+                });
+
+                let solution = result.constrainTo(constrainRect);
+
+                // As soon as we find a zone into which the result is willing to be constrained. return it
+                if (solution) {
+                    solution.zone = zone;
+                    solution.position = zoneNames[zone];
+                    return solution;
+                }
+            }
+        }
+
+        return result;
+    }
+
+    getAnchorPoint(edgeZone, edgeOffset, edgeUnit, margin = emptyArray) {
+        const me = this;
+
+        let result;
+
+        // Edge zones go top, right, bottom, left
+        // Each one calculates the start point of that edge then moves along it by
+        // the edgeOffset, then moves *away* from it by the margin for that edge if there's a margin.
+        switch (edgeZone) {
+            case 0:
+                result = [me.x, me.y - (margin[0] || 0), me.width, 0];
+                break;
+            case 1:
+                result = [me.x + me.width + (margin[1] || 0), me.y, me.height, 1];
+                break;
+            case 2:
+                result = [me.x, me.y + me.height + (margin[2] || 0), me.width, 0];
+                break;
+            case 3:
+                result = [me.x - (margin[3] || 0), me.y, me.height, 1];
+        }
+        result[result[3]] += edgeUnit === '%' ? result[2] / 100 * edgeOffset : edgeOffset;
+        result.length = 2;
+        return result;
+    }
+
+    equals(other) {
+        return other instanceof DOMRect && 
+            other.x === this.x &&
+            other.y === this.y &&
+            other.height === this.height &&
+            other.width === this.width;
+    }
+
+    // For debugging purposes only
+    show(color = 'red') {
+        const div = document.createElement('div');
+
+        div.style = `
+            position:absolute;
+            transform:translate3d(${this.x}px, ${this.y}px, 0);
+            height:${this.height}px;
+            width:${this.width}px;
+            background-color:${color}
+        `;
+        document.body.appendChild(div);
+        setTimeout(() => div.remove(), 30000);
+        return div;
+    }
+}

package/test/siesta/siesta-node.js

@@ -31,7 +31,8 @@ project.configure({
 
 project.plan(
     './tests/CollectionBase.mjs',
-    './tests/VdomHelper.mjs'
+    './tests/VdomHelper.mjs',
+    './tests/Rectangle.mjs'
 );
 
 project.start();

package/test/siesta/siesta.js

@@ -20,6 +20,7 @@ project.plan(
     'tests/ClassConfigsAndFields.mjs',
     'tests/ClassSystem.mjs',
     'tests/CollectionBase.mjs',
+    'tests/Rectangle.mjs',
     'tests/VdomHelper.mjs',
     'tests/VdomCalendar.mjs'
 );