@gp-grid/angular 0.10.3 → 0.11.1

package/src/lib/components/grid-overlays.component.ts

@@ -1,140 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-} from '@angular/core';
-import type {
-  CellValue,
-  ColumnDefinition,
-  ColumnFilterModel,
-  DragState,
-  VisibleColumnInfo,
-} from '@gp-grid/core';
-import { FilterPopupComponent } from './filter-popup.component';
-
-export interface ActiveFilterPopup {
-  colIndex: number;
-  column: ColumnDefinition;
-  distinctValues: CellValue[];
-  currentFilter?: ColumnFilterModel;
-  anchorEl: HTMLElement | null;
-}
-
-const TEMPLATE = `
-  @if (filterPopup(); as fp) {
-    <gp-grid-filter-popup
-      [column]="fp.column"
-      [colIndex]="fp.colIndex"
-      [anchorEl]="fp.anchorEl!"
-      [distinctValues]="fp.distinctValues"
-      [currentFilter]="fp.currentFilter"
-      (apply)="filterApply.emit($event)"
-      (close)="filterClose.emit()"
-    />
-  }
-  @if (isResizing()) {
-    <div class="gp-grid-column-resize-line" [style.left.px]="resizeLineLeft()"></div>
-  }
-  @if (isLoading()) {
-    <div
-      style="position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none;"
-      [style.top.px]="headerHeight()">
-      <div class="gp-grid-loading-overlay"></div>
-      <div class="gp-grid-loading">
-        <div class="gp-grid-loading-spinner"></div>
-      </div>
-    </div>
-  }
-  @if (errorMessage(); as msg) {
-    <div class="gp-grid-error">Error: {{ msg }}</div>
-  }
-  @if (columnMove(); as cm) {
-    <div
-      class="gp-grid-column-move-ghost"
-      [style.left.px]="cm.currentX - cm.ghostWidth / 2"
-      [style.top.px]="cm.currentY - cm.ghostHeight / 2"
-      [style.width.px]="cm.ghostWidth"
-      [style.height.px]="cm.ghostHeight">
-      {{ columnMoveGhostText() }}
-    </div>
-    @if (columnMoveDropLeft() !== null) {
-      <div
-        class="gp-grid-column-drop-indicator"
-        [style.left.px]="columnMoveDropLeft()"
-        [style.height.px]="headerHeight()"></div>
-    }
-  }
-  @if (rowDragGhost(); as rd) {
-    <div
-      class="gp-grid-row-drag-ghost"
-      [style.left.px]="rd.currentX + 12"
-      [style.top.px]="rd.currentY - rowHeight() / 2"
-      [style.width.px]="rowDragGhostWidth()"
-      [style.height.px]="rowHeight()"></div>
-  }
-`;
-
-@Component({
-  selector: 'gp-grid-overlays',
-  standalone: true,
-  imports: [FilterPopupComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: TEMPLATE,
-})
-export class GridOverlaysComponent {
-  filterPopup = input<ActiveFilterPopup | null>(null);
-  isLoading = input<boolean>(false);
-  errorMessage = input<string | null>(null);
-  headerHeight = input.required<number>();
-  rowHeight = input.required<number>();
-  dragState = input.required<DragState>();
-  visibleColumnWithIndices = input.required<VisibleColumnInfo[]>();
-  columnPositions = input.required<number[]>();
-  scrollLeft = input.required<number>();
-  effectiveColumns = input.required<ColumnDefinition[]>();
-  totalWidth = input.required<number>();
-
-  filterApply = output<{ colId: string; filter: ColumnFilterModel | null }>();
-  filterClose = output<void>();
-
-  protected isResizing = computed(() => this.dragState().dragType === 'column-resize');
-
-  protected resizeLineLeft = computed<number>(() => {
-    const cr = this.dragState().columnResize;
-    if (cr === null) return 0;
-    const visibleIndex = this.visibleColumnWithIndices().findIndex(
-      v => v.originalIndex === cr.colIndex
-    );
-    if (visibleIndex === -1) return 0;
-    const positions = this.columnPositions();
-    return (positions[visibleIndex] ?? 0) + cr.currentWidth - this.scrollLeft();
-  });
-
-  protected columnMove = computed(() => {
-    if (this.dragState().dragType !== 'column-move') return null;
-    return this.dragState().columnMove;
-  });
-
-  protected rowDragGhost = computed(() => {
-    if (this.dragState().dragType !== 'row-drag') return null;
-    return this.dragState().rowDrag;
-  });
-
-  protected columnMoveGhostText = computed<string>(() => {
-    const cm = this.columnMove();
-    if (cm === null) return '';
-    const column = this.effectiveColumns()[cm.sourceColIndex];
-    return column?.headerName ?? column?.field ?? '';
-  });
-
-  protected columnMoveDropLeft = computed<number | null>(() => {
-    const cm = this.columnMove();
-    if (cm === null || cm.dropTargetIndex === null) return null;
-    const positions = this.columnPositions();
-    return (positions[cm.dropTargetIndex] ?? 0) - this.scrollLeft();
-  });
-
-  protected rowDragGhostWidth = computed<number>(() => Math.min(300, this.totalWidth()));
-}

package/src/lib/components/index.ts

@@ -1,4 +0,0 @@
-export * from "./grid-header.component";
-export * from "./grid-body.component";
-export * from "./filter-popup.component";
-export * from "./grid-overlays.component";

package/src/lib/createGridData.ts

@@ -1,82 +0,0 @@
-import { createMutableClientDataSource } from "@gp-grid/core";
-import type {
-  RowId,
-  CellValue,
-  MutableDataSource,
-  ParallelSortOptions,
-} from "@gp-grid/core";
-
-export interface CreateGridDataOptions<TData> {
-  /** Function to extract a unique ID from each row. Required. */
-  getRowId: (row: TData) => RowId;
-  /** Debounce time for batching transactions in ms. Default 50. */
-  debounceMs?: number;
-  /** Use Web Worker for sorting large datasets (default: true) */
-  useWorker?: boolean;
-  /** Options for parallel sorting (only used when useWorker is true) */
-  parallelSort?: ParallelSortOptions | false;
-}
-
-export interface GridDataApi<TData> {
-  /** The data source to pass to <gp-grid [dataSource]="dataSource" />. */
-  dataSource: MutableDataSource<TData>;
-  /** Update a single row by ID with partial data. */
-  updateRow: (id: RowId, data: Partial<TData>) => void;
-  /** Add rows to the data source. */
-  addRows: (rows: TData[]) => void;
-  /** Remove rows by ID. */
-  removeRows: (ids: RowId[]) => void;
-  /** Update a single cell value. */
-  updateCell: (id: RowId, field: string, value: CellValue) => void;
-  /** Clear all data from the data source. */
-  clear: () => void;
-  /** Get a row by its ID. */
-  getRowById: (id: RowId) => TData | undefined;
-  /** Get the current total row count. */
-  getTotalRowCount: () => number;
-  /** Force immediate processing of queued transactions. */
-  flushTransactions: () => Promise<void>;
-}
-
-/**
- * Angular helper for efficient grid data mutations.
- *
- * Wraps `createMutableClientDataSource` to provide a simple API for
- * updating grid data without triggering full pipeline rebuilds.
- *
- * @example
- * ```ts
- * private readonly grid = createGridData(initialRows, {
- *   getRowId: (row) => row.id,
- * });
- *
- * // Template:
- * // <gp-grid [dataSource]="grid.dataSource" [columns]="columns" />
- *
- * // Update a row imperatively:
- * this.grid.updateRow(42, { name: 'New name' });
- * ```
- */
-export const createGridData = <TData = unknown>(
-  initialData: TData[],
-  options: CreateGridDataOptions<TData>,
-): GridDataApi<TData> => {
-  const ds = createMutableClientDataSource<TData>(initialData, {
-    getRowId: options.getRowId,
-    debounceMs: options.debounceMs,
-    useWorker: options.useWorker,
-    parallelSort: options.parallelSort,
-  });
-
-  return {
-    dataSource: ds,
-    updateRow: ds.updateRow,
-    addRows: ds.addRows,
-    removeRows: ds.removeRows,
-    updateCell: ds.updateCell,
-    clear: ds.clear,
-    getRowById: ds.getRowById,
-    getTotalRowCount: ds.getTotalRowCount,
-    flushTransactions: ds.flushTransactions,
-  };
-};

package/src/lib/gp-grid-bindings.ts

@@ -1,150 +0,0 @@
-import {
-  AutoScrollDriver,
-  DataSourceOwner,
-  GridCore,
-  InputEventAdapter,
-  PendingRowDragController,
-  applyBatchInstructions,
-  scrollCellIntoView,
-} from '@gp-grid/core';
-import type {
-  ColumnDefinition,
-  DataSource,
-  HighlightingOptions,
-} from '@gp-grid/core';
-import type { GpGridViewModel } from './gp-grid-view-model';
-
-export interface GpGridBindingsDeps {
-  vm: GpGridViewModel;
-  isBrowser: boolean;
-  getContainer: () => HTMLElement | null;
-  getBody: () => HTMLElement | null;
-  getRowHeight: () => number;
-  getHeaderHeight: () => number;
-}
-
-/**
- * Owns the core grid instance plus every framework-agnostic adapter the
- * Angular component drives (auto-scroll, pending row-drag, input events,
- * data source ownership). The component becomes a thin shell that holds
- * lifecycle + Angular template bindings and delegates state work here.
- */
-export class GpGridBindings<TData = unknown> {
-  readonly dataSourceOwner = new DataSourceOwner<TData>();
-  readonly autoScroll: AutoScrollDriver;
-  readonly pendingRowDrag: PendingRowDragController;
-  readonly input: InputEventAdapter<TData>;
-
-  coreRef: GridCore<TData> | null = null;
-  private unsubscribe: (() => void) | null = null;
-  private resizeObserver: ResizeObserver | null = null;
-
-  constructor(private readonly deps: GpGridBindingsDeps) {
-    this.autoScroll = new AutoScrollDriver(
-      () => this.deps.getBody(),
-      (event) => this.input.dragMove(event),
-    );
-    this.pendingRowDrag = new PendingRowDragController({
-      getCore: () => this.coreRef,
-      getContainer: this.deps.getContainer,
-      isBrowser: this.deps.isBrowser,
-      onDragConfirmed: (state) => this.deps.vm.dragState.set(state),
-    });
-    this.input = new InputEventAdapter<TData>({
-      getCore: () => this.coreRef,
-      getBodyEl: this.deps.getBody,
-      autoScroll: this.autoScroll,
-      pendingRowDrag: this.pendingRowDrag,
-      onDragStateChange: (state) => this.deps.vm.dragState.set(state),
-    });
-  }
-
-  attach(core: GridCore<TData>): void {
-    this.coreRef = core;
-    this.unsubscribe = core.onBatchInstruction((instructions) => {
-      const vm = this.deps.vm;
-      const maps = applyBatchInstructions(
-        instructions,
-        vm.slots(),
-        vm.headerState(),
-        vm.batchSetters,
-      );
-      vm.slots.set(new Map(maps.slots));
-      vm.headerState.set(new Map(maps.headers));
-    });
-
-    core.initialize();
-    core.input.updateDeps({
-      getHeaderHeight: this.deps.getHeaderHeight,
-      getRowHeight: this.deps.getRowHeight,
-      getColumnPositions: () => this.deps.vm.columnPositions(),
-      getColumnCount: () => this.deps.vm.visibleColumnWithIndices().length,
-      getOriginalColumnIndex: (visibleIndex) =>
-        this.deps.vm.visibleColumnWithIndices()[visibleIndex]?.originalIndex ?? visibleIndex,
-    });
-  }
-
-  observeViewport(container: HTMLElement, bodyEl: HTMLElement): void {
-    this.deps.vm.viewportWidth.set(container.clientWidth);
-    this.resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) this.deps.vm.viewportWidth.set(entry.contentRect.width);
-    });
-    this.resizeObserver.observe(container);
-    this.coreRef?.setViewport(0, 0, container.clientWidth, bodyEl.clientHeight);
-  }
-
-  destroy(): void {
-    this.autoScroll.stop();
-    this.pendingRowDrag.cancel();
-    this.pendingRowDrag.releaseLocks();
-    this.unsubscribe?.();
-    this.resizeObserver?.disconnect();
-    this.coreRef?.destroy();
-    this.dataSourceOwner.destroy();
-    this.coreRef = null;
-  }
-
-  syncHighlighting(opts: HighlightingOptions | null): void {
-    const core = this.coreRef;
-    if (core?.highlight && opts) {
-      core.highlight.updateOptions(opts as HighlightingOptions<TData>);
-    }
-  }
-
-  syncColumns(cols: ColumnDefinition[]): void {
-    const core = this.coreRef;
-    if (core === null) return;
-    if (this.dataSourceOwner.syncColumns(cols)) core.setColumns(cols);
-  }
-
-  syncRows(rows: TData[], dataSource: DataSource<TData> | null): void {
-    const core = this.coreRef;
-    if (core === null) return;
-    const newDs = this.dataSourceOwner.syncRows(rows, dataSource);
-    if (newDs !== null) core.setDataSource(newDs);
-  }
-
-  applyPendingScroll(): void {
-    const top = this.deps.vm.pendingScrollTop();
-    const body = this.deps.getBody();
-    if (top !== null && body) {
-      body.scrollTop = top;
-      this.deps.vm.pendingScrollTop.set(null);
-    }
-  }
-
-  scrollToRow(row: number): void {
-    const core = this.coreRef;
-    const body = this.deps.getBody();
-    if (core === null || body === null) return;
-    scrollCellIntoView(
-      core,
-      body,
-      row,
-      this.deps.getRowHeight(),
-      this.deps.vm.slots(),
-      this.deps.vm.rowsWrapperOffset(),
-    );
-  }
-}

package/src/lib/gp-grid-view-model.ts

@@ -1,148 +0,0 @@
-import { Signal, computed, signal } from '@angular/core';
-import {
-  calculateFillHandlePosition,
-  calculateScaledColumnPositions,
-  getTotalWidth,
-} from '@gp-grid/core';
-import type {
-  BatchChangeSetters,
-  CellPosition,
-  CellRange,
-  ColumnDefinition,
-  DragState,
-  FillHandlePosition,
-  FilterPopupState,
-  HeaderData,
-  SlotData,
-  VisibleColumnInfo,
-} from '@gp-grid/core';
-import type { ActiveFilterPopup, EditingCellState } from './components';
-import type { AngularColumnDefinition } from './types';
-
-export interface GpGridViewModelDeps {
-  getColumns: () => AngularColumnDefinition[];
-  getRows: () => unknown[];
-  getRowHeight: () => number;
-}
-
-const INITIAL_DRAG_STATE: DragState = {
-  isDragging: false,
-  dragType: null,
-  fillSourceRange: null,
-  fillTarget: null,
-  columnResize: null,
-  columnMove: null,
-  rowDrag: null,
-};
-
-/**
- * Reactive view-state container for GpGridComponent.
- *
- * Owns every signal and computed the template binds against, plus the
- * batch-change setters bag wired into those signals. The component
- * becomes a thin shell that holds lifecycle, event handlers, and inputs.
- *
- * Angular-specific (uses signal/computed from @angular/core) — lives in
- * the angular package, not core.
- */
-export class GpGridViewModel {
-  readonly headerState = signal<Map<number, HeaderData>>(new Map());
-  readonly viewportWidth = signal<number>(0);
-  readonly scrollLeft = signal<number>(0);
-  readonly isLoading = signal<boolean>(false);
-  readonly errorMessage = signal<string | null>(null);
-  readonly filterPopup = signal<ActiveFilterPopup | null>(null);
-  readonly pendingScrollTop = signal<number | null>(null);
-  readonly activeCell = signal<CellPosition | null>(null);
-  readonly selectionRange = signal<CellRange | null>(null);
-  readonly editingCell = signal<EditingCellState | null>(null);
-  readonly hoverPosition = signal<CellPosition | null>(null);
-  readonly columnsOverride = signal<ColumnDefinition[] | null>(null);
-  readonly dragState = signal<DragState>(INITIAL_DRAG_STATE);
-  readonly contentWidth = signal<number>(0);
-  readonly contentHeight = signal<number>(0);
-  readonly rowsWrapperOffset = signal<number>(0);
-  readonly slots = signal<Map<string, SlotData>>(new Map());
-
-  readonly effectiveColumns: Signal<ColumnDefinition[]>;
-  readonly visibleColumnWithIndices: Signal<VisibleColumnInfo[]>;
-  readonly columnPositions: Signal<number[]>;
-  readonly columnWidths: Signal<number[]>;
-  readonly totalWidth: Signal<number>;
-  readonly fillHandlePosition: Signal<FillHandlePosition | null>;
-  readonly slotsArray: Signal<SlotData[]>;
-  readonly totalRows: Signal<number>;
-
-  readonly batchSetters: BatchChangeSetters;
-
-  private filterAnchorEl: HTMLElement | null = null;
-
-  constructor(deps: GpGridViewModelDeps) {
-    this.effectiveColumns = computed(() =>
-      this.columnsOverride() ?? (deps.getColumns() as unknown as ColumnDefinition[])
-    );
-    this.visibleColumnWithIndices = computed(() =>
-      this.effectiveColumns()
-        .map((col, index) => ({ column: col, originalIndex: index }))
-        .filter(({ column }) => !column.hidden)
-    );
-    const columnLayout = computed(() =>
-      calculateScaledColumnPositions(
-        this.visibleColumnWithIndices().map(v => v.column),
-        this.viewportWidth(),
-      )
-    );
-    this.columnPositions = computed(() => columnLayout().positions);
-    this.columnWidths = computed(() => columnLayout().widths);
-    this.totalWidth = computed(() => getTotalWidth(this.columnPositions()));
-    this.fillHandlePosition = computed(() =>
-      calculateFillHandlePosition({
-        activeCell: this.activeCell(),
-        selectionRange: this.selectionRange(),
-        slots: this.slots(),
-        columns: this.effectiveColumns(),
-        visibleColumnsWithIndices: this.visibleColumnWithIndices(),
-        columnPositions: this.columnPositions(),
-        columnWidths: this.columnWidths(),
-        rowHeight: deps.getRowHeight(),
-      })
-    );
-    this.slotsArray = computed(() => [...this.slots().values()]);
-    this.totalRows = computed(() => deps.getRows().length);
-
-    this.batchSetters = {
-      setContentWidth: (v) => this.contentWidth.set(v),
-      setContentHeight: (v) => this.contentHeight.set(v),
-      setRowsWrapperOffset: (v) => this.rowsWrapperOffset.set(v),
-      setIsLoading: (v) => this.isLoading.set(v),
-      setErrorMessage: (v) => this.errorMessage.set(v),
-      setPendingScrollTop: (v) => this.pendingScrollTop.set(v),
-      setActiveCell: (v) => this.activeCell.set(v),
-      setSelectionRange: (v) => this.selectionRange.set(v),
-      setEditingCell: (v) => this.editingCell.set(v),
-      setHoverPosition: (v) => this.hoverPosition.set(v),
-      setColumnsOverride: (v) => this.columnsOverride.set(v),
-      onFilterPopupChange: (v) => this.materializeFilterPopup(v),
-    };
-  }
-
-  setFilterAnchor(el: HTMLElement | null): void {
-    this.filterAnchorEl = el;
-  }
-
-  private materializeFilterPopup(state: FilterPopupState | null): void {
-    if (state === null) {
-      this.filterPopup.set(null);
-      return;
-    }
-    if (state.isOpen && state.column) {
-      this.filterPopup.set({
-        colIndex: state.colIndex,
-        column: state.column,
-        distinctValues: state.distinctValues,
-        currentFilter: state.currentFilter,
-        anchorEl: this.filterAnchorEl,
-      });
-    }
-  }
-}