flexdesk 0.16.1 → 0.17.1

package/src/ui/components/cell_paste.js

@@ -0,0 +1,243 @@
+/**
+ * cell_paste.js — STORY-0090. DataTable's PASTE (`pasteable: true`, with
+ * `staged`). INTERNAL to the table, like `cell_grid.js` and `fill_handle.js`:
+ * built by the cell grid, and reading the table through it.
+ *
+ * A block of tab-separated text (`tsv.js` `fromTSV`, what Excel and Google
+ * Sheets put on the clipboard) lands at the CURSOR cell and fills right, over
+ * the columns shown, and down, over the rows in the order shown. Each value is
+ * read by its column's editor's parse (`cell_editors.js`, or an injected
+ * editor's own `parse`), and every cell that reads is STAGED
+ * (`staged_edits.js`) as ONE undo entry.
+ *
+ *   - Columns past the last one shown are dropped, with a warning naming how
+ *     many.
+ *   - Rows past the last loaded row ask `onPasteOverrun({rows: n})` first:
+ *     anything but `true` (or a Promise of it) stages nothing; `true` stages
+ *     the rows that fit and hands the extra ones to `onRowsAppend`.
+ *   - A value that does not parse marks its cell (`twm-dt-cell--error`, the
+ *     message as `title` and `data-error`, the text kept in the cell, as an
+ *     editor's refusal is) and the rest of the block still stages.
+ *   - A cell `editable` refuses is skipped — nothing is staged in it — and
+ *     drawn `twm-dt-cell--paste-skipped` until the selection moves, the next
+ *     paste or fill, or new rows.
+ */
+
+import { fromTSV } from './tsv.js';
+import { CELL_EDITORS } from './cell_editors.js';
+
+const key = (rowIdx, colIdx) => `${rowIdx}:${colIdx}`;
+
+export class CellPaste {
+    /** @param {import('./cell_grid.js').CellGrid} grid */
+    constructor(grid) {
+        this.grid = grid;
+        /** `rowIdx:colIdx` of the cells the last paste skipped. */
+        this.skipped = new Set();
+        /** True while a paste waits for `onPasteOverrun` or `onRowsAppend`. */
+        this.busy = false;
+    }
+
+    // ── painting (called by the grid for every cell it paints) ───────────
+
+    paintCell(td, col) {
+        const rowIdx = td.parentNode?.__rowIndex;
+        td.classList.toggle('twm-dt-cell--paste-skipped', this.skipped.has(key(rowIdx, col)));
+    }
+
+    /** The selection moved, or new rows came: the skipped marks are over. */
+    clearMarks() {
+        this.skipped.clear();
+    }
+
+    // ── reading a value ──────────────────────────────────────────────────
+
+    /**
+     * The parse a column's pasted text is read with: an injected editor's
+     * own (`editors[k].parse`, looked up as the editor is), else the built-in
+     * editor's for the column's type, else the text as it is.
+     */
+    _parserFor(col) {
+        const g = this.grid;
+        const editors = g._cfg().editors;
+        if (editors && typeof editors === 'object') {
+            for (const k of [col, g._rawType(col), g._typeOf(col)]) {
+                const f = editors[k];
+                if (typeof f === 'function') {
+                    if (typeof f.parse === 'function') return f.parse;
+                    break;
+                }
+            }
+        }
+        const type = g._typeOf(col);
+        return Object.prototype.hasOwnProperty.call(CELL_EDITORS, type)
+            ? CELL_EDITORS[type].parse : CELL_EDITORS.text.parse;
+    }
+
+    /** One column's reader: `(text) => {ok: true, value} | {ok: false, error}`. */
+    _reader(col) {
+        const g = this.grid;
+        const cfg = g._cfg();
+        const spec = g._editSpec(col) || {};
+        const parse = this._parserFor(col);
+        const ctx = {
+            locale: cfg.locale ?? undefined,
+            utc: g.table._utc(),
+            messages: cfg.editorMessages ?? undefined,
+            options: spec.options,
+            allowOther: !!spec.allowOther,
+        };
+        return (text) => {
+            let r;
+            try { r = parse(text, ctx); } catch (err) {
+                return { ok: false, error: err?.message || String(err ?? 'Not pasted') };
+            }
+            if (r && r.ok === true) return { ok: true, value: r.value };
+            if (r && r.ok === false) return { ok: false, error: String(r.error ?? 'Not pasted') };
+            return { ok: false, error: 'Not pasted' };
+        };
+    }
+
+    /** The position of the last loaded row: the rows held in the order shown
+     *  (all of them filtered and sorted; a server's page, the rows it sent). */
+    _lastLoaded() {
+        const t = this.grid.table;
+        if (t._isServerSide()) return this.grid.span()[1];
+        return t._getProcessedRows().length - 1;
+    }
+
+    _warn(message) {
+        console.warn(`[DataTable] paste: ${message}`);
+        this.grid.table._notify('Paste', message, 'warn');
+    }
+
+    // ── the paste ────────────────────────────────────────────────────────
+
+    /**
+     * Paste tab-separated `text` at the cursor. Resolves `{rows, cols, staged,
+     * skipped, refused, droppedColumns, appended}` — `staged` the NUMBER of
+     * cells that changed, `skipped` the cells `editable` refused and `refused`
+     * the ones whose text did not parse (`{row, col, rowIdx}`, `refused` with
+     * its `text` and `error`), `droppedColumns` the columns past the last one,
+     * `appended` the rows handed to `onRowsAppend` — or null when nothing was
+     * pasted: empty text, no cursor, an editor open, a commit or another paste
+     * out, an overrun declined, or new rows while `onPasteOverrun` was asked.
+     */
+    async paste(text) {
+        const g = this.grid;
+        const matrix = fromTSV(text);
+        if (!matrix.length || this.busy) return null;
+        g._sync();
+        const at = g.sel.focus ? { ...g.sel.focus } : null;
+        if (!at || g.isEditing() || g.staged.committing) return null;
+        const cfg = g._cfg();
+        const cols = g.columns();
+        const width = Math.max(...matrix.map((line) => line.length));
+        const targetCols = cols.slice(cols.indexOf(at.col), cols.indexOf(at.col) + width);
+        const droppedColumns = width - targetCols.length;
+        const last = this._lastLoaded();
+        const fit = Math.max(0, Math.min(matrix.length, last - at.row + 1));
+        const extra = matrix.length - fit;
+        const generation = g.generation;
+
+        if (extra > 0) {
+            const ask = cfg.onPasteOverrun;
+            let answer = false;
+            if (typeof ask === 'function') {
+                this.busy = true;
+                try { answer = await ask({ rows: extra }); } catch (err) {
+                    console.error('[DataTable] onPasteOverrun threw', err);
+                    answer = false;
+                } finally {
+                    this.busy = false;
+                }
+            } else {
+                console.warn(`[DataTable] paste: ${extra} row(s) past the last loaded row and no \`onPasteOverrun\`; nothing pasted.`);
+            }
+            if (answer !== true) return null;
+            if (generation !== g.generation || g.isEditing() || g.staged.committing) return null;
+        }
+
+        // What lands in the loaded rows: each cell read, or skipped.
+        const cells = [];
+        const skipped = [];
+        const refused = [];
+        const readers = new Map(targetCols.map((col) => [col, this._reader(col)]));
+        for (let r = 0; r < fit; r++) {
+            const pos = at.row + r;
+            const rowIdx = g.rowIndexAt(pos);
+            targetCols.forEach((col, c) => {
+                if (c >= matrix[r].length) return;   // a short line: nothing there
+                if (!g.canEdit(pos, col)) { skipped.push({ row: pos, col, rowIdx }); return; }
+                const text = matrix[r][c];
+                const read = readers.get(col)(text);
+                if (read.ok) cells.push({ rowIdx, colIdx: col, value: read.value });
+                else refused.push({ row: pos, col, rowIdx, text, error: read.error });
+            });
+        }
+
+        // The rows past the last loaded one, as data rows: every pasted
+        // column read; one that does not read is null, and listed.
+        let appended = 0;
+        if (extra > 0) {
+            const n = (cfg.headers || []).length;
+            const rows = [];
+            const errors = [];
+            for (let r = fit; r < matrix.length; r++) {
+                const row = new Array(n).fill(null);
+                targetCols.forEach((col, c) => {
+                    if (c >= matrix[r].length) return;
+                    const text = matrix[r][c];
+                    const read = readers.get(col)(text);
+                    if (read.ok) row[col] = read.value;
+                    else errors.push({ row: rows.length, colIdx: col, text, error: read.error });
+                });
+                rows.push(row);
+            }
+            const append = cfg.onRowsAppend;
+            if (typeof append === 'function') {
+                appended = rows.length;
+                this.busy = true;
+                try { await append({ rows, errors }); } catch (err) {
+                    console.error('[DataTable] onRowsAppend threw', err);
+                } finally {
+                    this.busy = false;
+                }
+            } else {
+                this._warn(`${rows.length} row(s) past the last loaded row were not pasted (no \`onRowsAppend\`).`);
+            }
+        }
+
+        const staged = g.staged.stageMany(cells, `paste ${cells.length} cell(s)`);
+
+        // The range covers the block that landed, the cursor where it began.
+        const lastCol = targetCols[targetCols.length - 1] ?? at.col;
+        const lastRow = at.row + Math.max(0, fit - 1);
+        g.set({ row: at.row, col: at.col }, { row: lastRow, col: lastCol });
+
+        // Marked after the selection moved, which clears the last marks.
+        for (const s of skipped) this.skipped.add(key(s.rowIdx, s.col));
+        const redraw = new Set();
+        for (const f of refused) {
+            const k = key(f.rowIdx, f.col);
+            g.errors.set(k, { value: f.text, message: f.error });
+            // Any older commit of the cell still out no longer owns its marks.
+            g.latest.set(k, {});
+            g.pending.delete(k);
+            redraw.add(f.rowIdx);
+        }
+        for (const rowIdx of redraw) g._redraw(rowIdx);
+        if (skipped.length) g.paint();
+
+        if (droppedColumns > 0) {
+            this._warn(`${droppedColumns} column(s) past the last column were not pasted.`);
+        }
+        return {
+            rows: matrix.length, cols: width, staged, skipped, refused, droppedColumns, appended,
+        };
+    }
+
+    dispose() {
+        this.skipped.clear();
+    }
+}

package/src/ui/components/cell_selection.js

@@ -0,0 +1,220 @@
+/**
+ * cell_selection.js — STORY-0003. The model under DataTable's CELL MODE
+ * (`selectionMode: 'cells'`): a cursor cell, a range from an anchor to that
+ * cursor, and every move the keys make over them. No DOM, so the rules can be
+ * tested — or drive another grid — without a table. DataTable's own half (the
+ * painting, the pointer, the keys, the editor) is `cell_grid.js`, which is
+ * internal to the table.
+ *
+ * ══ COORDINATES ═════════════════════════════════════════════════════════
+ *
+ * A cell is `{row, col}`. `row` is the row's POSITION in the order shown — the
+ * index into `getDisplayedRows()`, after the sort and the filters — because a
+ * range is a rectangle on the screen, not in the data. `col` is the DATA column
+ * index (the one `headers`, `renderCell` and `hiddenColumns` use); a range
+ * spans the columns SHOWN between its two edges, so a hidden column inside it
+ * is not part of it. The cursor moves only over the rows of the page drawn.
+ */
+
+/**
+ * The selection model. Rows are positions `first..last`; columns are the data
+ * indices in `cols`, in the order they are shown. Both are handed in on every
+ * move (`setBounds`), because a filter, a page or a hidden column changes them
+ * under a selection that has to survive.
+ */
+export class CellSelection {
+    constructor() {
+        /** @type {{row:number, col:number}|null} */
+        this.anchor = null;
+        /** @type {{row:number, col:number}|null} the cursor */
+        this.focus = null;
+        this.first = 0;
+        this.last = -1;
+        this.cols = [];
+    }
+
+    /** The rows (positions, inclusive) and columns (data indices, shown order)
+     *  the cursor may stand on. A selection outside them is pulled in. */
+    setBounds(first, last, cols) {
+        this.first = first;
+        this.last = last;
+        this.cols = Array.isArray(cols) ? cols.slice() : [];
+        if (this.isEmptyGrid()) {
+            this.anchor = null;
+            this.focus = null;
+            return;
+        }
+        if (this.focus) this.focus = this._clamp(this.focus);
+        if (this.anchor) this.anchor = this._clamp(this.anchor);
+    }
+
+    isEmptyGrid() {
+        return this.last < this.first || this.cols.length === 0;
+    }
+
+    _ord(col) {
+        const i = this.cols.indexOf(col);
+        return i >= 0 ? i : 0;
+    }
+
+    _clamp({ row, col }) {
+        const r = Math.max(this.first, Math.min(this.last, row));
+        const c = this.cols.includes(col) ? col
+            : this.cols[Math.max(0, Math.min(this.cols.length - 1, this._nearestOrd(col)))];
+        return { row: r, col: c };
+    }
+
+    /** A column that is not shown any more: the shown one nearest its index. */
+    _nearestOrd(col) {
+        let best = 0;
+        for (let i = 0; i < this.cols.length; i++) if (this.cols[i] <= col) best = i;
+        return best;
+    }
+
+    _inside(row, ord) {
+        return row >= this.first && row <= this.last && ord >= 0 && ord < this.cols.length;
+    }
+
+    /** Put the cursor on one cell and collapse the range onto it. */
+    setCursor(row, col) {
+        if (this.isEmptyGrid()) return false;
+        this.focus = this._clamp({ row, col });
+        this.anchor = { ...this.focus };
+        return true;
+    }
+
+    /** Move the cursor to a cell and keep the anchor: the range grows. */
+    extendTo(row, col) {
+        if (!this.anchor) return this.setCursor(row, col);
+        if (this.isEmptyGrid()) return false;
+        this.focus = this._clamp({ row, col });
+        return true;
+    }
+
+    _go(cell, extend) {
+        return extend ? this.extendTo(cell.row, cell.col) : this.setCursor(cell.row, cell.col);
+    }
+
+    /** One step: the arrows. At an edge the cursor stays put. */
+    move(dRow, dCol, { extend = false } = {}) {
+        if (!this.focus) return this.setCursor(this.first, this.cols[0]);
+        const ord = Math.max(0, Math.min(this.cols.length - 1, this._ord(this.focus.col) + dCol));
+        const row = Math.max(this.first, Math.min(this.last, this.focus.row + dRow));
+        return this._go({ row, col: this.cols[ord] }, extend);
+    }
+
+    /**
+     * Ctrl+arrow: to the edge of the block of filled cells, as a spreadsheet
+     * does. From a filled cell whose neighbour is filled, to the last filled
+     * cell of that run; otherwise to the next filled cell along the line, or
+     * the edge of the grid when there is none.
+     *
+     * @param {number} dRow  -1, 0 or 1
+     * @param {number} dCol  -1, 0 or 1
+     * @param {(row:number, col:number) => boolean} filled
+     */
+    jump(dRow, dCol, filled, { extend = false } = {}) {
+        if (!this.focus) return this.setCursor(this.first, this.cols[0]);
+        let r = this.focus.row;
+        let o = this._ord(this.focus.col);
+        const isFilled = (row, ord) => !!filled(row, this.cols[ord]);
+        if (this._inside(r + dRow, o + dCol)) {
+            if (isFilled(r, o) && isFilled(r + dRow, o + dCol)) {
+                while (this._inside(r + dRow, o + dCol) && isFilled(r + dRow, o + dCol)) {
+                    r += dRow; o += dCol;
+                }
+            } else {
+                r += dRow; o += dCol;
+                while (!isFilled(r, o) && this._inside(r + dRow, o + dCol)) {
+                    r += dRow; o += dCol;
+                }
+            }
+        }
+        return this._go({ row: r, col: this.cols[o] }, extend);
+    }
+
+    /** Home / End: the first or last column of the cursor's row; with
+     *  `corner` (Ctrl), the first or last cell of the grid. */
+    lineEnd(toEnd, { extend = false, corner = false } = {}) {
+        if (!this.focus) return this.setCursor(this.first, this.cols[0]);
+        const col = toEnd ? this.cols[this.cols.length - 1] : this.cols[0];
+        const row = corner ? (toEnd ? this.last : this.first) : this.focus.row;
+        return this._go({ row, col }, extend);
+    }
+
+    /** Tab: one cell right, wrapping to the first cell of the next row (Shift:
+     *  left, wrapping to the last cell of the row before). The last cell of
+     *  the grid (the first, going back) stays put. */
+    tab(back = false) {
+        if (!this.focus) return this.setCursor(this.first, this.cols[0]);
+        let row = this.focus.row;
+        let ord = this._ord(this.focus.col) + (back ? -1 : 1);
+        if (ord >= this.cols.length) {
+            if (row >= this.last) return this.setCursor(row, this.focus.col);
+            row += 1; ord = 0;
+        } else if (ord < 0) {
+            if (row <= this.first) return this.setCursor(row, this.focus.col);
+            row -= 1; ord = this.cols.length - 1;
+        }
+        return this.setCursor(row, this.cols[ord]);
+    }
+
+    /** Whether Tab (Shift+Tab with `back`) has nowhere to go: the cursor is
+     *  on the grid's last cell (its first, going back). The grid then lets
+     *  the key move focus on, out of the table. */
+    tabEnds(back = false) {
+        if (!this.focus || this.isEmptyGrid()) return false;
+        const col = back ? this.cols[0] : this.cols[this.cols.length - 1];
+        const row = back ? this.first : this.last;
+        return this.focus.row === row && this.focus.col === col;
+    }
+
+    /** Every cell of the grid: from its first cell to its last, which is
+     *  where the cursor goes. */
+    selectAll() {
+        if (this.isEmptyGrid()) return false;
+        this.anchor = { row: this.first, col: this.cols[0] };
+        this.focus = { row: this.last, col: this.cols[this.cols.length - 1] };
+        return true;
+    }
+
+    /** The range collapses onto the cursor. */
+    collapse() {
+        if (!this.focus) return false;
+        const was = this.anchor && (this.anchor.row !== this.focus.row || this.anchor.col !== this.focus.col);
+        this.anchor = { ...this.focus };
+        return !!was;
+    }
+
+    clear() {
+        this.anchor = null;
+        this.focus = null;
+    }
+
+    /** `{top, bottom, left, right, columns}` — rows as positions, `left` and
+     *  `right` and `columns` as data indices — or null with nothing selected. */
+    range() {
+        if (!this.focus || !this.anchor) return null;
+        const a = this._ord(this.anchor.col);
+        const b = this._ord(this.focus.col);
+        const lo = Math.min(a, b);
+        const hi = Math.max(a, b);
+        return {
+            top: Math.min(this.anchor.row, this.focus.row),
+            bottom: Math.max(this.anchor.row, this.focus.row),
+            left: this.cols[lo],
+            right: this.cols[hi],
+            columns: this.cols.slice(lo, hi + 1),
+        };
+    }
+
+    contains(row, col) {
+        const r = this.range();
+        if (!r || row < r.top || row > r.bottom) return false;
+        return r.columns.includes(col);
+    }
+
+    isCursor(row, col) {
+        return !!this.focus && this.focus.row === row && this.focus.col === col;
+    }
+}