fix: column resize inside sheet (#351)

* fix: column resize inside sheet

* fix: test

Author: jake-bassett

projects/components/src/table/table.component.test.ts

@@ -1,6 +1,6 @@
 import { fakeAsync } from '@angular/core/testing';
 import { ActivatedRoute, convertToParamMap } from '@angular/router';
-import { NavigationService } from '@hypertrace/common';
+import { DomElementMeasurerService, NavigationService } from '@hypertrace/common';
 import {
   CoreTableCellRendererType,
   LetAsyncModule,
@@ -65,6 +65,16 @@ describe('Table component', () => {
       mockProvider(ActivatedRoute, {
         queryParamMap: EMPTY
       }),
+      mockProvider(DomElementMeasurerService, {
+        measureHtmlElement: (): ClientRect => ({
+          top: 0,
+          left: 0,
+          bottom: 20,
+          right: 200,
+          height: 20,
+          width: 200
+        })
+      }),
       mockProvider(TableService, {
         buildExtendedColumnConfigs: (columnConfigs: TableColumnConfig[]) => columnConfigs as TableColumnConfigExtended[]
       })

projects/components/src/table/table.component.ts

@@ -15,7 +15,13 @@ import {
   ViewChild
 } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { isEqualIgnoreFunctions, NavigationService, NumberCoercer, TypedSimpleChanges } from '@hypertrace/common';
+import {
+  DomElementMeasurerService,
+  isEqualIgnoreFunctions,
+  NavigationService,
+  NumberCoercer,
+  TypedSimpleChanges
+} from '@hypertrace/common';
 import { without } from 'lodash-es';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
@@ -336,6 +342,7 @@ export class TableComponent
     private readonly changeDetector: ChangeDetectorRef,
     private readonly navigationService: NavigationService,
     private readonly activatedRoute: ActivatedRoute,
+    private readonly domElementMeasurerService: DomElementMeasurerService,
     private readonly tableService: TableService
   ) {
     combineLatest([this.activatedRoute.queryParamMap, this.columnConfigs$])
@@ -437,19 +444,16 @@ export class TableComponent
 
   private buildColumnInfo(index: number): ColumnInfo {
     const element = this.queryHeaderCellElement(index);
+    const boundingBox = this.domElementMeasurerService.measureHtmlElement(element);
 
     return {
       config: this.getVisibleColumnConfig(index),
       element: element,
-      bounds: this.calcBounds(element)
-    };
-  }
-
-  private calcBounds(element: HTMLElement): ColumnBounds {
-    // We add additional padding so a portion of the column remains visible to resize (asymmetry due to resize-handle)
-    return {
-      left: element.offsetLeft + 12,
-      right: element.offsetLeft + element.offsetWidth - 8
+      bounds: {
+        // We add additional padding so a portion of the column remains visible to resize (asymmetry due to resize-handle)
+        left: boundingBox.left + 12,
+        right: boundingBox.left + boundingBox.width - 8
+      }
     };
   }