fix image loader doesn't take into account freezeColumns new api

Author: Mihran Margaryan

packages/core/src/common/render-state-provider.ts

@@ -35,33 +35,42 @@ export abstract class WindowingTrackerBase {
         height: 0,
     };
 
-    public freezeCols: number = 0;
+    public columnsLength: number = 0;
+    public freezeCols: number | readonly [number, number] = 0;
     public freezeRows: number[] = [];
 
     protected isInWindow = (packed: number) => {
+        const freezeColumnsLeft = typeof this.freezeCols === "number" ? this.freezeCols : this.freezeCols[0];
+        const freezeColumnsRight = typeof this.freezeCols === "number" ? 0 : this.freezeCols[1];
         const col = unpackCol(packed);
         const row = unpackRow(packed);
         const w = this.visibleWindow;
-        const colInWindow = (col >= w.x && col <= w.x + w.width) || col < this.freezeCols;
+        const colInWindow =
+            (col >= w.x && col <= w.x + w.width) ||
+            col < freezeColumnsLeft ||
+            col > this.columnsLength - freezeColumnsRight - 1;
+
         const rowInWindow = (row >= w.y && row <= w.y + w.height) || this.freezeRows.includes(row);
         return colInWindow && rowInWindow;
     };
 
     protected abstract clearOutOfWindow: () => void;
 
-    public setWindow(newWindow: Rectangle, freezeCols: number, freezeRows: number[]): void {
+    public setWindow(newWindow: Rectangle, freezeCols: number, freezeRows: number[], columnsLength: number): void {
         if (
             this.visibleWindow.x === newWindow.x &&
             this.visibleWindow.y === newWindow.y &&
             this.visibleWindow.width === newWindow.width &&
             this.visibleWindow.height === newWindow.height &&
             this.freezeCols === freezeCols &&
+            this.columnsLength === columnsLength &&
             deepEqual(this.freezeRows, freezeRows)
         )
             return;
         this.visibleWindow = newWindow;
         this.freezeCols = freezeCols;
         this.freezeRows = freezeRows;
+        this.columnsLength = columnsLength;
         this.clearOutOfWindow();
     }
 }

packages/core/src/internal/data-grid/image-window-loader-interface.ts

@@ -6,7 +6,8 @@ export interface ImageWindowLoader {
     setWindow(
         newWindow: Rectangle,
         freezeCols: number | readonly [left: number, right: number],
-        freezeRows: number[]
+        freezeRows: number[],
+        columnsLength: number
     ): void;
     loadOrGetImage(url: string, col: number, row: number): HTMLImageElement | ImageBitmap | undefined;
     setCallback(imageLoaded: (locations: CellSet) => void): void;

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

@@ -71,7 +71,10 @@ function clipHeaderDamage(
             const diff = Math.max(0, clipX - drawX);
 
             const finalX = drawX + diff + 1;
-            const finalWidth = c.stickyPosition === "right" ? c.width - diff : Math.min(c.width - diff - 1, width - drawX - clipXRight); // c.width - diff - 1;
+            const finalWidth =
+                c.stickyPosition === "right"
+                    ? c.width - diff
+                    : Math.min(c.width - diff - 1, width - drawX - clipXRight);
             if (damage.has([c.sourceIndex, -1])) {
                 ctx.rect(finalX, groupHeaderHeight, finalWidth, totalHeaderHeight - groupHeaderHeight);
             }
@@ -631,25 +634,25 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
     // the overdraw may have nuked out our focus ring right edge.
     const focusRedraw = drawFocus
         ? drawFillHandle(
-            targetCtx,
-            width,
-            height,
-            cellYOffset,
-            translateX,
-            translateY,
-            effectiveCols,
-            mappedColumns,
-            theme,
-            totalHeaderHeight,
-            selection,
-            getRowHeight,
-            getCellContent,
-            freezeTrailingRows,
-            freezeRightColumns,
-            hasAppendRow,
-            fillHandle,
-            rows
-        )
+              targetCtx,
+              width,
+              height,
+              cellYOffset,
+              translateX,
+              translateY,
+              effectiveCols,
+              mappedColumns,
+              theme,
+              totalHeaderHeight,
+              selection,
+              getRowHeight,
+              getCellContent,
+              freezeTrailingRows,
+              freezeRightColumns,
+              hasAppendRow,
+              fillHandle,
+              rows
+          )
         : undefined;
 
     targetCtx.fillStyle = theme.bgCell;
@@ -823,7 +826,8 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
             height: lastRowDrawn - cellYOffset,
         },
         freezeColumns,
-        Array.from({ length: freezeTrailingRows }, (_, i) => rows - 1 - i)
+        Array.from({ length: freezeTrailingRows }, (_, i) => rows - 1 - i),
+        mappedColumns.length
     );
 
     const scrollX = last !== undefined && (cellXOffset !== last.cellXOffset || translateX !== last.translateX);

packages/core/test/image-window-loader.test.ts

@@ -19,13 +19,28 @@ describe("ImageWindowLoaderImpl", () => {
             };
             const freezeCols = 5;
 
-            loader.setWindow(newWindow, freezeCols, []);
+            loader.setWindow(newWindow, freezeCols, [], 10);
 
             // Assuming you modify your class to expose `visibleWindow` and `freezeCols` for testing
             expect(loader.visibleWindow).toEqual(newWindow);
             expect(loader.freezeCols).toBe(freezeCols);
         });
 
+        it("should set the new columnsLength", () => {
+            const newWindow = {
+                x: 10,
+                y: 10,
+                width: 100,
+                height: 100,
+            };
+            const freezeCols = 5;
+            const columnsLength = 10;
+
+            loader.setWindow(newWindow, freezeCols, [], columnsLength);
+
+            expect(loader.columnsLength).toBe(columnsLength);
+        });
+
         it("should call clearOutOfWindow() if the window or freezeCols changes", () => {
             const spyClearOutOfWindow = vi.spyOn(loader, "clearOutOfWindow" as any); // Private method, so using 'as any'
 
@@ -44,13 +59,13 @@ describe("ImageWindowLoaderImpl", () => {
             const freezeCols1 = 5;
             const freezeCols2 = 10;
 
-            loader.setWindow(window1, freezeCols1, []);
+            loader.setWindow(window1, freezeCols1, [], 10);
             expect(spyClearOutOfWindow).toHaveBeenCalledTimes(1);
 
-            loader.setWindow(window2, freezeCols1, []);
+            loader.setWindow(window2, freezeCols1, [], 10);
             expect(spyClearOutOfWindow).toHaveBeenCalledTimes(2);
 
-            loader.setWindow(window2, freezeCols2, []);
+            loader.setWindow(window2, freezeCols2, [], 10);
             expect(spyClearOutOfWindow).toHaveBeenCalledTimes(3);
 
             // Cleanup
@@ -68,8 +83,8 @@ describe("ImageWindowLoaderImpl", () => {
             };
             const freezeCols = 5;
 
-            loader.setWindow(newWindow, freezeCols, []);
-            loader.setWindow(newWindow, freezeCols, []);
+            loader.setWindow(newWindow, freezeCols, [], 10);
+            loader.setWindow(newWindow, freezeCols, [], 10);
 
             expect(spyClearOutOfWindow).toHaveBeenCalledTimes(1);
 

packages/core/test/render-state-provider.test.ts

@@ -78,7 +78,7 @@ describe("Data Grid Utility Functions", () => {
         it("should update visible window and freeze columns correctly", () => {
             renderStateProvider.setValue([0, 30], "state");
             renderStateProvider.setValue([1, 0], "state");
-            renderStateProvider.setWindow(testRectangle, 1, []);
+            renderStateProvider.setWindow(testRectangle, 1, [], 10);
             expect(renderStateProvider.getValue([0, 30])).to.equal("state");
             expect(renderStateProvider.getValue([1, 0])).to.equal(undefined);
         });