fixed selection issue and highlight fixes

Author: rahulyadav5524

packages/core/src/data-editor/data-editor.tsx

@@ -884,7 +884,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const maxColumnWidth = Math.max(maxColumnWidthIn, minColumnWidth);
     const maxColumnAutoWidth = Math.max(maxColumnAutoWidthIn ?? maxColumnWidth, minColumnWidth);
 
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns: freezeColumns[0];
+    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
     const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
 
     const docStyle = React.useMemo(() => {
@@ -1555,7 +1555,8 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                         }
 
                         // scrollBounds is already scaled
-                        let sLeft = frozenLeftWidth * scale + scrollBounds.left + rowMarkerOffset * rowMarkerWidth * scale;
+                        let sLeft =
+                            frozenLeftWidth * scale + scrollBounds.left + rowMarkerOffset * rowMarkerWidth * scale;
                         let sRight = scrollBounds.right - frozenRightWidth * scale;
                         let sTop = scrollBounds.top + totalHeaderHeight * scale;
                         let sBottom = scrollBounds.bottom - trailingRowHeight * scale;

packages/core/src/internal/data-grid/data-grid.tsx

@@ -602,7 +602,11 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
                 let isEdge = bounds !== undefined && bounds.x + bounds.width - posX <= edgeDetectionBuffer;
 
                 const previousCol = col - 1;
-                if (posX - bounds.x <= edgeDetectionBuffer && previousCol >= 0) {
+                if (
+                    posX - bounds.x <= edgeDetectionBuffer &&
+                    previousCol >= 0 &&
+                    col < mappedColumns.length - freezeRightColumns
+                ) {
                     isEdge = true;
                     bounds = getBoundsForItem(canvas, previousCol, row);
                     assert(bounds !== undefined);
@@ -699,6 +703,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
             selection,
             totalHeaderHeight,
             freezeColumns,
+            freezeRightColumns,
         ]
     );
 

packages/core/src/internal/data-grid/render/data-grid-lib.ts

@@ -279,7 +279,7 @@ export function getColumnIndexForX(
         const colIdx = effectiveColumns.length - 1 - fc;
         const col = effectiveColumns[colIdx];
         y -= col.width;
-        if (targetX <= y) {
+        if (targetX >= y) {
             return col.sourceIndex;
         }
     }
@@ -810,24 +810,30 @@ export function computeBounds(
 
     const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
     const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+    const column = mappedColumns[col];
 
     if (col >= mappedColumns.length || row >= rows || row < -2 || col < 0) {
         return result;
     }
 
     const headerHeight = totalHeaderHeight - groupHeaderHeight;
 
-    if (col >= freezeLeftColumns) {
+    if (col >= freezeLeftColumns && col < mappedColumns.length - freezeRightColumns) {
         const dir = cellXOffset > col ? -1 : 1;
-        const [freezeLeftWidth, freezeRightWidth] = getStickyWidth(mappedColumns);
+        const [freezeLeftWidth] = getStickyWidth(mappedColumns);
         result.x += freezeLeftWidth + translateX;
         for (let i = cellXOffset; i !== col; i += dir) {
             result.x += mappedColumns[dir === 1 ? i : i - 1].width * dir;
         }
-    } else {
+    } else if (column.stickyPosition === "left") {
         for (let i = 0; i < col; i++) {
             result.x += mappedColumns[i].width;
         }
+    } else if (column.stickyPosition === "right") {
+        result.x = width;
+        for (let i = col; i < mappedColumns.length; i++) {
+            result.x -= mappedColumns[i].width;
+        }
     }
     result.width = mappedColumns[col].width + 1;
 
@@ -863,7 +869,7 @@ export function computeBounds(
             end++;
         }
         if (!sticky) {
-            const [freezeLeftWidth, freezeRightWidth] = getStickyWidth(mappedColumns);
+            const [freezeLeftWidth] = getStickyWidth(mappedColumns);
             const clip = result.x - freezeLeftWidth;
             if (clip < 0) {
                 result.x -= clip;

packages/core/src/internal/data-grid/render/data-grid-render.blit.ts

@@ -147,9 +147,9 @@ export function blitLastFrame(
             args.dw = blitWidth * dpr;
 
             drawRegions.push({
-                x: width + deltaX,
+                x: width + deltaX - stickyRightWidth,
                 y: 0,
-                width: -deltaX,
+                width: -deltaX + stickyRightWidth,
                 height: height,
             });
         }
@@ -168,6 +168,17 @@ export function blitLastFrame(
                 const h = height * dpr;
                 ctx.drawImage(blitSource, 0, 0, w, h, 0, 0, w, h);
             }
+            if (
+                stickyRightWidth > 0 &&
+                deltaX !== 0 &&
+                deltaY === 0 &&
+                (targetScroll === undefined || blitSourceScroll?.[1] !== false)
+            ) {
+                const x = (width - stickyRightWidth) * dpr;
+                const w = stickyRightWidth * dpr;
+                const h = height * dpr;
+                ctx.drawImage(blitSource, x, 0, w, h, x, 0, w, h);
+            }
             if (
                 freezeTrailingRowsHeight > 0 &&
                 deltaX === 0 &&

packages/core/src/internal/data-grid/render/data-grid-render.lines.ts

@@ -331,6 +331,7 @@ export function drawGridLines(
     for (let index = 0; index < effectiveCols.length; index++) {
         const c = effectiveCols[index];
         if (c.width === 0) continue;
+        if (c.sticky && c.stickyPosition !== "left") break;
         x += c.width;
         const tx = c.sticky ? x : x + translateX;
         if (tx >= minX && tx <= maxX && verticalBorder(index + 1)) {
@@ -344,23 +345,23 @@ export function drawGridLines(
         }
     }
 
-    // let rightX = 0.5;
-    // for (let index = effectiveCols.length - 1; index >= 0; index--) {
-    //     const c = effectiveCols[index];
-    //     if (c.width === 0) continue;
-    //     if (!c.sticky) break;
-    //     rightX += c.width;
-    //     const tx = c.sticky ? rightX : rightX + translateX;
-    //     if (tx >= minX && tx <= maxX && verticalBorder(index + 1)) {
-    //         toDraw.push({
-    //             x1: tx,
-    //             y1: Math.max(groupHeaderHeight, minY),
-    //             x2: tx,
-    //             y2: Math.min(height, maxY),
-    //             color: vColor,
-    //         });
-    //     }
-    // }
+    let rightX = width + 0.5;
+    for (let index = effectiveCols.length - 1; index >= 0; index--) {
+        const c = effectiveCols[index];
+        if (c.width === 0) continue;
+        if (!c.sticky) break;
+        rightX -= c.width;
+        const tx = rightX;
+        if (tx >= minX && tx <= maxX && verticalBorder(index + 1)) {
+            toDraw.push({
+                x1: tx,
+                y1: Math.max(groupHeaderHeight, minY),
+                x2: tx,
+                y2: Math.min(height, maxY),
+                color: vColor,
+            });
+        }
+    }
 
     let freezeY = height + 0.5;
     for (let i = rows - freezeTrailingRows; i < rows; i++) {

packages/core/src/internal/data-grid/render/data-grid.render.rings.ts

@@ -34,8 +34,13 @@ export function drawHighlightRings(
 
     const [freezeLeft, freezeRight] = getStickyWidth(mappedColumns);
     const freezeBottom = getFreezeTrailingHeight(rows, freezeTrailingRows, rowHeight);
-    const splitIndices = [freezeLeftColumns, 0, mappedColumns.length, rows - freezeTrailingRows] as const;
-    const splitLocations = [freezeLeft, 0, width, height - freezeBottom] as const;
+    const splitIndices = [
+        freezeLeftColumns,
+        0,
+        mappedColumns.length - freezeRightColumns,
+        rows - freezeTrailingRows,
+    ] as const;
+    const splitLocations = [freezeLeft, 0, width - freezeRight, height - freezeBottom] as const;
 
     const drawRects = highlightRegions.map(h => {
         const r = h.range;

packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx

@@ -103,7 +103,6 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
     const lastSize = React.useRef<readonly [number, number] | undefined>();
 
     const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
-    const freezeRightColumns = typeof freezeColumns === "number"? 0 : freezeColumns[1];
 
     const width = nonGrowWidth + Math.max(0, overscrollX ?? 0);
 
@@ -217,14 +216,7 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
             args.width !== lastSize.current?.[0] ||
             args.height !== lastSize.current?.[1]
         ) {
-            onVisibleRegionChanged?.(
-                rect,
-                args.width,
-                args.height,
-                args.paddingRight ?? 0,
-                tx,
-                ty
-            );
+            onVisibleRegionChanged?.(rect, args.width, args.height, args.paddingRight ?? 0, tx, ty);
             last.current = rect;
             lastX.current = tx;
             lastY.current = ty;