neo.mjs 7.15.0 → 8.0.0-alpha.1

package/src/selection/grid/RowModel.mjs

@@ -1,11 +1,11 @@
-import Model    from '../Model.mjs';
-import VDomUtil from '../../util/VDom.mjs';
+import BaseModel from './BaseModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.grid.RowModel
- * @extends Neo.selection.Model
+ * @extends Neo.selection.grid.BaseModel
  */
-class RowModel extends Model {
+class RowModel extends BaseModel {
     static config = {
         /**
          * @member {String} className='Neo.selection.grid.RowModel'
@@ -41,7 +41,7 @@ class RowModel extends Model {
 
         me.view.un('rowClick', me.onRowClick, me);
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -100,7 +100,7 @@ class RowModel extends Model {
             node         = RowModel.getRowNode(data.path),
             {view}       = me,
             {store}      = view,
-            vdomNode     = VDomUtil.findVdomChild(view.vdom, node.id),
+            vdomNode     = VDomUtil.find(view.vdom, node.id),
             newIndex     = (vdomNode.index + step) % store.getCount(),
             {parentNode} = vdomNode,
             id;
@@ -134,7 +134,7 @@ class RowModel extends Model {
             me.toggleSelection(id);
 
             isSelected = me.isSelected(id);
-            record     = view.store.getAt(VDomUtil.findVdomChild(view.vdom, id).index);
+            record     = view.store.getAt(VDomUtil.find(view.vdom, id).index);
 
             !isSelected && view.onDeselect?.(record);
 
@@ -152,15 +152,10 @@ class RowModel extends Model {
 
         let {id, view} = this;
 
-        view.keys?._keys.push({
-            fn   : 'onKeyDownDown',
-            key  : 'Down',
-            scope: id
-        }, {
-            fn   : 'onKeyDownUp',
-            key  : 'Up',
-            scope: id
-        })
+        view.keys?._keys.push(
+            {fn: 'onKeyDownDown', key: 'Down', scope: id},
+            {fn: 'onKeyDownUp',   key: 'Up',   scope: id}
+        )
     }
 
     /**
@@ -169,15 +164,10 @@ class RowModel extends Model {
     unregister() {
         let {id, view} = this;
 
-        view.keys?.removeKeys([{
-            fn   : 'onKeyDownDown',
-            key  : 'Down',
-            scope: id
-        }, {
-            fn   : 'onKeyDownUp',
-            key  : 'Up',
-            scope: id
-        }]);
+        view.keys?.removeKeys([
+            {fn: 'onKeyDownDown', key: 'Down', scope: id},
+            {fn: 'onKeyDownUp',   key: 'Up',   scope: id}
+        ]);
 
         super.unregister()
     }

package/src/selection/menu/ListModel.mjs

@@ -43,11 +43,7 @@ class ListModel extends BaseListModel {
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        let activeSubMenu = this.view.activeSubMenu;
-
-        if (activeSubMenu) {
-            activeSubMenu.selectionModel.selectAt(0)
-        }
+        this.view.activeSubMenu?.selectionModel.selectAt(0)
     }
 }
 

package/src/selection/table/BaseModel.mjs

@@ -0,0 +1,61 @@
+import Model from '../Model.mjs';
+
+/**
+ * Abstract base class for all table related selection models
+ * @class Neo.selection.table.BaseModel
+ * @extends Neo.selection.Model
+ * @abstract
+ */
+class BaseModel extends Model {
+    static config = {
+        /**
+         * @member {String} className='Neo.selection.table.BaseModel'
+         * @protected
+         */
+        className: 'Neo.selection.table.BaseModel'
+    }
+
+    /**
+     * @param {Object} item
+     * @param {Boolean} [silent] true to prevent a vdom update
+     * @param {Object[]|String[]} itemCollection=this.items
+     * @param {String} [selectedCls]
+     */
+    deselect(item, silent, itemCollection=this.items, selectedCls) {
+        let {view} = this;
+
+        if (!silent) {
+            view.updateDepth = 2
+        }
+
+        super.deselect(item, silent, itemCollection, selectedCls)
+    }
+
+    /**
+     * @param {Boolean} [silent] true to prevent a vdom update
+     */
+    deselectAll(silent) {
+        let {view} = this;
+
+        if (!silent) {
+            view.updateDepth = 2
+        }
+
+        super.deselectAll(silent)
+    }
+
+    /**
+     * @param {Object} args
+     */
+    select(...args) {
+        let {view} = this;
+
+        if (!view.silentSelect) {
+            view.updateDepth = 2
+        }
+
+        super.select(...args)
+    }
+}
+
+export default Neo.setupClass(BaseModel);

package/src/selection/table/CellColumnModel.mjs

@@ -69,7 +69,7 @@ class CellColumnModel extends CellModel {
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.deselectAllCells(true);
@@ -96,7 +96,7 @@ class CellColumnModel extends CellModel {
             newIndex += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.deselectAllCells(true);

package/src/selection/table/CellColumnRowModel.mjs

@@ -69,7 +69,7 @@ class CellColumnRowModel extends CellRowModel {
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.deselectAllCells(true);
@@ -96,7 +96,7 @@ class CellColumnRowModel extends CellRowModel {
             newIndex += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.deselectAllCells(true);

package/src/selection/table/CellModel.mjs

@@ -1,10 +1,10 @@
-import Model from '../Model.mjs';
+import BaseModel from './BaseModel.mjs';
 
 /**
  * @class Neo.selection.table.CellModel
- * @extends Neo.selection.Model
+ * @extends Neo.selection.table.BaseModel
  */
-class CellModel extends Model {
+class CellModel extends BaseModel {
     static config = {
         /**
          * @member {String} className='Neo.selection.table.CellModel'
@@ -40,7 +40,7 @@ class CellModel extends Model {
 
         me.view.un('cellClick', me.onCellClick, me);
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**

package/src/selection/table/CellRowModel.mjs

@@ -73,7 +73,10 @@ class CellRowModel extends CellModel {
 
         NeoArray.remove(me.selectedRowIds, rowId);
 
-        !silent && view.update()
+        if (!silent) {
+            view.updateDepth = 2;
+            view.update()
+        }
     }
 
     /**
@@ -103,7 +106,7 @@ class CellRowModel extends CellModel {
             node       = RowModel.getRowNode(data.path),
             {view}     = me,
             {store}    = view,
-            vdomNode   = VDomUtil.findVdomChild(view.vdom, node.id),
+            vdomNode   = VDomUtil.find(view.vdom, node.id),
             newIndex   = (vdomNode.index + step) % store.getCount(),
             parentNode = vdomNode.parentNode,
             id;
@@ -138,7 +141,10 @@ class CellRowModel extends CellModel {
             me.selectedRowIds.push(id)
         }
 
-        !silent && view.update()
+        if (!silent) {
+            view.updateDepth = 2;
+            view.update()
+        }
     }
 
     /**

package/src/selection/table/ColumnModel.mjs

@@ -1,11 +1,11 @@
-import Model    from '../Model.mjs';
-import VDomUtil from '../../util/VDom.mjs';
+import BaseModel from './BaseModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.ColumnModel
- * @extends Neo.selection.Model
+ * @extends Neo.selection.table.BaseModel
  */
-class ColumnModel extends Model {
+class ColumnModel extends BaseModel {
     static config = {
         /**
          * @member {String} className='Neo.selection.table.ColumnModel'
@@ -41,7 +41,7 @@ class ColumnModel extends Model {
 
         me.view.un('cellClick', me.onCellClick, me);
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -87,7 +87,7 @@ class ColumnModel extends Model {
 
         if (id) {
             index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+            tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
             columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
 
             me.select(columnNodeIds)
@@ -128,7 +128,7 @@ class ColumnModel extends Model {
         idArray[2] = dataFields[newIndex];
         id = idArray.join('__');
 
-        tbodyNode     = VDomUtil.findVdomChild(me.view.vdom, {tag: 'tbody'}).vdom;
+        tbodyNode     = VDomUtil.find(me.view.vdom, {tag: 'tbody'}).vdom;
         columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
 
         me.select(columnNodeIds);
@@ -149,7 +149,6 @@ class ColumnModel extends Model {
         )
     }
 
-
     /**
      *
      */

package/src/selection/table/RowModel.mjs

@@ -1,11 +1,11 @@
-import Model    from '../Model.mjs';
-import VDomUtil from '../../util/VDom.mjs';
+import BaseModel from './BaseModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.table.RowModel
- * @extends Neo.selection.Model
+ * @extends Neo.selection.table.BaseModel
  */
-class RowModel extends Model {
+class RowModel extends BaseModel {
     static config = {
         /**
          * @member {String} className='Neo.selection.table.RowModel'
@@ -41,7 +41,7 @@ class RowModel extends Model {
 
         me.view.un('rowClick', me.onRowClick, me);
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -100,7 +100,7 @@ class RowModel extends Model {
             node         = RowModel.getRowNode(data.path),
             {view}       = me,
             {store}      = view,
-            vdomNode     = VDomUtil.findVdomChild(view.vdom, node.id),
+            vdomNode     = VDomUtil.find(view.vdom, node.id),
             newIndex     = (vdomNode.index + step) % store.getCount(),
             {parentNode} = vdomNode,
             id;
@@ -134,7 +134,7 @@ class RowModel extends Model {
             me.toggleSelection(id);
 
             isSelected = me.isSelected(id);
-            record     = view.store.getAt(VDomUtil.findVdomChild(view.vdom, id).index);
+            record     = view.store.getAt(VDomUtil.find(view.vdom, id).index);
 
             !isSelected && view.onDeselect?.(record);
 

package/src/table/Container.mjs

@@ -231,6 +231,7 @@ class Container extends BaseContainer {
         if (me.dockRightMargin) {
             cssRules.push('#' + id + '::-webkit-scrollbar-track:horizontal {margin-right: ' + me.dockRightMargin + 'px;}')
         }
+
         if (cssRules.length > 0) {
             CssUtil.insertRules(me.appName, cssRules)
         }

package/src/table/View.mjs

@@ -55,6 +55,19 @@ class View extends Component {
         {tag: 'tbody', cn: []}
     }
 
+    /**
+     * @member {String[]} selectedRows
+     */
+    get selectedRows() {
+        let tableContainer = this.parent;
+
+        if (tableContainer.selectionModel.ntype === 'selection-table-rowmodel') {
+            return tableContainer.selectionModel.items
+        }
+
+        return []
+    }
+
     /**
      * @param config
      */
@@ -167,98 +180,106 @@ class View extends Component {
     }
 
     /**
-     * @param {Object[]} inputData
+     * @param {Object} opts
+     * @param {Object} opts.record
+     * @param {Number} opts.rowIndex
+     * @returns {Object}
      */
-    createViewData(inputData) {
-        let me             = this,
-            amountRows     = inputData.length,
-            tableContainer = me.parent,
-            columns        = tableContainer.items[0].items,
-            colCount       = columns.length,
-            data           = [],
-            i              = 0,
-            {vdom}         = me,
-            config, colspan, colspanKeys, column, dockLeftMargin, dockRightMargin, id, index, j, record, selectedRows, trCls;
-
-        if (tableContainer.selectionModel.ntype === 'selection-table-rowmodel') {
-            selectedRows = tableContainer.selectionModel.items || [];
+    createTableRow({record, rowIndex}) {
+        let me              = this,
+            tableContainer  = me.parent,
+            colspan         = record[me.colspanField],
+            colspanKeys     = colspan && Object.keys(colspan),
+            columns         = tableContainer.items[0].items,
+            colCount        = columns.length,
+            dockLeftMargin  = 0,
+            dockRightMargin = 0,
+            id              = me.getRowId(record, rowIndex),
+            {selectedRows}  = me,
+            trCls           = me.getTrClass(record, rowIndex),
+            config, column, columnIndex, i, tableRow;
+
+        me.recordVnodeMap[id] = rowIndex;
+
+        if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
+            NeoArray.add(selectedRows, id)
         }
 
-        for (; i < amountRows; i++) {
-            record      = inputData[i];
-            colspan     = record[me.colspanField];
-            colspanKeys = colspan && Object.keys(colspan);
-            id          = me.getRowId(record, i);
+        if (selectedRows?.includes(id)) {
+            trCls.push('neo-selected');
 
-            me.recordVnodeMap[id] = i;
+            me.parent.fire('select', {
+                record
+            })
+        }
 
-            trCls = me.getTrClass(record, i);
+        tableRow = {
+            tag     : 'tr',
+            id,
+            cls     : trCls,
+            cn      : [],
+            tabIndex: '-1'
+        };
 
-            if (selectedRows && Neo.ns(me.selectedRecordField, false, record)) {
-                NeoArray.add(selectedRows, id)
-            }
+        for (i=0; i < colCount; i++) {
+            column = columns[i];
+            config = me.applyRendererOutput({column, record, index: rowIndex, tableContainer});
 
-            if (selectedRows?.includes(id)) {
-                trCls.push('neo-selected');
+            if (column.dock) {
+                config.cls = ['neo-locked', ...config.cls || []];
 
-                me.parent.fire('select', {
-                    record
-                })
+                if (column.dock === 'left') {
+                    config.style.left = dockLeftMargin + 'px';
+                    dockLeftMargin += (column.width + 1) // todo: borders fix
+                }
             }
 
-            data.push({
-                tag     : 'tr',
-                id,
-                cls     : trCls,
-                cn      : [],
-                tabIndex: '-1'
-            });
+            if (column.flex) {
+                config.style.width = '100%'
+            }
 
-            dockLeftMargin  = 0;
-            dockRightMargin = 0;
+            tableRow.cn.push(config);
 
-            for (j=0; j < colCount; j++) {
-                column = columns[j];
-                config = me.applyRendererOutput({column, record, index: i, tableContainer});
+            if (colspanKeys?.includes(column.dataField)) {
+                i += (colspan[column.dataField] - 1)
+            }
+        }
 
-                if (column.dock) {
-                    config.cls = ['neo-locked', ...config.cls || []];
+        for (i=0; i < colCount; i++) {
+            columnIndex = colCount - i -1;
+            column      = columns[columnIndex];
 
-                    if (column.dock === 'left') {
-                        config.style.left = dockLeftMargin + 'px';
-                        dockLeftMargin += (column.width + 1) // todo: borders fix
-                    }
-                }
-
-                if (column.flex) {
-                    config.style.width = '100%'
-                }
-
-                data[i].cn.push(config);
+            if (column.dock === 'right') {
+                tableRow.cn[columnIndex].style.right = dockRightMargin + 'px';
+                dockRightMargin += (column.width + 1) // todo: borders fix
+            }
 
-                if (colspanKeys?.includes(column.dataField)) {
-                    j += (colspan[column.dataField] - 1)
-                }
+            if (colspanKeys?.includes(column.dataField)) {
+                i += (colspan[column.dataField] - 1)
             }
+        }
 
-            for (j=0; j < colCount; j++) {
-                index  = colCount - j -1;
-                column = columns[index];
+        // the dock margins are the same for each row
+        rowIndex === 0 && Object.assign(tableContainer, {dockLeftMargin, dockRightMargin});
 
-                if (column.dock === 'right') {
-                    data[i].cn[index].style.right = dockRightMargin + 'px';
-                    dockRightMargin += (column.width + 1) // todo: borders fix
-                }
+        return tableRow
+    }
 
-                if (colspanKeys?.includes(column.dataField)) {
-                    j += (colspan[column.dataField] - 1)
-                }
-            }
-        }
+    /**
+     * @param {Object[]} inputData
+     */
+    createViewData(inputData) {
+        let me             = this,
+            amountRows     = inputData.length,
+            i              = 0,
+            rows           = [],
+            {selectedRows} = me;
 
-        vdom.cn = data;
+        for (; i < amountRows; i++) {
+            rows.push(me.createTableRow({record: inputData[i], rowIndex: i}))
+        }
 
-        Object.assign(tableContainer, {dockLeftMargin, dockRightMargin});
+        me.vdom.cn = rows;
 
         me.promiseUpdate().then(() => {
             if (selectedRows?.length > 0) {
@@ -440,9 +461,9 @@ class View extends Component {
      * @param {Neo.data.Model} opts.model The model instance of the changed record
      * @param {Object} opts.record
      */
-    onStoreRecordChange(opts) {
+    onStoreRecordChange({fields, model, record}) {
         let me               = this,
-            fieldNames       = opts.fields.map(field => field.name),
+            fieldNames       = fields.map(field => field.name),
             needsUpdate      = false,
             tableContainer   = me.parent,
             {selectionModel} = tableContainer,
@@ -450,17 +471,18 @@ class View extends Component {
             cellId, cellNode, column, index, scope;
 
         if (fieldNames.includes(me.colspanField)) {
-            // we should narrow it down to only update the current row
-            me.createViewData(me.store.items)
+            index = me.store.indexOf(record);
+            me.vdom.cn[index] = me.createTableRow({record, rowIndex: index});
+            me.update()
         } else {
-            opts.fields.forEach(field => {
+            fields.forEach(field => {
                 if (field.name === me.selectedRecordField) {
                     if (selectionModel.ntype === 'selection-table-rowmodel') {
-                        selectionModel[!field.value && selectionModel.singleSelect ? 'deselect' : 'select'](me.getRowId(opts.record))
+                        selectionModel[field.value ? 'select' : 'deselect'](me.getRowId(record))
                     }
                 } else {
-                    cellId   = me.getCellId(opts.record, field.name);
-                    cellNode = VDomUtil.findVdomChild(vdom, cellId);
+                    cellId   = me.getCellId(record, field.name);
+                    cellNode = VDomUtil.find(vdom, cellId);
 
                     // the vdom might not exist yet => nothing to do in this case
                     if (cellNode?.vdom) {
@@ -469,7 +491,7 @@ class View extends Component {
                         needsUpdate = true;
                         scope       = column.rendererScope || tableContainer;
 
-                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record: opts.record, index, tableContainer})
+                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record, index, tableContainer})
                     }
                 }
             })

package/src/table/header/Button.mjs

@@ -204,6 +204,7 @@ class Button extends BaseButton {
                     flag     : 'filter-field',
                     hideLabel: true,
                     parentId : me.id,
+                    style    : {marginLeft: '.5em', marginRight: '.5em'},
                     windowId : me.windowId,
 
                     listeners: {
@@ -212,14 +213,10 @@ class Button extends BaseButton {
                         scope         : me
                     },
 
-                    style: {
-                        marginLeft : '.5em',
-                        marginRight: '.5em'
-                    },
                     ...me.editorConfig
                 });
 
-                me.vdom.cn.push(me.filterField.vdom)
+                me.vdom.cn.push(me.filterField.createVdomReference())
             } else {
                 delete me.filterField.vdom.removeDom
             }
@@ -227,6 +224,7 @@ class Button extends BaseButton {
             me.filterField.vdom.removeDom = true
         }
 
+        me.updateDepth = 2;
         me.update()
     }
 

package/src/table/header/Toolbar.mjs

@@ -63,6 +63,7 @@ class Toolbar extends BaseToolbar {
                 })
             });
 
+            me.updateDepth = -1; // filters can be deeply nested
             me.update()
         }
     }

package/src/tree/List.mjs

@@ -475,7 +475,7 @@ class Tree extends Base {
     onStoreRecordChange(data) {
         let me                  = this,
             {record}            = data,
-            {index, parentNode} = VDomUtil.findVdomChild(me.vdom, me.getItemId(record.id));
+            {index, parentNode} = VDomUtil.find(me.vdom, me.getItemId(record.id));
 
         parentNode.cn[index] = me.createItem(record);