Skip to content

Commit

Permalink
feat(cdk/drag-drop): added dropPoint to dropped event (#22347)
Browse files Browse the repository at this point in the history 
* feat(cdk/drag-drop): added dropPoint to dropped

* fix(cdk/drag-drop): fixed tests

* feat(cdk/drag-drop): PR-Feedback renamed dropPoint to dropPosition

* feat(cdk/drag-drop): added dropPosition also to CdkDragEnd

* feat(cdk/drag-drop): fixed tests

* feat(cdk/drag-drop): PR-Feedback renamed dropPosition back to dropPoint
  • Loading branch information
timonkrebs authored Apr 2, 2021
1 parent a9cdb08 commit 1d906b6
Show file tree
Hide file tree
Showing 7 changed files with 94 additions and 39 deletions.
82 changes: 55 additions & 27 deletions src/cdk/drag-drop/directives/drag.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,8 @@ describe('CdkDrag', () => {
// go into an infinite loop trying to stringify the event, if the test fails.
expect(event).toEqual({
source: fixture.componentInstance.dragInstance,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand All @@ -389,15 +390,17 @@ describe('CdkDrag', () => {

expect(event).toEqual({
source: jasmine.anything(),
distance: {x: 25, y: 30}
distance: {x: 25, y: 30},
dropPoint: {x: 25, y: 30}
});

dragElementViaMouse(fixture, fixture.componentInstance.dragElement.nativeElement, 40, 50);
event = fixture.componentInstance.endedSpy.calls.mostRecent().args[0];

expect(event).toEqual({
source: jasmine.anything(),
distance: {x: 40, y: 50}
distance: {x: 40, y: 50},
dropPoint: {x: 40, y: 50}
});
}));

Expand Down Expand Up @@ -1690,7 +1693,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
Expand Down Expand Up @@ -1733,6 +1737,7 @@ describe('CdkDrag', () => {
fixture.componentInstance.droppedSpy.calls.mostRecent().args[0];

expect(event.distance).toEqual({x: 50, y: 60});
expect(event.dropPoint).toEqual({x: 50, y: 60});
}));

it('should expose whether an item was dropped outside of a container', fakeAsync(() => {
Expand Down Expand Up @@ -1816,7 +1821,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: false,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
Expand Down Expand Up @@ -1875,7 +1881,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
Expand Down Expand Up @@ -1916,7 +1923,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
Expand Down Expand Up @@ -1953,7 +1961,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: false,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
Expand Down Expand Up @@ -1996,7 +2005,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: jasmine.any(Boolean),
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -2044,7 +2054,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: jasmine.any(Boolean),
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

scrollTo(0, 0);
Expand Down Expand Up @@ -3635,7 +3646,8 @@ describe('CdkDrag', () => {
container: dropInstance,
previousContainer: dropInstance,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

expect(dragItems.map(drag => drag.element.nativeElement.textContent!.trim()))
Expand Down Expand Up @@ -4067,7 +4079,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4290,7 +4303,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstance,
previousContainer: fixture.componentInstance.dropInstance,
isPointerOverContainer: jasmine.any(Boolean),
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4345,7 +4359,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstances.toArray()[1],
previousContainer: fixture.componentInstance.dropInstances.first,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4450,7 +4465,8 @@ describe('CdkDrag', () => {
container: dropInstances[1],
previousContainer: dropInstances[0],
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4481,7 +4497,8 @@ describe('CdkDrag', () => {
container: dropInstances[0],
previousContainer: dropInstances[0],
isPointerOverContainer: false,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4512,7 +4529,8 @@ describe('CdkDrag', () => {
container: dropInstances[0],
previousContainer: dropInstances[0],
isPointerOverContainer: false,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4648,7 +4666,8 @@ describe('CdkDrag', () => {
container: dropInstances[1],
previousContainer: dropInstances[0],
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4785,7 +4804,8 @@ describe('CdkDrag', () => {
container: dropInstances[1],
previousContainer: dropInstances[0],
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand All @@ -4812,7 +4832,8 @@ describe('CdkDrag', () => {
container: dropInstances[1],
previousContainer: dropInstances[0],
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4844,7 +4865,8 @@ describe('CdkDrag', () => {
container: dropInstances[1],
previousContainer: dropInstances[0],
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -4880,7 +4902,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstances.toArray()[1],
previousContainer: fixture.componentInstance.dropInstances.first,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

expect(dropContainers[0].contains(item.element.nativeElement)).toBe(true,
Expand Down Expand Up @@ -4977,7 +5000,8 @@ describe('CdkDrag', () => {
container: dropInstances[0],
previousContainer: dropInstances[0],
isPointerOverContainer: false,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -5159,7 +5183,8 @@ describe('CdkDrag', () => {
container: dropInstances[2],
previousContainer: dropInstances[0],
isPointerOverContainer: false,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
}));

}));
Expand Down Expand Up @@ -5418,7 +5443,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstances.toArray()[1],
previousContainer: fixture.componentInstance.dropInstances.first,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});

cleanup();
Expand Down Expand Up @@ -5453,7 +5479,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstances.toArray()[1],
previousContainer: fixture.componentInstance.dropInstances.first,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down Expand Up @@ -5487,7 +5514,8 @@ describe('CdkDrag', () => {
container: fixture.componentInstance.dropInstances.toArray()[1],
previousContainer: fixture.componentInstance.dropInstances.first,
isPointerOverContainer: true,
distance: {x: jasmine.any(Number), y: jasmine.any(Number)}
distance: {x: jasmine.any(Number), y: jasmine.any(Number)},
dropPoint: {x: jasmine.any(Number), y: jasmine.any(Number)}
});
}));

Expand Down
9 changes: 7 additions & 2 deletions src/cdk/drag-drop/directives/drag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,11 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
});

ref.ended.subscribe(event => {
this.ended.emit({source: this, distance: event.distance});
this.ended.emit({
source: this,
distance: event.distance,
dropPoint: event.dropPoint
});

// Since all of these events run outside of change detection,
// we need to ensure that everything is marked correctly.
Expand Down Expand Up @@ -489,7 +493,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
container: event.container.data,
isPointerOverContainer: event.isPointerOverContainer,
item: this,
distance: event.distance
distance: event.distance,
dropPoint: event.dropPoint
});
});
}
Expand Down
3 changes: 2 additions & 1 deletion src/cdk/drag-drop/directives/drop-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,7 +358,8 @@ export class CdkDropList<T = any> implements OnDestroy {
container: event.container.data,
item: event.item.data,
isPointerOverContainer: event.isPointerOverContainer,
distance: event.distance
distance: event.distance,
dropPoint: event.dropPoint
});

// Mark for check since all of these events run outside of change
Expand Down
4 changes: 4 additions & 0 deletions src/cdk/drag-drop/drag-events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ export interface CdkDragEnd<T = any> {
source: CdkDrag<T>;
/** Distance in pixels that the user has dragged since the drag sequence started. */
distance: {x: number, y: number};
/** Position where the pointer was when the item was dropped */
dropPoint: {x: number, y: number};
}

/** Event emitted when the user moves an item into a new drop container. */
Expand Down Expand Up @@ -67,6 +69,8 @@ export interface CdkDragDrop<T, O = T> {
isPointerOverContainer: boolean;
/** Distance in pixels that the user has dragged since the drag sequence started. */
distance: {x: number, y: number};
/** Position where the pointer was when the item was dropped */
dropPoint: {x: number, y: number};
}

/** Event emitted as the user is dragging a draggable item. */
Expand Down
16 changes: 10 additions & 6 deletions src/cdk/drag-drop/drag-ref.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ export class DragRef<T = any> {
released = new Subject<{source: DragRef}>();

/** Emits when the user stops dragging an item in the container. */
ended = new Subject<{source: DragRef, distance: Point}>();
ended = new Subject<{source: DragRef, distance: Point, dropPoint: Point}>();

/** Emits when the user has moved the item into a new container. */
entered = new Subject<{container: DropListRef, item: DragRef, currentIndex: number}>();
Expand All @@ -310,6 +310,7 @@ export class DragRef<T = any> {
container: DropListRef;
previousContainer: DropListRef;
distance: Point;
dropPoint: Point;
isPointerOverContainer: boolean;
}>();

Expand Down Expand Up @@ -764,11 +765,13 @@ export class DragRef<T = any> {
// the user starts dragging the item, its position will be calculated relatively
// to the new passive transform.
this._passiveTransform.x = this._activeTransform.x;
const pointerPosition = this._getPointerPositionOnPage(event);
this._passiveTransform.y = this._activeTransform.y;
this._ngZone.run(() => {
this.ended.next({
source: this,
distance: this._getDragDistance(this._getPointerPositionOnPage(event))
distance: this._getDragDistance(pointerPosition),
dropPoint: pointerPosition
});
});
this._cleanupCachedDimensions();
Expand Down Expand Up @@ -910,22 +913,23 @@ export class DragRef<T = any> {
const container = this._dropContainer!;
const currentIndex = container.getItemIndex(this);
const pointerPosition = this._getPointerPositionOnPage(event);
const distance = this._getDragDistance(this._getPointerPositionOnPage(event));
const distance = this._getDragDistance(pointerPosition);
const isPointerOverContainer = container._isOverContainer(
pointerPosition.x, pointerPosition.y);

this.ended.next({source: this, distance});
this.ended.next({source: this, distance, dropPoint: pointerPosition});
this.dropped.next({
item: this,
currentIndex,
previousIndex: this._initialIndex,
container: container,
previousContainer: this._initialContainer,
isPointerOverContainer,
distance
distance,
dropPoint: pointerPosition
});
container.drop(this, currentIndex, this._initialIndex, this._initialContainer,
isPointerOverContainer, distance);
isPointerOverContainer, distance, pointerPosition);
this._dropContainer = this._initialContainer;
});
}
Expand Down
Loading

0 comments on commit 1d906b6

Please sign in to comment.