@glideappsfinal/glide-data-grid 6.0.9

package/src/common/browser-detect.ts

@@ -0,0 +1,25 @@
+class Lazy<T> {
+    private fn: () => T;
+    private val: T | undefined;
+    constructor(fn: () => T) {
+        this.fn = fn;
+    }
+
+    public get value() {
+        return this.val ?? (this.val = this.fn());
+    }
+}
+
+function lazy<T>(fn: () => T) {
+    return new Lazy(fn);
+}
+
+// next.js apps don't have window available at import time, so this will fail if its not lazy.
+export const browserIsFirefox = lazy(() => window.navigator.userAgent.includes("Firefox"));
+export const browserIsSafari = lazy(
+    () =>
+        window.navigator.userAgent.includes("Mac OS") &&
+        window.navigator.userAgent.includes("Safari") &&
+        !window.navigator.userAgent.includes("Chrome")
+);
+export const browserIsOSX = lazy(() => window.navigator.platform.toLowerCase().startsWith("mac"));

package/src/common/image-window-loader.ts

@@ -0,0 +1,114 @@
+import { CellSet } from "../internal/data-grid/cell-set.js";
+import throttle from "lodash/throttle.js";
+import { packColRowToNumber, unpackNumberToColRow, WindowingTrackerBase } from "./render-state-provider.js";
+import type { ImageWindowLoader } from "../internal/data-grid/image-window-loader-interface.js";
+
+interface LoadResult {
+    img: HTMLImageElement | undefined;
+    cancel: () => void;
+    url: string;
+    cells: number[];
+}
+
+const imgPool: HTMLImageElement[] = [];
+
+class ImageWindowLoaderImpl extends WindowingTrackerBase implements ImageWindowLoader {
+    private imageLoaded: (locations: CellSet) => void = () => undefined;
+    private loadedLocations: [number, number][] = [];
+
+    private cache: Record<string, LoadResult> = {};
+
+    public setCallback(imageLoaded: (locations: CellSet) => void) {
+        this.imageLoaded = imageLoaded;
+    }
+
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    private sendLoaded = throttle(() => {
+        this.imageLoaded(new CellSet(this.loadedLocations));
+        this.loadedLocations = [];
+    }, 20);
+
+    protected clearOutOfWindow = () => {
+        const keys = Object.keys(this.cache);
+        for (const key of keys) {
+            const obj = this.cache[key];
+
+            let keep = false;
+            for (let j = 0; j < obj.cells.length; j++) {
+                const packed = obj.cells[j];
+                if (this.isInWindow(packed)) {
+                    keep = true;
+                    break;
+                }
+            }
+
+            if (keep) {
+                obj.cells = obj.cells.filter(this.isInWindow);
+            } else {
+                obj.cancel();
+                delete this.cache[key];
+            }
+        }
+    };
+
+    private loadImage(url: string, col: number, row: number, key: string) {
+        let loaded = false;
+        const img = imgPool.pop() ?? new Image();
+
+        let canceled = false;
+        const result: LoadResult = {
+            img: undefined,
+            cells: [packColRowToNumber(col, row)],
+            url,
+            cancel: () => {
+                if (canceled) return;
+                canceled = true;
+                if (imgPool.length < 12) {
+                    imgPool.unshift(img); // never retain more than 12
+                } else if (!loaded) {
+                    img.src = "";
+                }
+            },
+        };
+
+        const loadPromise = new Promise(r => img.addEventListener("load", () => r(null)));
+        // use request animation time to avoid paying src set costs during draw calls
+        requestAnimationFrame(async () => {
+            try {
+                img.src = url;
+                await loadPromise;
+                await img.decode();
+                const toWrite = this.cache[key];
+                if (toWrite !== undefined && !canceled) {
+                    toWrite.img = img;
+                    for (const packed of toWrite.cells) {
+                        this.loadedLocations.push(unpackNumberToColRow(packed));
+                    }
+                    loaded = true;
+                    this.sendLoaded();
+                }
+            } catch {
+                result.cancel();
+            }
+        });
+        this.cache[key] = result;
+    }
+
+    public loadOrGetImage(url: string, col: number, row: number): HTMLImageElement | ImageBitmap | undefined {
+        const key = url;
+
+        const current = this.cache[key];
+        if (current !== undefined) {
+            const packed = packColRowToNumber(col, row);
+            if (!current.cells.includes(packed)) {
+                current.cells.push(packed);
+            }
+            return current.img;
+        } else {
+            this.loadImage(url, col, row, key);
+        }
+        return undefined;
+    }
+}
+
+export default ImageWindowLoaderImpl;

package/src/common/is-hotkey.ts

@@ -0,0 +1,86 @@
+import type { GridKeyEventArgs } from "../internal/data-grid/event-args.js";
+import { browserIsOSX } from "./browser-detect.js";
+
+// brain dead syntax, find your deps, and make buggy replacements with 5 times the effort
+// all lower case
+// ctrl+shift+alt+d or ctrl+x or shift+c or shift+Backspace or alt+_53
+// you get it, last one is always event.key, nothing fancy
+// special: primary === ctrl on windows, meta on mac
+// no to lower, its a waste, we're the only consumer, don't use caps
+
+// and before you ask, yes space is " ", e.g. "ctrl+alt+ ", whatacountry.gif
+// load bearing whitespace, it's basically python
+// if the char starts with a _ it is the event.keycode instead
+function checkKey(key: string | undefined, args: GridKeyEventArgs): boolean {
+    if (key === undefined) return false;
+    if (key.length > 1 && key.startsWith("_")) {
+        const keycode = Number.parseInt(key.slice(1));
+        return keycode === args.keyCode;
+    }
+    if (key.length === 1 && key >= "a" && key <= "z") {
+        return key.toUpperCase().codePointAt(0) === args.keyCode;
+    }
+
+    return key === args.key;
+}
+
+interface HotkeyResultDetails {
+    didMatch: boolean;
+}
+
+export function isHotkey(hotkey: string, args: GridKeyEventArgs, details: HotkeyResultDetails): boolean {
+    const result = isHotkeyInner(hotkey, args);
+    if (result) details.didMatch = true;
+    return result;
+}
+
+function isHotkeyInner(hotkey: string, args: GridKeyEventArgs): boolean {
+    if (hotkey.length === 0) return false;
+
+    if (hotkey.includes("|")) {
+        const parts = hotkey.split("|");
+        for (const part of parts) {
+            if (isHotkeyInner(part, args)) return true;
+        }
+        return false;
+    }
+
+    let wantCtrl = false;
+    let wantShift = false;
+    let wantAlt = false;
+    let wantMeta = false;
+
+    const split = hotkey.split("+");
+    const key = split.pop();
+
+    if (!checkKey(key, args)) return false;
+    if (split[0] === "any") return true;
+
+    for (const accel of split) {
+        switch (accel) {
+            case "ctrl":
+                wantCtrl = true;
+                break;
+            case "shift":
+                wantShift = true;
+                break;
+            case "alt":
+                wantAlt = true;
+                break;
+            case "meta":
+                wantMeta = true;
+                break;
+            case "primary":
+                if (browserIsOSX.value) {
+                    wantMeta = true;
+                } else {
+                    wantCtrl = true;
+                }
+                break;
+        }
+    }
+
+    return (
+        args.altKey === wantAlt && args.ctrlKey === wantCtrl && args.shiftKey === wantShift && args.metaKey === wantMeta
+    );
+}

package/src/common/math.ts

@@ -0,0 +1,357 @@
+/* eslint-disable unicorn/prefer-ternary */
+import { itemIsInRect } from "../internal/data-grid/render/data-grid-lib.js";
+import type { FillHandleDirection, Rectangle } from "../internal/data-grid/data-grid-types.js";
+
+export function getClosestRect(
+    rect: Rectangle,
+    px: number,
+    py: number,
+    allowedDirections: FillHandleDirection
+): Rectangle | undefined {
+    if (allowedDirections === "any") return combineRects(rect, { x: px, y: py, width: 1, height: 1 });
+    if (allowedDirections === "vertical") px = rect.x;
+    if (allowedDirections === "horizontal") py = rect.y;
+    // Check if the point is inside the rectangle
+    if (itemIsInRect([px, py], rect)) {
+        return undefined;
+    }
+
+    // Calculate distances to the closest edges
+    const distanceToLeft = px - rect.x;
+    const distanceToRight = rect.x + rect.width - px;
+    const distanceToTop = py - rect.y + 1;
+    const distanceToBottom = rect.y + rect.height - py;
+
+    // Find the minimum distance
+    const minDistance = Math.min(
+        allowedDirections === "vertical" ? Number.MAX_SAFE_INTEGER : distanceToLeft,
+        allowedDirections === "vertical" ? Number.MAX_SAFE_INTEGER : distanceToRight,
+        allowedDirections === "horizontal" ? Number.MAX_SAFE_INTEGER : distanceToTop,
+        allowedDirections === "horizontal" ? Number.MAX_SAFE_INTEGER : distanceToBottom
+    );
+
+    // eslint-disable-next-line unicorn/prefer-switch
+    if (minDistance === distanceToBottom) {
+        return { x: rect.x, y: rect.y + rect.height, width: rect.width, height: py - rect.y - rect.height + 1 };
+    } else if (minDistance === distanceToTop) {
+        return { x: rect.x, y: py, width: rect.width, height: rect.y - py };
+    } else if (minDistance === distanceToRight) {
+        return { x: rect.x + rect.width, y: rect.y, width: px - rect.x - rect.width + 1, height: rect.height };
+    } else {
+        return { x: px, y: rect.y, width: rect.x - px, height: rect.height };
+    }
+}
+
+export function intersectRect(
+    x1: number,
+    y1: number,
+    w1: number,
+    h1: number,
+    x2: number,
+    y2: number,
+    w2: number,
+    h2: number
+) {
+    return x1 <= x2 + w2 && x2 <= x1 + w1 && y1 <= y2 + h2 && y2 <= y1 + h1;
+}
+
+export function pointInRect(rect: Rectangle, x: number, y: number): boolean {
+    return x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+}
+
+export function combineRects(a: Rectangle, b: Rectangle): Rectangle {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    const width = Math.max(a.x + a.width, b.x + b.width) - x;
+    const height = Math.max(a.y + a.height, b.y + b.height) - y;
+    return { x, y, width, height };
+}
+
+export function rectContains(a: Rectangle, b: Rectangle): boolean {
+    return a.x <= b.x && a.y <= b.y && a.x + a.width >= b.x + b.width && a.y + a.height >= b.y + b.height;
+}
+
+/**
+ * This function is absolutely critical for the performance of the fill handle and highlight regions. If you don't
+ * hug rectanges when they are dashed and they are huge you will get giant GPU stalls. The reason for the mod is
+ * if you don't respect the dash stroke size you will get weird artificts as the rectangle changes sizes (the dashes
+ * won't line up from one frame to the next)
+ */
+export function hugRectToTarget(rect: Rectangle, width: number, height: number, mod: number): Rectangle | undefined {
+    // Combine checks for early return
+    if (
+        rect.x > width ||
+        rect.y > height ||
+        (rect.x < 0 && rect.y < 0 && rect.x + rect.width > width && rect.y + rect.height > height)
+    ) {
+        return undefined;
+    }
+
+    // Direct return if the rectangle is completely within bounds
+    if (rect.x >= 0 && rect.y >= 0 && rect.x + rect.width <= width && rect.y + rect.height <= height) {
+        return rect;
+    }
+
+    // Pre-compute constants for boundaries, we are giving ourselves slop here because we don't want to have weird
+    // issues when scaling is applied. 4px is more than enough slop.
+    const leftMax = -4;
+    const topMax = -4;
+    const rightMax = width + 4;
+    const bottomMax = height + 4;
+
+    // Pre-compute boundary overflows
+    const leftOverflow = leftMax - rect.x;
+    const rightOverflow = rect.x + rect.width - rightMax;
+    const topOverflow = topMax - rect.y;
+    const bottomOverflow = rect.y + rect.height - bottomMax;
+
+    // Adjust if necessary, using simplified calculations
+    const left = leftOverflow > 0 ? rect.x + Math.floor(leftOverflow / mod) * mod : rect.x;
+    const right = rightOverflow > 0 ? rect.x + rect.width - Math.floor(rightOverflow / mod) * mod : rect.x + rect.width;
+    const top = topOverflow > 0 ? rect.y + Math.floor(topOverflow / mod) * mod : rect.y;
+    const bottom =
+        bottomOverflow > 0 ? rect.y + rect.height - Math.floor(bottomOverflow / mod) * mod : rect.y + rect.height;
+
+    return { x: left, y: top, width: right - left, height: bottom - top };
+}
+
+interface SplitRect {
+    rect: Rectangle;
+    clip: Rectangle;
+}
+
+export function splitRectIntoRegions(
+    rect: Rectangle,
+    splitIndicies: readonly [number, number, number, number],
+    width: number,
+    height: number,
+    splitLocations: readonly [number, number, number, number]
+): SplitRect[] {
+    const [lSplit, tSplit, rSplit, bSplit] = splitIndicies;
+    const [lClip, tClip, rClip, bClip] = splitLocations;
+    const { x: inX, y: inY, width: inW, height: inH } = rect;
+
+    const result: SplitRect[] = [];
+
+    if (inW <= 0 || inH <= 0) return result;
+
+    const inRight = inX + inW;
+    const inBottom = inY + inH;
+
+    // The goal is to split the inbound rect into up to 9 regions based on the provided split indicies which are
+    // more or less cut lines. The cut lines are whole numbers as is the rect. We are dividing cells on a table.
+    // In theory there can be up to 9 regions returned, so we need to be careful to make sure we get them all and
+    // not return any empty regions.
+
+    // compute some handy values
+    const isOverLeft = inX < lSplit;
+    const isOverTop = inY < tSplit;
+    const isOverRight = inX + inW > rSplit;
+    const isOverBottom = inY + inH > bSplit;
+
+    const isOverCenterVert =
+        (inX >= lSplit && inX < rSplit) ||
+        (inRight > lSplit && inRight <= rSplit) ||
+        (inX < lSplit && inRight > rSplit);
+    const isOverCenterHoriz =
+        (inY >= tSplit && inY < bSplit) ||
+        (inBottom > tSplit && inBottom <= bSplit) ||
+        (inY < tSplit && inBottom > bSplit);
+
+    const isOverCenter = isOverCenterVert && isOverCenterHoriz;
+
+    // center
+    if (isOverCenter) {
+        const x = Math.max(inX, lSplit);
+        const y = Math.max(inY, tSplit);
+        const right = Math.min(inRight, rSplit);
+        const bottom = Math.min(inBottom, bSplit);
+        result.push({
+            rect: { x, y, width: right - x, height: bottom - y },
+            clip: {
+                x: lClip,
+                y: tClip,
+                width: rClip - lClip + 1,
+                height: bClip - tClip + 1,
+            },
+        });
+    }
+
+    // top left
+    if (isOverLeft && isOverTop) {
+        const x = inX;
+        const y = inY;
+        const right = Math.min(inRight, lSplit);
+        const bottom = Math.min(inBottom, tSplit);
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: 0,
+                y: 0,
+                width: lClip + 1,
+                height: tClip + 1,
+            },
+        });
+    }
+
+    // top center
+    if (isOverTop && isOverCenterVert) {
+        const x = Math.max(inX, lSplit);
+        const y = inY;
+        const right = Math.min(inRight, rSplit);
+        const bottom = Math.min(inBottom, tSplit);
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: lClip,
+                y: 0,
+                width: rClip - lClip + 1,
+                height: tClip + 1,
+            },
+        });
+    }
+
+    // top right
+    if (isOverTop && isOverRight) {
+        const x = Math.max(inX, rSplit);
+        const y = inY;
+        const right = inRight;
+        const bottom = Math.min(inBottom, tSplit);
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: rClip,
+                y: 0,
+                width: width - rClip + 1,
+                height: tClip + 1,
+            },
+        });
+    }
+
+    // center left
+    if (isOverLeft && isOverCenterHoriz) {
+        const x = inX;
+        const y = Math.max(inY, tSplit);
+        const right = Math.min(inRight, lSplit);
+        const bottom = Math.min(inBottom, bSplit);
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: 0,
+                y: tClip,
+                width: lClip + 1,
+                height: bClip - tClip + 1,
+            },
+        });
+    }
+
+    // center right
+    if (isOverRight && isOverCenterHoriz) {
+        const x = Math.max(inX, rSplit);
+        const y = Math.max(inY, tSplit);
+        const right = inRight;
+        const bottom = Math.min(inBottom, bSplit);
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: rClip,
+                y: tClip,
+                width: width - rClip + 1,
+                height: bClip - tClip + 1,
+            },
+        });
+    }
+
+    // bottom left
+    if (isOverLeft && isOverBottom) {
+        const x = inX;
+        const y = Math.max(inY, bSplit);
+        const right = Math.min(inRight, lSplit);
+        const bottom = inBottom;
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: 0,
+                y: bClip,
+                width: lClip + 1,
+                height: height - bClip + 1,
+            },
+        });
+    }
+
+    // bottom center
+    if (isOverBottom && isOverCenterVert) {
+        const x = Math.max(inX, lSplit);
+        const y = Math.max(inY, bSplit);
+        const right = Math.min(inRight, rSplit);
+        const bottom = inBottom;
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: lClip,
+                y: bClip,
+                width: rClip - lClip + 1,
+                height: height - bClip + 1,
+            },
+        });
+    }
+
+    // bottom right
+    if (isOverRight && isOverBottom) {
+        const x = Math.max(inX, rSplit);
+        const y = Math.max(inY, bSplit);
+        const right = inRight;
+        const bottom = inBottom;
+        result.push({
+            rect: {
+                x,
+                y,
+                width: right - x,
+                height: bottom - y,
+            },
+            clip: {
+                x: rClip,
+                y: bClip,
+                width: width - rClip + 1,
+                height: height - bClip + 1,
+            },
+        });
+    }
+
+    return result;
+}

package/src/common/render-state-provider.ts

@@ -0,0 +1,87 @@
+import type { Item, Rectangle } from "../internal/data-grid/data-grid-types.js";
+import { deepEqual } from "./support.js";
+
+// max safe int 2^53 - 1 (minus 1 omitted from here on)
+// max safe columns is 2^21 or 2,097,151
+// max safe rows is 2^32 or 4,294,967,295
+// If 3 rows render as an inch, then the max safe height is 1,431,655,765 inches or 22,426,868 miles
+// the distance to the moon is 238,900 miles, so this would give you a data grid that goes to the moon and back 94 times
+// seems fine
+const rowShift = 1 << 21;
+
+export function packColRowToNumber(col: number, row: number) {
+    return (row + 2) * rowShift + col;
+}
+
+export function unpackCol(packed: number): number {
+    return packed % rowShift;
+}
+
+export function unpackRow(packed: number): number {
+    return Math.floor(packed / rowShift) - 2;
+}
+
+export function unpackNumberToColRow(packed: number): [number, number] {
+    const col = unpackCol(packed);
+    const row = unpackRow(packed);
+    return [col, row];
+}
+
+export abstract class WindowingTrackerBase {
+    public visibleWindow: Rectangle = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    };
+
+    public freezeCols: number = 0;
+    public freezeRows: number[] = [];
+
+    protected isInWindow = (packed: number) => {
+        const col = unpackCol(packed);
+        const row = unpackRow(packed);
+        const w = this.visibleWindow;
+        const colInWindow = (col >= w.x && col <= w.x + w.width) || col < this.freezeCols;
+        const rowInWindow = (row >= w.y && row <= w.y + w.height) || this.freezeRows.includes(row);
+        return colInWindow && rowInWindow;
+    };
+
+    protected abstract clearOutOfWindow: () => void;
+
+    public setWindow(newWindow: Rectangle, freezeCols: number, freezeRows: number[]): void {
+        if (
+            this.visibleWindow.x === newWindow.x &&
+            this.visibleWindow.y === newWindow.y &&
+            this.visibleWindow.width === newWindow.width &&
+            this.visibleWindow.height === newWindow.height &&
+            this.freezeCols === freezeCols &&
+            deepEqual(this.freezeRows, freezeRows)
+        )
+            return;
+        this.visibleWindow = newWindow;
+        this.freezeCols = freezeCols;
+        this.freezeRows = freezeRows;
+        this.clearOutOfWindow();
+    }
+}
+
+export class RenderStateProvider extends WindowingTrackerBase {
+    private cache: Map<number, any> = new Map();
+
+    public setValue = (location: Item, state: any): void => {
+        this.cache.set(packColRowToNumber(location[0], location[1]), state);
+    };
+
+    public getValue = (location: Item): any => {
+        return this.cache.get(packColRowToNumber(location[0], location[1]));
+    };
+
+    protected clearOutOfWindow = () => {
+        for (const [key] of this.cache.entries()) {
+            if (!this.isInWindow(key)) {
+                this.cache.delete(key);
+            }
+        }
+    };
+}