@perspective-dev/viewer-datagrid 4.4.0 → 4.5.0

package/src/ts/event_handlers/keydown/edit_keydown.ts

@@ -14,25 +14,29 @@ import { focusSelectedCell } from "../../style_handlers/focus.js";
 import type {
     RegularTable,
     DatagridModel,
-    PerspectiveViewerElement,
-    SelectedPosition,
+    SelectedPositionMap,
 } from "../../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
-type SelectedPositionMap = Map<RegularTable, SelectedPosition>;
-
-type AsyncFunction<T extends unknown[], R> = (
-    this: DatagridModel,
-    ...args: T
-) => Promise<R>;
+type AsyncMoveFunction = (
+    model: DatagridModel,
+    table: RegularTable,
+    selected_position_map: SelectedPositionMap,
+    active_cell: HTMLElement,
+    dx: number,
+    dy: number,
+) => Promise<void | undefined>;
 
-function lock<T extends unknown[], R>(
-    body: AsyncFunction<T, R>,
-): AsyncFunction<T, R | undefined> {
+function lock(body: AsyncMoveFunction): AsyncMoveFunction {
     let lockPromise: Promise<void> | undefined;
     return async function (
-        this: DatagridModel,
-        ...args: T
-    ): Promise<R | undefined> {
+        model: DatagridModel,
+        table: RegularTable,
+        selected_position_map: SelectedPositionMap,
+        active_cell: HTMLElement,
+        dx: number,
+        dy: number,
+    ): Promise<void | undefined> {
         if (lockPromise) {
             await lockPromise;
             return;
@@ -40,7 +44,14 @@ function lock<T extends unknown[], R>(
 
         let resolve: () => void;
         lockPromise = new Promise((x) => (resolve = x));
-        const result = await body.apply(this, args);
+        const result = await body(
+            model,
+            table,
+            selected_position_map,
+            active_cell,
+            dx,
+            dy,
+        );
         lockPromise = undefined;
         resolve!();
         return result;
@@ -52,23 +63,26 @@ interface ContentEditableElement extends HTMLElement {
     selectionStart?: number;
 }
 
-function getPos(this: ContentEditableElement): number {
-    if (this.isContentEditable) {
-        const _range = (this.getRootNode() as Document)
+function getPos(elem: ContentEditableElement): number {
+    if (elem.isContentEditable) {
+        const _range = (elem.getRootNode() as Document)
             .getSelection()
             ?.getRangeAt(0);
-        if (!_range) return 0;
+        if (!_range) {
+            return 0;
+        }
+
         const range = _range.cloneRange();
-        range.selectNodeContents(this);
+        range.selectNodeContents(elem);
         range.setEnd(_range.endContainer, _range.endOffset);
         return range.toString().length;
     } else {
-        return this.selectionStart || 0;
+        return elem.selectionStart || 0;
     }
 }
 
 const moveSelection = lock(async function (
-    this: DatagridModel,
+    model: DatagridModel,
     table: RegularTable,
     selected_position_map: SelectedPositionMap,
     active_cell: HTMLElement,
@@ -76,9 +90,12 @@ const moveSelection = lock(async function (
     dy: number,
 ): Promise<void> {
     const meta = table.getMeta(active_cell);
-    if (!meta || meta.type !== "body") return;
-    const num_columns = this._column_paths.length;
-    const num_rows = this._num_rows;
+    if (!meta || meta.type !== "body") {
+        return;
+    }
+
+    const num_columns = model._column_paths.length;
+    const num_rows = model._num_rows;
     const selected_position = selected_position_map.get(table);
     if (!selected_position) {
         return;
@@ -122,9 +139,9 @@ function isLastCell(
 }
 
 export function keydownListener(
-    this: DatagridModel,
+    model: DatagridModel,
     table: RegularTable,
-    _viewer: PerspectiveViewerElement,
+    _viewer: HTMLPerspectiveViewerElement,
     selected_position_map: SelectedPositionMap,
     event: KeyboardEvent,
 ): void {
@@ -134,12 +151,12 @@ export function keydownListener(
     switch (event.key) {
         case "Enter":
             event.preventDefault();
-            if (isLastCell(this, table, target)) {
+            if (isLastCell(model, table, target)) {
                 target.blur();
                 selected_position_map.delete(table);
             } else if (event.shiftKey) {
-                moveSelection.call(
-                    this,
+                moveSelection(
+                    model,
                     table,
                     selected_position_map,
                     target,
@@ -147,8 +164,8 @@ export function keydownListener(
                     -1,
                 );
             } else {
-                moveSelection.call(
-                    this,
+                moveSelection(
+                    model,
                     table,
                     selected_position_map,
                     target,
@@ -156,12 +173,13 @@ export function keydownListener(
                     1,
                 );
             }
+
             break;
         case "ArrowLeft":
-            if (getPos.call(target as ContentEditableElement) === 0) {
+            if (getPos(target as ContentEditableElement) === 0) {
                 event.preventDefault();
-                moveSelection.call(
-                    this,
+                moveSelection(
+                    model,
                     table,
                     selected_position_map,
                     target,
@@ -169,26 +187,20 @@ export function keydownListener(
                     0,
                 );
             }
+
             break;
         case "ArrowUp":
             event.preventDefault();
-            moveSelection.call(
-                this,
-                table,
-                selected_position_map,
-                target,
-                0,
-                -1,
-            );
+            moveSelection(model, table, selected_position_map, target, 0, -1);
             break;
         case "ArrowRight":
             if (
-                getPos.call(target as ContentEditableElement) ===
+                getPos(target as ContentEditableElement) ===
                 (target.textContent?.length || 0)
             ) {
                 event.preventDefault();
-                moveSelection.call(
-                    this,
+                moveSelection(
+                    model,
                     table,
                     selected_position_map,
                     target,
@@ -196,17 +208,11 @@ export function keydownListener(
                     0,
                 );
             }
+
             break;
         case "ArrowDown":
             event.preventDefault();
-            moveSelection.call(
-                this,
-                table,
-                selected_position_map,
-                target,
-                0,
-                1,
-            );
+            moveSelection(model, table, selected_position_map, target, 0, 1);
             break;
         default:
     }

package/src/ts/event_handlers/select_region.ts

@@ -13,16 +13,24 @@
 import { RegularTableElement } from "regular-table";
 import type {
     DatagridPluginElement,
-    PerspectiveViewerElement,
+    EditMode,
     SelectionArea,
 } from "../types.js";
-import { ViewWindow } from "@perspective-dev/client";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+import type { ViewWindow } from "@perspective-dev/client";
+import type { CellMetadataBody } from "regular-table/dist/esm/types.js";
 
 const MOUSE_SELECTED_AREA_CLASS = "mouse-selected-area";
 
+export type OnSelectCallback = (
+    area: SelectionArea,
+    isDeselect: boolean,
+) => void;
+
 interface AddAreaMouseSelectionOptions {
     className?: string;
     selected?: SelectionArea[];
+    onSelect?: OnSelectCallback;
 }
 
 export const addAreaMouseSelection = (
@@ -31,6 +39,7 @@ export const addAreaMouseSelection = (
     {
         className = MOUSE_SELECTED_AREA_CLASS,
         selected = [],
+        onSelect,
     }: AddAreaMouseSelectionOptions = {},
 ): RegularTableElement => {
     datagrid.model!._selection_state = {
@@ -50,7 +59,7 @@ export const addAreaMouseSelection = (
 
     table.addEventListener(
         "mouseup",
-        getMouseupListener(datagrid, table, className),
+        getMouseupListener(datagrid, table, className, onSelect),
     );
 
     table.addStyleListener(() =>
@@ -60,6 +69,10 @@ export const addAreaMouseSelection = (
     return table;
 };
 
+function isSingleClickMode(mode: EditMode): boolean {
+    return mode === "SELECT_ROW_TREE";
+}
+
 const getMousedownListener =
     (
         datagrid: DatagridPluginElement,
@@ -70,10 +83,12 @@ const getMousedownListener =
         const mouseEvent = event as MouseEvent;
         if (
             mouseEvent.button === 0 &&
-            (datagrid.model!._edit_mode === "SELECT_REGION" ||
-                datagrid.model!._edit_mode === "SELECT_ROW" ||
-                datagrid.model!._edit_mode === "SELECT_COLUMN")
+            isSelectionMode(datagrid.model!._edit_mode)
         ) {
+            if (isSingleClickMode(datagrid.model!._edit_mode)) {
+                return;
+            }
+
             datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES = {};
             const meta = table.getMeta(mouseEvent.target as HTMLElement);
             if (
@@ -122,11 +137,8 @@ const getMouseoverListener =
     ) =>
     (event: Event): void => {
         const mouseEvent = event as MouseEvent;
-        if (
-            datagrid.model!._edit_mode === "SELECT_REGION" ||
-            datagrid.model!._edit_mode === "SELECT_ROW" ||
-            datagrid.model!._edit_mode === "SELECT_COLUMN"
-        ) {
+        const mode = datagrid.model!._edit_mode;
+        if (isSelectionMode(mode) && !isSingleClickMode(mode)) {
             if (
                 datagrid.model!._selection_state
                     .CURRENT_MOUSEDOWN_COORDINATES &&
@@ -183,17 +195,65 @@ const getMouseupListener =
         datagrid: DatagridPluginElement,
         table: RegularTableElement,
         className: string,
+        onSelect?: OnSelectCallback,
     ) =>
     (event: Event): void => {
         const mouseEvent = event as MouseEvent;
-        if (
-            datagrid.model!._edit_mode === "SELECT_REGION" ||
-            datagrid.model!._edit_mode === "SELECT_ROW" ||
-            datagrid.model!._edit_mode === "SELECT_COLUMN"
-        ) {
+        const mode = datagrid.model!._edit_mode;
+        if (isSelectionMode(mode)) {
             const meta = table.getMeta(mouseEvent.target as HTMLElement);
-            if (!meta) return;
+            if (!meta) {
+                return;
+            }
 
+            // For single-click modes (SELECT_ROW_TREE), handle toggle
+            if (isSingleClickMode(mode)) {
+                if (
+                    (meta.type === "body" || meta.type === "row_header") &&
+                    meta.y !== undefined &&
+                    meta.y >= 0
+                ) {
+                    const existing =
+                        datagrid.model!._selection_state.selected_areas;
+                    const isSameRow =
+                        existing.length > 0 && existing[0].y0 === meta.y;
+
+                    if (isSameRow) {
+                        // Deselect
+                        datagrid.model!._selection_state.selected_areas = [];
+                        datagrid.model!._selection_state.dirty = true;
+                        applyMouseAreaSelections(
+                            datagrid,
+                            table,
+                            className,
+                            [],
+                        );
+                        onSelect?.(existing[0], true);
+                    } else {
+                        // Select new row
+                        const area: SelectionArea = {
+                            x0: 0,
+                            x1: 0,
+                            y0: meta.y,
+                            y1: meta.y,
+                        };
+                        datagrid.model!._selection_state.selected_areas = [
+                            area,
+                        ];
+                        datagrid.model!._selection_state.dirty = true;
+                        applyMouseAreaSelections(datagrid, table, className);
+                        onSelect?.(area, false);
+                    }
+                }
+
+                datagrid.model!._selection_state.CURRENT_MOUSEDOWN_COORDINATES =
+                    {};
+                datagrid.model!._selection_state.potential_selection =
+                    undefined;
+                return;
+            }
+
+            // Drag-based modes (SELECT_ROW, SELECT_COLUMN, SELECT_REGION)
             if (
                 (datagrid.model!._selection_state.old_selected_areas?.length ??
                     0) > 0
@@ -260,80 +320,103 @@ const getMouseupListener =
         }
     };
 
+function modeIncludesColumns(mode: EditMode): boolean {
+    return mode === "SELECT_COLUMN" || mode === "SELECT_REGION";
+}
+
+function modeIncludesRows(mode: EditMode): boolean {
+    return (
+        mode === "SELECT_ROW" ||
+        mode === "SELECT_REGION" ||
+        mode === "SELECT_ROW_TREE"
+    );
+}
+
 function set_psp_selection(
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     datagrid: DatagridPluginElement,
     { x0, x1, y0, y1 }: SelectionArea,
 ): void {
     const viewport: ViewWindow = {};
     const mode = datagrid.model!._edit_mode;
-    if (
-        x0 !== undefined &&
-        ["SELECT_COLUMN", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (x0 !== undefined && modeIncludesColumns(mode)) {
         viewport.start_col = x0;
     }
 
-    if (
-        x1 !== undefined &&
-        ["SELECT_COLUMN", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (x1 !== undefined && modeIncludesColumns(mode)) {
         viewport.end_col = x1 + 1;
     }
 
-    if (
-        y0 !== undefined &&
-        ["SELECT_ROW", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (y0 !== undefined && modeIncludesRows(mode)) {
         viewport.start_row = y0;
     }
 
-    if (
-        y1 !== undefined &&
-        ["SELECT_ROW", "SELECT_REGION"].indexOf(mode) > -1
-    ) {
+    if (y1 !== undefined && modeIncludesRows(mode)) {
         viewport.end_row = y1 + 1;
     }
 
     viewer.setSelection(viewport);
 }
 
+type CellPredicate = (meta: CellMetadataBody, area: SelectionArea) => boolean;
+
+const SELECTION_PREDICATES: Record<string, CellPredicate> = {
+    SELECT_REGION: (m, a) =>
+        a.x0 <= m.x && m.x <= a.x1 && a.y0 <= m.y && m.y <= a.y1,
+    SELECT_ROW: (m, a) => a.y0 <= m.y && m.y <= a.y1,
+    SELECT_ROW_TREE: (m, a) => a.y0 <= m.y && m.y <= a.y1,
+    SELECT_COLUMN: (m, a) => a.x0 <= m.x && m.x <= a.x1,
+};
+
+function isSelectionMode(mode: EditMode): boolean {
+    return (
+        mode === "SELECT_REGION" ||
+        mode === "SELECT_ROW" ||
+        mode === "SELECT_COLUMN" ||
+        mode === "SELECT_ROW_TREE"
+    );
+}
+
 export const applyMouseAreaSelections = (
     datagrid: DatagridPluginElement,
     table: RegularTableElement,
     className: string,
     selected?: SelectionArea[],
 ): void => {
-    if (
-        datagrid.model!._edit_mode === "SELECT_REGION" ||
-        datagrid.model!._edit_mode === "SELECT_ROW" ||
-        datagrid.model!._edit_mode === "SELECT_COLUMN"
-    ) {
+    const mode = datagrid.model!._edit_mode;
+    if (isSelectionMode(mode)) {
         selected = datagrid.model!._selection_state.selected_areas.slice(0);
         if (datagrid.model!._selection_state.potential_selection) {
             selected.push(datagrid.model!._selection_state.potential_selection);
         }
 
-        const tds = table.querySelectorAll("tbody td");
-
         if (selected.length > 0) {
             set_psp_selection(
-                datagrid.parentElement as any,
+                datagrid.parentElement as HTMLPerspectiveViewerElement,
                 datagrid,
                 selected[0],
             );
-            applyMouseAreaSelection(datagrid, table, selected, className);
+
+            // SELECT_ROW_TREE styling is handled entirely by the
+            // identity-based system in body.ts, which styles both td
+            // and th uniformly in a single draw pass.
+            if (!isSingleClickMode(mode)) {
+                applyMouseAreaSelection(datagrid, table, selected, className);
+            }
         } else {
-            (datagrid.parentElement as any).setSelection();
+            (
+                datagrid.parentElement as HTMLPerspectiveViewerElement
+            ).setSelection();
+            const tds = table.querySelectorAll("tbody td");
             for (const td of tds) {
                 td.classList.remove(className);
             }
         }
     } else if (datagrid.model!._selection_state.dirty) {
         datagrid.model!._selection_state.dirty = false;
-        const tds = table.querySelectorAll("tbody td");
-        for (const td of tds) {
-            td.classList.remove(className);
+        const cells = table.querySelectorAll("tbody td, tbody th");
+        for (const cell of cells) {
+            cell.classList.remove(className);
         }
     }
 };
@@ -344,96 +427,35 @@ const applyMouseAreaSelection = (
     selected: SelectionArea[],
     className: string,
 ): void => {
-    if (datagrid.model!._edit_mode === "SELECT_REGION" && selected.length > 0) {
-        const tds = table.querySelectorAll("tbody td");
-
-        for (const td of tds) {
-            const meta = table.getMeta(td as HTMLElement);
-            if (!meta || meta.type !== "body") continue;
-            let rendered = false;
-            for (const { x0, x1, y0, y1 } of selected) {
-                if (
-                    x0 !== undefined &&
-                    y0 !== undefined &&
-                    x1 !== undefined &&
-                    y1 !== undefined
-                ) {
-                    if (
-                        x0 <= meta.x &&
-                        meta.x <= x1 &&
-                        y0 <= meta.y &&
-                        meta.y <= y1
-                    ) {
-                        rendered = true;
-                        datagrid.model!._selection_state.dirty = true;
-                        td.classList.add(className);
-                    }
-                }
-            }
+    const predicate = SELECTION_PREDICATES[datagrid.model!._edit_mode];
+    if (!predicate || selected.length === 0) {
+        return;
+    }
 
-            if (!rendered) {
-                td.classList.remove(className);
-            }
+    const tds = table.querySelectorAll("tbody td");
+    for (const td of tds) {
+        const meta = table.getMeta(td as HTMLElement);
+        if (!meta || meta.type !== "body") {
+            continue;
         }
-    } else if (
-        datagrid.model!._edit_mode === "SELECT_ROW" &&
-        selected.length > 0
-    ) {
-        const tds = table.querySelectorAll("tbody td");
-
-        for (const td of tds) {
-            const meta = table.getMeta(td as HTMLElement);
-            if (!meta) continue;
-            let rendered = false;
-            for (const { x0, x1, y0, y1 } of selected) {
-                if (
-                    x0 !== undefined &&
-                    y0 !== undefined &&
-                    x1 !== undefined &&
-                    y1 !== undefined &&
-                    meta?.type === "body"
-                ) {
-                    if (y0 <= meta.y && meta.y <= y1) {
-                        datagrid.model!._selection_state.dirty = true;
-                        rendered = true;
-                        td.classList.add(className);
-                    }
-                }
-            }
 
-            if (!rendered) {
-                td.classList.remove(className);
+        let rendered = false;
+        for (const area of selected) {
+            if (
+                area.x0 !== undefined &&
+                area.y0 !== undefined &&
+                area.x1 !== undefined &&
+                area.y1 !== undefined &&
+                predicate(meta, area)
+            ) {
+                rendered = true;
+                datagrid.model!._selection_state.dirty = true;
+                td.classList.add(className);
             }
         }
-    } else if (
-        datagrid.model!._edit_mode === "SELECT_COLUMN" &&
-        selected.length > 0
-    ) {
-        const tds = table.querySelectorAll("tbody td");
-
-        for (const td of tds) {
-            const meta = table.getMeta(td as HTMLElement);
-            if (!meta) continue;
-            let rendered = false;
-            for (const { x0, x1, y0, y1 } of selected) {
-                if (
-                    x0 !== undefined &&
-                    y0 !== undefined &&
-                    x1 !== undefined &&
-                    y1 !== undefined &&
-                    meta?.type === "body"
-                ) {
-                    if (x0 <= meta.x && meta.x <= x1) {
-                        datagrid.model!._selection_state.dirty = true;
-                        rendered = true;
-                        td.classList.add(className);
-                    }
-                }
-            }
 
-            if (!rendered) {
-                td.classList.remove(className);
-            }
+        if (!rendered) {
+            td.classList.remove(className);
         }
     }
 };