fix(ngrid/drag): support column & row reorder on the same host

libs/ngrid/drag/src/lib/drag-and-drop/column/column-drag-container.ts

@@ -5,8 +5,8 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DragDrop, CDK_DROP_LIST, CdkDropList } from '@angular/cdk/drag-drop';
 
 import { COLUMN, PblNgridComponent } from '@pebula/ngrid';
-import { CdkLazyDropList } from '../core/index';
-import { PblColumnDragDrop } from './column-drag-drop';
+import { CdkLazyDropList, PblDragDrop } from '../core/index';
+import { patchDropListRef } from './column-drop-list-ref';
 
 declare module '@pebula/ngrid/lib/ext/types' {
   interface PblNgridPluginExtension {
@@ -28,7 +28,7 @@ let _uniqueIdCounter = 0;
     '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
   },
   providers: [
-    { provide: DragDrop, useExisting: PblColumnDragDrop },
+    { provide: DragDrop, useExisting: PblDragDrop },
     { provide: CDK_DROP_LIST, useExisting: PblNgridColumnDragContainerDirective },
   ],
 })
@@ -81,6 +81,10 @@ export class PblNgridColumnDragContainerDirective<T = any> extends CdkLazyDropLi
     this._removePlugin(this.grid);
   }
 
+  protected initDropListRef(): void {
+    patchDropListRef(this.pblDropListRef as any);
+  }
+
   protected beforeStarted(): void {
     super.beforeStarted();
     this.dragging.next(true);

libs/ngrid/drag/src/lib/drag-and-drop/column/column-drop-list-ref.ts

@@ -54,3 +54,12 @@ export class PblColumnDropListRef<T = any> extends PblDropListRef<PblNgridColumn
     }
   }
 }
+
+export function patchDropListRef<T = any>(dropListRef: PblDropListRef<PblNgridColumnReorderPluginDirective<T>>) {
+  try {
+    Object.setPrototypeOf(dropListRef, PblColumnDropListRef.prototype);
+  } catch (err) {
+    (dropListRef as any)._sortPredicate = PblColumnDropListRef.prototype._sortPredicate;
+    dropListRef._sortItem = PblColumnDropListRef.prototype._sortItem;
+  }
+}

libs/ngrid/drag/src/lib/drag-and-drop/column/column-reorder-plugin.ts

@@ -4,8 +4,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DragDrop, CdkDragDrop, CDK_DROP_LIST } from '@angular/cdk/drag-drop';
 
 import { PblColumn, COLUMN } from '@pebula/ngrid';
-import { PblDragRef } from '../core/index';
-import { PblColumnDragDrop } from './column-drag-drop';
+import { PblDragDrop, PblDragRef } from '../core/index';
 import { PblNgridColumnDragDirective } from './column-drag';
 import { PblNgridColumnDragContainerDirective } from './column-drag-container';
 
@@ -27,7 +26,7 @@ export const COL_REORDER_PLUGIN_KEY: 'columnReorder' = 'columnReorder';
     '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
   },
   providers: [
-    { provide: DragDrop, useExisting: PblColumnDragDrop },
+    { provide: DragDrop, useExisting: PblDragDrop },
     { provide: CDK_DROP_LIST, useExisting: PblNgridColumnReorderPluginDirective },
   ],
 })

libs/ngrid/drag/src/lib/drag-and-drop/core/drop-list.ts

@@ -41,7 +41,7 @@ import { PblDragDrop } from './drag-drop';
 })
 export class CdkLazyDropList<T = any, DRef = any> extends CdkDropList<T> implements OnInit {
 
-  readonly pblDropListRef: PblDropListRef<DRef>;
+  get pblDropListRef(): PblDropListRef<DRef> { return this._dropListRef as any; }
 
   get grid(): PblNgridComponent<T> { return this._gridApi?.grid; }
   set grid(value: PblNgridComponent<T>) { this.updateGrid(value); }
@@ -71,7 +71,11 @@ export class CdkLazyDropList<T = any, DRef = any> extends CdkDropList<T> impleme
               @Optional() @Inject(CDK_DRAG_CONFIG) config?: DragDropConfig) {
     super(element, dragDrop, changeDetectorRef, _scrollDispatcher, dir, group, config);
 
-    this.pblDropListRef = this._dropListRef as any;
+    if (!(this.pblDropListRef instanceof PblDropListRef)) {
+      throw new Error('Invalid `DropListRef` injection, the ref is not an instance of PblDropListRef')
+    }
+    this.initDropListRef();
+
     // This is a workaround for https://github.com/angular/material2/pull/14153
     // Working around the missing capability for selecting a container element that is not the drop container host.
     this.originalElement = element;
@@ -82,9 +86,6 @@ export class CdkLazyDropList<T = any, DRef = any> extends CdkDropList<T> impleme
   }
 
   ngOnInit(): void {
-    if (!(this.pblDropListRef instanceof PblDropListRef)) {
-      throw new Error('Invalid `DropListRef` injection, the ref is not an instance of PblDropListRef')
-    }
     this._dropListRef.beforeStarted.subscribe( () => this.beforeStarted() );
   }
 
@@ -96,6 +97,14 @@ export class CdkLazyDropList<T = any, DRef = any> extends CdkDropList<T> impleme
     this.removeItem(drag);
   }
 
+  /**
+   * A chance for inheriting implementations to change/modify the drop list ref instance
+   *
+   * We can't do this via a DragDrop service replacement as we might have multiple drop-lists on the same
+   * element which mean they must share the same DragDrop factory...
+   */
+  protected initDropListRef(): void { }
+
   protected beforeStarted(): void {
     if (this.directContainerElement) {
       const element = this.originalElement.nativeElement.querySelector(this.directContainerElement) as HTMLElement;