From 0abfecd4d885f4b38791c349fb4d6d98fc228ac3 Mon Sep 17 00:00:00 2001 From: Sharypov Artem <79115666058@ya.ru> Date: Tue, 18 Feb 2025 13:15:26 +0300 Subject: [PATCH 1/5] fix(cdk/drag-drop): incorrect type DragConstrainPosition MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes type DragConstrainPosition, which of сorrect configuration of CdkDrag is not possible when using in providers Fixes #30509 --- src/cdk/drag-drop/directives/config.ts | 7 ++++++- tools/public_api_guard/cdk/drag-drop.md | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/cdk/drag-drop/directives/config.ts b/src/cdk/drag-drop/directives/config.ts index 7e44425d85e5..7b1352c9a429 100644 --- a/src/cdk/drag-drop/directives/config.ts +++ b/src/cdk/drag-drop/directives/config.ts @@ -16,7 +16,12 @@ export type DragStartDelay = number | {touch: number; mouse: number}; 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; +export type DragConstrainPosition = ( + userPointerPosition: Point, + dragRef: DragRef, + dimensions: DOMRect, + pickupPositionInElement: Point, +) => Point; /** Possible orientations for a drop list. */ export type DropListOrientation = 'horizontal' | 'vertical' | 'mixed'; diff --git a/tools/public_api_guard/cdk/drag-drop.md b/tools/public_api_guard/cdk/drag-drop.md index 28e2c19ceba0..3ff07eef6b1b 100644 --- a/tools/public_api_guard/cdk/drag-drop.md +++ b/tools/public_api_guard/cdk/drag-drop.md @@ -300,7 +300,7 @@ export function copyArrayItem(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 { From e2938a0ba57212b093f6a4129cce612eced8d9e5 Mon Sep 17 00:00:00 2001 From: Sharypov Artem <79115666058@ya.ru> Date: Tue, 18 Feb 2025 14:12:45 +0300 Subject: [PATCH 2/5] 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. --- src/cdk/drag-drop/directives/drag.ts | 15 ++++++++------- tools/public_api_guard/cdk/drag-drop.md | 2 +- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index 8ec7fab27f5e..c950165b099d 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -46,7 +46,13 @@ import {CDK_DRAG_PARENT} from '../drag-parent'; import {DragRef, Point, PreviewContainer} from '../drag-ref'; import type {CdkDropList} from './drop-list'; import {DragDrop} from '../drag-drop'; -import {CDK_DRAG_CONFIG, DragDropConfig, DragStartDelay, DragAxis} from './config'; +import { + CDK_DRAG_CONFIG, + DragDropConfig, + DragStartDelay, + DragAxis, + DragConstrainPosition, +} from './config'; import {assertElementNode} from './assertions'; import {DragDropRegistry} from '../drag-drop-registry'; @@ -137,12 +143,7 @@ export class CdkDrag 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[]; diff --git a/tools/public_api_guard/cdk/drag-drop.md b/tools/public_api_guard/cdk/drag-drop.md index 3ff07eef6b1b..96a3024fe5fa 100644 --- a/tools/public_api_guard/cdk/drag-drop.md +++ b/tools/public_api_guard/cdk/drag-drop.md @@ -50,7 +50,7 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { // (undocumented) _addHandle(handle: CdkDragHandle): void; boundaryElement: string | ElementRef | HTMLElement; - constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point; + constrainPosition?: DragConstrainPosition; data: T; get disabled(): boolean; set disabled(value: boolean); From 8c107b9db92b941b796c6752a18e842d3d2caf21 Mon Sep 17 00:00:00 2001 From: Sharypov Artem <79115666058@ya.ru> Date: Tue, 18 Feb 2025 14:31:53 +0300 Subject: [PATCH 3/5] 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. --- src/cdk/drag-drop/drag-ref.ts | 8 ++------ tools/public_api_guard/cdk/drag-drop.md | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index 9bcb2e9d5133..9a90574bbd4f 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/src/cdk/drag-drop/drag-ref.ts @@ -35,6 +35,7 @@ import { import {DragDropRegistry} from './drag-drop-registry'; import type {DropListRef} from './drop-list-ref'; import {DragPreviewTemplate, PreviewRef} from './preview-ref'; +import {DragConstrainPosition} from './directives/config'; /** Object that can be used to configure the behavior of DragRef. */ export interface DragRefConfig { @@ -364,12 +365,7 @@ export class DragRef { * 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, diff --git a/tools/public_api_guard/cdk/drag-drop.md b/tools/public_api_guard/cdk/drag-drop.md index 96a3024fe5fa..3a580646aee3 100644 --- a/tools/public_api_guard/cdk/drag-drop.md +++ b/tools/public_api_guard/cdk/drag-drop.md @@ -381,7 +381,7 @@ export class DragDropRegistry<_ = unknown, __ = unknown> implements OnDestroy { export class DragRef { constructor(element: ElementRef | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry, _renderer: Renderer2); readonly beforeStarted: Subject; - constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point; + constrainPosition?: DragConstrainPosition; data: T; get disabled(): boolean; set disabled(value: boolean); From ad26f105594fca962cd00c3812f8ec8d7f62aa4f Mon Sep 17 00:00:00 2001 From: Sharypov Artem <79115666058@ya.ru> Date: Tue, 18 Feb 2025 16:18:22 +0300 Subject: [PATCH 4/5] fix(cdk/drag-drop): move type DragConstrainPosition in DragRef fix circular dependency --- src/cdk/drag-drop/directives/config.ts | 10 +--------- src/cdk/drag-drop/directives/drag.ts | 10 ++-------- src/cdk/drag-drop/drag-ref.ts | 9 ++++++++- 3 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/cdk/drag-drop/directives/config.ts b/src/cdk/drag-drop/directives/config.ts index 7b1352c9a429..2263935d85c0 100644 --- a/src/cdk/drag-drop/directives/config.ts +++ b/src/cdk/drag-drop/directives/config.ts @@ -7,7 +7,7 @@ */ 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}; @@ -15,14 +15,6 @@ 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 = ( - userPointerPosition: Point, - dragRef: DragRef, - dimensions: DOMRect, - pickupPositionInElement: Point, -) => Point; - /** Possible orientations for a drop list. */ export type DropListOrientation = 'horizontal' | 'vertical' | 'mixed'; diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index c950165b099d..d051a972e1dd 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -43,16 +43,10 @@ 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, - DragConstrainPosition, -} from './config'; +import {CDK_DRAG_CONFIG, DragDropConfig, DragStartDelay, DragAxis} from './config'; import {assertElementNode} from './assertions'; import {DragDropRegistry} from '../drag-drop-registry'; diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index 9a90574bbd4f..fa24a4e76576 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/src/cdk/drag-drop/drag-ref.ts @@ -35,7 +35,6 @@ import { import {DragDropRegistry} from './drag-drop-registry'; import type {DropListRef} from './drop-list-ref'; import {DragPreviewTemplate, PreviewRef} from './preview-ref'; -import {DragConstrainPosition} from './directives/config'; /** Object that can be used to configure the behavior of DragRef. */ export interface DragRefConfig { @@ -58,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}; From 60e861733e3ad67694fec68cc3b89c945af3aba7 Mon Sep 17 00:00:00 2001 From: Sharypov Artem <79115666058@ya.ru> Date: Wed, 19 Feb 2025 13:16:45 +0300 Subject: [PATCH 5/5] fix(cdk/drag-drop): added type DragConstrainPosition in public api DragConstrainPosition type should be in the documentation --- src/cdk/drag-drop/public-api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cdk/drag-drop/public-api.ts b/src/cdk/drag-drop/public-api.ts index f3b87dba939d..34d541d83211 100644 --- a/src/cdk/drag-drop/public-api.ts +++ b/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';