neo.mjs 10.0.0-alpha.4 → 10.0.0-beta.1

package/src/grid/Container.mjs

@@ -1,7 +1,7 @@
 import BaseContainer     from '../container/Base.mjs';
 import ClassSystemUtil   from '../util/ClassSystem.mjs';
 import Collection        from '../collection/Base.mjs';
-import GridView          from './View.mjs';
+import GridBody          from './Body.mjs';
 import ScrollManager     from './ScrollManager.mjs';
 import Store             from '../data/Store.mjs';
 import VerticalScrollbar from './VerticalScrollbar.mjs';
@@ -52,6 +52,16 @@ class GridContainer extends BaseContainer {
          * @protected
          */
         baseCls: ['neo-grid-container'],
+        /**
+         * Configs for Neo.grid.Body
+         * @member {Object|null} [bodyConfig=null]
+         */
+        bodyConfig: null,
+        /**
+         * @member {String|null} bodyId_=null
+         * @protected
+         */
+        bodyId_: null,
         /**
          * true uses grid.plugin.CellEditing
          * @member {Boolean} cellEditing_=false
@@ -105,16 +115,6 @@ class GridContainer extends BaseContainer {
          * @member {Neo.data.Store} store_=null
          */
         store_: null,
-        /**
-         * Configs for Neo.grid.View
-         * @member {Object|null} [viewConfig=null]
-         */
-        viewConfig: null,
-        /**
-         * @member {String|null} viewId_=null
-         * @protected
-         */
-        viewId_: null,
         /**
          * @member {Array|null} items=null
          * @protected
@@ -142,19 +142,19 @@ class GridContainer extends BaseContainer {
     scrollManager = null
 
     /**
-     * Convenience method to access the Neo.grid.header.Toolbar
-     * @returns {Neo.grid.header.Toolbar|null}
+     * Convenience method to access the Neo.grid.Body
+     * @returns {Neo.grid.Body|null}
      */
-    get headerToolbar() {
-        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
+    get body() {
+        return Neo.getComponent(this.bodyId) || Neo.get(this.bodyId)
     }
 
     /**
-     * Convenience method to access the Neo.grid.View
-     * @returns {Neo.grid.View|null}
+     * Convenience method to access the Neo.grid.header.Toolbar
+     * @returns {Neo.grid.header.Toolbar|null}
      */
-    get view() {
-        return Neo.getComponent(this.viewId) || Neo.get(this.viewId)
+    get headerToolbar() {
+        return Neo.getComponent(this.headerToolbarId) || Neo.get(this.headerToolbarId)
     }
 
     /**
@@ -166,8 +166,8 @@ class GridContainer extends BaseContainer {
         let me = this,
             {appName, rowHeight, store, windowId} = me;
 
+        me.bodyId          = Neo.getId('grid-body');
         me.headerToolbarId = Neo.getId('grid-header-toolbar');
-        me.viewId          = Neo.getId('grid-view');
 
         me.items = [{
             module           : header.Toolbar,
@@ -176,13 +176,13 @@ class GridContainer extends BaseContainer {
             sortable         : me.sortable,
             ...me.headerToolbarConfig
         }, {
-            module       : GridView,
+            module       : GridBody,
             flex         : 1,
             gridContainer: me,
-            id           : me.viewId,
+            id           : me.bodyId,
             rowHeight,
             store,
-            ...me.viewConfig
+            ...me.bodyConfig
         }];
 
         me.scrollbar = Neo.create({
@@ -218,7 +218,7 @@ class GridContainer extends BaseContainer {
 
         if (mounted) {
             ResizeObserver.register(resizeParams);
-            await me.passSizeToView()
+            await me.passSizeToBody()
         } else {
             me.initialResizeEvent = true;
             ResizeObserver.unregister(resizeParams)
@@ -262,9 +262,9 @@ class GridContainer extends BaseContainer {
 
             await me.timeout(50);
 
-            await me.passSizeToView();
+            await me.passSizeToBody();
 
-            me.view?.createViewData()
+            me.body?.createViewData()
         }
     }
 
@@ -287,14 +287,14 @@ class GridContainer extends BaseContainer {
      */
     afterSetRowHeight(value, oldValue) {
         if (value > 0) {
-            let {scrollbar, view} = this;
+            let {body, scrollbar} = this;
 
             if (scrollbar) {
                 scrollbar.rowHeight = value
             }
 
-            if (view) {
-                view.rowHeight = value
+            if (body) {
+                body.rowHeight = value
             }
         }
     }
@@ -340,12 +340,22 @@ class GridContainer extends BaseContainer {
         value   ?.on(listeners);
         oldValue?.un(listeners);
 
-        // in case we dynamically change the store, the view needs to get the new reference
-        if (me.view) {
-            me.view.store = value
+        // in case we dynamically change the store, grid.Body needs to get the new reference
+        if (me.body) {
+            me.body.store = value
         }
     }
 
+    /**
+     * Triggered before the bodyId config gets changed.
+     * @param {String} value
+     * @param {String} oldValue
+     * @protected
+     */
+    beforeSetBodyId(value, oldValue) {
+        return value || oldValue
+    }
+
     /**
      * Triggered before the columns config gets changed.
      * @param {Object[]} value
@@ -384,16 +394,6 @@ class GridContainer extends BaseContainer {
         return value
     }
 
-    /**
-     * Triggered before the viewId config gets changed.
-     * @param {String} value
-     * @param {String} oldValue
-     * @protected
-     */
-    beforeSetViewId(value, oldValue) {
-        return value || oldValue
-    }
-
     /**
      * In case you want to update multiple existing records in parallel,
      * using this method is faster than updating each record one by one.
@@ -401,19 +401,19 @@ class GridContainer extends BaseContainer {
      * @param {Object[]} records
      */
     bulkUpdateRecords(records) {
-        let {store, view} = this,
+        let {body, store} = this,
             {keyProperty} = store;
 
-        if (view) {
-            view.silentVdomUpdate = true;
+        if (body) {
+            body.silentVdomUpdate = true;
 
             records.forEach(item => {
                 store.get(item[keyProperty])?.set(item)
             });
 
-            view.silentVdomUpdate = false;
+            body.silentVdomUpdate = false;
 
-            view.update()
+            body.update()
         }
     }
 
@@ -527,9 +527,9 @@ class GridContainer extends BaseContainer {
         let me = this;
 
         me.scrollManager = Neo.create({
+            gridBody     : me.body,
             module       : ScrollManager,
-            gridContainer: me,
-            gridView     : me.view
+            gridContainer: me
         })
     }
 
@@ -540,11 +540,11 @@ class GridContainer extends BaseContainer {
         let me = this;
 
         if (!me.initialResizeEvent) {
-            await me.passSizeToView(true);
+            await me.passSizeToBody(true);
 
-            me.view.updateMountedAndVisibleColumns();
+            me.body.updateMountedAndVisibleColumns();
 
-            await me.headerToolbar.passSizeToView()
+            await me.headerToolbar.passSizeToBody()
         } else {
             me.initialResizeEvent = false
         }
@@ -561,7 +561,7 @@ class GridContainer extends BaseContainer {
 
         me.store.sort(opts);
         me.removeSortingCss(opts.property);
-        opts.direction && me.view.onStoreLoad()
+        opts.direction && me.body.onStoreLoad()
     }
 
     /**
@@ -589,16 +589,16 @@ class GridContainer extends BaseContainer {
      * @param {Boolean} silent=false
      * @returns {Promise<void>}
      */
-    async passSizeToView(silent=false) {
+    async passSizeToBody(silent=false) {
         let me                          = this,
             [containerRect, headerRect] = await me.getDomRect([me.id, me.headerToolbarId]);
 
         // delay for slow connections, where the container-sizing is not done yet
         if (containerRect.height === headerRect.height) {
             await me.timeout(100);
-            await me.passSizeToView(silent)
+            await me.passSizeToBody(silent)
         } else {
-            me.view[silent ? 'setSilent' : 'set']({
+            me.body[silent ? 'setSilent' : 'set']({
                 availableHeight: containerRect.height - headerRect.height,
                 containerWidth : containerRect.width
             })
@@ -624,8 +624,8 @@ class GridContainer extends BaseContainer {
      */
     scrollByColumns(index, step) {
         let me           = this,
-            {view}       = me,
-            {columnPositions, containerWidth, mountedColumns, visibleColumns} = view,
+            {body}       = me,
+            {columnPositions, containerWidth, mountedColumns, visibleColumns} = body,
             countColumns = columnPositions.getCount(),
             newIndex     = index + step,
             column, mounted, scrollLeft, visible;

package/src/grid/ScrollManager.mjs

@@ -24,15 +24,15 @@ class ScrollManager extends Base {
     }
 
     /**
-     * @member {Neo.grid.Container|null} gridContainer=null
+     * @member {Neo.grid.Body|null} gridBody=null
      * @protected
      */
-    gridContainer = null
+    gridBody = null
     /**
-     * @member {Neo.grid.View|null} gridView=null
+     * @member {Neo.grid.Container|null} gridContainer=null
      * @protected
      */
-    gridView = null
+    gridContainer = null
     /**
      * Storing touchmove position for mobile envs
      * @member {Number} lastTouchX=0
@@ -52,7 +52,7 @@ class ScrollManager extends Base {
     scrollTimeoutId = null
     /**
      * Flag for identifying the ownership of a touchmove operation
-     * @member {'container'|'view'|null} touchMoveOwner=null
+     * @member {'body'|'container'|null} touchMoveOwner=null
      * @protected
      */
     touchMoveOwner = null
@@ -65,19 +65,59 @@ class ScrollManager extends Base {
 
         let me = this;
 
-        me.gridContainer.addDomListeners({
-            scroll: me.onContainerScroll,
-            scope : me
-        });
-
-        me.gridView.addDomListeners({
-            scroll     : me.onViewScroll,
+        me.gridBody.addDomListeners({
+            scroll     : me.onBodyScroll,
             touchcancel: me.onTouchCancel,
             touchend   : me.onTouchEnd,
             scope      : me
+        });
+
+        me.gridContainer.addDomListeners({
+            scroll: me.onContainerScroll,
+            scope : me
         })
     }
 
+    /**
+     * Only triggers for vertical scrolling
+     * @param {Object} data
+     * @protected
+     */
+    onBodyScroll({scrollTop, touches}) {
+        let me   = this,
+            body = me.gridBody,
+            deltaX, lastTouchX;
+
+        me.scrollTop = scrollTop;
+
+        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
+
+        me.scrollTimeoutId = setTimeout(() => {
+            body.isScrolling = false
+        }, 100);
+
+        body.set({isScrolling: true, scrollTop});
+
+        if (touches) {
+            if (me.touchMoveOwner !== 'container') {
+                me.touchMoveOwner = 'body'
+            }
+
+            if (me.touchMoveOwner === 'body') {
+                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
+                deltaX     = me.lastTouchX - lastTouchX;
+
+                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
+                    direction: 'left',
+                    id       : me.gridContainer.id,
+                    value    : me.scrollLeft + deltaX
+                })
+
+                me.lastTouchX = lastTouchX
+            }
+        }
+    }
+
     /**
      * @param {Object} data
      * @param {Number} data.scrollLeft
@@ -86,18 +126,18 @@ class ScrollManager extends Base {
      */
     onContainerScroll({scrollLeft, target, touches}) {
         let me    = this,
-            view = me.gridView,
+            body = me.gridBody,
             deltaY, lastTouchY;
 
         // We must ignore events for grid-scrollbar
         if (target.id.includes('grid-container')) {
             me  .scrollLeft = scrollLeft;
-            view.scrollLeft = scrollLeft;
+            body.scrollLeft = scrollLeft;
 
             me.gridContainer.headerToolbar.scrollLeft = scrollLeft;
 
             if (touches && !me.gridContainer.headerToolbar.cls.includes('neo-is-dragging')) {
-                if (me.touchMoveOwner !== 'view') {
+                if (me.touchMoveOwner !== 'body') {
                     me.touchMoveOwner = 'container'
                 }
 
@@ -107,7 +147,7 @@ class ScrollManager extends Base {
 
                     deltaY !== 0 && Neo.main.DomAccess.scrollTo({
                         direction: 'top',
-                        id       : view.vdom.id,
+                        id       : body.vdom.id,
                         value    : me.scrollTop + deltaY
                     })
 
@@ -134,46 +174,6 @@ class ScrollManager extends Base {
         me.lastTouchX     = 0;
         me.lastTouchY     = 0
     }
-
-    /**
-     * Only triggers for vertical scrolling
-     * @param {Object} data
-     * @protected
-     */
-    onViewScroll({scrollTop, touches}) {
-        let me   = this,
-            view = me.gridView,
-            deltaX, lastTouchX;
-
-        me.scrollTop = scrollTop;
-
-        me.scrollTimeoutId && clearTimeout(me.scrollTimeoutId);
-
-        me.scrollTimeoutId = setTimeout(() => {
-            view.isScrolling = false
-        }, 100);
-
-        view.set({isScrolling: true, scrollTop});
-
-        if (touches) {
-            if (me.touchMoveOwner !== 'container') {
-                me.touchMoveOwner = 'view'
-            }
-
-            if (me.touchMoveOwner === 'view') {
-                lastTouchX = touches.lastTouch.clientX - touches.firstTouch.clientX;
-                deltaX     = me.lastTouchX - lastTouchX;
-
-                deltaX !== 0 && Neo.main.DomAccess.scrollTo({
-                    direction: 'left',
-                    id       : me.gridContainer.id,
-                    value    : me.scrollLeft + deltaX
-                })
-
-                me.lastTouchX = lastTouchX
-            }
-        }
-    }
 }
 
 export default Neo.setupClass(ScrollManager);

package/src/grid/VerticalScrollbar.mjs

@@ -53,9 +53,9 @@ class VerticalScrollbar extends Component {
 
         if (mounted) {
             ScrollSync.register({
-                fromId: me.parent.view.vdom.id,
+                fromId: me.parent.body.vdom.id,
                 toId  : me.id,
-                twoWay: !Neo.config.hasTouchEvents, // Syncing the scroller back to the view affects mobile scrolling
+                twoWay: !Neo.config.hasTouchEvents, // Syncing the scroller back to the body affects mobile scrolling
                 ...params
             })
         } else {

package/src/grid/_export.mjs

@@ -1,5 +1,5 @@
 import * as header from './header/_export.mjs';
+import Body        from './Body.mjs';
 import Container   from './Container.mjs';
-import View        from './View.mjs';
 
-export {header, Container, View};
+export {header, Body, Container};

package/src/grid/column/AnimatedChange.mjs

@@ -55,7 +55,7 @@ class AnimatedChange extends Column {
      */
     async onRecordChange({fields, record}) {
         let me     = this,
-            {view} = me.parent,
+            {body} = me.parent,
             cellId, field, node;
 
         for (field of fields) {
@@ -63,16 +63,16 @@ class AnimatedChange extends Column {
                 // Wait for the next animation frame
                 await me.timeout(20);
 
-                cellId = view.getCellId(me.parent.store.indexOf(record), me.dataField);
-                node   = VdomUtil.find(view.vdom, cellId)?.vdom;
+                cellId = body.getCellId(me.parent.store.indexOf(record), me.dataField);
+                node   = VdomUtil.find(body.vdom, cellId)?.vdom;
 
                 if (node) {
                     NeoArray.add(node.cls, me.getAnimationCls(record));
 
-                    // This will trigger a 2nd view update, after grid.View: onStoreRecordChange()
+                    // This will trigger a 2nd body update, after grid.Body: onStoreRecordChange()
                     // It is crucial to restart the keyframe based animation
                     // => The previous update call will remove the last animationCls
-                    view.update()
+                    body.update()
                 }
 
                 break

package/src/grid/column/Base.mjs

@@ -26,7 +26,7 @@ class Column extends Base {
         renderer_: 'cellRenderer',
         /**
          * Scope to execute the column renderer.
-         * Defaults to the grid.View.
+         * Defaults to the grid.Body.
          * You can pass the strings 'this' or 'me'
          * @member {Neo.core.Base|String|null} rendererScope=null
          */

package/src/grid/column/Component.mjs

@@ -76,7 +76,7 @@ class Component extends Column {
      */
     cellRenderer(data) {
         let {gridContainer, record, rowIndex} = data,
-            {appName, view, windowId}         = gridContainer,
+            {appName, body, windowId}         = gridContainer,
             me               = this,
             {recordProperty} = me,
             id               = me.getComponentId(rowIndex),
@@ -104,7 +104,7 @@ class Component extends Column {
                 ...componentConfig,
                 appName,
                 id,
-                parentComponent : view,
+                parentComponent : body,
                 [recordProperty]: record,
                 windowId
             });
@@ -118,10 +118,10 @@ class Component extends Column {
         }
 
         if (me.useBindings) {
-            view.getStateProvider()?.parseConfig(component)
+            body.getStateProvider()?.parseConfig(component)
         }
 
-        view.updateDepth = -1;
+        body.updateDepth = -1;
 
         return component.createVdomReference()
     }
@@ -132,9 +132,9 @@ class Component extends Column {
      */
     getComponentId(rowIndex) {
         let me     = this,
-            {view} = me.parent;
+            {body} = me.parent;
 
-        return `${me.id}-component-${rowIndex % (view.availableRows + 2 * view.bufferRowRange)}`
+        return `${me.id}-component-${rowIndex % (body.availableRows + 2 * body.bufferRowRange)}`
     }
 }
 

package/src/grid/header/Toolbar.mjs

@@ -89,7 +89,7 @@ class Toolbar extends BaseToolbar {
      */
     afterSetMounted(value, oldValue) {
         super.afterSetMounted(value, oldValue);
-        value && this.passSizeToView()
+        value && this.passSizeToBody()
     }
 
     /**
@@ -181,7 +181,7 @@ class Toolbar extends BaseToolbar {
 
         me.promiseUpdate().then(() => {
             // To prevent duplicate calls, we need to check the mounted state before the update call
-            mounted && me.passSizeToView()
+            mounted && me.passSizeToBody()
         })
     }
 
@@ -203,10 +203,10 @@ class Toolbar extends BaseToolbar {
      * @param {Boolean} silent=false
      * @returns {Promise<void>}
      */
-    async passSizeToView(silent=false) {
+    async passSizeToBody(silent=false) {
         let me              = this,
             {items}         = me,
-            {view}          = me.parent,
+            {body}          = me.parent,
             rects           = await me.getDomRect(items.map(item => item.id)),
             lastItem        = rects[rects.length - 1],
             columnPositions = rects.map((item, index) => ({dataField: items[index].dataField, width: item.width, x: item.x - rects[0].x})),
@@ -225,16 +225,16 @@ class Toolbar extends BaseToolbar {
         // Delay for slow connections, where the container-sizing is not done yet
         if (!layoutFinished) {
             await me.timeout(100);
-            await me.passSizeToView(silent)
+            await me.passSizeToBody(silent)
         } else {
-            view.columnPositions.clear();
-            view.columnPositions.add(columnPositions);
+            body.columnPositions.clear();
+            body.columnPositions.add(columnPositions);
 
-            view[silent ? 'setSilent' : 'set']({
+            body[silent ? 'setSilent' : 'set']({
                 availableWidth: lastItem.x + lastItem.width - rects[0].x
             });
 
-            !silent && view.updateMountedAndVisibleColumns()
+            !silent && body.updateMountedAndVisibleColumns()
         }
     }
 

package/src/grid/plugin/AnimateRows.mjs

@@ -1,5 +1,4 @@
 import Base     from '../../plugin/Base.mjs';
-import CssUtil  from '../../util/Css.mjs';
 import NeoArray from '../../util/Array.mjs';
 
 /**
@@ -151,7 +150,7 @@ class AnimateRows extends Base {
 
         for (rowIndex=mountedRows[0]; rowIndex < mountedRows[1]; rowIndex++) {
             record  = owner.store.getAt(rowIndex);
-            id      = owner.getRowId(record, rowIndex)
+            id      = owner.getRowId(rowIndex)
             mapItem = map[id];
 
             if (mapItem) {

package/src/main/addon/AmCharts.mjs

@@ -192,7 +192,7 @@ class AmCharts extends Base {
      * => fetching the other files after core.js is loaded
      * @param {Boolean} useFallback=false
      */
-    loadFiles(useFallback=false) {
+    async loadFiles(useFallback=false) {
         let me              = this,
             useFallbackPath = me.useFallbackPath || useFallback,
             basePath;
@@ -207,24 +207,21 @@ class AmCharts extends Base {
             basePath = useFallbackPath ? me.fallbackPath : me.downloadPath
         }
 
-        me.isLoading = true;
+        try {
+            await DomAccess.loadScript(basePath + 'core.js');
 
-        DomAccess.loadScript(basePath + 'core.js').then(() => {
-            Promise.all([
+            await Promise.all([
                 DomAccess.loadScript(basePath + 'charts.js'),
                 DomAccess.loadScript(basePath + 'maps.js'),
                 DomAccess.loadScript(basePath + 'themes/dark.js'),
                 DomAccess.loadScript(basePath + 'geodata/worldLow.js')
-            ]).then(() => {
-                me.isLoading = false;
-                me.isReady   = true
-            })
-        }).catch(e => {
+            ])
+        } catch(e) {
             if (!useFallback && !me.useFallbackPath) {
                 console.log('Download from amcharts.com failed, switching to fallback', e);
-                me.loadFiles(true)
+                await me.loadFiles(true)
             }
-        })
+        }
     }
 
     /**