@1771technologies/lytenyte-pro 1.0.0-beta.36 → 1.0.0-beta.37

package/dist/cell-selection/cell-selection-driver.js

@@ -2,13 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useGridRoot } from "../context";
 import { useEdgeScroll } from "./use-edge-scroll";
-import {
-  equal,
-  getClientX,
-  getClientY,
-  getRelativeXPosition,
-  getRelativeYPosition,
-} from "@1771technologies/lytenyte-js-utils";
+import { equal, getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-js-utils";
 import { getNearestFocusable, getPositionFromFocusable } from "@1771technologies/lytenyte-shared";
 import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 import { updateAdditiveCellSelection } from "./update-additive-cell-selection";
@@ -19,250 +13,268 @@ import { expandCellSelectionEnd } from "./expand-cell-selection-end";
 import { expandCellSelectionDown } from "./expand-cell-selection-down";
 import { expandCellSelectionUp } from "./expand-cell-selection-up";
 function isNormalClick(event) {
-  return event.button === 0 && !event.altKey;
+    return event.button === 0 && !event.altKey;
 }
 export function CellSelectionDriver() {
-  const cx = useGridRoot();
-  const grid = cx.grid;
-  const viewport = cx.grid.state.viewport.useValue();
-  const mode = cx.grid.state.cellSelectionMode.useValue();
-  const { cancelX, cancelY, edgeScrollX, edgeScrollY } = useEdgeScroll(cx.grid);
-  useEffect(() => {
-    if (!viewport || mode === "none") return;
-    const isMultiRange = mode === "multi-range";
-    let isAdditive = false;
-    let startSelection = null;
-    let pointerStartX = 0;
-    let pointerStartY = 0;
-    let lastRect = null;
-    let animFrame = null;
-    const pointerMove = (event) => {
-      if (animFrame) cancelAnimationFrame(animFrame);
-      animFrame = requestAnimationFrame(() => {
-        animFrame = null;
-        const clientX = getClientX(event);
-        const clientY = getClientY(event);
-        const target = event.target;
-        if (!isHTMLElement(target)) return;
-        const focusable = getNearestFocusable(target);
-        if (!focusable) return;
-        const position = getPositionFromFocusable(focusable);
-        if (position.kind !== "cell" && position.kind !== "full-width") return;
-        const rowIndex = position.rowIndex;
-        const columnIndex = position.colIndex;
-        if (pointerStartX != null && pointerStartY != null) {
-          const moveDeltaX = Math.abs(pointerStartX - clientX);
-          const moveDeltaY = Math.abs(pointerStartY - clientY);
-          if (moveDeltaX < 20 && moveDeltaY < 20) return;
-          pointerStartX = null;
-          pointerStartY = null;
-        }
-        if (!startSelection) return;
-        const meta = grid.state.columnMeta.get();
-        const startCount = meta.columnVisibleStartCount;
-        const firstEnd = meta.columnVisibleCenterCount + startCount;
-        const ds = grid.state.rowDataStore;
-        const topCount = ds.rowTopCount.get();
-        const centerCount = ds.rowCenterCount.get();
-        const firstEndRow = centerCount + topCount;
-        const relativeX = getRelativeXPosition(viewport, clientX);
-        const isRtl = grid.state.rtl.get();
-        const visualX = isRtl ? relativeX.right : relativeX.left;
-        const startColSection =
-          startSelection.columnStart < startCount
-            ? "start"
-            : startSelection.columnStart >= firstEnd
-              ? "end"
-              : "center";
-        const colSection =
-          columnIndex < startCount ? "start" : columnIndex >= firstEnd ? "end" : "center";
-        const rowSection = rowIndex < topCount ? "top" : rowIndex >= firstEnd ? "bottom" : "center";
-        const startRowSection =
-          startSelection.rowStart < topCount
-            ? "top"
-            : startSelection.rowStart >= firstEndRow
-              ? "bottom"
-              : "center";
-        const isSameColPin = startColSection === colSection;
-        const isSameRowPin = startRowSection === rowSection;
-        edgeScrollX(visualX, isRtl);
-        const relativeY = getRelativeYPosition(viewport, clientY);
-        edgeScrollY(relativeY.top);
-        const scrollY = viewport.scrollTop;
-        if (!isSameRowPin && rowIndex < topCount && scrollY > 0) return;
-        const maxScroll = viewport.scrollHeight - viewport.clientHeight - 4;
-        if (!isSameRowPin && rowIndex > topCount + centerCount - 1 && scrollY < maxScroll) return;
-        const scrollX = Math.abs(viewport.scrollLeft);
-        if (!isSameColPin && columnIndex < startCount && scrollX > 0) return;
-        const maxScrollX = viewport.scrollWidth - viewport.clientWidth - 4;
-        if (!isSameColPin && columnIndex >= firstEnd && scrollX < maxScrollX) return;
-        const startRow = rowIndex < startSelection.rowStart ? rowIndex : startSelection.rowStart;
-        const endRow = rowIndex < startSelection.rowStart ? startSelection.rowEnd : rowIndex + 1;
-        const startCol =
-          columnIndex < startSelection.columnStart ? columnIndex : startSelection.columnStart;
-        const endCol =
-          columnIndex < startSelection.columnStart ? startSelection.columnEnd : columnIndex + 1;
-        const active = [
-          { rowStart: startRow, rowEnd: endRow, columnStart: startCol, columnEnd: endCol },
-        ];
-        if (isAdditive) {
-          updateAdditiveCellSelection(grid, active[0]);
-        } else {
-          grid.state.cellSelections.set(active);
-        }
-        lastRect = active[0];
-      });
-    };
-    const pointerDown = (event) => {
-      if (!isNormalClick(event)) {
-        document.removeEventListener("pointermove", pointerMove);
-        event.preventDefault();
-        return;
-      }
-      isAdditive = isMultiRange && (event.ctrlKey || event.metaKey);
-      const target = event.target;
-      if (!isHTMLElement(target)) return;
-      const focusable = getNearestFocusable(target);
-      if (!focusable) return;
-      const position = getPositionFromFocusable(focusable);
-      if (position.kind !== "cell" && position.kind !== "full-width") return;
-      const rowIndex = position.rowIndex;
-      const columnIndex = position.colIndex;
-      // If the columnIndex or rowIndex is null then we haven't clicked a valid cell position.
-      // This ends the row selection.
-      if (columnIndex == null || rowIndex == null) {
-        grid.state.cellSelections.set([]);
-        grid.internal.cellSelectionPivot.set(null);
-        return;
-      }
-      const isSelected = grid.state.cellSelections
-        .get()
-        .some((c) => isWithinSelectionRect(c, rowIndex, columnIndex));
-      const isDeselect = isAdditive && isSelected;
-      pointerStartX = event.clientX;
-      pointerStartY = event.clientY;
-      startSelection = {
-        columnStart: columnIndex,
-        columnEnd: columnIndex + 1,
-        rowStart: rowIndex,
-        rowEnd: rowIndex + 1,
-      };
-      // If shift key down we select an area. We can only select an area if a pivot has been established.
-      // The pivot will always expand the last cell selection rect if there are multiple ones.
-      const pivot = grid.internal.cellSelectionPivot.get();
-      if (event.shiftKey && pivot) {
-        const active = { ...pivot };
-        active.columnStart = Math.min(columnIndex, active.columnStart);
-        active.columnEnd = Math.max(columnIndex + 1, active.columnEnd);
-        active.rowStart = Math.min(rowIndex, active.rowStart);
-        active.rowEnd = Math.max(rowIndex + 1, active.rowEnd);
-        grid.state.cellSelections.set([active]);
-        // We need to prevent the default otherwise the cell to go to will be
-        // focused. This leads to awkward behavior around the cell selection pivot
-        event.preventDefault();
-        return;
-      }
-      // We need to prevent the default for multi
-      if (mode === "multi-range" && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault();
-      }
-      if (!isDeselect && grid.state.cellSelections.get().length <= 1)
-        grid.internal.cellSelectionPivot.set(startSelection);
-      grid.internal.cellSelectionIsDeselect.set(isDeselect);
-      if (isAdditive) {
-        updateAdditiveCellSelection(grid, startSelection);
-      } else {
-        grid.state.cellSelections.set([startSelection]);
-      }
-      lastRect = startSelection;
-      document.addEventListener("pointermove", pointerMove);
-      document.addEventListener("contextmenu", pointerUp);
-      document.addEventListener("pointerup", pointerUp);
-    };
-    const pointerUp = () => {
-      startSelection = null;
-      if (isAdditive) {
-        const isDeselect = grid.internal.cellSelectionIsDeselect.get();
-        const rects = isDeselect
-          ? grid.state.cellSelections.get().flatMap((r) => deselectRectRange(r, lastRect))
-          : [...grid.state.cellSelections.get(), lastRect];
-        grid.state.cellSelections.set(rects);
-        grid.internal.cellSelectionAdditiveRects.set(null);
-        grid.internal.cellSelectionIsDeselect.set(false);
-        isAdditive = false;
-      }
-      cancelX();
-      cancelY();
-      document.removeEventListener("pointerup", pointerUp);
-      document.removeEventListener("contextmenu", pointerUp);
-      document.removeEventListener("pointermove", pointerMove);
-    };
-    viewport.addEventListener("pointerdown", pointerDown);
-    const handleKey = (ev) => {
-      const rtl = grid.state.rtl.get();
-      const start = rtl ? "ArrowRight" : "ArrowLeft";
-      const end = rtl ? "ArrowLeft" : "ArrowRight";
-      if (!ev.shiftKey) return;
-      let handled = false;
-      if (ev.key === start) {
-        expandCellSelectionStart(grid, ev.ctrlKey || ev.metaKey);
-        handled = true;
-      } else if (ev.key === end) {
-        expandCellSelectionEnd(grid, ev.ctrlKey || ev.metaKey);
-        handled = true;
-      } else if (ev.key === "ArrowDown") {
-        expandCellSelectionDown(grid, ev.ctrlKey || ev.metaKey);
-        handled = true;
-      } else if (ev.key === "ArrowUp") {
-        expandCellSelectionUp(grid, ev.ctrlKey || ev.metaKey);
-        handled = true;
-      }
-      if (handled) {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-    };
-    viewport.addEventListener("keydown", handleKey);
-    return () => {
-      viewport.removeEventListener("pointerdown", pointerDown);
-      viewport.removeEventListener("keydown", handleKey);
-    };
-  }, [cancelX, cancelY, edgeScrollX, edgeScrollY, grid, mode, viewport]);
-  useEffect(() => {
-    let prev = null;
-    return grid.internal.focusActive.watch(() => {
-      const focus = grid.internal.focusActive.get();
-      // If the focus is null, then we should just return. This keeps the existing selection
-      // in place - for things like copy and paste.
-      if (!focus) return;
-      if (equal(prev, focus)) return;
-      prev = focus;
-      if (focus?.kind !== "cell" && focus?.kind !== "full-width") {
-        grid.state.cellSelections.set([]);
-        grid.internal.cellSelectionPivot.set(null);
-        grid.internal.cellSelectionAdditiveRects.set([]);
-      } else {
-        grid.state.cellSelections.set([
-          {
-            rowStart: focus.rowIndex,
-            rowEnd: focus.rowIndex + 1,
-            columnStart: focus.colIndex,
-            columnEnd: focus.colIndex + 1,
-          },
-        ]);
-        grid.internal.cellSelectionPivot.set({
-          rowStart: focus.rowIndex,
-          rowEnd: focus.rowIndex + 1,
-          columnStart: focus.colIndex,
-          columnEnd: focus.colIndex + 1,
+    const cx = useGridRoot();
+    const grid = cx.grid;
+    const viewport = cx.grid.state.viewport.useValue();
+    const mode = cx.grid.state.cellSelectionMode.useValue();
+    const { cancelX, cancelY, edgeScrollX, edgeScrollY } = useEdgeScroll(cx.grid);
+    useEffect(() => {
+        if (!viewport || mode === "none")
+            return;
+        const isMultiRange = mode === "multi-range";
+        let isAdditive = false;
+        let startSelection = null;
+        let pointerStartX = 0;
+        let pointerStartY = 0;
+        let lastRect = null;
+        let animFrame = null;
+        const pointerMove = (event) => {
+            if (animFrame)
+                cancelAnimationFrame(animFrame);
+            animFrame = requestAnimationFrame(() => {
+                animFrame = null;
+                const clientX = getClientX(event);
+                const clientY = getClientY(event);
+                const target = event.target;
+                if (!isHTMLElement(target))
+                    return;
+                const focusable = getNearestFocusable(target);
+                if (!focusable)
+                    return;
+                const position = getPositionFromFocusable(focusable);
+                if (position.kind !== "cell" && position.kind !== "full-width")
+                    return;
+                const rowIndex = position.rowIndex;
+                const columnIndex = position.colIndex;
+                if (pointerStartX != null && pointerStartY != null) {
+                    const moveDeltaX = Math.abs(pointerStartX - clientX);
+                    const moveDeltaY = Math.abs(pointerStartY - clientY);
+                    if (moveDeltaX < 20 && moveDeltaY < 20)
+                        return;
+                    pointerStartX = null;
+                    pointerStartY = null;
+                }
+                if (!startSelection)
+                    return;
+                const meta = grid.state.columnMeta.get();
+                const startCount = meta.columnVisibleStartCount;
+                const firstEnd = meta.columnVisibleCenterCount + startCount;
+                const ds = grid.state.rowDataStore;
+                const topCount = ds.rowTopCount.get();
+                const centerCount = ds.rowCenterCount.get();
+                const firstEndRow = centerCount + topCount;
+                const relativeX = getRelativeXPosition(viewport, clientX);
+                const isRtl = grid.state.rtl.get();
+                const visualX = isRtl ? relativeX.right : relativeX.left;
+                const startColSection = startSelection.columnStart < startCount
+                    ? "start"
+                    : startSelection.columnStart >= firstEnd
+                        ? "end"
+                        : "center";
+                const colSection = columnIndex < startCount ? "start" : columnIndex >= firstEnd ? "end" : "center";
+                const rowSection = rowIndex < topCount ? "top" : rowIndex >= firstEnd ? "bottom" : "center";
+                const startRowSection = startSelection.rowStart < topCount
+                    ? "top"
+                    : startSelection.rowStart >= firstEndRow
+                        ? "bottom"
+                        : "center";
+                const isSameColPin = startColSection === colSection;
+                const isSameRowPin = startRowSection === rowSection;
+                edgeScrollX(visualX, isRtl);
+                const relativeY = getRelativeYPosition(viewport, clientY);
+                edgeScrollY(relativeY.top);
+                const scrollY = viewport.scrollTop;
+                if (!isSameRowPin && rowIndex < topCount && scrollY > 0)
+                    return;
+                const maxScroll = viewport.scrollHeight - viewport.clientHeight - 4;
+                if (!isSameRowPin && rowIndex > topCount + centerCount - 1 && scrollY < maxScroll)
+                    return;
+                const scrollX = Math.abs(viewport.scrollLeft);
+                if (!isSameColPin && columnIndex < startCount && scrollX > 0)
+                    return;
+                const maxScrollX = viewport.scrollWidth - viewport.clientWidth - 4;
+                if (!isSameColPin && columnIndex >= firstEnd && scrollX < maxScrollX)
+                    return;
+                const startRow = rowIndex < startSelection.rowStart ? rowIndex : startSelection.rowStart;
+                const endRow = rowIndex < startSelection.rowStart ? startSelection.rowEnd : rowIndex + 1;
+                const startCol = columnIndex < startSelection.columnStart ? columnIndex : startSelection.columnStart;
+                const endCol = columnIndex < startSelection.columnStart ? startSelection.columnEnd : columnIndex + 1;
+                const active = [
+                    { rowStart: startRow, rowEnd: endRow, columnStart: startCol, columnEnd: endCol },
+                ];
+                if (isAdditive) {
+                    updateAdditiveCellSelection(grid, active[0]);
+                }
+                else {
+                    grid.state.cellSelections.set(active);
+                }
+                lastRect = active[0];
+            });
+        };
+        const pointerDown = (event) => {
+            if (!isNormalClick(event)) {
+                document.removeEventListener("pointermove", pointerMove);
+                event.preventDefault();
+                return;
+            }
+            isAdditive = isMultiRange && (event.ctrlKey || event.metaKey);
+            const target = event.target;
+            if (!isHTMLElement(target))
+                return;
+            const focusable = getNearestFocusable(target);
+            if (!focusable)
+                return;
+            const position = getPositionFromFocusable(focusable);
+            if (position.kind !== "cell" && position.kind !== "full-width")
+                return;
+            const rowIndex = position.rowIndex;
+            const columnIndex = position.colIndex;
+            // If the columnIndex or rowIndex is null then we haven't clicked a valid cell position.
+            // This ends the row selection.
+            if (columnIndex == null || rowIndex == null) {
+                grid.state.cellSelections.set([]);
+                grid.internal.cellSelectionPivot.set(null);
+                return;
+            }
+            const isSelected = grid.state.cellSelections
+                .get()
+                .some((c) => isWithinSelectionRect(c, rowIndex, columnIndex));
+            const isDeselect = isAdditive && isSelected;
+            pointerStartX = event.clientX;
+            pointerStartY = event.clientY;
+            startSelection = {
+                columnStart: columnIndex,
+                columnEnd: columnIndex + 1,
+                rowStart: rowIndex,
+                rowEnd: rowIndex + 1,
+            };
+            // If shift key down we select an area. We can only select an area if a pivot has been established.
+            // The pivot will always expand the last cell selection rect if there are multiple ones.
+            const pivot = grid.internal.cellSelectionPivot.get();
+            if (event.shiftKey && pivot) {
+                const active = { ...pivot };
+                active.columnStart = Math.min(columnIndex, active.columnStart);
+                active.columnEnd = Math.max(columnIndex + 1, active.columnEnd);
+                active.rowStart = Math.min(rowIndex, active.rowStart);
+                active.rowEnd = Math.max(rowIndex + 1, active.rowEnd);
+                grid.state.cellSelections.set([active]);
+                // We need to prevent the default otherwise the cell to go to will be
+                // focused. This leads to awkward behavior around the cell selection pivot
+                event.preventDefault();
+                return;
+            }
+            // We need to prevent the default for multi
+            if (mode === "multi-range" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+            }
+            if (!isDeselect && grid.state.cellSelections.get().length <= 1)
+                grid.internal.cellSelectionPivot.set(startSelection);
+            grid.internal.cellSelectionIsDeselect.set(isDeselect);
+            if (isAdditive) {
+                updateAdditiveCellSelection(grid, startSelection);
+            }
+            else {
+                grid.state.cellSelections.set([startSelection]);
+            }
+            lastRect = startSelection;
+            document.addEventListener("pointermove", pointerMove);
+            document.addEventListener("contextmenu", pointerUp);
+            document.addEventListener("pointerup", pointerUp);
+        };
+        const pointerUp = () => {
+            startSelection = null;
+            if (isAdditive) {
+                const isDeselect = grid.internal.cellSelectionIsDeselect.get();
+                const rects = isDeselect
+                    ? grid.state.cellSelections.get().flatMap((r) => deselectRectRange(r, lastRect))
+                    : [...grid.state.cellSelections.get(), lastRect];
+                grid.state.cellSelections.set(rects);
+                grid.internal.cellSelectionAdditiveRects.set(null);
+                grid.internal.cellSelectionIsDeselect.set(false);
+                isAdditive = false;
+            }
+            cancelX();
+            cancelY();
+            document.removeEventListener("pointerup", pointerUp);
+            document.removeEventListener("contextmenu", pointerUp);
+            document.removeEventListener("pointermove", pointerMove);
+        };
+        viewport.addEventListener("pointerdown", pointerDown);
+        const handleKey = (ev) => {
+            const rtl = grid.state.rtl.get();
+            const start = rtl ? "ArrowRight" : "ArrowLeft";
+            const end = rtl ? "ArrowLeft" : "ArrowRight";
+            if (!ev.shiftKey)
+                return;
+            let handled = false;
+            if (ev.key === start) {
+                expandCellSelectionStart(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            else if (ev.key === end) {
+                expandCellSelectionEnd(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            else if (ev.key === "ArrowDown") {
+                expandCellSelectionDown(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            else if (ev.key === "ArrowUp") {
+                expandCellSelectionUp(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            if (handled) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        };
+        viewport.addEventListener("keydown", handleKey);
+        return () => {
+            viewport.removeEventListener("pointerdown", pointerDown);
+            viewport.removeEventListener("keydown", handleKey);
+        };
+    }, [cancelX, cancelY, edgeScrollX, edgeScrollY, grid, mode, viewport]);
+    useEffect(() => {
+        let prev = null;
+        return grid.internal.focusActive.watch(() => {
+            const focus = grid.internal.focusActive.get();
+            // If the focus is null, then we should just return. This keeps the existing selection
+            // in place - for things like copy and paste.
+            if (!focus)
+                return;
+            if (equal(prev, focus))
+                return;
+            prev = focus;
+            if (focus?.kind !== "cell" && focus?.kind !== "full-width") {
+                grid.state.cellSelections.set([]);
+                grid.internal.cellSelectionPivot.set(null);
+                grid.internal.cellSelectionAdditiveRects.set([]);
+            }
+            else {
+                grid.state.cellSelections.set([
+                    {
+                        rowStart: focus.rowIndex,
+                        rowEnd: focus.rowIndex + 1,
+                        columnStart: focus.colIndex,
+                        columnEnd: focus.colIndex + 1,
+                    },
+                ]);
+                grid.internal.cellSelectionPivot.set({
+                    rowStart: focus.rowIndex,
+                    rowEnd: focus.rowIndex + 1,
+                    columnStart: focus.colIndex,
+                    columnEnd: focus.colIndex + 1,
+                });
+            }
         });
-      }
-    });
-  }, [
-    grid.internal.cellSelectionAdditiveRects,
-    grid.internal.cellSelectionPivot,
-    grid.internal.focusActive,
-    grid.state.cellSelections,
-  ]);
-  return _jsx(_Fragment, {});
+    }, [
+        grid.internal.cellSelectionAdditiveRects,
+        grid.internal.cellSelectionPivot,
+        grid.internal.focusActive,
+        grid.state.cellSelections,
+    ]);
+    return _jsx(_Fragment, {});
 }

package/dist/cell-selection/cell-style-row.d.ts

@@ -1,14 +1,8 @@
 import type { DataRect } from "../+types";
-export declare function CellStyleRow({
-  rect,
-  isRowPinnedTop,
-  isDeselect,
-  isRowPinnedBottom,
-  isPivot,
-}: {
-  rect: DataRect;
-  isRowPinnedTop?: boolean;
-  isDeselect?: boolean;
-  isRowPinnedBottom?: boolean;
-  isPivot?: boolean;
+export declare function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBottom, isPivot, }: {
+    rect: DataRect;
+    isRowPinnedTop?: boolean;
+    isDeselect?: boolean;
+    isRowPinnedBottom?: boolean;
+    isPivot?: boolean;
 }): import("react/jsx-runtime").JSX.Element;