Skip to content

Commit

Permalink
perf(module:graph): do not run change detection on animation frame (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
arturovt committed Jan 13, 2022
1 parent 4484674 commit 1ceaf70
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 10 deletions.
21 changes: 14 additions & 7 deletions components/graph/core/minimap.ts
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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

0 comments on commit 1ceaf70

Please sign in to comment.