@alaarab/ogrid-angular 2.6.0 → 2.6.1

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

@@ -0,0 +1,744 @@
+import { signal, computed } from '@angular/core';
+import { getCellValue, normalizeSelectionRange, parseValue, UndoRedoStack, findCtrlArrowTarget, computeTabNavigation, formatSelectionAsTsv, parseTsvClipboard, rangesEqual, applyFillValues, applyCellDeletion, getScrollTopForRow, } from '@alaarab/ogrid-core';
+/**
+ * Manages cell selection, keyboard navigation, clipboard, fill handle, and undo/redo.
+ * Extracted from DataGridStateService for modularity.
+ *
+ * Not @Injectable  -  instantiated and owned by DataGridStateService.
+ */
+export class DataGridInteractionHelper {
+    constructor() {
+        // --- Signals ---
+        this.activeCellSig = signal(null, ...(ngDevMode ? [{ debugName: "activeCellSig" }] : []));
+        this.selectionRangeSig = signal(null, ...(ngDevMode ? [{ debugName: "selectionRangeSig" }] : []));
+        this.isDraggingSig = signal(false, ...(ngDevMode ? [{ debugName: "isDraggingSig" }] : []));
+        this.contextMenuPositionSig = signal(null, ...(ngDevMode ? [{ debugName: "contextMenuPositionSig" }] : []));
+        this.cutRangeSig = signal(null, ...(ngDevMode ? [{ debugName: "cutRangeSig" }] : []));
+        this.copyRangeSig = signal(null, ...(ngDevMode ? [{ debugName: "copyRangeSig" }] : []));
+        this.internalClipboard = null;
+        this.preferInternalClipboard = false;
+        // Undo/redo
+        this.undoRedoStack = new UndoRedoStack(100);
+        this.undoLengthSig = signal(0, ...(ngDevMode ? [{ debugName: "undoLengthSig" }] : []));
+        this.redoLengthSig = signal(0, ...(ngDevMode ? [{ debugName: "redoLengthSig" }] : []));
+        this.canUndo = computed(() => this.undoLengthSig() > 0, ...(ngDevMode ? [{ debugName: "canUndo" }] : []));
+        this.canRedo = computed(() => this.redoLengthSig() > 0, ...(ngDevMode ? [{ debugName: "canRedo" }] : []));
+        this.hasCellSelection = computed(() => this.selectionRangeSig() != null || this.activeCellSig() != null, ...(ngDevMode ? [{ debugName: "hasCellSelection" }] : []));
+        // Fill handle state
+        this.fillDragStart = null;
+        this.fillRafId = 0;
+        this.fillMoveHandler = null;
+        this.fillUpHandler = null;
+        // Drag selection refs
+        this.dragStartPos = null;
+        this.dragMoved = false;
+        this.isDraggingRef = false;
+        this.liveDragRange = null;
+        this.rafId = 0;
+        this.lastMousePos = null;
+        this.autoScrollInterval = null;
+    }
+    setActiveCell(cell) {
+        const prev = this.activeCellSig();
+        if (prev === cell)
+            return;
+        if (prev && cell && prev.rowIndex === cell.rowIndex && prev.columnIndex === cell.columnIndex)
+            return;
+        this.activeCellSig.set(cell);
+    }
+    setSelectionRange(range) {
+        const prev = this.selectionRangeSig();
+        if (rangesEqual(prev, range))
+            return;
+        this.selectionRangeSig.set(range);
+    }
+    // --- Context menu ---
+    setContextMenuPosition(pos) {
+        this.contextMenuPositionSig.set(pos);
+    }
+    handleCellContextMenu(e) {
+        e.preventDefault?.();
+        this.contextMenuPositionSig.set({ x: e.clientX, y: e.clientY });
+    }
+    closeContextMenu() {
+        this.contextMenuPositionSig.set(null);
+    }
+    // --- Clipboard ---
+    handleCopy(items, visibleCols, colOffset) {
+        const range = this.getEffectiveRange(colOffset);
+        if (range == null)
+            return;
+        const norm = normalizeSelectionRange(range);
+        const tsv = formatSelectionAsTsv(items, visibleCols, norm);
+        this.internalClipboard = tsv;
+        this.preferInternalClipboard = true;
+        this.copyRangeSig.set(norm);
+        void navigator.clipboard.writeText(tsv)
+            .then(() => {
+            this.preferInternalClipboard = false;
+        })
+            .catch(() => {
+            this.preferInternalClipboard = true;
+        });
+    }
+    handleCut(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged) {
+        if (editable === false)
+            return;
+        const range = this.getEffectiveRange(colOffset);
+        if (range == null || !wrappedOnCellValueChanged)
+            return;
+        const norm = normalizeSelectionRange(range);
+        this.cutRangeSig.set(norm);
+        this.copyRangeSig.set(null);
+        this.handleCopy(items, visibleCols, colOffset);
+        this.copyRangeSig.set(null);
+    }
+    async handlePaste(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged) {
+        if (editable === false)
+            return;
+        if (!wrappedOnCellValueChanged)
+            return;
+        let text = this.preferInternalClipboard && this.internalClipboard != null
+            ? this.internalClipboard
+            : '';
+        if (!text.trim()) {
+            try {
+                text = await navigator.clipboard.readText();
+            }
+            catch {
+                text = '';
+            }
+        }
+        if (!text.trim() && this.internalClipboard != null) {
+            text = this.internalClipboard;
+        }
+        if (!text.trim())
+            return;
+        const norm = this.getEffectiveRange(colOffset);
+        const anchorRow = norm ? norm.startRow : 0;
+        const anchorCol = norm ? norm.startCol : 0;
+        const parsedRows = parseTsvClipboard(text);
+        this.beginBatch();
+        for (let r = 0; r < parsedRows.length; r++) {
+            const cells = parsedRows[r];
+            for (let c = 0; c < cells.length; c++) {
+                const targetRow = anchorRow + r;
+                const targetCol = anchorCol + c;
+                if (targetRow >= items.length || targetCol >= visibleCols.length)
+                    continue;
+                const item = items[targetRow];
+                const col = visibleCols[targetCol];
+                const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+                if (!colEditable)
+                    continue;
+                const rawValue = cells[c] ?? '';
+                const oldValue = getCellValue(item, col);
+                const result = parseValue(rawValue, oldValue, item, col);
+                if (!result.valid)
+                    continue;
+                wrappedOnCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: targetRow });
+            }
+        }
+        const cutRange = this.cutRangeSig();
+        if (cutRange) {
+            for (let r = cutRange.startRow; r <= cutRange.endRow; r++) {
+                for (let c = cutRange.startCol; c <= cutRange.endCol; c++) {
+                    if (r >= items.length || c >= visibleCols.length)
+                        continue;
+                    const item = items[r];
+                    const col = visibleCols[c];
+                    const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+                    if (!colEditable)
+                        continue;
+                    const oldValue = getCellValue(item, col);
+                    const result = parseValue('', oldValue, item, col);
+                    if (!result.valid)
+                        continue;
+                    wrappedOnCellValueChanged({ item, columnId: col.columnId, oldValue, newValue: result.value, rowIndex: r });
+                }
+            }
+            this.cutRangeSig.set(null);
+        }
+        this.endBatch();
+        this.copyRangeSig.set(null);
+    }
+    clearClipboardRanges() {
+        this.copyRangeSig.set(null);
+        this.cutRangeSig.set(null);
+    }
+    // --- Undo/Redo ---
+    beginBatch() {
+        this.undoRedoStack.beginBatch();
+    }
+    endBatch() {
+        this.undoRedoStack.endBatch();
+        this.undoLengthSig.set(this.undoRedoStack.historyLength);
+        this.redoLengthSig.set(this.undoRedoStack.redoLength);
+    }
+    undo(originalOnCellValueChanged) {
+        if (!originalOnCellValueChanged)
+            return;
+        const lastBatch = this.undoRedoStack.undo();
+        if (!lastBatch)
+            return;
+        this.undoLengthSig.set(this.undoRedoStack.historyLength);
+        this.redoLengthSig.set(this.undoRedoStack.redoLength);
+        for (let i = lastBatch.length - 1; i >= 0; i--) {
+            const ev = lastBatch[i];
+            originalOnCellValueChanged({ ...ev, oldValue: ev.newValue, newValue: ev.oldValue });
+        }
+    }
+    redo(originalOnCellValueChanged) {
+        if (!originalOnCellValueChanged)
+            return;
+        const nextBatch = this.undoRedoStack.redo();
+        if (!nextBatch)
+            return;
+        this.undoLengthSig.set(this.undoRedoStack.historyLength);
+        this.redoLengthSig.set(this.undoRedoStack.redoLength);
+        for (const ev of nextBatch) {
+            originalOnCellValueChanged(ev);
+        }
+    }
+    // --- Cell selection / mouse handling ---
+    handleCellMouseDown(e, rowIndex, globalColIndex, colOffset, wrapperEl) {
+        if (e.button !== 0)
+            return;
+        wrapperEl?.focus({ preventScroll: true });
+        this.clearClipboardRanges();
+        if (globalColIndex < colOffset)
+            return;
+        e.preventDefault();
+        const dataColIndex = globalColIndex - colOffset;
+        const currentRange = this.selectionRangeSig();
+        if (e.shiftKey && currentRange != null) {
+            this.setSelectionRange(normalizeSelectionRange({
+                startRow: currentRange.startRow,
+                startCol: currentRange.startCol,
+                endRow: rowIndex,
+                endCol: dataColIndex,
+            }));
+            this.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+        }
+        else {
+            this.dragStartPos = { row: rowIndex, col: dataColIndex };
+            this.dragMoved = false;
+            const initial = {
+                startRow: rowIndex, startCol: dataColIndex,
+                endRow: rowIndex, endCol: dataColIndex,
+            };
+            this.setSelectionRange(initial);
+            this.liveDragRange = initial;
+            this.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+            this.isDraggingRef = true;
+            // Apply drag attrs synchronously so the anchor cell styling (data-drag-range)
+            // is in place before the next browser paint. Without this, the origin cell
+            // briefly shows a green outline (from the active-cell CSS class) until the
+            // first pointermove fires and the RAF applies the drag attributes.
+            this.applyDragAttrs(initial, colOffset, wrapperEl);
+        }
+    }
+    handleSelectAllCells(rowCount, visibleColCount, colOffset) {
+        if (rowCount === 0 || visibleColCount === 0)
+            return;
+        this.setSelectionRange({
+            startRow: 0, startCol: 0,
+            endRow: rowCount - 1, endCol: visibleColCount - 1,
+        });
+        this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+    }
+    // --- Fill handle ---
+    handleFillHandleMouseDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const range = this.selectionRangeSig();
+        if (!range)
+            return;
+        this.fillDragStart = { startRow: range.startRow, startCol: range.startCol };
+    }
+    // --- Keyboard navigation ---
+    handleGridKeyDown(e, items, getRowId, visibleCols, colOffset, hasCheckboxCol, visibleColumnCount, editable, wrappedOnCellValueChanged, originalOnCellValueChanged, rowSelection, selectedRowIds, wrapperEl, handleRowCheckboxChange, editingCell, setEditingCell, onKeyDown) {
+        // Consumer intercept: call consumer's handler first; skip grid default if preventDefault() was called
+        if (onKeyDown) {
+            onKeyDown(e);
+            if (e.defaultPrevented)
+                return;
+        }
+        const activeCell = this.activeCellSig();
+        const selectionRange = this.selectionRangeSig();
+        const maxRowIndex = items.length - 1;
+        const maxColIndex = visibleColumnCount - 1 + colOffset;
+        if (items.length === 0)
+            return;
+        if (activeCell === null) {
+            if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', 'PageDown', 'PageUp'].includes(e.key)) {
+                this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+                e.preventDefault();
+            }
+            return;
+        }
+        const { rowIndex, columnIndex } = activeCell;
+        const dataColIndex = columnIndex - colOffset;
+        const shift = e.shiftKey;
+        const ctrl = e.ctrlKey || e.metaKey;
+        const isEmptyAt = (r, c) => {
+            if (r < 0 || r >= items.length || c < 0 || c >= visibleCols.length)
+                return true;
+            const v = getCellValue(items[r], visibleCols[c]);
+            return v == null || v === '';
+        };
+        const findCtrlTarget = findCtrlArrowTarget;
+        switch (e.key) {
+            case 'c':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    this.handleCopy(items, visibleCols, colOffset);
+                }
+                break;
+            case 'x':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    this.handleCut(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged);
+                }
+                break;
+            case 'v':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    void this.handlePaste(items, visibleCols, colOffset, editable, wrappedOnCellValueChanged);
+                }
+                break;
+            case 'd':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    if (editable !== false && wrappedOnCellValueChanged != null) {
+                        const fillRange = selectionRange ?? (activeCell != null
+                            ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset }
+                            : null);
+                        if (fillRange != null) {
+                            e.preventDefault();
+                            const norm = normalizeSelectionRange(fillRange);
+                            const fillEvents = applyFillValues(norm, norm.startRow, norm.startCol, items, visibleCols);
+                            if (fillEvents.length > 0) {
+                                this.undoRedoStack.beginBatch();
+                                for (const evt of fillEvents)
+                                    wrappedOnCellValueChanged(evt);
+                                this.undoRedoStack.endBatch();
+                                this.undoLengthSig.set(this.undoRedoStack.historyLength);
+                                this.redoLengthSig.set(this.undoRedoStack.redoLength);
+                            }
+                        }
+                    }
+                }
+                break;
+            case 'ArrowDown': {
+                if (editingCell != null)
+                    break;
+                e.preventDefault();
+                const newRow = ctrl
+                    ? findCtrlTarget(rowIndex, maxRowIndex, 1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                    : Math.min(rowIndex + 1, maxRowIndex);
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: newRow,
+                        endCol: selectionRange?.endCol ?? dataColIndex,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: newRow, startCol: dataColIndex, endRow: newRow, endCol: dataColIndex });
+                }
+                this.setActiveCell({ rowIndex: newRow, columnIndex });
+                break;
+            }
+            case 'ArrowUp': {
+                if (editingCell != null)
+                    break;
+                e.preventDefault();
+                const newRowUp = ctrl
+                    ? findCtrlTarget(rowIndex, 0, -1, (r) => isEmptyAt(r, Math.max(0, dataColIndex)))
+                    : Math.max(rowIndex - 1, 0);
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: newRowUp,
+                        endCol: selectionRange?.endCol ?? dataColIndex,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: newRowUp, startCol: dataColIndex, endRow: newRowUp, endCol: dataColIndex });
+                }
+                this.setActiveCell({ rowIndex: newRowUp, columnIndex });
+                break;
+            }
+            case 'ArrowRight': {
+                if (editingCell != null)
+                    break;
+                e.preventDefault();
+                let newCol;
+                if (ctrl && dataColIndex >= 0) {
+                    newCol = findCtrlTarget(dataColIndex, visibleCols.length - 1, 1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+                }
+                else {
+                    newCol = Math.min(columnIndex + 1, maxColIndex);
+                }
+                const newDataCol = newCol - colOffset;
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: selectionRange?.endRow ?? rowIndex,
+                        endCol: newDataCol,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: rowIndex, startCol: newDataCol, endRow: rowIndex, endCol: newDataCol });
+                }
+                this.setActiveCell({ rowIndex, columnIndex: newCol });
+                break;
+            }
+            case 'ArrowLeft': {
+                if (editingCell != null)
+                    break;
+                e.preventDefault();
+                let newColLeft;
+                if (ctrl && dataColIndex >= 0) {
+                    newColLeft = findCtrlTarget(dataColIndex, 0, -1, (c) => isEmptyAt(rowIndex, c)) + colOffset;
+                }
+                else {
+                    newColLeft = Math.max(columnIndex - 1, colOffset);
+                }
+                const newDataColLeft = newColLeft - colOffset;
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: selectionRange?.endRow ?? rowIndex,
+                        endCol: newDataColLeft,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: rowIndex, startCol: newDataColLeft, endRow: rowIndex, endCol: newDataColLeft });
+                }
+                this.setActiveCell({ rowIndex, columnIndex: newColLeft });
+                break;
+            }
+            case 'Tab': {
+                e.preventDefault();
+                const tabResult = computeTabNavigation(rowIndex, columnIndex, maxRowIndex, maxColIndex, colOffset, e.shiftKey);
+                const newDataColTab = tabResult.columnIndex - colOffset;
+                this.setSelectionRange({ startRow: tabResult.rowIndex, startCol: newDataColTab, endRow: tabResult.rowIndex, endCol: newDataColTab });
+                this.setActiveCell({ rowIndex: tabResult.rowIndex, columnIndex: tabResult.columnIndex });
+                break;
+            }
+            case 'Home': {
+                e.preventDefault();
+                const newRowHome = ctrl ? 0 : rowIndex;
+                this.setSelectionRange({ startRow: newRowHome, startCol: 0, endRow: newRowHome, endCol: 0 });
+                this.setActiveCell({ rowIndex: newRowHome, columnIndex: colOffset });
+                break;
+            }
+            case 'End': {
+                e.preventDefault();
+                const newRowEnd = ctrl ? maxRowIndex : rowIndex;
+                this.setSelectionRange({ startRow: newRowEnd, startCol: visibleColumnCount - 1, endRow: newRowEnd, endCol: visibleColumnCount - 1 });
+                this.setActiveCell({ rowIndex: newRowEnd, columnIndex: maxColIndex });
+                break;
+            }
+            case 'PageDown':
+            case 'PageUp': {
+                e.preventDefault();
+                let pageSize = 10;
+                let rowHeight = 36;
+                if (wrapperEl) {
+                    const firstRow = wrapperEl.querySelector('tbody tr');
+                    if (firstRow && firstRow.offsetHeight > 0) {
+                        rowHeight = firstRow.offsetHeight;
+                        pageSize = Math.max(1, Math.floor(wrapperEl.clientHeight / rowHeight));
+                    }
+                }
+                const pgDir = e.key === 'PageDown' ? 1 : -1;
+                const newRowPage = Math.max(0, Math.min(rowIndex + pgDir * pageSize, maxRowIndex));
+                if (shift) {
+                    this.setSelectionRange(normalizeSelectionRange({
+                        startRow: selectionRange?.startRow ?? rowIndex,
+                        startCol: selectionRange?.startCol ?? dataColIndex,
+                        endRow: newRowPage,
+                        endCol: selectionRange?.endCol ?? dataColIndex,
+                    }));
+                }
+                else {
+                    this.setSelectionRange({ startRow: newRowPage, startCol: dataColIndex, endRow: newRowPage, endCol: dataColIndex });
+                }
+                this.setActiveCell({ rowIndex: newRowPage, columnIndex });
+                // Scroll the new row into view
+                if (wrapperEl) {
+                    wrapperEl.scrollTop = getScrollTopForRow(newRowPage, rowHeight, wrapperEl.clientHeight, 'center');
+                }
+                break;
+            }
+            case 'Enter':
+            case 'F2': {
+                e.preventDefault();
+                if (dataColIndex >= 0 && dataColIndex < visibleCols.length) {
+                    const col = visibleCols[dataColIndex];
+                    const item = items[rowIndex];
+                    if (item && col) {
+                        const colEditable = col.editable === true || (typeof col.editable === 'function' && col.editable(item));
+                        if (editable !== false && colEditable && wrappedOnCellValueChanged != null) {
+                            setEditingCell({ rowId: getRowId(item), columnId: col.columnId });
+                        }
+                    }
+                }
+                break;
+            }
+            case 'Escape':
+                e.preventDefault();
+                if (editingCell != null) {
+                    setEditingCell(null);
+                }
+                else {
+                    this.clearClipboardRanges();
+                    this.setActiveCell(null);
+                    this.setSelectionRange(null);
+                }
+                break;
+            case ' ':
+                if (rowSelection !== 'none' && columnIndex === 0 && hasCheckboxCol) {
+                    e.preventDefault();
+                    const item = items[rowIndex];
+                    if (item) {
+                        const id = getRowId(item);
+                        const isSelected = selectedRowIds.has(id);
+                        handleRowCheckboxChange(id, !isSelected, rowIndex, e.shiftKey);
+                    }
+                }
+                break;
+            case 'z':
+                if (ctrl) {
+                    if (editingCell == null) {
+                        if (e.shiftKey) {
+                            e.preventDefault();
+                            this.redo(originalOnCellValueChanged);
+                        }
+                        else {
+                            e.preventDefault();
+                            this.undo(originalOnCellValueChanged);
+                        }
+                    }
+                }
+                break;
+            case 'y':
+                if (ctrl && editingCell == null) {
+                    e.preventDefault();
+                    this.redo(originalOnCellValueChanged);
+                }
+                break;
+            case 'a':
+                if (ctrl) {
+                    if (editingCell != null)
+                        break;
+                    e.preventDefault();
+                    if (items.length > 0 && visibleColumnCount > 0) {
+                        this.setSelectionRange({ startRow: 0, startCol: 0, endRow: items.length - 1, endCol: visibleColumnCount - 1 });
+                        this.setActiveCell({ rowIndex: 0, columnIndex: colOffset });
+                    }
+                }
+                break;
+            case 'Delete':
+            case 'Backspace': {
+                if (editingCell != null)
+                    break;
+                if (editable === false)
+                    break;
+                if (wrappedOnCellValueChanged == null)
+                    break;
+                const range = selectionRange ?? (activeCell != null
+                    ? { startRow: activeCell.rowIndex, startCol: activeCell.columnIndex - colOffset, endRow: activeCell.rowIndex, endCol: activeCell.columnIndex - colOffset }
+                    : null);
+                if (range == null)
+                    break;
+                e.preventDefault();
+                const deleteEvents = applyCellDeletion(normalizeSelectionRange(range), items, visibleCols);
+                for (const evt of deleteEvents)
+                    wrappedOnCellValueChanged(evt);
+                break;
+            }
+            case 'F10':
+                if (e.shiftKey) {
+                    e.preventDefault();
+                    if (activeCell != null && wrapperEl) {
+                        const sel = `[data-row-index="${activeCell.rowIndex}"][data-col-index="${activeCell.columnIndex}"]`;
+                        const cell = wrapperEl.querySelector(sel);
+                        if (cell) {
+                            const rect = cell.getBoundingClientRect();
+                            this.setContextMenuPosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+                        }
+                        else {
+                            this.setContextMenuPosition({ x: 100, y: 100 });
+                        }
+                    }
+                    else {
+                        this.setContextMenuPosition({ x: 100, y: 100 });
+                    }
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    // --- Drag helpers ---
+    onWindowMouseMove(e, colOffset, wrapperEl) {
+        if (!this.isDraggingRef || !this.dragStartPos)
+            return;
+        if (!this.dragMoved) {
+            this.dragMoved = true;
+            this.isDraggingSig.set(true);
+        }
+        this.lastMousePos = { cx: e.clientX, cy: e.clientY };
+        if (this.rafId)
+            cancelAnimationFrame(this.rafId);
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = 0;
+            const pos = this.lastMousePos;
+            if (!pos)
+                return;
+            const newRange = this.resolveRangeFromMouse(pos.cx, pos.cy, colOffset);
+            if (!newRange)
+                return;
+            const prev = this.liveDragRange;
+            if (prev && prev.startRow === newRange.startRow && prev.startCol === newRange.startCol &&
+                prev.endRow === newRange.endRow && prev.endCol === newRange.endCol)
+                return;
+            this.liveDragRange = newRange;
+            this.applyDragAttrs(newRange, colOffset, wrapperEl);
+        });
+    }
+    onWindowMouseUp(colOffset, wrapperEl) {
+        if (!this.isDraggingRef)
+            return;
+        if (this.autoScrollInterval) {
+            clearInterval(this.autoScrollInterval);
+            this.autoScrollInterval = null;
+        }
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        this.isDraggingRef = false;
+        const wasDrag = this.dragMoved;
+        if (wasDrag) {
+            const pos = this.lastMousePos;
+            if (pos) {
+                const flushed = this.resolveRangeFromMouse(pos.cx, pos.cy, colOffset);
+                if (flushed)
+                    this.liveDragRange = flushed;
+            }
+            const finalRange = this.liveDragRange;
+            if (finalRange) {
+                this.setSelectionRange(finalRange);
+                // Keep the active cell at the drag anchor (start), not the endpoint.
+                const anchor = this.dragStartPos;
+                if (anchor) {
+                    this.setActiveCell({
+                        rowIndex: anchor.row,
+                        columnIndex: anchor.col + colOffset,
+                    });
+                }
+            }
+        }
+        this.clearDragAttrs(wrapperEl);
+        this.liveDragRange = null;
+        this.lastMousePos = null;
+        this.dragStartPos = null;
+        if (wasDrag)
+            this.isDraggingSig.set(false);
+    }
+    resolveRangeFromMouse(cx, cy, colOffset) {
+        if (!this.dragStartPos)
+            return null;
+        const target = document.elementFromPoint(cx, cy);
+        const cell = target?.closest?.('[data-row-index][data-col-index]');
+        if (!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 < colOffset)
+            return null;
+        const dataCol = c - colOffset;
+        const start = this.dragStartPos;
+        return normalizeSelectionRange({
+            startRow: start.row, startCol: start.col,
+            endRow: r, endCol: dataCol,
+        });
+    }
+    applyDragAttrs(range, colOff, wrapper) {
+        if (!wrapper)
+            return;
+        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(wrapper) {
+        if (!wrapper)
+            return;
+        const marked = wrapper.querySelectorAll('[data-drag-range]');
+        for (let i = 0; i < marked.length; i++)
+            marked[i].removeAttribute('data-drag-range');
+    }
+    // --- Private helpers ---
+    getEffectiveRange(colOffset) {
+        const sel = this.selectionRangeSig();
+        const ac = this.activeCellSig();
+        return sel ?? (ac != null
+            ? { startRow: ac.rowIndex, startCol: ac.columnIndex - colOffset, endRow: ac.rowIndex, endCol: ac.columnIndex - colOffset }
+            : null);
+    }
+    destroy() {
+        if (this.rafId) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = 0;
+        }
+        if (this.fillRafId) {
+            cancelAnimationFrame(this.fillRafId);
+            this.fillRafId = 0;
+        }
+        if (this.autoScrollInterval) {
+            clearInterval(this.autoScrollInterval);
+            this.autoScrollInterval = null;
+        }
+        if (this.fillMoveHandler) {
+            window.removeEventListener('pointermove', this.fillMoveHandler, true);
+            this.fillMoveHandler = null;
+        }
+        if (this.fillUpHandler) {
+            window.removeEventListener('pointerup', this.fillUpHandler, true);
+            this.fillUpHandler = null;
+        }
+        this.undoRedoStack.clear();
+    }
+}