Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

perf(module:graph): do not run change detection on animation frame #7132

Merged
merged 1 commit into from Jan 13, 2022
Merged

perf(module:graph): do not run change detection on animation frame #7132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 14 additions & 7 deletions components/graph/core/minimap.ts
View file
Open in desktop
Expand Up @@ -3,10 +3,13 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { NgZone } from '@angular/core';

import { drag } from 'd3-drag';
import { pointer, select } from 'd3-selection';
import { ZoomBehavior, zoomIdentity, ZoomTransform } from 'd3-zoom';

import { reqAnimFrame } from 'ng-zorro-antd/core/polyfill';
import { NzSafeAny } from 'ng-zorro-antd/core/types';

import { NzZoomTransform } from '../interface';
Expand All @@ -28,6 +31,7 @@ export class Minimap {
private unlisteners: VoidFunction[] = [];

constructor(
private ngZone: NgZone,
private svg: SVGSVGElement,
private zoomG: SVGGElement,
private mainZoom: ZoomBehavior<NzSafeAny, NzSafeAny>,
Expand Down Expand Up @@ -174,7 +178,7 @@ export class Minimap {
if (this.translate != null && this.zoom != null) {
// Update the viewpoint rectangle shape since the aspect ratio of the
// map has changed.
requestAnimationFrame(() => this.zoom());
this.ngZone.runOutsideAngular(() => reqAnimFrame(() => this.zoom()));
}

// Serialize the main svg to a string which will be used as the rendering
Expand All @@ -196,12 +200,15 @@ export class Minimap {
context!.clearRect(0, 0, this.canvasBuffer.width, this.canvasBuffer.height);

context!.drawImage(image, minimapOffset.x, minimapOffset.y, this.minimapSize.width, this.minimapSize.height);
requestAnimationFrame(() => {
// Hide the old canvas and show the new buffer canvas.
select(this.canvasBuffer).style('display', 'block');
select(this.canvas).style('display', 'none');
// Swap the two canvases.
[this.canvas, this.canvasBuffer] = [this.canvasBuffer, this.canvas];

this.ngZone.runOutsideAngular(() => {
reqAnimFrame(() => {
// Hide the old canvas and show the new buffer canvas.
select(this.canvasBuffer).style('display', 'block');
select(this.canvas).style('display', 'none');
// Swap the two canvases.
[this.canvas, this.canvasBuffer] = [this.canvasBuffer, this.canvas];
});
});
};

Expand Down
6 changes: 3 additions & 3 deletions components/graph/graph-minimap.component.ts
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy } from '@angular/core';
import { ChangeDetectionStrategy, Component, ElementRef, NgZone, OnDestroy } from '@angular/core';

import { ZoomBehavior } from 'd3-zoom';

Expand Down Expand Up @@ -42,7 +42,7 @@ import { NzZoomTransform } from './interface';
})
export class NzGraphMinimapComponent implements OnDestroy {
minimap?: Minimap;
constructor(private elementRef: ElementRef<HTMLElement>) {}
constructor(private elementRef: ElementRef<HTMLElement>, private ngZone: NgZone) {}

ngOnDestroy(): void {
this.minimap?.destroy();
Expand All @@ -51,7 +51,7 @@ export class NzGraphMinimapComponent implements OnDestroy {
init(containerEle: ElementRef, zoomBehavior: ZoomBehavior<NzSafeAny, NzSafeAny>): void {
const svgEle = containerEle.nativeElement.querySelector('svg');
const zoomEle = containerEle.nativeElement.querySelector('svg > g');
this.minimap = new Minimap(svgEle, zoomEle, zoomBehavior, this.elementRef.nativeElement, 150, 0);
this.minimap = new Minimap(this.ngZone, svgEle, zoomEle, zoomBehavior, this.elementRef.nativeElement, 150, 0);
}

zoom(transform: NzZoomTransform): void {
Expand Down