From 349675a18108b7a1765c25af16dee50b69db8241 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 16 Jan 2019 18:42:06 +0100 Subject: [PATCH] fix(drag-drop): apply translation transform before user transforms (#14712) Currently we apply our own transforms after any of the user's transforms, however this can result in some weird behavior if the user defined something like `rotate`. These changes move our values to be first. Fixes #14699. --- src/cdk/drag-drop/directives/drag.spec.ts | 6 +++--- src/cdk/drag-drop/drag-ref.ts | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index 53b2f5e04b23..95cbd13ccbfd 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/src/cdk/drag-drop/directives/drag.spec.ts @@ -189,7 +189,7 @@ describe('CdkDrag', () => { dragElement.style.transform = 'translateX(-50%)'; dragElementViaMouse(fixture, dragElement, 50, 100); - expect(dragElement.style.transform).toBe('translateX(-50%) translate3d(50px, 100px, 0px)'); + expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateX(-50%)'); })); it('should not generate multiple own `translate3d` values', fakeAsync(() => { @@ -200,10 +200,10 @@ describe('CdkDrag', () => { dragElement.style.transform = 'translateY(-50%)'; dragElementViaMouse(fixture, dragElement, 50, 100); - expect(dragElement.style.transform).toBe('translateY(-50%) translate3d(50px, 100px, 0px)'); + expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateY(-50%)'); dragElementViaMouse(fixture, dragElement, 100, 200); - expect(dragElement.style.transform).toBe('translateY(-50%) translate3d(150px, 300px, 0px)'); + expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px) translateY(-50%)'); })); it('should prevent the `mousedown` action for native draggable elements', fakeAsync(() => { diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index 30b057353526..6ac748b46a29 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/src/cdk/drag-drop/drag-ref.ts @@ -491,9 +491,11 @@ export class DragRef { constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y; const transform = getTransform(activeTransform.x, activeTransform.y); - // Preserve the previous `transform` value, if there was one. + // 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 ? - this._initialTransform + ' ' + transform : transform; + transform + ' ' + this._initialTransform : transform; // Apply transform as attribute if dragging and svg element to work for IE if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {