@perspective-dev/viewer-datagrid 4.4.0 → 4.4.1

package/src/ts/event_handlers/focus.ts

@@ -10,54 +10,57 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { is_editable } from "./click.js";
 import { write_cell } from "./click/edit_click.js";
 import type {
     RegularTable,
     DatagridModel,
-    PerspectiveViewerElement,
     SelectedPosition,
+    SelectedPositionMap,
 } from "../types.js";
+import { isEditableMode } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
 
-type SelectedPositionMap = Map<RegularTable, SelectedPosition>;
-
-export function focusoutListener(
-    this: DatagridModel,
+export function createFocusoutListener(
+    model: DatagridModel,
     table: RegularTable,
-    viewer: PerspectiveViewerElement,
+    viewer: HTMLPerspectiveViewerElement,
     selected_position_map: SelectedPositionMap,
-    event: FocusEvent,
-): void {
-    if (is_editable.call(this, viewer) && selected_position_map.has(table)) {
-        const target = event.target as HTMLElement;
-        target.classList.remove("psp-error");
-        const selectedPosition = selected_position_map.get(table)!;
-        selected_position_map.delete(table);
-        if (selectedPosition.content !== target.textContent) {
-            if (!write_cell(table, this, target)) {
-                target.textContent = selectedPosition.content || "";
-                target.classList.add("psp-error");
-                target.focus();
+): EventListener {
+    return (event: Event): void => {
+        const focusEvent = event as FocusEvent;
+        if (isEditableMode(model, viewer) && selected_position_map.has(table)) {
+            const target = focusEvent.target as HTMLElement;
+            target.classList.remove("psp-error");
+            const selectedPosition = selected_position_map.get(table)!;
+            selected_position_map.delete(table);
+            if (selectedPosition.content !== target.textContent) {
+                if (!write_cell(table, model, target)) {
+                    target.textContent = selectedPosition.content || "";
+                    target.classList.add("psp-error");
+                    target.focus();
+                }
             }
         }
-    }
+    };
 }
 
-export function focusinListener(
-    this: DatagridModel,
+export function createFocusinListener(
+    _model: DatagridModel,
     table: RegularTable,
-    _viewer: PerspectiveViewerElement,
+    _viewer: HTMLPerspectiveViewerElement,
     selected_position_map: SelectedPositionMap,
-    event: FocusEvent,
-): void {
-    const target = event.target as HTMLElement;
-    const meta = table.getMeta(target);
-    if (meta?.type === "body") {
-        const new_state: SelectedPosition = {
-            x: meta.x,
-            y: meta.y,
-            content: target.textContent || undefined,
-        };
-        selected_position_map.set(table, new_state);
-    }
+): EventListener {
+    return (event: Event): void => {
+        const focusEvent = event as FocusEvent;
+        const target = focusEvent.target as HTMLElement;
+        const meta = table.getMeta(target);
+        if (meta?.type === "body") {
+            const new_state: SelectedPosition = {
+                x: meta.x,
+                y: meta.y,
+                content: target.textContent || undefined,
+            };
+            selected_position_map.set(table, new_state);
+        }
+    };
 }

package/src/ts/event_handlers/header_click.ts

@@ -12,74 +12,113 @@
 
 import { sortHandler } from "./sort.js";
 import { expandCollapseHandler } from "./expand_collapse.js";
-import type {
-    RegularTable,
-    DatagridModel,
-    PerspectiveViewerElement,
-} from "../types.js";
-
-export async function mousedown_listener(
-    this: DatagridModel,
+import type { RegularTable, DatagridModel } from "../types.js";
+import type { HTMLPerspectiveViewerElement } from "@perspective-dev/viewer";
+
+export function createMousedownListener(
+    model: DatagridModel,
     regularTable: RegularTable,
-    viewer: PerspectiveViewerElement,
-    event: MouseEvent,
-): Promise<void> {
-    if (event.which !== 1) {
-        return;
-    }
-
-    let target = event.target as HTMLElement | null;
-    if (target?.tagName === "A") {
-        return;
-    }
-
-    while (target && target.tagName !== "TD" && target.tagName !== "TH") {
-        target = target.parentElement;
-        if (!target || !regularTable.contains(target)) {
+    viewer: HTMLPerspectiveViewerElement,
+): EventListener {
+    return async (event: Event): Promise<void> => {
+        const mouseEvent = event as MouseEvent;
+        if (mouseEvent.which !== 1) {
+            return;
+        }
+
+        let target = mouseEvent.target as HTMLElement | null;
+        if (target?.tagName === "A") {
             return;
         }
-    }
-
-    if (!target) return;
-
-    if (target.classList.contains("psp-tree-label")) {
-        expandCollapseHandler.call(this, regularTable, event);
-        return;
-    }
-
-    if (target.classList.contains("psp-menu-enabled")) {
-        const meta = regularTable.getMeta(target);
-        const column_name = meta?.column_header?.[this._config.split_by.length];
-        await viewer.toggleColumnSettings(`${column_name}`);
-    } else if (target.classList.contains("psp-sort-enabled")) {
-        sortHandler.call(this, regularTable, viewer, event, target);
-    }
+
+        while (target && target.tagName !== "TD" && target.tagName !== "TH") {
+            target = target.parentElement;
+            if (!target || !regularTable.contains(target)) {
+                return;
+            }
+        }
+
+        if (!target) return;
+
+        if (target.classList.contains("psp-tree-label")) {
+            if (model._edit_mode !== "SELECT_ROW_TREE") {
+                expandCollapseHandler(model, regularTable, mouseEvent);
+            }
+
+            return;
+        }
+
+        if (target.classList.contains("psp-menu-enabled")) {
+            const meta = regularTable.getMeta(target);
+            const column_name =
+                meta?.column_header?.[model._config.split_by.length];
+            await viewer.toggleColumnSettings(`${column_name}`);
+        } else if (target.classList.contains("psp-sort-enabled")) {
+            sortHandler(model, regularTable, viewer, mouseEvent, target);
+        }
+    };
 }
 
-export function click_listener(
+export function createDblclickListener(
+    model: DatagridModel,
     regularTable: RegularTable,
-    event: MouseEvent,
-): void {
-    if (event.which !== 1) {
-        return;
-    }
-
-    let target = event.target as HTMLElement | null;
-    while (target && target.tagName !== "TD" && target.tagName !== "TH") {
-        target = target.parentElement;
-        if (!target || !regularTable.contains(target)) {
+    viewer: HTMLPerspectiveViewerElement,
+): EventListener {
+    return async (event: Event): Promise<void> => {
+        const mouseEvent = event as MouseEvent;
+        if (mouseEvent.which !== 1) {
+            return;
+        }
+
+        let target = mouseEvent.target as HTMLElement | null;
+        if (target?.tagName === "A") {
             return;
         }
-    }
-
-    if (!target) return;
-
-    if (target.classList.contains("psp-tree-label") && event.offsetX < 26) {
-        event.stopImmediatePropagation();
-    } else if (
-        target.classList.contains("psp-header-leaf") &&
-        !target.classList.contains("psp-header-corner")
-    ) {
-        event.stopImmediatePropagation();
-    }
+
+        while (target && target.tagName !== "TD" && target.tagName !== "TH") {
+            target = target.parentElement;
+            if (!target || !regularTable.contains(target)) {
+                return;
+            }
+        }
+
+        if (!target) return;
+
+        if (target.classList.contains("psp-tree-label")) {
+            if (model._edit_mode === "SELECT_ROW_TREE") {
+                expandCollapseHandler(model, regularTable, mouseEvent);
+            }
+        }
+    };
+}
+
+export function createClickListener(regularTable: RegularTable): EventListener {
+    return (event: Event): void => {
+        const mouseEvent = event as MouseEvent;
+        if (mouseEvent.which !== 1) {
+            return;
+        }
+
+        let target = mouseEvent.target as HTMLElement | null;
+        while (target && target.tagName !== "TD" && target.tagName !== "TH") {
+            target = target.parentElement;
+            if (!target || !regularTable.contains(target)) {
+                return;
+            }
+        }
+
+        if (!target) return;
+
+        if (
+            target.classList.contains("psp-tree-label") &&
+            mouseEvent.offsetX < 26
+        ) {
+            mouseEvent.stopImmediatePropagation();
+        } else if (
+            target.classList.contains("psp-header-leaf") &&
+            !target.classList.contains("psp-header-corner")
+        ) {
+            mouseEvent.stopImmediatePropagation();
+        }
+    };
 }

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,23 @@ 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;
         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,
@@ -77,8 +88,8 @@ const moveSelection = lock(async function (
 ): 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;
+    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 +133,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 +145,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 +158,8 @@ export function keydownListener(
                     -1,
                 );
             } else {
-                moveSelection.call(
-                    this,
+                moveSelection(
+                    model,
                     table,
                     selected_position_map,
                     target,
@@ -158,10 +169,10 @@ export function keydownListener(
             }
             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,
@@ -172,23 +183,16 @@ export function keydownListener(
             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,
@@ -199,14 +203,7 @@ export function keydownListener(
             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:
     }