[FIX] Rendering: Skip hidden headers

Some functions in the renderer and sheetview plugins were iterating on
every header from start to end regardeless of their visibility. In their
context of use, we only care about visible headers (compute visible
sizes or drawing them).

closes #5605

closes #5623

Task: 4535794
X-original-commit: f3f7026
Signed-off-by: Rémi Rahir (rar) <[email protected]>
Signed-off-by: Pierre Rousseau (pro) <[email protected]>

Author: rrahir

src/plugins/ui_stateful/sheetview.ts

@@ -422,21 +422,23 @@ export class SheetViewPlugin extends UIPlugin {
 
   getColRowOffsetInViewport(
     dimension: Dimension,
-    referenceIndex: HeaderIndex,
-    index: HeaderIndex
+    referenceHeaderIndex: HeaderIndex,
+    targetHeaderIndex: HeaderIndex
   ): Pixel {
-    const sheetId = this.getters.getActiveSheetId();
-    const visibleCols = this.getters.getSheetViewVisibleCols();
-    const visibleRows = this.getters.getSheetViewVisibleRows();
-    if (index < referenceIndex) {
-      return -this.getColRowOffsetInViewport(dimension, index, referenceIndex);
+    if (targetHeaderIndex < referenceHeaderIndex) {
+      return -this.getColRowOffsetInViewport(dimension, targetHeaderIndex, referenceHeaderIndex);
     }
+
+    const sheetId = this.getters.getActiveSheetId();
+    const visibleHeaders =
+      dimension === "COL"
+        ? this.getters.getSheetViewVisibleCols()
+        : this.getters.getSheetViewVisibleRows();
+    const startIndex = visibleHeaders.findIndex((header) => referenceHeaderIndex >= header);
+    const endIndex = visibleHeaders.findIndex((header) => targetHeaderIndex <= header);
+    const relevantIndexes = visibleHeaders.slice(startIndex, endIndex);
     let offset = 0;
-    const visibleIndexes = dimension === "COL" ? visibleCols : visibleRows;
-    for (let i = referenceIndex; i < index; i++) {
-      if (!visibleIndexes.includes(i)) {
-        continue;
-      }
+    for (const i of relevantIndexes) {
       offset += this.getters.getHeaderSize(sheetId, dimension, i);
     }
     return offset;

src/stores/grid_renderer_store.ts

@@ -395,10 +395,8 @@ export class GridRenderer {
     const { ctx, thinLineWidth } = renderingContext;
     const visibleCols = this.getters.getSheetViewVisibleCols();
     const left = visibleCols[0];
-    const right = visibleCols[visibleCols.length - 1];
     const visibleRows = this.getters.getSheetViewVisibleRows();
     const top = visibleRows[0];
-    const bottom = visibleRows[visibleRows.length - 1];
     const { width, height } = this.getters.getSheetViewDimensionWithHeaders();
     const selection = this.getters.getSelectedZones();
     const selectedCols = getZonesCols(selection);
@@ -416,7 +414,7 @@ export class GridRenderer {
     ctx.strokeStyle = "#333";
 
     // Columns headers background
-    for (let col = left; col <= right; col++) {
+    for (const col of visibleCols) {
       const colZone = { left: col, right: col, top: 0, bottom: numberOfRows - 1 };
       const { x, width } = this.getters.getVisibleRect(colZone);
       const isColActive = activeCols.has(col);
@@ -432,7 +430,7 @@ export class GridRenderer {
     }
 
     // Rows headers background
-    for (let row = top; row <= bottom; row++) {
+    for (const row of visibleRows) {
       const rowZone = { top: row, bottom: row, left: 0, right: numberOfCols - 1 };
       const { y, height } = this.getters.getVisibleRect(rowZone);
 
@@ -460,22 +458,22 @@ export class GridRenderer {
     ctx.beginPath();
 
     // column text + separator
-    for (const i of visibleCols) {
-      const colSize = this.getters.getColSize(sheetId, i);
-      const colName = numberToLetters(i);
-      ctx.fillStyle = activeCols.has(i) ? "#fff" : TEXT_HEADER_COLOR;
-      let colStart = this.getHeaderOffset("COL", left, i);
+    for (const col of visibleCols) {
+      const colSize = this.getters.getColSize(sheetId, col);
+      const colName = numberToLetters(col);
+      ctx.fillStyle = activeCols.has(col) ? "#fff" : TEXT_HEADER_COLOR;
+      let colStart = this.getHeaderOffset("COL", left, col);
       ctx.fillText(colName, colStart + colSize / 2, HEADER_HEIGHT / 2);
       ctx.moveTo(colStart + colSize, 0);
       ctx.lineTo(colStart + colSize, HEADER_HEIGHT);
     }
     // row text + separator
-    for (const i of visibleRows) {
-      const rowSize = this.getters.getRowSize(sheetId, i);
-      ctx.fillStyle = activeRows.has(i) ? "#fff" : TEXT_HEADER_COLOR;
+    for (const row of visibleRows) {
+      const rowSize = this.getters.getRowSize(sheetId, row);
+      ctx.fillStyle = activeRows.has(row) ? "#fff" : TEXT_HEADER_COLOR;
 
-      let rowStart = this.getHeaderOffset("ROW", top, i);
-      ctx.fillText(String(i + 1), HEADER_WIDTH / 2, rowStart + rowSize / 2);
+      let rowStart = this.getHeaderOffset("ROW", top, row);
+      ctx.fillText(String(row + 1), HEADER_WIDTH / 2, rowStart + rowSize / 2);
       ctx.moveTo(0, rowStart + rowSize);
       ctx.lineTo(HEADER_WIDTH, rowStart + rowSize);
     }