@glideappsfinal/glide-data-grid 6.0.9 → 6.0.11

package/src/docs/examples/custom-group-header.stories.tsx

@@ -7,9 +7,10 @@ import {
     useMockDataGenerator,
     defaultProps,
 } from "../../data-editor/stories/utils.js";
-import type { DrawGroupHeaderCallback } from "../../internal/data-grid/data-grid-types.js";
+import type { DrawGroupHeaderCallback, GridSelection } from "../../internal/data-grid/data-grid-types.js";
 import { GridColumnIcon } from "../../internal/data-grid/data-grid-types.js";
 import { SimpleThemeWrapper } from "../../stories/story-utils.js";
+import { emptyGridSelection } from "../../data-editor/data-editor.js";
 
 const COMPOSITE_DESTINATION_OVER = "destination-over";
 const COMPOSITE_SOURCE_OVER = "source-over";
@@ -66,7 +67,8 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
     });
 
     const drawGroupHeader: DrawGroupHeaderCallback = React.useCallback(args => {
-        const { ctx, groupName, level, span, rect, theme, isSelected, isHovered } = args;
+        const { ctx, groupName, level, span, rect, theme, isSelected, isHovered, } = args;
+        console.log(args);
 
         // First draw default to get icons and actions, but we'll draw over the background
         // Save the context state before default drawing
@@ -96,7 +98,7 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
         // Use composite operation to draw background behind existing content
         ctx.globalCompositeOperation = COMPOSITE_DESTINATION_OVER;
         ctx.fillStyle = gradient;
-        ctx.fill();
+        // ctx.fill();
         ctx.globalCompositeOperation = COMPOSITE_SOURCE_OVER;
 
         // Draw border
@@ -107,7 +109,7 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
 
         // Draw custom text with shadow effect
         if (groupName !== "") {
-            ctx.fillStyle = isSelected ? theme.textHeaderSelected : theme.textHeader;
+            // ctx.fillStyle = isSelected ? theme.textHeaderSelected : theme.textHeader;
             ctx.font = `bold ${14 + level * 2}px ${theme.fontFamily}`;
             ctx.textAlign = "left";
             ctx.textBaseline = "middle";
@@ -119,6 +121,7 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
             ctx.shadowOffsetY = 1;
 
             const padding = 12 + level * 4;
+         
             ctx.fillText(groupName, rect.x + padding, rect.y + rect.height / 2);
 
             // Reset shadow
@@ -130,7 +133,7 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
             // Draw span indicator (number of columns in group)
             const spanText = `(${span[1] - span[0] + 1} cols)`;
             ctx.font = `${10}px ${theme.fontFamily}`;
-            ctx.fillStyle = isSelected ? theme.textHeaderSelected : (theme.textGroupHeader ?? theme.textHeader);
+            // ctx.fillStyle = isSelected ? theme.textHeaderSelected : (theme.textGroupHeader ?? theme.textHeader);
             ctx.globalAlpha = 0.7;
             const textWidth = ctx.measureText(groupName).width;
             ctx.fillText(spanText, rect.x + padding + textWidth + 8, rect.y + rect.height / 2);
@@ -138,16 +141,16 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
         }
 
         // Draw level indicator badge in top-right corner
-        ctx.fillStyle = isSelected ? theme.accentColor : theme.bgHeader;
+        // ctx.fillStyle = isSelected ? theme.accentColor : theme.bgHeader;
         ctx.beginPath();
         const badgeSize = 20;
         const badgePadding = 4;
         const badgeX = rect.x + rect.width - badgeSize - badgePadding;
         const badgeY = rect.y + badgePadding;
         ctx.arc(badgeX + badgeSize / 2, badgeY + badgeSize / 2, badgeSize / 2, 0, Math.PI * 2);
-        ctx.fill();
+        // ctx.fill();
 
-        ctx.fillStyle = theme.textHeader;
+        // ctx.fillStyle = theme.textHeader;
         ctx.font = `bold ${10}px ${theme.fontFamily}`;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
@@ -155,6 +158,8 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
 
         ctx.restore();
     }, []);
+    const [sel, setSel] = React.useState<GridSelection>(emptyGridSelection);
+
 
     return (
         <DataEditor
@@ -166,9 +171,34 @@ export const CustomGroupHeaderDrawing: React.VFC = () => {
                 name: g,
                 icon: g === "" ? undefined : GridColumnIcon.HeaderCode,
             })}
+            // freezeColumns={3}
             groupHeaderHeight={[36, 32, 30, 28]} // Four different heights for four levels
-            drawGroupHeader={drawGroupHeader}
+            // drawGroupHeader={drawGroupHeader}
+            drawHeader={(args,draw) => {
+                console.log(args);
+                draw();
+            }}
             rowMarkers="both"
+            gridSelection={sel}
+            onGridSelectionChange={(args) => {
+                setSel(args)
+                console.log('onGridSelectionChange',args);
+            }}
+            onGroupHeaderClicked={(args) => {
+                console.log('onGroupHeaderClicked',args);
+            }}
+            onMouseMove={(args) => {
+                if(args.kind === "group-header") {
+
+                    // console.log('onMouseMove',args);
+                }
+            }}
+            onCellClicked={(args) => {
+                
+
+                    // console.log('onCellClicked',args);
+                
+            }}
         />
     );
 };
@@ -190,8 +220,8 @@ export const MinimalGroupHeader: React.VFC = () => {
     });
 
     const drawGroupHeader: DrawGroupHeaderCallback = React.useCallback(args => {
-        const { ctx, rect, theme, isSelected, isHovered } = args;
-
+        const { ctx, rect, theme, isSelected, isHovered, groupName } = args;
+    
         // Call default drawing first
         ctx.save();
         // draw();

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

@@ -9,6 +9,7 @@ import {
     rectBottomRight,
     useMappedColumns,
 } from "./render/data-grid-lib.js";
+import { getGroupLevels, getTotalGroupHeaderHeight } from "./render/data-grid-render.walk.js";
 import {
     GridCellKind,
     type Rectangle,
@@ -445,13 +446,6 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             }),
         [headerIcons]
     );
-    const groupHeights = enableGroups 
-        ? (Array.isArray(groupHeaderHeight) 
-            ? groupHeaderHeight.reduce((sum, h) => sum + h, 0)
-            : groupHeaderHeight)
-        : 0;
-    const totalHeaderHeight = headerHeight + groupHeights;
-
     const scrollingStopRef = React.useRef(-1);
     const enableFirefoxRescaling = (experimental?.enableFirefoxRescaling ?? false) && browserIsFirefox.value;
     const enableSafariRescaling = (experimental?.enableSafariRescaling ?? false) && browserIsSafari.value;
@@ -469,6 +463,9 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
     }, [cellYOffset, cellXOffset, translateX, translateY, enableFirefoxRescaling, enableSafariRescaling]);
 
     const mappedColumns = useMappedColumns(columns, freezeColumns);
+    const groupHeaderLevels = enableGroups ? getGroupLevels(mappedColumns) : 0;
+    const totalGroupHeaderHeight = enableGroups ? getTotalGroupHeaderHeight(groupHeaderHeight, mappedColumns) : 0;
+    const totalHeaderHeight = headerHeight + totalGroupHeaderHeight;
     const stickyX = React.useMemo(
         () => (fixedShadowX ? getStickyWidth(mappedColumns, dragAndDropState) : 0),
         [mappedColumns, dragAndDropState, fixedShadowX]
@@ -578,7 +575,8 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
                 rowHeight,
                 cellYOffset,
                 translateY,
-                freezeTrailingRows
+                freezeTrailingRows,
+                groupHeaderLevels
             );
 
             const shiftKey = ev?.shiftKey === true;
@@ -741,6 +739,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             enableGroups,
             headerHeight,
             groupHeaderHeight,
+            groupHeaderLevels,
             rows,
             rowHeight,
             cellYOffset,
@@ -987,7 +986,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
         hCol >= 0 &&
         hCol < mappedColumns.length &&
         mappedColumns[hCol].headerRowMarkerDisabled !== true;
-    const groupHeaderHovered = hCol !== undefined && hRow === -2;
+    const groupHeaderHovered = hCol !== undefined && hRow !== undefined && hRow <= -2;
     let clickableInnerCellHovered = false;
     let editableBoolHovered = false;
     let cursorOverride: React.CSSProperties["cursor"] | undefined = drawCursorOverride;

package/src/internal/data-grid/event-args.ts

@@ -42,7 +42,7 @@ export const groupHeaderKind = "group-header" as const;
 /** @category Types */
 export interface GridMouseGroupHeaderEventArgs extends BaseGridMouseEventArgs, PositionableMouseEventArgs {
     readonly kind: typeof groupHeaderKind;
-    readonly location: readonly [number, -2];
+    readonly location: Item;
     readonly bounds: Rectangle;
     readonly group: string;
 }

package/src/internal/data-grid/render/data-grid-lib.ts

@@ -293,13 +293,31 @@ export function getRowIndexForY(
     rowHeight: number | ((index: number) => number),
     cellYOffset: number,
     translateY: number,
-    freezeTrailingRows: number
+    freezeTrailingRows: number,
+    groupHeaderLevels?: number
 ): number | undefined {
-    const groupHeights = Array.isArray(groupHeaderHeight) 
-        ? groupHeaderHeight.reduce((sum, h) => sum + h, 0)
-        : groupHeaderHeight;
+    const groupHeightsArray = Array.isArray(groupHeaderHeight) ? groupHeaderHeight : undefined;
+    const groupHeaderHeightValue = typeof groupHeaderHeight === "number" ? groupHeaderHeight : undefined;
+    const levels = groupHeightsArray?.length ?? (groupHeaderLevels ?? (hasGroups ? 1 : 0));
+    const groupHeights = hasGroups
+        ? (groupHeightsArray !== undefined
+              ? groupHeightsArray.reduce((sum, h) => sum + h, 0)
+              : (levels > 0 && groupHeaderHeightValue !== undefined ? groupHeaderHeightValue * levels : 0))
+        : 0;
     const totalHeaderHeight = headerHeight + groupHeights;
-    if (hasGroups && targetY <= groupHeights) return -2;
+    if (hasGroups && levels > 0 && targetY <= groupHeights) {
+        if (groupHeightsArray !== undefined) {
+            let yOffset = 0;
+            for (let level = 0; level < levels; level++) {
+                yOffset += groupHeightsArray[level] ?? groupHeightsArray[0] ?? 0;
+                if (targetY <= yOffset) return -2 - level;
+            }
+            return -2 - (levels - 1);
+        }
+        if (groupHeaderHeightValue === undefined || groupHeaderHeightValue <= 0) return -2;
+        const groupLevel = Math.min(levels - 1, Math.max(0, Math.floor(targetY / groupHeaderHeightValue)));
+        return -2 - groupLevel;
+    }
     if (targetY <= totalHeaderHeight) return -1;
 
     let y = height;
@@ -805,7 +823,7 @@ export function computeBounds(
         height: 0,
     };
 
-    if (col >= mappedColumns.length || row >= rows || row < -2 || col < 0) {
+    if (col >= mappedColumns.length || row >= rows || col < 0) {
         return result;
     }
 

package/src/internal/data-grid/render/data-grid-render.header.ts

@@ -97,11 +97,15 @@ export function drawGridHeaders(
         const bgFillStyle = selected ? theme.accentColor : hasSelectedCell ? theme.bgHeaderHasFocus : theme.bgHeader;
 
         const y = enableGroups ? totalGroupHeaderHeight : 0;
+        const isFirstSelected = selected && selection.columns.first() === c.sourceIndex;
         const xOffset = c.sourceIndex === 0 ? 0 : 1;
 
         if (selected) {
             ctx.fillStyle = bgFillStyle;
             ctx.fillRect(x + xOffset, y, c.width - xOffset, headerHeight);
+            if (isFirstSelected) {
+                ctx.fillRect(x, y, 1, headerHeight);
+            }
         } else if (hasSelectedCell || hover > 0) {
             ctx.beginPath();
             ctx.rect(x + xOffset, y, c.width - xOffset, headerHeight);
@@ -227,6 +231,7 @@ function drawGroupHeaderInner(
     span: readonly [number, number],
     isSelected: boolean,
     isHovered: boolean,
+    hoverAmount: number,
     theme: FullTheme,
     groupTheme: FullTheme,
     group: GroupDetails,
@@ -243,7 +248,13 @@ function drawGroupHeaderInner(
 
     if (fillColor !== theme.bgHeader) {
         ctx.fillStyle = fillColor;
-        ctx.fill();
+        if (hoverAmount > 0) {
+            ctx.globalAlpha = hoverAmount;
+            ctx.fillRect(x, y + 1, width, height - 1);
+            ctx.globalAlpha = 1;
+        } else {
+            ctx.fillRect(x, y, width, height);
+        }
     }
 
     ctx.fillStyle = groupTheme.textGroupHeader ?? groupTheme.textHeader;
@@ -335,6 +346,15 @@ function drawGroupLevel(
     const hPosY = hovered?.[1]?.[1];
     // hRow: -2 is group header, we use -2 - level for multi-level
     const targetRow = -2 - level;
+    const selectionRow = selection?.current?.cell[1];
+    const selectionLevel = selectionRow !== undefined && selectionRow <= -2 ? -2 - selectionRow : undefined;
+    const selectionSpan =
+        selection?.current === undefined || selectionLevel === undefined
+            ? undefined
+            : ([
+                  selection.current.range.x,
+                  selection.current.range.x + selection.current.range.width - 1,
+              ] as const);
 
     let finalX = 0;
     walkGroups(effectiveCols, width, translateX, groupHeaderHeight, level, (span, groupName, x, y, w, h) => {
@@ -356,13 +376,20 @@ function drawGroupLevel(
         const group = getGroupDetails(groupName);
         const groupTheme =
             group?.overrideTheme === undefined ? theme : mergeAndRealizeTheme(theme, group.overrideTheme);
-        const isHovered = hRow === targetRow && hCol !== undefined && hCol >= span[0] && hCol <= span[1];
-
         // Check if all columns in this group span are selected
         let isSelected = false;
         if (selection !== undefined) {
-            isSelected = selection.columns.hasAll([span[0], span[1] + 1]);
+            const selectionMatchesLevel = selectionRow !== undefined && targetRow <= selectionRow;
+            const spanInSelection =
+                selectionSpan !== undefined && span[0] >= selectionSpan[0] && span[1] <= selectionSpan[1];
+            isSelected =
+                selectionMatchesLevel && spanInSelection && selection.columns.hasAll([span[0], span[1] + 1]);
         }
+        const isHovered = hRow === targetRow && hCol !== undefined && hCol >= span[0] && hCol <= span[1];
+        const hoverAmount =
+            isSelected || !isHovered
+                ? 0
+                : (_hoverValues.find(s => s.item[0] === hCol && s.item[1] === targetRow)?.hoverAmount ?? 0);
 
         if (drawGroupHeaderCallback !== undefined) {
             drawGroupHeaderCallback(
@@ -372,7 +399,7 @@ function drawGroupLevel(
                     level,
                     span,
                     theme: groupTheme,
-                    rect: { x, y: y + yOffset, width: w, height: h },
+                    rect: { x: x + 0.5, y: y + yOffset, width: w, height: h },
                     isSelected,
                     isHovered,
                     spriteManager,
@@ -391,6 +418,7 @@ function drawGroupLevel(
                         span,
                         isSelected,
                         isHovered,
+                        hoverAmount,
                         theme,
                         groupTheme,
                         group,
@@ -411,6 +439,7 @@ function drawGroupLevel(
                 span,
                 isSelected,
                 isHovered,
+                hoverAmount,
                 theme,
                 groupTheme,
                 group,

package/src/internal/data-grid/render/data-grid-render.ts

@@ -50,13 +50,16 @@ function clipHeaderDamage(
         ? groupHeaderHeight
         : Array.from({ length: levels }, () => groupHeaderHeight);
 
+    let currentY = 0;
     for (let level = 0; level < levels; level++) {
+        const levelHeight = heights[level] ?? heights[0] ?? 0;
+        if (levelHeight <= 0) continue;
         const targetRow = -2 - level;
         walkGroups(
             effectiveColumns,
             width,
             translateX,
-            heights[level] ?? heights[0] ?? 0,
+            levelHeight,
             level,
             (span, _group, x, y, w, h) => {
                 const hasItemInSpan = damage.hasItemInRectangle({
@@ -66,10 +69,11 @@ function clipHeaderDamage(
                     height: 1,
                 });
                 if (hasItemInSpan) {
-                    ctx.rect(x, y, w, h);
+                    ctx.rect(x, y + currentY, w, h);
                 }
             }
         );
+        currentY += levelHeight;
     }
 
     walkColumns(
@@ -394,12 +398,15 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
     // handle damage updates by directly drawing to the target to avoid large blits
     if (damage !== undefined) {
         const viewRegionWidth = effectiveCols[effectiveCols.length - 1].sourceIndex + 1;
+        const groupHeaderLevels = enableGroups ? getGroupLevels(mappedColumns) : 0;
+        const headerRegionRowStart = -1 - groupHeaderLevels;
+        const headerRegionHeight = groupHeaderLevels + 1;
         const damageInView = damage.hasItemInRegion([
             {
                 x: cellXOffset,
-                y: -2,
+                y: headerRegionRowStart,
                 width: viewRegionWidth,
-                height: 2,
+                height: headerRegionHeight,
             },
             {
                 x: cellXOffset,
@@ -415,9 +422,9 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
             },
             {
                 x: 0,
-                y: -2,
+                y: headerRegionRowStart,
                 width: freezeColumns,
-                height: 2,
+                height: headerRegionHeight,
             },
             {
                 x: cellXOffset,

package/test/data-editor.test.tsx

@@ -966,10 +966,13 @@ describe("data-editor", () => {
         });
 
         expect(spy).toHaveBeenCalledTimes(1);
-        expect(spy).toHaveBeenCalledWith({
-            columns: CompactSelection.fromSingleSelection([0, 11]),
-            rows: CompactSelection.empty(),
-        });
+        expect(spy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                columns: CompactSelection.fromSingleSelection([0, 11]),
+                rows: CompactSelection.empty(),
+                current: expect.objectContaining({ cell: [0, -2] }),
+            })
+        );
 
         spy.mockClear();
 
@@ -980,10 +983,13 @@ describe("data-editor", () => {
         });
 
         expect(spy).toHaveBeenCalled();
-        expect(spy).toHaveBeenCalledWith({
-            columns: CompactSelection.empty(),
-            rows: CompactSelection.empty(),
-        });
+        expect(spy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                columns: CompactSelection.empty(),
+                rows: CompactSelection.empty(),
+                current: undefined,
+            })
+        );
 
         spy.mockClear();
 
@@ -994,11 +1000,13 @@ describe("data-editor", () => {
         });
 
         expect(spy).toHaveBeenCalled();
-        expect(spy).toHaveBeenCalledWith({
-            rows: CompactSelection.empty(),
-            current: undefined,
-            columns: CompactSelection.fromSingleSelection([0, 11]),
-        });
+        expect(spy).toHaveBeenCalledWith(
+            expect.objectContaining({
+                rows: CompactSelection.empty(),
+                columns: CompactSelection.fromSingleSelection([0, 11]),
+                current: expect.objectContaining({ cell: [0, -2] }),
+            })
+        );
     });
 
     test("Rename group header shows", async () => {

package/test/data-grid.test.tsx

@@ -305,9 +305,17 @@ describe("data-grid", () => {
 
     test("Header hovered when scrolled", () => {
         const spy = vi.fn();
+        const groupedColumns = basicProps.columns.map(col => ({ ...col, group: "A" }));
 
         render(
-            <DataGrid {...basicProps} groupHeaderHeight={32} enableGroups={true} cellYOffset={10} onItemHovered={spy} />
+            <DataGrid
+                {...basicProps}
+                columns={groupedColumns}
+                groupHeaderHeight={32}
+                enableGroups={true}
+                cellYOffset={10}
+                onItemHovered={spy}
+            />
         );
 
         const el = screen.getByTestId(dataGridCanvasId);
@@ -327,7 +335,11 @@ describe("data-grid", () => {
     test("Group header hovered", () => {
         const spy = vi.fn();
 
-        render(<DataGrid {...basicProps} onItemHovered={spy} enableGroups={true} groupHeaderHeight={28} />);
+        const groupedColumns = basicProps.columns.map(col => ({ ...col, group: "A" }));
+        // TODO old test 
+        //render(<DataGrid {...basicProps} onItemHovered={spy} enableGroups={true} groupHeaderHeight={28} />);
+
+        render(<DataGrid {...basicProps} columns={groupedColumns} onItemHovered={spy} enableGroups={true} groupHeaderHeight={28} />);
 
         const el = screen.getByTestId(dataGridCanvasId);
         fireEvent.pointerMove(el, {