vastgrid 0.1.1 → 0.2.0

package/README.md

@@ -1,25 +1,187 @@
 # vastgrid
 
-A canvas data grid for React that opens CSV, TSV, Parquet and JSON Lines files of any size —
-gigabytes, hundreds of millions of rows — and works like a spreadsheet: range selection and Excel's
-keyboard shortcuts, copy, multi-column sort, filters, search, column statistics and a selection summary.
+A canvas data grid for React that opens tables of any size like a spreadsheet: huge CSV, TSV, Parquet, JSON Lines
+and Excel files, read a block of rows at a time as you scroll. People sort, filter, group, pivot, find, format,
+edit, undo and export; engines in the browser or on Node.js do the work, and save edited CSV and TSV files with
+every byte that was not edited kept as it is.
+
+**[Demo](https://vastgrid.yhay81.com/demo/)** · [Open a file](https://vastgrid.yhay81.com/open/) ·
+[Documentation](https://vastgrid.yhay81.com) · [GitHub](https://github.com/yhay81/vastgrid)
+
+[![A Parquet file of 100,000,000 rows sorted by price, with a selection and its sum in the status bar](https://raw.githubusercontent.com/yhay81/vastgrid/main/docs/images/grid.jpg)](https://vastgrid.yhay81.com/demo/)
+
+## Install
 
 ```sh
-npm install vastgrid
+npm install vastgrid vastgrid-js
 ```
 
+`vastgrid` needs React 19.3 or later and a browser with CSS `light-dark()` (Chrome and Edge 123, Firefox 120,
+Safari 17.5 or later). React is an optional peer dependency: `vastgrid/core` runs on servers and in workers without
+it.
+
+## Quick start
+
 ```tsx
-import { ArraySource, DataGrid, RemoteSource } from "vastgrid";
+import { DataGrid, localTransport } from "vastgrid";
 import "vastgrid/styles.css";
+import { memoryEngine } from "vastgrid-js";
 
-// Files served by vastgrid-duckdb (Node.js + DuckDB):
-const source = new RemoteSource({ endpoint: "/api/table", ref: "sales.parquet" });
-// …or data already in memory:
-// const source = new ArraySource({ columns: ["name", "age"], rows: [["Ada", 36]] });
+const transport = localTransport(
+  memoryEngine({
+    tables: {
+      orders: {
+        columns: [
+          { name: "id", type: "integer" },
+          { name: "customer", type: "string" },
+          { name: "price", type: "decimal", precision: 10, scale: 2 },
+        ],
+        rows: [
+          [1, "Acme", "12.50"],
+          [2, "Globex", "8.00"],
+        ],
+        editable: true,
+      },
+    },
+  }),
+);
 
-<div style={{ height: 600 }}>
-  <DataGrid source={source} />
-</div>;
+export function Orders() {
+  return <DataGrid transport={transport} table="orders" style={{ height: 480 }} />;
+}
 ```
 
-Documentation and a live demo: https://vastgrid.yhay81.com
+The grid fills the height you give it. Rows are typed JSON (decimals as strings with their exact digits, dates as
+`YYYY-MM-DD`); the memory engine also opens Arrow, CSV, TSV, JSON Lines, Excel and Parquet files
+([vastgrid-js](https://www.npmjs.com/package/vastgrid-js)).
+
+## Entry points
+
+| Entry | Holds | Imports React |
+| --- | --- | --- |
+| `vastgrid` | `DataGrid`, `GridProvider`, the hooks, and everything of `vastgrid/core` | yes (`"use client"`) |
+| `vastgrid/core` | `createGridStore` and `GridStore`, and the transports | no |
+| `vastgrid/server` | `readInitialView`: the first rows, read on a server for `initial` | no |
+| `vastgrid/styles.css` | the styles, themed by CSS custom properties on `.vg-root` | — |
+
+## Engines and transports
+
+A transport carries the grid's messages to an engine; a new transport or table makes a new store.
+
+| Transport | Engine |
+| --- | --- |
+| `localTransport(engine)` | in the same thread, such as `memoryEngine` of `vastgrid-js` |
+| `workerTransport(worker)` | in a Web Worker that calls `serveEngine(engine, self)`, or behind anything that carries messages as a worker does (a `MessagePort`, a webview) |
+| `httpTransport(url, { events })` | on a server, such as `createHttpHandler` of [`vastgrid-duckdb`](https://www.npmjs.com/package/vastgrid-duckdb) |
+| `serverFunctionTransport(action)` | behind a React Server Function |
+
+```tsx
+import { DataGrid, httpTransport, workerTransport } from "vastgrid";
+
+// The memory engine in a Web Worker: the page never stops while it sorts a million rows.
+const worker = new Worker(new URL("./engine.worker.ts", import.meta.url), { type: "module" });
+const inWorker = workerTransport(worker);
+
+// The DuckDB engine on a Node.js server, with its events.
+const onServer = httpTransport("/api", { events: "/api/events" });
+
+export function Sales() {
+  return <DataGrid transport={onServer} table="sales.parquet" style={{ height: 600 }} />;
+}
+```
+
+```ts
+// engine.worker.ts
+import { serveEngine, type WorkerLike } from "vastgrid/core";
+import { memoryEngine } from "vastgrid-js";
+
+const engine = memoryEngine({ tables: { trips: { parquet: "https://example.com/trips.parquet" } } });
+serveEngine(engine, self as unknown as WorkerLike);
+```
+
+## `DataGrid`
+
+| Prop | Meaning |
+| --- | --- |
+| `transport`, `table`, `open` | where the rows come from: a transport, the table to open, and how to read it (a workbook's `sheet`) |
+| `store` | a store made outside (`useCreateGridStore`), instead of `transport` and `table` |
+| `document`, `defaultDocument`, `onDocumentChange` | the view and its columns: plan, widths, pins, formats, totals; controlled or not |
+| `session`, `defaultSession`, `onSessionChange` | where the person is: selection, scroll, checked rows, the undo history |
+| `initial` | rows read on a server (`readInitialView`), or a promise of them, shown before the first read |
+| `toolbar`, `statusBar` | the built-in toolbar (search, Conditions, Group, Columns, Formulas, Export, Save) and status bar |
+| `checkboxes` | a check box for each row, kept on the same records through sorts and filters |
+| `columnGroups`, `groupHeaderHeight` | header rows of groups of columns |
+| `wrapLines` | the lines of a row while a column wraps its text |
+| `cellText`, `cellStyle`, `drawCell`, `cellAction`, `onCellAction` | the text, colors, drawing and actions (links, buttons) of cells |
+| `detailPanel` | your own content of the detail panel of the active row |
+| `rowHeight`, `headerHeight` | sizes in CSS pixels |
+| `locale`, `messages` | the language of the UI (English and Japanese built in) and any of its texts |
+| `onError` | failures that belong to no command |
+| `ref` | `{ store, dispatch, focus }` |
+| `className`, `style`, `aria-label` | on the root element |
+
+## Hooks and commands
+
+Every change is a typed command (`GridCommand`), which the grid's keys and menus dispatch as your code does.
+
+| Hook | Gives |
+| --- | --- |
+| `useGridSelector(selector, isEqual?)` | a part of the store's immutable snapshot; renders again only when it changes |
+| `useGridDispatch()` | `dispatch`, for commands such as `{ command: "sort.set", keys: [{ column: "price", direction: "desc" }] }` |
+| `useGridRows({ start, end, columns })` | values of rows of the view, for cells that React renders |
+| `useCreateGridStore(options)`, `GridProvider` | a store of your own, shared by the grid and your controls |
+| `useGridStore()` | the store of the nearest grid or provider |
+
+```tsx
+import { DataGrid, GridProvider, useCreateGridStore, useGridDispatch, useGridSelector } from "vastgrid";
+
+function Workbench() {
+  const store = useCreateGridStore({ transport, table: "orders" });
+  return (
+    <GridProvider store={store}>
+      <ClearSort />
+      <DataGrid store={store} style={{ height: 480 }} />
+    </GridProvider>
+  );
+}
+
+function ClearSort() {
+  const sort = useGridSelector((snapshot) => snapshot.document.plan?.sort);
+  const dispatch = useGridDispatch();
+  return (
+    <button type="button" disabled={!sort} onClick={() => dispatch({ command: "sort.clear" })}>
+      Clear sort
+    </button>
+  );
+}
+```
+
+## How it renders
+
+Scrolling, drawing and dragging a selection run in the store and the canvas and render no React; moving the active
+cell commits once and renders only what reads the session. The rows on screen are also accessible rows of the ARIA
+grid pattern under the canvas. Every component and hook compiles with React Compiler 1.0, and the package ships
+compiled. On a server, `DataGrid` renders the first rows of `initial` as an HTML table, streamed when it is a
+promise, and the canvas takes over in the browser.
+
+When the engine shows a sort's first rows while the rest builds (the DuckDB engine on a million rows or more), the
+status bar says it is reading and the row count stays exact; changing the plan or disconnecting cancels old reads,
+so that late answers never replace the current view.
+
+## Documentation
+
+- [docs/react.md](https://github.com/yhay81/vastgrid/blob/main/docs/react.md): the store, the transports,
+  `DataGrid`, the hooks, rendering, theming and server rendering.
+- [docs/spec.md](https://github.com/yhay81/vastgrid/blob/main/docs/spec.md): the document and session (§5),
+  the commands (§6), editing and saving (§7) and the messages (§8).
+- [Where vastgrid opens files](https://vastgrid.yhay81.com/apps/overview/): the same grid in the command line,
+  VS Code, an MCP App and a notebook.
+- [docs/migrating-from-0.1.md](https://github.com/yhay81/vastgrid/blob/main/docs/migrating-from-0.1.md): from vastgrid 0.1.x.
+
+The tests run on the sources (`npm test`); the end-to-end tests run the bench of
+[`examples/bench`](https://github.com/yhay81/vastgrid/tree/main/examples/bench) in Chromium against the build
+(`npm run build && npm run e2e`).
+
+## License
+
+MIT

package/dist/canvas/geometry.d.ts

@@ -0,0 +1,92 @@
+import { ColumnLayout } from "./layout.js";
+import { ScrollAxis } from "./scroll.js";
+/** The width of the check boxes at the left of the gutter (§5.2.1 of the specification). */
+export declare const CHECK_WIDTH = 24;
+/** The width of the button at the right of a header that opens the column menu. */
+export declare const MENU_WIDTH = 16;
+/** What is under a point of the grid. */
+export interface Hit {
+    area: "cell" | "header" | "group" | "gutter" | "corner" | "none";
+    /** A view position, for cells and the gutter; clamped to the rows. */
+    row: number;
+    /** A display position, for cells and headers. */
+    column: number;
+    /** Within a few pixels of the right edge of a header, where dragging resizes the column. */
+    edge: boolean;
+    /** On the button of a header that opens the column menu. */
+    menu: boolean;
+    /** On the check box of a row (the gutter) or of every row (the corner). */
+    check?: boolean;
+    /** For a group header: its row of groups, from the top. */
+    level?: number;
+}
+/**
+ * Where the parts of the grid are on the canvas (§6 of react.md): the rows of groups and the column names at the
+ * top, the gutter at the left, the rows, the totals row at the bottom, and the columns pinned at each side with those
+ * that scroll between them. The canvas lays it out and draws with it; React places what it puts over the canvas
+ * with it.
+ */
+export declare class Geometry {
+    readonly scrollX: ScrollAxis;
+    readonly scrollY: ScrollAxis;
+    width: number;
+    height: number;
+    rowHeight: number;
+    headerHeight: number;
+    /** The height of the row of column names; `headerHeight` adds the rows of groups above it. */
+    nameHeight: number;
+    groupHeight: number;
+    /** Rows of groups above the column names. */
+    groupRows: number;
+    /** By display position: its group in each row of groups (an id and a name), or null. */
+    groupPaths: ({
+        id: number;
+        name: string;
+    } | null)[][];
+    gutterWidth: number;
+    /** Whether the gutter has a check box for each row. */
+    checkboxes: boolean;
+    /** The height of the totals row at the bottom (§5.1 of the specification), 0 without totals. */
+    footer: number;
+    /** The rows of the view on screen. */
+    rowCount: number;
+    /** The widths of the displayed columns, by display position. */
+    layout: ColumnLayout;
+    /** How many displayed columns are pinned at the left and at the right. */
+    frozenLeft: number;
+    frozenRight: number;
+    /** The top of the row of column names: the rows of groups are above it. */
+    get groupTop(): number;
+    /** The first row on screen. */
+    topRow(): number;
+    /** Rows on screen `[first, last)`. */
+    visibleRows(): [number, number];
+    /** The bottom of the rows: the top of the totals row. */
+    get bottom(): number;
+    get frozenWidth(): number;
+    get rightStart(): number;
+    get frozenRightWidth(): number;
+    /** Display positions `[first, last]` of the scrolling columns on screen, or `[0, -1]`. */
+    visibleScrollColumns(): [number, number];
+    /** The x of a displayed column's left edge on the canvas. */
+    columnX(column: number): number;
+    rowY(row: number): number;
+    /** The width of a displayed column. */
+    columnWidth(column: number): number;
+    /**
+     * Where a cell is, in the body's coordinates, and whether it is on screen: outside the header and the gutter,
+     * and for a scrolling column, between the columns pinned at each side.
+     */
+    cellBox(row: number, column: number): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        shown: boolean;
+    };
+    /** What is at a point given in the scroller's client coordinates. */
+    hit(x: number, y: number): Hit;
+    /** The display position of the column at an x of the canvas; -1 when there is none. */
+    columnAt(x: number): number;
+}
+//# sourceMappingURL=geometry.d.ts.map

package/dist/canvas/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/canvas/geometry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,4FAA4F;AAC5F,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,mFAAmF;AACnF,eAAO,MAAM,UAAU,KAAK,CAAC;AAE7B,yCAAyC;AACzC,MAAM,WAAW,GAAG;IAClB,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACjE,sEAAsE;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,MAAM,EAAE,MAAM,CAAC;IACf,4FAA4F;IAC5F,IAAI,EAAE,OAAO,CAAC;IACd,4DAA4D;IAC5D,IAAI,EAAE,OAAO,CAAC;IACd,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,qBAAa,QAAQ;IACnB,QAAQ,CAAC,OAAO,aAAoB;IACpC,QAAQ,CAAC,OAAO,aAAoB;IACpC,KAAK,SAAK;IACV,MAAM,SAAK;IACX,SAAS,SAAM;IACf,YAAY,SAAM;IAClB,8FAA8F;IAC9F,UAAU,SAAM;IAChB,WAAW,SAAM;IACjB,6CAA6C;IAC7C,SAAS,SAAK;IACd,wFAAwF;IACxF,UAAU,EAAE,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,EAAE,EAAE,CAAM;IAC3D,WAAW,SAAM;IACjB,uDAAuD;IACvD,UAAU,UAAS;IACnB,gGAAgG;IAChG,MAAM,SAAK;IACX,sCAAsC;IACtC,QAAQ,SAAK;IACb,gEAAgE;IAChE,MAAM,eAAwB;IAC9B,0EAA0E;IAC1E,UAAU,SAAK;IACf,WAAW,SAAK;IAEhB,2EAA2E;IAC3E,IAAI,QAAQ,WAEX;IAED,+BAA+B;IAC/B,MAAM,WAEL;IAED,sCAAsC;IACtC,WAAW,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAM9B;IAED,yDAAyD;IACzD,IAAI,MAAM,WAET;IAED,IAAI,WAAW,WAEd;IAED,IAAI,UAAU,WAEb;IAED,IAAI,gBAAgB,WAEnB;IAED,0FAA0F;IAC1F,oBAAoB,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAYvC;IAED,6DAA6D;IAC7D,OAAO,CAAC,MAAM,EAAE,MAAM,UAMrB;IAED,IAAI,CAAC,GAAG,EAAE,MAAM,UAEf;IAED,uCAAuC;IACvC,WAAW,CAAC,MAAM,EAAE,MAAM,UAEzB;IAED;;;OAGG;IACH,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAUjH;IAED,qEAAqE;IACrE,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,CAsC7B;IAED,uFAAuF;IACvF,QAAQ,CAAC,CAAC,EAAE,MAAM,UAUjB;CACF"}

package/dist/canvas/geometry.js

@@ -0,0 +1,197 @@
+import { ColumnLayout } from "./layout.js";
+import { ScrollAxis } from "./scroll.js";
+
+/** The width of the check boxes at the left of the gutter (§5.2.1 of the specification). */
+export const CHECK_WIDTH = 24;
+/** The width of the button at the right of a header that opens the column menu. */
+export const MENU_WIDTH = 16;
+
+/** What is under a point of the grid. */
+
+/**
+ * Where the parts of the grid are on the canvas (§6 of react.md): the rows of groups and the column names at the
+ * top, the gutter at the left, the rows, the totals row at the bottom, and the columns pinned at each side with those
+ * that scroll between them. The canvas lays it out and draws with it; React places what it puts over the canvas
+ * with it.
+ */
+export class Geometry {
+  scrollX = new ScrollAxis();
+  scrollY = new ScrollAxis();
+  width = 0;
+  height = 0;
+  rowHeight = 24;
+  headerHeight = 32;
+  /** The height of the row of column names; `headerHeight` adds the rows of groups above it. */
+  nameHeight = 32;
+  groupHeight = 24;
+  /** Rows of groups above the column names. */
+  groupRows = 0;
+  /** By display position: its group in each row of groups (an id and a name), or null. */
+  groupPaths = [];
+  gutterWidth = 48;
+  /** Whether the gutter has a check box for each row. */
+  checkboxes = false;
+  /** The height of the totals row at the bottom (§5.1 of the specification), 0 without totals. */
+  footer = 0;
+  /** The rows of the view on screen. */
+  rowCount = 0;
+  /** The widths of the displayed columns, by display position. */
+  layout = new ColumnLayout([]);
+  /** How many displayed columns are pinned at the left and at the right. */
+  frozenLeft = 0;
+  frozenRight = 0;
+
+  /** The top of the row of column names: the rows of groups are above it. */
+  get groupTop() {
+    return this.groupRows * this.groupHeight;
+  }
+
+  /** The first row on screen. */
+  topRow() {
+    return Math.max(0, Math.floor(this.scrollY.position / this.rowHeight));
+  }
+
+  /** Rows on screen `[first, last)`. */
+  visibleRows() {
+    const rowCount = this.rowCount;
+    const body = Math.max(0, this.bottom - this.headerHeight);
+    const first = Math.min(rowCount, this.topRow());
+    const last = Math.min(rowCount, Math.ceil((this.scrollY.position + body) / this.rowHeight));
+    return [first, Math.max(first, last)];
+  }
+
+  /** The bottom of the rows: the top of the totals row. */
+  get bottom() {
+    return this.height - this.footer;
+  }
+  get frozenWidth() {
+    return this.layout.left(this.frozenLeft);
+  }
+  get rightStart() {
+    return this.layout.count - this.frozenRight;
+  }
+  get frozenRightWidth() {
+    return this.layout.total - this.layout.left(this.rightStart);
+  }
+
+  /** Display positions `[first, last]` of the scrolling columns on screen, or `[0, -1]`. */
+  visibleScrollColumns() {
+    const rightStart = this.rightStart;
+    if (rightStart <= this.frozenLeft) return [0, -1];
+    const start = this.frozenWidth + this.scrollX.position;
+    const end = Math.min(this.scrollX.position + this.width - this.gutterWidth - this.frozenRightWidth, this.layout.left(rightStart));
+    if (start >= this.layout.left(rightStart) || end <= start) return [0, -1];
+    const first = Math.max(this.frozenLeft, this.layout.indexAt(start));
+    const last = Math.min(rightStart - 1, this.layout.indexAt(Math.max(start, end - 0.001)));
+    return [first, last];
+  }
+
+  /** The x of a displayed column's left edge on the canvas. */
+  columnX(column) {
+    if (column < this.frozenLeft) return this.gutterWidth + this.layout.left(column);
+    if (column >= this.rightStart) {
+      return this.width - this.frozenRightWidth + this.layout.left(column) - this.layout.left(this.rightStart);
+    }
+    return this.gutterWidth + this.layout.left(column) - this.scrollX.position;
+  }
+  rowY(row) {
+    return this.headerHeight + row * this.rowHeight - this.scrollY.position;
+  }
+
+  /** The width of a displayed column. */
+  columnWidth(column) {
+    return this.layout.width(column);
+  }
+
+  /**
+   * Where a cell is, in the body's coordinates, and whether it is on screen: outside the header and the gutter,
+   * and for a scrolling column, between the columns pinned at each side.
+   */
+  cellBox(row, column) {
+    const left = this.columnX(column);
+    const top = this.rowY(row);
+    const width = this.layout.width(column);
+    const height = this.rowHeight;
+    const scrolls = column >= this.frozenLeft && column < this.rightStart;
+    const from = scrolls ? this.gutterWidth + this.frozenWidth : this.gutterWidth;
+    const to = scrolls ? this.width - this.frozenRightWidth : this.width;
+    const shown = top + height > this.headerHeight && top < this.bottom && left + width > from && left < to;
+    return {
+      left,
+      top,
+      width,
+      height,
+      shown
+    };
+  }
+
+  /** What is at a point given in the scroller's client coordinates. */
+  hit(x, y) {
+    const rowCount = this.rowCount;
+    const none = {
+      area: "none",
+      row: 0,
+      column: 0,
+      edge: false,
+      menu: false
+    };
+    if (x < 0 || y < 0 || x > this.width || y > this.height || y >= this.bottom) return none;
+    const row = Math.max(0, Math.min(rowCount - 1, Math.floor((y - this.headerHeight + this.scrollY.position) / this.rowHeight)));
+    if (x < this.gutterWidth) {
+      return {
+        area: y < this.headerHeight ? "corner" : "gutter",
+        row,
+        column: 0,
+        edge: false,
+        menu: false,
+        check: this.checkboxes && x < CHECK_WIDTH
+      };
+    }
+    const column = this.columnAt(x);
+    if (column < 0) return none;
+    const right = this.columnX(column) + this.layout.width(column);
+    const edge = Math.abs(x - right) <= 4;
+    if (y < this.groupTop) {
+      const level = Math.floor(y / this.groupHeight);
+      return {
+        area: this.groupPaths[column]?.[level] ? "group" : "none",
+        row: 0,
+        column,
+        edge: false,
+        menu: false,
+        level
+      };
+    }
+    if (y < this.headerHeight) {
+      return {
+        area: "header",
+        row: 0,
+        column,
+        edge,
+        menu: !edge && x >= right - MENU_WIDTH - 4
+      };
+    }
+    if (rowCount === 0 || y - this.headerHeight + this.scrollY.position >= rowCount * this.rowHeight) return none;
+    return {
+      area: "cell",
+      row,
+      column,
+      edge: false,
+      menu: false
+    };
+  }
+
+  /** The display position of the column at an x of the canvas; -1 when there is none. */
+  columnAt(x) {
+    if (this.layout.count === 0) return -1;
+    const rightX = this.width - this.frozenRightWidth;
+    if (this.frozenRight > 0 && x >= rightX) {
+      return Math.max(this.rightStart, this.layout.indexAt(this.layout.left(this.rightStart) + x - rightX));
+    }
+    const local = x - this.gutterWidth;
+    if (this.frozenLeft > 0 && local < this.frozenWidth) return this.layout.indexAt(local);
+    const column = this.layout.indexAt(local + this.scrollX.position);
+    return Math.min(column, this.rightStart - 1);
+  }
+}
+//# sourceMappingURL=geometry.js.map

package/dist/canvas/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ColumnLayout","ScrollAxis","CHECK_WIDTH","MENU_WIDTH","Geometry","scrollX","scrollY","width","height","rowHeight","headerHeight","nameHeight","groupHeight","groupRows","groupPaths","gutterWidth","checkboxes","footer","rowCount","layout","frozenLeft","frozenRight","groupTop","topRow","Math","max","floor","position","visibleRows","body","bottom","first","min","last","ceil","frozenWidth","left","rightStart","count","frozenRightWidth","total","visibleScrollColumns","start","end","indexAt","columnX","column","rowY","row","columnWidth","cellBox","top","scrolls","from","to","shown","hit","x","y","none","area","edge","menu","check","columnAt","right","abs","level","rightX","local"],"sources":["geometry.ts"],"sourcesContent":["import { ColumnLayout } from \"./layout.js\";\nimport { ScrollAxis } from \"./scroll.js\";\n\n/** The width of the check boxes at the left of the gutter (§5.2.1 of the specification). */\nexport const CHECK_WIDTH = 24;\n/** The width of the button at the right of a header that opens the column menu. */\nexport const MENU_WIDTH = 16;\n\n/** What is under a point of the grid. */\nexport interface Hit {\n  area: \"cell\" | \"header\" | \"group\" | \"gutter\" | \"corner\" | \"none\";\n  /** A view position, for cells and the gutter; clamped to the rows. */\n  row: number;\n  /** A display position, for cells and headers. */\n  column: number;\n  /** Within a few pixels of the right edge of a header, where dragging resizes the column. */\n  edge: boolean;\n  /** On the button of a header that opens the column menu. */\n  menu: boolean;\n  /** On the check box of a row (the gutter) or of every row (the corner). */\n  check?: boolean;\n  /** For a group header: its row of groups, from the top. */\n  level?: number;\n}\n\n/**\n * Where the parts of the grid are on the canvas (§6 of react.md): the rows of groups and the column names at the\n * top, the gutter at the left, the rows, the totals row at the bottom, and the columns pinned at each side with those\n * that scroll between them. The canvas lays it out and draws with it; React places what it puts over the canvas\n * with it.\n */\nexport class Geometry {\n  readonly scrollX = new ScrollAxis();\n  readonly scrollY = new ScrollAxis();\n  width = 0;\n  height = 0;\n  rowHeight = 24;\n  headerHeight = 32;\n  /** The height of the row of column names; `headerHeight` adds the rows of groups above it. */\n  nameHeight = 32;\n  groupHeight = 24;\n  /** Rows of groups above the column names. */\n  groupRows = 0;\n  /** By display position: its group in each row of groups (an id and a name), or null. */\n  groupPaths: ({ id: number; name: string } | null)[][] = [];\n  gutterWidth = 48;\n  /** Whether the gutter has a check box for each row. */\n  checkboxes = false;\n  /** The height of the totals row at the bottom (§5.1 of the specification), 0 without totals. */\n  footer = 0;\n  /** The rows of the view on screen. */\n  rowCount = 0;\n  /** The widths of the displayed columns, by display position. */\n  layout = new ColumnLayout([]);\n  /** How many displayed columns are pinned at the left and at the right. */\n  frozenLeft = 0;\n  frozenRight = 0;\n\n  /** The top of the row of column names: the rows of groups are above it. */\n  get groupTop() {\n    return this.groupRows * this.groupHeight;\n  }\n\n  /** The first row on screen. */\n  topRow() {\n    return Math.max(0, Math.floor(this.scrollY.position / this.rowHeight));\n  }\n\n  /** Rows on screen `[first, last)`. */\n  visibleRows(): [number, number] {\n    const rowCount = this.rowCount;\n    const body = Math.max(0, this.bottom - this.headerHeight);\n    const first = Math.min(rowCount, this.topRow());\n    const last = Math.min(rowCount, Math.ceil((this.scrollY.position + body) / this.rowHeight));\n    return [first, Math.max(first, last)];\n  }\n\n  /** The bottom of the rows: the top of the totals row. */\n  get bottom() {\n    return this.height - this.footer;\n  }\n\n  get frozenWidth() {\n    return this.layout.left(this.frozenLeft);\n  }\n\n  get rightStart() {\n    return this.layout.count - this.frozenRight;\n  }\n\n  get frozenRightWidth() {\n    return this.layout.total - this.layout.left(this.rightStart);\n  }\n\n  /** Display positions `[first, last]` of the scrolling columns on screen, or `[0, -1]`. */\n  visibleScrollColumns(): [number, number] {\n    const rightStart = this.rightStart;\n    if (rightStart <= this.frozenLeft) return [0, -1];\n    const start = this.frozenWidth + this.scrollX.position;\n    const end = Math.min(\n      this.scrollX.position + this.width - this.gutterWidth - this.frozenRightWidth,\n      this.layout.left(rightStart),\n    );\n    if (start >= this.layout.left(rightStart) || end <= start) return [0, -1];\n    const first = Math.max(this.frozenLeft, this.layout.indexAt(start));\n    const last = Math.min(rightStart - 1, this.layout.indexAt(Math.max(start, end - 0.001)));\n    return [first, last];\n  }\n\n  /** The x of a displayed column's left edge on the canvas. */\n  columnX(column: number) {\n    if (column < this.frozenLeft) return this.gutterWidth + this.layout.left(column);\n    if (column >= this.rightStart) {\n      return this.width - this.frozenRightWidth + this.layout.left(column) - this.layout.left(this.rightStart);\n    }\n    return this.gutterWidth + this.layout.left(column) - this.scrollX.position;\n  }\n\n  rowY(row: number) {\n    return this.headerHeight + row * this.rowHeight - this.scrollY.position;\n  }\n\n  /** The width of a displayed column. */\n  columnWidth(column: number) {\n    return this.layout.width(column);\n  }\n\n  /**\n   * Where a cell is, in the body's coordinates, and whether it is on screen: outside the header and the gutter,\n   * and for a scrolling column, between the columns pinned at each side.\n   */\n  cellBox(row: number, column: number): { left: number; top: number; width: number; height: number; shown: boolean } {\n    const left = this.columnX(column);\n    const top = this.rowY(row);\n    const width = this.layout.width(column);\n    const height = this.rowHeight;\n    const scrolls = column >= this.frozenLeft && column < this.rightStart;\n    const from = scrolls ? this.gutterWidth + this.frozenWidth : this.gutterWidth;\n    const to = scrolls ? this.width - this.frozenRightWidth : this.width;\n    const shown = top + height > this.headerHeight && top < this.bottom && left + width > from && left < to;\n    return { left, top, width, height, shown };\n  }\n\n  /** What is at a point given in the scroller's client coordinates. */\n  hit(x: number, y: number): Hit {\n    const rowCount = this.rowCount;\n    const none: Hit = { area: \"none\", row: 0, column: 0, edge: false, menu: false };\n    if (x < 0 || y < 0 || x > this.width || y > this.height || y >= this.bottom) return none;\n    const row = Math.max(\n      0,\n      Math.min(rowCount - 1, Math.floor((y - this.headerHeight + this.scrollY.position) / this.rowHeight)),\n    );\n    if (x < this.gutterWidth) {\n      return {\n        area: y < this.headerHeight ? \"corner\" : \"gutter\",\n        row,\n        column: 0,\n        edge: false,\n        menu: false,\n        check: this.checkboxes && x < CHECK_WIDTH,\n      };\n    }\n    const column = this.columnAt(x);\n    if (column < 0) return none;\n    const right = this.columnX(column) + this.layout.width(column);\n    const edge = Math.abs(x - right) <= 4;\n    if (y < this.groupTop) {\n      const level = Math.floor(y / this.groupHeight);\n      return {\n        area: this.groupPaths[column]?.[level] ? \"group\" : \"none\",\n        row: 0,\n        column,\n        edge: false,\n        menu: false,\n        level,\n      };\n    }\n    if (y < this.headerHeight) {\n      return { area: \"header\", row: 0, column, edge, menu: !edge && x >= right - MENU_WIDTH - 4 };\n    }\n    if (rowCount === 0 || y - this.headerHeight + this.scrollY.position >= rowCount * this.rowHeight) return none;\n    return { area: \"cell\", row, column, edge: false, menu: false };\n  }\n\n  /** The display position of the column at an x of the canvas; -1 when there is none. */\n  columnAt(x: number) {\n    if (this.layout.count === 0) return -1;\n    const rightX = this.width - this.frozenRightWidth;\n    if (this.frozenRight > 0 && x >= rightX) {\n      return Math.max(this.rightStart, this.layout.indexAt(this.layout.left(this.rightStart) + x - rightX));\n    }\n    const local = x - this.gutterWidth;\n    if (this.frozenLeft > 0 && local < this.frozenWidth) return this.layout.indexAt(local);\n    const column = this.layout.indexAt(local + this.scrollX.position);\n    return Math.min(column, this.rightStart - 1);\n  }\n}\n"],"mappings":"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","ignoreList":[]}