@alaarab/ogrid-js 2.1.3 → 2.1.4

package/dist/esm/state/ClipboardState.js

@@ -1,111 +0,0 @@
-import { normalizeSelectionRange, formatSelectionAsTsv, parseTsvClipboard, applyPastedValues, applyCutClear } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-export class ClipboardState {
-    constructor(params, getActiveCell, getSelectionRange) {
-        this.emitter = new EventEmitter();
-        this._cutRange = null;
-        this._copyRange = null;
-        this.internalClipboard = null;
-        this.params = params;
-        this.getActiveCell = getActiveCell;
-        this.getSelectionRange = getSelectionRange;
-    }
-    updateParams(params) {
-        this.params = params;
-    }
-    get cutRange() {
-        return this._cutRange;
-    }
-    get copyRange() {
-        return this._copyRange;
-    }
-    getEffectiveRange() {
-        const sel = this.getSelectionRange();
-        const ac = this.getActiveCell();
-        return sel ?? (ac != null
-            ? { startRow: ac.rowIndex, startCol: ac.columnIndex - this.params.colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - this.params.colOffset }
-            : null);
-    }
-    handleCopy() {
-        const range = this.getEffectiveRange();
-        if (range == null)
-            return;
-        const norm = normalizeSelectionRange(range);
-        const { items, visibleCols } = this.params;
-        const tsv = formatSelectionAsTsv(items, visibleCols, norm);
-        this.internalClipboard = tsv;
-        this._copyRange = norm;
-        this._cutRange = null;
-        this.emitter.emit('rangesChange', { copyRange: this._copyRange, cutRange: null });
-        if (typeof navigator !== 'undefined' && navigator.clipboard) {
-            void navigator.clipboard.writeText(tsv).catch(() => { });
-        }
-    }
-    handleCut() {
-        if (this.params.editable === false)
-            return;
-        const range = this.getEffectiveRange();
-        if (range == null)
-            return;
-        const norm = normalizeSelectionRange(range);
-        this._cutRange = norm;
-        this._copyRange = null;
-        this.handleCopy();
-        // handleCopy sets copyRange — override it back since this is a cut
-        this._copyRange = null;
-        this._cutRange = norm;
-        this.emitter.emit('rangesChange', { copyRange: null, cutRange: this._cutRange });
-    }
-    async handlePaste() {
-        if (this.params.editable === false)
-            return;
-        const { onCellValueChanged } = this.params;
-        let text;
-        try {
-            if (typeof navigator !== 'undefined' && navigator.clipboard) {
-                text = await navigator.clipboard.readText();
-            }
-            else {
-                text = '';
-            }
-        }
-        catch {
-            text = '';
-        }
-        if (!text.trim() && this.internalClipboard != null) {
-            text = this.internalClipboard;
-        }
-        if (!text.trim())
-            return;
-        if (onCellValueChanged == null)
-            return;
-        const norm = this.getEffectiveRange();
-        const anchorRow = norm ? norm.startRow : 0;
-        const anchorCol = norm ? norm.startCol : 0;
-        const { items, visibleCols } = this.params;
-        const parsedRows = parseTsvClipboard(text);
-        const pasteEvents = applyPastedValues(parsedRows, anchorRow, anchorCol, items, visibleCols);
-        for (const evt of pasteEvents)
-            onCellValueChanged(evt);
-        if (this._cutRange) {
-            const cutEvents = applyCutClear(this._cutRange, items, visibleCols);
-            for (const evt of cutEvents)
-                onCellValueChanged(evt);
-            this._cutRange = null;
-        }
-        this._copyRange = null;
-        this.emitter.emit('rangesChange', { copyRange: null, cutRange: null });
-    }
-    clearClipboardRanges() {
-        this._copyRange = null;
-        this._cutRange = null;
-        this.emitter.emit('rangesChange', { copyRange: null, cutRange: null });
-    }
-    onRangesChange(handler) {
-        this.emitter.on('rangesChange', handler);
-        return () => this.emitter.off('rangesChange', handler);
-    }
-    destroy() {
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/ColumnPinningState.js

@@ -1,82 +0,0 @@
-import { ROW_NUMBER_COLUMN_WIDTH } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-/**
- * Manages column pinning state — tracks which columns are pinned left/right.
- * Computes sticky offsets for the renderer.
- */
-export class ColumnPinningState {
-    constructor(pinnedColumns, columns) {
-        this.emitter = new EventEmitter();
-        this._pinnedColumns = {};
-        // Initialize from explicit pinnedColumns prop
-        if (pinnedColumns) {
-            this._pinnedColumns = { ...pinnedColumns };
-        }
-        // Also pick up pinned from column definitions
-        if (columns) {
-            for (const col of columns) {
-                if (col.pinned && !(col.columnId in this._pinnedColumns)) {
-                    this._pinnedColumns[col.columnId] = col.pinned;
-                }
-            }
-        }
-    }
-    get pinnedColumns() {
-        return this._pinnedColumns;
-    }
-    pinColumn(columnId, side) {
-        this._pinnedColumns = { ...this._pinnedColumns, [columnId]: side };
-        this.emitter.emit('pinningChange', { pinnedColumns: this._pinnedColumns });
-    }
-    unpinColumn(columnId) {
-        const { [columnId]: _, ...next } = this._pinnedColumns;
-        this._pinnedColumns = next;
-        this.emitter.emit('pinningChange', { pinnedColumns: this._pinnedColumns });
-    }
-    isPinned(columnId) {
-        return this._pinnedColumns[columnId];
-    }
-    /**
-     * Compute sticky left offsets for left-pinned columns.
-     * Returns a map of columnId -> left offset in pixels.
-     */
-    computeLeftOffsets(visibleCols, columnWidths, defaultWidth, hasCheckboxColumn, checkboxColumnWidth, hasRowNumbersColumn) {
-        const offsets = {};
-        let left = 0;
-        if (hasCheckboxColumn)
-            left += checkboxColumnWidth;
-        if (hasRowNumbersColumn)
-            left += ROW_NUMBER_COLUMN_WIDTH;
-        for (const col of visibleCols) {
-            if (this._pinnedColumns[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 = {};
-        let right = 0;
-        // Walk right-pinned columns from the end
-        for (let i = visibleCols.length - 1; i >= 0; i--) {
-            const col = visibleCols[i];
-            if (this._pinnedColumns[col.columnId] === 'right') {
-                offsets[col.columnId] = right;
-                right += columnWidths[col.columnId] ?? defaultWidth;
-            }
-        }
-        return offsets;
-    }
-    onPinningChange(handler) {
-        this.emitter.on('pinningChange', handler);
-        return () => this.emitter.off('pinningChange', handler);
-    }
-    destroy() {
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/ColumnReorderState.js

@@ -1,135 +0,0 @@
-import { calculateDropTarget, reorderColumnArray, getPinStateForColumn } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-/**
- * Manages column drag-to-reorder for the vanilla JS grid.
- * Follows the EventEmitter + RAF pattern from FillHandleState/SelectionState.
- */
-export class ColumnReorderState {
-    constructor() {
-        this.emitter = new EventEmitter();
-        this._isDragging = false;
-        this._draggedColumnId = null;
-        this._dropIndicatorX = null;
-        this._dropTargetIndex = null;
-        this.rafId = 0;
-        this.columnOrder = [];
-        this.draggedPinState = 'unpinned';
-        this.tableElement = null;
-        this.onMoveBound = this.handleMouseMove.bind(this);
-        this.onUpBound = this.handleMouseUp.bind(this);
-    }
-    get isDragging() {
-        return this._isDragging;
-    }
-    get dropIndicatorX() {
-        return this._dropIndicatorX;
-    }
-    /**
-     * Begin a column drag operation.
-     * Called from mousedown on a header cell.
-     */
-    startDrag(columnId, event, columns, columnOrder, pinnedColumns, tableElement) {
-        event.preventDefault();
-        this._isDragging = true;
-        this._draggedColumnId = columnId;
-        this._dropIndicatorX = null;
-        this._dropTargetIndex = null;
-        this.tableElement = tableElement;
-        // Use provided column order, or derive from columns array
-        this.columnOrder = columnOrder.length > 0
-            ? [...columnOrder]
-            : columns.map(c => c.columnId);
-        // Convert Record<string, 'left' | 'right'> to { left?: string[]; right?: string[] }
-        if (pinnedColumns) {
-            const left = [];
-            const right = [];
-            for (const [id, side] of Object.entries(pinnedColumns)) {
-                if (side === 'left')
-                    left.push(id);
-                else if (side === 'right')
-                    right.push(id);
-            }
-            this.pinnedColumns = { left, right };
-        }
-        else {
-            this.pinnedColumns = undefined;
-        }
-        this.draggedPinState = getPinStateForColumn(columnId, this.pinnedColumns);
-        window.addEventListener('mousemove', this.onMoveBound, { capture: true, passive: true });
-        window.addEventListener('mouseup', this.onUpBound, { capture: true, passive: true });
-        this.emitter.emit('stateChange', { isDragging: true, dropIndicatorX: null });
-    }
-    handleMouseMove(event) {
-        if (!this._isDragging || !this._draggedColumnId || !this.tableElement)
-            return;
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        const mouseX = event.clientX;
-        this.rafId = requestAnimationFrame(() => {
-            this.rafId = 0;
-            if (!this._draggedColumnId || !this.tableElement)
-                return;
-            const result = calculateDropTarget({
-                mouseX,
-                columnOrder: this.columnOrder,
-                draggedColumnId: this._draggedColumnId,
-                draggedPinState: this.draggedPinState,
-                tableElement: this.tableElement,
-                pinnedColumns: this.pinnedColumns,
-            });
-            if (!result)
-                return;
-            const prevX = this._dropIndicatorX;
-            const prevIdx = this._dropTargetIndex;
-            this._dropTargetIndex = result.targetIndex;
-            this._dropIndicatorX = result.indicatorX;
-            // Only emit if something changed
-            if (prevX !== result.indicatorX || prevIdx !== result.targetIndex) {
-                this.emitter.emit('stateChange', {
-                    isDragging: true,
-                    dropIndicatorX: result.indicatorX,
-                });
-            }
-        });
-    }
-    handleMouseUp() {
-        window.removeEventListener('mousemove', this.onMoveBound, true);
-        window.removeEventListener('mouseup', this.onUpBound, true);
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = 0;
-        }
-        // Commit reorder if we have a valid drop target that isn't a no-op
-        if (this._isDragging &&
-            this._draggedColumnId &&
-            this._dropTargetIndex !== null &&
-            this._dropIndicatorX !== null // null indicatorX means no-op (same position)
-        ) {
-            const newOrder = reorderColumnArray(this.columnOrder, this._draggedColumnId, this._dropTargetIndex);
-            this.emitter.emit('reorder', { columnOrder: newOrder });
-        }
-        this._isDragging = false;
-        this._draggedColumnId = null;
-        this._dropIndicatorX = null;
-        this._dropTargetIndex = null;
-        this.tableElement = null;
-        this.emitter.emit('stateChange', { isDragging: false, dropIndicatorX: null });
-    }
-    onStateChange(handler) {
-        this.emitter.on('stateChange', handler);
-        return () => this.emitter.off('stateChange', handler);
-    }
-    onReorder(handler) {
-        this.emitter.on('reorder', handler);
-        return () => this.emitter.off('reorder', handler);
-    }
-    destroy() {
-        if (this._isDragging) {
-            window.removeEventListener('mousemove', this.onMoveBound, true);
-            window.removeEventListener('mouseup', this.onUpBound, true);
-        }
-        if (this.rafId)
-            cancelAnimationFrame(this.rafId);
-        this.emitter.removeAllListeners();
-    }
-}

package/dist/esm/state/ColumnResizeState.js

@@ -1,55 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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, ...args) {
-        const data = args[0];
-        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

@@ -1,206 +0,0 @@
-import { normalizeSelectionRange, applyFillValues } from '@alaarab/ogrid-core';
-import { EventEmitter } from './EventEmitter';
-import { getCellCoordinates } from '../utils/getCellCoordinates';
-/**
- * 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.cachedCells = 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;
-        // Cache querySelectorAll result once on drag start
-        this.cachedCells = this.wrapperRef ? this.wrapperRef.querySelectorAll('[data-row-index][data-col-index]') : null;
-        window.addEventListener('mousemove', this.onMoveBound, { capture: true, passive: true });
-        window.addEventListener('mouseup', this.onUpBound, { capture: true, passive: 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.applyFillValuesFromCore(norm, start);
-        this._isFillDragging = false;
-        this.fillDragStart = null;
-        this.liveFillRange = null;
-        this.lastMousePos = null;
-        this.emitter.emit('fillRangeChange', { fillRange: null });
-    }
-    applyFillValuesFromCore(norm, start) {
-        const { items, visibleCols, onCellValueChanged, beginBatch, endBatch } = this.params;
-        if (!onCellValueChanged)
-            return;
-        const fillEvents = applyFillValues(norm, start.startRow, start.startCol, items, visibleCols);
-        if (fillEvents.length > 0) {
-            beginBatch?.();
-            for (const evt of fillEvents)
-                onCellValueChanged(evt);
-            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 coords = getCellCoordinates(cell);
-        if (!coords || coords.colIndex < this.params.colOffset)
-            return null;
-        const r = coords.rowIndex;
-        const dataCol = coords.colIndex - this.params.colOffset;
-        return normalizeSelectionRange({
-            startRow: this.fillDragStart.startRow,
-            startCol: this.fillDragStart.startCol,
-            endRow: r,
-            endCol: dataCol,
-        });
-    }
-    applyDragAttrs(range) {
-        const cells = this.cachedCells;
-        if (!cells)
-            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);
-        for (let i = 0; i < cells.length; i++) {
-            const el = cells[i];
-            const coords = getCellCoordinates(el);
-            if (!coords)
-                continue;
-            const r = coords.rowIndex;
-            const c = coords.colIndex - 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 cells = this.cachedCells;
-        if (cells) {
-            for (let i = 0; i < cells.length; i++)
-                cells[i].removeAttribute('data-drag-range');
-        }
-        this.cachedCells = null;
-    }
-    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);
-            this.clearDragAttrs();
-            this._isFillDragging = false;
-            this.fillDragStart = null;
-            this.liveFillRange = null;
-            this.lastMousePos = null;
-        }
-        if (this.rafHandle) {
-            cancelAnimationFrame(this.rafHandle);
-            this.rafHandle = 0;
-        }
-        this.emitter.removeAllListeners();
-    }
-}