neo.mjs 7.16.0 → 8.0.0-alpha.1

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);
 

package/src/util/VDom.mjs

@@ -1,4 +1,5 @@
-import Base from '../core/Base.mjs';
+import Base             from '../core/Base.mjs';
+import ComponentManager from '../manager/Component.mjs';
 
 /**
  * @class Neo.util.VDom
@@ -38,6 +39,7 @@ class VDom extends Base {
      * Search vdom child nodes by id or opts object for a given vdom tree
      * @param {Object} vdom
      * @param {Object|String} opts Either an object containing vdom node attributes or a string based id
+     * @param {Boolean} replaceComponentRefs=true
      * @param {Number} [index] Internal flag, do not use it
      * @param {Object} [parentNode] Internal flag, do not use it
      * @returns {Object}
@@ -45,10 +47,14 @@ class VDom extends Base {
      *     {String} parentId
      *     {Object} vdom
      */
-    static findVdomChild(vdom, opts, index, parentNode) {
+    static find(vdom, opts, replaceComponentRefs=true, index, parentNode) {
         index = index || 0;
         opts  = !Neo.isString(opts) ? opts : {id: opts};
 
+        if (replaceComponentRefs) {
+            vdom = VDom.getVdom(vdom)
+        }
+
         let child      = null,
             matchArray = [],
             styleMatch = true,
@@ -72,7 +78,7 @@ class VDom extends Base {
                             }
                         } else if (Neo.isArray(value) && Neo.isArray(vdom[key])) {
                             // todo: either search the vdom array for all keys or compare if the arrays are equal.
-                            throw new Error('findVdomChild: cls matching not supported for target & source types of Arrays')
+                            throw new Error('find: cls matching not supported for target & source types of Arrays')
                         }
                         break
                     case 'style':
@@ -91,7 +97,7 @@ class VDom extends Base {
                                 matchArray.push(true)
                             }
                         } else {
-                            throw new Error('findVdomChild: style matching not supported for mixed target & source types (Object VS String)')
+                            throw new Error('find: style matching not supported for mixed target & source types (Object VS String)')
                         }
                         break
                     default:
@@ -110,7 +116,7 @@ class VDom extends Base {
         if (vdom.cn) {
             for (; i < len; i++) {
                 if (vdom.cn[i]) {
-                    subChild = VDom.findVdomChild(vdom.cn[i], opts, i, vdom);
+                    subChild = VDom.find(vdom.cn[i], opts, replaceComponentRefs, i, vdom);
 
                     if (subChild) {
                         child = {
@@ -128,14 +134,13 @@ class VDom extends Base {
     }
 
     /**
-     * Convenience shortcut for findVdomChild(vdom, {flag: flag});
+     * Convenience shortcut for find(vdom, {flag: flag});
      * @param {Object} vdom
      * @param {String} flag The flag reference specified on the target vdom child node
      * @returns {Object} vdom
      */
     static getByFlag(vdom, flag) {
-        let node = VDom.findVdomChild(vdom, {flag});
-        return node?.vdom
+        return VDom.find(vdom, {flag})?.vdom
     }
 
     /**
@@ -145,6 +150,8 @@ class VDom extends Base {
      * @returns {Array} childIds
      */
     static getChildIds(vdom, childIds=[]) {
+        vdom = VDom.getVdom(vdom);
+
         let childNodes = vdom?.cn || [];
 
         childNodes.forEach(childNode => {
@@ -164,6 +171,8 @@ class VDom extends Base {
      * @returns {Array}
      */
     static getColumnNodes(vdom, index) {
+        vdom = VDom.getVdom(vdom);
+
         let columnNodes = [];
 
         vdom.cn?.forEach(row => {
@@ -191,6 +200,8 @@ class VDom extends Base {
      * @returns {Array} an array of vdom nodes which match the flag
      */
     static getFlags(vdom, flag, matchArray) {
+        vdom = VDom.getVdom(vdom);
+
         if (!matchArray) {
             matchArray = [];
 
@@ -217,6 +228,8 @@ class VDom extends Base {
      * @returns {Array}
      */
     static getParentNodes(vdom, id, topLevel=true) {
+        vdom = VDom.getVdom(vdom);
+
         let parents = null,
             i       = 0,
             len     = vdom.cn?.length || 0;
@@ -241,6 +254,19 @@ class VDom extends Base {
         return parents
     }
 
+    /**
+     * Convenience shortcut using manager.Component to replace vdom references if needed
+     * @param {Object} vdom
+     * @returns {Object}
+     */
+    static getVdom(vdom) {
+        if (vdom.componentId) {
+            vdom = ComponentManager.get(vdom.componentId).vdom
+        }
+
+        return vdom
+    }
+
     /**
      * Insert a given nodeToInsert after a targetNode inside a given vdom tree
      * @param {Object} vdom The vdom tree containing the targetNode
@@ -276,7 +302,7 @@ class VDom extends Base {
             targetNodeId = targetNodeId.id
         }
 
-        let targetNode = VDom.findVdomChild(vdom, {id: targetNodeId}),
+        let targetNode = VDom.find(vdom, targetNodeId),
             index;
 
         if (targetNode) {
@@ -295,7 +321,7 @@ class VDom extends Base {
      * @returns {Boolean} true in case the node was found & removed
      */
     static removeVdomChild(vdom, opts) {
-        let child = VDom.findVdomChild(vdom, opts);
+        let child = VDom.find(vdom, opts);
 
         if (child) {
             child.parentNode.cn.splice(child.index, 1);
@@ -313,6 +339,8 @@ class VDom extends Base {
      * @returns {Boolean} true in case the node was found and replaced
      */
     static replaceVdomChild(vdom, id, newChildNode) {
+        vdom = VDom.getVdom(vdom);
+
         let cn  = vdom.cn || [],
             i   = 0,
             len = cn.length,
@@ -347,6 +375,8 @@ class VDom extends Base {
      */
     static syncVdomIds(vnode, vdom, force=false) {
         if (vnode && vdom) {
+            vdom = VDom.getVdom(vdom);
+
             let childNodes = vdom.cn,
                 cn, i, len;
 
@@ -363,7 +393,8 @@ class VDom extends Base {
             }
 
             if (childNodes) {
-                cn   = childNodes.filter(item => item.removeDom !== true);
+                cn   = childNodes.map(item => VDom.getVdom(item));
+                cn   = cn.filter(item => item.removeDom !== true);
                 i    = 0;
                 len  = cn?.length || 0;