@alaarab/ogrid-angular 2.5.9 → 2.6.1

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

@@ -0,0 +1,176 @@
+import { Injectable, signal, DestroyRef, inject } from '@angular/core';
+import { reorderColumnArray } from '@alaarab/ogrid-core';
+import * as i0 from "@angular/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.
+ */
+export class ColumnReorderService {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        // --- Input signals (set by consuming component) ---
+        this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.columnOrder = signal(undefined, ...(ngDevMode ? [{ debugName: "columnOrder" }] : []));
+        this.onColumnOrderChange = signal(undefined, ...(ngDevMode ? [{ debugName: "onColumnOrderChange" }] : []));
+        this.enabled = signal(true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+        this.wrapperEl = signal(null, ...(ngDevMode ? [{ debugName: "wrapperEl" }] : []));
+        // --- Internal state ---
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.dropIndicatorX = signal(null, ...(ngDevMode ? [{ debugName: "dropIndicatorX" }] : []));
+        // 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('pointermove', onMove, true);
+            window.removeEventListener('pointerup', 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('pointermove', onMove, true);
+        window.addEventListener('pointerup', 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 };
+    }
+    static { this.ɵfac = function ColumnReorderService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ColumnReorderService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ColumnReorderService, factory: ColumnReorderService.ɵfac }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ColumnReorderService, [{
+        type: Injectable
+    }], () => [], null); })();

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

@@ -0,0 +1,59 @@
+import { signal } from '@angular/core';
+import { parseValue, } from '@alaarab/ogrid-core';
+/**
+ * Manages cell editing state, inline/popover editor, and commit/cancel logic.
+ * Extracted from DataGridStateService for modularity.
+ *
+ * Not @Injectable  -  instantiated and owned by DataGridStateService.
+ */
+export class DataGridEditingHelper {
+    constructor(getVisibleCols, getItems, getWrappedOnCellValueChanged, setActiveCellFn, setSelectionRangeFn, getColOffset) {
+        this.editingCellSig = signal(null, ...(ngDevMode ? [{ debugName: "editingCellSig" }] : []));
+        this.pendingEditorValueSig = signal(undefined, ...(ngDevMode ? [{ debugName: "pendingEditorValueSig" }] : []));
+        this.popoverAnchorElSig = signal(null, ...(ngDevMode ? [{ debugName: "popoverAnchorElSig" }] : []));
+        this.getVisibleCols = getVisibleCols;
+        this.getItems = getItems;
+        this.getWrappedOnCellValueChanged = getWrappedOnCellValueChanged;
+        this.setActiveCellFn = setActiveCellFn;
+        this.setSelectionRangeFn = setSelectionRangeFn;
+        this.getColOffset = getColOffset;
+    }
+    setEditingCell(cell) {
+        this.editingCellSig.set(cell);
+    }
+    setPendingEditorValue(value) {
+        this.pendingEditorValueSig.set(value);
+    }
+    commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex, options) {
+        const col = this.getVisibleCols().find((c) => c.columnId === columnId);
+        if (col) {
+            const result = parseValue(newValue, oldValue, item, col);
+            if (!result.valid) {
+                this.editingCellSig.set(null);
+                this.popoverAnchorElSig.set(null);
+                this.pendingEditorValueSig.set(undefined);
+                return;
+            }
+            newValue = result.value;
+        }
+        this.editingCellSig.set(null);
+        this.popoverAnchorElSig.set(null);
+        this.pendingEditorValueSig.set(undefined);
+        if (!Object.is(newValue, oldValue)) {
+            const onCellValueChanged = this.getWrappedOnCellValueChanged();
+            onCellValueChanged?.({ item, columnId, oldValue, newValue, rowIndex });
+        }
+        const items = this.getItems();
+        if (!options?.skipAdvance && rowIndex < items.length - 1) {
+            const newRow = rowIndex + 1;
+            const localCol = globalColIndex - this.getColOffset();
+            this.setActiveCellFn({ rowIndex: newRow, columnIndex: globalColIndex });
+            this.setSelectionRangeFn({ startRow: newRow, startCol: localCol, endRow: newRow, endCol: localCol });
+        }
+    }
+    cancelPopoverEdit() {
+        this.editingCellSig.set(null);
+        this.popoverAnchorElSig.set(null);
+        this.pendingEditorValueSig.set(undefined);
+    }
+}