@annalib/anna-core 7.2.4 → 7.2.6

package/src/lib/anna-generic-table-lib/directives/anna-fixed-row-size-table-virtual-scroll-strategy/anna-fixed-row-size-table-virtual-scroll-strategy.directive.ts

@@ -1,237 +0,0 @@
-import { coerceNumberProperty, NumberInput } from "@angular/cdk/coercion";
-import {
-  CdkVirtualScrollViewport,
-  VirtualScrollStrategy,
-  VIRTUAL_SCROLL_STRATEGY
-} from "@angular/cdk/scrolling";
-import { AfterContentInit, ContentChildren, Directive, forwardRef, Input, QueryList, SimpleChanges } from "@angular/core";
-import { MatHeaderRowDef } from "@angular/material/table";
-import { Subject } from "rxjs";
-import { distinctUntilChanged } from "rxjs/operators";
-import { AnnaFilterService } from '../../../anna-core-shared-lib/services/anna-filter.service';
-
-
-/**
- * A custom scroll strategy that accepts a static row height, static header height,
- * and a buffer size. The strategy 
- */
-export class AnnaFixedRowSizeTableVirtualScrollStrategy
-  implements VirtualScrollStrategy {
-  
-  viewport: CdkVirtualScrollViewport | null;
-
-  private buffer: number;
-
-  private headerHeight: number;
-
-  private rowHeight: number;
-
-  constructor(rowHeight: number, buffer: number, headerHeight: number) {
-    this.updateRowHeightAndBuffer(rowHeight, buffer, headerHeight);
-  }
-
-  private _scrolledIndexChange = new Subject<number>();
-
-  scrolledIndexChange = this._scrolledIndexChange.pipe(distinctUntilChanged());
-
-  /**
-   * Attaches this scroll strategy to a viewport.
-   * @param viewport The viewport to attach this strategy to.
-   */
-  attach(viewport: CdkVirtualScrollViewport): void {
-    this.viewport = viewport;
-    this.updateTotalContentSize();
-    this.updateRenderedRange();
-  }
-
-  /**
-   * Detaches this scroll strategy from the currently attached viewport.
-   */
-  detach(): void {
-    this._scrolledIndexChange.complete();
-    this.viewport = null;
-  }
-
-  onContentScrolled(): void {
-    this.updateRenderedRange();
-  }
-
-  onDataLengthChanged(): void {
-    this.updateTotalContentSize();
-    this.updateRenderedRange();
-  }
-
-  onContentRendered(): void {
-    // This method is useful for virtual scroll strategies that measure the rendered
-    // content to determine its height. This scroll strategy assumes that rows have
-    // a static height, so there's no need to implement this method.
-  }
-
-  onRenderedOffsetChanged(): void {
-    // Similar to onContentRendered, this method is useful for virtual scroll strategies
-    // that need to track the offset as it changes. This scroll strategy is always able
-    // to calculate the correct offset from other values, so there's no need to implement
-    // this method.
-  }
-
-  scrollToIndex(index: number, behavior: ScrollBehavior): void {
-    this.viewport?.scrollToOffset(index * this.rowHeight, behavior);
-  }
-
-  /**
-   * Update the item size and buffer size.
-   * @param rowHeight The height of a row in the virtually scrolling table.
-   * @param buffer The number of rows to buffer outside the viewport.
-   * @param headerHeight The total height of the table header, including all header rows.
-   */
-  updateRowHeightAndBuffer(rowHeight: number, buffer: number, headerHeight: number) {
-    this.rowHeight = rowHeight;
-    this.buffer = buffer;
-    this.headerHeight = headerHeight;
-    this.updateTotalContentSize();
-    this.updateRenderedRange();
-  }
-
-  protected updateRenderedRange() {
-    if (!this.viewport) {
-        return;
-    }
-
-    const viewportSize = this.viewport.getViewportSize();
-    const dataLength = this.viewport.getDataLength();
-    const scrollOffset = this.viewport.measureScrollOffset();
-
-    // the index of the first item that would be at least partially visible in the viewport
-    let firstVisibleIndex =  Math.floor((scrollOffset + this.headerHeight) / this.rowHeight);
-    
-    // if the buffer size is 10 but the first visible item is at, say, index 7
-    // then the buffered items must be 7, because we don't have 10 items available to buffer.
-    const bufferedItems = Math.min(AnnaFilterService.bufferSize, firstVisibleIndex);
-
-    const itemsInViewport = Math.ceil(viewportSize / this.rowHeight);
-    const itemsToRender = itemsInViewport + this.buffer;
-
-    // Clamp the new range between 0 and dataLength
-    const newStart = Math.max(0, firstVisibleIndex - bufferedItems);
-    const newEnd = Math.min(dataLength, firstVisibleIndex + itemsToRender);
-
-    const newRange = {
-      start: newStart,
-      end: newEnd
-    };
-
-    const newOffset = this.rowHeight * (firstVisibleIndex - bufferedItems);
-    this.viewport.setRenderedContentOffset(newOffset);
-    this.viewport.setRenderedRange(newRange);
-    this._scrolledIndexChange.next(Math.floor(firstVisibleIndex));
-  }
-
-  protected updateTotalContentSize() {
-    this.viewport?.setTotalContentSize(this.viewport.getDataLength() * this.rowHeight);
-  }
-}
-
-/**
- * Provider factory for `FixedSizeVirtualScrollStrategy` that simply extracts the already created
- * `FixedSizeVirtualScrollStrategy` from the given directive.
- * @param fixedSizeDir The instance of `CdkFixedSizeVirtualScroll` to extract the
- *     `FixedSizeVirtualScrollStrategy` from.
- */
-export function fixedSizeVirtualScrollStrategyFactory(
-  fixedSizeDir: AnnaFixedRowSizeTableVirtualScrollStrategyDirective
-) {
-  return fixedSizeDir.scrollStrategy;
-}
-
-@Directive({
-  selector: "cdk-virtual-scroll-viewport[rowHeight], anna-table-virtual-scroll-viewport[rowHeight]",
-  providers: [
-    {
-      provide: VIRTUAL_SCROLL_STRATEGY,
-      useFactory: fixedSizeVirtualScrollStrategyFactory,
-      deps: [forwardRef(() => AnnaFixedRowSizeTableVirtualScrollStrategyDirective)]
-    }
-  ]
-})
-export class AnnaFixedRowSizeTableVirtualScrollStrategyDirective implements AfterContentInit {
-    /** The height of rows in the table (in pixels). Defaults to 30. */
-  @Input()
-  set rowHeight(value: number) { this._rowHeight = coerceNumberProperty(value); }
-  get rowHeight(): number { return this._rowHeight; }
-  private _rowHeight = 30;
-
-  /**
-   * The height of header rows in the table (in pixels). Defaults to 30.
-   */
-  @Input()
-  set headerRowHeight(value: number) { this._headerRowHeight = coerceNumberProperty(value); }
-  get headerRowHeight(): number { return this._headerRowHeight; }
-  private _headerRowHeight: number = 30;
-
-  /**
-   * The number of buffered rows rendered beyond the viewport.
-   * If the number of buffered rows dips below this number, more rows will be rendered. Defaults to 20.
-   */
-  @Input()
-  set buffer(value: number) { 
-    this._buffer = coerceNumberProperty(value);}
-  get buffer(): number { return this._buffer; }
-  private _buffer = 20;
-
-  @Input()
-  set headerRows(value: number | null | undefined) { this._headerRows = coerceNumberProperty(value, undefined); }
-  get headerRows(): number | null | undefined { return this._headerRows; }
-  private _headerRows: number | null | undefined = null;
-
-  /**
-   * Using ContentChildren here fails to pick up row defs that are added programmatically,
-   * but we don't really have a way of handling that without accessing private methods of 
-   * the CdkTable. Adding header row defs programmatically is uncommon, so ContentChildren
-   * is usually sufficient. The explicit `headerRows` input above allows the number of rows
-   * to be set by the developer to override the QueryList-driven behavior.
-   */
-  @ContentChildren(MatHeaderRowDef) headerRowsQuery: QueryList<MatHeaderRowDef>;
-
-  private headerRowCount: number = 1;
-
-  /** The scroll strategy used by this directive. */
-  scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(
-    this.rowHeight,
-    this.buffer,
-    this.headerRowHeight * this.headerRowCount
-  );
-
-  ngOnChanges(change: SimpleChanges) {
-    if (this.headerRows != undefined || this.headerRowsQuery) {
-      this.handleChange();
-    }
-    if(change['buffer']?.previousValue != change['buffer']?.currentValue){
-      AnnaFilterService.bufferSize = this.buffer;
-      this.scrollStrategy = new AnnaFixedRowSizeTableVirtualScrollStrategy(
-        this.rowHeight,
-        this.buffer,
-        this.headerRowHeight * this.headerRowCount
-      ); 
-    }
-  }
-
-  ngAfterContentInit(): void {
-    this.headerRowsQuery.changes.subscribe(() => {
-      this.handleChange();
-    });
-  }
-
-  private handleChange(): void {
-    this.scrollStrategy.updateRowHeightAndBuffer(
-      this.rowHeight,
-      this.buffer,
-      // Use the explicit headerRows input value if set.
-      // Otherwise, fall back to the QueryList length.
-      this.headerRowHeight * (this._headerRows ?? this.headerRowsQuery.length)
-    );
-  }
-
-  static ngAcceptInputType_rowHeight: NumberInput;
-  static ngAcceptInputType_buffer: NumberInput;
-  static ngAcceptInputType_headerRowHeight: NumberInput;
-}

package/src/lib/anna-generic-table-lib/directives/anna-virtual-table/anna-virtual-table.directive.ts

@@ -1,204 +0,0 @@
-import { ArrayDataSource, CollectionViewer, isDataSource, ListRange } from "@angular/cdk/collections";
-import { CdkVirtualScrollRepeater, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
-import { CdkHeaderRowDef, CdkTable, DataSource,  STICKY_POSITIONING_LISTENER, _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER } from "@angular/cdk/table";
-import { ContentChildren, Directive, ElementRef, Inject, Input, NgIterable, NgZone, QueryList } from "@angular/core";
-import { isObservable, Observable, of, Subject } from "rxjs";
-import { map, pairwise, shareReplay, startWith, switchMap, takeUntil } from "rxjs/operators";
-import { AnnaTableVirtualScrollViewportComponent } from '../../components/anna-table-virtual-scroll-viewport/anna-table-virtual-scroll-viewport.component';
-
-/**
- * Directive that wraps a given data source in a "virtual" data source that emits
- * the slice of the original data source that matches the range that should be rendered
- * in the containing virtual scroll viewport.
- */
-@Directive({
-  selector: '[mat-table][appVirtualDataSource], mat-table[appVirtualDataSource]',
-  providers: [{ provide: STICKY_POSITIONING_LISTENER, useExisting: AnnaVirtualTableDirective }]
-})
-export class AnnaVirtualTableDirective<T> implements CdkVirtualScrollRepeater<T>, CollectionViewer {
-  @Input('appVirtualDataSource')
-  set dataSource(value: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined) {
-    this._dataSource = value;
-    if (isDataSource(value)) {
-      this.dataSourceChanges.next(value);
-    } else {
-      this.dataSourceChanges.next(new ArrayDataSource<T>(isObservable(value) ? value : Array.from(value || [])));
-    }
-  }
-  get dataSource(): DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined {
-    return this._dataSource;
-  }
-  private _dataSource: DataSource<T> | Observable<T[]> | NgIterable<T> | null | undefined;
-
-  @ContentChildren(CdkHeaderRowDef) headerRowDefs: QueryList<CdkHeaderRowDef>;
-
-  private virtualizedDataStream = new Subject<T[] | ReadonlyArray<T>>();
-
-  private dataSourceChanges = new Subject<DataSource<T>>();
-
-  /** The raw, unvirtualized data stream. Emits whenever the data in the current DataSource changes. */
-  dataStream: Observable<T[] | ReadonlyArray<T>> = this.dataSourceChanges
-    .pipe(
-      // Start off with null data source.
-      startWith(null),
-      // Bundle up the previous and current data sources so we can work with both.
-      pairwise(),
-      // Use `changeDataSource` to disconnect from the previous data source and connect to the
-      // new one, passing back a stream of data changes which we run through `switchMap` to give
-      // us a data stream that emits the latest data from whatever the current data source is.
-      switchMap(([prev, cur]) => this.changeDataSource(prev, cur)),
-      // Replay the last emitted data when someone subscribes.
-      shareReplay(1));
-
-  viewChange = new Subject<ListRange>();
-
-  private data: T[] | readonly T[];
-
-  private destroyed$ = new Subject<void>();
-
-  private renderedItems: T[] | ReadonlyArray<T>;
-
-  private renderedRange: ListRange = { start: 0, end: 0 };
-
-  private isNativeHtmlTable: boolean = false;
-
-  constructor(
-    elementRef: ElementRef<HTMLElement>,
-    private viewport: CdkVirtualScrollViewport,
-    private table: CdkTable<T>,
-    ngZone: NgZone,
-    @Inject(_COALESCED_STYLE_SCHEDULER) private _coalescedStyleScheduler: _CoalescedStyleScheduler,
-  ) {
-    table.dataSource = this.virtualizedDataStream;
-    this.isNativeHtmlTable = elementRef.nativeElement.tagName === 'TABLE';
-    this.dataStream.subscribe(data => {
-      this.data = data;
-      this.onRenderedDataChange();
-    });
-    viewport.renderedRangeStream.pipe(takeUntil(this.destroyed$)).subscribe((range: ListRange) => {
-      this.renderedRange = range;
-      ngZone.run(() => this.viewChange.next(range));
-      this.onRenderedDataChange();
-    });
-    viewport.attach(this);
-  }
-
-  ngOnInit(): void {
-    // This is just a proof of concept, but the AnnaTableVirtualScrollViewportComponent uses `position: absolute` and `top: #px` instead of `transform: translateY(#px)` to position the viewport.
-    // This removes the need to account for the translation in the `top` of the sticky header rows.
-    if (this.viewport instanceof AnnaTableVirtualScrollViewportComponent) {
-      return;
-    }
-
-    this.viewport.scrolledIndexChange
-      .pipe(
-        map(() => this.viewport.getOffsetToRenderedContentStart()),
-        takeUntil(this.destroyed$)
-      )
-      .subscribe((offset) => {
-        // We need to set the `style.top` property of the sticky header rows
-        // to the negative value of the virtual scroll viewport's offset, so
-        // make the offset negative.
-        offset = -offset;
-
-        const stickyStates: boolean[] = this.headerRowDefs.map(rowDef => rowDef.sticky);
-
-        // This logic is exactly the same as what's in the StickyStyler (literally copy + paste).
-        // The only difference is that the `stickyOffset` variable starts at the virtual scroll
-        // viewport container's offset instead of starting at zero.
-        const rows = this.table._getRenderedRows(this.table._headerRowOutlet);
-        const stickyOffsets: number[] = [];
-        const stickyCellHeights: (number|undefined)[] = [];
-        const elementsToStick: HTMLElement[][] = [];
-        for (let rowIndex = 0, stickyOffset = offset; rowIndex < rows.length; rowIndex++) {
-          stickyOffsets[rowIndex] = stickyOffset;
-
-          if (!stickyStates[rowIndex]) {
-            continue;
-          }
-
-          const row = rows[rowIndex];
-          elementsToStick[rowIndex] = this.isNativeHtmlTable ? Array.from(row.children) as HTMLElement[] : [row];
-
-          const height = row.getBoundingClientRect().height;
-          stickyOffset += height;
-          stickyCellHeights[rowIndex] = height;
-        }
-
-        // Using the CoalescedStyleScheduler here is optional. It'll work without it,
-        // and CoalescedStyleScheduler is not public (yet?), so feel free to remove it.
-        this._coalescedStyleScheduler.schedule(() => {
-          for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-            if (!stickyStates[rowIndex]) {
-              continue;
-            }
-
-            for (const element of elementsToStick[rowIndex]) {
-              element.style.top = `${stickyOffsets[rowIndex]}px`;
-            }
-          }
-        });
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.destroyed$.next();
-    this.dataSourceChanges.complete();
-    this.virtualizedDataStream.complete();
-  }
-
-    /** React to scroll state changes in the viewport. */
-  private onRenderedDataChange() {
-    if (!this.renderedRange) {
-      return;
-    }
-    this.renderedItems = this.data.slice(this.renderedRange.start, this.renderedRange.end + 1);
-    // delegate rendering to the table by emitting from the virtualizedDataStream
-    this.virtualizedDataStream.next(this.renderedItems);
-  }
-
-  /** Swap out one data source for another. */
-  private changeDataSource(oldDataSource: DataSource<T> | null, newDs: DataSource<T> | null):
-      Observable<T[] | ReadonlyArray<T>> {
-
-    oldDataSource?.disconnect(this);
-    return newDs ? newDs.connect(this) : of();
-  }
-
-  /**
-   * This method is only used by the experimental AutoSizeVirtualScrollStrategy.
-   * We're not using that strategy, but I've implemented it just to show how it oculd be done.
-   * I'm not actually sure if this works.
-   */
-  measureRangeSize(range: ListRange, orientation: 'horizontal' | 'vertical'): number {
-    if (orientation === 'horizontal' || range.end < range.start) {
-      // virtual scrolling columns are not supported by this directive
-      return 0;
-    }
-
-    const renderedBodyRows = this.table._getRenderedRows(this.table._rowOutlet);
-
-    const firstRow: HTMLElement | undefined = renderedBodyRows[range.start];
-    const lastRow: HTMLElement | undefined = renderedBodyRows[range.end];
-
-    if (!firstRow || !lastRow) {
-      return 0;
-    }
-
-    // We need to include all header and footer rows in the sum, since they're always rendered
-    const renderedHeaderRows = this.table._getRenderedRows(this.table._headerRowOutlet);
-    const renderedFooterRows = this.table._getRenderedRows(this.table._footerRowOutlet);
-
-    // TODO (performance): Can we just measure the offset of the first and last items and do some math to avoid having to measure each row individually?
-    const headerHeight = renderedHeaderRows.reduce((sum: number, row: HTMLElement) => {
-      return sum += row.getBoundingClientRect().height;
-    }, 0);
-    const footerHeight = renderedFooterRows.reduce((sum: number, row: HTMLElement) => {
-      return sum += row.getBoundingClientRect().height;
-    }, 0);
-
-    const bodyHeight = lastRow.getBoundingClientRect().bottom - firstRow.getBoundingClientRect().top;
-
-    return headerHeight + footerHeight + bodyHeight;
-  }
-}

package/src/test.ts

@@ -1,27 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

package/tsconfig.lib.json

@@ -1,19 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "baseUrl": "./",
-    "types": [],
-    "paths": {
-      
-    }
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}

package/tsconfig.lib.prod.json

@@ -1,10 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}

package/tsconfig.spec.json

@@ -1,17 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}