Skip to content

Commit 4cd2152

Browse files
authored
fix(cdk/drag-drop): account for scale when setting free drag position (angular#29739)
Fixes that the scale was only being synced when the user drags, but we need it also when setting the free drag position. Fixes angular#29737.
1 parent 234e5e0 commit 4cd2152

File tree

2 files changed

+18
-0
lines changed

2 files changed

+18
-0
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
314314
() => {
315315
this._updateRootElement();
316316
this._setupHandlesListener();
317+
this._dragRef.scale = this.scale;
317318

318319
if (this.freeDragPosition) {
319320
this._dragRef.setFreeDragPosition(this.freeDragPosition);
@@ -333,6 +334,9 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
333334
this._updateRootElement();
334335
}
335336

337+
// Scale affects the free drag position so we need to sync it up here.
338+
this._dragRef.scale = this.scale;
339+
336340
// Skip the first change since it's being handled in the `afterNextRender` queued up in the
337341
// constructor.
338342
if (positionChange && !positionChange.firstChange && this.freeDragPosition) {

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1371,6 +1371,20 @@ describe('Standalone CdkDrag', () => {
13711371
expect(dragElement.style.transform).toBe('translate3d(150px, 300px, 0px)');
13721372
}));
13731373

1374+
it('should account for the scale when setting the free drag position', fakeAsync(() => {
1375+
const fixture = createComponent(StandaloneDraggable);
1376+
fixture.componentInstance.scale = 0.5;
1377+
fixture.componentInstance.freeDragPosition = {x: 50, y: 100};
1378+
fixture.changeDetectorRef.markForCheck();
1379+
fixture.detectChanges();
1380+
1381+
const dragElement = fixture.componentInstance.dragElement.nativeElement;
1382+
const dragInstance = fixture.componentInstance.dragInstance;
1383+
1384+
expect(dragElement.style.transform).toBe('translate3d(100px, 200px, 0px)');
1385+
expect(dragInstance.getFreeDragPosition()).toEqual({x: 50, y: 100});
1386+
}));
1387+
13741388
it('should include the dragged distance as the user is dragging', fakeAsync(() => {
13751389
const fixture = createComponent(StandaloneDraggable);
13761390
fixture.detectChanges();

0 commit comments

Comments
 (0)