neo.mjs 8.23.0 → 8.25.0

package/src/component/MagicMoveText.mjs

@@ -74,25 +74,98 @@ class MagicMoveText extends Component {
 
     /**
      * @member {Object[]} chars=[]
+     * @protected
      */
     chars = []
+    /**
+     * @member {Object[]} charsVdom=[]
+     * @protected
+     */
+    charsVdom = []
+    /**
+     * @member {Number} contentHeight=0
+     * @protected
+     */
+    contentHeight = 0
+    /**
+     * @member {Number} contentWidth=0
+     * @protected
+     */
+    contentWidth = 0
     /**
      * @member {Number} currentIndex=0
+     * @protected
      */
     currentIndex = 0
+    /**
+     * We do not need the first event to trigger logic, since afterSetMounted() handles this
+     * @member {Boolean} initialResizeEvent=true
+     * @protected
+     */
+    initialResizeEvent = true
     /**
      * @member {Number|null} intervalId=null
+     * @protected
      */
     intervalId = null
+    /**
+     * Internal flag which gets set to true while the animated char transitions are running
+     * @member {Boolean} isTransitioning=false
+     * @protected
+     */
+    isTransitioning = false
+    /**
+     * @member {Object} measureCache={}
+     * @protected
+     */
+    measureCache = {}
     /**
      * @member {Object[]} previousChars=[]
+     * @protected
      */
     previousChars = []
     /**
      * @member {Object} measureElement
+     * @protected
      */
     get measureElement() {
-        return this.vdom.cn[1].cn[0]
+        return this.measureWrapper.cn[0]
+    }
+    /**
+     * @member {Object} measureElement
+     * @protected
+     */
+    get measureWrapper() {
+        return this.vdom.cn[1]
+    }
+
+    /**
+     * @param {Object} config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.addDomListeners({
+            resize: me.onResize,
+            scope : me
+        })
+    }
+
+    /**
+     * @param {Boolean} mounted
+     * @protected
+     */
+    async addResizeObserver(mounted) {
+        let {id, windowId} = this,
+            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId);
+
+        ResizeObserver[mounted ? 'register' : 'unregister']({id, windowId});
+
+        if (mounted) {
+            this.initialResizeEvent = true
+        }
     }
 
     /**
@@ -127,8 +200,12 @@ class MagicMoveText extends Component {
      * @protected
      */
     afterSetFontFamily(value, oldValue) {
-        this.vdom.style.fontFamily = value;
-        this.update()
+        let me = this;
+
+        me.measureCache = {};
+
+        me.vdom.style.fontFamily = value;
+        me.update()
     }
 
     /**
@@ -139,7 +216,17 @@ class MagicMoveText extends Component {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-        this.autoCycle && this.startAutoCycle(value)
+
+        let me = this;
+
+        value && me.getDomRect().then(rect => {
+            me.contentHeight = rect.height;
+            me.contentWidth  = rect.width;
+
+            me.autoCycle && me.startAutoCycle(value)
+        });
+
+        oldValue !== undefined && me.addResizeObserver(value)
     }
 
     /**
@@ -165,7 +252,7 @@ class MagicMoveText extends Component {
                 me.chars.push({name: char});
 
                 if (char === ' ') {
-                    char = ' '
+                    char = ' '
                 }
 
                 measureElement.cn.push({tag: 'span', html: char})
@@ -190,44 +277,132 @@ class MagicMoveText extends Component {
         this.update()
     }
 
+    /**
+     * @param {String[]} letters
+     * @returns {Object[]}
+     * @protected
+     */
+    createCharsVdom(letters) {
+        let me             = this,
+            {chars}        = me,
+            charsContainer = [],
+            char;
+
+        letters.forEach((letter, index) => {
+            if (letter !== null) {
+                char = chars[index];
+
+                charsContainer.push({
+                    cls  : ['neo-char'],
+                    html : char.name,
+                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top}
+                })
+            }
+        });
+
+        return charsContainer
+    }
+
+    /**
+     * @protected
+     */
+    cycleText() {
+        let me = this;
+
+        me.text         = me.cycleTexts[me.currentIndex];
+        me.currentIndex = (me.currentIndex + 1) % me.cycleTexts.length
+    }
+
     /**
      * @returns {Promise<void>}
+     * @protected
      */
     async measureChars() {
         let me = this,
-            {measureElement} = me,
+            {measureCache, measureElement, measureWrapper, text} = me,
             parentRect, rects;
 
-        delete me.vdom.cn[1].removeDom;
+        if (measureCache[text]) {
+            rects      = [...measureCache[text]];
+            parentRect = rects.shift()
+        } else {
+            measureWrapper.style = {
+                height: me.contentHeight + 'px',
+                width : me.contentWidth  + 'px'
+            };
+
+            delete measureWrapper.removeDom;
 
-        await me.promiseUpdate();
-        await me.timeout(20);
+            await me.promiseUpdate();
+            await me.timeout(20);
 
-        rects      = await me.getDomRect([me.vdom.cn[1].id, ...measureElement.cn.map(node => node.id)]);
-        parentRect = rects.shift();
+            rects      = await me.getDomRect([measureWrapper.id, ...measureElement.cn.map(node => node.id)]);
+            parentRect = rects.shift();
+
+            measureCache[text] = [parentRect, ...rects]
+        }
 
         rects.forEach((rect, index) => {
             me.chars[index].left = `${rect.left - parentRect.left}px`;
             me.chars[index].top  = `${rect.top  - parentRect.top }px`;
         });
 
-        me.vdom.cn[1].removeDom = true;
+        measureWrapper.removeDom = true;
         await me.promiseUpdate()
     }
 
+    /**
+     * @param {Object} data
+     * @returns {Promise<void>}
+     * @protected
+     */
+    async onResize({rect}) {
+        let me = this;
+
+        me.contentHeight = rect.height;
+        me.contentWidth  = rect.width;
+
+        me.measureCache = {};
+
+
+        if (!me.initialResizeEvent) {
+            if (!me.isTransitioning) {
+                await me.measureChars();
+
+                me.charsVdom = me.createCharsVdom(me.chars.map(char => char.name))
+            }
+        } else {
+            me.initialResizeEvent = false
+        }
+    }
+
+    /**
+     * @param {Object} a
+     * @param {Object} b
+     * @returns {Number}
+     * @protected
+     */
+    sortCharacters(a, b) {
+        let deltaTop = parseFloat(a.style.top) - parseFloat(b.style.top);
+
+        if (deltaTop !== 0) {
+            return deltaTop
+        }
+
+        return parseFloat(a.style.left) - parseFloat(b.style.left)
+    }
+
     /**
      * @param {Boolean} start=true
+     * @protected
      */
     startAutoCycle(start=true) {
         let me = this;
 
         if (start) {
-            me.intervalId = setInterval(() => {
-                me.text         = me.cycleTexts[me.currentIndex];
-                me.currentIndex = (me.currentIndex + 1) % me.cycleTexts.length
-            }, me.autoCycleInterval)
+            me.intervalId = setInterval(me.cycleText.bind(me), me.autoCycleInterval);
 
-            me.text && me.measureChars()
+            me.timeout(20).then(() => {me.cycleText()});
         } else {
             clearInterval(me.intervalId)
         }
@@ -235,71 +410,84 @@ class MagicMoveText extends Component {
 
     /**
      * @returns {Promise<void>}
+     * @protected
      */
     async updateChars() {
         let me                     = this,
             {chars, previousChars} = me,
-            charsContainer         = me.vdom.cn[0].cn,
+            charsContainer         = me.vdom.cn[0],
             letters                = chars.map(char => char.name),
-            char, charNode, index;
+            charNode, index;
+
+        me.isTransitioning = true;
+
+        if (me.charsVdom.length > 1) {
+            charsContainer.cn = me.charsVdom;
+            await me.promiseUpdate()
+        }
 
         previousChars.forEach((previousChar, previousIndex) => {
             index = letters.indexOf(previousChar.name);
 
             if (index > -1) {
-                charNode = charsContainer[previousIndex];
+                charNode = charsContainer.cn[previousIndex];
+
+                Object.assign(charNode.style, {
+                    color: me.colorMove,
+                    left : chars[index].left,
+                    top  : chars[index].top
+                });
 
-                charNode.style.color = me.colorMove;
-                charNode.style.left  = chars[index].left;
                 letters[index] = null
             } else {
-                charNode = charsContainer[previousIndex];
+                charNode = charsContainer.cn[previousIndex];
 
                 charNode.flag = 'remove'
             }
         });
 
-        letters.forEach((letter, index) => {
-            if (letter !== null) {
-                char = chars[index];
-
-                charsContainer.push({
-                    html : char.name,
-                    style: {color: me.colorFadeIn, left: char.left, opacity: 0, top: char.top}
-                })
-            }
-        });
+        charsContainer.cn.push(...me.createCharsVdom(letters));
 
         await me.promiseUpdate();
 
-        charsContainer.forEach(charNode => {
+        charsContainer.cn.forEach(charNode => {
             if (charNode.flag === 'remove') {
                 charNode.style.color   = me.colorFadeOut;
                 charNode.style.opacity = 0
             } else {
-                charNode.style.opacity = 1
+                delete charNode.style.opacity
             }
         });
 
         await me.promiseUpdate();
         await me.timeout(me.transitionTime);
 
-        charsContainer.sort((a, b) => parseFloat(a.style.left) - parseFloat(b.style.left));
+        charsContainer.cn.sort(me.sortCharacters);
 
-        index = charsContainer.length - 1;
+        index = charsContainer.cn.length - 1;
 
         for (; index >= 0; index--) {
-            charNode = charsContainer[index];
+            charNode = charsContainer.cn[index];
 
             delete charNode.flag;
             delete charNode.style.color;
 
             if (charNode.style.opacity === 0) {
-                charsContainer.splice(index, 1)
+                charsContainer.cn.splice(index, 1)
             }
         }
 
-        await me.promiseUpdate()
+        await me.promiseUpdate();
+        await me.timeout(200);
+
+        me.charsVdom = [...charsContainer.cn];
+
+        charsContainer.cn.length = 0;
+
+        charsContainer.cn.push({html: me.text});
+        await me.promiseUpdate();
+
+        me.isTransitioning = false
     }
 }
 

package/src/draggable/grid/header/toolbar/SortZone.mjs

@@ -96,7 +96,7 @@ class SortZone extends BaseSortZone {
             mounted() {
                 Neo.main.DomAccess.scrollTo({
                     id      : viewWrapperId,
-                    value   : view.scrollPosition.y,
+                    value   : view.scrollTop,
                     windowId: this.windowId
                 })
             }

package/src/grid/Container.mjs

@@ -1,9 +1,10 @@
-import BaseContainer   from '../container/Base.mjs';
-import ClassSystemUtil from '../util/ClassSystem.mjs';
-import GridScrollbar   from './Scrollbar.mjs';
-import GridView        from './View.mjs';
-import Store           from '../data/Store.mjs';
-import * as header     from './header/_export.mjs';
+import BaseContainer     from '../container/Base.mjs';
+import ClassSystemUtil   from '../util/ClassSystem.mjs';
+import GridView          from './View.mjs';
+import ScrollManager     from './ScrollManager.mjs';
+import Store             from '../data/Store.mjs';
+import VerticalScrollbar from './VerticalScrollbar.mjs';
+import * as header       from './header/_export.mjs';
 
 /**
  * @class Neo.grid.Container
@@ -119,17 +120,10 @@ class GridContainer extends BaseContainer {
      */
     initialResizeEvent = true
     /**
-     * Flag for identifying the ownership of a touchmove operation
-     * @member {Boolean} isTouchMoveOwner=false
+     * @member {Neo.grid.ScrollManager|null} scrollManager=null
      * @protected
      */
-    isTouchMoveOwner = false
-    /**
-     * Storing touchmove position for mobile envs
-     * @member {Number} lastTouchY=0
-     * @protected
-     */
-    lastTouchY = 0
+    scrollManager = null
 
     /**
      * Convenience method to access the Neo.grid.header.Toolbar
@@ -176,7 +170,7 @@ class GridContainer extends BaseContainer {
         }];
 
         me.scrollbar = Neo.create({
-            module  : GridScrollbar,
+            module  : VerticalScrollbar,
             appName,
             parentId: me.id,
             rowHeight,
@@ -192,11 +186,29 @@ class GridContainer extends BaseContainer {
 
         me.addDomListeners({
             resize: me.onResize,
-            scroll: me.onScroll,
             scope : me
         })
     }
 
+    /**
+     * @param {Boolean} mounted
+     * @protected
+     */
+    async addResizeObserver(mounted) {
+        let me             = this,
+            {windowId}     = me,
+            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId),
+            resizeParams   = {id: me.id, windowId};
+
+        if (mounted) {
+            ResizeObserver.register(resizeParams);
+            await me.passSizeToView()
+        } else {
+            me.initialResizeEvent = true;
+            ResizeObserver.unregister(resizeParams)
+        }
+    }
+
     /**
      * Triggered after the cellEditing config got changed
      * @param {Boolean} value
@@ -245,25 +257,6 @@ class GridContainer extends BaseContainer {
         }
     }
 
-    /**
-     * @param {Boolean} mounted
-     * @protected
-     */
-    async addResizeObserver(mounted) {
-        let me             = this,
-            {windowId}     = me,
-            ResizeObserver = await Neo.currentWorker.getAddon('ResizeObserver', windowId),
-            resizeParams   = {id: me.id, windowId};
-
-        if (mounted) {
-            ResizeObserver.register(resizeParams);
-            await me.passSizeToView()
-        } else {
-            me.initialResizeEvent = true;
-            ResizeObserver.unregister(resizeParams)
-        }
-    }
-
     /**
      * Triggered after the mounted config got changed
      * @param {Boolean} value
@@ -475,6 +468,8 @@ class GridContainer extends BaseContainer {
     destroy(...args) {
         let me = this;
 
+        me.scrollManager.destroy();
+
         me.mounted && Neo.main.addon.ResizeObserver.unregister({
             id      : me.id,
             windowId: me.windowId
@@ -513,6 +508,21 @@ class GridContainer extends BaseContainer {
         return `${this.id}__wrapper`
     }
 
+    /**
+     *
+     */
+    onConstructed() {
+        super.onConstructed();
+
+        let me = this;
+
+        me.scrollManager = Neo.create({
+            module       : ScrollManager,
+            gridContainer: me,
+            gridView     : me.view
+        })
+    }
+
     /**
      * @param {Object} data
      */
@@ -530,43 +540,6 @@ class GridContainer extends BaseContainer {
         }
     }
 
-    /**
-     * @param {Object} data
-     * @param {Number} data.scrollLeft
-     * @param {Object} data.target
-     * @param {Object} data.touches
-     */
-    onScroll({scrollLeft, target, touches}) {
-        let me = this,
-            deltaY, lastTouchY;
-
-        // We must ignore events for grid-scrollbar
-        if (target.id.includes('grid-container')) {
-            me.headerToolbar.scrollLeft = scrollLeft;
-            me.view.scrollPosition = {x: scrollLeft, y: me.view.scrollPosition.y};
-
-            if (touches) {
-                if (!me.view.isTouchMoveOwner) {
-                    me.isTouchMoveOwner = true
-                }
-
-                if (me.isTouchMoveOwner) {
-                    lastTouchY = touches.lastTouch.clientY - touches.firstTouch.clientY;
-                    deltaY     = me.lastTouchY - lastTouchY;
-
-                    deltaY !== 0 && Neo.main.DomAccess.scrollTo({
-                        direction: 'top',
-                        id       : me.view.vdom.id,
-                        value    : me.view.scrollPosition.y + deltaY
-                    })
-
-                    me.lastTouchY = lastTouchY
-                }
-            }
-
-        }
-    }
-
     /**
      * @param {Object} opts
      * @param {String} opts.direction
@@ -657,6 +630,58 @@ class GridContainer extends BaseContainer {
             }
         })
     }
+
+    /**
+     * Used for keyboard navigation (selection models)
+     * @param {Number} index
+     * @param {Number} step
+     */
+    scrollByColumns(index, step) {
+        let me           = this,
+            {view}       = me,
+            {columnPositions, containerWidth, mountedColumns, visibleColumns} = view,
+            countColumns = columnPositions.getCount(),
+            newIndex     = index + step,
+            column, mounted, scrollLeft, visible;
+
+        if (newIndex >= countColumns) {
+            newIndex %= countColumns;
+            step     = newIndex - index
+        }
+
+        while (newIndex < 0) {
+            newIndex += countColumns;
+            step     += countColumns
+        }
+
+        mounted = newIndex >= mountedColumns[0] && newIndex <= mountedColumns[1];
+
+        // Not using >= or <=, since the first / last column might not be fully visible
+        visible = newIndex > visibleColumns[0] && newIndex < visibleColumns[1];
+
+        if (!visible) {
+            // Leaving the mounted area will re-calculate the visibleColumns for us
+            if (mounted) {
+                visibleColumns[0] += step;
+                visibleColumns[1] += step
+            }
+
+            column = columnPositions.getAt(newIndex);
+
+            if (step < 0) {
+                scrollLeft = column.x
+            } else {
+                scrollLeft = column.x - containerWidth + column.width
+            }
+
+            Neo.main.DomAccess.scrollTo({
+                direction: 'left',
+                id       : me.id,
+                value    : scrollLeft,
+                windowId : me.windowId
+            })
+        }
+    }
 }
 
 export default Neo.setupClass(GridContainer);