@glideappsfinal/glide-data-grid 6.0.9

package/src/docs/examples/wrapping-text.stories.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
+import {
+    BeautifulWrapper,
+    Description,
+    PropName,
+    useMockDataGenerator,
+    defaultProps,
+} from "../../data-editor/stories/utils.js";
+import { GridCellKind } from "../../internal/data-grid/data-grid-types.js";
+import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import range from "lodash/range.js";
+import { faker } from "@faker-js/faker";
+
+export default {
+    title: "Glide-Data-Grid/DataEditor Demos",
+
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <BeautifulWrapper
+                    title="Wrapping Text"
+                    description={
+                        <Description>
+                            Text cells can have wrapping text by setting the <PropName>allowWrapping</PropName> prop to
+                            true.
+                        </Description>
+                    }>
+                    <Story />
+                </BeautifulWrapper>
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const WrappingText: React.VFC<{
+    alignment: "left" | "center" | "right";
+    length: number;
+    hyperWrapping: boolean;
+}> = p => {
+    const { cols, getCellContent, onColumnResize } = useMockDataGenerator(6);
+
+    const suffix = React.useMemo(() => {
+        return range(0, 100).map(() => faker.lorem.sentence(p.length));
+    }, [p.length]);
+
+    const mangledGetCellContent = React.useCallback<typeof getCellContent>(
+        i => {
+            const [col, row] = i;
+
+            if (col === 0) {
+                return {
+                    kind: GridCellKind.Text,
+                    allowOverlay: true,
+                    displayData: `${row},\n${suffix[row % suffix.length]}`,
+                    data: `${row}, \n${suffix}`,
+                    allowWrapping: true,
+                    contentAlign: p.alignment,
+                };
+            }
+            return getCellContent(i);
+        },
+        [getCellContent, p.alignment, suffix]
+    );
+
+    return (
+        <DataEditor
+            {...defaultProps}
+            rowHeight={80}
+            getCellContent={mangledGetCellContent}
+            columns={cols}
+            rows={1000}
+            onColumnResize={onColumnResize}
+            experimental={{
+                hyperWrapping: p.hyperWrapping,
+            }}
+        />
+    );
+};
+(WrappingText as any).args = {
+    alignment: "left",
+    length: 20,
+    hyperWrapping: false,
+};
+(WrappingText as any).argTypes = {
+    alignment: {
+        control: { type: "select" },
+        options: ["left", "center", "right"],
+    },
+    length: {
+        control: {
+            type: "range",
+            min: 2,
+            max: 200,
+        },
+    },
+};

package/src/docs/template.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+
+import { type GridCell, GridCellKind, type Item } from "../internal/data-grid/data-grid-types.js";
+import { DataEditorAll as DataEditor } from "../data-editor-all.js";
+import { SimpleThemeWrapper } from "../stories/story-utils.js";
+import { DocWrapper, Highlight, Marked, Wrapper } from "./doc-wrapper.js";
+
+export default {
+    title: "Glide-Data-Grid/Docs",
+    decorators: [
+        (Story: React.ComponentType) => (
+            <SimpleThemeWrapper>
+                <Story />
+            </SimpleThemeWrapper>
+        ),
+    ],
+};
+
+export const Template: React.VFC = () => {
+    const basicGetCellContent = React.useCallback((cell: Item): GridCell => {
+        return {
+            kind: GridCellKind.Text,
+            allowOverlay: false,
+            displayData: cell.toString(),
+            data: cell.toString(),
+        };
+    }, []);
+
+    const cols = React.useMemo(() => {
+        return [
+            {
+                title: "First",
+                width: 150,
+            },
+            {
+                title: "Second",
+                width: 150,
+            },
+        ];
+    }, []);
+
+    return (
+        <DocWrapper>
+            <Marked>
+                {`
+# Section Title
+
+> A nice little callout block
+
+Tell me what you're going to tell me.`}
+            </Marked>
+            <Highlight>
+                {`
+// Put the example code here
+const columns: GridColumn[] = [
+    { title: "First", width: 150 },
+    { title: "Second", width: 150 }
+];
+
+<DataEditor {...rest} columns={columns} />
+`}
+            </Highlight>
+            <Wrapper height={200}>
+                <DataEditor getCellContent={basicGetCellContent} columns={cols} rows={50} />
+            </Wrapper>
+        </DocWrapper>
+    );
+};
+(Template as any).storyName = "00. Template";

package/src/index.ts

@@ -0,0 +1,87 @@
+export type { OverlayImageEditorProps } from "./internal/data-grid-overlay-editor/private/image-overlay-editor.js";
+export type { MarkdownDivProps } from "./internal/markdown-div/markdown-div.js";
+export type { SpriteMap, HeaderIcon, Sprite } from "./internal/data-grid/data-grid-sprites.js";
+export type { SpriteProps } from "./common/utils.js";
+export type { Theme } from "./common/styles.js";
+export type { CustomRenderer, BaseDrawArgs, DrawArgs } from "./cells/cell-types.js";
+export type { SelectionBlending } from "./internal/data-grid/use-selection-behavior.js";
+export type { GetRowThemeCallback, Highlight } from "./internal/data-grid/render/data-grid-render.cells.js";
+export type { ImageWindowLoader } from "./internal/data-grid/image-window-loader-interface.js";
+export * from "./internal/data-grid/data-grid-types.js";
+export type {
+    BaseGridMouseEventArgs,
+    CellClickedEventArgs,
+    CellActivatedEventArgs,
+    KeyboardCellActivatedEvent,
+    PointerCellActivatedEvent,
+    DragHandler,
+    FillPatternEventArgs,
+    GridDragEventArgs,
+    GridKeyEventArgs,
+    GridMouseCellEventArgs,
+    GridMouseEventArgs,
+    GridMouseGroupHeaderEventArgs,
+    GridMouseHeaderEventArgs,
+    GridMouseOutOfBoundsEventArgs,
+    GroupHeaderClickedEventArgs,
+    HeaderClickedEventArgs,
+    OutOfBoundsRegionAxis,
+    PositionableMouseEventArgs,
+    PreventableEvent,
+} from "./internal/data-grid/event-args.js";
+export { ImageOverlayEditor } from "./internal/data-grid-overlay-editor/private/image-overlay-editor.js";
+export { default as MarkdownDiv } from "./internal/markdown-div/markdown-div.js";
+export { GrowingEntry as TextCellEntry } from "./internal/growing-entry/growing-entry.js";
+export { parseToRgba, withAlpha, blend, interpolateColors, getLuminance } from "./internal/data-grid/color-parser.js";
+export {
+    measureTextCached,
+    getMiddleCenterBias,
+    getEmHeight,
+    roundedPoly,
+    roundedRect,
+    drawTextCellExternal as drawTextCell,
+} from "./internal/data-grid/render/data-grid-lib.js";
+export { CellSet } from "./internal/data-grid/cell-set.js";
+export { getDataEditorTheme as getDefaultTheme, useTheme } from "./common/styles.js";
+export { useColumnSizer } from "./data-editor/use-column-sizer.js";
+
+export type { DataEditorRef } from "./data-editor/data-editor.js";
+export { DataEditorAll as DataEditor } from "./data-editor-all.js";
+export type { DataEditorAllProps as DataEditorProps } from "./data-editor-all.js";
+export { emptyGridSelection } from "./data-editor/data-editor.js";
+
+export { DataEditor as DataEditorCore } from "./data-editor/data-editor.js";
+export type { DataEditorProps as DataEditorCoreProps } from "./data-editor/data-editor.js";
+
+export { booleanCellRenderer } from "./cells/boolean-cell.js";
+export { imageCellRenderer } from "./cells/image-cell.js";
+export { markdownCellRenderer } from "./cells/markdown-cell.js";
+export { numberCellRenderer } from "./cells/number-cell.js";
+export { textCellRenderer } from "./cells/text-cell.js";
+export { uriCellRenderer } from "./cells/uri-cell.js";
+export { drilldownCellRenderer } from "./cells/drilldown-cell.js";
+export { loadingCellRenderer } from "./cells/loading-cell.js";
+export { newRowCellRenderer } from "./cells/new-row-cell.js";
+export { markerCellRenderer } from "./cells/marker-cell.js";
+export { bubbleCellRenderer } from "./cells/bubble-cell.js";
+export { protectedCellRenderer } from "./cells/protected-cell.js";
+export { rowIDCellRenderer } from "./cells/row-id-cell.js";
+export type { InternalCellRenderer } from "./cells/cell-types.js";
+export { AllCellRenderers } from "./cells/index.js";
+export { sprites } from "./internal/data-grid/sprites.js";
+export { default as ImageWindowLoaderImpl } from "./common/image-window-loader.js";
+export * from "./data-editor/copy-paste.js";
+
+export { useRowGrouping } from "./data-editor/row-grouping-api.js";
+export type {
+    RowGroupingMapper,
+    RowGroupingMapperResult,
+    UseRowGroupingResult,
+} from "./data-editor/row-grouping-api.js";
+export type { RowGroup, RowGroupingOptions } from "./data-editor/row-grouping.js";
+
+/**
+ * @category DataEditor
+ * @hidden
+ */
+export { DataEditorAll as default } from "./data-editor-all.js";

package/src/internal/click-outside-container/click-outside-container.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    onClickOutside: () => void;
+    isOutsideClick?: (event: MouseEvent | TouchEvent) => boolean;
+    // If provided, it will use the provided element as the event target
+    // instead of document.
+    customEventTarget?: HTMLElement | Window | Document;
+}
+
+export default class ClickOutsideContainer extends React.PureComponent<Props> {
+    private wrapperRef = React.createRef<HTMLDivElement>();
+
+    public componentDidMount() {
+        const eventTarget = this.props.customEventTarget ?? document;
+        eventTarget.addEventListener("pointerdown", this.clickOutside, true);
+        eventTarget.addEventListener("contextmenu", this.clickOutside, true);
+    }
+
+    public componentWillUnmount() {
+        const eventTarget = this.props.customEventTarget ?? document;
+        eventTarget.removeEventListener("pointerdown", this.clickOutside, true);
+        eventTarget.removeEventListener("contextmenu", this.clickOutside, true);
+    }
+
+    private clickOutside = (event: Event) => {
+        if (this.props.isOutsideClick && !this.props.isOutsideClick(event as MouseEvent | TouchEvent)) {
+            return;
+        }
+        if (this.wrapperRef.current !== null && !this.wrapperRef.current.contains(event.target as Node | null)) {
+            let node = event.target as Element | null;
+            while (node !== null) {
+                if (node.classList.contains("click-outside-ignore")) {
+                    return;
+                }
+
+                node = node.parentElement;
+            }
+            this.props.onClickOutside();
+        }
+    };
+
+    public render(): React.ReactNode {
+        const { onClickOutside, isOutsideClick, customEventTarget, ...rest } = this.props;
+        return (
+            <div {...rest} ref={this.wrapperRef}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

package/src/internal/data-editor-container/data-grid-container.tsx

@@ -0,0 +1,48 @@
+import { styled } from "@linaria/react";
+import * as React from "react";
+
+interface WrapperProps {
+    inWidth: number | string;
+    inHeight: number | string;
+}
+
+function toCss(x: number | string) {
+    if (typeof x === "string") return x;
+    return `${x}px`;
+}
+
+const Wrapper = styled.div<{ innerWidth: string; innerHeight: string }>`
+    position: relative;
+
+    min-width: 10px;
+    min-height: 10px;
+    max-width: 100%;
+    max-height: 100%;
+
+    width: ${p => p.innerWidth};
+    height: ${p => p.innerHeight};
+
+    overflow: hidden;
+    overflow: clip;
+
+    direction: ltr;
+
+    > :first-child {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+`;
+
+interface Props extends WrapperProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DataEditorContainer: React.FunctionComponent<React.PropsWithChildren<Props>> = p => {
+    const { inWidth, inHeight, children, ...rest } = p;
+    return (
+        <Wrapper innerHeight={toCss(inHeight)} innerWidth={toCss(inWidth)} {...rest}>
+            {children}
+        </Wrapper>
+    );
+};

package/src/internal/data-grid/animation-manager.ts

@@ -0,0 +1,119 @@
+import clamp from "lodash/clamp.js";
+import type { Item } from "./data-grid-types.js";
+import { itemsAreEqual } from "./render/data-grid-lib.js";
+
+type StateItem = { item: Item; hoverAmount: number };
+export type HoverValues = readonly Readonly<StateItem>[];
+export type StepCallback = (values: HoverValues) => void;
+
+const hoverTime = 80;
+
+function easeOutCubic(x: number) {
+    const x1 = x - 1;
+    return x1 * x1 * x1 + 1;
+}
+
+export class AnimationManager {
+    constructor(private callback: StepCallback) {}
+
+    private currentHoveredItem: StateItem | undefined = undefined;
+    private leavingItems: StateItem[] = [];
+
+    private lastAnimationTime: number | undefined;
+
+    private addToLeavingItems = (item: StateItem) => {
+        const isAlreadyLeaving = this.leavingItems.some(i => itemsAreEqual(i.item, item.item));
+
+        if (isAlreadyLeaving) {
+            return;
+        }
+
+        this.leavingItems.push(item);
+    };
+
+    /**
+     * @returns the hover amount of the item, if it was leaving (0 if not).
+     */
+    private removeFromLeavingItems = (item: Item): number => {
+        const leavingItem = this.leavingItems.find(e => itemsAreEqual(e.item, item));
+
+        this.leavingItems = this.leavingItems.filter(i => i !== leavingItem);
+
+        return leavingItem?.hoverAmount ?? 0;
+    };
+
+    private cleanUpLeavingElements = () => {
+        this.leavingItems = this.leavingItems.filter(i => i.hoverAmount > 0);
+    };
+
+    private shouldStep = () => {
+        const hasLeavingItems = this.leavingItems.length > 0;
+        const currentHoveredIsAnimating =
+            this.currentHoveredItem !== undefined && this.currentHoveredItem.hoverAmount < 1;
+
+        return hasLeavingItems || currentHoveredIsAnimating;
+    };
+
+    private getAnimatingItems = (): StateItem[] => {
+        // this is horrible. We shoudl be mutating the array in place. The reason we don't right now is because the
+        // hoveramount is used as both the tweened value and the raw value. We should separate these two things.
+        // Then we can stop doing the allocation insanity dance.
+        if (this.currentHoveredItem !== undefined) {
+            return [...this.leavingItems, this.currentHoveredItem];
+        }
+        return this.leavingItems.map(x => ({ ...x, hoverAmount: easeOutCubic(x.hoverAmount) }));
+    };
+
+    private step = (timestamp: number): void => {
+        if (this.lastAnimationTime === undefined) {
+            this.lastAnimationTime = timestamp;
+        } else {
+            const step = timestamp - this.lastAnimationTime;
+            const delta = step / hoverTime;
+
+            for (const item of this.leavingItems) {
+                item.hoverAmount = clamp(item.hoverAmount - delta, 0, 1);
+            }
+
+            if (this.currentHoveredItem !== undefined) {
+                this.currentHoveredItem.hoverAmount = clamp(this.currentHoveredItem.hoverAmount + delta, 0, 1);
+            }
+
+            const animating = this.getAnimatingItems();
+            this.callback(animating);
+
+            this.cleanUpLeavingElements();
+        }
+
+        if (this.shouldStep()) {
+            this.lastAnimationTime = timestamp;
+            window.requestAnimationFrame(this.step);
+        } else {
+            this.lastAnimationTime = undefined;
+        }
+    };
+
+    public setHovered = (item: Item | undefined): void => {
+        if (itemsAreEqual(this.currentHoveredItem?.item, item)) {
+            return;
+        }
+
+        if (this.currentHoveredItem !== undefined) {
+            this.addToLeavingItems(this.currentHoveredItem);
+        }
+
+        if (item !== undefined) {
+            const hoverAmount = this.removeFromLeavingItems(item);
+            this.currentHoveredItem = {
+                item,
+                hoverAmount,
+            };
+        } else {
+            this.currentHoveredItem = undefined;
+        }
+
+        if (this.lastAnimationTime === undefined) {
+            window.requestAnimationFrame(this.step);
+        }
+    };
+}

package/src/internal/data-grid/cell-set.ts

@@ -0,0 +1,65 @@
+import { packColRowToNumber, unpackNumberToColRow, unpackRow } from "../../common/render-state-provider.js";
+import type { Item, Rectangle } from "./data-grid-types.js";
+
+export class CellSet {
+    private readonly cells: Set<number>;
+
+    constructor(items: Item[] = []) {
+        this.cells = new Set<number>(items.map(x => packColRowToNumber(x[0], x[1])));
+    }
+
+    public add(cell: Item): void {
+        this.cells.add(packColRowToNumber(cell[0], cell[1]));
+    }
+
+    public has(cell: Item | undefined): boolean {
+        if (cell === undefined) return false;
+        return this.cells.has(packColRowToNumber(cell[0], cell[1]));
+    }
+
+    public remove(cell: Item): void {
+        this.cells.delete(packColRowToNumber(cell[0], cell[1]));
+    }
+
+    public clear(): void {
+        this.cells.clear();
+    }
+
+    public get size(): number {
+        return this.cells.size;
+    }
+
+    public hasHeader(): boolean {
+        for (const cellNumber of this.cells) {
+            const row = unpackRow(cellNumber);
+            if (row < 0) return true;
+        }
+        return false;
+    }
+
+    public hasItemInRectangle(rect: Rectangle): boolean {
+        for (let row = rect.y; row < rect.y + rect.height; row++) {
+            for (let col = rect.x; col < rect.x + rect.width; col++) {
+                if (this.cells.has(packColRowToNumber(col, row))) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    public hasItemInRegion(rect: readonly (Rectangle & { when?: boolean })[]): boolean {
+        for (const r of rect) {
+            if (this.hasItemInRectangle(r)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    public *values(): IterableIterator<Item> {
+        for (const cellNumber of this.cells) {
+            yield unpackNumberToColRow(cellNumber);
+        }
+    }
+}

package/src/internal/data-grid/color-parser.ts

@@ -0,0 +1,141 @@
+// Shamelessly stolen from https://github.com/ricokahler/color2k
+// We don't need all the color functions but we deeply appreciate their work.
+
+const cache: {
+    [color: string]: [number, number, number, number];
+} = {};
+
+let div: HTMLDivElement | null = null;
+
+function createDiv() {
+    const d = document.createElement("div");
+    d.style.opacity = "0";
+    d.style.pointerEvents = "none";
+    d.style.position = "fixed";
+    // div must be mounted for `getComputedStyle` to work
+    document.body.append(d);
+    return d;
+}
+
+/** @category Drawing */
+export function parseToRgba(color: string): readonly [number, number, number, number] {
+    // normalize the color
+    const normalizedColor = color.toLowerCase().trim();
+
+    if (cache[normalizedColor] !== undefined) return cache[normalizedColor];
+
+    div = div || createDiv();
+
+    div.style.color = "#000";
+    div.style.color = normalizedColor;
+    const control = getComputedStyle(div).color;
+
+    div.style.color = "#fff";
+    div.style.color = normalizedColor;
+    const computedColor = getComputedStyle(div).color;
+
+    if (computedColor !== control) return [0, 0, 0, 1];
+
+    let result = computedColor
+        // eslint-disable-next-line unicorn/better-regex
+        .replace(/[^\d.,]/g, "")
+        .split(",")
+        .map(Number.parseFloat) as [number, number, number, number];
+
+    if (result.length < 4) {
+        result.push(1);
+    }
+    result = result.map(x => {
+        const isNaN = Number.isNaN(x);
+        if (process.env.NODE_ENV !== "production" && isNaN) {
+            // eslint-disable-next-line no-console
+            console.warn("Could not parse color", color);
+        }
+        return isNaN ? 0 : x;
+    }) as typeof result;
+
+    cache[normalizedColor] = result;
+    return result;
+}
+
+/** @category Drawing */
+export function withAlpha(color: string, alpha: number): string {
+    const [r, g, b] = parseToRgba(color);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+const blendResultCache = new Map<string, string>();
+
+export function blendCache(color: string, background: string | undefined): string {
+    const cacheKey = `${color}-${background}`;
+
+    const maybe = blendResultCache.get(cacheKey);
+    if (maybe !== undefined) return maybe;
+
+    const result = blend(color, background);
+    blendResultCache.set(cacheKey, result);
+    return result;
+}
+
+/** @category Drawing */
+export function blend(color: string, background: string | undefined): string {
+    if (background === undefined) return color;
+    const [r, g, b, a] = parseToRgba(color);
+    if (a === 1) return color;
+    const [br, bg, bb, ba] = parseToRgba(background);
+    const ao = a + ba * (1 - a);
+    // (xaA + xaB·(1−aA))/aR
+    const ro = (a * r + ba * br * (1 - a)) / ao;
+    const go = (a * g + ba * bg * (1 - a)) / ao;
+    const bo = (a * b + ba * bb * (1 - a)) / ao;
+    return `rgba(${ro}, ${go}, ${bo}, ${ao})`;
+}
+
+/** @category Drawing */
+export function interpolateColors(leftColor: string, rightColor: string, val: number): string {
+    // toot toot im a GPU
+    if (val <= 0) return leftColor;
+    if (val >= 1) return rightColor;
+
+    // Parse to rgba returns straight alpha colors, for interpolation we want pre-multiplied alpha
+    const [lr, lg, lb, la] = parseToRgba(leftColor);
+    const [rr, rg, rb, ra] = parseToRgba(rightColor);
+
+    const leftR = lr * la;
+    const leftG = lg * la;
+    const leftB = lb * la;
+
+    const rightR = rr * ra;
+    const rightG = rg * ra;
+    const rightB = rb * ra;
+
+    const hScaler = val;
+    const nScaler = 1 - val;
+
+    const a = la * nScaler + ra * hScaler;
+    // If both colors are fully transparent the resulting alpha can be 0, avoid dividing by 0
+    if (a === 0) return "rgba(0, 0, 0, 0)";
+    // now we need to divide the alpha back out to get linear alpha back for the final result
+    const r = Math.floor((leftR * nScaler + rightR * hScaler) / a);
+    const g = Math.floor((leftG * nScaler + rightG * hScaler) / a);
+    const b = Math.floor((leftB * nScaler + rightB * hScaler) / a);
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+/**
+ * Returns a number (float) representing the luminance of a color.
+ *
+ * @category Drawing
+ */
+export function getLuminance(color: string): number {
+    if (color === "transparent") return 0;
+
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    function f(x: number) {
+        const channel = x / 255;
+        return channel <= 0.040_45 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+    }
+
+    const [r, g, b] = parseToRgba(color);
+    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+}