neo.mjs 8.11.0 → 8.13.0

package/src/selection/grid/RowModel.mjs

@@ -1,5 +1,4 @@
 import BaseModel from './BaseModel.mjs';
-import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.selection.grid.RowModel
@@ -44,6 +43,14 @@ class RowModel extends BaseModel {
         super.destroy(...args)
     }
 
+    /**
+     * @param {Record} record
+     * @returns {Boolean}
+     */
+    hasAnnotations(record) {
+        return !!Object.getOwnPropertyDescriptor(record.__proto__, this.view.selectedRecordField)
+    }
+
     /**
      * @param {Object} data
      */
@@ -65,28 +72,31 @@ class RowModel extends BaseModel {
         let me           = this,
             {view}       = me,
             {store}      = view,
+            countRecords = store.getCount(),
             currentIndex = 0,
-            newIndex, newRecord, rowId;
+            newIndex, record, rowId;
 
         if (me.hasSelection()) {
             currentIndex = store.indexOf(view.getRecordByRowId(me.items[0]))
         }
 
-        newIndex = (currentIndex + step) % store.getCount();
+        newIndex = (currentIndex + step) % countRecords;
 
         while (newIndex < 0) {
-            newIndex += store.getCount()
+            newIndex += countRecords
         }
 
-        newRecord = store.getAt(newIndex);
-        rowId     = view.getRowId(newRecord);
+        record = store.getAt(newIndex);
 
-        if (rowId) {
-            me.select(rowId);
+        if (me.hasAnnotations(record)) {
+            me.updateAnnotations(record)
+        } else {
+            rowId = view.getRowId(record);
 
-            view.fire('select', {
-                record: store.getAt(newIndex)
-            })
+            if (rowId) {
+                me.select(rowId);
+                view.fire('select', {record})
+            }
         }
     }
 
@@ -100,16 +110,19 @@ class RowModel extends BaseModel {
             isSelected, record;
 
         if (id) {
-            me.toggleSelection(id);
+            record = view.getRecord(id);
+
+            if (me.hasAnnotations(record)) {
+                me.updateAnnotations(record)
+            } else {
+                me.toggleSelection(id);
 
-            isSelected = me.isSelected(id);
-            record     = view.getRecord(id);
+                isSelected = me.isSelected(id);
 
-            !isSelected && view.onDeselect?.(record);
+                !isSelected && view.onDeselect?.(record);
 
-            view.fire(isSelected ? 'select' : 'deselect', {
-                record
-            })
+                view.fire(isSelected ? 'select' : 'deselect', {record})
+            }
         }
     }
 
@@ -140,6 +153,32 @@ class RowModel extends BaseModel {
 
         super.unregister()
     }
+
+    /**
+     * @param {Record} record
+     */
+    updateAnnotations(record) {
+        let me               = this,
+            {view}           = me,
+            rowId            = view.getRowId(record),
+            isSelected       = me.isSelected(rowId),
+            annotationsField = view.selectedRecordField;
+
+        if (me.singleSelect) {
+            if (isSelected) {
+                record[annotationsField] = false
+            } else {
+                me.items.forEach(rowId => {
+                    // We can use setSilent(), since the last change will trigger a view update
+                    view.getRecordByRowId(rowId).setSilent({[annotationsField]: false})
+                });
+
+                record[annotationsField] = true
+            }
+        } else {
+            record[annotationsField] = !record[annotationsField]
+        }
+    }
 }
 
 export default Neo.setupClass(RowModel);

package/src/selection/table/BaseModel.mjs

@@ -20,7 +20,7 @@ class BaseModel extends Model {
      * @member {String[]} dataFields
      */
     get dataFields() {
-        return this.view.parent.columns.map(c => c.dataField)
+        return this.view.parent.columns.map(column => column.dataField)
     }
 }
 

package/src/selection/table/RowModel.mjs

@@ -23,6 +23,14 @@ class RowModel extends BaseModel {
         cls: 'neo-selection-rowmodel'
     }
 
+    /**
+     * @param {Record} record
+     * @returns {Boolean}
+     */
+    hasAnnotations(record) {
+        return !!Object.getOwnPropertyDescriptor(record.__proto__, this.view.selectedRecordField)
+    }
+
     /**
      *
      */
@@ -64,28 +72,31 @@ class RowModel extends BaseModel {
         let me           = this,
             {view}       = me,
             {store}      = view,
+            countRecords = store.getCount(),
             currentIndex = 0,
-            newIndex, newRecord, rowId;
+            newIndex, record, rowId;
 
         if (me.hasSelection()) {
             currentIndex = store.indexOf(view.getRecordByRowId(me.items[0]))
         }
 
-        newIndex = (currentIndex + step) % store.getCount();
+        newIndex = (currentIndex + step) % countRecords;
 
         while (newIndex < 0) {
-            newIndex += store.getCount()
+            newIndex += countRecords
         }
 
-        newRecord = store.getAt(newIndex);
-        rowId     = view.getRowId(newRecord);
+        record = store.getAt(newIndex);
 
-        if (rowId) {
-            me.select(rowId);
+        if (me.hasAnnotations(record)) {
+            me.updateAnnotations(record)
+        } else {
+            rowId = view.getRowId(record);
 
-            view.fire('select', {
-                record: store.getAt(newIndex)
-            })
+            if (rowId) {
+                me.select(rowId);
+                view.fire('select', {record})
+            }
         }
     }
 
@@ -99,16 +110,19 @@ class RowModel extends BaseModel {
             isSelected, record;
 
         if (id) {
-            me.toggleSelection(id);
+            record = view.getRecord(id);
+
+            if (me.hasAnnotations(record)) {
+                me.updateAnnotations(record)
+            } else {
+                me.toggleSelection(id);
 
-            isSelected = me.isSelected(id);
-            record     = view.getRecord(id);
+                isSelected = me.isSelected(id);
 
-            !isSelected && view.onDeselect?.(record);
+                !isSelected && view.onDeselect?.(record);
 
-            view.fire(isSelected ? 'select' : 'deselect', {
-                record
-            })
+                view.fire(isSelected ? 'select' : 'deselect', {record})
+            }
         }
     }
 
@@ -139,6 +153,32 @@ class RowModel extends BaseModel {
 
         super.unregister()
     }
+
+    /**
+     * @param {Record} record
+     */
+    updateAnnotations(record) {
+        let me               = this,
+            {view}           = me,
+            rowId            = view.getRowId(record),
+            isSelected       = me.isSelected(rowId),
+            annotationsField = view.selectedRecordField;
+
+        if (me.singleSelect) {
+            if (isSelected) {
+                record[annotationsField] = false
+            } else {
+                me.items.forEach(rowId => {
+                    // We can use setSilent(), since the last change will trigger a view update
+                    view.getRecordByRowId(rowId).setSilent({[annotationsField]: false})
+                });
+
+                record[annotationsField] = true
+            }
+        } else {
+            record[annotationsField] = !record[annotationsField]
+        }
+    }
 }
 
 export default Neo.setupClass(RowModel);

package/src/table/Container.mjs

@@ -192,7 +192,7 @@ class Container extends BaseContainer {
                 headerToolbar.createItems()
             }
 
-            me.view?.createViewData(me.store.items)
+            me.view?.createViewData()
         }
     }
 
@@ -407,12 +407,12 @@ class Container extends BaseContainer {
     }
 
     /**
-     * @param {Array} inputData
+     *
      */
-    createViewData(inputData) {
+    createViewData() {
         let me = this;
 
-        me.view.createViewData(inputData);
+        me.view.createViewData();
 
         if (me.useCustomScrollbars && me.scrollbarsCssApplied === false) {
             me.applyCustomScrollbarsCss()
@@ -478,7 +478,7 @@ class Container extends BaseContainer {
         let me = this;
 
         if (me.rendered) {
-            me.createViewData(data);
+            me.createViewData();
 
             if (me.store.sorters.length < 1) {
                 me.removeSortingCss()
@@ -486,7 +486,7 @@ class Container extends BaseContainer {
         } else {
             me.on('rendered', () => {
                 me.timeout(50).then(() => {
-                    me.createViewData(data)
+                    me.createViewData()
                 })
             }, me, {once: true})
         }

package/src/table/View.mjs

@@ -116,13 +116,14 @@ class View extends Component {
      * @param {Object} data
      * @param {String} [data.cellId]
      * @param {Object} data.column
+     * @param {Number} data.columnIndex
      * @param {Object} data.record
-     * @param {Number} data.index
+     * @param {Number} data.rowIndex
      * @param {Neo.table.Container} data.tableContainer
      * @returns {Object}
      */
     applyRendererOutput(data) {
-        let {cellId, column, record, index, tableContainer} = data,
+        let {cellId, column, columnIndex, record, rowIndex, tableContainer} = data,
             me          = this,
             cellCls     = ['neo-table-cell'],
             colspan     = record[me.colspanField],
@@ -138,9 +139,10 @@ class View extends Component {
 
         rendererOutput = column.renderer.call(column.rendererScope || tableContainer, {
             column,
+            columnIndex,
             dataField,
-            index,
             record,
+            rowIndex,
             tableContainer,
             value: fieldValue
         });
@@ -184,7 +186,7 @@ class View extends Component {
             if (hasStore) {
                 cellId = me.getCellId(record, column.dataField)
             } else {
-                cellId = vdom.cn[index]?.cn[me.getColumn(column.dataField, true)]?.id || Neo.getId('td')
+                cellId = vdom.cn[rowIndex]?.cn[me.getColumn(column.dataField, true)]?.id || Neo.getId('td')
             }
         }
 
@@ -267,7 +269,7 @@ class View extends Component {
 
         for (i=0; i < colCount; i++) {
             column = columns[i];
-            config = me.applyRendererOutput({column, record, index: rowIndex, tableContainer});
+            config = me.applyRendererOutput({column, columnIndex: i, record, rowIndex, tableContainer});
 
             if (column.dock) {
                 config.cls = ['neo-locked', ...config.cls || []];
@@ -310,17 +312,17 @@ class View extends Component {
     }
 
     /**
-     * @param {Object[]} inputData
+     *
      */
-    createViewData(inputData) {
-        let me             = this,
-            amountRows     = inputData.length,
-            i              = 0,
-            rows           = [],
-            {selectedRows} = me;
-
-        for (; i < amountRows; i++) {
-            rows.push(me.createRow({record: inputData[i], rowIndex: i}))
+    createViewData() {
+        let me                    = this,
+            {selectedRows, store} = me,
+            countRecords          = store.getCount(),
+            i                     = 0,
+            rows                  = [];
+
+        for (; i < countRecords; i++) {
+            rows.push(me.createRow({record: store.items[i], rowIndex: i}))
         }
 
         me.vdom.cn = rows;
@@ -522,17 +524,16 @@ class View extends Component {
      * @param {Object} opts.record
      */
     onStoreRecordChange({fields, model, record}) {
-        let me               = this,
-            fieldNames       = fields.map(field => field.name),
-            needsUpdate      = false,
-            tableContainer   = me.parent,
-            {selectionModel} = tableContainer,
-            {vdom}           = me,
-            cellId, cellNode, column, index, scope;
+        let me                     = this,
+            fieldNames             = fields.map(field => field.name),
+            needsUpdate            = false,
+            tableContainer         = me.parent,
+            rowIndex               = me.store.indexOf(record),
+            {selectionModel, vdom} = me,
+            cellId, cellNode, cellVdom, column, columnIndex, scope;
 
         if (fieldNames.includes(me.colspanField)) {
-            index = me.store.indexOf(record);
-            me.vdom.cn[index] = me.createRow({record, rowIndex: index});
+            me.vdom.cn[rowIndex] = me.createRow({record, rowIndex});
             me.update()
         } else {
             fields.forEach(field => {
@@ -547,11 +548,12 @@ class View extends Component {
                     // the vdom might not exist yet => nothing to do in this case
                     if (cellNode?.vdom) {
                         column      = me.getColumn(field.name);
-                        index       = cellNode.index;
+                        columnIndex = cellNode.index;
                         needsUpdate = true;
                         scope       = column.rendererScope || tableContainer;
+                        cellVdom    = me.applyRendererOutput({cellId, column, columnIndex, record, rowIndex, tableContainer});
 
-                        cellNode.parentNode.cn[index] = me.applyRendererOutput({cellId, column, record, index, tableContainer})
+                        cellNode.parentNode.cn[columnIndex] = cellVdom
                     }
                 }
             })

package/src/table/header/Button.mjs

@@ -110,43 +110,6 @@ class Button extends BaseButton {
         ]}
     }
 
-    /**
-     * @param {Object} config
-     */
-    construct(config) {
-        super.construct(config);
-
-        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
-        })
-    }
-
-    /**
-     * Triggered after the draggable config got changed
-     * @param {Boolean} value
-     * @param {Boolean} oldValue
-     * @protected
-     */
-    afterSetDraggable(value, oldValue) {
-        let me = this;
-
-        if (value === true) {
-            me.getVdomRoot().draggable = true
-        } else {
-            delete me.getVdomRoot().draggable
-        }
-
-        me.update()
-    }
-
     /**
      * Triggered after the isSorted config got changed
      * @param {String|null} value
@@ -279,13 +242,14 @@ class Button extends BaseButton {
     }
 
     /**
-     * @param {Object} data
-     * @param {Neo.button.Base} data.column
-     * @param {String} data.dataField
-     * @param {Number} data.index
-     * @param {Object} data.record
+     * @param {Object}              data
+     * @param {Neo.button.Base}     data.column
+     * @param {Number}              data.columnIndex
+     * @param {String}              data.dataField
+     * @param {Object}              data.record
+     * @param {Number}              data.rowIndex
      * @param {Neo.table.Container} data.tableContainer
-     * @param {Number|String} data.value
+     * @param {Number|String}       data.value
      * @returns {*}
      */
     cellRenderer(data) {
@@ -413,74 +377,6 @@ class Button extends BaseButton {
         me.isSorted = map[me.isSorted + '']
     }
 
-    /**
-     * @protected
-     */
-    onDragEnd() {
-        let me      = this,
-            {style} = me;
-
-        delete style.opacity;
-        me.style = style
-    }
-
-    /**
-     * @protected
-     */
-    onDragEnter() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.add(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @protected
-     */
-    onDragLeave() {
-        let me    = this,
-            {cls} = me;
-
-        NeoArray.remove(cls, 'neo-drag-over');
-        me.cls = cls
-    }
-
-    /**
-     * @param {Object} event
-     */
-    onDragOver(event) {
-        //console.log('onDragOver', event);
-    }
-
-    /**
-     * @protected
-     */
-    onDragStart() {
-        let me      = this,
-            {style} = me;
-
-        style.opacity = 0.4;
-        me.style = style
-    }
-
-    /**
-     * @param {Object} data
-     */
-    onDrop(data) {
-        let me             = this,
-            headerToolbar  = me.parent,
-            {style}        = me,
-            tableContainer = headerToolbar.parent;
-
-        me.onDragLeave();
-        headerToolbar.switchItems(me.id, data.srcId);
-        tableContainer.createViewData(tableContainer.store.data);
-
-        style.opacity = 1;
-        me.style = style
-    }
-
     /**
      * @protected
      */

package/src/table/header/Toolbar.mjs

@@ -17,9 +17,13 @@ class Toolbar extends BaseToolbar {
          */
         ntype: 'table-header-toolbar',
         /**
-         * @member {String[]} baseCls=['table-header-toolbar']
+         * @member {String[]} baseCls=['neo-table-header-toolbar']
          */
-        baseCls: ['table-header-toolbar'],
+        baseCls: ['neo-table-header-toolbar'],
+        /**
+         * @member {Boolean} draggable_=true
+         */
+        draggable_: true,
         /**
          * @member {String} layout='base'
          */
@@ -35,6 +39,8 @@ class Toolbar extends BaseToolbar {
          */
         showHeaderFilters_: false,
         /**
+         * Convenience shortcut to pass sortable to all toolbar items.
+         * If set to true, header clicks will sort the matching column (ASC, DESC, null)
          * @member {Boolean} sortable=true
          */
         sortable: true,
@@ -47,6 +53,31 @@ class Toolbar extends BaseToolbar {
         ]}
     }
 
+    /**
+     * Triggered after the draggable config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetDraggable(value, oldValue) {
+        let me = this;
+
+        if (value && !me.sortZone) {
+            import('../../draggable/table/header/toolbar/SortZone.mjs').then(module => {
+                let {appName, id, windowId} = me;
+
+                me.sortZone = Neo.create({
+                    module             : module.default,
+                    appName,
+                    boundaryContainerId: id,
+                    owner              : me,
+                    windowId,
+                    ...me.sortZoneConfig
+                })
+            })
+        }
+    }
+
     /**
      * Triggered after the showHeaderFilters config got changed
      * @param {Boolean} value
@@ -84,6 +115,7 @@ class Toolbar extends BaseToolbar {
                 })
             });
 
+            me.updateDepth = 2;
             me.update()
         }
     }

package/src/util/Rectangle.mjs

@@ -309,7 +309,7 @@ export default class Rectangle extends DOMRect {
 
     /**
      * Returns a clone of this Rectangle expanded according to the edges array.
-     * @param {Number}Number[]} edges
+     * @param {Number[]} edges
      * @returns {Rectangle}
      */
     expand(edges) {