feat(drag-drop): add API to get/set current position of a standalone draggable

Adds an API that allows the consumer to get the current position of a standalone draggable and to set it. This is useful for cases where the dragged position should be preserved when the user navigates away and then restored when they return.

Fixes #14420.
Fixes #14674.

Author: crisbeto

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

@@ -645,6 +645,47 @@ describe('CdkDrag', () => {
       }).toThrowError(/^cdkDrag must be attached to an element node/);
     }));
 
+    it('should be able to get the current position', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const dragInstance = fixture.componentInstance.dragInstance;
+
+      expect(dragInstance.getCurrentStandalonePosition()).toEqual({x: 0, y: 0});
+
+      dragElementViaMouse(fixture, dragElement, 50, 100);
+      expect(dragInstance.getCurrentStandalonePosition()).toEqual({x: 50, y: 100});
+
+      dragElementViaMouse(fixture, dragElement, 100, 200);
+      expect(dragInstance.getCurrentStandalonePosition()).toEqual({x: 150, y: 300});
+    }));
+
+    it('should be able to set the current position', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.componentInstance.standalonePosition = {x: 50, y: 100};
+      fixture.detectChanges();
+
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const dragInstance = fixture.componentInstance.dragInstance;
+
+      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+      expect(dragInstance.getCurrentStandalonePosition()).toEqual({x: 50, y: 100});
+    }));
+
+    it('should be able to continue dragging after the current position was set', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.componentInstance.standalonePosition = {x: 50, y: 100};
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+
+      dragElementViaMouse(fixture, dragElement, 100, 200);
+
+      expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)');
+    }));
+
   });
 
   describe('draggable with a handle', () => {
@@ -2688,6 +2729,7 @@ describe('CdkDrag', () => {
       <div
         cdkDrag
         [cdkDragBoundary]="boundarySelector"
+        [cdkDragStandalonePosition]="standalonePosition"
         (cdkDragStarted)="startedSpy($event)"
         (cdkDragReleased)="releasedSpy($event)"
         (cdkDragEnded)="endedSpy($event)"
@@ -2703,6 +2745,7 @@ class StandaloneDraggable {
   endedSpy = jasmine.createSpy('ended spy');
   releasedSpy = jasmine.createSpy('released spy');
   boundarySelector: string;
+  standalonePosition?: {x: number, y: number};
 }
 
 @Component({

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

@@ -108,6 +108,12 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
    */
   @Input('cdkDragBoundary') boundaryElementSelector: string;
 
+  /**
+   * Sets the position of a `CdkDrag` that is outside of a drop container.
+   * Can be used to restore the element's position for a returning user.
+   */
+  @Input('cdkDragStandalonePosition') standalonePosition: {x: number, y: number};
+
   /** Whether starting to drag this element is disabled. */
   @Input('cdkDragDisabled')
   get disabled(): boolean {
@@ -209,6 +215,13 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
     this._dragRef.reset();
   }
 
+  /**
+   * Gets the current position in pixels the draggable outside of a drop container.
+   */
+  getCurrentStandalonePosition(): {readonly x: number, readonly y: number} {
+    return this._dragRef.getCurrentStandalonePosition();
+  }
+
   ngAfterViewInit() {
     // We need to wait for the zone to stabilize, in order for the reference
     // element to be in the proper place in the DOM. This is mostly relevant
@@ -223,17 +236,27 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
           .subscribe((handleList: QueryList<CdkDragHandle>) => {
             this._dragRef.withHandles(handleList.filter(handle => handle._parentDrag === this));
           });
+
+        if (this.standalonePosition) {
+          this._dragRef.setCurrentStandalonePosition(this.standalonePosition);
+        }
       });
   }
 
   ngOnChanges(changes: SimpleChanges) {
     const rootSelectorChange = changes.rootElementSelector;
+    const positionChange = changes.positionChange;
 
     // We don't have to react to the first change since it's being
     // handled in `ngAfterViewInit` where it needs to be deferred.
     if (rootSelectorChange && !rootSelectorChange.firstChange) {
       this._updateRootElement();
     }
+
+    // Skip the first change since it's being handled in `ngAfterViewInit`.
+    if (positionChange && !positionChange.firstChange && this.standalonePosition) {
+      this._dragRef.setCurrentStandalonePosition(this.standalonePosition);
+    }
   }
 
   ngOnDestroy() {

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

@@ -386,6 +386,29 @@ export class DragRef<T = any> {
     this._passiveTransform = {x: 0, y: 0};
   }
 
+  /**
+   * Gets the current position in pixels the draggable outside of a drop container.
+   */
+  getCurrentStandalonePosition(): Readonly<Point> {
+    return {x: this._passiveTransform.x, y: this._passiveTransform.y};
+  }
+
+  /**
+   * Sets the current position in pixels the draggable outside of a drop container.
+   * @param value New position to be set.
+   */
+  setCurrentStandalonePosition(value: Point): this {
+    this._activeTransform = {x: 0, y: 0};
+    this._passiveTransform.x = value.x;
+    this._passiveTransform.y = value.y;
+
+    if (!this.dropContainer) {
+      this._applyRootElementTransform(value.x, value.y);
+    }
+
+    return this;
+  }
+
   /** Unsubscribes from the global subscriptions. */
   private _removeSubscriptions() {
     this._pointerMoveSubscription.unsubscribe();
@@ -480,11 +503,8 @@ export class DragRef<T = any> {
           constrainedPointerPosition.x - this._pickupPositionOnPage.x + this._passiveTransform.x;
       activeTransform.y =
           constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;
-      const transform = getTransform(activeTransform.x, activeTransform.y);
 
-      // Preserve the previous `transform` value, if there was one.
-      this._rootElement.style.transform = this._initialTransform ?
-          this._initialTransform + ' ' + transform : transform;
+      this._applyRootElementTransform(activeTransform.x, activeTransform.y);
 
       // Apply transform as attribute if dragging and svg element to work for IE
       if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {
@@ -611,12 +631,6 @@ export class DragRef<T = any> {
       return;
     }
 
-    // Cache the previous transform amount only after the first drag sequence, because
-    // we don't want our own transforms to stack on top of each other.
-    if (this._initialTransform == null) {
-      this._initialTransform = this._rootElement.style.transform || '';
-    }
-
     // If we've got handles, we need to disable the tap highlight on the entire root element,
     // otherwise iOS will still add it, even though all the drag interactions on the handle
     // are disabled.
@@ -934,6 +948,24 @@ export class DragRef<T = any> {
     element.removeEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
   }
 
+  /**
+   * Applies a `transform` to the root element, taking into account any existing transforms on it.
+   * @param x New transform value along the X axis.
+   * @param y New transform value along the Y axis.
+   */
+  private _applyRootElementTransform(x: number, y: number) {
+    const transform = getTransform(x, y);
+
+    // Cache the previous transform amount only after the first drag sequence, because
+    // we don't want our own transforms to stack on top of each other.
+    if (this._initialTransform == null) {
+      this._initialTransform = this._rootElement.style.transform || '';
+    }
+
+    // Preserve the previous `transform` value, if there was one.
+    this._rootElement.style.transform = this._initialTransform ?
+        this._initialTransform + ' ' + transform : transform;
+  }
 }
 
 /** Point on the page or within an element. */

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

@@ -24,10 +24,18 @@ export declare class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDes
     moved: Observable<CdkDragMove<T>>;
     released: EventEmitter<CdkDragRelease>;
     rootElementSelector: string;
+    standalonePosition: {
+        x: number;
+        y: number;
+    };
     started: EventEmitter<CdkDragStart>;
     constructor(
     element: ElementRef<HTMLElement>,
     dropContainer: CdkDropList, _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _config: DragRefConfig, _dir: Directionality);
+    getCurrentStandalonePosition(): {
+        readonly x: number;
+        readonly y: number;
+    };
     getPlaceholderElement(): HTMLElement;
     getRootElement(): HTMLElement;
     ngAfterViewInit(): void;