fix(resizer): remove scrollbar measure compensate patch (#424)

- that was a temporary patch that was put in place to compensate for incorrect scrollbar measure happening in some browser like Chrome. This patch is no longer necessary since the bug was fixed in SlickGrid (core) Co-authored-by: Ghislain Beaulac <[email protected]>
ghiscoding · Mar 30, 2020 · bca1f0b · bca1f0b
1 parent 36bdcd1
commit bca1f0b
Show file tree

Hide file tree

Showing 31 changed files with 32 additions and 74 deletions.
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.22.1",
     "rxjs": "^6.3.3",
-    "slickgrid": "^2.4.19",
+    "slickgrid": "2.4.20",
     "text-encoding-utf-8": "^1.0.2"
   },
   "devDependencies": {

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -137,7 +137,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
       enableAutoResize: true,
       autoResize: {
         containerId: 'grid-container',
-        sidePadding: 15
+        sidePadding: 10
       }
     })
   ],

diff --git a/src/app/examples/grid-additem.component.ts b/src/app/examples/grid-additem.component.ts
@@ -132,7 +132,7 @@ export class GridAddItemComponent implements OnInit {
       asyncEditorLoading: false,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       editable: true,
       enableColumnPicker: true,

diff --git a/src/app/examples/grid-angular.component.ts b/src/app/examples/grid-angular.component.ts
@@ -244,7 +244,7 @@ export class GridAngularComponent implements OnInit {
       autoCommitEdit: false,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       headerRowHeight: 45,
       rowHeight: 45, // increase row height so that the ng-select fits in the cell

diff --git a/src/app/examples/grid-autoheight.component.ts b/src/app/examples/grid-autoheight.component.ts
@@ -92,7 +92,7 @@ export class GridAutoHeightComponent implements OnInit {
       autoHeight: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
 
       // enable the filtering but hide the user filter row since we use our own single filter

diff --git a/src/app/examples/grid-clientside.component.ts b/src/app/examples/grid-clientside.component.ts
@@ -173,7 +173,7 @@ export class GridClientSideComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableExcelExport: true,
       enableExcelCopyBuffer: true,

diff --git a/src/app/examples/grid-contextmenu.component.ts b/src/app/examples/grid-contextmenu.component.ts
@@ -249,7 +249,7 @@ export class GridContextMenuComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableCellNavigation: true,
       enableFiltering: true,

diff --git a/src/app/examples/grid-draggrouping.component.ts b/src/app/examples/grid-draggrouping.component.ts
@@ -207,7 +207,7 @@ export class GridDraggableGroupingComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableDraggableGrouping: true,
       createPreHeaderPanel: true,

diff --git a/src/app/examples/grid-editor.component.ts b/src/app/examples/grid-editor.component.ts
@@ -436,7 +436,7 @@ export class GridEditorComponent implements OnInit {
       autoCommitEdit: false,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       editable: true,
       enableCellNavigation: true,

diff --git a/src/app/examples/grid-formatter.component.ts b/src/app/examples/grid-formatter.component.ts
@@ -65,7 +65,7 @@ export class GridFormatterComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableAutoResize: true,
       enableCellNavigation: true,

diff --git a/src/app/examples/grid-frozen.component.ts b/src/app/examples/grid-frozen.component.ts
@@ -132,7 +132,7 @@ export class GridFrozenComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
       enableExcelCopyBuffer: true,

diff --git a/src/app/examples/grid-graphql-nopage.component.ts b/src/app/examples/grid-graphql-nopage.component.ts
@@ -132,7 +132,7 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableFiltering: true,
       enableCellNavigation: true,

diff --git a/src/app/examples/grid-grouping.component.ts b/src/app/examples/grid-grouping.component.ts
@@ -132,7 +132,7 @@ export class GridGroupingComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableExcelExport: true,
       enableFiltering: true,

diff --git a/src/app/examples/grid-headerbutton.component.ts b/src/app/examples/grid-headerbutton.component.ts
@@ -49,7 +49,7 @@ export class GridHeaderButtonComponent implements OnInit, OnDestroy {
       enableHeaderMenu: false,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableFiltering: false,
       enableCellNavigation: true,

diff --git a/src/app/examples/grid-headermenu.component.ts b/src/app/examples/grid-headermenu.component.ts
@@ -99,7 +99,7 @@ export class GridHeaderMenuComponent implements OnInit {
       enableHeaderMenu: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableFiltering: false,
       enableCellNavigation: true,

diff --git a/src/app/examples/grid-localization.component.ts b/src/app/examples/grid-localization.component.ts
@@ -132,7 +132,7 @@ export class GridLocalizationComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableAutoResize: true,
       enableExcelCopyBuffer: true,

diff --git a/src/app/examples/grid-menu.component.ts b/src/app/examples/grid-menu.component.ts
@@ -74,7 +74,7 @@ export class GridMenuComponent implements OnInit {
       enableGridMenu: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableFiltering: true,
       enableCellNavigation: true,

diff --git a/src/app/examples/grid-odata.component.ts b/src/app/examples/grid-odata.component.ts
@@ -80,7 +80,7 @@ export class GridOdataComponent implements OnInit {
       enableAutoResize: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       checkboxSelector: {
         // you can toggle these 2 properties to show the "select all" checkbox in different location

diff --git a/src/app/examples/grid-range.component.ts b/src/app/examples/grid-range.component.ts
@@ -146,7 +146,7 @@ export class GridRangeComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableExcelCopyBuffer: true,
       enableFiltering: true,

diff --git a/src/app/examples/grid-remote.component.ts b/src/app/examples/grid-remote.component.ts
@@ -98,7 +98,7 @@ export class GridRemoteComponent implements OnDestroy, OnInit {
       enableAutoResize: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableCellNavigation: true,
       enableColumnReorder: false,

diff --git a/src/app/examples/grid-rowdetail.component.ts b/src/app/examples/grid-rowdetail.component.ts
@@ -78,7 +78,7 @@ export class GridRowDetailComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableFiltering: true,
       enableRowDetailView: true,

diff --git a/src/app/examples/grid-rowmove.component.ts b/src/app/examples/grid-rowmove.component.ts
@@ -52,7 +52,7 @@ export class GridRowMoveComponent implements OnInit {
       enableAutoResize: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableCellNavigation: true,
       enableRowMoveManager: true,
@@ -100,15 +100,11 @@ export class GridRowMoveComponent implements OnInit {
 
   onMoveRows(e, args) {
     const extractedRows = [];
-    let left;
-    let right;
     const rows = args.rows;
     const insertBefore = args.insertBefore;
-    left = this.dataset.slice(0, insertBefore);
-    right = this.dataset.slice(insertBefore, this.dataset.length);
-    rows.sort((a, b) => {
-      return a - b;
-    });
+    const left = this.dataset.slice(0, insertBefore);
+    const right = this.dataset.slice(insertBefore, this.dataset.length);
+    rows.sort((a, b) => a - b);
 
     for (let i = 0; i < rows.length; i++) {
       extractedRows.push(this.dataset[rows[i]]);
@@ -124,15 +120,13 @@ export class GridRowMoveComponent implements OnInit {
         right.splice(row - insertBefore, 1);
       }
     }
-    this.dataset = left.concat(extractedRows.concat(right));
+    const updatedDataset = left.concat(extractedRows.concat(right));
     const selectedRows = [];
-
     for (let i = 0; i < rows.length; i++) {
       selectedRows.push(left.length + i);
     }
-
     this.angularGrid.slickGrid.resetActiveCell();
-    this.angularGrid.slickGrid.setData(this.dataset);
+    this.angularGrid.slickGrid.setData(updatedDataset);
     this.angularGrid.slickGrid.setSelectedRows(selectedRows);
     this.angularGrid.slickGrid.render();
   }

diff --git a/src/app/examples/grid-state.component.ts b/src/app/examples/grid-state.component.ts
@@ -140,7 +140,7 @@ export class GridStateComponent implements OnInit {
     this.gridOptions = {
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableCheckboxSelector: true,
       enableFiltering: true,

diff --git a/src/app/examples/grid-tabs.component.ts b/src/app/examples/grid-tabs.component.ts
@@ -55,7 +55,7 @@ export class GridTabsComponent implements OnInit {
       enableAutoResize: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableSorting: true
     };
@@ -79,7 +79,7 @@ export class GridTabsComponent implements OnInit {
       enableAutoResize: true,
       autoResize: {
         containerId: 'demo-container',
-        sidePadding: 15
+        sidePadding: 10
       },
       enableFiltering: true,
       enableSorting: true

diff --git a/src/app/examples/swt-common-grid.component.ts b/src/app/examples/swt-common-grid.component.ts
@@ -101,7 +101,7 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer
     autoEdit: this.isAutoEdit,
     autoResize: {
       containerId: 'common-grid-container',
-      sidePadding: 15
+      sidePadding: 10
     },
     // locale: 'fr',
     enableColumnPicker: true,

diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts
@@ -136,7 +136,6 @@ const resizerServiceStub = {
   init: jest.fn(),
   dispose: jest.fn(),
   bindAutoResizeDataGrid: jest.fn(),
-  compensateHorizontalScroll: jest.fn(),
   resizeGrid: jest.fn(),
 } as unknown as ResizerService;
 

diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
@@ -633,9 +633,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     // expand/autofit columns on first page load
     if (grid && options.autoFitColumnsOnFirstLoad && options.enableAutoSizeColumns) {
       grid.autosizeColumns();
-
-      // compensate anytime SlickGrid measureScrollbar is incorrect (only seems to happen in Chrome 1/5 computers)
-      this.resizer.compensateHorizontalScroll(this.grid, this.gridOptions);
     }
 
     // auto-resize grid on browser resize

diff --git a/src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/groupingAndColspan.service.spec.ts
@@ -48,7 +48,6 @@ const resizerServiceStub = {
   init: jest.fn(),
   dispose: jest.fn(),
   bindAutoResizeDataGrid: jest.fn(),
-  compensateHorizontalScroll: jest.fn(),
   resizeGrid: jest.fn(),
   onGridAfterResize: new Subject<GridDimension>(),
 } as unknown as ResizerService;

diff --git a/src/app/modules/angular-slickgrid/services/__tests__/resizer.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/resizer.service.spec.ts
@@ -17,7 +17,7 @@ const gridOptionMock = {
     containerId,
     maxHeight: 800,
     maxWidth: 1200,
-    sidePadding: 15,
+    sidePadding: 10,
   },
   enableAutoResize: true
 } as GridOption;

diff --git a/src/app/modules/angular-slickgrid/services/resizer.service.ts b/src/app/modules/angular-slickgrid/services/resizer.service.ts
@@ -1,5 +1,4 @@
 import { GridOption } from './../models/index';
-import { getScrollBarWidth } from './utilities';
 import { Subject } from 'rxjs';
 
 // using external non-typed js libraries
@@ -158,25 +157,6 @@ export class ResizerService {
     $(window).off(`resize.grid.${this._gridUid}`);
   }
 
-  /**
-   * For some reason this only seems to happen in Chrome and is sometime miscalculated by SlickGrid measureSrollbar() method
-   * When that happens we will compensate and resize the Grid Viewport to avoid seeing horizontal scrollbar
-   * Most of the time it happens, it's a tiny offset calculation of usually 3px (enough to show scrollbar)
-   * GitHub issue reference: https://github.com/6pac/SlickGrid/issues/275
-   */
-  compensateHorizontalScroll(grid: any, gridOptions: GridOption) {
-    const scrollbarDimensions = grid && grid.getScrollbarDimensions();
-    const slickGridScrollbarWidth = scrollbarDimensions && scrollbarDimensions.width;
-    const calculatedScrollbarWidth = getScrollBarWidth();
-
-    // if scrollbar width is different from SlickGrid calculation to our custom calculation
-    // then resize the grid with the missing pixels to remove scroll (usually only 3px)
-    if (slickGridScrollbarWidth < calculatedScrollbarWidth && this._gridDomElm && this._gridDomElm.width) {
-      const previousWidth = this._gridDomElm && this._gridDomElm.width && this._gridDomElm.width() || 0;
-      this._gridDomElm.width(previousWidth + (calculatedScrollbarWidth - slickGridScrollbarWidth));
-    }
-  }
-
   /**
    * Return the last resize dimensions used by the service
    * @return last dimensions
@@ -244,9 +224,6 @@ export class ResizerService {
         if (this._gridUid && $(`.${this._gridUid}`).length > 0) {
           this._grid.autosizeColumns();
         }
-
-        // compensate anytime SlickGrid measureScrollbar is incorrect
-        this.compensateHorizontalScroll(this._grid, this._gridOptions);
       }
 
       // keep last resized dimensions & resolve them to the Promise

diff --git a/src/app/modules/angular-slickgrid/services/utilities.ts b/src/app/modules/angular-slickgrid/services/utilities.ts
@@ -274,14 +274,6 @@ export function getHtmlElementOffset(element: HTMLElement): { top: number; left:
   return { top, left };
 }
 
-/** Get the browser's scrollbar width, this is different to each browser */
-export function getScrollBarWidth(): number {
-  const $outer = $('<div>').css({ visibility: 'hidden', width: 100, overflow: 'scroll' }).appendTo('body');
-  const widthWithScroll = $('<div>').css({ width: '100%' }).appendTo($outer).outerWidth();
-  $outer.remove();
-  return Math.ceil(100 - widthWithScroll);
-}
-
 /**
  * From a Date FieldType, return it's equivalent moment.js format
  * refer to moment.js for the format standard used: https://momentjs.com/docs/#/parsing/string-format/