refactor(drag-drop): expose drag ref in constrainPosition function (#16465)

Exposes the `DragRef` of the instance being dragged when calling the `constrainPosition` function. The `DragRef` has some more info and enable more complex use cases.

Fixes #16425.

Author: crisbeto

src/cdk/drag-drop/directives/drag.spec.ts

@@ -28,7 +28,7 @@ import {of as observableOf} from 'rxjs';
 
 import {DragDropModule} from '../drag-drop-module';
 import {CdkDragDrop, CdkDragEnter} from '../drag-events';
-import {DragRefConfig, Point} from '../drag-ref';
+import {DragRefConfig, Point, DragRef} from '../drag-ref';
 import {extendStyles} from '../drag-styling';
 import {moveItemInArray} from '../drag-utils';
 
@@ -753,7 +753,8 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBeFalsy();
       dragElementViaMouse(fixture, dragElement, 300, 300);
 
-      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({x: 300, y: 300}));
+      expect(spy)
+        .toHaveBeenCalledWith(jasmine.objectContaining({x: 300, y: 300}), jasmine.any(DragRef));
       expect(dragElement.style.transform).toBe('translate3d(50px, 50px, 0px)');
     }));
 
@@ -2430,7 +2431,8 @@ describe('CdkDrag', () => {
 
       const previewRect = preview.getBoundingClientRect();
 
-      expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({x: 200, y: 200}));
+      expect(spy)
+        .toHaveBeenCalledWith(jasmine.objectContaining({x: 200, y: 200}), jasmine.any(DragRef));
       expect(Math.floor(previewRect.top)).toBe(50);
       expect(Math.floor(previewRect.left)).toBe(50);
     }));

src/cdk/drag-drop/directives/drag.ts

@@ -152,7 +152,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
    * of the user's pointer on the page and should return a point describing where the item should
    * be rendered.
    */
-  @Input('cdkDragConstrainPosition') constrainPosition?: (point: Point) => Point;
+  @Input('cdkDragConstrainPosition') constrainPosition?: (point: Point, dragRef: DragRef) => Point;
 
   /** Emits when the user starts dragging the item. */
   @Output('cdkDragStarted') started: EventEmitter<CdkDragStart> = new EventEmitter<CdkDragStart>();

src/cdk/drag-drop/drag-ref.ts

@@ -271,7 +271,7 @@ export class DragRef<T = any> {
    * of the user's pointer on the page and should return a point describing where the item should
    * be rendered.
    */
-  constrainPosition?: (point: Point) => Point;
+  constrainPosition?: (point: Point, dragRef: DragRef) => Point;
 
   constructor(
     element: ElementRef<HTMLElement> | HTMLElement,
@@ -956,7 +956,7 @@ export class DragRef<T = any> {
   /** Gets the pointer position on the page, accounting for any position constraints. */
   private _getConstrainedPointerPosition(event: MouseEvent | TouchEvent): Point {
     const point = this._getPointerPositionOnPage(event);
-    const constrainedPoint = this.constrainPosition ? this.constrainPosition(point) : point;
+    const constrainedPoint = this.constrainPosition ? this.constrainPosition(point, this) : point;
     const dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;
 
     if (this.lockAxis === 'x' || dropContainerLock === 'x') {

tools/public_api_guard/cdk/drag-drop.d.ts

@@ -13,7 +13,7 @@ export declare class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDes
     _previewTemplate: CdkDragPreview;
     boundaryElement: string | ElementRef<HTMLElement> | HTMLElement;
     boundaryElementSelector: string;
-    constrainPosition?: (point: Point) => Point;
+    constrainPosition?: (point: Point, dragRef: DragRef) => Point;
     data: T;
     disabled: boolean;
     dragStartDelay: number;
@@ -227,7 +227,7 @@ export declare class DragDropRegistry<I, C extends {
 
 export declare class DragRef<T = any> {
     beforeStarted: Subject<void>;
-    constrainPosition?: (point: Point) => Point;
+    constrainPosition?: (point: Point, dragRef: DragRef) => Point;
     data: T;
     disabled: boolean;
     dragStartDelay: number;