diff --git a/components/graph/core/minimap.ts b/components/graph/core/minimap.ts index fe8fb7c8bc..dcd435949f 100644 --- a/components/graph/core/minimap.ts +++ b/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, @@ -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]; + }); }); }; diff --git a/components/graph/graph-minimap.component.ts b/components/graph/graph-minimap.component.ts index e6cf77f877..da74887dd0 100644 --- a/components/graph/graph-minimap.component.ts +++ b/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) {} + constructor(private elementRef: ElementRef, private ngZone: NgZone) {} ngOnDestroy(): void { this.minimap?.destroy(); @@ -51,7 +51,7 @@ export class NzGraphMinimapComponent implements OnDestroy { init(containerEle: ElementRef, zoomBehavior: ZoomBehavior): 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 {