@perspective-dev/viewer-datagrid 4.3.0 → 4.4.1

package/src/ts/plugin/activate.ts

@@ -12,33 +12,41 @@
 
 import { style_selected_column } from "../style_handlers/column_header.js";
 import {
-    click_listener,
-    mousedown_listener,
+    createMousedownListener,
+    createClickListener,
+    createDblclickListener,
 } from "../event_handlers/header_click.js";
 
-import { focusinListener, focusoutListener } from "../event_handlers/focus.js";
-import { keydownListener, clickListener } from "../event_handlers/click.js";
-
-import { selectionListener } from "../event_handlers/row_select_click.js";
-import { deselect_all_listener } from "../event_handlers/deselect_all.js";
+import {
+    createFocusinListener,
+    createFocusoutListener,
+} from "../event_handlers/focus.js";
+import {
+    createKeydownListener,
+    createEditClickListener,
+} from "../event_handlers/click.js";
 
 import { createModel } from "../model/create.js";
-import { dispatch_click_listener } from "../event_handlers/dispatch_click.js";
-
-import { addAreaMouseSelection } from "../event_handlers/select_region.js";
+import { createDispatchClickListener } from "../event_handlers/dispatch_click.js";
 
 import {
-    createConsolidatedStyleListener,
-    installConsolidatedStyleMethods,
-} from "../style_handlers/consolidated.js";
+    addAreaMouseSelection,
+    type OnSelectCallback,
+} from "../event_handlers/select_region.js";
+
+import { createConsolidatedStyleListener } from "../style_handlers/consolidated.js";
+
+import getCellConfig from "../get_cell_config.js";
 
 import type { View } from "@perspective-dev/client";
-import type {
-    DatagridPluginElement,
-    PerspectiveViewerElement,
-    SelectedPosition,
+import {
+    type DatagridPluginElement,
+    type SelectedPositionMap,
+    type SelectionArea,
+    PerspectiveSelectDetail,
 } from "../types.js";
-import type { RegularTableElement } from "regular-table";
+
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 interface ToggleColumnSettingsEvent extends CustomEvent {
     detail: {
@@ -54,7 +62,7 @@ export async function activate(
     this: DatagridPluginElement,
     view: View,
 ): Promise<void> {
-    const viewer = this.parentElement as PerspectiveViewerElement;
+    const viewer = this.parentElement as HTMLPerspectiveViewerElement;
     const table = await viewer.getTable();
 
     if (!this._initialized) {
@@ -70,132 +78,151 @@ export async function activate(
             this.regular_table,
             table,
             view,
+            viewer.getAttribute("theme")!,
         );
 
         if (!this.model) {
             return;
         }
 
+        const model = this.model;
+        const regularTable = this.regular_table;
+        const onSelect: OnSelectCallback = async (
+            area: SelectionArea,
+            isDeselect: boolean,
+        ) => {
+            if (model._edit_mode !== "SELECT_ROW_TREE") return;
+
+            // Store the selected row identity on the model so it persists
+            // even when the selected row scrolls out of the viewport.
+            if (isDeselect) {
+                model._tree_selection_id = undefined;
+            } else {
+                const idx = area.y0 - (model._last_window?.start_row ?? 0);
+                if (idx >= 0 && idx < model._ids.length) {
+                    model._tree_selection_id = model._ids[idx];
+                }
+            }
+
+            const { row, column_names, config } = await getCellConfig(
+                model,
+                area.y0,
+                0,
+            );
+
+            let detail: PerspectiveSelectDetail;
+            if (isDeselect) {
+                if ((model._last_insert_configs?.length || 0) > 0) {
+                    detail = new PerspectiveSelectDetail(
+                        false,
+                        row,
+                        [],
+                        model._last_insert_configs ?? [],
+                        [],
+                    );
+                } else {
+                    throw new Error("Suprious deselect");
+                }
+
+                model._last_insert_configs = undefined;
+            } else {
+                detail = new PerspectiveSelectDetail(
+                    true,
+                    row,
+                    column_names,
+                    model._last_insert_configs ?? [],
+                    [config],
+                );
+                model._last_insert_configs = [config];
+            }
+
+            await regularTable.draw({ preserve_width: true });
+            viewer.dispatchEvent(
+                new CustomEvent<PerspectiveSelectDetail>(
+                    "perspective-global-filter",
+                    {
+                        bubbles: true,
+                        composed: true,
+                        detail,
+                    },
+                ),
+            );
+        };
+
         addAreaMouseSelection(this, this.regular_table, {
             className: "psp-select-region",
+            onSelect,
         });
 
-        // Create shared state maps for selection and focus tracking
-        const selected_rows_map = new WeakMap<
-            RegularTableElement,
-            Set<number>
-        >();
-        const selected_position_map = new WeakMap<
-            RegularTableElement,
-            SelectedPosition
-        >();
-
-        // Install consolidated style methods on model prototype
-        installConsolidatedStyleMethods(this.model);
-
-        // Single consolidated style listener replaces:
-        // - table_cell_style_listener
-        // - group_header_style_listener
-        // - column_header_style_listener
-        // - selectionStyleListener
-        // - editable_style_listener
-        // - focus_style_listener
+        // Create shared state map for focus tracking
+        const selected_position_map: SelectedPositionMap = new WeakMap();
+
         this.regular_table.addStyleListener(
             createConsolidatedStyleListener(
                 this,
-                selected_rows_map as any,
-                selected_position_map as any,
-            ).bind(this.model, this.regular_table, viewer),
-        );
-
-        // uh ..
-        this.regular_table.addEventListener(
-            "click",
-            click_listener.bind(
-                this.model,
-                this.regular_table,
-            ) as EventListener,
-        );
-
-        this.regular_table.addEventListener(
-            "mousedown",
-            selectionListener.bind(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_rows_map as any,
-            ) as unknown as EventListener,
+                selected_position_map,
+            ),
         );
 
         this.regular_table.addEventListener(
-            "psp-deselect-all",
-            deselect_all_listener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-                selected_rows_map as any,
-            ) as unknown as EventListener,
+            "click",
+            createClickListener(this.regular_table),
         );
 
         // User event click
         this.regular_table.addEventListener(
             "click",
-            dispatch_click_listener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-            ) as unknown as EventListener,
+            createDispatchClickListener(this.model, this.regular_table, viewer),
         );
 
         // tree collapse, expand, edit button headers
         this.regular_table.addEventListener(
             "mousedown",
-            mousedown_listener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-            ) as unknown as EventListener,
+            createMousedownListener(this.model, this.regular_table, viewer),
         );
 
-        // Editing event handlers (style handling is now in consolidated listener)
-        // TODO relies on this.model._is_editable
+        this.regular_table.addEventListener(
+            "dblclick",
+            createDblclickListener(this.model, this.regular_table, viewer),
+        );
+
+        // Editing event handlers
         this.regular_table.addEventListener(
             "click",
-            clickListener.bind(
-                this.model,
-                this.regular_table,
-                viewer,
-            ) as EventListener,
+            createEditClickListener(this.model, this.regular_table, viewer),
         );
 
         this.regular_table.addEventListener(
             "focusin",
-            focusinListener.bind(
+            createFocusinListener(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_position_map as any,
-            ) as EventListener,
+                selected_position_map,
+            ),
         );
 
         this.regular_table.addEventListener(
             "focusout",
-            focusoutListener.bind(
+            createFocusoutListener(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_position_map as any,
-            ) as EventListener,
+                selected_position_map,
+            ),
         );
 
         this.regular_table.addEventListener(
             "keydown",
-            keydownListener.bind(
+            createKeydownListener(
                 this.model,
                 this.regular_table,
                 viewer,
-                selected_position_map as any,
-            ) as EventListener,
+                selected_position_map,
+            ),
         );
 
         // viewer event listeners
@@ -204,7 +231,7 @@ export async function activate(
             (event: Event) => {
                 const toggleEvent = event as ToggleColumnSettingsEvent;
                 if (this.isConnected) {
-                    style_selected_column.call(
+                    style_selected_column(
                         this.model!,
                         this.regular_table,
                         viewer,
@@ -229,6 +256,7 @@ export async function activate(
             this.regular_table,
             table,
             view,
+            viewer.getAttribute("theme")!,
             this.model,
         );
     }

package/src/ts/plugin/column_style_controls.ts

@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { ColumnType } from "@perspective-dev/client";
+import type { ColumnType } from "@perspective-dev/client";
 import type { DatagridPluginElement } from "../types.js";
 
 interface NumberStyleOpts {

package/src/ts/plugin/save.ts

@@ -41,5 +41,6 @@ export function save(
 
         return JSON.parse(JSON.stringify(token));
     }
+
     return {};
 }

package/src/ts/style_handlers/body.ts

@@ -14,9 +14,7 @@ import { RegularTableElement } from "regular-table";
 
 import {
     type DatagridModel,
-    type PerspectiveViewerElement,
     type ColumnsConfig,
-    type DatagridPluginElement,
     get_psp_type,
 } from "../types.js";
 
@@ -25,39 +23,31 @@ import { cell_style_string } from "./table_cell/string.js";
 import { cell_style_datetime } from "./table_cell/datetime.js";
 import { cell_style_boolean } from "./table_cell/boolean.js";
 import { cell_style_row_header } from "./table_cell/row_header.js";
-import {
-    CollectedCell,
-    LocalSelectedPositionMap,
-    LocalSelectedRowsMap,
-} from "./types.js";
+import { CollectedCell } from "./types.js";
 
 /**
  * Apply styles to all body cells in a single pass.
  */
 export function applyBodyCellStyles(
-    this: DatagridModel,
+    model: DatagridModel,
     cells: CollectedCell[],
     plugins: ColumnsConfig,
     isSettingsOpen: boolean,
     isSelectable: boolean,
     isEditable: boolean,
     regularTable: RegularTableElement,
-    selectedRowsMap: LocalSelectedRowsMap,
-    selectedPositionMap: LocalSelectedPositionMap,
-    viewer: PerspectiveViewerElement,
 ): void {
-    const hasSelected = selectedRowsMap.has(regularTable);
-    const selected = selectedRowsMap.get(regularTable);
+    const selectedId = isSelectable ? model._tree_selection_id : undefined;
 
     regularTable.classList.toggle(
         "flat-group-rollup-mode",
-        this._config.group_rollup_mode === "flat",
+        model._config.group_rollup_mode === "flat",
     );
 
     for (const { element: td, metadata, isHeader } of cells) {
         const column_name =
-            metadata.column_header?.[this._config.split_by.length];
-        const type = get_psp_type(this, metadata);
+            metadata.column_header?.[model._config.split_by.length];
+        const type = get_psp_type(model, metadata);
         const plugin = column_name
             ? plugins[column_name.toString()]
             : undefined;
@@ -65,34 +55,36 @@ export function applyBodyCellStyles(
 
         // Calculate aggregate depth visibility
         // @ts-ignore
-        metadata._is_hidden_by_aggregate_depth = ((x?: number) =>
-            x === 0 || x === undefined
-                ? false
-                : x - 1 <
-                  Math.min(
-                      this._config.group_by.length,
-                      plugin?.aggregate_depth || 0,
-                  ))(
-            (metadata.row_header as unknown[] | undefined)?.filter(
-                (x) => x !== undefined,
-            )?.length,
-        );
+        metadata._is_hidden_by_aggregate_depth =
+            model._config.group_rollup_mode === "rollup" &&
+            ((x?: number) =>
+                x === 0 || x === undefined
+                    ? false
+                    : x - 1 <
+                      Math.min(
+                          model._config.group_by.length,
+                          plugin?.aggregate_depth || 0,
+                      ))(
+                (metadata.row_header as unknown[] | undefined)?.filter(
+                    (x) => x !== undefined,
+                )?.length,
+            );
 
         // Apply type-specific cell styling
         if (is_numeric) {
-            cell_style_numeric.call(
-                this,
+            cell_style_numeric(
+                model,
                 plugin as any,
                 td,
                 metadata as any,
                 isSettingsOpen,
             );
         } else if (type === "boolean") {
-            cell_style_boolean.call(this, plugin, td, metadata as any);
+            cell_style_boolean(model, plugin, td, metadata as any);
         } else if (type === "string") {
-            cell_style_string.call(this, plugin as any, td, metadata as any);
+            cell_style_string(model, plugin as any, td, metadata as any);
         } else if (type === "date" || type === "datetime") {
-            cell_style_datetime.call(this, plugin as any, td, metadata as any);
+            cell_style_datetime(model, plugin as any, td, metadata);
         } else {
             td.style.backgroundColor = "";
             td.style.color = "";
@@ -107,10 +99,10 @@ export function applyBodyCellStyles(
         td.classList.toggle("psp-null", metadata.value === null);
         td.classList.toggle("psp-align-right", !isHeader && is_numeric);
         td.classList.toggle("psp-align-left", isHeader || !is_numeric);
-        if (this._column_settings_selected_column) {
+        if (model._column_settings_selected_column) {
             td.classList.toggle(
                 "psp-menu-open",
-                column_name === this._column_settings_selected_column,
+                column_name === model._column_settings_selected_column,
             );
         } else {
             td.classList.toggle("psp-menu-open", false);
@@ -121,9 +113,14 @@ export function applyBodyCellStyles(
             plugin?.number_fg_mode === "bar" && is_numeric,
         );
 
+        td.classList.toggle(
+            "psp-color-mode-label-bar",
+            plugin?.number_fg_mode === "label-bar" && is_numeric,
+        );
+
         // Apply row header styling
         if (isHeader) {
-            cell_style_row_header.call(this, regularTable, td, metadata as any);
+            cell_style_row_header(model, regularTable, td, metadata as any);
         }
 
         // Set data attributes
@@ -150,55 +147,53 @@ export function applyBodyCellStyles(
             delete td.dataset.x;
         }
 
-        // Apply selection styling (if selectable)
+        // Apply tree selection styling (SELECT_ROW_TREE).
+        // psp-select-region-inactive is exclusively a tree-selection class,
+        // so always clean it up. psp-select-region is shared with the
+        // coordinate-based selection modes, so only touch it when in
+        // SELECT_ROW_TREE mode (isSelectable).
+        td.classList.toggle("psp-select-region-inactive", false);
         if (isSelectable) {
-            if (!hasSelected) {
-                td.classList.toggle("psp-row-selected", false);
-                td.classList.toggle("psp-row-subselected", false);
+            if (!selectedId) {
+                td.classList.toggle("psp-select-region", false);
             } else {
-                const id = this._ids[(metadata.y ?? 0) - (metadata.y0 ?? 0)];
-                const key_match = (selected as unknown[]).reduce<boolean>(
+                const id = model._ids[(metadata.y ?? 0) - (metadata.y0 ?? 0)];
+                const key_match = selectedId.reduce<boolean>(
                     (agg, x, i) => agg && x === id[i],
                     true,
                 );
 
-                const selectedArr = selected as unknown[];
+                const isExact = id.length === selectedId.length && key_match;
+                const isSub = id.length !== selectedId.length && key_match;
+
                 if (isHeader) {
                     if (
                         metadata.type === "row_header" &&
                         metadata.row_header_x !== undefined &&
                         !!id[metadata.row_header_x]
                     ) {
-                        td.classList.toggle("psp-row-selected", false);
-                        td.classList.toggle("psp-row-subselected", false);
+                        td.classList.toggle("psp-select-region", false);
                     } else {
+                        td.classList.toggle("psp-select-region", isExact);
                         td.classList.toggle(
-                            "psp-row-selected",
-                            id.length === selectedArr.length && key_match,
-                        );
-                        td.classList.toggle(
-                            "psp-row-subselected",
-                            id.length !== selectedArr.length && key_match,
+                            "psp-select-region-inactive",
+                            isSub,
                         );
                     }
                 } else {
-                    td.classList.toggle(
-                        "psp-row-selected",
-                        id.length === selectedArr.length && key_match,
-                    );
-                    td.classList.toggle(
-                        "psp-row-subselected",
-                        id.length !== selectedArr.length && key_match,
-                    );
+                    td.classList.toggle("psp-select-region", isExact);
+                    td.classList.toggle("psp-select-region-inactive", isSub);
                 }
             }
+        } else {
+            td.classList.toggle("psp-select-region", false);
         }
 
         // Apply editable styling (if editable)
         if (!isHeader && metadata.type === "body") {
-            if (isEditable && this._is_editable[metadata.x]) {
+            if (isEditable && model._is_editable[metadata.x]) {
                 const col_name =
-                    metadata.column_header?.[this._config.split_by.length];
+                    metadata.column_header?.[model._config.split_by.length];
                 const col_name_str = col_name?.toString();
                 if (
                     col_name_str &&

package/src/ts/style_handlers/column_header.ts

@@ -11,12 +11,9 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { RegularTableElement } from "regular-table";
-import {
-    get_psp_type,
-    type DatagridModel,
-    type PerspectiveViewerElement,
-} from "../types.js";
+import { get_psp_type, type DatagridModel } from "../types.js";
 import { CollectedHeaderRow } from "./types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
 /**
  * Apply selected column styling in response to column settings toggle events.
@@ -24,9 +21,9 @@ import { CollectedHeaderRow } from "./types.js";
  * the column settings panel.
  */
 export function style_selected_column(
-    this: DatagridModel,
+    model: DatagridModel,
     regularTable: RegularTableElement,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     selectedColumn: string | undefined,
 ): void {
     const group_header_trs = Array.from(
@@ -72,7 +69,7 @@ export function style_selected_column(
                 const open = title.textContent === selectedColumn;
                 title.classList.toggle("psp-menu-open", open);
                 editBtn.classList.toggle("psp-menu-open", open);
-                if (this._config.columns.length > 1) {
+                if (model._config.columns.length > 1) {
                     for (const r of regularTable.querySelectorAll("td")) {
                         const meta = regularTable.getMeta(r);
                         if (!meta?.column_header) continue;
@@ -92,16 +89,16 @@ export function style_selected_column(
  * Style a single column header row.
  */
 export function styleColumnHeaderRow(
-    this: DatagridModel,
+    model: DatagridModel,
     headerRow: CollectedHeaderRow,
     regularTable: RegularTableElement,
     is_menu_row: boolean,
 ): void {
     const header_depth =
-        this._config.group_by.length -
-        (this._config.group_rollup_mode === "flat" ? 1 : 0);
+        model._config.group_by.length -
+        (model._config.group_rollup_mode === "flat" ? 1 : 0);
 
-    const selectedColumn = this._column_settings_selected_column;
+    const selectedColumn = model._column_settings_selected_column;
     for (const { element: td, metadata } of headerRow.cells) {
         if (
             !metadata ||
@@ -111,15 +108,15 @@ export function styleColumnHeaderRow(
             continue;
 
         const column_name =
-            metadata.column_header?.[this._config.split_by.length];
+            metadata.column_header?.[model._config.split_by.length];
 
-        const sort = this._config.sort.find((x) => x[0] === column_name);
+        const sort = model._config.sort.find((x) => x[0] === column_name);
         const is_corner = typeof metadata.x === "undefined";
         const needs_border =
             (metadata.type === "corner" &&
                 metadata.row_header_x === header_depth) ||
             (!is_corner &&
-                (metadata.x + 1) % this._config.columns.length === 0);
+                (metadata.x + 1) % model._config.columns.length === 0);
 
         td.classList.toggle("psp-header-border", needs_border);
         td.classList.toggle("psp-header-group", false);
@@ -159,7 +156,7 @@ export function styleColumnHeaderRow(
             !is_menu_row && !!sort && sort[1] === "col desc abs",
         );
 
-        const type = get_psp_type(this, metadata);
+        const type = get_psp_type(model, metadata);
         const is_numeric = type === "integer" || type === "float";
         const is_string = type === "string";
         const is_date = type === "date";
@@ -171,13 +168,13 @@ export function styleColumnHeaderRow(
             "psp-menu-enabled",
             (is_string || is_numeric || is_date || is_datetime) &&
                 !is_corner &&
-                metadata.column_header_y === this._config.split_by.length + 1,
+                metadata.column_header_y === model._config.split_by.length + 1,
         );
         td.classList.toggle(
             "psp-sort-enabled",
             (is_string || is_numeric || is_date || is_datetime) &&
                 !is_corner &&
-                metadata.column_header_y === this._config.split_by.length,
+                metadata.column_header_y === model._config.split_by.length,
         );
         td.classList.toggle(
             "psp-is-width-override",
@@ -185,7 +182,7 @@ export function styleColumnHeaderRow(
         );
 
         // Apply menu-open for selected column
-        if (this._config.columns.length > 1 && selectedColumn) {
+        if (model._config.columns.length > 1 && selectedColumn) {
             const isOpen =
                 metadata.column_header?.[metadata.column_header.length - 2] ===
                 selectedColumn;