Almost ready to go save for flex

Author: kseamon

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

@@ -6,11 +6,15 @@ export interface ColumnSize {
   readonly size: number;
 }
 
+export interface ColumnSizeAction extends ColumnSize {
+  readonly completeImmediately?: boolean;
+}
+
 @Injectable()
 export class _ColumnResizeNotifierSource {
-  readonly resizeCanceled = new Subject<ColumnSize>();
+  readonly resizeCanceled = new Subject<ColumnSizeAction>();
   readonly resizeCompleted = new Subject<ColumnSize>();
-  readonly triggerResize = new Subject<ColumnSize>();
+  readonly triggerResize = new Subject<ColumnSizeAction>();
 }
 
 @Injectable()
@@ -20,6 +24,6 @@ export class ColumnResizeNotifier {
   constructor(private readonly _source: _ColumnResizeNotifierSource) {}
 
   resize(columnId: string, size: number): void {
-    this._source.triggerResize.next({columnId, size});
+    this._source.triggerResize.next({columnId, size, completeImmediately: true});
   }
 }

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

@@ -1,7 +1,7 @@
 import {AfterViewInit, Directive, ElementRef, NgZone, OnDestroy} from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
 import {fromEvent, merge, ReplaySubject} from 'rxjs';
-import {filter, map, mapTo, pairwise, startWith, take, takeUntil, tap} from 'rxjs/operators';
+import {filter, map, mapTo, pairwise, startWith, take, takeUntil} from 'rxjs/operators';
 
 import {matches} from '../popover-edit/polyfill';
 
@@ -64,17 +64,15 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
   }
 
   private _listenForRowHoverEvents() {
-    this.ngZone.runOutsideAngular(() => {console.log(1);
+    this.ngZone.runOutsideAngular(() => {
       const element = this.elementRef.nativeElement!;
 
       fromEvent<MouseEvent>(element, 'mouseover').pipe(
           takeUntil(this.destroyed),
           map(event => closest(event.target, HEADER_CELL_SELECTOR)),
-          tap(cell => console.log('hovered', cell)),
           ).subscribe(this.eventDispatcher.headerCellHovered);
       fromEvent<MouseEvent>(element, 'mouseleave').pipe(
           takeUntil(this.destroyed),
-          tap(event => console.log('mouseleave related target', event.relatedTarget)),
           filter(event => !!event.relatedTarget && !matches(event.relatedTarget as Element, RESIZE_OVERLAY_SELECTOR)),
           mapTo(null),
           ).subscribe(this.eventDispatcher.headerCellHovered);
@@ -89,7 +87,7 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
     ).pipe(
         takeUntil(this.destroyed),
         take(1),
-    ).subscribe(() => {console.log('do it!');
+    ).subscribe(() => {
       this.elementRef.nativeElement!.classList.add(this.getWithResizedColumnClass());
     });
   }

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

@@ -1,6 +1,6 @@
 import {Injectable, NgZone} from '@angular/core';
 import {combineLatest, MonoTypeOperatorFunction, Observable, Subject} from 'rxjs';
-import {/*auditTime,*/ distinctUntilChanged, finalize, map, share, skip, startWith, tap} from 'rxjs/operators';
+import {distinctUntilChanged, map, share, skip, startWith} from 'rxjs/operators';
 
 import {closest} from '../popover-edit/polyfill';
 
@@ -13,24 +13,7 @@ export class _HeaderRowEventDispatcher {
   // element refers to header row
   readonly overlayHandleActiveForCell = new Subject<Element|null>();
 
-  constructor(private readonly _ngZone: NgZone) {
-    this.headerCellHovered.pipe(finalize(() => console.log('it stopped?')))
-        .subscribe(() => console.log('starting up'));
-  }
-  
-/*  private readonly _headerRowHoveredDistinct = this.headerRowHovered.pipe(
-      startWith(null),
-      distinctUntilChanged(),
-      share(),
-      tap(row => console.log('row hovered', row)),
-  );
-
-  private readonly _overlayActiveOrHoveredDistinct = this.overlayHandleActive.pipe(
-      startWith(null),
-      distinctUntilChanged(),
-      share(),
-      tap(row => console.log('overlay active', cell)),
-  );*/
+  constructor(private readonly _ngZone: NgZone) {}
 
   readonly headerCellHoveredDistinct = this.headerCellHovered.pipe(
       distinctUntilChanged(),
@@ -40,16 +23,13 @@ export class _HeaderRowEventDispatcher {
   readonly headerRowHoveredOrActiveDistinct = combineLatest(
       this.headerCellHoveredDistinct.pipe(
           map(cell => closest(cell, HEADER_ROW_SELECTOR)),
-          tap(row => console.log('hovered row', row)),
           startWith(null),
           distinctUntilChanged(),
-          tap(row => console.log('row hovered', row)),
        ),
       this.overlayHandleActiveForCell.pipe(
           map(cell => closest(cell, HEADER_ROW_SELECTOR)),
           startWith(null),
           distinctUntilChanged(),
-          tap(row => console.log('overlay active', row)),
       ),
   ).pipe(
       skip(1),
@@ -82,20 +62,6 @@ export class _HeaderRowEventDispatcher {
     return this._lastSeenRowHover!;
   }
 
-  cellOrRelatedOverlayHovered(cell: Element): Observable<boolean> {
-    return this.headerCellHoveredDistinct.pipe(
-        map(hoveredCell => hoveredCell === cell),
-        distinctUntilChanged(),
-    );
-  }
-  
-  nextCellOrRelatedOverlayHovered(cell: Element): Observable<boolean> {
-    return this.headerCellHoveredDistinct.pipe(
-        map(hoveredCell => !!hoveredCell && hoveredCell.previousElementSibling === cell),
-        distinctUntilChanged(),
-    );
-  }
-
   private _enterZone<T>(): MonoTypeOperatorFunction<T> {
     return (source: Observable<T>) =>
         new Observable<T>((observer) => source.subscribe({

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

@@ -4,7 +4,15 @@ import {Directionality} from '@angular/cdk/bidi';
 import {ESCAPE} from '@angular/cdk/keycodes';
 import {CdkColumnDef} from '@angular/cdk/table';
 import {fromEvent, ReplaySubject} from 'rxjs';
-import {distinctUntilChanged, filter, map, mapTo, pairwise, startWith, takeUntil} from 'rxjs/operators';
+import {
+  distinctUntilChanged,
+  filter,
+  map,
+  mapTo,
+  pairwise,
+  startWith,
+  takeUntil,
+} from 'rxjs/operators';
 
 import {closest} from '../popover-edit/polyfill';
 
@@ -71,11 +79,13 @@ export abstract class ResizeOverlayHandle implements AfterViewInit, OnDestroy {
         mouseup.pipe(takeUntil(escape), takeUntilDestroyed).subscribe(({pageX}) => {
           this.updateResizeActive(false);
 
-          if (pageX !== startX) {
-            this.ngZone.run(() => {
+          this.ngZone.run(() => {
+            if (pageX !== startX) {
               this.resizeNotifier.resizeCompleted.next({columnId, size});
-            });
-          }
+            } else {
+              this.resizeNotifier.resizeCanceled.next({columnId, size});
+            }
+          });
         });
 
         escape.pipe(takeUntil(mouseup), takeUntil(this.destroyed)).subscribe(() => {

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

@@ -3,6 +3,7 @@ import {
   ElementRef,
   Inject,
   Injector,
+  NgZone,
   OnDestroy,
   Type,
   ViewContainerRef
@@ -20,7 +21,7 @@ import {closest} from '../popover-edit/polyfill';
 import {HEADER_ROW_SELECTOR} from './constants';
 import {ResizeOverlayHandle} from './overlay-handle';
 import {ColumnResize} from './column-resize';
-import {ColumnSize, _ColumnResizeNotifierSource} from './column-resize-notifier';
+import {ColumnSizeAction, _ColumnResizeNotifierSource} from './column-resize-notifier';
 import {_HeaderRowEventDispatcher} from './event-dispatcher';
 import {ResizeRef} from './resize-ref';
 
@@ -29,6 +30,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   minPx: number = 0;
   maxPx: number = Number.MAX_SAFE_INTEGER;
 
+  protected inlineHandle?: HTMLElement;
   protected overlayRef?: OverlayRef;
   protected readonly destroyed = new ReplaySubject<void>();
   protected readonly document: Document;
@@ -42,6 +44,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
       protected readonly elementRef: ElementRef,
       protected readonly eventDispatcher: _HeaderRowEventDispatcher,
       protected readonly injector: Injector,
+      protected readonly ngZone: NgZone,
       protected readonly overlay: Overlay,
       protected readonly resizeNotifier: _ColumnResizeNotifierSource,
       protected readonly viewContainerRef: ViewContainerRef) {
@@ -57,6 +60,10 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   ngOnDestroy(): void {
     this.destroyed.next();
     this.destroyed.complete();
+
+    if (this.inlineHandle) {
+      this.elementRef.nativeElement!.removeChild(this.inlineHandle);
+    }
 
     if (this.overlayRef) {
       this.overlayRef.dispose();
@@ -77,14 +84,13 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
   protected abstract getColumnCssClassName(): string;
 
   private _listenForRowHoverEvents(): void {
-    console.log('init', this.columnDef.name);
     const element = this.elementRef.nativeElement!;
     const takeUntilDestroyed = takeUntil<boolean>(this.destroyed);
 
 
     this.eventDispatcher.resizeOverlayVisibleForHeaderRow(closest(element, HEADER_ROW_SELECTOR)!)
         .pipe(takeUntilDestroyed).subscribe(hoveringRow => {
-      if (hoveringRow) {console.log('a', hoveringRow, this.columnDef.name);
+      if (hoveringRow) {
         if (!this.overlayRef) {
           this.overlayRef = this.createOverlayForHandle();
         }
@@ -95,50 +101,44 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
         this.overlayRef.detach();
       }
     });
-    
-    this.eventDispatcher.cellOrRelatedOverlayHovered(element)
-        .pipe(takeUntilDestroyed).subscribe(hovering => {
-          // TODO: Use toggle once we're off IE11.
-          if (hovering) {
-            element.classList.add('resizable-hover');
-          } else {
-            element.classList.remove('resizable-hover');
-          }
-    });
-    
-    this.eventDispatcher.nextCellOrRelatedOverlayHovered(element)
-        .pipe(takeUntilDestroyed).subscribe(hoveringNext => {
-          // TODO: Use toggle once we're off IE11.
-          if (hoveringNext) {
-            element.classList.add('next-resizable-hover');
-          } else {
-            element.classList.remove('next-resizable-hover');
-          }
-    });
   }
 
   private _listenForResizeEvents() {
-    const takeUntilDestroyed = takeUntil<ColumnSize>(this.destroyed);
+    const takeUntilDestroyed = takeUntil<ColumnSizeAction>(this.destroyed);
 
     merge(
         this.resizeNotifier.resizeCanceled,
         this.resizeNotifier.triggerResize,
     ).pipe(
         takeUntilDestroyed,
         filter(columnSize => columnSize.columnId === this.columnDef.name),
-    ).subscribe(({size}) => {
-      this._applySize(size);
+    ).subscribe(({size, completeImmediately}) => {
       this.elementRef.nativeElement!.classList.add('resizable-overlay-thumb-active');
+      this._applySize(size);
+
+      if (completeImmediately) {
+        this.ngZone.run(() => {
+          this.resizeNotifier.resizeCompleted.next({
+            columnId: this.columnDef.name,
+            size: this.elementRef.nativeElement!.offsetWidth,
+          });
+        });
+      }
     });
 
     merge(
         this.resizeNotifier.resizeCanceled,
         this.resizeNotifier.resizeCompleted,
-    ).pipe(takeUntilDestroyed).subscribe(() => {
+    ).pipe(takeUntilDestroyed).subscribe(columnSize => {
+      this.elementRef.nativeElement!.classList.remove('resizable-overlay-thumb-active');
+
       if (this.overlayRef && this.overlayRef.hasAttached()) {
         this._updateOverlayHandleHeight();
-        this.elementRef.nativeElement!.classList.remove('resizable-overlay-thumb-active');
         this.overlayRef.updatePosition();
+
+        if (columnSize.columnId === this.columnDef.name) {
+          this.inlineHandle!.focus();
+        }
       }
     });
   }
@@ -150,9 +150,9 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     return new ComponentPortal(this.getOverlayHandleComponentType(), this.viewContainerRef, injector);
   }
 
-  private _showHandleOverlay(): void {console.log('b');
+  private _showHandleOverlay(): void {
     this._updateOverlayHandleHeight();
-    this.overlayRef!.attach(this._createHandlePortal());console.log('c');
+    this.overlayRef!.attach(this._createHandlePortal());
   }
 
   private _updateOverlayHandleHeight() {
@@ -161,20 +161,18 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
 
   private _applySize(sizeInPixels: number): void {
     const sizeToApply = Math.min(Math.max(sizeInPixels, this.minPx, 0), this.maxPx);
-    const columnClassName = this.getColumnCssClassName();
+/*    const columnClassName = this.getColumnCssClassName();
     const tableClassName = this.columnResize.getIdClass();
 
-    const selector = `.${tableClassName} .${columnClassName}`;
+    const selector = `.${tableClassName} .${columnClassName}`;*/
     const width = coerceCssPixelValue(sizeToApply);
 
-    console.time('apply size');
-
     // approach 0 (issues if number or order of cols change)
     // also does not work, seemingly
 /*    const table = document.querySelector(`.${tableClassName}`);
     const cols = table!.querySelectorAll('col');
     const index = Array.from(this.elementRef.nativeElement!.parentNode.childNodes).indexOf(this.elementRef.nativeElement!);
-    console.log(cols, index);
+
     cols[index].style.width = width;*/
 
     // approach 1 (no subsequent updates though)
@@ -186,16 +184,29 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
     // approach 1a
 /*    cells[0].style.width = width;*/
 
+    // approach 1b
+    
+    // With table-layout: fixed, all we have to do is set the size on the
+    // header element and the whole column will update.
+    // This is by far the fastest way to resize a table column tested.
+    // Also tested: resizing by adding CSS selectors, selectors with CSS variables.
+    this.elementRef.nativeElement!.style.boxSizing = 'border-box';
+    this.elementRef.nativeElement!.style.width = width;
+    
+    //////////
+    // todo: for flex-based tables, we'll need a different approach.
+    //////////
+    
     // approach 2
-    if (!this._styleElement) {
+/*    if (!this._styleElement) {
       this._styleElement = this.document.createElement('style');
       this._styleElement.appendChild(this.document.createTextNode(''));
       this.document.head.appendChild(this._styleElement);
     } else {
       (this._styleElement.sheet as CSSStyleSheet).deleteRule(0);
     }
     (this._styleElement.sheet as CSSStyleSheet).insertRule(
-        `${selector} {box-sizing: border-box;width:${width}}`, 0);
+        `${selector} {box-sizing: border-box;width:${width}}`, 0);*/
 
     // approach 2.5
 
@@ -208,20 +219,18 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
 
 
       const sheet = this._styleElement.sheet as CSSStyleSheet;
-      console.log(`${selector} {width:${cssVar}}`);
+
       sheet.insertRule(`${selector} {width:var(${cssVar})}`, 0);
     }*/
-    
-    console.timeEnd('apply size');
   }
 
   private _appendInlineHandle(): void {
-    const handle = document.createElement('div');
-    handle.tabIndex = 0;
-    handle.className = this.getInlineHandleCssClassName();
+    this.inlineHandle = document.createElement('div');
+    this.inlineHandle.tabIndex = 0;
+    this.inlineHandle.className = this.getInlineHandleCssClassName();
 
     // TODO: Apply correct aria role (probably slider) after a11y spec questions resolved.
 
-    this.elementRef.nativeElement!.appendChild(handle);
+    this.elementRef.nativeElement!.appendChild(this.inlineHandle);
   }
 }