neo.mjs 8.9.0 → 8.10.0

package/src/selection/grid/BaseModel.mjs

@@ -16,45 +16,11 @@ class BaseModel extends Model {
     }
 
     /**
-     * @param {Object} item
-     * @param {Boolean} [silent] true to prevent a vdom update
-     * @param {Object[]|String[]} itemCollection=this.items
-     * @param {String} [selectedCls]
+     * Convenience shortcut
+     * @member {String[]} dataFields
      */
-    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)
+    get dataFields() {
+        return this.view.parent.columns.map(c => c.dataField)
     }
 }
 

package/src/selection/grid/CellColumnModel.mjs

@@ -1,6 +1,5 @@
-import CellModel   from './CellModel.mjs';
-import ColumnModel from './ColumnModel.mjs';
-import VDomUtil    from '../../util/VDom.mjs';
+import CellModel from './CellModel.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.grid.CellColumnModel
@@ -29,19 +28,10 @@ class CellColumnModel extends CellModel {
          */
         selectedColumnCellCls: 'selected-column-cell',
         /**
-         * @member {Array|null} selectedColumnCellIds=null
+         * @member {String[]} selectedColumnCellIds=[]
          * @protected
          */
-        selectedColumnCellIds: null
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        this.selectedColumnCellIds = []
+        selectedColumnCellIds: []
     }
 
     /**
@@ -63,14 +53,15 @@ class CellColumnModel extends CellModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me = this,
-            id = data.data.currentTarget,
-            columnNodeIds, index, tbodyNode;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
-            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom.cn[0], index);
 
             me.deselectAllCells(true);
             me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -80,29 +71,31 @@ class CellColumnModel extends CellModel {
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            fields        = view.columns.map(c => c.dataField),
-            newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
-            columnNodeIds, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += fields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
+        }
+
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom.cn[0], index);
 
         me.deselectAllCells(true);
         me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
 
-        super.onNavKeyColumn(data, step)
+        super.onNavKeyColumn(step)
     }
 
     /**

package/src/selection/grid/CellColumnRowModel.mjs

@@ -1,5 +1,4 @@
 import CellRowModel from './CellRowModel.mjs';
-import ColumnModel  from './ColumnModel.mjs';
 import VDomUtil     from '../../util/VDom.mjs';
 
 /**
@@ -29,19 +28,10 @@ class CellColumnRowModel extends CellRowModel {
          */
         selectedColumnCellCls: 'selected-column-cell',
         /**
-         * @member {Array|null} selectedColumnCellIds=null
+         * @member {String[]} selectedColumnCellIds=[]
          * @protected
          */
-        selectedColumnCellIds: null
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        this.selectedColumnCellIds = []
+        selectedColumnCellIds: []
     }
 
     /**
@@ -63,14 +53,15 @@ class CellColumnRowModel extends CellRowModel {
      * @param {Object} data
      */
     onCellClick(data) {
-        let me = this,
-            id = ColumnModel.getCellId(data.data.path),
-            columnNodeIds, index, tbodyNode;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
-            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom.cn[0], index);
 
             me.deselectAllCells(true);
             me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls)
@@ -80,29 +71,31 @@ class CellColumnRowModel extends CellRowModel {
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            fields        = view.columns.map(c => c.dataField),
-            newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
-            columnNodeIds, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += fields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
+        }
+
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
         }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom.cn[0], index);
 
         me.deselectAllCells(true);
         me.select(columnNodeIds, me.selectedColumnCellIds, me.selectedColumnCellCls);
 
-        super.onNavKeyColumn(data, step)
+        super.onNavKeyColumn(step)
     }
 
     /**

package/src/selection/grid/CellModel.mjs

@@ -29,7 +29,7 @@ class CellModel extends BaseModel {
     addDomListener() {
         let me = this;
 
-        me.view.on('cellClick', me.onCellClick, me)
+        me.view.parent.on('cellClick', me.onCellClick, me)
     }
 
     /**
@@ -38,7 +38,7 @@ class CellModel extends BaseModel {
     destroy(...args) {
         let me = this;
 
-        me.view.un('cellClick', me.onCellClick, me);
+        me.view.parent.un('cellClick', me.onCellClick, me);
 
         super.destroy(...args)
     }
@@ -54,76 +54,80 @@ class CellModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownDown(data) {
-        this.onNavKeyRow(data, 1)
+        this.onNavKeyRow(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(data, -1)
+        this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(data, 1)
+        this.onNavKeyColumn(1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownUp(data) {
-        this.onNavKeyRow(data, -1)
+        this.onNavKeyRow(-1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            {view}        = me,
-            idArray       = data.path[0].id.split('__'),
-            currentColumn = idArray[2],
-            dataFields    = view.columns.map(c => c.dataField),
-            newIndex      = (dataFields.indexOf(currentColumn) + step) % dataFields.length,
-            id;
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            {store}            = view,
+            currentColumn, newIndex, record;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0]);
+            record        = view.getRecord(me.items[0])
+        } else {
+            currentColumn = dataFields[0];
+            record        = store.getAt(0)
+        }
+
+        newIndex = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
 
         while (newIndex < 0) {
             newIndex += dataFields.length
         }
 
-        idArray[2] = dataFields[newIndex];
-        id = idArray.join('__');
-
-        me.select(id);
-        view.focus(id)
+        me.select(view.getCellId(record, dataFields[newIndex]))
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
-        let me       = this,
-            {view}   = me,
-            {store}  = view,
-            idArray  = data.path[0].id.split('__'),
-            recordId = idArray[1],
-            newIndex = (store.indexOf(recordId) + step) % store.getCount(),
-            id;
+    onNavKeyRow(step) {
+        let me           = this,
+            {view}       = me,
+            {store}      = view,
+            currentIndex = 0,
+            dataField, newIndex;
+
+        if (me.hasSelection()) {
+            currentIndex = store.indexOf(view.getRecord(me.items[0]));
+            dataField    = view.getDataField(me.items[0])
+        } else {
+            dataField = me.dataFields[0]
+        }
+
+        newIndex = (currentIndex + step) % store.getCount();
 
         while (newIndex < 0) {
             newIndex += store.getCount()
         }
 
-        idArray[1] = store.getKeyAt(newIndex);
-        id = idArray.join('__');
-
-        me.select(id);
-        view.focus(id)
+        me.select(view.getCellId(store.getAt(newIndex), dataField))
     }
 
     /**
@@ -133,13 +137,14 @@ class CellModel extends BaseModel {
         super.register(component);
 
         let me         = this,
-            {id, view} = me;
+            {id, view} = me,
+            scope      = id;
 
         view.keys?._keys.push(
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope}
         )
     }
 
@@ -148,13 +153,14 @@ class CellModel extends BaseModel {
      */
     unregister() {
         let me         = this,
-            {id, view} = me;
+            {id, view} = me,
+            scope      = id;
 
         view.keys?.removeKeys([
-            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope: id},
-            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope: id},
-            {fn: 'onKeyDownRight' ,key: 'Right' ,scope: id},
-            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope: id}
+            {fn: 'onKeyDownDown'  ,key: 'Down'  ,scope},
+            {fn: 'onKeyDownLeft'  ,key: 'Left'  ,scope},
+            {fn: 'onKeyDownRight' ,key: 'Right' ,scope},
+            {fn: 'onKeyDownUp'    ,key: 'Up'    ,scope}
         ]);
 
         super.unregister()

package/src/selection/grid/CellRowModel.mjs

@@ -1,7 +1,5 @@
 import CellModel from './CellModel.mjs';
 import NeoArray  from '../../util/Array.mjs';
-import RowModel  from './RowModel.mjs';
-import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.grid.CellRowModel
@@ -25,19 +23,10 @@ class CellRowModel extends CellModel {
          */
         cls: 'neo-selection-cellrowmodel',
         /**
-         * @member {Array|null} selectedRowIds=null
+         * @member {String[]} selectedRowIds=[]
          * @protected
          */
-        selectedRowIds: null
-    }
-
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        this.selectedRowIds = []
+        selectedRowIds: []
     }
 
     /**
@@ -73,49 +62,46 @@ class CellRowModel extends CellModel {
 
         NeoArray.remove(me.selectedRowIds, rowId);
 
-        if (!silent) {
-            view.updateDepth = 2;
-            view.update()
-        }
+        !silent && view.update()
     }
 
     /**
      * @param {Object} data
      */
     onCellClick(data) {
-        let me   = this,
-            node = RowModel.getRowNode(data.data.path), // we could add a separate export for this method
-            id   = node?.id;
+        let me     = this,
+            record = me.view.getRecord(data.data.currentTarget),
+            rowId  = me.view.getRowId(record);
 
-        if (id) {
+        if (rowId) {
             me.deselectAllRows(true);
-            me.selectRow(id)
+            me.selectRow(rowId)
         }
 
         super.onCellClick(data)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyRow(data, step) {
-        super.onNavKeyRow(data, step);
+    onNavKeyRow(step) {
+        super.onNavKeyRow(step);
 
         let me           = this,
-            node         = RowModel.getRowNode(data.path),
             {view}       = me,
             {store}      = view,
-            vdomNode     = VDomUtil.find(view.vdom, node.id),
-            newIndex     = (vdomNode.index + step) % store.getCount(),
-            {parentNode} = vdomNode,
+            countRecords = store.getCount(),
+            rowId        = me.selectedRowIds[0] || view.getRowId(store.getAt(0)),
+            record       = view.getRecord(rowId),
+            index        = store.indexOf(record),
+            newIndex     = (index + step) % countRecords,
             id;
 
         while (newIndex < 0) {
-            newIndex += store.getCount()
+            newIndex += countRecords
         }
 
-        id = parentNode.cn[newIndex].id;
+        id = view.getRowId(store.getAt(newIndex));
 
         if (id) {
             me.deselectAllRows(true);
@@ -141,10 +127,7 @@ class CellRowModel extends CellModel {
             me.selectedRowIds.push(id)
         }
 
-        if (!silent) {
-            view.updateDepth = 2;
-            view.update()
-        }
+        !silent && view.update()
     }
 
     /**

package/src/selection/grid/ColumnModel.mjs

@@ -30,7 +30,7 @@ class ColumnModel extends BaseModel {
     addDomListener() {
         let me = this;
 
-        me.view.on('cellClick', me.onCellClick, me)
+        me.view.parent.on('cellClick', me.onCellClick, me)
     }
 
     /**
@@ -39,56 +39,24 @@ class ColumnModel extends BaseModel {
     destroy(...args) {
         let me = this;
 
-        me.view.un('cellClick', me.onCellClick, me);
+        me.view.parent.un('cellClick', me.onCellClick, me);
 
         super.destroy(...args)
     }
 
-    /**
-     * @param {Object} eventPath
-     * @returns {String|null} cellId
-     */
-    static getCellId(eventPath) {
-        let id   = null,
-            i    = 0,
-            len  = eventPath.length;
-
-        for (; i < len; i++) {
-            if (eventPath[i].cls.includes('neo-grid-cell')) {
-                id = eventPath[i].id;
-                break
-            }
-        }
-
-        return id
-    }
-
-    /**
-     * todo: move to grid.Container or view
-     * @param {String} cellId
-     * @param {Object[]} columns
-     * @returns {Number} index
-     */
-    static getColumnIndex(cellId, columns) {
-        let idArray       = cellId.split('__'),
-            currentColumn = idArray[2],
-            dataFields    = columns.map(c => c.dataField);
-
-        return dataFields.indexOf(currentColumn)
-    }
-
     /**
      * @param {Object} data
      */
     onCellClick(data) {
-        let me = this,
-            id = data.data.currentTarget,
-            columnNodeIds, index, tbodyNode;
+        let me     = this,
+            {view} = me,
+            cellId = data.data.currentTarget,
+            columnNodeIds, dataField, index;
 
-        if (id) {
-            index         = ColumnModel.getColumnIndex(id, me.view.items[0].items);
-            tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
-            columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, index);
+        if (cellId) {
+            dataField     = view.getDataField(cellId);
+            index         = view.getColumn(dataField, true);
+            columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom.cn[0], index);
 
             me.select(columnNodeIds)
         }
@@ -98,41 +66,39 @@ class ColumnModel extends BaseModel {
      * @param {Object} data
      */
     onKeyDownLeft(data) {
-        this.onNavKeyColumn(data, -1)
+        this.onNavKeyColumn(-1)
     }
 
     /**
      * @param {Object} data
      */
     onKeyDownRight(data) {
-        this.onNavKeyColumn(data, 1)
+        this.onNavKeyColumn(1)
     }
 
     /**
-     * @param {Object} data
      * @param {Number} step
      */
-    onNavKeyColumn(data, step) {
-        let me            = this,
-            idArray       = ColumnModel.getCellId(data.path).split('__'),
-            currentColumn = idArray[2],
-            {view}        = me,
-            fields        = view.columns.map(c => c.dataField),
-            newIndex      = (fields.indexOf(currentColumn) + step) % fields.length,
-            columnNodeIds, id, tbodyNode;
-
-        while (newIndex < 0) {
-            newIndex += fields.length
+    onNavKeyColumn(step) {
+        let me                 = this,
+            {dataFields, view} = me,
+            columnNodeIds, currentColumn, index;
+
+        if (me.hasSelection()) {
+            currentColumn = view.getDataField(me.items[0])
+        } else {
+            currentColumn = dataFields[0]
         }
 
-        idArray[2] = fields[newIndex];
-        id = idArray.join('__');
+        index = (dataFields.indexOf(currentColumn) + step) % dataFields.length;
+
+        while (index < 0) {
+            index += dataFields.length
+        }
 
-        tbodyNode     = VDomUtil.find(me.view.vdom, {cls: 'neo-grid-view'}).vdom;
-        columnNodeIds = VDomUtil.getColumnNodesIds(tbodyNode, newIndex);
+        columnNodeIds = VDomUtil.getColumnNodesIds(view.vdom.cn[0], index);
 
-        me.select(columnNodeIds);
-        view.focus(id) // we have to focus one cell to ensure the keynav keeps working
+        me.select(columnNodeIds)
     }
 
     /**

package/src/selection/grid/RowModel.mjs

@@ -39,7 +39,7 @@ class RowModel extends BaseModel {
     destroy(...args) {
         let me = this;
 
-        me.view.un('rowClick', me.onRowClick, me);
+        me.view.gridContainer.un('rowClick', me.onRowClick, me);
 
         super.destroy(...args)
     }
@@ -103,7 +103,7 @@ class RowModel extends BaseModel {
             me.toggleSelection(id);
 
             isSelected = me.isSelected(id);
-            record     = view.store.getAt(VDomUtil.find(view.vdom, id).index);
+            record     = view.getRecord(id);
 
             !isSelected && view.onDeselect?.(record);