Merge pull request #741 from revolist/#740

fix: #740 - recalculate viewport size on header and footer change

Author: revomanik

package-lock.json

@@ -104,7 +104,6 @@
   },
   "devDependencies": {
     "@angular/core": "^18.1.2",
-    "@juggle/resize-observer": "^3.4.0",
     "@revolist/stencil-vue2-output-target": "^0.0.6",
     "@revolist/svelte-output-target": "0.0.6",
     "@stencil/angular-output-target": "0.8.4",
@@ -119,7 +118,6 @@
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/resize-observer-browser": "^0.1.11",
     "bootstrap": "^5.3.2",
     "chalk": "^5.3.0",
     "minimist": "^1.2.8",

package.json

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 import { GridPlugin } from "./plugins/base.plugin";
 import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 import { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -21,7 +21,7 @@ import { ResizeProps } from "./components/header/resizable.directive";
 import { HeaderRenderProps } from "./components/header/header-renderer";
 import { HeaderGroupRendererProps } from "./components/header/header-group-renderer";
 import { EventData } from "./components/overlay/selection.utils";
-export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 export { GridPlugin } from "./plugins/base.plugin";
 export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 export { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -153,6 +153,10 @@ export namespace Components {
           * Get all active plugins instances
          */
         "getPlugins": () => Promise<PluginBaseComponent[]>;
+        /**
+          * Get all providers for grid Useful for external grid integration
+         */
+        "getProviders": () => Promise<PluginProviders | undefined>;
         /**
           * Get the currently selected Range.
          */

src/components.d.ts

@@ -918,6 +918,14 @@ export class RevoGridComponent {
     this.extraService?.refresh();
   }
 
+  /**
+   * Get all providers for grid
+   * Useful for external grid integration
+   */
+  @Method() async getProviders() {
+    return this.getPluginData();
+  }
+
   // #endregion
 
   // #region Listeners outside scope

src/components/revoGrid/revo-grid.tsx

@@ -1,6 +1,4 @@
 import throttle from 'lodash/throttle';
-import { resizeObserver } from '../../utils/resize-observer.polifill';
-
 type ResizeEntry = {
   width: number;
   height: number;
@@ -11,14 +9,11 @@ export default class GridResizeService {
     width: 0,
     height: 0,
   };
-  private readonly apply = throttle(
-    (e: ReadonlyArray<ResizeObserverEntry>) => {
-      if (!e.length) {
-        return;
-      }
+  readonly apply = throttle(
+    (e: { width: number, height: number }) => {
       const entry = {
-        width: e[0].contentRect.width,
-        height: e[0].contentRect.height,
+        width: e.width,
+        height: e.height,
       };
       this.resize?.(entry, this.previousSize);
       this.previousSize = entry;
@@ -35,17 +30,34 @@ export default class GridResizeService {
       entry: ResizeEntry,
       previousSize: ResizeEntry,
     ) => void,
+    elements: (HTMLElement | undefined)[],
   ) {
-    this.init(el);
+    const extras: HTMLElement[] = [];
+    elements.forEach((element) => {
+      if (element) {
+        extras.push(element);
+      }
+    });
+    this.init(el, extras);
   }
 
-  async init(el: HTMLElement): Promise<void> {
-    await resizeObserver();
-    this.resizeObserver = new ResizeObserver(this.apply);
-    this.resizeObserver?.observe(el);
+  init(el: HTMLElement, extras: HTMLElement[] = []) {
+    const observer = this.resizeObserver = new ResizeObserver((e) => {
+      if (e.length) {
+        if (e[0].target === el) {
+          this.apply(e[0].contentRect);
+        } else {
+          this.apply(el.getBoundingClientRect());
+        }
+      }
+    });
+    observer.observe(el);
+    extras.forEach((extra) => {
+      observer.observe(extra);
+    });
   }
 
-  public destroy() {
+  destroy() {
     this.resizeObserver?.disconnect();
     this.resizeObserver = null;
   }

src/components/revoGrid/viewport.resize.service.ts

@@ -262,6 +262,7 @@ export class RevogrViewportScroll implements ElementScroll {
           this.setScrollVisibility(dimension, item.size, item.contentSize);
         }
       },
+      [this.footer, this.header],
     );
   }