fix(cdk/drag-drop): preserve initial transform inside drop list (#22422)

We have some logic that tries to preserve the original `transform` of an element, but we only apply it while dragging. These changes expand the support to include elements inside a drop list, as well as the preview and placeholder.

Fixes #22407.

Author: crisbeto

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

@@ -4331,6 +4331,48 @@ describe('CdkDrag', () => {
       }).toThrowError(/^cdkDropList must be attached to an element node/);
     }));
 
+    it('should preserve the original `transform` of items in the list', fakeAsync(() => {
+      const fixture = createComponent(DraggableInScrollableVerticalDropZone);
+      fixture.detectChanges();
+      const items = fixture.componentInstance.dragItems.map(item => item.element.nativeElement);
+      items.forEach(element => element.style.transform = 'rotate(180deg)');
+      const thirdItemRect = items[2].getBoundingClientRect();
+      const hasInitialTransform =
+        (element: HTMLElement) => element.style.transform.indexOf('rotate(180deg)') > -1;
+
+      startDraggingViaMouse(fixture, items[0]);
+      fixture.detectChanges();
+      const preview = document.querySelector('.cdk-drag-preview') as HTMLElement;
+      const placeholder = fixture.nativeElement.querySelector('.cdk-drag-placeholder');
+
+      expect(items.every(hasInitialTransform)).toBe(true,
+        'Expected items to preserve transform when dragging starts.');
+      expect(hasInitialTransform(preview)).toBe(true,
+        'Expected preview to preserve transform when dragging starts.');
+      expect(hasInitialTransform(placeholder)).toBe(true,
+        'Expected placeholder to preserve transform when dragging starts.');
+
+      dispatchMouseEvent(document, 'mousemove', thirdItemRect.left + 1, thirdItemRect.top + 1);
+      fixture.detectChanges();
+      expect(items.every(hasInitialTransform)).toBe(true,
+        'Expected items to preserve transform while dragging.');
+      expect(hasInitialTransform(preview)).toBe(true,
+        'Expected preview to preserve transform while dragging.');
+      expect(hasInitialTransform(placeholder)).toBe(true,
+        'Expected placeholder to preserve transform while dragging.');
+
+      dispatchMouseEvent(document, 'mouseup');
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      expect(items.every(hasInitialTransform)).toBe(true,
+        'Expected items to preserve transform when dragging stops.');
+      expect(hasInitialTransform(preview)).toBe(true,
+        'Expected preview to preserve transform when dragging stops.');
+      expect(hasInitialTransform(placeholder)).toBe(true,
+         'Expected placeholder to preserve transform when dragging stops.');
+    }));
+
   });
 
   describe('in a connected drop container', () => {

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

@@ -14,7 +14,12 @@ import {coerceBooleanProperty, coerceElement} from '@angular/cdk/coercion';
 import {Subscription, Subject, Observable} from 'rxjs';
 import {DropListRefInternal as DropListRef} from './drop-list-ref';
 import {DragDropRegistry} from './drag-drop-registry';
-import {extendStyles, toggleNativeDragInteractions, toggleVisibility} from './drag-styling';
+import {
+  combineTransforms,
+  extendStyles,
+  toggleNativeDragInteractions,
+  toggleVisibility,
+} from './drag-styling';
 import {getTransformTransitionDurationInMs} from './transition-duration';
 import {getMutableClientRect, adjustClientRect} from './client-rect';
 import {ParentPositionTracker} from './parent-position-tracker';
@@ -792,7 +797,6 @@ export class DragRef<T = any> {
     if (dropContainer) {
       const element = this._rootElement;
       const parent = element.parentNode as HTMLElement;
-      const preview = this._preview = this._createPreviewElement();
       const placeholder = this._placeholder = this._createPlaceholderElement();
       const anchor = this._anchor = this._anchor || this._document.createComment('');
 
@@ -802,12 +806,20 @@ export class DragRef<T = any> {
       // Insert an anchor node so that we can restore the element's position in the DOM.
       parent.insertBefore(anchor, element);
 
+      // There's no risk of transforms stacking when inside a drop container so
+      // we can keep the initial transform up to date any time dragging starts.
+      this._initialTransform = element.style.transform || '';
+
+      // Create the preview after the initial transform has
+      // been cached, because it can be affected by the transform.
+      this._preview = this._createPreviewElement();
+
       // We move the element out at the end of the body and we make it hidden, because keeping it in
       // place will throw off the consumer's `:last-child` selectors. We can't remove the element
       // from the DOM completely, because iOS will stop firing all subsequent events in the chain.
       toggleVisibility(element, false);
       this._document.body.appendChild(parent.replaceChild(placeholder, element));
-      this._getPreviewInsertionPoint(parent, shadowRoot).appendChild(preview);
+      this._getPreviewInsertionPoint(parent, shadowRoot).appendChild(this._preview);
       this.started.next({source: this}); // Emit before notifying the container.
       dropContainer.start();
       this._initialContainer = dropContainer;
@@ -906,7 +918,7 @@ export class DragRef<T = any> {
 
     this._destroyPreview();
     this._destroyPlaceholder();
-    this._boundaryRect = this._previewRect = undefined;
+    this._boundaryRect = this._previewRect = this._initialTransform = undefined;
 
     // Re-enter the NgZone since we bound `document` events on the outside.
     this._ngZone.run(() => {
@@ -972,8 +984,8 @@ export class DragRef<T = any> {
 
     this._dropContainer!._startScrollingIfNecessary(rawX, rawY);
     this._dropContainer!._sortItem(this, x, y, this._pointerDirectionDelta);
-    this._preview.style.transform =
-        getTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
+    this._applyPreviewTransform(
+      x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
   }
 
   /**
@@ -1005,6 +1017,10 @@ export class DragRef<T = any> {
       const element = this._rootElement;
       preview = deepCloneNode(element);
       matchElementSize(preview, element.getBoundingClientRect());
+
+      if (this._initialTransform) {
+        preview.style.transform = this._initialTransform;
+      }
     }
 
     extendStyles(preview.style, {
@@ -1050,7 +1066,7 @@ export class DragRef<T = any> {
     this._preview.classList.add('cdk-drag-animating');
 
     // Move the preview to the placeholder position.
-    this._preview.style.transform = getTransform(placeholderRect.left, placeholderRect.top);
+    this._applyPreviewTransform(placeholderRect.left, placeholderRect.top);
 
     // If the element doesn't have a `transition`, the `transitionend` event won't fire. Since
     // we need to trigger a style recalculation in order for the `cdk-drag-animating` class to
@@ -1247,8 +1263,20 @@ export class DragRef<T = any> {
     // Preserve the previous `transform` value, if there was one. Note that we apply our own
     // transform before the user's, because things like rotation can affect which direction
     // the element will be translated towards.
-    this._rootElement.style.transform = this._initialTransform ?
-      transform + ' ' + this._initialTransform  : transform;
+    this._rootElement.style.transform = combineTransforms(transform, this._initialTransform);
+  }
+
+  /**
+   * Applies a `transform` to the preview, 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 _applyPreviewTransform(x: number, y: number) {
+    // Only apply the initial transform if the preview is a clone of the original element, otherwise
+    // it could be completely different and the transform might not make sense anymore.
+    const initialTransform = this._previewTemplate?.template ? undefined : this._initialTransform;
+    const transform = getTransform(x, y);
+    this._preview.style.transform = combineTransforms(transform, initialTransform);
   }
 
   /**

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

@@ -73,3 +73,11 @@ export function toggleVisibility(element: HTMLElement, enable: boolean) {
   styles.top = styles.opacity = enable ? '' : '0';
   styles.left = enable ? '' : '-999em';
 }
+
+/**
+ * Combines a transform string with an optional other transform
+ * that exited before the base transform was applied.
+ */
+export function combineTransforms(transform: string, initialTransform?: string): string {
+  return initialTransform ? (transform + ' ' + initialTransform) : transform;
+}

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

@@ -23,7 +23,7 @@ import {
   isInsideClientRect,
 } from './client-rect';
 import {ParentPositionTracker} from './parent-position-tracker';
-import {DragCSSStyleDeclaration} from './drag-styling';
+import {combineTransforms, DragCSSStyleDeclaration} from './drag-styling';
 
 /**
  * Proximity, as a ratio to width/height, at which a
@@ -48,6 +48,8 @@ interface CachedItemPosition {
   clientRect: ClientRect;
   /** Amount by which the item has been moved since dragging started. */
   offset: number;
+  /** Inline transform that the drag item had when dragging started. */
+  initialTransform: string;
 }
 
 /** Vertical direction in which we can auto-scroll. */
@@ -513,10 +515,12 @@ export class DropListRef<T = any> {
       if (isHorizontal) {
         // Round the transforms since some browsers will
         // blur the elements, for sub-pixel transforms.
-        elementToOffset.style.transform = `translate3d(${Math.round(sibling.offset)}px, 0, 0)`;
+        elementToOffset.style.transform = combineTransforms(
+          `translate3d(${Math.round(sibling.offset)}px, 0, 0)`, sibling.initialTransform);
         adjustClientRect(sibling.clientRect, 0, offset);
       } else {
-        elementToOffset.style.transform = `translate3d(0, ${Math.round(sibling.offset)}px, 0)`;
+        elementToOffset.style.transform = combineTransforms(
+          `translate3d(0, ${Math.round(sibling.offset)}px, 0)`, sibling.initialTransform);
         adjustClientRect(sibling.clientRect, offset, 0);
       }
     });
@@ -622,7 +626,12 @@ export class DropListRef<T = any> {
 
     this._itemPositions = this._activeDraggables.map(drag => {
       const elementToMeasure = drag.getVisibleElement();
-      return {drag, offset: 0, clientRect: getMutableClientRect(elementToMeasure)};
+      return {
+        drag,
+        offset: 0,
+        initialTransform: elementToMeasure.style.transform || '',
+        clientRect: getMutableClientRect(elementToMeasure),
+      };
     }).sort((a, b) => {
       return isHorizontal ? a.clientRect.left - b.clientRect.left :
                             a.clientRect.top - b.clientRect.top;
@@ -641,7 +650,9 @@ export class DropListRef<T = any> {
       const rootElement = item.getRootElement();
 
       if (rootElement) {
-        rootElement.style.transform = '';
+        const initialTransform = this._itemPositions
+          .find(current => current.drag === item)?.initialTransform;
+        rootElement.style.transform = initialTransform || '';
       }
     });
     this._siblings.forEach(sibling => sibling._stopReceiving(this));