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

Author: arturovt

components/graph/core/minimap.ts

@@ -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';
@@ -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>,
@@ -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
@@ -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];
+        });
       });
     };
 

components/graph/graph-minimap.component.ts

@@ -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';
 
@@ -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();
@@ -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 {