@one-grid-core/angular 0.5.1 → 0.5.3

package/fesm2022/one-grid-core-angular.mjs

@@ -2,7 +2,7 @@ import { v4 } from 'uuid';
 import * as i0 from '@angular/core';
 import { Injectable, inject, NgZone, Pipe, Input, Component, EventEmitter, HostListener, ViewChildren, Output, ViewChild, ChangeDetectionStrategy, Directive, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, Subscription } from 'rxjs';
-import _ from 'lodash';
+import lodash from 'lodash';
 import { filter, map, debounceTime, take } from 'rxjs/operators';
 import { NgClass, NgStyle, NgTemplateOutlet, DecimalPipe } from '@angular/common';
 import * as i2 from 'lucide-angular';
@@ -148,10 +148,20 @@ const ONE_GROUP_VALUE_FIELD = '__oneGroupValue';
 const ONE_GROUP_CHILDREN_FIELD = '__oneGroupChildren';
 /** What a group of rows with no value in the grouped field is labelled. */
 const ONE_GROUP_BLANK_LABEL = '(Blank)';
-/** The `rowGroup` fields of a column set, in definition order. */
+/**
+ * The `rowGroup` fields of a column set, in definition order.
+ *
+ * Grouping keys on a row's own field, so a column that asks to group without
+ * one has nothing to group by — it is dropped, but not silently: that is a
+ * definition that reads as if it works.
+ */
 function rowGroupFields(columns) {
-    return (columns ?? [])
-        .filter(column => column.rowGroup && column.field)
+    const grouping = (columns ?? []).filter(column => column.rowGroup);
+    for (const column of grouping.filter(column => !column.field)) {
+        console.warn(`[one-grid] the column "${column.headerName ?? column.id ?? '(unnamed)'}" declares rowGroup but has no field — grouping reads the row's own value, so a valueGetter is not enough. The column was left ungrouped.`);
+    }
+    return grouping
+        .filter(column => column.field)
         .map(column => column.field);
 }
 /** The `aggFunc` columns of a column set. */
@@ -714,6 +724,16 @@ class OgColumnService {
         this.setGroupColumnDefs(groupColumnDefs);
         this.setColumnDefs(columnDefs);
     }
+    /**
+     * Every registered column, hidden ones included, in display order.
+     *
+     * `getColumnState` answers what is on screen; this answers what the grid
+     * knows about — which is what anything reading a column's *configuration*
+     * (an `aggFunc`, say) needs, since hiding a column does not unconfigure it.
+     */
+    getAllColumnDefs() {
+        return this.allColumnDefs;
+    }
     getColumnState() {
         const columns = this.columnDefs$.getValue();
         const groups = this.groupColumnDefs$.getValue();
@@ -728,7 +748,7 @@ class OgColumnService {
             const column = {
                 ...this.defaultColumnDef,
                 ...col,
-                id: col?.field ? col.field : _.uniqueId('col_'),
+                id: col?.field ? col.field : lodash.uniqueId('col_'),
             };
             return this.resolveHeaderPresentation(column);
         });
@@ -823,7 +843,7 @@ class OgColumnService {
      * place relative to its neighbours.
      */
     reorderColumnDefs(fromIndex, toIndex) {
-        const columns = _.clone(this.allColumnDefs);
+        const columns = lodash.clone(this.allColumnDefs);
         const visible = columns.filter(column => !column.hide);
         const moved = visible[fromIndex];
         if (!moved)
@@ -1425,12 +1445,26 @@ class OneGridApi {
         this._quickFilterValue = null;
         this._activeFilters = [];
         this._visibleRowNodes = [];
+        /**
+         * The rows as the host last handed them over — before grouping folded
+         * them. Grouping is a transform on the way in, so this is what a change of
+         * grouping re-folds, and it is why regrouping keeps the host's row order
+         * instead of inheriting the order the previous grouping happened to leave.
+         */
+        this._sourceRows = [];
         this._pinnedRowNodes = { top: [], bottom: [] };
         this._originalRowNodes = new Map();
         this._nodeCleanupMap = new Map(); // Cleanup registry (prevents memory leaks)
         this._destroyed = false;
         // Advanced Features
         this.treeData = false;
+        /**
+         * Whether the *host* declared tree data, as opposed to grouping having
+         * turned tree mode on. `treeData` above answers "is this a tree right now",
+         * which grouping flips; this answers "whose tree is it", which decides
+         * whether grouping may touch it at all.
+         */
+        this._hostTreeData = false;
         this.treeDataChildrenField = null;
         this.groupDefaultExpanded = 0;
         this.masterDetail = false;
@@ -1472,6 +1506,7 @@ class OneGridApi {
         this.detailCellRendererParams = detailCellRendererParams;
         this.detailRendererComponent = detailRendererComponent;
         this.treeData = treeData;
+        this._hostTreeData = treeData;
         this.selectionService.setSelectionMode(rowSelection);
         // Synthetic group rows carry their own stable id — the path of group
         // values — which no host getRowId knows how to derive. The wrapper reads
@@ -1555,6 +1590,9 @@ class OneGridApi {
             }
             return next;
         });
+        // Grouped roots are synthetic, so the data is on the leaves; otherwise the
+        // roots are the data. Read from the nodes rather than from `_sourceRows`
+        // so a reorder the user dragged into place survives the transaction.
         const currentRows = grouping
             ? this._rowNodes.filter(node => node.leaf).map(node => node.data)
             : this._rowNodes.filter(node => !node.parent).map(node => node.data);
@@ -1576,6 +1614,7 @@ class OneGridApi {
             this.selectionService.deselectAll();
             this.expansionService.clear();
         }
+        this._sourceRows = rowData ?? [];
         // Row grouping is a transform on the way in: the host keeps handing the
         // grid flat rows, and the tree pipeline below sees synthetic group rows
         // with children — the same shape tree data arrives in.
@@ -1627,6 +1666,14 @@ class OneGridApi {
             if (node) {
                 node.data = data;
                 node.setRowIndex(this._currentIndex);
+                // Where a row sits is rebuilt, not remembered. A reused node used to
+                // keep the level and parent it had when it was first built, so a row
+                // that changed place in the hierarchy — a leaf moved to another
+                // parent, or lifted to the root when the grouping changed — kept
+                // pointing at its old parent, and the visibility walk (which climbs
+                // parents) hid it behind a node that was no longer above it.
+                node.level = level;
+                node.parent = parent;
             }
             else {
                 node = new OneRowNode(rowId, data, this._currentIndex);
@@ -2256,14 +2303,56 @@ class OneGridApi {
         return this._rowGroupFields;
     }
     /**
-     * Turn row grouping on. Called by `OneGridComponent` when column
-     * definitions declare `rowGroup`; the grid then behaves as a tree over
-     * synthetic group rows, and `setRowData` / `updateRowData` keep taking the
-     * flat rows they always took.
+     * Group the rows by these fields, in nesting order — or ungroup by passing
+     * an empty array.
+     *
+     * `OneGridComponent` calls this once for the column definitions that
+     * declare `rowGroup`; hosts call it to regroup afterwards. Either way the
+     * grid re-plumbs itself around the new grouping — tree mode, the auto group
+     * column, the visibility of the grouped-by columns — and folds the rows it
+     * already holds again, so nothing has to be rebound and no grid has to be
+     * torn down and re-created to group by a different column.
+     *
+     * `aggregations` defaults to the `aggFunc` columns currently registered, so
+     * `setRowGrouping(['country'])` keeps the totals the column definitions
+     * already describe.
      */
-    setRowGrouping(groupFields, aggregations = []) {
-        this._rowGroupFields = groupFields ?? [];
-        this._aggColumns = aggregations ?? [];
+    setRowGrouping(groupFields, aggregations) {
+        if (this._destroyed)
+            return;
+        const previous = this._rowGroupFields;
+        // Empty fields buy nothing and a repeated one would nest a level under
+        // itself, where every child group holds the whole parent.
+        const next = (groupFields ?? [])
+            .filter(field => !!field)
+            .filter((field, index, fields) => fields.indexOf(field) === index);
+        // Grouping *is* the tree. A host that brought its own tree data, or a
+        // master/detail grid, already has a hierarchy, and folding a second one
+        // over it would throw the first away.
+        if (next.length && (this._hostTreeData || this.masterDetail)) {
+            console.warn('[one-grid] setRowGrouping does not apply to tree data or master/detail grids — they carry their own hierarchy. Nothing was changed.');
+            return;
+        }
+        const unchanged = next.length === previous.length && next.every((field, index) => field === previous[index]);
+        if (unchanged && !aggregations)
+            return;
+        this._rowGroupFields = next;
+        this._aggColumns = aggregations ?? aggColumns(this.columnService.getAllColumnDefs());
+        // The row model's half of the switch: grouped rows carry their children
+        // under the grouping helper's own field, and the tree pipeline walks them
+        // from there. Ungrouping puts both back — which is safe because the guard
+        // above means tree mode can only have come from grouping.
+        this.treeData = next.length > 0;
+        this.treeDataChildrenField = next.length ? ONE_GROUP_CHILDREN_FIELD : null;
+        // Everything grouping implies outside the row model — the auto group
+        // column, which of the host's columns are hidden, the grid type the body
+        // renders — belongs to the component that owns the template. It re-plumbs
+        // on this event, synchronously, so the rebuild below already sees the
+        // columns the new grouping needs.
+        this.eventService.dispatchEvent('rowGroupingChanged', { groupFields: next, previousGroupFields: previous });
+        // Nothing to fold before the first load: `setRowData` will do it.
+        if (this._rowNodes.length)
+            this.rebuildRows(this._sourceRows, false);
     }
     /**
      * Start recording committed cell edits for undo/redo. Called by
@@ -4722,6 +4811,24 @@ class OneGridBodyComponent {
          * MAX_BUFFER_PX keeps roughly twenty rows of overscan either side instead.
          */
         this.MAX_BUFFER_PX = 600;
+        /**
+         * Params for a component cell renderer.
+         *
+         * The cell params, plus whatever the column declared in
+         * `cellRendererParams` — a field that exists precisely so a renderer can be
+         * configured per column, and that nothing had ever forwarded to it. Column
+         * config goes first so the grid's own fields win a name collision.
+         */
+        /**
+         * Cached per cell, keyed on the identities that mean "this cell changed":
+         * its cellStates object (replaced on every edit and state refresh) and its
+         * data object. Building a fresh object per call — which a template method
+         * does per change-detection pass — made the renderer directive see "params
+         * changed" every pass and re-run the component's oneInit each time. A
+         * renderer whose oneInit touched grid state (a custom tree expander is the
+         * classic case) then re-triggered change detection and looped forever.
+         */
+        this.rendererParamsCache = new Map();
         // ---------------------------------------------------------------------------
         // Cell navigation
         //
@@ -4791,6 +4898,8 @@ class OneGridBodyComponent {
          */
         this.subscriptions.add(this.eventService.addEventListener('columnChanged', (payload) => {
             this.columnDefs = [...payload.columns];
+            // Params carry the columnDef, so a column change invalidates them all.
+            this.rendererParamsCache.clear();
             this.cellRenderer = this.columnDefs.some(col => col.cellRendererComponent);
             this.rowWidth = this.columnDefs.reduce((sum, col) => sum + resolveColumnWidth(col), 0);
             // A column change can alter the width left for flex columns (a hide, a
@@ -4806,6 +4915,9 @@ class OneGridBodyComponent {
             // The full post-filter count, reported before the page slice is taken,
             // so the host's paging totals see everything.
             this.rowCountChanged.emit(allNodes?.length ?? 0);
+            // New rows, new renderer params — and removed rows leave no stale
+            // cache entries behind.
+            this.rendererParamsCache.clear();
             const nodes = this.api.pageNodes(allNodes);
             setTimeout(() => {
                 this.viewport?.checkViewportSize();
@@ -4834,6 +4946,7 @@ class OneGridBodyComponent {
          * Listen Pinned Row Data Changed Event
          */
         this.subscriptions.add(this.eventService.addEventListener('pinnedRowDataChanged', ({ side, nodes }) => {
+            this.rendererParamsCache.clear();
             if (side === 'top') {
                 this.pinnedTopNodes = nodes;
             }
@@ -5416,16 +5529,14 @@ class OneGridBodyComponent {
     cellParams(node, column) {
         return this.cellService.cellParams(column, node);
     }
-    /**
-     * Params for a component cell renderer.
-     *
-     * The cell params, plus whatever the column declared in
-     * `cellRendererParams` — a field that exists precisely so a renderer can be
-     * configured per column, and that nothing had ever forwarded to it. Column
-     * config goes first so the grid's own fields win a name collision.
-     */
     rendererParams(node, column) {
-        return { ...(column?.cellRendererParams ?? {}), ...this.cellParams(node, column) };
+        const key = getCellKey(node.rowId, column.field ?? column.id ?? '');
+        const cached = this.rendererParamsCache.get(key);
+        if (cached && cached.states === node.cellStates && cached.data === node.data)
+            return cached.params;
+        const params = { ...(column?.cellRendererParams ?? {}), ...this.cellParams(node, column) };
+        this.rendererParamsCache.set(key, { states: node.cellStates, data: node.data, params });
+        return params;
     }
     /**
      * `aria-rowindex` is 1-based over the whole grid, not over what is rendered.
@@ -6084,6 +6195,20 @@ class OneGridComponent {
         this.bodyScrollLeft = 0;
         this._oneRowNumberColumnDef = null;
         this.subscriptions = new Subscription();
+        /**
+         * Row grouping, as the grid sees it.
+         *
+         * The three `_host*` fields hold what was bound before grouping touched
+         * anything, because grouping is reversible: turn it off and the columns,
+         * the group column and the grid type all have to go back to what the host
+         * asked for. `_appliedGroupFields` is the grouping the registered columns
+         * currently reflect — the row model's copy lives in `api.rowGroupFields`.
+         */
+        this._hostColumnDefs = [];
+        this._hostAutoGroupColumnDef = null;
+        this._hostGridType = 'master';
+        this._hostTreeData = false;
+        this._appliedGroupFields = [];
         /**
          * Totals for `aria-rowcount` / `aria-colcount`.
          *
@@ -6142,29 +6267,25 @@ class OneGridComponent {
          * tree over synthetic group rows. Configured before `api.init` because
          * everything downstream — the treeData flag the API captures, the group
          * column the tree block below prepends — has to see the tree shape.
+         *
+         * What the host declared is kept as it was given: regrouping at runtime
+         * re-derives the registered columns from it, so a column hidden because
+         * it was grouped comes back when it stops being, and one the host hid
+         * itself stays hidden.
          */
+        this._hostColumnDefs = this.columnDefs ?? [];
+        this._hostAutoGroupColumnDef = this.autoGroupColumnDef;
+        this._hostGridType = this.gridType;
+        this._hostTreeData = this.treeData;
         const rowGroupColumnFields = this.treeData || this.masterDetail
             ? []
             : rowGroupFields(this.columnDefs);
         if (rowGroupColumnFields.length) {
+            this._appliedGroupFields = rowGroupColumnFields;
             this.treeData = true;
             this.treeDataChildrenField = ONE_GROUP_CHILDREN_FIELD;
-            // The group column: host-tuned through autoGroupColumnDef, but its
-            // field is always the synthetic label — that is where a group row
-            // carries its display value.
-            this.autoGroupColumnDef = {
-                headerName: 'Group',
-                minWidth: 200,
-                ...this.autoGroupColumnDef,
-                field: ONE_GROUP_VALUE_FIELD,
-                // The marker the tree machinery keys on: the expander renders on this
-                // column and group rows print their label here.
-                autoGroupField: true,
-            };
-            // A grouped-by column's value is on the group row; showing the flat
-            // column too repeats it down every leaf. Hidden, not removed — the
-            // host can bring it back with api.setColumnVisible.
-            this.columnDefs = this.columnDefs.map(column => column.rowGroup ? { ...column, hide: true } : column);
+            this.autoGroupColumnDef = this.buildAutoGroupColumnDef();
+            this.columnDefs = this.groupedColumnDefs(rowGroupColumnFields);
         }
         /**
          * Initialize One Grid API
@@ -6179,11 +6300,21 @@ class OneGridComponent {
             masterDetail: this.masterDetail,
             detailCellRendererParams: this.detailCellRendererParams,
             detailRendererComponent: this.detailRendererComponent,
-            treeData: this.treeData,
+            // The host's own tree data, not the tree grouping builds: `setRowGrouping`
+            // turns that on below, and the API has to be able to tell whose tree it
+            // is before it may replace one.
+            treeData: this._hostTreeData,
         });
         if (rowGroupColumnFields.length) {
             this.api.setRowGrouping(rowGroupColumnFields, aggColumns(this.columnDefs));
         }
+        // Regrouping at runtime. `api.setRowGrouping` owns the row model half of
+        // the switch; this is the other half — the columns the grid registers and
+        // the shape the body renders. Subscribed after the initial call above,
+        // which `ngOnInit` has already applied.
+        this.subscriptions.add(this.eventService.addEventListener('rowGroupingChanged', (payload) => {
+            this.applyRowGroupingColumns(payload.groupFields);
+        }));
         if (this.undoRedoCellEditing) {
             this.api.enableUndoRedoCellEditing(this.undoRedoCellEditingLimit);
         }
@@ -6197,7 +6328,7 @@ class OneGridComponent {
             this.api.setGroupDefaultExpanded(this.groupDefaultExpanded);
             this.api.setGetDetailRowData(this.detailCellRendererParams?.getDetailRowData ?? null);
             if (this.rowNumber) {
-                const columnDefs = _.concat(this._oneRowNumberColumnDef, this.columnDefs);
+                const columnDefs = lodash.concat(this._oneRowNumberColumnDef, this.columnDefs);
                 setTimeout(() => this.api.setColumnDefs(columnDefs));
             }
         }
@@ -6206,10 +6337,9 @@ class OneGridComponent {
          */
         if (this.treeData) {
             this.gridType = 'tree';
-            const columnDefs = this.rowNumber ? _.concat(this._oneRowNumberColumnDef, this.autoGroupColumnDef, this.columnDefs) : _.concat(this.autoGroupColumnDef, this.columnDefs);
             this.api.setTreeDataChildrenField(this.treeDataChildrenField);
             this.api.setGroupDefaultExpanded(this.groupDefaultExpanded);
-            setTimeout(() => this.api.setColumnDefs(columnDefs));
+            setTimeout(() => this.api.setColumnDefs(this.columnStack()));
         }
         // Listen Selection Changed Event
         // Columns can be replaced at runtime through `api.setColumnDefs`, and
@@ -6235,6 +6365,69 @@ class OneGridComponent {
             this.columnResized.emit(payload);
         }));
     }
+    /**
+     * The group column: host-tuned through `autoGroupColumnDef`, but its field
+     * is always the synthetic label — that is where a group row carries its
+     * display value — and it always carries the marker the tree machinery keys
+     * on, which is what puts the expander on this column.
+     */
+    buildAutoGroupColumnDef() {
+        return {
+            headerName: 'Group',
+            minWidth: 200,
+            ...this._hostAutoGroupColumnDef,
+            field: ONE_GROUP_VALUE_FIELD,
+            autoGroupField: true,
+        };
+    }
+    /**
+     * The host's columns with the grouped-by ones hidden.
+     *
+     * A grouped-by column's value is on the group row; showing the flat column
+     * too repeats it down every leaf. Hidden, not removed — the host can bring
+     * one back with `api.setColumnVisible`, and ungrouping restores whatever
+     * visibility the host itself declared.
+     */
+    groupedColumnDefs(groupFields) {
+        return this._hostColumnDefs.map(column => column.field && groupFields.includes(column.field) ? { ...column, hide: true } : column);
+    }
+    /** The columns the grid registers: row numbers, the group column, the host's. */
+    columnStack() {
+        return lodash.compact([
+            this.rowNumber ? this._oneRowNumberColumnDef : null,
+            this.treeData ? this.autoGroupColumnDef : null,
+            ...this.columnDefs,
+        ]);
+    }
+    /**
+     * Re-plumb everything grouping owns outside the row model: tree mode, the
+     * children field, the group column, and which of the host's columns are
+     * hidden because their value now shows on a group row.
+     *
+     * Driven by `rowGroupingChanged`, so a host regroups through one call —
+     * `api.setRowGrouping(['country', 'city'])` — instead of re-creating the
+     * grid. Grouping and host tree data are mutually exclusive, which the API
+     * enforces, so this only ever switches a tree that grouping itself built.
+     */
+    applyRowGroupingColumns(groupFields) {
+        const unchanged = groupFields.length === this._appliedGroupFields.length
+            && groupFields.every((field, index) => field === this._appliedGroupFields[index]);
+        if (unchanged)
+            return;
+        const grouping = groupFields.length > 0;
+        this._appliedGroupFields = [...groupFields];
+        this.treeData = grouping;
+        this.treeDataChildrenField = grouping ? ONE_GROUP_CHILDREN_FIELD : null;
+        this.gridType = grouping ? 'tree' : this._hostGridType;
+        this.autoGroupColumnDef = grouping ? this.buildAutoGroupColumnDef() : this._hostAutoGroupColumnDef;
+        this.columnDefs = this.groupedColumnDefs(groupFields);
+        this.api.setGroupDefaultExpanded(this.groupDefaultExpanded);
+        this.api.setColumnDefs(this.columnStack());
+        // The grid type, the tree flag and the group column are all rendered
+        // through bindings, and this runs from an event rather than from a
+        // template callback.
+        this.cdr.markForCheck();
+    }
     ngAfterViewInit() {
         // The header follows the body through (bodyScroll) -> [scrollLeft]. A second
         // subscription used to live here that queried '.one-grid-header-column' — a