Skip to content

Commit

Permalink
refactor(cdk/drag-drop): Remove use of zone onStable
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba committed Mar 5, 2024
1 parent cfdfa9a commit f0cceeb
Showing 1 changed file with 18 additions and 13 deletions.
31 changes: 18 additions & 13 deletions src/cdk/drag-drop/directives/drag.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
import {Directionality} from '@angular/cdk/bidi';
import {DOCUMENT} from '@angular/common';
import {
AfterViewInit,
Directive,
ElementRef,
EventEmitter,
Expand All @@ -27,6 +26,10 @@ import {
Self,
InjectionToken,
booleanAttribute,
afterNextRender,
AfterViewInit,
inject,
Injector,
} from '@angular/core';
import {coerceElement, coerceNumberProperty} from '@angular/cdk/coercion';
import {BehaviorSubject, Observable, Observer, Subject, merge} from 'rxjs';
Expand Down Expand Up @@ -207,6 +210,8 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
},
);

private _injector = inject(Injector);

constructor(
/** Element that the draggable is attached to. */
public element: ElementRef<HTMLElement>,
Expand Down Expand Up @@ -296,35 +301,35 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
}

ngAfterViewInit() {
// Normally this isn't in the zone, but it can cause major performance regressions for apps
// using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
this._ngZone.runOutsideAngular(() => {
// We need to wait for the zone to stabilize, in order for the reference
// element to be in the proper place in the DOM. This is mostly relevant
// for draggable elements inside portals since they get stamped out in
// their original DOM position and then they get transferred to the portal.
this._ngZone.onStable.pipe(take(1), takeUntil(this._destroyed)).subscribe(() => {
// We need to wait until after render, in order for the reference
// element to be in the proper place in the DOM. This is mostly relevant
// for draggable elements inside portals since they get stamped out in
// their original DOM position, and then they get transferred to the portal.
afterNextRender(
() => {
this._updateRootElement();
this._setupHandlesListener();

if (this.freeDragPosition) {
this._dragRef.setFreeDragPosition(this.freeDragPosition);
}
});
});
},
{injector: this._injector},
);
}

ngOnChanges(changes: SimpleChanges) {
const rootSelectorChange = changes['rootElementSelector'];
const positionChange = changes['freeDragPosition'];

// We don't have to react to the first change since it's being
// handled in `ngAfterViewInit` where it needs to be deferred.
// handled in the `afterNextRender` queued up in the constructor.
if (rootSelectorChange && !rootSelectorChange.firstChange) {
this._updateRootElement();
}

// Skip the first change since it's being handled in `ngAfterViewInit`.
// Skip the first change since it's being handled in the `afterNextRender` queued up in the
// constructor.
if (positionChange && !positionChange.firstChange && this.freeDragPosition) {
this._dragRef.setFreeDragPosition(this.freeDragPosition);
}
Expand Down

0 comments on commit f0cceeb

Please sign in to comment.