From 929f702e13809b83286b165e6cf50f7af84f41bd Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 16 Sep 2024 09:02:50 +0200 Subject: [PATCH] fix(cdk/drag-drop): account for scale when setting free drag position Fixes that the scale was only being synced when the user drags, but we need it also when setting the free drag position. Fixes #29737. --- src/cdk/drag-drop/directives/drag.ts | 4 ++++ .../drag-drop/directives/standalone-drag.spec.ts | 14 ++++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index 1aa0ea035ba1..c463d0c8ce2c 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -314,6 +314,7 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { () => { this._updateRootElement(); this._setupHandlesListener(); + this._dragRef.scale = this.scale; if (this.freeDragPosition) { this._dragRef.setFreeDragPosition(this.freeDragPosition); @@ -333,6 +334,9 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { this._updateRootElement(); } + // Scale affects the free drag position so we need to sync it up here. + this._dragRef.scale = this.scale; + // Skip the first change since it's being handled in the `afterNextRender` queued up in the // constructor. if (positionChange && !positionChange.firstChange && this.freeDragPosition) { diff --git a/src/cdk/drag-drop/directives/standalone-drag.spec.ts b/src/cdk/drag-drop/directives/standalone-drag.spec.ts index 33f0588260cf..775f9e69ef91 100644 --- a/src/cdk/drag-drop/directives/standalone-drag.spec.ts +++ b/src/cdk/drag-drop/directives/standalone-drag.spec.ts @@ -1371,6 +1371,20 @@ describe('Standalone CdkDrag', () => { expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)'); })); + it('should account for the scale when setting the free drag position', fakeAsync(() => { + const fixture = createComponent(StandaloneDraggable); + fixture.componentInstance.scale = 0.5; + fixture.componentInstance.freeDragPosition = {x: 50, y: 100}; + fixture.changeDetectorRef.markForCheck(); + fixture.detectChanges(); + + const dragElement = fixture.componentInstance.dragElement.nativeElement; + const dragInstance = fixture.componentInstance.dragInstance; + + expect(dragElement.style.transform).toBe('translate3d(100px, 200px, 0px)'); + expect(dragInstance.getFreeDragPosition()).toEqual({x: 50, y: 100}); + })); + it('should include the dragged distance as the user is dragging', fakeAsync(() => { const fixture = createComponent(StandaloneDraggable); fixture.detectChanges();