Skip to content

Commit

Permalink
refactor(drag-drop): remove deprecated APIs for 9.0.0 (#17084)
Browse files Browse the repository at this point in the history 
Cleans on the APIs that were marked as deprecated for 8.0 and 9.0. Also deprecates a few for 10.0 which were supposed to be removed in 9.0, but hadn't been marked correctly.

BREAKING CHANGES:
* `DropListRef.id` has been removed.
* `CdkDragConfig` has been replaced with `DragRefConfig`.
* `DragDropRegistry.getDropContainer` has been removed.
* `CdkDropListContainer` interface has been removed.
* `CDK_DROP_LIST_CONTAINER` has been replaced with `CDK_DROP_LIST`.
* `CdkDrag.boundaryElementSelector` has been replaced with `CdkDrag.boundaryElement`.
* `_ngZone` and `_viewportRuler` parameters in the `DropListRef` constructor are now required.
* `distance` parameter in `DropListRef.drop` is now required.
  • Loading branch information
@crisbeto @jelbourn
crisbeto authored and jelbourn committed Sep 18, 2019
1 parent fb390fb commit 75591f7
Show file tree
Hide file tree
Showing 12 changed files with 73 additions and 264 deletions.
21 changes: 6 additions & 15 deletions src/cdk/drag-drop/directives/drag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,17 @@ import {
import {CdkDragHandle} from './drag-handle';
import {CdkDragPlaceholder} from './drag-placeholder';
import {CdkDragPreview} from './drag-preview';
import {CDK_DROP_LIST} from '../drop-list-container';
import {CDK_DRAG_PARENT} from '../drag-parent';
import {DragRef, DragRefConfig, Point} from '../drag-ref';
import {CdkDropListInternal as CdkDropList} from './drop-list';
import {DragDrop} from '../drag-drop';

/**
* Injection token that is used to provide a CdkDropList instance to CdkDrag.
* Used for avoiding circular imports.
*/
export const CDK_DROP_LIST = new InjectionToken<CdkDropList>('CDK_DROP_LIST');

/** Injection token that can be used to configure the behavior of `CdkDrag`. */
export const CDK_DRAG_CONFIG = new InjectionToken<DragRefConfig>('CDK_DRAG_CONFIG', {
providedIn: 'root',
Expand Down Expand Up @@ -109,20 +114,6 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
*/
@Input('cdkDragBoundary') boundaryElement: string | ElementRef<HTMLElement> | HTMLElement;

/**
* Selector that will be used to determine the element to which the draggable's position will
* be constrained. Matching starts from the element's parent and goes up the DOM until a matching
* element has been found
* @deprecated Use `boundaryElement` instead.
* @breaking-change 9.0.0
*/
get boundaryElementSelector(): string {
return typeof this.boundaryElement === 'string' ? this.boundaryElement : undefined!;
}
set boundaryElementSelector(selector: string) {
this.boundaryElement = selector;
}

/**
* Amount of milliseconds to wait after the user has put their
* pointer down before starting to drag the element.
Expand Down
69 changes: 21 additions & 48 deletions src/cdk/drag-drop/directives/drop-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
ContentChildren,
ElementRef,
EventEmitter,
forwardRef,
Input,
OnDestroy,
Output,
Expand All @@ -23,9 +22,8 @@ import {
AfterContentInit,
} from '@angular/core';
import {Directionality} from '@angular/cdk/bidi';
import {CdkDrag} from './drag';
import {CdkDrag, CDK_DROP_LIST} from './drag';
import {CdkDragDrop, CdkDragEnter, CdkDragExit, CdkDragSortEvent} from '../drag-events';
import {CDK_DROP_LIST_CONTAINER, CdkDropListContainer} from '../drop-list-container';
import {CdkDropListGroup} from './drop-list-group';
import {DropListRef} from '../drop-list-ref';
import {DragRef} from '../drag-ref';
Expand All @@ -43,18 +41,14 @@ let _uniqueIdCounter = 0;
*/
export interface CdkDropListInternal extends CdkDropList {}

// @breaking-change 8.0.0 `CdkDropList` implements `CdkDropListContainer` for backwards
// compatiblity. The implements clause, as well as all the methods that it enforces can
// be removed when `CdkDropListContainer` is deleted.

/** Container that wraps a set of draggable items. */
@Directive({
selector: '[cdkDropList], cdk-drop-list',
exportAs: 'cdkDropList',
providers: [
// Prevent child drop lists from picking up the same group as their parent.
{provide: CdkDropListGroup, useValue: undefined},
{provide: CDK_DROP_LIST_CONTAINER, useExisting: CdkDropList},
{provide: CDK_DROP_LIST, useExisting: CdkDropList},
],
host: {
'class': 'cdk-drop-list',
Expand All @@ -64,7 +58,7 @@ export interface CdkDropListInternal extends CdkDropList {}
'[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
}
})
export class CdkDropList<T = any> implements CdkDropListContainer, AfterContentInit, OnDestroy {
export class CdkDropList<T = any> implements AfterContentInit, OnDestroy {
/** Emits when the list has been destroyed. */
private _destroyed = new Subject<void>();

Expand All @@ -75,7 +69,7 @@ export class CdkDropList<T = any> implements CdkDropListContainer, AfterContentI
_dropListRef: DropListRef<CdkDropList<T>>;

/** Draggable items in the container. */
@ContentChildren(forwardRef(() => CdkDrag), {
@ContentChildren(CdkDrag, {
// Explicitly set to false since some of the logic below makes assumptions about it.
// The `.withItems` call below should be updated if we ever need to switch this to `true`.
descendants: false
Expand Down Expand Up @@ -198,7 +192,11 @@ export class CdkDropList<T = any> implements CdkDropListContainer, AfterContentI
this._destroyed.complete();
}

/** Starts dragging an item. */
/**
* Starts dragging an item.
* @deprecated No longer being used. To be removed.
* @breaking-change 10.0.0
*/
start(): void {
this._dropListRef.start();
}
Expand All @@ -210,18 +208,23 @@ export class CdkDropList<T = any> implements CdkDropListContainer, AfterContentI
* @param previousContainer Container from which the item got dragged in.
* @param isPointerOverContainer Whether the user's pointer was over the
* container when the item was dropped.
*
* @deprecated No longer being used. To be removed.
* @breaking-change 10.0.0
*/
drop(item: CdkDrag, currentIndex: number, previousContainer: Partial<CdkDropListContainer>,
drop(item: CdkDrag, currentIndex: number, previousContainer: CdkDropList,
isPointerOverContainer: boolean): void {
this._dropListRef.drop(item._dragRef, currentIndex,
(previousContainer as CdkDropList)._dropListRef, isPointerOverContainer);
this._dropListRef.drop(item._dragRef, currentIndex, previousContainer._dropListRef,
isPointerOverContainer, {x: 0, y: 0});
}

/**
* Emits an event to indicate that the user moved an item into the container.
* @param item Item that was moved into the container.
* @param pointerX Position of the item along the X axis.
* @param pointerY Position of the item along the Y axis.
* @deprecated No longer being used. To be removed.
* @breaking-change 10.0.0
*/
enter(item: CdkDrag, pointerX: number, pointerY: number): void {
this._dropListRef.enter(item._dragRef, pointerX, pointerY);
Expand All @@ -230,6 +233,8 @@ export class CdkDropList<T = any> implements CdkDropListContainer, AfterContentI
/**
* Removes an item from the container after it was dragged into another container by the user.
* @param item Item that was dragged out.
* @deprecated No longer being used. To be removed.
* @breaking-change 10.0.0
*/
exit(item: CdkDrag): void {
this._dropListRef.exit(item._dragRef);
Expand All @@ -238,45 +243,13 @@ export class CdkDropList<T = any> implements CdkDropListContainer, AfterContentI
/**
* Figures out the index of an item in the container.
* @param item Item whose index should be determined.
* @deprecated No longer being used. To be removed.
* @breaking-change 10.0.0
*/
getItemIndex(item: CdkDrag): number {
return this._dropListRef.getItemIndex(item._dragRef);
}

/**
* Sorts an item inside the container based on its position.
* @param item Item to be sorted.
* @param pointerX Position of the item along the X axis.
* @param pointerY Position of the item along the Y axis.
* @param pointerDelta Direction in which the pointer is moving along each axis.
*/
_sortItem(item: CdkDrag, pointerX: number, pointerY: number,
pointerDelta: {x: number, y: number}): void {
return this._dropListRef._sortItem(item._dragRef, pointerX, pointerY, pointerDelta);
}

/**
* Figures out whether an item should be moved into a sibling
* drop container, based on its current position.
* @param item Drag item that is being moved.
* @param x Position of the item along the X axis.
* @param y Position of the item along the Y axis.
*/
_getSiblingContainerFromPosition(item: CdkDrag, x: number, y: number):
CdkDropListContainer | null {
const result = this._dropListRef._getSiblingContainerFromPosition(item._dragRef, x, y);
return result ? result.data : null;
}

/**
* Checks whether the user's pointer is positioned over the container.
* @param x Pointer position along the X axis.
* @param y Pointer position along the Y axis.
*/
_isOverContainer(x: number, y: number): boolean {
return this._dropListRef._isOverContainer(x, y);
}

/** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
private _syncInputs(ref: DropListRef<CdkDropList>) {
if (this._dir) {
Expand Down
4 changes: 0 additions & 4 deletions src/cdk/drag-drop/drag-drop-registry.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,10 +186,6 @@ describe('DragDropRegistry', () => {
pointerMoveSubscription.unsubscribe();
});

it('should not throw when trying to register the same container again', () => {
expect(() => registry.registerDropContainer(testComponent.dropInstances.first)).not.toThrow();
});

it('should not prevent the default `touchmove` actions when nothing is being dragged', () => {
expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented).toBe(false);
});
Expand Down
15 changes: 1 addition & 14 deletions src/cdk/drag-drop/drag-drop-registry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const activeCapturingEventOptions = normalizePassiveListenerOptions({
// to avoid circular imports. If we were to reference them here, importing the registry into the
// classes that are registering themselves will introduce a circular import.
@Injectable({providedIn: 'root'})
export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
export class DragDropRegistry<I, C> implements OnDestroy {
private _document: Document;

/** Registered drop container instances. */
Expand Down Expand Up @@ -68,10 +68,6 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
/** Adds a drop container to the registry. */
registerDropContainer(drop: C) {
if (!this._dropInstances.has(drop)) {
if (this.getDropContainer(drop.id)) {
throw Error(`Drop instance with id "${drop.id}" has already been registered.`);
}

this._dropInstances.add(drop);
}
}
Expand Down Expand Up @@ -173,15 +169,6 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
return this._activeDragInstances.has(drag);
}

/**
* Gets a drop container by its id.
* @deprecated No longer being used. To be removed.
* @breaking-change 8.0.0
*/
getDropContainer(id: string): C | undefined {
return Array.from(this._dropInstances).find(instance => instance.id === id);
}

ngOnDestroy() {
this._dragInstances.forEach(instance => this.removeDragItem(instance));
this._dropInstances.forEach(instance => this.removeDropContainer(instance));
Expand Down
92 changes: 0 additions & 92 deletions src/cdk/drag-drop/drop-list-container.ts
View file

This file was deleted.

0 comments on commit 75591f7

Please sign in to comment.