@svgrid/grid 3.0.3 → 4.0.0

package/src/build-api.ts

@@ -26,6 +26,44 @@ import {
   columnDefMatchesId,
 } from "./cell-values";
 import { hasAdvancedFilterEngine } from "./advanced-filter.svelte";
+import { undoHistory, redoHistory } from "./history";
+import { buildCommandContext } from "./command-context";
+
+type OrientedRange = {
+  from: { row: number; col: number }
+  to: { row: number; col: number }
+  highlight: { row: number; col: number }
+}
+
+/**
+ * The selection as the user made it: committed ranges first, the active one
+ * last, each keeping its anchor as `from` and its focus as `to`. The active
+ * cell is the highlight of the range it sits in and of no other, which is
+ * how Handsontable reports it and what a range-aware paste needs to know.
+ */
+function selectedRanges(ctx: any): OrientedRange[] {
+  type Point = { rowIndex: number; colIndex: number } | null
+  type Range = { anchor: Point; focus: Point }
+  const committed: Range[] = ctx.selectionRanges ?? []
+  const active: Range = ctx.selectionRange ?? { anchor: null, focus: null }
+  const cursor = ctx.grid.getState().activeCell as Point
+  const toRange = (r: Range): OrientedRange | null => {
+    if (!r.anchor || !r.focus) return null
+    const from = { row: r.anchor.rowIndex, col: r.anchor.colIndex }
+    const to = { row: r.focus.rowIndex, col: r.focus.colIndex }
+    const inside =
+      cursor &&
+      cursor.rowIndex >= Math.min(from.row, to.row) && cursor.rowIndex <= Math.max(from.row, to.row) &&
+      cursor.colIndex >= Math.min(from.col, to.col) && cursor.colIndex <= Math.max(from.col, to.col)
+    const highlight = inside ? { row: cursor!.rowIndex, col: cursor!.colIndex } : from
+    return { from, to, highlight }
+  }
+  const out: OrientedRange[] = []
+  for (const r of committed) { const o = toRange(r); if (o) out.push(o) }
+  const last = toRange(active)
+  if (last) out.push(last)
+  return out
+}
 
 export function createGridApi<
   TFeatures extends TableFeatures = TableFeatures,
@@ -129,12 +167,28 @@ export function createGridApi<
         ctx.setActiveCell(active.anchor.rowIndex, active.anchor.colIndex);
       },
       getSelected() {
+        // Rectangles only. With cell selection off none is ever recorded and
+        // this stays [], which is how `selectable={false}` is observable from
+        // the API; the focused cell is `getActiveCell()`, not a selection.
         return ctx
           .getSelectionRects()
           .map((r: { minRow: number; minCol: number; maxRow: number; maxCol: number }) =>
             [r.minRow, r.minCol, r.maxRow, r.maxCol] as [number, number, number, number],
           );
       },
+      getSelectedLast() {
+        const all = selectedRanges(ctx);
+        const last = all[all.length - 1];
+        return last ? [last.from.row, last.from.col, last.to.row, last.to.col] : undefined;
+      },
+      getSelectedRange() {
+        const all = selectedRanges(ctx);
+        return all.length ? all : undefined;
+      },
+      getSelectedRangeLast() {
+        const all = selectedRanges(ctx);
+        return all[all.length - 1];
+      },
       openChart() {
         ctx.chartPanelOpen = true;
       },
@@ -151,6 +205,21 @@ export function createGridApi<
       configureChart(config) {
         if (ctx.chartingEnabled) ctx.applyChartConfig(config);
       },
+      saveChart(name) {
+        if (ctx.chartingEnabled) ctx.saveChart(name);
+      },
+      applySavedChart(name) {
+        return ctx.chartingEnabled ? ctx.applySavedChart(name) : false;
+      },
+      removeSavedChart(name) {
+        if (ctx.chartingEnabled) ctx.removeSavedChart(name);
+      },
+      getSavedCharts() {
+        return ctx.chartingEnabled ? ctx.getSavedCharts() : [];
+      },
+      setChartExplainHandler(handler) {
+        ctx.chartExplainHandler = handler ?? null;
+      },
       setChartAiHandler(handler) {
         ctx.chartAiHandler = handler ?? null;
       },
@@ -351,6 +420,11 @@ export function createGridApi<
       clearFilter(columnId) {
         ctx.clearColumnFilter(columnId);
       },
+      openContextMenu(event, rowIndex, colIndex) {
+        const columnId = ctx.allColumns[colIndex]?.id;
+        if (columnId == null) return;
+        ctx.openContextMenu(event, rowIndex, colIndex, columnId);
+      },
       refreshEditorOptions(columnId) {
         // Async `editorOptions` are cached per column (or per column+row for a
         // per-row source) so opening an editor twice does not refetch. This
@@ -556,6 +630,30 @@ export function createGridApi<
       autosizeColumn(columnId: string) {
         ctx.autosizeColumn(columnId);
       },
+      getRowHeight(rowIndex: number) {
+        const own = ctx.rowResizeHeightPx(rowIndex);
+        if (own != null) return own;
+        const declared = ctx.props.rowHeight;
+        return typeof declared === "function" ? declared(rowIndex) : (declared ?? 30);
+      },
+      setRowHeight(rowIndex: number, height: number | null) {
+        ctx.setRowResizeHeight(rowIndex, height);
+      },
+      setColumnCollapsed(columnId: string, collapsed: boolean) {
+        ctx.setColumnCollapsed(columnId, collapsed);
+      },
+      isColumnCollapsed(columnId: string) {
+        return !!ctx.collapsedColumns[columnId];
+      },
+      setRowCollapsed(rowIndex: number, collapsed: boolean) {
+        ctx.setRowCollapsed(rowIndex, collapsed);
+      },
+      getMergedCells() {
+        return (ctx.props.mergedCells ?? []).map((m: { rowIndex: number; colIndex: number; rowSpan: number; colSpan: number }) => ({ ...m }));
+      },
+      isRowCollapsed(rowIndex: number) {
+        return ctx.isRowCollapsed(rowIndex);
+      },
       autosizeAllColumns() {
         ctx.autosizeAllColumns();
       },
@@ -598,24 +696,12 @@ export function createGridApi<
         ctx.grid.setExpanded(() => ({}));
       },
       // ---- Undo / redo (history + pointer)
-      undo() {
-        if (ctx.historyPtr < 0) return false
-        const step = ctx.history[ctx.historyPtr]
-        if (!step) return false
-        ctx.applyHistoryStep(step, 'undo')
-        ctx.historyPtr -= 1
-        ctx.historyVersion += 1
-        return true
-      },
-      redo() {
-        if (ctx.historyPtr >= ctx.history.length - 1) return false
-        const step = ctx.history[ctx.historyPtr + 1]
-        if (!step) return false
-        ctx.applyHistoryStep(step, 'redo')
-        ctx.historyPtr += 1
-        ctx.historyVersion += 1
-        return true
-      },
+      undo() { return undoHistory(ctx) },
+      redo() { return redoHistory(ctx) },
+      // Built fresh per call rather than memoized: it is a handful of getters
+      // over `ctx`, and a caller that holds one keeps reading live state
+      // anyway, so caching would only add a slot to keep in sync.
+      getCommandContext() { return buildCommandContext(ctx, false) },
       canUndo() { void ctx.historyVersion; return ctx.historyPtr >= 0 },
       canRedo() { void ctx.historyVersion; return ctx.historyPtr < ctx.history.length - 1 },
       clearHistory() { ctx.history = []; ctx.historyPtr = -1; ctx.historyVersion += 1 },
@@ -649,9 +735,10 @@ export function createGridApi<
         });
       },
       selectAllRows() {
-        const next: Record<string, boolean> = {};
-        for (const row of ctx.allRows) if (!isGroupRow(row)) next[row.id] = true;
-        ctx.grid.setRowSelection(() => next);
+        // One implementation of "select everything", shared with the header
+        // checkbox, so it knows about an external selection model and about
+        // rows whose data has not arrived.
+        ctx.setSelectAllRows(true);
       },
       toggleRowSelected(id) {
         ctx.toggleRowSelectionById(id);
@@ -659,7 +746,13 @@ export function createGridApi<
       // ---- Pagination
       getPageInfo() {
         const { pageIndex, pageSize } = ctx.paginationState;
-        const total = ctx.allRowsBeforePagination.length;
+        // Under external pagination the grid holds ONE page, so counting the
+        // rows in hand would report a 95-row table as a 20-row one. The
+        // consumer tells us the real total through rowCount, which is what
+        // the footer has always shown.
+        const total = ctx.externalPaginationEnabled
+          ? (ctx.props.rowCount ?? ctx.allRowsBeforePagination.length)
+          : ctx.allRowsBeforePagination.length;
         const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
         return { pageIndex, pageSize, pageCount, total };
       },
@@ -769,6 +862,8 @@ export function createGridApi<
                 },
                 charts: ctx.getChartsState(),
                 chartActive: ctx.activeChartIndex,
+                // Only when there is one, for the same snapshot-churn reason.
+                ...(ctx.savedCharts.length ? { savedCharts: ctx.getSavedCharts() } : {}),
               }
             : {}),
         };
@@ -818,6 +913,7 @@ export function createGridApi<
         if ("advancedFilter" in state) {
           ctx.advancedFilter = state.advancedFilter ?? null;
         }
+        if (Array.isArray(state.savedCharts) && ctx.chartingEnabled) ctx.applySavedCharts(state.savedCharts);
         if ((state.chart || state.charts) && ctx.chartingEnabled) {
           if (Array.isArray(state.charts) && state.charts.length) {
             ctx.applyChartsState(state.charts, state.chartActive);