Deprecate invalidate() by reordering column auto-size

README.md

@@ -81,7 +81,6 @@ available.
         - [Hierarchial/Group Headers](#hierarchialgroup-headers)
         - [`async` Data Models](#async-data-models)
     - [`.addStyleListener()` and `getMeta()` Styling](#addstylelistener-and-getmeta-styling)
-        - [`.invalidate()`](#invalidate)
     - [`.addEventListener()` Interaction](#addeventlistener-interaction)
     - [Scrolling](#scrolling)
     - [Pivots, Filters, Sorts, and Column Expressions with `perspective`](#pivots-filters-sorts-and-column-expressions-with-perspective)
@@ -483,28 +482,6 @@ function style_th(th) {
 }
 ```
 
-### `.invalidate()`
-
-To prevent DOM renders, `<regular-table>` conserves DOM calls like `offsetWidth`
-to an internal cache. When a `<td>` or `<th>`'s `width` is modified within a
-callback to `.addStyleListener()`, you must indicate to `<regular-table>` that
-its dimensions have changed in order to invalidate this cache, or you may not
-end up with enough rendered columns to fill the screen!
-
-A call to `invalidate()` that does not need new columns only imparts a small
-runtime overhead to re-calculate virtual width per async draw iteration, but
-should be used conservatively if possible. Calling `invalidate()` outside of a
-callback to `.addStyleListener()` will throw an `Error`.
-
-```javascript
-table.addStyleListener(() => {
-    for (const th of table.querySelectorAll("tbody th")) {
-        th.style.maxWidth = "20px";
-    }
-    table.invalidate();
-});
-```
-
 ## `.addEventListener()` Interaction
 
 `<regular-table>` is a normal `HTMLElement`! Use the `regular-table` API in

features/row_mouse_selection.js

@@ -174,16 +174,14 @@ const createRowRangeSelection = (table, rowSelection, dl) => {
             rowSelection.y1,
             lastSelection.y1,
         );
+
         const y1 = Math.max(
             rowSelection.y0,
             lastSelection.y0,
             rowSelection.y1,
             lastSelection.y1,
         );
-        const row_header_x = Math.min(
-            rowSelection.row_header_x,
-            lastSelection.row_header_x,
-        );
+
         rowSelection.y0 = y0;
         rowSelection.y1 = y1;
     }

package.json

@@ -32,7 +32,7 @@
         "lint": "prettier --check src tests features/*.js examples/**/*.js examples/*.html",
         "start": "http-server",
         "test": "pnpm exec playwright test",
-        "benchmark": "node benchmarks/benchmark.mjs",
+        "bench": "node benchmarks/benchmark.mjs",
         "changelog": "docker run -it --rm -e CHANGELOG_GITHUB_TOKEN=$GITHUB_TOKEN -v \"$(pwd)\":/usr/local/src/your-app githubchangeloggenerator/github-changelog-generator -u finos -p regular-table",
         "watch": "npm-run-all -p watch:*"
     },

src/less/container.less

@@ -40,12 +40,6 @@ div.rt-scroll-table-clip {
     height: 100%;
 }
 
-div.rt-tree-container {
-    display: flex;
-    align-items: center;
-    height: 100%;
-}
-
 slot {
     position: absolute;
     overflow: hidden;

src/less/material.less

@@ -56,35 +56,10 @@ regular-table {
         max-width: 0px;
     }
 
-    thead tr:last-child .rt-float,
-    tbody .rt-float {
-        text-align: right;
-    }
-
-    thead .rt-integer,
-    tbody .rt-integer {
-        text-align: right;
-    }
-
     tbody th {
         text-align: left;
     }
 
-    span.rt-tree-container {
-        display: flex;
-        align-items: center;
-        height: 100%;
-    }
-
-    thead .rt-string,
-    tbody .rt-string,
-    thead .rt-date,
-    tbody .rt-date,
-    thead .rt-datetime,
-    tbody .rt-datetime {
-        text-align: left;
-    }
-
     // frozen rows
 
     thead tr:last-child th {
@@ -95,13 +70,6 @@ regular-table {
         position: relative;
     }
 
-    tr th span.rt-tree-group {
-        margin-left: 5px;
-        margin-right: 15px;
-        border-left: 1px solid #eee;
-        height: 100%;
-    }
-
     td,
     th {
         white-space: nowrap;
@@ -133,65 +101,11 @@ regular-table {
         outline: none;
     }
 
-    span.rt-row-header-icon {
-        color: #aaa;
-        padding-right: 4px;
-        font-family: "Material Icons";
-    }
-
-    span.rt-column-header-icon {
-        font-size: 10px;
-        padding-left: 3px;
-        display: inline-block;
-        width: 10px;
-        font-family: "Material Icons";
-    }
-
-    span.rt-row-header-icon:hover {
-        color: #1a7da1;
-        text-shadow: 0px 0px 3px #1a7da1;
-    }
-
-    .rt-selected td {
-        background-color: #eee;
-    }
-
     .rt-cell-clip {
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
-    // OPTIONAL zebra striping
-
-    // @zebra-stripe-color: rgb(238,238,238);
-
-    // tbody tr:nth-child(even) td:not(.rt-group-header) {
-    //     background: @zebra-stripe-color;
-    // }
-
-    // tbody tr:nth-child(even) span.rt-group-name {
-    //     background: @zebra-stripe-color;
-    // }
-
-    td span.rt-group-name,
-    th span.rt-group-name {
-        margin-right: -5px;
-        padding-right: 5px;
-        padding-left: 8px;
-        flex: 1;
-        height: 100%;
-    }
-
-    th span.rt-group-name {
-        text-align: left;
-    }
-
-    td th span.rt-group-leaf,
-    th span.rt-group-leaf {
-        margin-left: 16px;
-        height: 100%;
-    }
-
     .rt-column-resize {
         height: 100%;
         width: 10px;

src/ts/events.ts

@@ -56,7 +56,7 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
      */
     async _on_scroll(event: Event) {
         event.stopPropagation();
-        await this.draw({ invalid_viewport: false });
+        await this.draw({ invalid_viewport: false, cache: true });
         this.dispatchEvent(new CustomEvent<undefined>("regular-table-scroll"));
     }
 
@@ -224,7 +224,7 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
                 }
             }
 
-            await this.draw();
+            await this.draw({ cache: true });
         }
     }
 
@@ -316,7 +316,7 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
                 this._column_sizes.indices[size_key || 0] !== override_width;
             this._column_sizes.indices[size_key || 0] = override_width;
             if (should_redraw) {
-                this.draw();
+                this.draw({ cache: true });
             }
         };
 
@@ -349,7 +349,11 @@ export class RegularViewEventModel extends RegularVirtualTableViewModel {
         // If the column is smaller, new columns may need to be fetched, so
         // redraw, else just update the DOM widths and clipping classes.
         if (diff < 0) {
-            await this.draw({ preserve_width: true, throttle: false });
+            await this.draw({
+                preserve_width: true,
+                throttle: false,
+                cache: true,
+            });
         } else {
             // Update column width styles via adoptedStyleSheets
             this.table_model.updateColumnWidthStyles(

src/ts/regular-table.ts

@@ -183,23 +183,6 @@ export class RegularTableElement extends RegularViewEventModel {
         );
     }
 
-    /**
-     * When called within the execution scope of a function registered to this
-     * `<regular-table>` as a `StyleListener`, invalidate this draw's
-     * dimensions and attempt to draw more columns.  Useful if your
-     * `StyleListener` changes a cells dimensions, otherwise `<regular-table>`
-     * may not draw enough columns to fill the screen.
-     */
-    invalidate(): void {
-        if (!this._is_styling) {
-            throw new Error(
-                "Cannot call `invalidate()` outside of a `StyleListener`",
-            );
-        }
-        /**  */
-        this._invalidated = true;
-    }
-
     /**
      * Returns the `MetaData` object associated with a `<td>` or `<th>`.  When
      * your `StyleListener` is invoked, use this method to look up additional

src/ts/scroll_panel.ts

@@ -284,27 +284,23 @@ export class RegularVirtualTableViewModel extends HTMLElement {
      */
     protected _update_sub_cell_offset(
         viewport: Viewport,
-        last_cells?: CellTuple[],
+        last_cell?: CellTuple,
     ): void {
         const y_offset =
             (this._column_sizes.row_height || 20) * (viewport.start_row % 1) ||
             0;
 
-        if (
-            (this.table_model._row_headers_length || 0) +
-                Math.floor(viewport.start_col) >=
-            this._column_sizes.indices.length
-        ) {
-            return;
-        }
-
         const x_offset_index =
             (this.table_model._row_headers_length || 0) +
             Math.floor(viewport.start_col);
 
+        if (this._column_sizes.indices[x_offset_index] === undefined) {
+            this._column_sizes.indices[x_offset_index] =
+                last_cell?.[0]?.offsetWidth || 0;
+        }
+
         const x_offset =
-            (this._column_sizes.indices[x_offset_index] ||
-                (last_cells?.[0]?.[0]?.offsetWidth ?? 0)) *
+            this._column_sizes.indices[x_offset_index]! *
                 (viewport.start_col % 1) || 0;
 
         this._sub_cell_rule.style.setProperty(CLIP_X, `${x_offset}px`);
@@ -424,6 +420,7 @@ export class RegularVirtualTableViewModel extends HTMLElement {
             diff /
             (this._column_sizes.indices[start_col + scroll_index_offset - 1] ||
                 60);
+
         return Math.max(0, start_col - 1);
     }
 
@@ -510,14 +507,19 @@ async function internal_draw(
     options: DrawOptions,
 ): Promise<void> {
     const __debug_start_time__ = DEBUG && performance.now();
+    if (!options.cache) {
+        this.table_model._resetDimState();
+    }
+
     const { invalid_viewport = true, preserve_width = false } = options;
     const {
         num_columns,
         num_rows,
         num_row_headers,
         num_column_headers,
         row_height,
-    } = await this._view_cache.view(0, 0, 0, 0);
+    } = await this.table_model._getDimState(this._view_cache);
+
     this._column_sizes.row_height = row_height || this._column_sizes.row_height;
     if (num_row_headers !== undefined) {
         this._view_cache.row_headers_length = num_row_headers;
@@ -530,8 +532,10 @@ async function internal_draw(
     // Cache virtual mode checks and default values
     const is_non_vertical =
         this._virtual_mode === "none" || this._virtual_mode === "horizontal";
+
     const is_non_horizontal =
         this._virtual_mode === "none" || this._virtual_mode === "vertical";
+
     const safe_num_rows = num_rows || 0;
     const safe_num_columns = num_columns || 0;
     this._container_size = {
@@ -549,48 +553,30 @@ async function internal_draw(
     const { invalid_row, invalid_column } = this._validate_viewport(viewport);
     const invalid_schema_or_column = this._invalid_schema || invalid_column;
     if (invalid_schema_or_column || invalid_row || invalid_viewport) {
-        let autosize_cells: CellTuple[] = [];
         let first_iteration = true;
-        for await (let last_cells of this.table_model.draw(
+        await this.table_model.draw(
             this._container_size,
             this._view_cache,
             this._selected_id,
             preserve_width,
             viewport,
             safe_num_columns,
-        )) {
-            if (last_cells !== undefined) {
-                autosize_cells.push(...last_cells);
-            }
-
-            this.table_model.updateColumnWidthStyles(
-                viewport,
-                this._view_cache.row_headers_length,
-            );
-
-            // We want to perform this before the next event loop so there
-            // is no scroll jitter, but only on the first iteration as
-            // subsequent viewports are incorrect.
-            if (first_iteration) {
-                this._update_sub_cell_offset(viewport, autosize_cells);
-                first_iteration = false;
-            }
-
-            this._is_styling = true;
-            for (const callback of this._style_callbacks) {
-                await callback({ detail: this as RegularTableElement });
-            }
-
-            this._is_styling = false;
-            if (!this._invalidated && last_cells !== undefined) {
-                break;
-            }
+            async (last_cells) => {
+                // We want to perform this before the next event loop so there
+                // is no scroll jitter, but only on the first iteration as
+                // subsequent viewports are incorrect.
+                if (first_iteration) {
+                    this._update_sub_cell_offset(viewport, last_cells);
+                    first_iteration = false;
+                }
 
-            this._invalidated = false;
-        }
+                for (const callback of this._style_callbacks) {
+                    await callback({ detail: this as RegularTableElement });
+                }
+            },
+        );
 
         const old_height = this._column_sizes.row_height;
-        this.table_model.autosize_cells(autosize_cells, row_height);
         this.table_model.header.reset_header_cache();
         if (old_height !== this._column_sizes.row_height) {
             this._update_virtual_panel_height(safe_num_rows);