@alaarab/ogrid-angular 2.0.2 → 2.0.4

package/dist/esm/components/marching-ants-overlay.component.js

@@ -41,6 +41,7 @@ let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
         this.copyRange = input(null);
         this.cutRange = input(null);
         this.colOffset = input(0);
+        this.columnSizingVersion = input(0);
         this.selRect = signal(null);
         this.clipRect = signal(null);
         this.rafId = 0;
@@ -51,6 +52,7 @@ let MarchingAntsOverlayComponent = class MarchingAntsOverlayComponent {
             const selRange = this.selectionRange();
             const clipRange = this.copyRange() ?? this.cutRange();
             const colOff = this.colOffset();
+            const _version = this.columnSizingVersion(); // Track column resize changes
             if (this.resizeObserver) {
                 this.resizeObserver.disconnect();
                 this.resizeObserver = null;

package/dist/esm/index.js

@@ -4,6 +4,8 @@ export { toUserLike, isInSelectionRange, normalizeSelectionRange } from './types
 // Services
 export { OGridService } from './services/ogrid.service';
 export { DataGridStateService } from './services/datagrid-state.service';
+export { ColumnReorderService } from './services/column-reorder.service';
+export { VirtualScrollService } from './services/virtual-scroll.service';
 // Components
 export { OGridLayoutComponent } from './components/ogrid-layout.component';
 export { StatusBarComponent } from './components/status-bar.component';
@@ -11,3 +13,4 @@ export { GridContextMenuComponent } from './components/grid-context-menu.compone
 export { SideBarComponent } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
+export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/dist/esm/services/column-reorder.service.js

@@ -0,0 +1,180 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable, signal, DestroyRef, inject } from '@angular/core';
+import { reorderColumnArray } from '@alaarab/ogrid-core';
+/** Width of the resize handle zone on the right edge of each header cell. */
+const RESIZE_HANDLE_ZONE = 8;
+/**
+ * Manages column reorder drag interactions with RAF-throttled updates.
+ * Angular signals-based port of React's useColumnReorder hook.
+ */
+let ColumnReorderService = class ColumnReorderService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // --- Input signals (set by consuming component) ---
+        this.columns = signal([]);
+        this.columnOrder = signal(undefined);
+        this.onColumnOrderChange = signal(undefined);
+        this.enabled = signal(true);
+        this.wrapperEl = signal(null);
+        // --- Internal state ---
+        this.isDragging = signal(false);
+        this.dropIndicatorX = signal(null);
+        // Imperative drag tracking (not reactive)
+        this.rafId = 0;
+        this.cleanupFn = null;
+        // Refs for latest values (captured in closure)
+        this.latestDropTargetIndex = null;
+        this.destroyRef.onDestroy(() => {
+            if (this.cleanupFn) {
+                this.cleanupFn();
+                this.cleanupFn = null;
+            }
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = 0;
+            }
+        });
+    }
+    /**
+     * Call this from the header cell's mousedown handler.
+     * @param columnId - The column being dragged
+     * @param event - The native MouseEvent
+     */
+    handleHeaderMouseDown(columnId, event) {
+        if (!this.enabled())
+            return;
+        if (!this.onColumnOrderChange())
+            return;
+        // Gate on left-click only
+        if (event.button !== 0)
+            return;
+        // Skip if in resize handle zone (right 8px of the header cell)
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        if (event.clientX > rect.right - RESIZE_HANDLE_ZONE)
+            return;
+        // Skip column groups — only reorder leaf columns
+        const cols = this.columns();
+        const colIndex = cols.findIndex((c) => c.columnId === columnId);
+        if (colIndex === -1)
+            return;
+        event.preventDefault();
+        const startX = event.clientX;
+        let hasMoved = false;
+        this.latestDropTargetIndex = null;
+        // Lock text selection during drag
+        const prevUserSelect = document.body.style.userSelect;
+        document.body.style.userSelect = 'none';
+        const onMove = (moveEvent) => {
+            // Require a small minimum drag distance before activating
+            if (!hasMoved && Math.abs(moveEvent.clientX - startX) < 5)
+                return;
+            if (!hasMoved) {
+                hasMoved = true;
+                this.isDragging.set(true);
+            }
+            if (this.rafId)
+                cancelAnimationFrame(this.rafId);
+            this.rafId = requestAnimationFrame(() => {
+                this.rafId = 0;
+                const wrapper = this.wrapperEl();
+                if (!wrapper)
+                    return;
+                const headerCells = wrapper.querySelectorAll('th[data-column-id]');
+                const rects = [];
+                for (let i = 0; i < headerCells.length; i++) {
+                    const th = headerCells[i];
+                    const id = th.getAttribute('data-column-id');
+                    if (!id)
+                        continue;
+                    const thRect = th.getBoundingClientRect();
+                    rects.push({
+                        columnId: id,
+                        left: thRect.left,
+                        right: thRect.right,
+                        centerX: thRect.left + thRect.width / 2,
+                    });
+                }
+                const result = this.calculateDrop(columnId, moveEvent.clientX, rects);
+                this.latestDropTargetIndex = result.dropIndex;
+                this.dropIndicatorX.set(result.indicatorX);
+            });
+        };
+        const cleanup = () => {
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
+            this.cleanupFn = null;
+            // Restore user-select
+            document.body.style.userSelect = prevUserSelect;
+            // Cancel pending RAF
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = 0;
+            }
+        };
+        const onUp = () => {
+            cleanup();
+            if (hasMoved && this.latestDropTargetIndex != null) {
+                const currentOrder = this.columnOrder() ?? this.columns().map((c) => c.columnId);
+                const newOrder = reorderColumnArray(currentOrder, columnId, this.latestDropTargetIndex);
+                this.onColumnOrderChange()?.(newOrder);
+            }
+            this.isDragging.set(false);
+            this.dropIndicatorX.set(null);
+        };
+        window.addEventListener('mousemove', onMove, true);
+        window.addEventListener('mouseup', onUp, true);
+        this.cleanupFn = cleanup;
+    }
+    /**
+     * Calculate drop target from mouse position and header cell rects.
+     * Same logic as React's useColumnReorder inline calculation.
+     */
+    calculateDrop(draggedColumnId, mouseX, rects) {
+        if (rects.length === 0) {
+            return { dropIndex: null, indicatorX: null };
+        }
+        const order = this.columnOrder() ?? this.columns().map((c) => c.columnId);
+        const currentIndex = order.indexOf(draggedColumnId);
+        // Find which column the mouse is closest to
+        let bestIndex = 0;
+        let indicatorX = null;
+        if (mouseX <= rects[0].centerX) {
+            // Before the first column
+            bestIndex = 0;
+            indicatorX = rects[0].left;
+        }
+        else if (mouseX >= rects[rects.length - 1].centerX) {
+            // After the last column
+            bestIndex = rects.length;
+            indicatorX = rects[rects.length - 1].right;
+        }
+        else {
+            for (let i = 0; i < rects.length - 1; i++) {
+                if (mouseX >= rects[i].centerX && mouseX < rects[i + 1].centerX) {
+                    bestIndex = i + 1;
+                    indicatorX = rects[i].right;
+                    break;
+                }
+            }
+        }
+        // Map visual index back to order array index
+        const targetOrderIndex = bestIndex < rects.length
+            ? order.indexOf(rects[bestIndex]?.columnId ?? '')
+            : order.length;
+        // Check if this is a no-op (dropping at same position)
+        if (currentIndex === targetOrderIndex || currentIndex + 1 === targetOrderIndex) {
+            return { dropIndex: targetOrderIndex, indicatorX: null };
+        }
+        return { dropIndex: targetOrderIndex, indicatorX };
+    }
+};
+ColumnReorderService = __decorate([
+    Injectable()
+], ColumnReorderService);
+export { ColumnReorderService };

package/dist/esm/services/datagrid-state.service.js

@@ -51,8 +51,6 @@ let DataGridStateService = class DataGridStateService {
         this.rafId = 0;
         this.lastMousePos = null;
         this.autoScrollInterval = null;
-        // Window event listeners cleanup
-        this.windowCleanups = [];
         // ResizeObserver
         this.resizeObserver = null;
         // --- Derived computed ---
@@ -124,8 +122,10 @@ let DataGridStateService = class DataGridStateService {
         });
         this.visibleColumnCount = computed(() => this.visibleCols().length);
         this.hasCheckboxCol = computed(() => (this.props()?.rowSelection ?? 'none') === 'multiple');
-        this.totalColCount = computed(() => this.visibleColumnCount() + (this.hasCheckboxCol() ? 1 : 0));
-        this.colOffset = computed(() => this.hasCheckboxCol() ? 1 : 0);
+        this.hasRowNumbersCol = computed(() => !!this.props()?.showRowNumbers);
+        this.specialColsCount = computed(() => (this.hasCheckboxCol() ? 1 : 0) + (this.hasRowNumbersCol() ? 1 : 0));
+        this.totalColCount = computed(() => this.visibleColumnCount() + this.specialColsCount());
+        this.colOffset = computed(() => this.specialColsCount());
         this.rowIndexByRowId = computed(() => {
             const p = this.props();
             if (!p)
@@ -199,13 +199,16 @@ let DataGridStateService = class DataGridStateService {
             return p.items.length === 0 && !!p.emptyState && !p.isLoading;
         });
         // Setup window event listeners for cell selection drag
-        const onMove = (e) => this.onWindowMouseMove(e);
-        const onUp = () => this.onWindowMouseUp();
-        window.addEventListener('mousemove', onMove, true);
-        window.addEventListener('mouseup', onUp, true);
-        this.windowCleanups.push(() => {
-            window.removeEventListener('mousemove', onMove, true);
-            window.removeEventListener('mouseup', onUp, true);
+        // Using effect with cleanup return to ensure proper removal on destroy
+        effect((onCleanup) => {
+            const onMove = (e) => this.onWindowMouseMove(e);
+            const onUp = () => this.onWindowMouseUp();
+            window.addEventListener('mousemove', onMove, true);
+            window.addEventListener('mouseup', onUp, true);
+            onCleanup(() => {
+                window.removeEventListener('mousemove', onMove, true);
+                window.removeEventListener('mouseup', onUp, true);
+            });
         });
         // Initialize column sizing overrides from initial widths
         effect(() => {
@@ -240,7 +243,6 @@ let DataGridStateService = class DataGridStateService {
         });
         // Cleanup on destroy
         this.destroyRef.onDestroy(() => {
-            this.windowCleanups.forEach((fn) => fn());
             if (this.rafId)
                 cancelAnimationFrame(this.rafId);
             if (this.autoScrollInterval)
@@ -947,6 +949,7 @@ let DataGridStateService = class DataGridStateService {
             totalColCount: this.totalColCount(),
             colOffset: this.colOffset(),
             hasCheckboxCol: this.hasCheckboxCol(),
+            hasRowNumbersCol: this.hasRowNumbersCol(),
             rowIndexByRowId: this.rowIndexByRowId(),
             containerWidth: this.containerWidthSig(),
             minTableWidth: this.minTableWidth(),
@@ -1257,6 +1260,9 @@ let DataGridStateService = class DataGridStateService {
                 this.endBatch();
             }
             this.fillDragStart = null;
+            // Remove event listeners after mouseup completes
+            window.removeEventListener('mousemove', onMove, true);
+            window.removeEventListener('mouseup', onUp, true);
         };
         window.addEventListener('mousemove', onMove, true);
         window.addEventListener('mouseup', onUp, true);

package/dist/esm/services/ogrid.service.js

@@ -72,10 +72,10 @@ let OGridService = class OGridService {
         this.internalData = signal([]);
         this.internalLoading = signal(false);
         this.internalPage = signal(1);
-        this.internalPageSize = signal(DEFAULT_PAGE_SIZE);
-        this.internalSort = signal({ field: '', direction: 'asc' });
+        this.internalPageSizeOverride = signal(null);
+        this.internalSortOverride = signal(null);
         this.internalFilters = signal({});
-        this.internalVisibleColumns = signal(new Set());
+        this.internalVisibleColumnsOverride = signal(null);
         this.internalSelectedRows = signal(new Set());
         this.columnWidthOverrides = signal({});
         this.pinnedOverrides = signal({});
@@ -91,10 +91,6 @@ let OGridService = class OGridService {
         // Filter options state
         this.serverFilterOptions = signal({});
         this.loadingFilterOptions = signal({});
-        // --- Initialization ---
-        this.sortInitialized = false;
-        this.visibleColumnsInitialized = false;
-        this.pageSizeInitialized = false;
         // --- Derived computed signals ---
         this.columns = computed(() => flattenColumns(this.columnsProp()));
         this.isServerSide = computed(() => this.dataSource() != null);
@@ -103,10 +99,23 @@ let OGridService = class OGridService {
         this.displayLoading = computed(() => this.controlledLoading() ?? this.internalLoading());
         this.defaultSortField = computed(() => this.defaultSortBy() ?? this.columns()[0]?.columnId ?? '');
         this.page = computed(() => this.controlledPage() ?? this.internalPage());
-        this.pageSize = computed(() => this.controlledPageSize() ?? this.internalPageSize());
-        this.sort = computed(() => this.controlledSort() ?? this.internalSort());
+        this.pageSize = computed(() => this.controlledPageSize() ?? this.internalPageSizeOverride() ?? this.defaultPageSize());
+        this.sort = computed(() => this.controlledSort() ?? this.internalSortOverride() ?? {
+            field: this.defaultSortField(),
+            direction: this.defaultSortDirection(),
+        });
         this.filters = computed(() => this.controlledFilters() ?? this.internalFilters());
-        this.visibleColumns = computed(() => this.controlledVisibleColumns() ?? this.internalVisibleColumns());
+        this.visibleColumns = computed(() => {
+            if (this.controlledVisibleColumns())
+                return this.controlledVisibleColumns();
+            if (this.internalVisibleColumnsOverride())
+                return this.internalVisibleColumnsOverride();
+            const cols = this.columns();
+            if (cols.length === 0)
+                return new Set();
+            const visible = cols.filter((c) => c.defaultVisible !== false).map((c) => c.columnId);
+            return new Set(visible.length > 0 ? visible : cols.map((c) => c.columnId));
+        });
         this.effectiveSelectedRows = computed(() => this.selectedRows() ?? this.internalSelectedRows());
         this.columnChooserPlacement = computed(() => {
             const prop = this.columnChooserProp();
@@ -281,30 +290,6 @@ let OGridService = class OGridService {
                 filterOptions: this.clientFilterOptions(),
             };
         });
-        // Initialize internal default values based on config
-        effect(() => {
-            if (!this.sortInitialized) {
-                this.sortInitialized = true;
-                this.internalSort.set({
-                    field: this.defaultSortField(),
-                    direction: this.defaultSortDirection(),
-                });
-            }
-        });
-        effect(() => {
-            if (!this.pageSizeInitialized) {
-                this.pageSizeInitialized = true;
-                this.internalPageSize.set(this.defaultPageSize());
-            }
-        });
-        effect(() => {
-            if (!this.visibleColumnsInitialized && this.columns().length > 0) {
-                this.visibleColumnsInitialized = true;
-                const cols = this.columns();
-                const visible = cols.filter((c) => c.defaultVisible !== false).map((c) => c.columnId);
-                this.internalVisibleColumns.set(new Set(visible.length > 0 ? visible : cols.map((c) => c.columnId)));
-            }
-        });
         // Server-side data fetching effect
         effect(() => {
             const ds = this.dataSource();
@@ -391,13 +376,13 @@ let OGridService = class OGridService {
     }
     setPageSize(size) {
         if (this.controlledPageSize() === undefined)
-            this.internalPageSize.set(size);
+            this.internalPageSizeOverride.set(size);
         this.onPageSizeChange()?.(size);
         this.setPage(1);
     }
     setSort(s) {
         if (this.controlledSort() === undefined)
-            this.internalSort.set(s);
+            this.internalSortOverride.set(s);
         this.onSortChange()?.(s);
         this.setPage(1);
     }
@@ -409,7 +394,7 @@ let OGridService = class OGridService {
     }
     setVisibleColumns(cols) {
         if (this.controlledVisibleColumns() === undefined)
-            this.internalVisibleColumns.set(cols);
+            this.internalVisibleColumnsOverride.set(cols);
         this.onVisibleColumnsChange()?.(cols);
     }
     handleSort(columnKey) {
@@ -544,6 +529,64 @@ let OGridService = class OGridService {
             this.ariaLabelledBy.set(props['aria-labelledby']);
     }
     // --- API ---
+    // --- Column Pinning Methods ---
+    /**
+     * Pin a column to the left or right edge.
+     */
+    pinColumn(columnId, side) {
+        this.pinnedOverrides.update((prev) => ({ ...prev, [columnId]: side }));
+        this.onColumnPinned()?.(columnId, side);
+    }
+    /**
+     * Unpin a column (remove sticky positioning).
+     */
+    unpinColumn(columnId) {
+        this.pinnedOverrides.update((prev) => {
+            const next = { ...prev };
+            delete next[columnId];
+            return next;
+        });
+        this.onColumnPinned()?.(columnId, null);
+    }
+    /**
+     * Check if a column is pinned and which side.
+     */
+    isPinned(columnId) {
+        return this.pinnedOverrides()[columnId];
+    }
+    /**
+     * Compute sticky left offsets for left-pinned columns.
+     * Returns a map of columnId -> left offset in pixels.
+     */
+    computeLeftOffsets(visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth) {
+        const offsets = {};
+        const pinned = this.pinnedOverrides();
+        let left = hasCheckboxColumn ? checkboxColumnWidth : 0;
+        for (const col of visibleCols) {
+            if (pinned[col.columnId] === 'left') {
+                offsets[col.columnId] = left;
+                left += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }
+    /**
+     * Compute sticky right offsets for right-pinned columns.
+     * Returns a map of columnId -> right offset in pixels.
+     */
+    computeRightOffsets(visibleCols, columnWidths, defaultWidth) {
+        const offsets = {};
+        const pinned = this.pinnedOverrides();
+        let right = 0;
+        for (let i = visibleCols.length - 1; i >= 0; i--) {
+            const col = visibleCols[i];
+            if (pinned[col.columnId] === 'right') {
+                offsets[col.columnId] = right;
+                right += columnWidths[col.columnId] ?? defaultWidth;
+            }
+        }
+        return offsets;
+    }
     getApi() {
         return {
             setRowData: (d) => {
@@ -610,6 +653,14 @@ let OGridService = class OGridService {
                     this.refreshCounter.update((c) => c + 1);
                 }
             },
+            getColumnOrder: () => this.columnOrder() ?? this.columns().map((c) => c.columnId),
+            setColumnOrder: (order) => {
+                this.onColumnOrderChange()?.(order);
+            },
+            scrollToRow: (_index, _options) => {
+                // Scrolling is handled by VirtualScrollService at the UI layer.
+                // The UI component should wire this to VirtualScrollService.scrollToRow().
+            },
         };
     }
 };

package/dist/esm/services/virtual-scroll.service.js

@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable, signal, computed, DestroyRef, inject } from '@angular/core';
+import { computeVisibleRange, computeTotalHeight, getScrollTopForRow, } from '@alaarab/ogrid-core';
+/** Threshold below which virtual scrolling is a no-op (all rows rendered). */
+const PASSTHROUGH_THRESHOLD = 100;
+/**
+ * Manages virtual scrolling state using Angular signals.
+ * Port of React's useVirtualScroll hook.
+ *
+ * Uses core's pure-TS `computeVisibleRange` and `getScrollTopForRow` utilities.
+ * The UI layer (Angular Material / PrimeNG) provides the scrollable container
+ * and calls `onScroll()` / sets `containerHeight`.
+ */
+let VirtualScrollService = class VirtualScrollService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // --- Input signals (set by consuming component) ---
+        this.totalRows = signal(0);
+        this.config = signal({ rowHeight: 36 });
+        this.containerHeight = signal(0);
+        // --- Internal state ---
+        this.scrollTop = signal(0);
+        // Scrollable container reference for programmatic scrolling
+        this.containerEl = null;
+        // --- Derived computed signals ---
+        this.rowHeight = computed(() => this.config().rowHeight);
+        this.overscan = computed(() => this.config().overscan ?? 5);
+        this.enabled = computed(() => this.config().enabled !== false);
+        /** Whether virtual scrolling is actually active (enabled + enough rows). */
+        this.isActive = computed(() => this.enabled() && this.totalRows() >= PASSTHROUGH_THRESHOLD);
+        /** The visible range of rows with spacer offsets. */
+        this.visibleRange = computed(() => {
+            if (!this.isActive()) {
+                // Passthrough: render all rows
+                return {
+                    startIndex: 0,
+                    endIndex: Math.max(0, this.totalRows() - 1),
+                    offsetTop: 0,
+                    offsetBottom: 0,
+                };
+            }
+            return computeVisibleRange(this.scrollTop(), this.rowHeight(), this.containerHeight(), this.totalRows(), this.overscan());
+        });
+        /** Total scrollable height in pixels. */
+        this.totalHeight = computed(() => computeTotalHeight(this.totalRows(), this.rowHeight()));
+        this.destroyRef.onDestroy(() => {
+            this.containerEl = null;
+        });
+    }
+    /**
+     * Set the scrollable container element.
+     * Used for programmatic scrolling (scrollToRow).
+     */
+    setContainer(el) {
+        this.containerEl = el;
+    }
+    /**
+     * Call this from the container's scroll event handler.
+     */
+    onScroll(event) {
+        const target = event.target;
+        this.scrollTop.set(target.scrollTop);
+    }
+    /**
+     * Scroll to a specific row index.
+     * @param index - The row index to scroll to.
+     * @param align - Where to position the row: 'start' (top), 'center', or 'end' (bottom). Default: 'start'.
+     */
+    scrollToRow(index, align = 'start') {
+        const container = this.containerEl;
+        if (!container)
+            return;
+        const targetScrollTop = getScrollTopForRow(index, this.rowHeight(), this.containerHeight(), align);
+        container.scrollTo({ top: targetScrollTop, behavior: 'auto' });
+    }
+    /**
+     * Update the virtual scroll configuration.
+     */
+    updateConfig(updates) {
+        this.config.update((prev) => ({ ...prev, ...updates }));
+    }
+};
+VirtualScrollService = __decorate([
+    Injectable()
+], VirtualScrollService);
+export { VirtualScrollService };