review

Author: kseamon

src/cdk-experimental/column-resize/column-resize-notifier.ts

@@ -28,7 +28,7 @@ export interface ColumnSizeAction extends ColumnSize {
   readonly completeImmediately?: boolean;
 }
 
-/** Conduit for resize-releated events within the table. */
+/** Originating source of column resize events within a table. */
 @Injectable()
 export class ColumnResizeNotifierSource {
   /** Emits when an in-progress resize is canceled. */

src/cdk-experimental/column-resize/column-resize.ts

@@ -14,7 +14,7 @@ import {filter, map, mapTo, pairwise, startWith, take, takeUntil} from 'rxjs/ope
 import {_closest, _matches} from '@angular/cdk-experimental/popover-edit';
 
 import {ColumnResizeNotifier, ColumnResizeNotifierSource} from './column-resize-notifier';
-import {HEADER_CELL_SELECTOR, RESIZE_OVERLAY_SELECTOR} from './constants';
+import {HEADER_CELL_SELECTOR, RESIZE_OVERLAY_SELECTOR} from './selectors';
 import {HeaderRowEventDispatcher} from './event-dispatcher';
 
 const HOVER_OR_ACTIVE_CLASS = 'cdk-column-resize-hover-or-active';

src/cdk-experimental/column-resize/event-dispatcher.ts

@@ -12,7 +12,7 @@ import {distinctUntilChanged, map, share, skip, startWith} from 'rxjs/operators'
 
 import {_closest} from '@angular/cdk-experimental/popover-edit';
 
-import {HEADER_ROW_SELECTOR} from './constants';
+import {HEADER_ROW_SELECTOR} from './selectors';
 
 /** Coordinates events between the column resize directives. */
 @Injectable()

src/cdk-experimental/column-resize/overlay-handle.ts

@@ -24,11 +24,13 @@ import {
 
 import {_closest} from '@angular/cdk-experimental/popover-edit';
 
-import {HEADER_CELL_SELECTOR} from './constants';
+import {HEADER_CELL_SELECTOR} from './selectors';
 import {ColumnResizeNotifierSource} from './column-resize-notifier';
 import {HeaderRowEventDispatcher} from './event-dispatcher';
 import {ResizeRef} from './resize-ref';
 
+// TODO: Take another look at using cdk drag drop. IIRC I ran into a couple
+// good reasons for not using it but I don't remember what they were at this point.
 /**
  * Base class for a component shown over the edge of a resizable column that is responsible
  * for handling column resize mouse events and displaying any visible UI on the column edge.

src/cdk-experimental/column-resize/resizable.ts

@@ -24,14 +24,16 @@ import {filter, takeUntil} from 'rxjs/operators';
 
 import {_closest} from '@angular/cdk-experimental/popover-edit';
 
-import {HEADER_ROW_SELECTOR} from './constants';
+import {HEADER_ROW_SELECTOR} from './selectors';
 import {ResizeOverlayHandle} from './overlay-handle';
 import {ColumnResize} from './column-resize';
 import {ColumnSizeAction, ColumnResizeNotifierSource} from './column-resize-notifier';
 import {HeaderRowEventDispatcher} from './event-dispatcher';
 import {ResizeRef} from './resize-ref';
 import {ResizeStrategy} from './resize-strategy';
 
+const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';
+
 /**
  * Base class for Resizable directives which are applied to column headers to make those columns
  * resizable.
@@ -108,6 +110,10 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   protected abstract getOverlayHandleComponentType(): Type<HandleComponent>;
 
   private _createOverlayForHandle(): OverlayRef {
+    // Use of overlays allows us to properly capture click events spanning parts
+    // of two table cells and is also useful for displaying a resize thumb
+    // over both cells and extending it down the table as needed.
+
     const positionStrategy = this.overlay.position()
         .flexibleConnectedTo(this.elementRef.nativeElement!)
         .withFlexibleDimensions(false)
@@ -163,30 +169,38 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
       this._applySize(size);
 
       if (completeImmediately) {
-        this.ngZone.run(() => {
-          this.resizeNotifier.resizeCompleted.next({
-            columnId: this.columnDef.name,
-            size: this.elementRef.nativeElement!.offsetWidth,
-          });
-        });
+        this._completeResizeOperation();
       }
     });
 
     merge(
         this.resizeNotifier.resizeCanceled,
         this.resizeNotifier.resizeCompleted,
     ).pipe(takeUntilDestroyed).subscribe(columnSize => {
-      this.elementRef.nativeElement!.classList.remove(OVERLAY_ACTIVE_CLASS);
+      this._cleanUpAfterResize(columnSize);
+    });
+  }
+
+  private _completeResizeOperation(): void {
+    this.ngZone.run(() => {
+      this.resizeNotifier.resizeCompleted.next({
+        columnId: this.columnDef.name,
+        size: this.elementRef.nativeElement!.offsetWidth,
+      });
+    });
+  }
 
-      if (this.overlayRef && this.overlayRef.hasAttached()) {
-        this._updateOverlayHandleHeight();
-        this.overlayRef.updatePosition();
+  private _cleanUpAfterResize(columnSize: ColumnSizeAction): void {
+    this.elementRef.nativeElement!.classList.remove(OVERLAY_ACTIVE_CLASS);
 
-        if (columnSize.columnId === this.columnDef.name) {
-          this.inlineHandle!.focus();
-        }
+    if (this.overlayRef && this.overlayRef.hasAttached()) {
+      this._updateOverlayHandleHeight();
+      this.overlayRef.updatePosition();
+
+      if (columnSize.columnId === this.columnDef.name) {
+        this.inlineHandle!.focus();
       }
-    });
+    }
   }
 
   private _createHandlePortal(): ComponentPortal<HandleComponent> {
@@ -234,5 +248,3 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     this.elementRef.nativeElement!.appendChild(this.inlineHandle);
   }
 }
-
-const OVERLAY_ACTIVE_CLASS = 'cdk-resizable-overlay-thumb-active';