@affino/datagrid-vue 0.1.0

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridRowHeightFeature.js

@@ -0,0 +1,82 @@
+import { computed, ref, watch } from "vue";
+const DEFAULT_BASE_ROW_HEIGHT = 40;
+function normalizeMode(mode) {
+    return mode === "auto" ? "auto" : "fixed";
+}
+function normalizeBase(height) {
+    if (!Number.isFinite(height)) {
+        return DEFAULT_BASE_ROW_HEIGHT;
+    }
+    return Math.max(24, Math.trunc(height));
+}
+export function normalizeRowHeightFeature(input) {
+    if (typeof input === "boolean") {
+        return {
+            enabled: input,
+            mode: "fixed",
+            base: DEFAULT_BASE_ROW_HEIGHT,
+        };
+    }
+    if (!input) {
+        return {
+            enabled: false,
+            mode: "fixed",
+            base: DEFAULT_BASE_ROW_HEIGHT,
+        };
+    }
+    return {
+        enabled: input.enabled ?? true,
+        mode: normalizeMode(input.mode),
+        base: normalizeBase(input.base),
+    };
+}
+export function useAffinoDataGridRowHeightFeature(options) {
+    const rowHeightEnabled = ref(options.feature.enabled);
+    const rowHeightMode = ref(options.feature.mode);
+    const baseRowHeight = ref(options.feature.base);
+    const resolveViewportService = () => options.runtime.core.getService("viewport");
+    const rowHeightSupported = computed(() => {
+        const service = resolveViewportService();
+        return (typeof service.setRowHeightMode === "function" &&
+            typeof service.setBaseRowHeight === "function");
+    });
+    const applyRowHeightSettings = () => {
+        if (!rowHeightEnabled.value || !rowHeightSupported.value) {
+            return false;
+        }
+        const service = resolveViewportService();
+        service.setRowHeightMode?.(rowHeightMode.value);
+        service.setBaseRowHeight?.(baseRowHeight.value);
+        return true;
+    };
+    const setRowHeightMode = (mode) => {
+        rowHeightMode.value = normalizeMode(mode);
+    };
+    const setBaseRowHeight = (height) => {
+        baseRowHeight.value = normalizeBase(height);
+    };
+    const measureVisibleRowHeights = () => {
+        if (!rowHeightEnabled.value || !rowHeightSupported.value) {
+            return false;
+        }
+        const service = resolveViewportService();
+        if (typeof service.measureRowHeight !== "function") {
+            return false;
+        }
+        service.measureRowHeight();
+        return true;
+    };
+    watch([rowHeightEnabled, rowHeightMode, baseRowHeight], () => {
+        applyRowHeightSettings();
+    }, { immediate: true });
+    return {
+        rowHeightEnabled,
+        rowHeightMode,
+        baseRowHeight,
+        rowHeightSupported,
+        setRowHeightMode,
+        setBaseRowHeight,
+        measureVisibleRowHeights,
+        applyRowHeightSettings,
+    };
+}

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridRuntimeBootstrap.d.ts

@@ -0,0 +1,20 @@
+import { type Ref } from "vue";
+import type { DataGridColumnDef, DataGridSelectionSnapshot } from "@affino/datagrid-core";
+import { type UseDataGridRuntimeOptions, type UseDataGridRuntimeResult } from "../../useDataGridRuntime";
+import { type MaybeRef } from "./useAffinoDataGridIdentity";
+export interface UseAffinoDataGridRuntimeBootstrapOptions<TRow> {
+    rows: MaybeRef<readonly TRow[]>;
+    columns: MaybeRef<readonly DataGridColumnDef[]>;
+    rowModel?: UseDataGridRuntimeOptions<TRow>["rowModel"];
+    services?: UseDataGridRuntimeOptions<TRow>["services"];
+    startupOrder?: UseDataGridRuntimeOptions<TRow>["startupOrder"];
+    autoStart?: boolean;
+}
+export interface UseAffinoDataGridRuntimeBootstrapResult<TRow> {
+    rows: Ref<readonly TRow[]>;
+    columns: Ref<readonly DataGridColumnDef[]>;
+    runtime: UseDataGridRuntimeResult<TRow>;
+    internalSelectionSnapshot: Ref<DataGridSelectionSnapshot | null>;
+}
+export declare function useAffinoDataGridRuntimeBootstrap<TRow>(options: UseAffinoDataGridRuntimeBootstrapOptions<TRow>): UseAffinoDataGridRuntimeBootstrapResult<TRow>;
+//# sourceMappingURL=useAffinoDataGridRuntimeBootstrap.d.ts.map

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridRuntimeBootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAffinoDataGridRuntimeBootstrap.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useAffinoDataGrid/useAffinoDataGridRuntimeBootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACnC,OAAO,KAAK,EACV,iBAAiB,EAEjB,yBAAyB,EAC1B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAEL,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC9B,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAiB,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAO1E,MAAM,WAAW,wCAAwC,CAAC,IAAI;IAC5D,IAAI,EAAE,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC,CAAA;IAC/B,OAAO,EAAE,QAAQ,CAAC,SAAS,iBAAiB,EAAE,CAAC,CAAA;IAC/C,QAAQ,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAA;IACtD,QAAQ,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAA;IACtD,YAAY,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC,cAAc,CAAC,CAAA;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,uCAAuC,CAAC,IAAI;IAC3D,IAAI,EAAE,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,CAAA;IAC1B,OAAO,EAAE,GAAG,CAAC,SAAS,iBAAiB,EAAE,CAAC,CAAA;IAC1C,OAAO,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAA;IACvC,yBAAyB,EAAE,GAAG,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CACjE;AAED,wBAAgB,iCAAiC,CAAC,IAAI,EACpD,OAAO,EAAE,wCAAwC,CAAC,IAAI,CAAC,GACtD,uCAAuC,CAAC,IAAI,CAAC,CAoE/C"}

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridRuntimeBootstrap.js

@@ -0,0 +1,66 @@
+import { ref } from "vue";
+import { createDataGridTransactionService } from "@affino/datagrid-core/advanced";
+import { useDataGridRuntime, } from "../../useDataGridRuntime";
+import { toReadonlyRef } from "./useAffinoDataGridIdentity";
+export function useAffinoDataGridRuntimeBootstrap(options) {
+    const rows = toReadonlyRef(options.rows);
+    const columns = toReadonlyRef(options.columns);
+    const internalSelectionSnapshot = ref(null);
+    const internalSelectionService = {
+        name: "selection",
+        getSelectionSnapshot() {
+            return internalSelectionSnapshot.value;
+        },
+        setSelectionSnapshot(snapshot) {
+            internalSelectionSnapshot.value = snapshot;
+        },
+        clearSelection() {
+            internalSelectionSnapshot.value = null;
+        },
+    };
+    const applyMutationSnapshot = (snapshot) => {
+        rows.value = snapshot.rows;
+        internalSelectionSnapshot.value = snapshot.selection;
+    };
+    const internalTransactionEngine = createDataGridTransactionService({
+        execute(command, context) {
+            if (context.direction === "apply") {
+                return;
+            }
+            const snapshot = command.payload;
+            applyMutationSnapshot(snapshot);
+        },
+    });
+    const internalTransactionService = {
+        name: "transaction",
+        getTransactionSnapshot: internalTransactionEngine.getSnapshot,
+        beginTransactionBatch: internalTransactionEngine.beginBatch,
+        commitTransactionBatch: internalTransactionEngine.commitBatch,
+        rollbackTransactionBatch: internalTransactionEngine.rollbackBatch,
+        applyTransaction: internalTransactionEngine.applyTransaction,
+        canUndoTransaction: internalTransactionEngine.canUndo,
+        canRedoTransaction: internalTransactionEngine.canRedo,
+        undoTransaction: internalTransactionEngine.undo,
+        redoTransaction: internalTransactionEngine.redo,
+        dispose: internalTransactionEngine.dispose,
+    };
+    const runtimeServices = {
+        ...options.services,
+        transaction: options.services?.transaction ?? internalTransactionService,
+        selection: options.services?.selection ?? internalSelectionService,
+    };
+    const runtime = useDataGridRuntime({
+        rows,
+        columns,
+        rowModel: options.rowModel,
+        services: runtimeServices,
+        startupOrder: options.startupOrder,
+        autoStart: options.autoStart ?? true,
+    });
+    return {
+        rows,
+        columns,
+        runtime,
+        internalSelectionSnapshot,
+    };
+}

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridSelectionEngine.d.ts

@@ -0,0 +1,56 @@
+import { type Ref } from "vue";
+import type { DataGridSelectionSnapshot } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "../../useDataGridRuntime";
+import { useDataGridCellNavigation } from "@affino/datagrid-orchestration";
+export interface AffinoDataGridCellSelectionCoord {
+    rowKey: string;
+    columnKey: string;
+    rowIndex: number;
+    columnIndex: number;
+    rowId: string | number | null;
+}
+export interface InternalCellRange {
+    startRow: number;
+    endRow: number;
+    startColumn: number;
+    endColumn: number;
+}
+export interface UseAffinoDataGridSelectionEngineOptions<TRow> {
+    runtime: UseDataGridRuntimeResult<TRow>;
+    rows: Ref<readonly TRow[]>;
+    resolveRowKey: (row: TRow, index: number) => string;
+    groupSelectsChildren?: Ref<boolean> | boolean;
+    internalSelectionSnapshot: Ref<DataGridSelectionSnapshot | null>;
+    selectionSnapshot: Ref<DataGridSelectionSnapshot | null>;
+    emitSelectionChange: (snapshot: DataGridSelectionSnapshot | null) => void;
+    emitRangeChange?: (range: InternalCellRange | null) => void;
+    closeContextMenu?: () => void;
+    setLastAction?: (message: string) => void;
+    resolveStepRows?: () => number;
+}
+export interface UseAffinoDataGridSelectionEngineResult {
+    activeCellSelection: Ref<AffinoDataGridCellSelectionCoord | null>;
+    anchorCellSelection: Ref<AffinoDataGridCellSelectionCoord | null>;
+    focusCellSelection: Ref<AffinoDataGridCellSelectionCoord | null>;
+    cellSelectionRange: Ref<InternalCellRange | null>;
+    cellSelectionRanges: Ref<readonly InternalCellRange[]>;
+    isPointerSelectingCells: Ref<boolean>;
+    isCellSelected: (rowIndex: number, columnIndex: number) => boolean;
+    setCellSelection: (coord: AffinoDataGridCellSelectionCoord, extend?: boolean, fallbackAnchor?: {
+        rowIndex: number;
+        columnIndex: number;
+    } | null) => void;
+    setCellByKey: (rowKey: string, columnKey: string, options?: {
+        extend?: boolean;
+    }) => boolean;
+    clearCellSelection: () => void;
+    stopPointerCellSelection: () => void;
+    resolveVisibleColumnIndex: (columnKey: string) => number;
+    resolveVisibleRowIndexByKey: (rowKey: string) => number;
+    resolveCellCoordByIndex: (rowIndex: number, columnIndex: number) => AffinoDataGridCellSelectionCoord | null;
+    resolveCellCoordByKey: (rowKey: string, columnKey: string) => AffinoDataGridCellSelectionCoord | null;
+    applySelectionFromRange: (range: InternalCellRange, activePosition?: "start" | "end") => void;
+    cellNavigation: ReturnType<typeof useDataGridCellNavigation>;
+}
+export declare function useAffinoDataGridSelectionEngine<TRow>(options: UseAffinoDataGridSelectionEngineOptions<TRow>): UseAffinoDataGridSelectionEngineResult;
+//# sourceMappingURL=useAffinoDataGridSelectionEngine.d.ts.map

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridSelectionEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAffinoDataGridSelectionEngine.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useAffinoDataGrid/useAffinoDataGridSelectionEngine.ts"],"names":[],"mappings":"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"}

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridSelectionEngine.js

@@ -0,0 +1,365 @@
+import { computed, ref, watch } from "vue";
+import { applyGroupSelectionPolicy, createGridSelectionContextFromFlattenedRows, createGridSelectionRange, } from "@affino/datagrid-core/advanced";
+import { useDataGridCellNavigation } from "@affino/datagrid-orchestration";
+export function useAffinoDataGridSelectionEngine(options) {
+    const cellSelectionAnchor = ref(null);
+    const cellSelectionFocus = ref(null);
+    const isPointerSelectingCells = ref(false);
+    const isGroupSelectsChildrenEnabled = () => {
+        if (typeof options.groupSelectsChildren === "boolean") {
+            return options.groupSelectsChildren;
+        }
+        return Boolean(options.groupSelectsChildren?.value);
+    };
+    const buildFlattenedSelectionRows = () => {
+        const totalRows = options.runtime.api.getRowCount();
+        const flattened = [];
+        for (let rowIndex = 0; rowIndex < totalRows; rowIndex += 1) {
+            const rowNode = options.runtime.api.getRow(rowIndex);
+            flattened.push({
+                rowId: rowNode?.rowId ?? null,
+                isGroup: rowNode?.kind === "group",
+                level: rowNode?.groupMeta?.level ?? 0,
+            });
+        }
+        return flattened;
+    };
+    const applyGroupSelectionRangePolicy = () => {
+        if (!isGroupSelectsChildrenEnabled()) {
+            return;
+        }
+        const anchor = cellSelectionAnchor.value;
+        const focus = cellSelectionFocus.value;
+        if (!anchor || !focus) {
+            return;
+        }
+        const colCount = options.runtime.columnSnapshot.value.visibleColumns.length;
+        if (colCount <= 0) {
+            return;
+        }
+        const flattenedRows = buildFlattenedSelectionRows();
+        const context = createGridSelectionContextFromFlattenedRows({
+            rows: flattenedRows,
+            colCount,
+        });
+        if (context.grid.rowCount <= 0) {
+            return;
+        }
+        const baseRange = createGridSelectionRange({
+            rowIndex: anchor.rowIndex,
+            colIndex: anchor.columnIndex,
+            rowId: anchor.rowId,
+        }, {
+            rowIndex: focus.rowIndex,
+            colIndex: focus.columnIndex,
+            rowId: focus.rowId,
+        }, context);
+        const nextRange = applyGroupSelectionPolicy(baseRange, {
+            rows: flattenedRows,
+            groupSelectsChildren: true,
+        });
+        if (nextRange.focus.rowIndex === focus.rowIndex
+            && nextRange.focus.colIndex === focus.columnIndex) {
+            return;
+        }
+        const nextFocus = resolveCellCoordByIndex(nextRange.focus.rowIndex, nextRange.focus.colIndex);
+        if (!nextFocus) {
+            return;
+        }
+        cellSelectionFocus.value = nextFocus;
+    };
+    const resolveVisibleColumnIndex = (columnKey) => (options.runtime.columnSnapshot.value.visibleColumns.findIndex(column => column.key === columnKey));
+    const resolveVisibleRowIndexByKey = (rowKey) => {
+        const rowCount = options.runtime.api.getRowCount();
+        for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
+            const rowNode = options.runtime.api.getRow(rowIndex);
+            if (!rowNode) {
+                continue;
+            }
+            const candidateRowKey = rowNode.kind === "leaf"
+                ? options.resolveRowKey(rowNode.data, rowNode.sourceIndex)
+                : String(rowNode.rowId ?? rowNode.rowKey ?? rowIndex);
+            if (candidateRowKey === rowKey) {
+                return rowIndex;
+            }
+        }
+        return -1;
+    };
+    const resolveCellCoordByIndex = (rowIndexRaw, columnIndexRaw) => {
+        const rowCount = options.runtime.api.getRowCount();
+        const columnCount = options.runtime.columnSnapshot.value.visibleColumns.length;
+        if (rowCount <= 0 || columnCount <= 0) {
+            return null;
+        }
+        const rowIndex = Math.max(0, Math.min(rowCount - 1, Math.trunc(rowIndexRaw)));
+        const columnIndex = Math.max(0, Math.min(columnCount - 1, Math.trunc(columnIndexRaw)));
+        const rowNode = options.runtime.api.getRow(rowIndex);
+        const column = options.runtime.columnSnapshot.value.visibleColumns[columnIndex];
+        if (!rowNode || !column) {
+            return null;
+        }
+        const rowKey = rowNode.kind === "leaf"
+            ? options.resolveRowKey(rowNode.data, rowNode.sourceIndex)
+            : String(rowNode.rowId ?? rowNode.rowKey ?? rowIndex);
+        return {
+            rowKey,
+            columnKey: column.key,
+            rowIndex,
+            columnIndex,
+            rowId: rowNode.rowId ?? null,
+        };
+    };
+    const resolveCellCoordByKey = (rowKey, columnKey) => {
+        const rowIndex = resolveVisibleRowIndexByKey(rowKey);
+        const columnIndex = resolveVisibleColumnIndex(columnKey);
+        if (rowIndex < 0 || columnIndex < 0) {
+            return null;
+        }
+        return resolveCellCoordByIndex(rowIndex, columnIndex);
+    };
+    const activeCellSelection = computed(() => (cellSelectionFocus.value ?? cellSelectionAnchor.value));
+    const anchorCellSelection = computed(() => (cellSelectionAnchor.value));
+    const focusCellSelection = computed(() => (cellSelectionFocus.value));
+    const setCellSelection = (coord, extend = false, fallbackAnchor = null) => {
+        if (!extend) {
+            cellSelectionAnchor.value = coord;
+            cellSelectionFocus.value = coord;
+            applyGroupSelectionRangePolicy();
+            return;
+        }
+        const anchor = cellSelectionAnchor.value
+            ?? (fallbackAnchor
+                ? resolveCellCoordByIndex(fallbackAnchor.rowIndex, fallbackAnchor.columnIndex)
+                : null)
+            ?? activeCellSelection.value
+            ?? coord;
+        cellSelectionAnchor.value = anchor;
+        cellSelectionFocus.value = coord;
+        applyGroupSelectionRangePolicy();
+    };
+    const clearCellSelection = () => {
+        cellSelectionAnchor.value = null;
+        cellSelectionFocus.value = null;
+        isPointerSelectingCells.value = false;
+    };
+    const stopPointerCellSelection = () => {
+        isPointerSelectingCells.value = false;
+    };
+    const cellSelectionRange = computed(() => {
+        const anchor = cellSelectionAnchor.value;
+        const focus = cellSelectionFocus.value;
+        if (!anchor || !focus) {
+            return null;
+        }
+        return {
+            startRow: Math.min(anchor.rowIndex, focus.rowIndex),
+            endRow: Math.max(anchor.rowIndex, focus.rowIndex),
+            startColumn: Math.min(anchor.columnIndex, focus.columnIndex),
+            endColumn: Math.max(anchor.columnIndex, focus.columnIndex),
+        };
+    });
+    const cellSelectionRanges = computed(() => (cellSelectionRange.value ? [cellSelectionRange.value] : []));
+    const isCellSelected = (rowIndex, columnIndex) => {
+        const range = cellSelectionRange.value;
+        if (!range) {
+            return false;
+        }
+        return (rowIndex >= range.startRow
+            && rowIndex <= range.endRow
+            && columnIndex >= range.startColumn
+            && columnIndex <= range.endColumn);
+    };
+    const setCellByKey = (rowKey, columnKey, selectionOptions = {}) => {
+        const coord = resolveCellCoordByKey(rowKey, columnKey);
+        if (!coord) {
+            return false;
+        }
+        setCellSelection(coord, Boolean(selectionOptions.extend));
+        return true;
+    };
+    const buildCellSelectionSnapshot = () => {
+        const range = cellSelectionRange.value;
+        const anchor = cellSelectionAnchor.value;
+        const focus = cellSelectionFocus.value;
+        if (!range || !anchor || !focus) {
+            return null;
+        }
+        const startRowId = options.runtime.api.getRow(range.startRow)?.rowId ?? null;
+        const endRowId = options.runtime.api.getRow(range.endRow)?.rowId ?? null;
+        return {
+            ranges: [
+                {
+                    startRow: range.startRow,
+                    endRow: range.endRow,
+                    startCol: range.startColumn,
+                    endCol: range.endColumn,
+                    startRowId,
+                    endRowId,
+                    anchor: {
+                        rowIndex: anchor.rowIndex,
+                        colIndex: anchor.columnIndex,
+                        rowId: anchor.rowId,
+                    },
+                    focus: {
+                        rowIndex: focus.rowIndex,
+                        colIndex: focus.columnIndex,
+                        rowId: focus.rowId,
+                    },
+                },
+            ],
+            activeRangeIndex: 0,
+            activeCell: {
+                rowIndex: focus.rowIndex,
+                colIndex: focus.columnIndex,
+                rowId: focus.rowId,
+            },
+        };
+    };
+    const syncSelectionSnapshot = () => {
+        const nextSnapshot = buildCellSelectionSnapshot() ?? options.selectionSnapshot.value;
+        options.internalSelectionSnapshot.value = nextSnapshot;
+        if (!options.runtime.api.hasSelectionSupport()) {
+            return;
+        }
+        if (!nextSnapshot) {
+            options.runtime.api.clearSelection();
+            options.emitSelectionChange(null);
+            return;
+        }
+        options.runtime.api.setSelectionSnapshot(nextSnapshot);
+        options.emitSelectionChange(nextSnapshot);
+    };
+    watch([cellSelectionRange, () => options.selectionSnapshot.value], () => {
+        syncSelectionSnapshot();
+    }, { immediate: true, flush: "sync" });
+    watch(cellSelectionRange, nextRange => {
+        options.emitRangeChange?.(nextRange);
+    }, { flush: "sync" });
+    const cellNavigation = useDataGridCellNavigation({
+        resolveCurrentCellCoord: () => {
+            const active = activeCellSelection.value;
+            if (!active) {
+                return null;
+            }
+            return {
+                rowIndex: active.rowIndex,
+                columnIndex: active.columnIndex,
+            };
+        },
+        resolveTabTarget: (current, backwards) => {
+            const rowCount = options.runtime.api.getRowCount();
+            const columnCount = options.runtime.columnSnapshot.value.visibleColumns.length;
+            if (rowCount <= 0 || columnCount <= 0) {
+                return null;
+            }
+            let rowIndex = current.rowIndex;
+            let columnIndex = current.columnIndex + (backwards ? -1 : 1);
+            if (columnIndex < 0) {
+                rowIndex -= 1;
+                columnIndex = columnCount - 1;
+            }
+            else if (columnIndex >= columnCount) {
+                rowIndex += 1;
+                columnIndex = 0;
+            }
+            if (rowIndex < 0 || rowIndex >= rowCount) {
+                return null;
+            }
+            return {
+                rowIndex,
+                columnIndex,
+            };
+        },
+        normalizeCellCoord: coord => {
+            const normalized = resolveCellCoordByIndex(coord.rowIndex, coord.columnIndex);
+            if (!normalized) {
+                return null;
+            }
+            return {
+                rowIndex: normalized.rowIndex,
+                columnIndex: normalized.columnIndex,
+            };
+        },
+        getAdjacentNavigableColumnIndex: (columnIndex, direction) => {
+            const max = Math.max(0, options.runtime.columnSnapshot.value.visibleColumns.length - 1);
+            return Math.max(0, Math.min(max, columnIndex + direction));
+        },
+        getFirstNavigableColumnIndex: () => (options.runtime.columnSnapshot.value.visibleColumns.length > 0 ? 0 : -1),
+        getLastNavigableColumnIndex: () => (Math.max(-1, options.runtime.columnSnapshot.value.visibleColumns.length - 1)),
+        getLastRowIndex: () => Math.max(0, options.runtime.api.getRowCount() - 1),
+        resolveStepRows: options.resolveStepRows ?? (() => 20),
+        closeContextMenu: options.closeContextMenu ?? (() => { }),
+        clearCellSelection,
+        setLastAction: options.setLastAction ?? (() => { }),
+        applyCellSelection: (nextCoord, extend, fallbackAnchor) => {
+            const normalized = resolveCellCoordByIndex(nextCoord.rowIndex, nextCoord.columnIndex);
+            if (!normalized) {
+                return;
+            }
+            setCellSelection(normalized, extend, fallbackAnchor ?? null);
+        },
+    });
+    const normalizeCellRange = (range) => {
+        if (!range) {
+            return null;
+        }
+        const rowTotal = options.runtime.api.getRowCount();
+        const colTotal = options.runtime.columnSnapshot.value.visibleColumns.length;
+        if (rowTotal <= 0 || colTotal <= 0) {
+            return null;
+        }
+        const clamp = (value, max) => (Math.max(0, Math.min(max, Math.trunc(value))));
+        const maxRow = Math.max(0, rowTotal - 1);
+        const maxCol = Math.max(0, colTotal - 1);
+        const startRow = clamp(Math.min(range.startRow, range.endRow), maxRow);
+        const endRow = clamp(Math.max(range.startRow, range.endRow), maxRow);
+        const startColumn = clamp(Math.min(range.startColumn, range.endColumn), maxCol);
+        const endColumn = clamp(Math.max(range.startColumn, range.endColumn), maxCol);
+        return {
+            startRow,
+            endRow,
+            startColumn,
+            endColumn,
+        };
+    };
+    const applySelectionFromRange = (range, activePosition = "end") => {
+        const normalized = normalizeCellRange(range);
+        if (!normalized) {
+            clearCellSelection();
+            return;
+        }
+        const start = resolveCellCoordByIndex(normalized.startRow, normalized.startColumn);
+        const end = resolveCellCoordByIndex(normalized.endRow, normalized.endColumn);
+        if (!start || !end) {
+            return;
+        }
+        if (activePosition === "start") {
+            cellSelectionAnchor.value = end;
+            cellSelectionFocus.value = start;
+            applyGroupSelectionRangePolicy();
+            return;
+        }
+        cellSelectionAnchor.value = start;
+        cellSelectionFocus.value = end;
+        applyGroupSelectionRangePolicy();
+    };
+    return {
+        activeCellSelection,
+        anchorCellSelection,
+        focusCellSelection,
+        cellSelectionRange,
+        cellSelectionRanges,
+        isPointerSelectingCells,
+        isCellSelected,
+        setCellSelection,
+        setCellByKey,
+        clearCellSelection,
+        stopPointerCellSelection,
+        resolveVisibleColumnIndex,
+        resolveVisibleRowIndexByKey,
+        resolveCellCoordByIndex,
+        resolveCellCoordByKey,
+        applySelectionFromRange,
+        cellNavigation,
+    };
+}

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridSelectionFeature.d.ts

@@ -0,0 +1,38 @@
+import { type ComputedRef, type Ref } from "vue";
+import type { DataGridSelectionSnapshot } from "@affino/datagrid-core";
+import type { UseDataGridRuntimeResult } from "../../useDataGridRuntime";
+export interface AffinoSelectionFeatureInput<TRow> {
+    enabled?: boolean;
+    initialSelectedRowKeys?: readonly string[];
+    resolveRowKey?: (row: TRow, index: number) => string;
+}
+export interface NormalizedAffinoSelectionFeature<TRow> {
+    enabled: boolean;
+    initialSelectedRowKeys: readonly string[];
+    resolveRowKey?: (row: TRow, index: number) => string;
+}
+export interface UseAffinoDataGridSelectionFeatureOptions<TRow> {
+    rows: Ref<readonly TRow[]>;
+    runtime: UseDataGridRuntimeResult<TRow>;
+    feature: NormalizedAffinoSelectionFeature<TRow>;
+    fallbackResolveRowKey: (row: TRow, index: number) => string;
+    internalSelectionSnapshot: Ref<DataGridSelectionSnapshot | null>;
+}
+export interface UseAffinoDataGridSelectionFeatureResult<TRow> {
+    selectionEnabled: Ref<boolean>;
+    selectedRowKeySet: Ref<Set<string>>;
+    selectedRowKeys: ComputedRef<readonly string[]>;
+    selectedCount: ComputedRef<number>;
+    resolveRowKey: (row: TRow, index: number) => string;
+    isSelectedByKey: (rowKey: string) => boolean;
+    setSelectedByKey: (rowKey: string, selected: boolean) => void;
+    toggleSelectedByKey: (rowKey: string) => void;
+    clearSelection: () => void;
+    selectOnlyRow: (rowKey: string) => void;
+    selectAllRows: () => number;
+    resolveSelectedRows: () => readonly TRow[];
+    selectionSnapshot: ComputedRef<DataGridSelectionSnapshot | null>;
+}
+export declare function normalizeSelectionFeature<TRow>(input: boolean | AffinoSelectionFeatureInput<TRow> | undefined): NormalizedAffinoSelectionFeature<TRow>;
+export declare function useAffinoDataGridSelectionFeature<TRow>(options: UseAffinoDataGridSelectionFeatureOptions<TRow>): UseAffinoDataGridSelectionFeatureResult<TRow>;
+//# sourceMappingURL=useAffinoDataGridSelectionFeature.d.ts.map

package/dist/composables/internal/useAffinoDataGrid/useAffinoDataGridSelectionFeature.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAffinoDataGridSelectionFeature.d.ts","sourceRoot":"","sources":["../../../../src/composables/internal/useAffinoDataGrid/useAffinoDataGridSelectionFeature.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AACtE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAA;AAExE,MAAM,WAAW,2BAA2B,CAAC,IAAI;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sBAAsB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1C,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACrD;AAED,MAAM,WAAW,gCAAgC,CAAC,IAAI;IACpD,OAAO,EAAE,OAAO,CAAA;IAChB,sBAAsB,EAAE,SAAS,MAAM,EAAE,CAAA;IACzC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACrD;AAED,MAAM,WAAW,wCAAwC,CAAC,IAAI;IAC5D,IAAI,EAAE,GAAG,CAAC,SAAS,IAAI,EAAE,CAAC,CAAA;IAC1B,OAAO,EAAE,wBAAwB,CAAC,IAAI,CAAC,CAAA;IACvC,OAAO,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAA;IAC/C,qBAAqB,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC3D,yBAAyB,EAAE,GAAG,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CACjE;AAED,MAAM,WAAW,uCAAuC,CAAC,IAAI;IAC3D,gBAAgB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC9B,iBAAiB,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;IACnC,eAAe,EAAE,WAAW,CAAC,SAAS,MAAM,EAAE,CAAC,CAAA;IAC/C,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IAClC,aAAa,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACnD,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAA;IAC5C,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC7D,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,aAAa,EAAE,MAAM,MAAM,CAAA;IAC3B,mBAAmB,EAAE,MAAM,SAAS,IAAI,EAAE,CAAA;IAC1C,iBAAiB,EAAE,WAAW,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CACjE;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAC5C,KAAK,EAAE,OAAO,GAAG,2BAA2B,CAAC,IAAI,CAAC,GAAG,SAAS,GAC7D,gCAAgC,CAAC,IAAI,CAAC,CAkBxC;AAED,wBAAgB,iCAAiC,CAAC,IAAI,EACpD,OAAO,EAAE,wCAAwC,CAAC,IAAI,CAAC,GACtD,uCAAuC,CAAC,IAAI,CAAC,CAkL/C"}