Improve table rendering for oversized rows/columns (#10945)

handsontable · Apr 25, 2024 · bc6e23d · bc6e23d
1 parent 56d54d6
commit bc6e23d
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 13 deletions.
diff --git a/handsontable/src/3rdparty/walkontable/src/calculator/viewportColumns.js b/handsontable/src/3rdparty/walkontable/src/calculator/viewportColumns.js
@@ -143,10 +143,10 @@ export class ViewportColumnsCalculator {
       // the table is to the left of the viewport
       (
         mostRightScrollOffset < (-1) * this.#options.inlineStartOffset ||
-        scrollOffset >= startPositions.at(-1) + inlineEndColumnOffset
+        scrollOffset > startPositions.at(-1) + inlineEndColumnOffset
       ) ||
       // the table is to the right of the viewport
-      (((-1) * this.#options.scrollOffset) - this.#options.viewportWidth >= (-1) * inlineStartColumnOffset)
+      (((-1) * this.#options.scrollOffset) - this.#options.viewportWidth > (-1) * inlineStartColumnOffset)
     ) {
       this.isVisibleInTrimmingContainer = false;
 

diff --git a/handsontable/src/3rdparty/walkontable/src/calculator/viewportRows.js b/handsontable/src/3rdparty/walkontable/src/calculator/viewportRows.js
@@ -131,7 +131,7 @@ export class ViewportRowsCalculator {
     const topRowOffset = calculationType === FULLY_VISIBLE_TYPE ? firstVisibleRowHeight : 0;
     const bottomRowOffset = calculationType === FULLY_VISIBLE_TYPE ? 0 : lastVisibleRowHeight;
 
-    if (mostBottomScrollOffset <= topRowOffset || scrollOffset >= startPositions.at(-1) + bottomRowOffset) {
+    if (mostBottomScrollOffset < topRowOffset || scrollOffset > startPositions.at(-1) + bottomRowOffset) {
       this.isVisibleInTrimmingContainer = false;
 
     } else {

diff --git a/handsontable/src/3rdparty/walkontable/src/viewport.js b/handsontable/src/3rdparty/walkontable/src/viewport.js
@@ -457,11 +457,16 @@ class Viewport {
       return false;
     }
 
-    const { startRow, endRow, isVisibleInTrimmingContainer } = proposedRowsVisibleCalculator;
+    let { startRow, endRow } = proposedRowsVisibleCalculator;
 
-    // if there are no fully visible rows at all, return false
+    // if there are no fully visible rows at all...
     if (startRow === null && endRow === null) {
-      return !isVisibleInTrimmingContainer;
+      if (!proposedRowsVisibleCalculator.isVisibleInTrimmingContainer) {
+        return true;
+      }
+      // ...use partially visible rows calculator to determine what render type is needed
+      startRow = this.rowsPartiallyVisibleCalculator.startRow;
+      endRow = this.rowsPartiallyVisibleCalculator.endRow;
     }
 
     const { startRow: renderedStartRow, endRow: renderedEndRow } = this.rowsRenderCalculator;
@@ -490,11 +495,16 @@ class Viewport {
       return false;
     }
 
-    const { startColumn, endColumn, isVisibleInTrimmingContainer } = proposedColumnsVisibleCalculator;
+    let { startColumn, endColumn } = proposedColumnsVisibleCalculator;
 
-    // if there are no fully visible columns at all, return false
+    // if there are no fully visible columns at all...
     if (startColumn === null && endColumn === null) {
-      return !isVisibleInTrimmingContainer;
+      if (!proposedColumnsVisibleCalculator.isVisibleInTrimmingContainer) {
+        return true;
+      }
+      // ...use partially visible columns calculator to determine what render type is needed
+      startColumn = this.columnsPartiallyVisibleCalculator.startColumn;
+      endColumn = this.columnsPartiallyVisibleCalculator.endColumn;
     }
 
     const { startColumn: renderedStartColumn, endColumn: renderedEndColumn } = this.columnsRenderCalculator;

diff --git a/handsontable/src/3rdparty/walkontable/test/spec/calculator/viewportColumns.spec.js b/handsontable/src/3rdparty/walkontable/test/spec/calculator/viewportColumns.spec.js
@@ -50,7 +50,7 @@ describe('Walkontable viewport columns calculator', () => {
       expect(wt.wtViewport.createColumnsCalculator(2).isVisibleInTrimmingContainer).toBe(true);
       expect(wt.wtViewport.createColumnsCalculator(1).isVisibleInTrimmingContainer).toBe(true);
 
-      window.scrollBy(Math.floor(tableWidth / 2) - 1, 0);
+      window.scrollBy(Math.ceil(tableWidth / 2), 0);
 
       await sleep(100);
 
@@ -98,7 +98,7 @@ describe('Walkontable viewport columns calculator', () => {
       expect(wt.wtViewport.createColumnsCalculator(2).isVisibleInTrimmingContainer).toBe(false);
       expect(wt.wtViewport.createColumnsCalculator(1).isVisibleInTrimmingContainer).toBe(false);
 
-      window.scrollBy(tableOffset - window.innerWidth + getScrollbarWidth(), 0);
+      window.scrollBy(tableOffset - window.innerWidth + getScrollbarWidth() - 1, 0);
 
       await sleep(100);
 

diff --git a/handsontable/src/3rdparty/walkontable/test/spec/calculator/viewportRows.spec.js b/handsontable/src/3rdparty/walkontable/test/spec/calculator/viewportRows.spec.js
@@ -50,7 +50,7 @@ describe('Walkontable viewport rows calculator', () => {
       expect(wt.wtViewport.createRowsCalculator(2).isVisibleInTrimmingContainer).toBe(true);
       expect(wt.wtViewport.createRowsCalculator(1).isVisibleInTrimmingContainer).toBe(true);
 
-      window.scrollBy(0, Math.floor((tableHeight / 2) - 1));
+      window.scrollBy(0, Math.ceil((tableHeight / 2) - 1));
 
       await sleep(100);
 
@@ -98,7 +98,7 @@ describe('Walkontable viewport rows calculator', () => {
       expect(wt.wtViewport.createRowsCalculator(2).isVisibleInTrimmingContainer).toBe(false);
       expect(wt.wtViewport.createRowsCalculator(1).isVisibleInTrimmingContainer).toBe(false);
 
-      window.scrollBy(0, tableOffset - window.innerHeight + getScrollbarWidth());
+      window.scrollBy(0, tableOffset - window.innerHeight + getScrollbarWidth() - 1);
 
       await sleep(100);
 

diff --git a/handsontable/test/e2e/Core_render.spec.js b/handsontable/test/e2e/Core_render.spec.js
@@ -207,4 +207,54 @@ describe('Core_render', () => {
 
     expect(wotRenderSpy).toHaveBeenCalledTimes(0);
   });
+
+  it('should trigger only the "fast" render for oversized columns (#dev-1849)', async() => {
+    const renderer = jasmine.createSpy('renderer');
+
+    handsontable({
+      data: createSpreadsheetData(10, 2),
+      fixedColumnsStart: 1,
+      colWidths: [30, 500],
+      width: 200,
+      height: 200,
+      renderer,
+    });
+
+    renderer.calls.reset();
+    selectCell(0, 0);
+
+    expect(renderer).toHaveBeenCalledTimes(0);
+  });
+
+  it('should trigger only the "fast" render for oversized rows (#dev-1849)', async() => {
+    const renderer = jasmine.createSpy('renderer');
+
+    handsontable({
+      data: createSpreadsheetData(2, 10),
+      fixedRowsTop: 1,
+      rowHeights: [30, 500],
+      width: 200,
+      height: 200,
+      renderer,
+    });
+
+    renderer.calls.reset();
+    selectCell(0, 0);
+
+    expect(renderer).toHaveBeenCalledTimes(0);
+  });
+
+  it('should correctly render oversized cells after scroll (#dev-1849)', async() => {
+    handsontable({
+      data: createSpreadsheetData(20, 20),
+      rowHeights: 300,
+      colWidths: 300,
+      width: 200,
+      height: 200,
+    });
+
+    selectCell(19, 19);
+
+    expect(getMaster().find('tr:last td:last').text()).toBe('T20');
+  });
 });