@alaarab/ogrid-js 2.0.0-beta

package/dist/esm/state/ColumnResizeState.js

@@ -0,0 +1,55 @@
+import { DEFAULT_MIN_COLUMN_WIDTH } from '@alaarab/ogrid-core';
+import { EventEmitter } from './EventEmitter';
+export class ColumnResizeState {
+    constructor() {
+        this.emitter = new EventEmitter();
+        this.columnWidths = new Map();
+        this.isResizing = false;
+        this.resizeColumnId = null;
+        this.resizeStartX = 0;
+        this.resizeStartWidth = 0;
+    }
+    get resizingColumnId() {
+        return this.resizeColumnId;
+    }
+    getColumnWidth(columnId) {
+        return this.columnWidths.get(columnId);
+    }
+    getAllColumnWidths() {
+        const result = {};
+        this.columnWidths.forEach((width, id) => {
+            result[id] = width;
+        });
+        return result;
+    }
+    startResize(columnId, clientX, currentWidth) {
+        this.isResizing = true;
+        this.resizeColumnId = columnId;
+        this.resizeStartX = clientX;
+        this.resizeStartWidth = currentWidth;
+    }
+    updateResize(clientX) {
+        if (!this.isResizing || !this.resizeColumnId)
+            return null;
+        const delta = clientX - this.resizeStartX;
+        const newWidth = Math.max(DEFAULT_MIN_COLUMN_WIDTH, this.resizeStartWidth + delta);
+        return newWidth;
+    }
+    endResize(clientX) {
+        if (!this.isResizing || !this.resizeColumnId)
+            return;
+        const delta = clientX - this.resizeStartX;
+        const newWidth = Math.max(DEFAULT_MIN_COLUMN_WIDTH, this.resizeStartWidth + delta);
+        this.columnWidths.set(this.resizeColumnId, newWidth);
+        this.emitter.emit('columnWidthChange', { columnId: this.resizeColumnId, widthPx: newWidth });
+        this.isResizing = false;
+        this.resizeColumnId = null;
+    }
+    onColumnWidthChange(handler) {
+        this.emitter.on('columnWidthChange', handler);
+        return () => this.emitter.off('columnWidthChange', handler);
+    }
+    destroy() {
+        this.emitter.removeAllListeners();
+    }
+}

package/dist/esm/state/EventEmitter.js

@@ -0,0 +1,27 @@
+export class EventEmitter {
+    constructor() {
+        this.handlers = new Map();
+    }
+    on(event, handler) {
+        if (!this.handlers.has(event)) {
+            this.handlers.set(event, new Set());
+        }
+        this.handlers.get(event).add(handler);
+    }
+    off(event, handler) {
+        this.handlers.get(event)?.delete(handler);
+    }
+    emit(event, data) {
+        this.handlers.get(event)?.forEach(handler => {
+            handler(data);
+        });
+    }
+    removeAllListeners(event) {
+        if (event) {
+            this.handlers.delete(event);
+        }
+        else {
+            this.handlers.clear();
+        }
+    }
+}

package/dist/esm/state/FillHandleState.js

@@ -0,0 +1,218 @@
+import { normalizeSelectionRange, getCellValue, parseValue } from '@alaarab/ogrid-core';
+import { EventEmitter } from './EventEmitter';
+/**
+ * Manages Excel-style fill handle drag-to-fill for cell ranges (vanilla JS).
+ * Mirrors the React `useFillHandle` hook as a class-based state.
+ */
+export class FillHandleState {
+    constructor(params, getSelectionRange, setSelectionRange, setActiveCell) {
+        this.emitter = new EventEmitter();
+        this.wrapperRef = null;
+        this._isFillDragging = false;
+        this.fillDragStart = null;
+        this.fillDragEnd = { endRow: 0, endCol: 0 };
+        this.rafHandle = 0;
+        this.liveFillRange = null;
+        this.lastMousePos = null;
+        this.params = params;
+        this.getSelectionRange = getSelectionRange;
+        this.setSelectionRange = setSelectionRange;
+        this.setActiveCell = setActiveCell;
+        this.onMoveBound = this.onMouseMove.bind(this);
+        this.onUpBound = this.onMouseUp.bind(this);
+    }
+    get isFillDragging() {
+        return this._isFillDragging;
+    }
+    get fillRange() {
+        return this.liveFillRange;
+    }
+    setWrapperRef(ref) {
+        this.wrapperRef = ref;
+    }
+    updateParams(params) {
+        this.params = params;
+    }
+    /** Called when the fill handle square is mousedown'd. */
+    startFillDrag(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const range = this.getSelectionRange();
+        if (!range)
+            return;
+        if (this.params.editable === false || !this.params.onCellValueChanged)
+            return;
+        this._isFillDragging = true;
+        this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
+        this.fillDragEnd = { endRow: range.startRow, endCol: range.startCol };
+        this.liveFillRange = null;
+        window.addEventListener('mousemove', this.onMoveBound, true);
+        window.addEventListener('mouseup', this.onUpBound, true);
+    }
+    onMouseMove(e) {
+        if (!this._isFillDragging || !this.fillDragStart)
+            return;
+        this.lastMousePos = { cx: e.clientX, cy: e.clientY };
+        if (this.rafHandle)
+            cancelAnimationFrame(this.rafHandle);
+        this.rafHandle = requestAnimationFrame(() => {
+            this.rafHandle = 0;
+            if (!this.lastMousePos)
+                return;
+            const newRange = this.resolveRange(this.lastMousePos.cx, this.lastMousePos.cy);
+            if (!newRange)
+                return;
+            // Skip if unchanged
+            const prev = this.liveFillRange;
+            if (prev &&
+                prev.startRow === newRange.startRow &&
+                prev.startCol === newRange.startCol &&
+                prev.endRow === newRange.endRow &&
+                prev.endCol === newRange.endCol) {
+                return;
+            }
+            this.liveFillRange = newRange;
+            this.fillDragEnd = { endRow: newRange.endRow, endCol: newRange.endCol };
+            this.applyDragAttrs(newRange);
+        });
+    }
+    onMouseUp() {
+        if (!this._isFillDragging || !this.fillDragStart)
+            return;
+        window.removeEventListener('mousemove', this.onMoveBound, true);
+        window.removeEventListener('mouseup', this.onUpBound, true);
+        if (this.rafHandle) {
+            cancelAnimationFrame(this.rafHandle);
+            this.rafHandle = 0;
+        }
+        // Flush: resolve final position
+        if (this.lastMousePos) {
+            const flushed = this.resolveRange(this.lastMousePos.cx, this.lastMousePos.cy);
+            if (flushed) {
+                this.liveFillRange = flushed;
+                this.fillDragEnd = { endRow: flushed.endRow, endCol: flushed.endCol };
+            }
+        }
+        this.clearDragAttrs();
+        const start = this.fillDragStart;
+        const end = this.fillDragEnd;
+        const norm = normalizeSelectionRange({
+            startRow: start.startRow,
+            startCol: start.startCol,
+            endRow: end.endRow,
+            endCol: end.endCol,
+        });
+        // Commit range
+        this.setSelectionRange(norm);
+        this.setActiveCell({ rowIndex: end.endRow, columnIndex: end.endCol + this.params.colOffset });
+        // Apply fill values
+        this.applyFillValues(norm, start);
+        this._isFillDragging = false;
+        this.fillDragStart = null;
+        this.liveFillRange = null;
+        this.lastMousePos = null;
+        this.emitter.emit('fillRangeChange', { fillRange: null });
+    }
+    applyFillValues(norm, start) {
+        const { items, visibleCols, onCellValueChanged, beginBatch, endBatch } = this.params;
+        if (!onCellValueChanged)
+            return;
+        const startItem = items[norm.startRow];
+        const startColDef = visibleCols[norm.startCol];
+        if (!startItem || !startColDef)
+            return;
+        const startValue = getCellValue(startItem, startColDef);
+        beginBatch?.();
+        for (let row = norm.startRow; row <= norm.endRow; row++) {
+            for (let col = norm.startCol; col <= norm.endCol; col++) {
+                if (row === start.startRow && col === start.startCol)
+                    continue;
+                if (row >= items.length || col >= visibleCols.length)
+                    continue;
+                const item = items[row];
+                const colDef = visibleCols[col];
+                const colEditable = colDef.editable === true ||
+                    (typeof colDef.editable === 'function' && colDef.editable(item));
+                if (!colEditable)
+                    continue;
+                const oldValue = getCellValue(item, colDef);
+                const result = parseValue(startValue, oldValue, item, colDef);
+                if (!result.valid)
+                    continue;
+                onCellValueChanged({
+                    item,
+                    columnId: colDef.columnId,
+                    oldValue,
+                    newValue: result.value,
+                    rowIndex: row,
+                });
+            }
+        }
+        endBatch?.();
+    }
+    resolveRange(cx, cy) {
+        if (!this.fillDragStart || !this.wrapperRef)
+            return null;
+        const target = document.elementFromPoint(cx, cy);
+        const cell = target?.closest?.('[data-row-index][data-col-index]');
+        if (!cell || !this.wrapperRef.contains(cell))
+            return null;
+        const r = parseInt(cell.getAttribute('data-row-index') ?? '', 10);
+        const c = parseInt(cell.getAttribute('data-col-index') ?? '', 10);
+        if (Number.isNaN(r) || Number.isNaN(c) || c < this.params.colOffset)
+            return null;
+        const dataCol = c - this.params.colOffset;
+        return normalizeSelectionRange({
+            startRow: this.fillDragStart.startRow,
+            startCol: this.fillDragStart.startCol,
+            endRow: r,
+            endCol: dataCol,
+        });
+    }
+    applyDragAttrs(range) {
+        const wrapper = this.wrapperRef;
+        if (!wrapper)
+            return;
+        const colOff = this.params.colOffset;
+        const minR = Math.min(range.startRow, range.endRow);
+        const maxR = Math.max(range.startRow, range.endRow);
+        const minC = Math.min(range.startCol, range.endCol);
+        const maxC = Math.max(range.startCol, range.endCol);
+        const cells = wrapper.querySelectorAll('[data-row-index][data-col-index]');
+        for (let i = 0; i < cells.length; i++) {
+            const el = cells[i];
+            const r = parseInt(el.getAttribute('data-row-index'), 10);
+            const c = parseInt(el.getAttribute('data-col-index'), 10) - colOff;
+            const inRange = r >= minR && r <= maxR && c >= minC && c <= maxC;
+            if (inRange) {
+                if (!el.hasAttribute('data-drag-range'))
+                    el.setAttribute('data-drag-range', '');
+            }
+            else {
+                if (el.hasAttribute('data-drag-range'))
+                    el.removeAttribute('data-drag-range');
+            }
+        }
+    }
+    clearDragAttrs() {
+        const wrapper = this.wrapperRef;
+        if (!wrapper)
+            return;
+        const marked = wrapper.querySelectorAll('[data-drag-range]');
+        for (let i = 0; i < marked.length; i++)
+            marked[i].removeAttribute('data-drag-range');
+    }
+    onFillRangeChange(handler) {
+        this.emitter.on('fillRangeChange', handler);
+        return () => this.emitter.off('fillRangeChange', handler);
+    }
+    destroy() {
+        if (this._isFillDragging) {
+            window.removeEventListener('mousemove', this.onMoveBound, true);
+            window.removeEventListener('mouseup', this.onUpBound, true);
+        }
+        if (this.rafHandle)
+            cancelAnimationFrame(this.rafHandle);
+        this.emitter.removeAllListeners();
+    }
+}

package/dist/esm/state/GridState.js

@@ -0,0 +1,261 @@
+import { flattenColumns, processClientSideData, exportToCsv as coreExportToCsv, getCellValue, deriveFilterOptionsFromData, mergeFilter, } from '@alaarab/ogrid-core';
+import { EventEmitter } from './EventEmitter';
+export class GridState {
+    constructor(options) {
+        this.emitter = new EventEmitter();
+        this._data = [];
+        this._filters = {};
+        this._isLoading = false;
+        this._serverItems = [];
+        this._serverTotalCount = 0;
+        this._fetchId = 0; // Guards against stale fetch responses
+        this._firstDataRendered = false;
+        // Filter options for client-side data (used by sidebar filters panel & header filter popovers)
+        this._filterOptions = {};
+        this._allColumns = options.columns;
+        this._columns = flattenColumns(options.columns);
+        this._getRowId = options.getRowId;
+        this._data = options.data ?? [];
+        this._dataSource = options.dataSource;
+        this._page = options.page ?? 1;
+        this._pageSize = options.pageSize ?? 20;
+        this._sort = options.sort;
+        this._filters = options.filters ?? {};
+        this._visibleColumns = options.visibleColumns ?? new Set(this._columns.map(c => c.columnId));
+        this._onError = options.onError;
+        this._onFirstDataRendered = options.onFirstDataRendered;
+        // Derive initial filter options for client-side data
+        if (!this._dataSource) {
+            this._filterOptions = deriveFilterOptionsFromData(this._data, this._columns);
+        }
+        // If server-side, trigger initial fetch
+        if (this._dataSource) {
+            this._isLoading = true;
+            this.fetchServerData();
+        }
+    }
+    // --- Getters ---
+    get data() { return this._data; }
+    get page() { return this._page; }
+    get pageSize() { return this._pageSize; }
+    get sort() { return this._sort; }
+    get filters() { return this._filters; }
+    get visibleColumns() { return this._visibleColumns; }
+    get isLoading() { return this._isLoading; }
+    get columns() { return this._columns; }
+    get allColumns() { return this._allColumns; }
+    get getRowId() { return this._getRowId; }
+    get isServerSide() { return this._dataSource != null; }
+    get filterOptions() { return this._filterOptions; }
+    /** Get the visible columns in display order. */
+    get visibleColumnDefs() {
+        return this._columns.filter(c => this._visibleColumns.has(c.columnId));
+    }
+    /** Get processed (sorted, filtered, paginated) items for current page. */
+    getProcessedItems() {
+        if (this.isServerSide) {
+            return { items: this._serverItems, totalCount: this._serverTotalCount };
+        }
+        const filtered = processClientSideData(this._data, this._columns, this._filters, this._sort?.field, this._sort?.direction);
+        const totalCount = filtered.length;
+        const startIdx = (this._page - 1) * this._pageSize;
+        const endIdx = startIdx + this._pageSize;
+        const items = filtered.slice(startIdx, endIdx);
+        return { items, totalCount };
+    }
+    // --- Server-side fetch ---
+    fetchServerData() {
+        if (!this._dataSource)
+            return;
+        const id = ++this._fetchId;
+        this._isLoading = true;
+        this.emitter.emit('stateChange', { type: 'loading' });
+        this._dataSource
+            .fetchPage({
+            page: this._page,
+            pageSize: this._pageSize,
+            sort: this._sort ? { field: this._sort.field, direction: this._sort.direction } : undefined,
+            filters: this._filters,
+        })
+            .then((res) => {
+            if (id !== this._fetchId)
+                return; // Stale response
+            this._serverItems = res.items;
+            this._serverTotalCount = res.totalCount;
+            this._isLoading = false;
+            if (!this._firstDataRendered && res.items.length > 0) {
+                this._firstDataRendered = true;
+                this._onFirstDataRendered?.();
+            }
+            this.emitter.emit('stateChange', { type: 'data' });
+        })
+            .catch((err) => {
+            if (id !== this._fetchId)
+                return;
+            this._onError?.(err);
+            this._serverItems = [];
+            this._serverTotalCount = 0;
+            this._isLoading = false;
+            this.emitter.emit('stateChange', { type: 'data' });
+        });
+    }
+    // --- Setters ---
+    setData(data) {
+        this._data = data;
+        if (!this.isServerSide) {
+            this._filterOptions = deriveFilterOptionsFromData(data, this._columns);
+        }
+        this.emitter.emit('stateChange', { type: 'data' });
+    }
+    setPage(page) {
+        this._page = page;
+        if (this.isServerSide) {
+            this.fetchServerData();
+        }
+        else {
+            this.emitter.emit('stateChange', { type: 'page' });
+        }
+    }
+    setPageSize(pageSize) {
+        this._pageSize = pageSize;
+        this._page = 1;
+        if (this.isServerSide) {
+            this.fetchServerData();
+        }
+        else {
+            this.emitter.emit('stateChange', { type: 'page' });
+        }
+    }
+    setSort(sort) {
+        this._sort = sort;
+        this._page = 1;
+        if (this.isServerSide) {
+            this.fetchServerData();
+        }
+        else {
+            this.emitter.emit('stateChange', { type: 'sort' });
+        }
+    }
+    toggleSort(field) {
+        if (this._sort?.field === field) {
+            this._sort = this._sort.direction === 'asc'
+                ? { field, direction: 'desc' }
+                : undefined;
+        }
+        else {
+            this._sort = { field, direction: 'asc' };
+        }
+        this._page = 1;
+        if (this.isServerSide) {
+            this.fetchServerData();
+        }
+        else {
+            this.emitter.emit('stateChange', { type: 'sort' });
+        }
+    }
+    setFilter(key, value) {
+        this._filters = mergeFilter(this._filters, key, value);
+        this._page = 1;
+        if (this.isServerSide) {
+            this.fetchServerData();
+        }
+        else {
+            this.emitter.emit('stateChange', { type: 'filter' });
+        }
+    }
+    clearFilters() {
+        this._filters = {};
+        this._page = 1;
+        if (this.isServerSide) {
+            this.fetchServerData();
+        }
+        else {
+            this.emitter.emit('stateChange', { type: 'filter' });
+        }
+    }
+    setVisibleColumns(columns) {
+        this._visibleColumns = columns;
+        this.emitter.emit('stateChange', { type: 'columns' });
+    }
+    setLoading(loading) {
+        this._isLoading = loading;
+        this.emitter.emit('stateChange', { type: 'loading' });
+    }
+    refreshData() {
+        if (this.isServerSide) {
+            this.fetchServerData();
+        }
+    }
+    // --- Event subscription ---
+    onStateChange(handler) {
+        this.emitter.on('stateChange', handler);
+        return () => this.emitter.off('stateChange', handler);
+    }
+    // --- API ---
+    getApi() {
+        return {
+            setRowData: (data) => {
+                if (!this.isServerSide)
+                    this.setData(data);
+            },
+            setLoading: (loading) => this.setLoading(loading),
+            getColumnState: () => ({
+                visibleColumns: Array.from(this._visibleColumns),
+                sort: this._sort,
+                filters: Object.keys(this._filters).length > 0 ? this._filters : undefined,
+            }),
+            applyColumnState: (state) => {
+                if (state.visibleColumns)
+                    this._visibleColumns = new Set(state.visibleColumns);
+                if (state.sort !== undefined)
+                    this._sort = state.sort;
+                if (state.filters !== undefined)
+                    this._filters = state.filters ?? {};
+                if (this.isServerSide) {
+                    this.fetchServerData();
+                }
+                else {
+                    this.emitter.emit('stateChange', { type: 'columns' });
+                }
+            },
+            setFilterModel: (filters) => {
+                this._filters = filters;
+                this._page = 1;
+                if (this.isServerSide) {
+                    this.fetchServerData();
+                }
+                else {
+                    this.emitter.emit('stateChange', { type: 'filter' });
+                }
+            },
+            getSelectedRows: () => [],
+            setSelectedRows: () => { },
+            selectAll: () => { },
+            deselectAll: () => { },
+            clearFilters: () => this.clearFilters(),
+            clearSort: () => this.setSort(undefined),
+            resetGridState: () => {
+                this.clearFilters();
+                this.setSort(undefined);
+            },
+            getDisplayedRows: () => this.getProcessedItems().items,
+            refreshData: () => this.refreshData(),
+            exportToCsv: (filename) => {
+                const { items } = this.getProcessedItems();
+                const cols = this.visibleColumnDefs.map(c => ({ columnId: c.columnId, name: c.name }));
+                coreExportToCsv(items, cols, (item, colId) => {
+                    const col = this._columns.find(c => c.columnId === colId);
+                    if (!col)
+                        return '';
+                    const val = getCellValue(item, col);
+                    if (col.valueFormatter)
+                        return col.valueFormatter(val, item);
+                    return val != null ? String(val) : '';
+                }, filename);
+            },
+        };
+    }
+    destroy() {
+        this.emitter.removeAllListeners();
+    }
+}