@perspective-dev/viewer-datagrid 4.3.0 → 4.4.1

package/src/ts/types.ts

@@ -19,8 +19,12 @@ import type {
     ViewWindow,
     ViewConfigUpdate,
 } from "@perspective-dev/client";
-import { RegularTableElement } from "regular-table";
-import { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
+import type {
+    HTMLPerspectiveViewerElement,
+    ViewerConfig,
+} from "@perspective-dev/viewer";
+import type { RegularTableElement } from "regular-table";
+import type { CellMetadata, DataResponse } from "regular-table/dist/esm/types";
 
 // Re-export types from regular-table for use throughout the codebase
 export type { RegularTableElement as RegularTable };
@@ -46,7 +50,8 @@ export type EditMode =
     | "EDIT"
     | "SELECT_COLUMN"
     | "SELECT_ROW"
-    | "SELECT_REGION";
+    | "SELECT_REGION"
+    | "SELECT_ROW_TREE";
 
 // Color record for styling - tuple returned by make_color_record
 export type ColorRecord = [
@@ -162,10 +167,11 @@ export interface DatagridModel {
     _view: View;
     _table: Table;
     _table_schema: Schema;
-    _config: ViewConfig;
+    _config: ViewerConfig;
     _num_rows: number;
     _num_columns?: number;
     _schema: Schema;
+    _theme: string;
     _ids: unknown[][];
     _plugin_background: number[];
     _color: ColorRecord;
@@ -177,6 +183,8 @@ export interface DatagridModel {
     _column_types: ColumnType[];
     _is_editable: boolean[];
     _edit_mode: EditMode;
+    _tree_selection_id?: unknown[];
+    _last_insert_configs?: ViewConfigUpdate[];
     _selection_state: SelectionState;
     _row_header_types: ColumnType[];
     _series_color_map: Map<string, Map<string, number>>;
@@ -212,19 +220,6 @@ export type DataListener = (
 // Style listener function type
 export type StyleListener = () => void;
 
-// Perspective viewer element interface (subset)
-export interface PerspectiveViewerElement extends HTMLElement {
-    getView(): Promise<View>;
-    getTable(): Promise<Table>;
-    getEditPort(): Promise<number>;
-    restore(config: Partial<ViewConfig>): Promise<void>;
-    toggleColumnSettings(columnName?: string): Promise<void>;
-    hasAttribute(name: string): boolean;
-    setSelection(viewport?: ViewWindow): void;
-    dispatchEvent(event: Event): boolean;
-    children: HTMLCollectionOf<HTMLElement>;
-}
-
 // Toolbar element interface
 export interface DatagridToolbarElement extends HTMLElement {
     setEditButton(button: HTMLElement): void;
@@ -255,7 +250,7 @@ export interface PerspectiveClickDetail {
     config: Partial<ViewConfig>;
 }
 
-export { PerspectiveSelectDetail } from "@perspective-dev/viewer";
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer/src/ts/extensions.js";
 
 // Mouse event with handled flag
 export interface HandledMouseEvent extends MouseEvent {
@@ -281,9 +276,22 @@ export interface DatagridPluginElement extends HTMLElement {
     _reset_column_size?: boolean;
 }
 
-// Map types for selected rows and positions
-export type SelectedRowsMap = WeakMap<RegularTableElement, Set<number>>;
+// Map types for selected positions
 export type SelectedPositionMap = WeakMap<
     RegularTableElement,
     SelectedPosition
 >;
+
+// Centralized editable mode check - used by style handlers and event handlers
+export function isEditableMode(
+    model: DatagridModel,
+    viewer: HTMLPerspectiveViewerElement,
+    allowed: boolean = false,
+): boolean {
+    const has_pivots =
+        model._config.group_by.length === 0 &&
+        model._config.split_by.length === 0;
+    const plugin = viewer.children[0] as DatagridPluginElement | undefined;
+    const editable = allowed || plugin?._edit_mode === "EDIT";
+    return has_pivots && editable;
+}

package/dist/esm/event_handlers/deselect_all.d.ts

@@ -1,5 +0,0 @@
-import { RegularTableElement } from "regular-table";
-import type { PerspectiveViewerElement } from "../types.js";
-type SelectedRowsMap = Map<RegularTableElement, unknown[]>;
-export declare function deselect_all_listener(regularTable: RegularTableElement, _viewer: PerspectiveViewerElement, selected_rows_map: SelectedRowsMap): Promise<void>;
-export {};

package/dist/esm/event_handlers/row_select_click.d.ts

@@ -1,4 +0,0 @@
-import { type RegularTable, type DatagridModel, type PerspectiveViewerElement, type HandledMouseEvent } from "../types.js";
-type SelectedRowsMap = Map<RegularTable, unknown[]>;
-export declare function selectionListener(this: DatagridModel, regularTable: RegularTable, viewer: PerspectiveViewerElement, selected_rows_map: SelectedRowsMap, event: HandledMouseEvent): Promise<void>;
-export {};

package/src/less/mitered-headers.less

@@ -1,65 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-.psp-header-border:not(.psp-is-top):not(.psp-header-leaf) {
-    // right
-    box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
-}
-
-.psp-header-group {
-    // bottom
-    box-shadow: 0px 10px 0 -9px var(--inactive--border-color, #8b868045);
-}
-
-.psp-is-top {
-    // top-miter-right
-    box-shadow: 5px 4px 0px -4px var(--inactive--border-color, #8b868045);
-}
-
-.psp-is-top.psp-header-group:not(.psp-header-group-corner) {
-    // top-miter-right and bottom
-    box-shadow:
-        5px 4px 0px -4px var(--inactive--border-color, #8b868045),
-        0px 10px 0 -9px var(--inactive--border-color, #8b868045);
-}
-
-.psp-header-border.psp-header-group {
-    &:not(.psp-is-top):not(.psp-header-group-corner) {
-        // right and bottom
-        box-shadow:
-            1px 0px var(--inactive--border-color, #8b868045),
-            0px 10px 0 -9px var(--inactive--border-color, #8b868045);
-    }
-}
-
-@mixin disabled-menu-funky-box-shadow {
-    tr.rt-autosize .psp-header-leaf.psp-header-border:not(.psp-menu-enabled) {
-        box-shadow: 1px 0px var(--inactive--border-color, #8b868045);
-    }
-}
-
-perspective-viewer[settings] {
-    @include disabled-menu-funky-box-shadow;
-}
-
-:host-context(perspective-viewer[settings]) {
-    @include disabled-menu-funky-box-shadow;
-}
-
-.psp-header-leaf.psp-header-border {
-    // bottom-miter-right
-    box-shadow: 5px -4px 0px -4px var(--inactive--border-color, #8b868045);
-}
-
-tr:only-child th {
-    box-shadow: none !important;
-}

package/src/less/regular_table.less

@@ -1,526 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import "./pro.less";
-@import "./mitered-headers.less";
-@import "./row-hover.less";
-@import "./sub-cell-scroll.less";
-@import "./scrollbar.less";
-
-// Row Selection
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-// // TODO this makes the UI flash a CSS layout for a millsiecond when toggling
-// // settings butit could be fixed.
-
-// perspective-viewer:not([settings]) {
-//     @include settings-not-open;
-// }
-
-// :host-context(perspective-viewer:not([settings])) {
-//     @include settings-not-open;
-// }
-
-// @mixin settings-not-open {
-//     regular-table table tr.rt-autosize + tr th {
-//         height: 0px;
-//         span {
-//             display: none;
-//         }
-//     }
-// }
-
-@mixin settings-open {
-    .psp-menu-enabled {
-        padding: 0 6px;
-        font-size: 8px;
-        border-radius: 3px 3px 0 0;
-    }
-
-    .psp-menu-enabled:hover,
-    tr:not(.rt-autosize) th.psp-menu-open {
-        color: var(--plugin--background);
-        background-color: var(--icon--color);
-        border-bottom-color: var(--icon--color);
-        cursor: pointer;
-    }
-
-    tr:not(.rt-autosize) th.psp-menu-open {
-        &:before {
-            @include icon;
-            height: 8px;
-            width: 10px;
-            -webkit-mask-image: var(--column-settings-icon--mask-image);
-            mask-image: var(--column-settings-icon--mask-image);
-            margin-right: 4px;
-            background-color: var(--plugin--background);
-        }
-    }
-
-    td.psp-menu-open {
-        box-shadow:
-            inset -2px 0px 0px var(--icon--color),
-            inset 2px 0px 0px var(--icon--color);
-    }
-
-    tr:first-child td.psp-menu-open {
-        border-top-color: var(--icon--color) !important;
-    }
-
-    tr:last-child td.psp-menu-open {
-        box-shadow:
-            inset -2px 0px 0px var(--icon--color),
-            inset 2px 0px 0px var(--icon--color),
-            inset 0px -2px 0px var(--icon--color);
-    }
-}
-
-perspective-viewer {
-    @include settings-open;
-}
-
-:host {
-    @include settings-open;
-}
-
-@mixin viewer-table-styles {
-    regular-table table thead tr:last-child th {
-        border-bottom-width: 1px;
-        border-bottom-color: var(--inactive--border-color, #8b868045);
-    }
-}
-
-perspective-viewer {
-    @include viewer-table-styles;
-}
-
-:host-context(perspective-viewer) {
-    @include viewer-table-styles;
-}
-
-.psp-sort-enabled:hover {
-    cursor: pointer;
-}
-
-.psp-row-selected,
-:hover .psp-row-selected,
-:hover th.psp-tree-leaf.psp-row-selected,
-:hover th.psp-tree-label.psp-row-selected {
-    color: white !important;
-    background-color: var(--selected-row--background-color, #ea7319) !important;
-    border-color: var(--selected-row--background-color, #ea7319) !important;
-}
-
-regular-table.flat-group-rollup-mode.vertical-row-headers
-    th.psp-tree-label:not(:last-of-type) {
-    writing-mode: vertical-lr;
-}
-
-.psp-row-selected.psp-tree-label:not(:hover):before {
-    color: white;
-}
-
-regular-table:not(.flat-group-rollup-mode)
-    .psp-row-selected.psp-tree-label:not(:hover):before {
-    color: white;
-}
-
-.psp-row-subselected,
-:hover .psp-row-subselected,
-:hover th.psp-tree-leaf.psp-row-subselected,
-:hover th.psp-tree-label.psp-row-subselected {
-    background: rgba(234, 115, 25, 0.2) !important;
-}
-
-.psp-error {
-    color: red;
-}
-
-td:focus {
-    outline: #666;
-    outline-style: dotted;
-    outline-width: 1px;
-}
-
-@mixin table-no-dragging {
-    regular-table {
-        pointer-events: none;
-    }
-}
-perspective-viewer.dragging {
-    @include table-no-dragging;
-}
-:host-context(perspective-viewer.dragging) {
-    @include table-no-dragging;
-}
-
-.psp-header-border:last-child {
-    border-right-width: 0px;
-}
-
-.psp-header-sort-desc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-desc-icon--mask-image);
-    mask-image: var(--sort-desc-icon--mask-image);
-}
-
-.psp-header-sort-asc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-asc-icon--mask-image);
-    mask-image: var(--sort-asc-icon--mask-image);
-}
-
-.psp-header-sort-col-desc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-col-desc-icon--mask-image);
-    mask-image: var(--sort-col-desc-icon--mask-image);
-}
-
-.psp-header-sort-col-asc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-col-asc-icon--mask-image);
-    mask-image: var(--sort-col-asc-icon--mask-image);
-}
-
-.psp-header-sort-abs-desc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-desc-icon--mask-image);
-    mask-image: var(--sort-abs-desc-icon--mask-image);
-}
-
-.psp-header-sort-abs-asc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-asc-icon--mask-image);
-    mask-image: var(--sort-abs-asc-icon--mask-image);
-}
-
-.psp-header-sort-abs-col-desc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image);
-    mask-image: var(--sort-abs-col-desc-icon--mask-image);
-}
-
-.psp-header-sort-abs-col-asc:after {
-    @include icon;
-    width: 14px;
-    height: 11px;
-    margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image);
-    mask-image: var(--sort-abs-col-asc-icon--mask-image);
-}
-
-tbody th:last-of-type {
-    border-right: 1px solid var(--inactive--border-color, #8b868045);
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-tbody th:empty {
-    background-image: linear-gradient(
-        to right,
-        transparent 9px,
-        var(--inactive--border-color, #eee) 10px,
-        transparent 11px
-    );
-    background-repeat: no-repeat;
-    min-width: 20px;
-    max-width: 20px;
-    pointer-events: none;
-}
-
-regular-table:not(.flat-group-rollup-mode) {
-    .psp-tree-label {
-        max-width: 0px;
-        min-width: 0px;
-    }
-
-    .psp-tree-label:before {
-        color: var(--icon--color);
-        font-family: var(--button--font-family, inherit);
-        padding-right: 11px;
-    }
-
-    .psp-tree-label-expand:before {
-        content: var(--tree-label-expand--content, "+");
-    }
-
-    .psp-tree-label-collapse:before {
-        content: var(--tree-label-collapse--content, "-");
-    }
-
-    .psp-tree-label-expand,
-    .psp-tree-label-collapse {
-        cursor: pointer;
-    }
-
-    .psp-tree-label:hover:before {
-        color: var(--active--color);
-        text-shadow: 0px 0px 5px var(--active--color);
-    }
-}
-
-.psp-tree-leaf {
-    padding-left: 24px;
-}
-
-.psp-align-right {
-    text-align: right;
-}
-.psp-align-left {
-    text-align: left;
-}
-.psp-positive:not(:focus) {
-    color: var(--rt-pos-cell--color);
-}
-.psp-negative:not(:focus) {
-    color: var(--rt-neg-cell--color);
-}
-
-regular-table table tbody td {
-    min-width: 52px !important;
-}
-
-.psp-is-width-override .rt-column-resize,
-.rt-column-resize:hover {
-    border: 1px dashed #999;
-    border-bottom-width: 0px;
-    border-left-width: 0px;
-}
-
-.boolean-editable {
-    cursor: pointer;
-}
-
-regular-table table {
-    user-select: none;
-    color: inherit;
-    border-collapse: separate;
-
-    th {
-        font-weight: 400;
-    }
-
-    td,
-    th {
-        border-color: var(--inactive--border-color, #8b868045);
-        height: 23px;
-    }
-
-    .psp-header-group {
-        text-overflow: ellipsis;
-    }
-
-    th.psp-header-leaf {
-        border-bottom-width: 0px;
-        span {
-            height: 23px;
-            min-height: 23px;
-        }
-    }
-
-    td,
-    th.psp-tree-label,
-    th.psp-tree-label,
-    th.psp-tree-leaf,
-    tbody tr:first-child th {
-        border-style: solid;
-        border-width: 0px;
-        border-top-width: 1px;
-    }
-
-    tbody th:empty {
-        background-position: 0px -10px;
-    }
-
-    td.psp-select-region,
-    th.psp-select-region {
-        // transition: background-color 0.5s, color 0.5s, border-color 0.5s;
-        background-color: var(--icon--color) !important;
-        color: var(--plugin--background) !important;
-        border-color: var(--plugin--background) !important;
-    }
-}
-
-regular-table
-    tbody
-    tr:hover
-    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected),
-regular-table
-    tbody
-    tr:hover
-    + tr
-    td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) {
-    border-color: var(--plugin--background) !important;
-}
-
-regular-table tbody tr:hover {
-    td.psp-select-region.psp-menu-open {
-        &:not(.psp-row-selected):not(.psp-row-subselected) {
-            box-shadow:
-                inset -2px 0px 0px var(--plugin--background),
-                inset 2px 0px 0px var(--plugin--background);
-        }
-    }
-}
-
-:host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open {
-    box-shadow:
-        inset -2px 0px 0px var(--plugin--background),
-        inset 2px 0px 0px var(--plugin--background);
-}
-
-// This is a design/architecture bug. When the datagrid draws during a sidepanel
-// collapse/uncollapse, the `settings` attribute is set to the _previous_ state
-// as this collapse takes a while and we dont want the new state CSS to apply
-// until the drawing is done. However, this causes the datagrid to draw its
-// _first_ frame as if its in the wrong state, as it detects sidepanel state
-// via HTML attribute checking.
-@mixin design-slash-architecture-bug {
-    regular-table #psp-column-edit-buttons:after {
-        content: none;
-    }
-}
-
-regular-table
-    #psp-column-edit-buttons
-    th:not(.rt-group-corner)
-    span:not(.rt-column-resize):before {
-    content: var(--datagrid-column-edit-button--content, "Edit");
-}
-
-perspective-viewer:not([settings]) {
-    @include design-slash-architecture-bug;
-}
-
-:host-context(perspective-viewer:not([settings])) {
-    @include design-slash-architecture-bug;
-}
-
-// Style the last row of the `<thead>` so that is has a bottom border.
-regular-table table thead tr:last-child:after {
-    width: 10000px;
-    box-sizing: border-box;
-    display: block;
-    height: 23px;
-    content: " ";
-    border-bottom: 1px solid var(--inactive--border-color);
-}
-
-// Extend every row to the right edge of the page with a fake column.
-regular-table table tbody tr:after {
-    width: 10000px;
-    box-sizing: border-box;
-    display: block;
-    height: 23px;
-    content: " ";
-    border-top: 1px solid transparent;
-}
-
-regular-table table tbody tr:not(:first-child):after {
-    border-top: 1px solid var(--inactive--border-color);
-}
-
-regular-table table tbody tr:hover:not(:first-child):after {
-    border-top: 1px solid var(--rt-hover--border-color);
-}
-
-regular-table table tbody tr:hover + tr:after {
-    border-top: 1px solid var(--rt-hover--border-color);
-}
-
-@keyframes pulse_pos {
-    0% {
-        background-color: var(
-            --pulse--background-color-start,
-            rgba(0, 128, 255, 0.5)
-        );
-    }
-    100% {
-        background-color: var(
-            --pulse--background-color-end,
-            rgba(0, 128, 255, 0)
-        );
-    }
-}
-
-@keyframes pulse_pos2 {
-    0% {
-        background-color: var(
-            --pulse--background-color-start,
-            rgba(0, 128, 255, 0.5)
-        );
-    }
-    100% {
-        background-color: var(
-            --pulse--background-color-end,
-            rgba(0, 128, 255, 0)
-        );
-    }
-}
-
-@keyframes pulse_neg {
-    0% {
-        background-color: var(
-            --pulse--background-color-start,
-            rgba(255, 25, 0, 0.5)
-        );
-    }
-    100% {
-        background-color: var(
-            --pulse--background-color-end,
-            rgba(255, 25, 0, 0)
-        );
-    }
-}
-
-@keyframes pulse_neg2 {
-    0% {
-        background-color: var(
-            --pulse--background-color-start,
-            rgba(255, 25, 0, 0.5)
-        );
-    }
-    100% {
-        background-color: var(
-            --pulse--background-color-end,
-            rgba(255, 25, 0, 0)
-        );
-    }
-}