fix(cdk/drag-drop): incorrect type DragConstrainPosition (#30510)

* fix(cdk/drag-drop): incorrect type DragConstrainPosition

Fixes type DragConstrainPosition, which of сorrect configuration of CdkDrag  is not possible when using in providers

Fixes #30509

* fix(cdk/drag-drop): change type in CdkDrag for input cdkDragConstrainPosition

Impot the type from the configuration CdkDrag for input cdkDragConstrainPosition,  which leads to type safety.

* fix(cdk/drag-drop): change type in CdkRef for property constrainPosition

Impot the type from the configuration CdkRef for property constrainPosition, which leads to type safety.

* fix(cdk/drag-drop): move type DragConstrainPosition in DragRef

fix circular dependency

* fix(cdk/drag-drop): added type DragConstrainPosition in public api

DragConstrainPosition type should be in the documentation

Author: Veribelll

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

@@ -7,17 +7,14 @@
  */
 
 import {InjectionToken} from '@angular/core';
-import {DragRefConfig, Point, DragRef} from '../drag-ref';
+import {DragRefConfig, DragConstrainPosition} from '../drag-ref';
 
 /** Possible values that can be used to configure the drag start delay. */
 export type DragStartDelay = number | {touch: number; mouse: number};
 
 /** Possible axis along which dragging can be locked. */
 export type DragAxis = 'x' | 'y';
 
-/** Function that can be used to constrain the position of a dragged element. */
-export type DragConstrainPosition = (point: Point, dragRef: DragRef) => Point;
-
 /** Possible orientations for a drop list. */
 export type DropListOrientation = 'horizontal' | 'vertical' | 'mixed';
 

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

@@ -43,7 +43,7 @@ import {CDK_DRAG_HANDLE, CdkDragHandle} from './drag-handle';
 import {CdkDragPlaceholder} from './drag-placeholder';
 import {CdkDragPreview} from './drag-preview';
 import {CDK_DRAG_PARENT} from '../drag-parent';
-import {DragRef, Point, PreviewContainer} from '../drag-ref';
+import {DragRef, Point, PreviewContainer, DragConstrainPosition} from '../drag-ref';
 import type {CdkDropList} from './drop-list';
 import {DragDrop} from '../drag-drop';
 import {CDK_DRAG_CONFIG, DragDropConfig, DragStartDelay, DragAxis} from './config';
@@ -137,12 +137,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
    * of the user's pointer on the page, a reference to the item being dragged and its dimensions.
    * Should return a point describing where the item should be rendered.
    */
-  @Input('cdkDragConstrainPosition') constrainPosition?: (
-    userPointerPosition: Point,
-    dragRef: DragRef,
-    dimensions: DOMRect,
-    pickupPositionInElement: Point,
-  ) => Point;
+  @Input('cdkDragConstrainPosition') constrainPosition?: DragConstrainPosition;
 
   /** Class to be added to the preview element. */
   @Input('cdkDragPreviewClass') previewClass: string | string[];

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

@@ -57,6 +57,14 @@ export interface DragRefConfig {
   parentDragRef?: DragRef;
 }
 
+/** Function that can be used to constrain the position of a dragged element. */
+export type DragConstrainPosition = (
+  userPointerPosition: Point,
+  dragRef: DragRef,
+  dimensions: DOMRect,
+  pickupPositionInElement: Point,
+) => Point;
+
 /** Options that can be used to bind a passive event listener. */
 const passiveEventListenerOptions = {passive: true};
 
@@ -364,12 +372,7 @@ export class DragRef<T = any> {
    * of the user's pointer on the page, a reference to the item being dragged and its dimensions.
    * Should return a point describing where the item should be rendered.
    */
-  constrainPosition?: (
-    userPointerPosition: Point,
-    dragRef: DragRef,
-    dimensions: DOMRect,
-    pickupPositionInElement: Point,
-  ) => Point;
+  constrainPosition?: DragConstrainPosition;
 
   constructor(
     element: ElementRef<HTMLElement> | HTMLElement,

src/cdk/drag-drop/public-api.ts

@@ -7,7 +7,7 @@
  */
 
 export {DragDrop} from './drag-drop';
-export {DragRef, DragRefConfig, Point, PreviewContainer} from './drag-ref';
+export {DragRef, DragRefConfig, Point, PreviewContainer, DragConstrainPosition} from './drag-ref';
 export {DropListRef} from './drop-list-ref';
 export {CDK_DRAG_PARENT} from './drag-parent';
 

tools/public_api_guard/cdk/drag-drop.md

@@ -50,7 +50,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     // (undocumented)
     _addHandle(handle: CdkDragHandle): void;
     boundaryElement: string | ElementRef<HTMLElement> | HTMLElement;
-    constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point;
+    constrainPosition?: DragConstrainPosition;
     data: T;
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -300,7 +300,7 @@ export function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], curr
 export type DragAxis = 'x' | 'y';
 
 // @public
-export type DragConstrainPosition = (point: Point, dragRef: DragRef) => Point;
+export type DragConstrainPosition = (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point;
 
 // @public
 export class DragDrop {
@@ -381,7 +381,7 @@ export class DragDropRegistry<_ = unknown, __ = unknown> implements OnDestroy {
 export class DragRef<T = any> {
     constructor(element: ElementRef<HTMLElement> | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry, _renderer: Renderer2);
     readonly beforeStarted: Subject<void>;
-    constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point;
+    constrainPosition?: DragConstrainPosition;
     data: T;
     get disabled(): boolean;
     set disabled(value: boolean);