@1771technologies/lytenyte-pro 2.0.0-dev.0 → 2.0.0-dev.2

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

@@ -0,0 +1,279 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useEdgeScroll } from "../use-edge-scroll.js";
+import { getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-shared";
+import { getNearestFocusable, getPositionFromFocusable } from "@1771technologies/lytenyte-shared";
+import { isHTMLElement } from "@1771technologies/lytenyte-shared";
+import { updateAdditiveCellSelection } from "../update-additive-cell-selection.js";
+import { deselectRectRange } from "../deselect-rect-range.js";
+import { isWithinSelectionRect } from "../is-within-selection-rect.js";
+import { useProRoot } from "../../root/context.js";
+import { useRoot } from "@1771technologies/lytenyte-core/internal";
+import { useCellFocusChange } from "./use-cell-focus-change.js";
+import { adjustRectForRowAndCellSpan } from "../adjust-rect-for-row-and-cell-span.js";
+import { expandSelectionUp } from "../expand-selection-up.js";
+import { expandSelectionDown } from "../expand-selection-down.js";
+import { expandSelectionStart } from "../expand-selection-start.js";
+import { expandSelectionEnd } from "../expand-selection-end.js";
+function isNormalClick(event) {
+    return event.button === 0 && !event.altKey;
+}
+export function CellSelectionDriver() {
+    const { rtl, view, source, viewport, focusActive, id } = useRoot();
+    const { cellSelectionMode: mode, onCellSelectionChange, api, cellSelectionAdditiveRects, setCellSelectionAdditiveRects, cellSelections, cellSelectionIsDeselect, } = useProRoot();
+    const { excludeMarker, keepSelection } = useProRoot();
+    const { cancelX, cancelY, edgeScrollX, edgeScrollY } = useEdgeScroll();
+    const topCount = source.useTopCount();
+    const rowCount = source.useRowCount();
+    const botCount = source.useBottomCount();
+    useEffect(() => {
+        if (!viewport || mode === "none")
+            return;
+        const isMultiRange = mode === "multi-range";
+        let isAdditive = false;
+        let start = null;
+        let lastRect = null;
+        let animFrame = null;
+        let startY = null;
+        const gridId = id;
+        const pointerMove = (event) => {
+            if (animFrame)
+                cancelAnimationFrame(animFrame);
+            animFrame = requestAnimationFrame(() => {
+                animFrame = null;
+                if (!start)
+                    return;
+                const clientX = getClientX(event);
+                const clientY = getClientY(event);
+                // Check the target we moved over and ensure it is an HTML element.
+                if (!isHTMLElement(event.target))
+                    return;
+                // Get the focusable position for the currently hovered cell.
+                const focusable = getNearestFocusable(gridId, event.target);
+                if (!focusable)
+                    return;
+                const position = getPositionFromFocusable(gridId, focusable);
+                if (position.kind !== "cell" && position.kind !== "full-width")
+                    return;
+                const startCount = view.startCount;
+                const firstEnd = view.centerCount + startCount;
+                const centerCount = rowCount - topCount - botCount;
+                const firstEndRow = centerCount + topCount;
+                const relativeX = getRelativeXPosition(viewport, clientX);
+                const isRtl = rtl;
+                const visualX = isRtl ? relativeX.right : relativeX.left;
+                const rowIndex = position.rowIndex;
+                const columnIndex = position.colIndex;
+                const startColSection = start.columnStart < startCount ? "start" : start.columnStart >= firstEnd ? "end" : "center";
+                const colSection = columnIndex < startCount ? "start" : columnIndex >= firstEnd ? "end" : "center";
+                const rowSection = rowIndex < topCount ? "top" : rowIndex >= firstEnd ? "bottom" : "center";
+                const startRowSection = start.rowStart < topCount ? "top" : start.rowStart >= firstEndRow ? "bottom" : "center";
+                const isSameColPin = startColSection === colSection;
+                const isSameRowPin = startRowSection === rowSection;
+                edgeScrollX(visualX, isRtl);
+                const relativeY = getRelativeYPosition(viewport, clientY);
+                edgeScrollY(relativeY.top, startY);
+                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 rowSpan = position.kind === "full-width" || !position.root ? 1 : position.root.rowSpan;
+                const colSpan = position.kind === "full-width" || !position.root ? 1 : position.root.colSpan;
+                const rs = Math.min(rowIndex, start.rowStart);
+                const re = Math.max(rowIndex + rowSpan, start.rowEnd);
+                const ce = Math.max(columnIndex + colSpan, start.columnEnd);
+                let cs = Math.min(columnIndex, start.columnStart);
+                if (excludeMarker)
+                    cs = Math.max(cs, 1);
+                const active = { rowStart: rs, rowEnd: re, columnStart: cs, columnEnd: ce };
+                if (isAdditive) {
+                    updateAdditiveCellSelection(api, view, topCount, rowCount, botCount, active, cellSelectionAdditiveRects, setCellSelectionAdditiveRects);
+                }
+                else {
+                    onCellSelectionChange([adjustRectForRowAndCellSpan(api.cellRoot, active)]);
+                }
+                lastRect = active;
+            });
+        };
+        const pointerDown = (event) => {
+            if (!isNormalClick(event)) {
+                document.removeEventListener("pointermove", pointerMove);
+                // Prevent the default for the context menu, otherwise the cell
+                // right clicked will be focused,
+                // resulting in the cell selection changing.
+                if (event.button == 2)
+                    event.preventDefault();
+                return;
+            }
+            isAdditive = isMultiRange && (event.ctrlKey || event.metaKey);
+            const target = event.target;
+            if (!isHTMLElement(target))
+                return;
+            const focusable = getNearestFocusable(gridId, target);
+            if (!focusable)
+                return;
+            const position = getPositionFromFocusable(gridId, focusable);
+            if (position.kind !== "cell" && position.kind !== "full-width")
+                return;
+            const rowIndex = position.rowIndex;
+            const columnIndex = position.colIndex;
+            if (excludeMarker && columnIndex === 0)
+                return;
+            // 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) {
+                onCellSelectionChange([]);
+                return;
+            }
+            const isSelected = cellSelections.some((c) => isWithinSelectionRect(c, rowIndex, columnIndex));
+            const isDeselect = isAdditive && isSelected;
+            const rowSpan = position.kind === "full-width" || !position.root ? 1 : position.root.rowSpan;
+            const colSpan = position.kind === "full-width" || !position.root ? 1 : position.root.colSpan;
+            startY = getRelativeYPosition(viewport, event.clientY).top;
+            start = {
+                columnStart: columnIndex,
+                columnEnd: columnIndex + colSpan,
+                rowStart: rowIndex,
+                rowEnd: rowIndex + rowSpan,
+            };
+            // 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.
+            if (event.shiftKey) {
+                const position = focusActive.get();
+                if (position?.kind !== "cell")
+                    return;
+                const pivot = {
+                    rowStart: position.root ? position.root.rowIndex : position.rowIndex,
+                    rowEnd: position.root ? position.root.rowIndex + position.root.rowSpan : position.rowIndex + 1,
+                    columnStart: position.root ? position.root.colIndex : position.colIndex,
+                    columnEnd: position.root ? position.root.colIndex + position.root.colSpan : position.colIndex,
+                };
+                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);
+                onCellSelectionChange([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();
+            }
+            cellSelectionIsDeselect.current = isDeselect;
+            if (isAdditive) {
+                updateAdditiveCellSelection(api, view, topCount, rowCount, botCount, start, cellSelectionAdditiveRects, setCellSelectionAdditiveRects);
+            }
+            else {
+                onCellSelectionChange([adjustRectForRowAndCellSpan(api.cellRoot, start)]);
+            }
+            lastRect = start;
+            document.addEventListener("pointermove", pointerMove);
+            document.addEventListener("contextmenu", pointerUp);
+            document.addEventListener("pointerup", pointerUp);
+        };
+        const pointerUp = () => {
+            start = null;
+            if (isAdditive) {
+                const isDeselect = cellSelectionIsDeselect.current;
+                const rects = isDeselect
+                    ? cellSelections.flatMap((r) => deselectRectRange(r, lastRect))
+                    : [...cellSelections, lastRect];
+                onCellSelectionChange(rects);
+                setCellSelectionAdditiveRects(null);
+                cellSelectionIsDeselect.current = 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 start = rtl ? "ArrowRight" : "ArrowLeft";
+            const end = rtl ? "ArrowLeft" : "ArrowRight";
+            const position = focusActive.get();
+            // Select all
+            if (ev.key === "a" && (ev.ctrlKey || ev.metaKey)) {
+                if (!cellSelections.at(-1))
+                    return;
+                const next = {
+                    columnStart: excludeMarker ? 1 : 0,
+                    columnEnd: view.visibleColumns.length,
+                    rowStart: 0,
+                    rowEnd: rowCount,
+                };
+                const nextSelections = [...cellSelections];
+                nextSelections[nextSelections.length - 1] = next;
+                onCellSelectionChange(nextSelections);
+                ev.preventDefault();
+                ev.stopPropagation();
+                return;
+            }
+            if (!ev.shiftKey || position?.kind !== "cell")
+                return;
+            let handled = false;
+            if (ev.key === "ArrowUp") {
+                expandSelectionUp(api, cellSelections, onCellSelectionChange, ev.ctrlKey || ev.metaKey, position, rowCount);
+                handled = true;
+            }
+            else if (ev.key === "ArrowDown") {
+                expandSelectionDown(api, cellSelections, onCellSelectionChange, ev.ctrlKey || ev.metaKey, position, rowCount);
+                handled = true;
+            }
+            else if (ev.key === start) {
+                expandSelectionStart(api, cellSelections, onCellSelectionChange, ev.ctrlKey || ev.metaKey, position, excludeMarker, view);
+                handled = true;
+            }
+            else if (ev.key === end) {
+                expandSelectionEnd(api, cellSelections, onCellSelectionChange, ev.ctrlKey || ev.metaKey, position, view);
+                handled = true;
+            }
+            if (handled) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        };
+        viewport.addEventListener("keydown", handleKey);
+        return () => {
+            viewport.removeEventListener("pointerdown", pointerDown);
+            viewport.removeEventListener("keydown", handleKey);
+        };
+    }, [
+        api,
+        botCount,
+        cancelX,
+        cancelY,
+        cellSelectionAdditiveRects,
+        cellSelectionIsDeselect,
+        cellSelections,
+        edgeScrollX,
+        edgeScrollY,
+        excludeMarker,
+        focusActive,
+        id,
+        mode,
+        onCellSelectionChange,
+        rowCount,
+        rtl,
+        setCellSelectionAdditiveRects,
+        topCount,
+        view,
+        viewport,
+    ]);
+    useCellFocusChange(focusActive, excludeMarker, keepSelection, onCellSelectionChange, setCellSelectionAdditiveRects, api);
+    return _jsx(_Fragment, {});
+}

package/dist/cell-selection/cell-selection-driver/use-cell-focus-change.d.ts

@@ -0,0 +1,6 @@
+import type { PieceWritable } from "@1771technologies/lytenyte-core";
+import { type PositionUnion } from "@1771technologies/lytenyte-shared";
+import { type Dispatch, type SetStateAction } from "react";
+import type { DataRectSplit } from "../split-cell-selection-rect";
+import type { API, DataRect } from "../../types";
+export declare function useCellFocusChange(focusActive: PieceWritable<PositionUnion | null>, excludeMarker: boolean, keepSelection: boolean, onCellSelectionChange: (c: DataRect[]) => void, setCellSelectionAdditiveRects: Dispatch<SetStateAction<DataRectSplit[] | null>>, api: API): void;

package/dist/cell-selection/cell-selection-driver/use-cell-focus-change.js

@@ -0,0 +1,34 @@
+import { equal } from "@1771technologies/lytenyte-shared";
+import { useEffect, useRef } from "react";
+import { dataRectFromCellPosition } from "../data-rect-from-cell-position.js";
+import { adjustRectForRowAndCellSpan } from "../adjust-rect-for-row-and-cell-span.js";
+export function useCellFocusChange(focusActive, excludeMarker, keepSelection, onCellSelectionChange, setCellSelectionAdditiveRects, api) {
+    const focus = focusActive.useValue();
+    const prevRef = useRef(null);
+    useEffect(() => {
+        if (!focus)
+            return;
+        const prev = prevRef.current;
+        if (equal(prev, focus))
+            return;
+        prevRef.current = focus;
+        if (focus.colIndex === 0 && excludeMarker) {
+            return;
+        }
+        if (!keepSelection && focus?.kind !== "cell" && focus?.kind !== "full-width") {
+            onCellSelectionChange([]);
+            setCellSelectionAdditiveRects([]);
+        }
+        else if (focus.kind === "cell" || focus.kind === "full-width") {
+            const rect = focus.kind === "full-width"
+                ? {
+                    rowStart: focus.rowIndex,
+                    rowEnd: focus.rowIndex + 1,
+                    columnStart: focus.colIndex,
+                    columnEnd: focus.colIndex + 1,
+                }
+                : dataRectFromCellPosition(focus);
+            onCellSelectionChange([adjustRectForRowAndCellSpan(api.cellRoot, rect)]);
+        }
+    }, [api, excludeMarker, focus, keepSelection, onCellSelectionChange, setCellSelectionAdditiveRects]);
+}

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

@@ -0,0 +1,8 @@
+import type { DataRectSplit } from "./split-cell-selection-rect.js";
+export declare function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBottom, isPivot, }: {
+    rect: DataRectSplit;
+    isRowPinnedTop?: boolean;
+    isDeselect?: boolean;
+    isRowPinnedBottom?: boolean;
+    isPivot?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cell-selection/cell-style-row.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getTranslate, sizeFromCoord } from "@1771technologies/lytenyte-shared";
+import { useRoot } from "@1771technologies/lytenyte-core/internal";
+export function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBottom, isPivot, }) {
+    const { xPositions, yPositions, rtl, view, source, dimensions } = useRoot();
+    const startCount = view.startCount;
+    const centerCount = view.centerCount;
+    const rowCount = source.useRowCount();
+    const rowTopCount = source.useTopCount();
+    const rowBotCount = source.useBottomCount();
+    const vpWidth = dimensions.innerWidth;
+    const style = useMemo(() => {
+        const columnStart = rect.columnStart;
+        const columnEnd = rect.columnEnd;
+        const isStart = columnStart < startCount;
+        const isEnd = columnStart >= startCount + centerCount;
+        const isTop = isRowPinnedTop;
+        const isBot = isRowPinnedBottom;
+        const columnIndex = columnStart;
+        const rowIndex = rect.rowStart;
+        const width = sizeFromCoord(columnStart, xPositions, columnEnd - columnStart);
+        const height = sizeFromCoord(rect.rowStart, yPositions, rect.rowEnd - rect.rowStart);
+        const firstBotIndex = rowCount - rowBotCount;
+        const x = isEnd ? xPositions[columnIndex] - xPositions.at(-1) + vpWidth : xPositions[columnIndex];
+        let y;
+        if (isBot)
+            y = yPositions[rowIndex] - yPositions[firstBotIndex];
+        else if (isTop)
+            y = yPositions[rowIndex];
+        else {
+            y = `calc(${yPositions[rowIndex] - yPositions[rowTopCount]}px - var(--ln-y-offset, 0px))`;
+        }
+        const transform = getTranslate(x * (rtl ? -1 : 1), y);
+        const pinnedRow = isTop || isBot;
+        const pinnedCell = isStart || isEnd;
+        const style = {
+            height: height - 1, // Minus 1 because the bottom border is not included in cell heights.
+            width,
+            transform,
+            position: "absolute",
+            pointerEvents: "none",
+            top: 0,
+            zIndex: 1,
+            gridRowStart: "1",
+            gridRowEnd: "2",
+            gridColumnStart: "1",
+            gridColumnEnd: "2",
+        };
+        if (pinnedCell) {
+            style.insetInlineStart = "0px";
+            style.position = "sticky";
+            style.zIndex = pinnedRow ? 6 : 3;
+        }
+        if (pinnedRow) {
+            style.position = "sticky";
+            style.top = "0px";
+            style.zIndex = pinnedCell ? 6 : 3;
+        }
+        return style;
+    }, [
+        rect.columnStart,
+        rect.columnEnd,
+        rect.rowStart,
+        rect.rowEnd,
+        startCount,
+        centerCount,
+        isRowPinnedTop,
+        isRowPinnedBottom,
+        rowCount,
+        rowBotCount,
+        xPositions,
+        vpWidth,
+        yPositions,
+        rowTopCount,
+        rtl,
+    ]);
+    return (_jsx("div", { style: style, "data-ln-cell-selection-rect": true, "data-ln-cell-selection-is-deselect": isDeselect, "data-ln-cell-selection-is-pivot": isPivot, "data-ln-cell-selection-is-unit": rect.isUnit, "data-ln-cell-selection-border-top": rect.borderTop, "data-ln-cell-selection-border-bottom": rect.borderBottom, "data-ln-cell-selection-border-start": rect.borderStart, "data-ln-cell-selection-border-end": rect.borderEnd }));
+}

package/dist/cell-selection/data-rect-from-cell-position.d.ts

@@ -0,0 +1,3 @@
+import type { PositionGridCell } from "@1771technologies/lytenyte-shared";
+import type { DataRect } from "../types";
+export declare function dataRectFromCellPosition(position: PositionGridCell): DataRect;

package/dist/cell-selection/data-rect-from-cell-position.js

@@ -0,0 +1,17 @@
+export function dataRectFromCellPosition(position) {
+    if (position.root) {
+        const r = position.root;
+        return {
+            rowStart: r.rowIndex,
+            rowEnd: r.rowIndex + r.rowSpan,
+            columnStart: r.colIndex,
+            columnEnd: r.colIndex + r.colSpan,
+        };
+    }
+    return {
+        rowStart: position.rowIndex,
+        rowEnd: position.rowIndex + 1,
+        columnStart: position.colIndex,
+        columnEnd: position.colIndex + 1,
+    };
+}

package/dist/cell-selection/deselect-rect-range.d.ts

@@ -0,0 +1,2 @@
+import type { DataRect } from "../types/api.js";
+export declare function deselectRectRange(rect: DataRect, deselectRect: DataRect): DataRect[];

package/dist/cell-selection/deselect-rect-range.js

@@ -0,0 +1,43 @@
+import { isOverlappingRect } from "./is-overlapping-rect.js";
+export function deselectRectRange(rect, deselectRect) {
+    if (!isOverlappingRect(rect, deselectRect))
+        return [rect];
+    const result = [];
+    // Check for top split
+    if (deselectRect.rowStart > rect.rowStart) {
+        result.push({
+            rowStart: rect.rowStart,
+            rowEnd: deselectRect.rowStart,
+            columnStart: rect.columnStart,
+            columnEnd: rect.columnEnd,
+        });
+    }
+    // Check for bottom split
+    if (deselectRect.rowEnd < rect.rowEnd) {
+        result.push({
+            rowStart: deselectRect.rowEnd,
+            rowEnd: rect.rowEnd,
+            columnStart: rect.columnStart,
+            columnEnd: rect.columnEnd,
+        });
+    }
+    // Check for left split
+    if (deselectRect.columnStart > rect.columnStart) {
+        result.push({
+            rowStart: Math.max(deselectRect.rowStart, rect.rowStart),
+            rowEnd: Math.min(deselectRect.rowEnd, rect.rowEnd),
+            columnStart: rect.columnStart,
+            columnEnd: deselectRect.columnStart,
+        });
+    }
+    // Check for right split
+    if (deselectRect.columnEnd < rect.columnEnd) {
+        result.push({
+            rowStart: Math.max(deselectRect.rowStart, rect.rowStart),
+            rowEnd: Math.min(deselectRect.rowEnd, rect.rowEnd),
+            columnStart: deselectRect.columnEnd,
+            columnEnd: rect.columnEnd,
+        });
+    }
+    return result.filter((rect) => !(rect.rowStart >= rect.rowEnd || rect.columnStart >= rect.columnEnd));
+}

package/dist/cell-selection/expand-selection-down.d.ts

@@ -0,0 +1,3 @@
+import type { PositionGridCell } from "@1771technologies/lytenyte-shared";
+import type { API, DataRect } from "../types/api.js";
+export declare function expandSelectionDown(api: API, selections: DataRect[], setSelections: (d: DataRect[]) => void, meta: boolean, position: PositionGridCell, rowCount: number): void;

package/dist/cell-selection/expand-selection-down.js

@@ -0,0 +1,78 @@
+import { dataRectFromCellPosition } from "./data-rect-from-cell-position.js";
+import { isOverlappingRect } from "./is-overlapping-rect.js";
+import { isFullyWithinRect } from "./is-fully-within-rect.js";
+export function expandSelectionDown(api, selections, setSelections, meta, position, rowCount) {
+    const pos = dataRectFromCellPosition(position);
+    const rect = selections.at(-1);
+    if (!rect || !isOverlappingRect(rect, pos) || isFullyWithinRect(pos, rect))
+        return;
+    if (meta) {
+        const next = { ...rect, rowEnd: rowCount, rowStart: pos.rowStart };
+        const nextSelections = [...selections];
+        nextSelections[nextSelections.length - 1] = next;
+        setSelections(nextSelections);
+        if (pos.rowStart !== 0)
+            api.scrollIntoView({ row: rowCount - 1 });
+        return;
+    }
+    const isAtEdge = pos.rowStart == rect.rowStart || pos.rowEnd === rect.rowEnd;
+    let pivotStart = pos.rowStart;
+    let pivotEnd = pos.rowEnd;
+    // Our cell some how is spanned over. so for the current rowIndex, find the maximum span along the columns
+    if (!isAtEdge) {
+        for (let i = rect.columnStart; i < rect.columnEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(pos.rowStart, i));
+            pivotStart = Math.min(pivotStart, cell.rowStart);
+            pivotEnd = Math.max(pivotEnd, cell.rowEnd);
+        }
+    }
+    let next;
+    // Reduce our rect by one level
+    if (rect.rowStart < pivotStart) {
+        let highestRowEnd = -Infinity;
+        let setCell = rect;
+        for (let i = rect.columnStart; i < rect.columnEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(rect.rowStart + 1, i));
+            if (cell.rowStart > highestRowEnd) {
+                setCell = cell;
+                highestRowEnd = cell.rowStart;
+            }
+        }
+        api.scrollIntoView({ row: highestRowEnd });
+        next = {
+            ...rect,
+            rowStart: highestRowEnd,
+            columnStart: Math.min(setCell.columnStart, rect.columnStart),
+            columnEnd: Math.max(setCell.columnEnd, rect.columnEnd),
+        };
+    }
+    else {
+        // Move the rect level down by one.
+        let highestRowEnd = -Infinity;
+        let setCell = rect;
+        if (rect.rowEnd >= rowCount) {
+            highestRowEnd = rowCount;
+        }
+        else {
+            for (let i = rect.columnStart; i < rect.columnEnd; i++) {
+                const cell = dataRectFromCellPosition(api.cellRoot(rect.rowEnd, i));
+                highestRowEnd = Math.max(cell.rowEnd, highestRowEnd);
+                if (cell.rowEnd > highestRowEnd) {
+                    setCell = cell;
+                    highestRowEnd = cell.rowEnd;
+                }
+            }
+        }
+        api.scrollIntoView({ row: highestRowEnd - 1 });
+        next = {
+            ...rect,
+            rowEnd: highestRowEnd,
+            columnStart: Math.min(setCell.columnStart, rect.columnStart),
+            columnEnd: Math.max(setCell.columnEnd, rect.columnEnd),
+        };
+    }
+    const nextSelections = [...selections];
+    nextSelections[nextSelections.length - 1] = next;
+    setSelections(nextSelections);
+    return;
+}

package/dist/cell-selection/expand-selection-end.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnView, PositionGridCell } from "@1771technologies/lytenyte-shared";
+import type { API, DataRect } from "../types/api.js";
+export declare function expandSelectionEnd(api: API, selections: DataRect[], setSelections: (d: DataRect[]) => void, meta: boolean, position: PositionGridCell, view: ColumnView): void;

package/dist/cell-selection/expand-selection-end.js

@@ -0,0 +1,76 @@
+import { dataRectFromCellPosition } from "./data-rect-from-cell-position.js";
+import { isOverlappingRect } from "./is-overlapping-rect.js";
+import { isFullyWithinRect } from "./is-fully-within-rect.js";
+export function expandSelectionEnd(api, selections, setSelections, meta, position, view) {
+    const pos = dataRectFromCellPosition(position);
+    const rect = selections.at(-1);
+    if (!rect || !isOverlappingRect(rect, pos) || isFullyWithinRect(pos, rect))
+        return;
+    if (meta) {
+        const next = {
+            ...rect,
+            columnStart: pos.columnStart,
+            columnEnd: view.visibleColumns.length,
+        };
+        const nextSelections = [...selections];
+        nextSelections[nextSelections.length - 1] = next;
+        setSelections(nextSelections);
+        if (pos.columnStart !== 0)
+            api.scrollIntoView({ column: view.visibleColumns.length - 1 });
+        return;
+    }
+    const isAtEdge = pos.columnStart == rect.columnStart || pos.columnEnd === rect.columnEnd;
+    let pivotStart = pos.columnStart;
+    let pivotEnd = pos.columnEnd;
+    // Our cell some how is spanned over. so for the current rowIndex, find the maximum span along the columns
+    if (!isAtEdge) {
+        for (let i = rect.rowStart; i < rect.rowEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(pos.columnStart, i));
+            pivotStart = Math.min(pivotStart, cell.columnStart);
+            pivotEnd = Math.max(pivotEnd, cell.columnEnd);
+        }
+    }
+    let next;
+    if (rect.columnStart < pivotStart) {
+        let highestColEnd = -Infinity;
+        let setCell = rect;
+        for (let i = rect.rowStart; i < rect.rowEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(i, rect.columnStart + 1));
+            if (cell.columnStart > highestColEnd) {
+                highestColEnd = cell.columnStart;
+                setCell = cell;
+            }
+        }
+        next = {
+            ...rect,
+            columnStart: highestColEnd,
+            rowStart: Math.min(setCell.rowStart, rect.rowStart),
+            rowEnd: Math.max(setCell.rowEnd, rect.rowEnd),
+        };
+        api.scrollIntoView({ column: highestColEnd });
+    }
+    else {
+        if (rect.columnEnd === view.visibleColumns.length)
+            return;
+        let highestColEnd = -Infinity;
+        let setCell = rect;
+        for (let i = rect.rowStart; i < rect.rowEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(i, rect.columnEnd));
+            if (cell.columnStart > highestColEnd) {
+                highestColEnd = cell.columnStart;
+                setCell = cell;
+            }
+        }
+        next = {
+            ...rect,
+            columnEnd: highestColEnd + 1,
+            rowStart: Math.min(setCell.rowStart, rect.rowStart),
+            rowEnd: Math.max(setCell.rowEnd, rect.rowEnd),
+        };
+        api.scrollIntoView({ column: highestColEnd - 1 });
+    }
+    const nextSelections = [...selections];
+    nextSelections[nextSelections.length - 1] = next;
+    setSelections(nextSelections);
+    return;
+}

package/dist/cell-selection/expand-selection-start.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnView, PositionGridCell } from "@1771technologies/lytenyte-shared";
+import type { API, DataRect } from "../types/api.js";
+export declare function expandSelectionStart(api: API, selections: DataRect[], setSelections: (d: DataRect[]) => void, meta: boolean, position: PositionGridCell, excludeMarker: boolean, view: ColumnView): void;