Merge remote-tracking branch 'origin/6.0.0' into jason/better-keybinding

glideapps · Dec 26, 2023 · 878df5b · 878df5b
2 parents b5ec05f + 05e1c6b
commit 878df5b
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "root",
-    "version": "5.99.9-beta9",
+    "version": "5.99.9-charlie1",
     "scripts": {
         "start": "npm run storybook",
         "version": "./update-version.sh",

diff --git a/packages/cells/package.json b/packages/cells/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-cells",
-    "version": "5.99.9-beta9",
+    "version": "5.99.9-charlie1",
     "description": "Extra cells for glide-data-grid",
     "sideEffects": [
         "**/*.css"
@@ -50,7 +50,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "5.99.9-beta9",
+        "@glideapps/glide-data-grid": "5.99.9-charlie1",
         "@linaria/react": "^4.5.3",
         "@toast-ui/editor": "3.1.10",
         "@toast-ui/react-editor": "3.1.10",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid",
-    "version": "5.99.9-beta9",
+    "version": "5.99.9-charlie1",
     "description": "React data grid for beautifully displaying and editing large amounts of data with amazing performance.",
     "sideEffects": [
         "**/*.css"

diff --git a/packages/core/src/cells/new-row-cell.tsx b/packages/core/src/cells/new-row-cell.tsx
@@ -17,7 +17,7 @@ function drawNewRowCell(args: BaseDrawArgs, data: string, icon?: string) {
     const { x, y, width: w, height: h } = rect;
     ctx.beginPath();
     ctx.globalAlpha = hoverAmount;
-    ctx.rect(x, y, w, h);
+    ctx.rect(x + 1, y + 1, w, h - 2);
     ctx.fillStyle = theme.bgHeaderHovered;
     ctx.fill();
     ctx.globalAlpha = 1;

diff --git a/packages/core/src/internal/data-grid/data-grid-render.tsx b/packages/core/src/internal/data-grid/data-grid-render.tsx
@@ -90,6 +90,7 @@ export interface BlitData {
     readonly translateX: number;
     readonly translateY: number;
     readonly mustDrawFocusOnHeader: boolean;
+    readonly mustDrawHighlightRingsOnHeader: boolean;
     readonly lastBuffer: "a" | "b" | undefined;
 }
 
@@ -1807,7 +1808,7 @@ function drawHighlightRings(
         if (lastRowSticky) {
             const lastRowHeight = typeof rowHeight === "function" ? rowHeight(rows - 1) : rowHeight;
             ctx.beginPath();
-            ctx.rect(0, 0, width, height - lastRowHeight);
+            ctx.rect(0, 0, width, height - lastRowHeight + 1);
             ctx.clip();
         }
         ctx.beginPath();
@@ -2250,6 +2251,15 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
     let drawRegions: Rectangle[] = [];
 
     const mustDrawFocusOnHeader = drawFocus && selection.current?.cell[1] === cellYOffset && translateY === 0;
+    let mustDrawHighlightRingsOnHeader = false;
+    if (highlightRegions !== undefined) {
+        for (const r of highlightRegions) {
+            if (r.style !== "no-outline" && r.range.y === cellYOffset && translateY === 0) {
+                mustDrawHighlightRingsOnHeader = true;
+                break;
+            }
+        }
+    }
     const drawHeaderTexture = () => {
         drawGridHeaders(
             overlayCtx,
@@ -2303,6 +2313,26 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         );
         overlayCtx.stroke();
 
+        if (mustDrawHighlightRingsOnHeader) {
+            drawHighlightRings(
+                overlayCtx,
+                width,
+                height,
+                cellXOffset,
+                cellYOffset,
+                translateX,
+                translateY,
+                mappedColumns,
+                freezeColumns,
+                headerHeight,
+                groupHeaderHeight,
+                rowHeight,
+                trailingRowType === "sticky",
+                rows,
+                highlightRegions
+            );
+        }
+
         if (mustDrawFocusOnHeader) {
             drawFocusRing(
                 overlayCtx,
@@ -2456,7 +2486,8 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         canBlit !== true ||
         cellXOffset !== last?.cellXOffset ||
         translateX !== last?.translateX ||
-        mustDrawFocusOnHeader !== last?.mustDrawFocusOnHeader
+        mustDrawFocusOnHeader !== last?.mustDrawFocusOnHeader ||
+        mustDrawHighlightRingsOnHeader !== last?.mustDrawHighlightRingsOnHeader
     ) {
         drawHeaderTexture();
     }
@@ -2691,6 +2722,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
         translateX,
         translateY,
         mustDrawFocusOnHeader,
+        mustDrawHighlightRingsOnHeader,
         lastBuffer: doubleBuffer ? (targetBuffer === bufferA ? "a" : "b") : undefined,
     };
 

diff --git a/packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx b/packages/core/src/internal/scrolling-data-grid/infinite-scroller.tsx
@@ -106,22 +106,6 @@ function useTouchUpDelayed(delay: number): boolean {
     return hasTouches;
 }
 
-// This function is still mildly incorrect. If the scrollbar is a non integrer size it will be off by up to 0.5px.
-function getExactDimensionsExcludingScrollbar(element: HTMLElement) {
-    // Get the precise total dimensions including the scrollbar
-    const rect = element.getBoundingClientRect();
-
-    // Calculate the width and height of the scrollbar
-    const scrollbarWidth = element.offsetWidth - element.clientWidth;
-    const scrollbarHeight = element.offsetHeight - element.clientHeight;
-
-    // Calculate the dimensions excluding the scrollbar
-    return {
-        width: rect.width - scrollbarWidth,
-        height: rect.height - scrollbarHeight,
-    };
-}
-
 export const InfiniteScroller: React.FC<Props> = p => {
     const {
         children,
@@ -207,10 +191,8 @@ export const InfiniteScroller: React.FC<Props> = p => {
         lastScrollPosition.current.scrollLeft = scrollLeft;
         lastScrollPosition.current.scrollTop = scrollTop;
 
-        // el.clientWidth returns a rounded result, we want a floor'd result so as to not overrun the scroll area.
-        const dimensions = getExactDimensionsExcludingScrollbar(el);
-        const cWidth = Math.floor(dimensions.width);
-        const cHeight = Math.floor(dimensions.height);
+        const cWidth = el.clientWidth;
+        const cHeight = el.clientHeight;
 
         const newY = scrollTop;
         const delta = lastScrollY.current - newY;

diff --git a/packages/source/package.json b/packages/source/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@glideapps/glide-data-grid-source",
-    "version": "5.99.9-beta9",
+    "version": "5.99.9-charlie1",
     "description": "Useful data source hooks for Glide Data Grid",
     "sideEffects": false,
     "type": "module",
@@ -42,7 +42,7 @@
         "canvas"
     ],
     "dependencies": {
-        "@glideapps/glide-data-grid": "5.99.9-beta9"
+        "@glideapps/glide-data-grid": "5.99.9-charlie1"
     },
     "peerDependencies": {
         "lodash": "^4.17.19",