Merge pull request ryuKKu-#5 from benoitbzl/master

Cancel animation when the directive is destroyed.
umweltdk · Oct 10, 2017 · b385a3f · b385a3f
2 parents 5073dc2 + b2d47f3
commit b385a3f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/lib/CanvasManager.ts b/src/lib/CanvasManager.ts
@@ -18,6 +18,13 @@ export class CanvasManager {
         particles.line_linked.color_rgb_line = hexToRgb(particles.line_linked.color);
     }
 
+    public cancelAnimation(): void {
+        if (!this._tmpParams.drawAnimFrame) {
+            return;
+        }
+        cancelAnimationFrame(this._tmpParams.drawAnimFrame);
+        this._tmpParams.drawAnimFrame = null;
+    }
 
     public draw(): void {
         let { particles } = this._params;
@@ -145,4 +152,4 @@ export class CanvasManager {
 
         this._densityAutoParticles();
     }
-}
+}
diff --git a/src/particles.directive.ts b/src/particles.directive.ts
@@ -1,10 +1,10 @@
-import { Directive, ElementRef, AfterViewInit, HostListener, Input } from "@angular/core";
+import { Directive, ElementRef, AfterViewInit, HostListener, Input, OnDestroy } from "@angular/core";
 import { CanvasManager, ICanvasParams, IParams, ITmpParams, getDefaultParams, isInArray, deepExtend, loadImg } from './lib/index';
 
 @Directive({
     selector: '[d-particles]'
 })
-export class ParticlesDirective implements AfterViewInit {
+export class ParticlesDirective implements AfterViewInit, OnDestroy  {
     @Input() set params(value: IParams) {
         let defaultParams: IParams = getDefaultParams();
         this._params = deepExtend(defaultParams, value);
@@ -17,6 +17,13 @@ export class ParticlesDirective implements AfterViewInit {
     private _tmpParams: ITmpParams = {};
     private _canvasManager: CanvasManager;
 
+    ngOnDestroy(): void {
+        if (!this._canvasManager) {
+            return;
+        }
+        this._canvasManager.cancelAnimation();
+    }
+
     ngAfterViewInit(): void {
         this._canvasParams = {
             el: this.el.nativeElement,
@@ -145,4 +152,4 @@ export class ParticlesDirective implements AfterViewInit {
             }
         }
     }
-}
+}