Skip to content

Commit 349675a

Browse files
crisbetovivian-hu-zz
authored andcommittedJan 16, 2019
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.
1 parent 027d4f4 commit 349675a

File tree

2 files changed

+7
-5
lines changed

2 files changed

+7
-5
lines changed
 

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ describe('CdkDrag', () => {
189189

190190
dragElement.style.transform = 'translateX(-50%)';
191191
dragElementViaMouse(fixture, dragElement, 50, 100);
192-
expect(dragElement.style.transform).toBe('translateX(-50%) translate3d(50px, 100px, 0px)');
192+
expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateX(-50%)');
193193
}));
194194

195195
it('should not generate multiple own `translate3d` values', fakeAsync(() => {
@@ -200,10 +200,10 @@ describe('CdkDrag', () => {
200200
dragElement.style.transform = 'translateY(-50%)';
201201

202202
dragElementViaMouse(fixture, dragElement, 50, 100);
203-
expect(dragElement.style.transform).toBe('translateY(-50%) translate3d(50px, 100px, 0px)');
203+
expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px) translateY(-50%)');
204204

205205
dragElementViaMouse(fixture, dragElement, 100, 200);
206-
expect(dragElement.style.transform).toBe('translateY(-50%) translate3d(150px, 300px, 0px)');
206+
expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px) translateY(-50%)');
207207
}));
208208

209209
it('should prevent the `mousedown` action for native draggable elements', fakeAsync(() => {

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -491,9 +491,11 @@ export class DragRef<T = any> {
491491
constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;
492492
const transform = getTransform(activeTransform.x, activeTransform.y);
493493

494-
// Preserve the previous `transform` value, if there was one.
494+
// Preserve the previous `transform` value, if there was one. Note that we apply our own
495+
// transform before the user's, because things like rotation can affect which direction
496+
// the element will be translated towards.
495497
this._rootElement.style.transform = this._initialTransform ?
496-
this._initialTransform + ' ' + transform : transform;
498+
transform + ' ' + this._initialTransform : transform;
497499

498500
// Apply transform as attribute if dragging and svg element to work for IE
499501
if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {

0 commit comments

Comments
 (0)
Please sign in to comment.