[IMP] Grid: Snappy grid resizing

Currently, we detect the resize of the document viewport to trigger a
resizing in the plugins,which in turn changes the dom dimensions, and
it' s a loop of calls/get between the DOM and Model which ends up
converging. However, this process is kind of slow because we need to
wait for an animation frame at every iteration.

This revision adds a "snappy" way to handle the resizing by capturing
the top bar and bottom bar dimensions and instantly updating the size
in the model to the final value that we are looking for.

There is only one catch, and a pretty big one, the instant jump of size
takes (of course) place before the drawing of the canvas, which means
that we have one drawing frame where the visible part of the canvas does
not match the part that is drawn. When the latter is smaller than the
visible part, the undrawn part of the canvas is black -> it looks like a
glitch.

That being said, we could take some measures to draw some white
background that spills outside of the visible part to account for those
cases.

Author: rrahir

src/components/dashboard/dashboard.ts

@@ -32,7 +32,7 @@ css/* scss */ `
 
 export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-SpreadsheetDashboard";
-  static props = {};
+  static props = { getGridSize: Function };
   static components = {
     GridOverlay,
     GridPopover,

src/components/dashboard/dashboard.xml

@@ -5,7 +5,8 @@
         <GridOverlay
           onGridResized.bind="onGridResized"
           onGridMoved.bind="moveCanvas"
-          gridOverlayDimensions="gridOverlayDimensions">
+          gridOverlayDimensions="gridOverlayDimensions"
+          getGridSize="props.getGridSize">
           <div
             t-foreach="getClickableCells()"
             t-as="clickableCell"

src/components/grid/grid.ts

@@ -112,6 +112,7 @@ const registries = {
 
 interface Props {
   exposeFocus: (focus: () => void) => void;
+  getGridSize: () => DOMDimension;
 }
 
 // -----------------------------------------------------------------------------
@@ -121,6 +122,7 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-Grid";
   static props = {
     exposeFocus: Function,
+    getGridSize: Function,
   };
   static components = {
     GridComposer,
@@ -450,8 +452,8 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
 
   onGridResized({ height, width }: DOMDimension) {
     this.env.model.dispatch("RESIZE_SHEETVIEW", {
-      width: width,
-      height: height,
+      width: width - HEADER_WIDTH,
+      height: height - HEADER_HEIGHT,
       gridOffsetX: HEADER_WIDTH,
       gridOffsetY: HEADER_HEIGHT,
     });

src/components/grid/grid.xml

@@ -16,6 +16,7 @@
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
         onFigureDeleted.bind="focusDefaultElement"
+        getGridSize="props.getGridSize"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer

src/components/grid_overlay/grid_overlay.ts

@@ -146,6 +146,7 @@ interface Props {
   onGridMoved: (deltaX: Pixel, deltaY: Pixel) => void;
   gridOverlayDimensions: string;
   onFigureDeleted: () => void;
+  getGridSize: () => { width: number; height: number };
 }
 
 export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
@@ -159,6 +160,7 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
     onGridMoved: Function,
     gridOverlayDimensions: String,
     slots: { type: Object, optional: true },
+    getGridSize: Function,
   };
   static components = {
     FiguresContainer,
@@ -180,11 +182,12 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
     useCellHovered(this.env, this.gridOverlay);
     const resizeObserver = new ResizeObserver(() => {
       const boundingRect = this.gridOverlayEl.getBoundingClientRect();
+      const { width, height } = this.props.getGridSize();
       this.props.onGridResized({
         x: boundingRect.left,
         y: boundingRect.top,
-        height: this.gridOverlayEl.clientHeight,
-        width: this.gridOverlayEl.clientWidth,
+        height: height,
+        width: width,
       });
     });
     onMounted(() => {
@@ -291,7 +294,6 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
     const gridOverLayRect = getRefBoundingRect(this.gridOverlay);
     const x = ev.clientX - gridOverLayRect.x;
     const y = ev.clientY - gridOverLayRect.y;
-
     const colIndex = this.env.model.getters.getColIndex(x);
     const rowIndex = this.env.model.getters.getRowIndex(y);
     return [colIndex, rowIndex];

src/components/small_bottom_bar/small_bottom_bar.scss

@@ -1,6 +1,7 @@
 .o-spreadsheet .o-spreadsheet-small-bottom-bar {
   .o-selection-button {
     border-radius: 2px;
+    background-color: #e7e9ed;
     .o-icon {
       width: 24px;
       height: 24px;

src/components/spreadsheet/spreadsheet.ts

@@ -32,6 +32,7 @@ import {
   PRIMARY_BUTTON_ACTIVE_BG,
   PRIMARY_BUTTON_BG,
   PRIMARY_BUTTON_HOVER_BG,
+  SCROLLBAR_WIDTH,
   SEPARATOR_COLOR,
   TEXT_BODY,
   TEXT_BODY_MUTED,
@@ -421,7 +422,6 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
     );
 
     useExternalListener(window, "resize", () => this.render(true));
-
     // For some reason, the wheel event is not properly registered inside templates
     // in Chromium-based browsers based on chromium 125
     // This hack ensures the event declared in the template is properly registered/working
@@ -533,4 +533,28 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
     const sheetId = this.env.model.getters.getActiveSheetId();
     return this.env.model.getters.getVisibleGroupLayers(sheetId, "COL");
   }
+
+  getGridSize() {
+    const topBarHeight =
+      this.spreadsheetRef.el
+        ?.querySelector(".o-spreadsheet-topbar-wrapper")
+        ?.getBoundingClientRect().height || 0;
+    const bottomBarHeight =
+      this.spreadsheetRef.el
+        ?.querySelector(".o-spreadsheet-bottombar-wrapper")
+        ?.getBoundingClientRect().height || 0;
+
+    const gridWidth =
+      this.spreadsheetRef.el?.querySelector(".o-grid")?.getBoundingClientRect().width || 0;
+    const gridHeight =
+      (this.spreadsheetRef.el?.getBoundingClientRect().height || 0) -
+      (this.spreadsheetRef.el?.querySelector(".o-column-groups")?.getBoundingClientRect().height ||
+        0) -
+      topBarHeight -
+      bottomBarHeight;
+    return {
+      width: Math.max(gridWidth - SCROLLBAR_WIDTH, 0),
+      height: Math.max(gridHeight - SCROLLBAR_WIDTH, 0),
+    };
+  }
 }

src/components/spreadsheet/spreadsheet.xml

@@ -2,11 +2,13 @@
   <t t-name="o-spreadsheet-Spreadsheet">
     <div class="o-spreadsheet h-100 w-100" t-ref="spreadsheet" t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
-        <SpreadsheetDashboard/>
+        <SpreadsheetDashboard getGridSize.bind="getGridSize"/>
         <FullScreenChart/>
       </t>
       <t t-else="">
-        <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
+        <div class="o-spreadsheet-topbar-wrapper o-two-columns">
+          <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
+        </div>
         <div
           class="o-grid-container"
           t-att-class="{'o-two-columns': !sidePanel.isOpen}"
@@ -20,12 +22,14 @@
             <HeaderGroupContainer layers="rowLayers" dimension="'ROW'"/>
           </div>
           <div class="o-group-grid overflow-hidden">
-            <Grid exposeFocus="(focus) => this._focusGrid = focus"/>
+            <Grid exposeFocus="(focus) => this._focusGrid = focus" getGridSize.bind="getGridSize"/>
           </div>
         </div>
         <SidePanel/>
-        <SmallBottomBar t-if="env.isSmall" onClick="() => this.focusGrid()"/>
-        <BottomBar t-else="" onClick="() => this.focusGrid()"/>
+        <div class="o-spreadsheet-bottombar-wrapper o-two-columns overflow-hidden">
+          <SmallBottomBar t-if="env.isSmall" onClick="() => this.focusGrid()"/>
+          <BottomBar t-else="" onClick="() => this.focusGrid()"/>
+        </div>
       </t>
     </div>
   </t>

src/components/top_bar/top_bar.xml

@@ -1,7 +1,7 @@
 <templates>
   <t t-name="o-spreadsheet-TopBar">
     <div
-      class="o-spreadsheet-topbar o-two-columns d-flex flex-column user-select-none"
+      class="o-spreadsheet-topbar d-flex flex-column user-select-none"
       t-on-click="props.onClick">
       <div t-if="!env.isSmall" class="o-topbar-top d-flex justify-content-between">
         <!-- Menus -->

tests/__snapshots__/top_bar_component.test.ts.snap

@@ -6,7 +6,7 @@ exports[`TopBar component can set cell format 1`] = `
     class="o-spreadsheet"
   >
     <div
-      class="o-spreadsheet-topbar o-two-columns d-flex flex-column user-select-none"
+      class="o-spreadsheet-topbar d-flex flex-column user-select-none"
     >
       <div
         class="o-topbar-top d-flex justify-content-between"
@@ -1122,7 +1122,7 @@ exports[`TopBar component can set cell format 1`] = `
 
 exports[`TopBar component simple rendering 1`] = `
 <div
-  class="o-spreadsheet-topbar o-two-columns d-flex flex-column user-select-none"
+  class="o-spreadsheet-topbar d-flex flex-column user-select-none"
 >
   <div
     class="o-topbar-top d-flex justify-content-between"