From 2242efcace961f24884149381862819bc834ca92 Mon Sep 17 00:00:00 2001 From: Lucia Cangarova Date: Mon, 27 Nov 2023 14:39:02 +0000 Subject: [PATCH 1/3] fix: manage direction of hover when grid table smaller than grid --- .../core/src/data-grid/data-grid-types.ts | 1 + packages/core/src/data-grid/data-grid.tsx | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/packages/core/src/data-grid/data-grid-types.ts b/packages/core/src/data-grid/data-grid-types.ts index 4d4c6e772..0821bf864 100644 --- a/packages/core/src/data-grid/data-grid-types.ts +++ b/packages/core/src/data-grid/data-grid-types.ts @@ -127,6 +127,7 @@ export interface GridMouseOutOfBoundsEventArgs extends BaseGridMouseEventArgs { readonly location: Item; readonly direction: readonly [-1 | 0 | 1, -1 | 0 | 1]; readonly isMaybeScrollbar: boolean; + readonly innerDirection: readonly [-1 | 0 | 1, -1 | 0 | 1]; } /** @category Types */ diff --git a/packages/core/src/data-grid/data-grid.tsx b/packages/core/src/data-grid/data-grid.tsx index ff36b07f0..2c0b9a74c 100644 --- a/packages/core/src/data-grid/data-grid.tsx +++ b/packages/core/src/data-grid/data-grid.tsx @@ -510,6 +510,13 @@ const DataGrid: React.ForwardRefRenderFunction = (p, const horizontal = x > width ? -1 : x < 0 ? 1 : 0; const vertical = y > height ? 1 : y < 0 ? -1 : 0; + let innerHorizontal: -1 | 0 | 1 = horizontal; + let innerVertical: -1 | 0 | 1 = vertical; + if (horizontal === 0 && vertical === 0) { + innerHorizontal = col === -1 ? -1 : 0; + innerVertical = row === undefined? 1 : 0; + } + let isEdge = false; if (col === -1 && row === -1) { const b = getBoundsForItem(canvas, mappedColumns.length - 1, -1); @@ -527,6 +534,7 @@ const DataGrid: React.ForwardRefRenderFunction = (p, kind: outOfBoundsKind, location: [col !== -1 ? col : x < 0 ? 0 : mappedColumns.length - 1, row ?? rows - 1], direction: [horizontal, vertical], + innerDirection: [innerHorizontal, innerVertical], shiftKey, ctrlKey, metaKey, @@ -626,6 +634,19 @@ const DataGrid: React.ForwardRefRenderFunction = (p, function isSameItem(item: GridMouseEventArgs | undefined, other: GridMouseEventArgs | undefined) { if (item === other) return true; + + if (item?.kind === "out-of-bounds") { + return ( + item?.kind === other?.kind && + item?.location[0] === other?.location[0] && + item?.location[1] === other?.location[1] && + item?.direction[0] === other?.direction[0] && + item?.direction[1] === other?.direction[1] && + item?.innerDirection[0] === other?.innerDirection[0] && + item?.innerDirection[1] === other?.innerDirection[1] + ); + } + return ( item?.kind === other?.kind && item?.location[0] === other?.location[0] && From 988e4872a0ef52ce27e907c47f97b0f5621b6dff Mon Sep 17 00:00:00 2001 From: Jason Smith Date: Wed, 29 Nov 2023 20:39:09 -0800 Subject: [PATCH 2/3] Improve API slightly to add clarity and make the numbers actually make sense... --- .../src/internal/data-grid/data-grid-types.ts | 14 ++++++++++- .../core/src/internal/data-grid/data-grid.tsx | 25 +++++++++---------- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/packages/core/src/internal/data-grid/data-grid-types.ts b/packages/core/src/internal/data-grid/data-grid-types.ts index 019ee7fe6..6c11b343e 100644 --- a/packages/core/src/internal/data-grid/data-grid-types.ts +++ b/packages/core/src/internal/data-grid/data-grid-types.ts @@ -122,12 +122,24 @@ export interface GridMouseGroupHeaderEventArgs extends BaseGridMouseEventArgs, P /** @category Types */ export const outOfBoundsKind = "out-of-bounds" as const; /** @category Types */ + +export enum OutOfBoundsRegionAxis { + Start = -2, + StartPadding = -1, + Center = 0, + EndPadding = 1, + End = 2, +} + export interface GridMouseOutOfBoundsEventArgs extends BaseGridMouseEventArgs { readonly kind: typeof outOfBoundsKind; readonly location: Item; + /** + * @deprecated + */ readonly direction: readonly [-1 | 0 | 1, -1 | 0 | 1]; readonly isMaybeScrollbar: boolean; - readonly innerDirection: readonly [-1 | 0 | 1, -1 | 0 | 1]; + readonly region: readonly [OutOfBoundsRegionAxis, OutOfBoundsRegionAxis]; } /** @category Types */ diff --git a/packages/core/src/internal/data-grid/data-grid.tsx b/packages/core/src/internal/data-grid/data-grid.tsx index ccc1cc72c..91ebbcaf9 100644 --- a/packages/core/src/internal/data-grid/data-grid.tsx +++ b/packages/core/src/internal/data-grid/data-grid.tsx @@ -31,6 +31,7 @@ import { headerKind, outOfBoundsKind, type ImageWindowLoader, + OutOfBoundsRegionAxis, } from "./data-grid-types.js"; import { SpriteManager, type SpriteMap } from "./data-grid-sprites.js"; import { direction, getScrollBarWidth, useDebouncedMemo, useEventListener } from "../../common/utils.js"; @@ -506,15 +507,15 @@ const DataGrid: React.ForwardRefRenderFunction = (p, let result: GridMouseEventArgs; if (col === -1 || y < 0 || x < 0 || row === undefined || x > width || y > height) { - const horizontal = x > width ? -1 : x < 0 ? 1 : 0; + const horizontal = x > width ? 1 : x < 0 ? -1 : 0; const vertical = y > height ? 1 : y < 0 ? -1 : 0; - let innerHorizontal: -1 | 0 | 1 = horizontal; - let innerVertical: -1 | 0 | 1 = vertical; - if (horizontal === 0 && vertical === 0) { - innerHorizontal = col === -1 ? -1 : 0; - innerVertical = row === undefined? 1 : 0; - } + let innerHorizontal: OutOfBoundsRegionAxis = horizontal * 2; + let innerVertical: OutOfBoundsRegionAxis = vertical * 2; + if (horizontal === 0) + innerHorizontal = col === -1 ? OutOfBoundsRegionAxis.EndPadding : OutOfBoundsRegionAxis.Center; + if (vertical === 0) + innerVertical = row === undefined ? OutOfBoundsRegionAxis.EndPadding : OutOfBoundsRegionAxis.Center; let isEdge = false; if (col === -1 && row === -1) { @@ -532,8 +533,8 @@ const DataGrid: React.ForwardRefRenderFunction = (p, result = { kind: outOfBoundsKind, location: [col !== -1 ? col : x < 0 ? 0 : mappedColumns.length - 1, row ?? rows - 1], - direction: [horizontal, vertical], - innerDirection: [innerHorizontal, innerVertical], + direction: [-horizontal as -1 | 0 | 1, vertical], // negative horizontal for backcompat + region: [innerHorizontal, innerVertical], shiftKey, ctrlKey, metaKey, @@ -639,10 +640,8 @@ const DataGrid: React.ForwardRefRenderFunction = (p, item?.kind === other?.kind && item?.location[0] === other?.location[0] && item?.location[1] === other?.location[1] && - item?.direction[0] === other?.direction[0] && - item?.direction[1] === other?.direction[1] && - item?.innerDirection[0] === other?.innerDirection[0] && - item?.innerDirection[1] === other?.innerDirection[1] + item?.region[0] === other?.region[0] && + item?.region[1] === other?.region[1] ); } From 1a16390bd4ade7ef4a2170caae443b1b05d78242 Mon Sep 17 00:00:00 2001 From: Jason Smith Date: Wed, 29 Nov 2023 20:53:00 -0800 Subject: [PATCH 3/3] Start work of properly supporting displayData in uri cell --- packages/core/src/cells/uri-cell.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/src/cells/uri-cell.tsx b/packages/core/src/cells/uri-cell.tsx index 8bb3ecf0f..585ea90fd 100644 --- a/packages/core/src/cells/uri-cell.tsx +++ b/packages/core/src/cells/uri-cell.tsx @@ -12,8 +12,9 @@ export const uriCellRenderer: InternalCellRenderer = { needsHoverPosition: false, useLabel: true, drawPrep: prepTextCell, - draw: a => drawTextCell(a, a.cell.data, a.cell.contentAlign), - measure: (ctx, cell, theme) => ctx.measureText(cell.data).width + theme.cellHorizontalPadding * 2, + draw: a => drawTextCell(a, a.cell.displayData ?? a.cell.data, a.cell.contentAlign), + measure: (ctx, cell, theme) => + ctx.measureText(cell.displayData ?? cell.data).width + theme.cellHorizontalPadding * 2, onDelete: c => ({ ...c, data: "",