refactor(ngrid): move code from main component to logical units

libs/ngrid/drag/src/lib/column-resize/column-resize.component.ts

@@ -201,7 +201,7 @@ export class PblNgridDragResizeComponent implements AfterViewInit, OnDestroy {
     if (this._lastWidth !== newWidth) {
       this._lastWidth = newWidth;
       this.column.updateWidth(`${newWidth}px`);
-      this.grid.resetColumnsWidth();
+      this._extApi.widthCalc.resetColumnsWidth();
       // `this.column.updateWidth` will update the grid width cell only, which will trigger a resize that will update all other cells
       // `this.grid.resetColumnsWidth()` will re-adjust all other grid width cells, and if their size changes they will trigger the resize event...
     }

libs/ngrid/src/lib/ext/grid-ext-api.ts

@@ -2,24 +2,30 @@ import { Observable } from 'rxjs';
 import { InjectionToken } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 
-import { PblNgridConfigService, PblNgridEvents } from '@pebula/ngrid/core';
+import { PblNgridConfigService, PblNgridEvents, PblNgridRegistryService } from '@pebula/ngrid/core';
 import { PblCdkTableComponent } from '../grid/pbl-cdk-table/pbl-cdk-table.component';
 import { ContextApi } from '../grid/context/api';
 import { PblNgridComponent } from '../grid/ngrid.component';
 import { ColumnApi, PblColumnStore } from '../grid/column/management';
-import { DynamicColumnWidthLogic } from '../grid/column/width-logic/dynamic-column-width';
+import { PblNgridColumnWidthCalc } from '../grid/column/width-logic/column-width-calc';
 import { PblCdkVirtualScrollViewportComponent } from '../grid/features/virtual-scroll/virtual-scroll-viewport.component'
 import { NotifyPropChangeMethod, OnPropChangedEvent } from './types';
 import { PblNgridMetaRowService } from '../grid/meta-rows/meta-row.service';
 import { RowsApi, PblRowsApi } from '../grid/row';
 import { PblNgridPluginContext, PblNgridPluginController } from './plugin-control';
+import { Logicaps } from '../grid/logicap/index';
 
 export const EXT_API_TOKEN = new InjectionToken('PBL_NGRID_EXTERNAL_API');
 
 export interface PblNgridExtensionApi<T = any> {
   grid: PblNgridComponent<T>;
   element: HTMLElement;
   config: PblNgridConfigService;
+  /**
+   * The registry instance bound to the current instance.
+   * This registry instance lifespan is similar to the grid's component, it will get destroyed when the grid gets destroyed.
+   */
+  registry: PblNgridRegistryService;
   propChanged: Observable<OnPropChangedEvent>;
   cdkTable: PblCdkTableComponent<T>;
   columnStore: PblColumnStore;
@@ -29,9 +35,9 @@ export interface PblNgridExtensionApi<T = any> {
   events: Observable<PblNgridEvents>;
   metaRowService: PblNgridMetaRowService;
   pluginCtrl: PblNgridPluginController<T>;
+  widthCalc: PblNgridColumnWidthCalc;
   onConstructed(fn: () => void): void;
   onInit(fn: () => void): void;
-  dynamicColumnWidthFactory(dir?: Direction): DynamicColumnWidthLogic;
   getDirection(): Direction;
   directionChange(): Observable<Direction>;
 }
@@ -43,4 +49,5 @@ export interface PblNgridInternalExtensionApi<T = any> extends PblNgridExtension
   setViewport(viewport: PblCdkVirtualScrollViewportComponent): void;
   setCdkTable(cdkTable: PblCdkTableComponent<T>): void;
   notifyPropChanged: NotifyPropChangeMethod;
+  logicaps: Logicaps;
 }

libs/ngrid/src/lib/grid/api-factory.ts

@@ -2,20 +2,21 @@ import { Observable, of, Subject, EMPTY } from 'rxjs';
 import { ChangeDetectorRef, ElementRef, Injector, IterableDiffers, NgZone, ViewContainerRef } from '@angular/core';
 import { Direction, Directionality } from '@angular/cdk/bidi';
 
-import { PblNgridConfigService, PblNgridEvents, ON_DESTROY, ON_CONSTRUCTED } from '@pebula/ngrid/core';
+import { PblNgridConfigService, PblNgridEvents, ON_DESTROY, ON_CONSTRUCTED, PblNgridRegistryService } from '@pebula/ngrid/core';
 import { PblNgridInternalExtensionApi } from '../ext/grid-ext-api';
+import { PblNgridPluginContext } from '../ext/plugin-control';
+import { OnPropChangedEvent } from '../ext/types';
 import { ColumnApi, PblColumnStore } from './column/management';
+import { PblNgridColumnWidthCalc } from './column/width-logic/column-width-calc';
 import { PblNgridComponent } from './ngrid.component';
 import { PblCdkTableComponent } from './pbl-cdk-table/pbl-cdk-table.component';
 import { PblRowsApi } from './row/rows-api';
 import { PblNgridCellFactoryResolver } from './row/cell-factory.service';
-import { DynamicColumnWidthLogic, DYNAMIC_PADDING_BOX_MODEL_SPACE_STRATEGY } from './column/width-logic/dynamic-column-width';
 import { ContextApi } from './context/api';
 import { PblNgridMetaRowService } from './meta-rows/meta-row.service';
-import { PblNgridPluginContext } from '../ext/plugin-control';
-import { OnPropChangedEvent } from '../ext/types';
 import { PblCdkVirtualScrollViewportComponent } from './features/virtual-scroll/virtual-scroll-viewport.component';
 import { bindGridToDataSource } from './bind-grid-to-datasource';
+import { logicap, Logicaps } from './logicap/index';
 
 export interface RequiredAngularTokens {
   ngZone: NgZone;
@@ -24,6 +25,7 @@ export interface RequiredAngularTokens {
   cdRef: ChangeDetectorRef;
   elRef: ElementRef<HTMLElement>;
   config: PblNgridConfigService;
+  registry: PblNgridRegistryService;
   dir?: Directionality;
 }
 
@@ -33,6 +35,7 @@ export function createApis<T>(grid: PblNgridComponent<T>, tokens: RequiredAngula
 
 class InternalExtensionApi<T = any> implements PblNgridInternalExtensionApi<T> {
   readonly config: PblNgridConfigService;
+  readonly registry: PblNgridRegistryService;
   readonly element: HTMLElement;
   readonly propChanged: Observable<OnPropChangedEvent>;
   readonly columnStore: PblColumnStore;
@@ -41,6 +44,8 @@ class InternalExtensionApi<T = any> implements PblNgridInternalExtensionApi<T> {
   readonly rowsApi: PblRowsApi<T>;
   readonly events: Observable<PblNgridEvents>;
   readonly plugin: PblNgridPluginContext;
+  readonly widthCalc: PblNgridColumnWidthCalc;
+  readonly logicaps: Logicaps;
 
   get cdkTable() { return this._cdkTable; }
   get contextApi() { return this._contextApi || (this._contextApi = new ContextApi<T>(this)); }
@@ -58,6 +63,7 @@ class InternalExtensionApi<T = any> implements PblNgridInternalExtensionApi<T> {
     this.propChanged = this._propChanged = new Subject<OnPropChangedEvent>();
 
     this.config = tokens.config;
+    this.registry = tokens.registry;
     this.element = tokens.elRef.nativeElement;
     if (tokens.dir) {
       this.dir = tokens.dir;
@@ -67,18 +73,31 @@ class InternalExtensionApi<T = any> implements PblNgridInternalExtensionApi<T> {
     this._create = init;
     this.plugin = plugin;
     this.events = plugin.events;
-    this.columnStore = new PblColumnStore(grid, tokens.injector.get(IterableDiffers));
+    this.columnStore = new PblColumnStore(this, tokens.injector.get(IterableDiffers));
+    this.widthCalc = new PblNgridColumnWidthCalc(this);
 
     const cellFactory = tokens.injector.get(PblNgridCellFactoryResolver);
     this.rowsApi = new PblRowsApi<T>(this, tokens.ngZone, cellFactory);
 
     this.columnApi = ColumnApi.create<T>(this);
     this.metaRowService = new PblNgridMetaRowService(this);
     this._contextApi = new ContextApi<T>(this);
+    this.logicaps = logicap(this);
 
     bindGridToDataSource(this);
 
     this.events.pipe(ON_DESTROY).subscribe( e => this._propChanged.complete() );
+
+    this.widthCalc
+      .onWidthCalc
+      .subscribe( rowWidth => {
+        this._cdkTable.minWidth = rowWidth.minimumRowWidth;
+
+        tokens.ngZone.run( () => {
+          this.rowsApi.syncRows('header');
+          this.plugin.emitEvent({ source: 'grid', kind: 'onResizeRow' });
+        });
+      });
   }
 
   getDirection() {
@@ -113,10 +132,6 @@ class InternalExtensionApi<T = any> implements PblNgridInternalExtensionApi<T> {
     this._viewPort = viewport;
   }
 
-  dynamicColumnWidthFactory(dir?: Direction): DynamicColumnWidthLogic {
-    return new DynamicColumnWidthLogic(DYNAMIC_PADDING_BOX_MODEL_SPACE_STRATEGY, dir ?? this.dir?.value);
-  }
-
   notifyPropChanged(source, key, prev, curr) {
     if (prev !== curr) {
       this._propChanged.next({source, key, prev, curr} as any);

libs/ngrid/src/lib/grid/cell/header-cell.component.ts

@@ -82,7 +82,7 @@ export class PblNgridHeaderCellComponent<T extends COLUMN = COLUMN> extends PblN
       predicate = event => (!gridWidthRow && event.reason !== 'update') || (gridWidthRow && event.reason !== 'resize');
       view = !gridWidthRow ? this.initMainHeaderColumnView(column) : undefined;
       if (gridWidthRow && !this.resizeObserver) {
-        this.resizeObserver = new PblColumnSizeObserver(this.el, this.extApi.grid);
+        this.resizeObserver = new PblColumnSizeObserver(this.el, this.extApi);
       }
 
       this.columnDef.widthChange

libs/ngrid/src/lib/grid/column/directives/column-def.ts

@@ -91,8 +91,8 @@ export class PblNgridColumnDef<T extends COLUMN = COLUMN> extends CdkColumnDef i
     super();
     this.grid = extApi.grid;
 
-    const s = extApi.dynamicColumnWidthFactory().strategy;
-    this.widthBreakout = c => widthBreakout(s, c);
+    const { strategy } = extApi.widthCalc.dynamicColumnWidth;
+    this.widthBreakout = c => widthBreakout(strategy, c);
   }
 
   /**

libs/ngrid/src/lib/grid/column/management/column-api.ts

@@ -164,7 +164,7 @@ export class ColumnApi<T> {
    * For each visible column in the table, resize the width to a proportional width relative to the total width provided.
    */
   autoSizeToFit(totalWidth: number, options: AutoSizeToFitOptions = {}): void {
-    const wLogic = this.extApi.dynamicColumnWidthFactory();
+    const wLogic = this.extApi.widthCalc.dynamicColumnWidth;
     const { visibleColumns } = this;
     const columnBehavior: AutoSizeToFitOptions['columnBehavior'] = options.columnBehavior || ( () => options ) as any;
 
@@ -230,8 +230,8 @@ export class ColumnApi<T> {
     }
     // we now reset the column widths, this will calculate a new `defaultWidth` and set it in all columns but the relevant ones are column from (3)
     // It will also mark all columnDefs for check
-    this.grid.resetColumnsWidth();
-    this.grid.resizeColumns();
+    this.extApi.widthCalc.resetColumnsWidth();
+    this.extApi.widthCalc.calcColumnWidth();
   }
 
   /**

libs/ngrid/src/lib/grid/column/management/column-store.ts

@@ -1,6 +1,9 @@
 import { Subject, Observable } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { isDevMode, IterableDiffer, IterableDiffers } from '@angular/core';
-import { PblNgridColumnDefinitionSet, PblColumnSet, PblMetaRowDefinitions } from '@pebula/ngrid/core';
+import { ON_DESTROY, PblNgridColumnDefinitionSet, PblColumnSet, PblMetaRowDefinitions } from '@pebula/ngrid/core';
+
+import { PblNgridInternalExtensionApi } from '../../../ext/grid-ext-api';
 import { PblNgridComponent } from '../../ngrid.component';
 import { findCellDef } from '../../cell/cell-def/utils';
 import {
@@ -9,12 +12,12 @@ import {
   isPblColumn, PblColumn, PblMetaColumn,
   PblNgridColumnSet,
 } from '../model';
+import { GridRowType } from '../../row/types';
+import { PblNgridBaseRowComponent } from '../../row/base-row.component';
 import { StaticColumnWidthLogic } from '../width-logic/static-column-width';
 import { resetColumnWidths } from '../../utils/width';
 import { PblMetaColumnStore, PblRowColumnsChangeEvent, PblRowTypeToColumnTypeMap } from './types';
 import { HiddenColumns } from './hidden-columns';
-import { GridRowType } from '../../row/types';
-import { PblNgridBaseRowComponent } from '../../row/base-row.component';
 import { MetaRowsStore } from './meta-rows-store';
 
 export class PblColumnStore {
@@ -40,8 +43,10 @@ export class PblColumnStore {
   private differ: IterableDiffer<PblColumn>;
   private _visibleChanged$ = new Subject<PblRowColumnsChangeEvent<PblColumn>>();
   private metaRowsStore: MetaRowsStore;
+  private grid: PblNgridComponent;
 
-  constructor(private readonly grid: PblNgridComponent, private readonly differs: IterableDiffers) {
+  constructor(private readonly extApi: PblNgridInternalExtensionApi, private readonly differs: IterableDiffers) {
+    this.grid = extApi.grid;
     this.metaRowsStore = new MetaRowsStore(differs);
     this.resetIds();
     this.resetColumns();
@@ -471,13 +476,13 @@ export class PblColumnStore {
   private afterColumnPositionChange(): void {
     // TODO: This shouldn't be here, it should be the responsibility of the caller to clear the context
     // Because now there is not option to control it.
-    this.grid.contextApi.clear(true);
+    this.extApi.contextApi.clear(true);
     this.updateGroups();
-    this.grid.resetColumnsWidth();
+    this.extApi.widthCalc.resetColumnsWidth();
     // now, any newly added column cells must first spin up to get a size
     // and most importantly have their ngAfterViewInit fired so the resize column will update the sizeInfo of the column!
-    this.grid.rowsApi.syncRows('header', true);
-    this.grid.resizeColumns();
+    this.extApi.rowsApi.syncRows('header', true);
+    this.extApi.widthCalc.calcColumnWidth();
   }
 }