fix: manage direction of hover when grid table smaller than grid by luciacangarova · Pull Request #811 · glideapps/glide-data-grid

luciacangarova · 2023-11-27T16:43:17Z

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 · 2023-11-27T17:48:52Z

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

luciacangarova · 2023-11-27T18:53:02Z

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 · 2023-11-27T19:02:02Z

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 · 2023-11-29T16:43:17Z

packages/core/src/data-grid/data-grid-types.ts

    readonly location: Item;
    readonly direction: readonly [-1 | 0 | 1, -1 | 0 | 1];
    readonly isMaybeScrollbar: boolean;
+    readonly innerDirection: readonly [-1 | 0 | 1, -1 | 0 | 1];


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?

…e sense...

jassmith · 2023-11-30T04:39:48Z

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

luciacangarova · 2023-11-30T09:37:20Z

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

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

Glide Data Grid 6.0.0 ## 🚨 Breaking Changes ### New dependency - canvas-hypertxt bumped to 1.0.3 - @linaria/react now added as dep (extremely tiny) ### ✌️ Farewell create react app 4 CRA 4 is no longer officially supported. While it is definitely possible to make it work, it may require extra work. CRA 5 works fine. ### 🚢 Better exports Exports for Glide Data Grid are now done in a more standard esm compliant manner. This should enable better tree shaking. ### 🧼 Cell API cleanup Some cells have had minor tweaks to their API to bring them in line with standard conventions. The `ImageCell` and all the cells in the `cells` package now uses the standard `readonly` flag. ### 👋 Minimap removed The minimap was awesome, and largely unused. It has been removed from this version of Glide Data Grid in the service of smaller packages and a more maintainable surface area. We appreciate your service 🫡 ### 🎨 `drawCell` callback improved. The drawCell callback now receives a callback argument which paints the standard cell. This allows dramatically more flexibility with custom under and overdrawing of cells. It is also now a void method eliminating a source of confusion. ```typescript const drawCell: DrawCellCallback = React.useCallback( (args, draw) => { // Draw something below the cell drawing draw() // Draw something on top of the cell drawing }, []) ``` ## 🎉 New Features ### 💪 Kinetic super scroll on iOS Are you the one person presenting data grids to your mobile users? This feature is for you. GDG will now artificially boost the framerate during kinetic scroll on iOS to maintain a smooth experience. This is still experimental, but if feedback goes well we intend to promote this to stable. ```tsx return ( <DataEditor {...otherProps} experimental={{ kineticScrollPerfHack: true, }} /> ); ``` ### 🏁 Performance improvements when updating lots of data at once Damage rendering now is 2x faster than the 5.0 series. This is enabled by reducing the amount of clipping during a damage pass. This improvement is what has made the DOOM easter egg on the main site possible. The easter egg may also be the reason for the improvement... <img width="1151" alt="CleanShot 2024-01-10 at 22 43 12@2x" src="https://github.com/glideapps/glide-data-grid/assets/30443/33041725-7398-4c49-9ef1-c199482eb93c"> ### 🌐 UriCell improvements ![CleanShot 2024-01-10 at 22 41 10@2x](https://github.com/glideapps/glide-data-grid/assets/30443/18df5dc5-5a93-46bd-8059-c0cdcb5cfe9c) The URI cell supports drawing an underscore on hovering a URI value via the `hoverEffect` property. It also supports click events (e.g., to open the URL) via the `onUriClick` property and uses the `displayData` within the cell rendering. ### ⚽️ Add support for rounding radius in the theme ![image](https://github.com/glideapps/glide-data-grid/assets/2852129/41205ff9-db9b-44ef-8a97-e59e826438bc) Configure the rounding radii of checkboxes, bubbles, skeletons, images, buttons, and other rounded elements via the optional `roundingRadius` theming property. ### 🤕 Header menu icons can now be configured ![image](https://github.com/glideapps/glide-data-grid/assets/2852129/974148aa-91e2-449d-9ed0-55a5940b60c4) Customize the header menu icon via the `menuIcon` property in `GridColumn`. It supports `triangle` for the default menu icon, `dots` for the three-dots menu icon, or a key of one of the icons passed to the `headerIcons` prop. ### 📈 Sparkline cell now supports even more charts <img width="473" alt="CleanShot 2024-01-10 at 22 37 25@2x" src="https://github.com/glideapps/glide-data-grid/assets/30443/f88fe87c-833d-450b-8468-be52faba605d"> The `line` graphKind got renamed to `area`. The new `line` chart now renders just a simple line chart. Additionally, the x-axis can be hidden via `hideAxis`. ### 🥶 Freeze trailing rows <img width="600" alt="CleanShot 2024-01-10 at 22 36 58@2x" src="https://github.com/glideapps/glide-data-grid/assets/30443/58b2603c-9113-44b2-9ab1-c79135e50cb9"> Get going by specifying the number of freeze trailing rows you want. ```tsx return ( <DataEditor {...otherProps} freezeTrailingRows={2} /> ); ``` ### 💀 LoadingCell skeletons <img width="510" alt="CleanShot 2024-01-10 at 22 34 25@2x" src="https://github.com/glideapps/glide-data-grid/assets/30443/aac2ed4b-f1f4-44e6-b758-f30caf871f5f"> The loading cell can be configured to show skeletons when `skeletonWidth` is set to a value > 0. The height can be configured via the optional `skeletonHeight` property, and it also supports a randomized variability applied to the width via `skeletonWidthVariability.` ### ⌨️ Fully remappable keybindings Keybindings can now be remapped instead of just turned off and on. More details [here](https://docs.grid.glideapps.com/api/dataeditor/input-interaction#keybindings). ### 🪤 Focus trapping There is now a `trapFocus` prop that will cause the grid to prevent focus leaving the grid during caret browsing or pressing tab. ### 🙅‍♀️ Prevent column reordering Reordering of columns can now be prevented as new column locations are proposed using the new `onColumnProposeMove` callback. This allows for greater control over where users are allowed to drag columns. ### 💾 Copy and paste methods now available The copy and paste functionality of the data grid is now exposed for direct usage by developers. ### 🌲 Tree view cell <img width="213" alt="image" src="https://github.com/glideapps/glide-data-grid/assets/2852129/258aabf8-b7ee-4dfb-842d-01e257e4b84a"> This cell represents the basic building block required to make collapsable and groupable rows. We will continue to improve support for row grouping in the rest of the 6.0.0 series. ### ⬇️ Dropdown cell improvements Allow specifying label and value independently in dropdown cell and some other visual improvements. ## 🚀 Improvements ### 💍 Improved drawing of highlight and selection rings When the selection ring or a highlight ring is at the right or bottom edge of the grid it will no longer be clipped out. ### 🦏 Safari performance improvements Safari now renders around 2 to 5 times faster on mobile devices. Less hitching, better grids, papa johns. ### 🔦 Large highlight region support Prior to 6.0.0 large highlight regions could cause excessively slow drawing performance. This is no longer a problem. ### 🔍 Search no longer renders eagerly Don't use the search? No problem. You no longer pay the penalty for something you don't need. ### 🏁 Mouse hover render reduction Hovering with the mouse no longer results in excessive react rendering. ### 👓 Hover interactions now can discern blank spots of grid from outside of grid More details here: #811 ### ↔️ Resize column indicator <img width="439" alt="image" src="https://github.com/glideapps/glide-data-grid/assets/2852129/b87ac8cb-9699-40f1-8816-d6c4e9bd0d17"> There is a new column resize indicator. It can be configured via the `resizeIndicatorColor` theme property. ### ☕️ Fill handle improvements - Controllable selection behavior - FillPattern support - Larger fill handle click region - New visual representation ![CleanShot 2024-01-10 at 23 10 57@2x](https://github.com/glideapps/glide-data-grid/assets/30443/3b76efbc-d0c0-4bb2-aa27-880f4315f3df) ### 🔲 Get the bounds of the entire scroll area If `getBounds` get called with `col` and `row` as undefined, the bounding box of the entire data grid scroll area is returned. ## 🔚 Odds and ends - GDG now prefixes most of the css classes it uses to avoid conflicting with commonly used names. - Page up and down keybindings are now on by default ## 🐞 Bug Fixes - `onDelete` now properly called when doing a cut operation. - Fixed a crasher caused by attemping to draw negative radius arcs. - Fix a bug where `getBounds` would compute for the wrong cell. - Fixed multiple bugs where strict mode would be violated - Horizontally center bubble cell editor to align with cell rendering. - Fix copy escaping for array values. - Fix issues with paste logic. - Fix text cell editor color in Safari. - Fix jittering issue with grow columns. - Use the configured padding for measuring of number, row-id, dropdown and date-picker cells. - Fix sparkline chart error related to arrays with less than 3 values. Co-authored-by: Lukas Masuch <[email protected]> Co-authored-by: luciacangarova <[email protected]> Co-authored-by: Chris Cowan <[email protected]> Co-authored-by: Brian Hung <[email protected]>

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

2242efc

jassmith reviewed Nov 29, 2023

View reviewed changes

jassmith changed the base branch from main to 6.0.0 November 30, 2023 02:43

jassmith added 2 commits November 29, 2023 18:45

Merge branch '6.0.0' into out-of-bounds-direction

f84cfde

Improve API slightly to add clarity and make the numbers actually mak…

988e487

…e sense...

Start work of properly supporting displayData in uri cell

1a16390

jassmith merged commit 3bb94ef into glideapps:6.0.0 Nov 30, 2023

jassmith mentioned this pull request Dec 28, 2023

6.0.0 #810

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

fix: manage direction of hover when grid table smaller than grid#811
jassmith merged 4 commits intoglideapps:6.0.0from
luciacangarova:out-of-bounds-direction

luciacangarova commented Nov 27, 2023

Uh oh!

jassmith commented Nov 27, 2023

Uh oh!

luciacangarova commented Nov 27, 2023 •

edited

Loading

Uh oh!

luciacangarova commented Nov 27, 2023

Uh oh!

jassmith Nov 29, 2023

Uh oh!

jassmith commented Nov 30, 2023

Uh oh!

luciacangarova commented Nov 30, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

luciacangarova commented Nov 27, 2023

Uh oh!

jassmith commented Nov 27, 2023

Uh oh!

luciacangarova commented Nov 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

luciacangarova commented Nov 27, 2023

Uh oh!

jassmith Nov 29, 2023

Choose a reason for hiding this comment

Uh oh!

jassmith commented Nov 30, 2023

Uh oh!

luciacangarova commented Nov 30, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

luciacangarova commented Nov 27, 2023 •

edited

Loading