fix: manage direction of hover when grid table smaller than grid

[luciacangarova]

Hi! I have a use-case where the canvas is stretched over the whole screen but sometimes there are not enough rows/columns to fully fill the grid in all directions. The current behavior of the grid is to create an empty space which is classified as an out-of-bound cell with direction [0,0].
To be able to exactly pinpoint right / bottom / bottom-right, I would like to know the inner direction too based on the col and row.
I suggest doing it by adding a new field, innerDirection, to the GridMouseOutOfBoundsEventArgs payload, which in conjunction with the direction field, allows us to clearly identify the source of the mouse event.

In addition, I also would like to trigger the onItemHover function whenever the direction or the inner direction of my "out-of-bound" cell changes - which I also included as part of this PR.

Please let me know if you agree with this approach and the new names.

Thank you!

[jassmith]

Can you give me a quick sample code of how you want to use this?

[luciacangarova]

One usecase is showing the hover styles when I move my mouse around the out-of-bound cells. There is no way to distinguish between the circled areas:

export const RowHover: React.VFC = () => {
    const { cols, getCellContent } = useAllMockedKinds();

    const [hoverRow, setHoverRow] = React.useState<number | undefined>(undefined);

    const onItemHovered = React.useCallback((args: GridMouseEventArgs) => {
        const [_, row] = args.location;
        const isOutsideCells =
            args.kind === "out-of-bounds" &&
            args.direction[0] === 0 &&
            args.direction[1] === 0 &&
            args.innerDirection[0] === -1 &&
            args.innerDirection[1] === 0;
        setHoverRow(args.kind === "cell" || isOutsideCells ? row : undefined);
    }, []);

    const getRowThemeOverride = React.useCallback<GetRowThemeCallback>(
        row => {
            if (row > 10)
                return {
                    horizontalBorderColor: "transparent",
                };
            if (row !== hoverRow) return undefined;
            return {
                bgCell: "#f7f7f7",
                bgCellMedium: "#f0f0f0",
            };
        },
        [hoverRow]
    );

    return (
        <DataEditor
            {...defaultProps}
            height={800}
            rowMarkers="both"
            onItemHovered={onItemHovered}
            getCellContent={getCellContent}
            getRowThemeOverride={getRowThemeOverride}
            columns={cols.slice(0, 4)}
            rows={10}
        />
    );
};

EDIT: the console log is showing the added innerDirection prop and the location prop. The direction for every console log is [0,0]

[luciacangarova]

Another use-case would be to amend the grid selection to select a row when the user clicks the empty area on the right-hand side which is given as an out-of-bounds cell, but the grid selection is still triggered with selection.current = undefined:

    const onGridSelectionChange = React.useCallback(
        (selection: GridSelection) => {
            if (!selection.current && !hoverRow) return;

            // amend grid selection so I can select rows when I click on the out-of-bounds cell 
            // but for a real row
            const cell: Item = selection.current ? selection.current.cell : [4, hoverRow ?? 0];

            console.log("grid selection for", cell);
        },
        [hoverRow]
    ); 

[jassmith]

I've been thinking about this and I just don't like the name. Do you have any other suggestions to help us find a better name?

[jassmith]

I think this makes a lot more sense, what do you think?

[luciacangarova]

I think this makes a lot more sense, what do you think?

That is awesome! Thank you 😊 It makes more sense now