edit

src/app/layout/passport/particle.ts

@@ -17,7 +17,7 @@ export default class Particle {
     var ParticleNetworkAnimation: any, PNA: any;
     ParticleNetworkAnimation = PNA = function () {};
 
-    PNA.prototype.init = function (element: any) {
+    PNA.init = function (element: any) {
       console.log(this);
       this.$el = document.getElementsByClassName(element);
 
@@ -33,7 +33,7 @@ export default class Particle {
       return this;
     };
 
-    PNA.prototype.bindUiActions = function () {
+    PNA.bindUiActions = function () {
       (window as any).on('resize', () => {
         // this.sizeContainer();
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -42,7 +42,7 @@ export default class Particle {
       });
     };
 
-    PNA.prototype.sizeCanvas = function () {
+    PNA.sizeCanvas = function () {
       this.canvas.width = this.container.offsetWidth;
       this.canvas.height = this.container.offsetHeight;
     };
@@ -125,21 +125,19 @@ export default class Particle {
       this.ctx.fill();
     };
 
-    var ParticleNetwork: any = function (parent: { canvas: any; ctx: any; }) {
-      this.options = {
+    var ParticleNetwork: any = (parent: { canvas: any; ctx: any }) => ({
+      options: {
         velocity: 1, // the higher the faster
         density: 15000, // the lower the denser
         netLineDistance: 200,
         netLineColor: '#929292',
         particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
-      };
-      this.canvas = parent.canvas;
-      this.ctx = parent.ctx;
+      },
+      canvas: parent.canvas,
+      ctx: parent.ctx
+    });
 
-      this.init();
-    };
-
-    ParticleNetwork.prototype.init = function () {
+    ParticleNetwork.init = function () {
       // Create particle objects
       this.createParticles(true);
 
@@ -149,7 +147,7 @@ export default class Particle {
       this.bindUiActions();
     };
 
-    ParticleNetwork.prototype.createParticles = function (isInitial) {
+    ParticleNetwork.createParticles = function (isInitial: any) {
       // Initialise / reset particles
       var me = this;
       this.particles = [];
@@ -158,18 +156,15 @@ export default class Particle {
       if (isInitial) {
         var counter = 0;
         clearInterval(this.createIntervalId);
-        this.createIntervalId = setInterval(
-          function () {
-            if (counter < quantity - 1) {
-              // Create particle object
-              this.particles.push(new Particle(this));
-            } else {
-              clearInterval(me.createIntervalId);
-            }
-            counter++;
-          }.bind(this),
-          50
-        );
+        this.createIntervalId = setInterval(() => {
+          if (counter < quantity - 1) {
+            // Create particle object
+            this.particles.push(new Particle(this));
+          } else {
+            clearInterval(me.createIntervalId);
+          }
+          counter++;
+        }, 50);
       } else {
         // Create particle objects
         for (var i = 0; i < quantity; i++) {
@@ -178,7 +173,7 @@ export default class Particle {
       }
     };
 
-    ParticleNetwork.prototype.createInteractionParticle = function () {
+    ParticleNetwork.createInteractionParticle = function () {
       // Add interaction particle
       this.interactionParticle = new Particle(this);
       this.interactionParticle.velocity = {
@@ -189,7 +184,7 @@ export default class Particle {
       return this.interactionParticle;
     };
 
-    ParticleNetwork.prototype.removeInteractionParticle = function () {
+    ParticleNetwork.removeInteractionParticle = function () {
       // Find it
       var index = this.particles.indexOf(this.interactionParticle);
       if (index > -1) {
@@ -199,7 +194,7 @@ export default class Particle {
       }
     };
 
-    ParticleNetwork.prototype.update = function () {
+    ParticleNetwork.update = function () {
       if (this.canvas) {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         this.ctx.globalAlpha = 1;
@@ -247,21 +242,21 @@ export default class Particle {
       }
     };
 
-    ParticleNetwork.prototype.bindUiActions = function () {
+    ParticleNetwork.bindUiActions = function () {
       // Mouse / touch event handling
       this.spawnQuantity = 3;
       this.mouseIsDown = false;
       this.touchIsMoving = false;
 
-      this.onMouseMove = function (e) {
+      this.onMouseMove = (e: { offsetX: any; offsetY: any }) => {
         if (!this.interactionParticle) {
           this.createInteractionParticle();
         }
         this.interactionParticle.x = e.offsetX;
         this.interactionParticle.y = e.offsetY;
-      }.bind(this);
+      };
 
-      this.onTouchMove = function (e) {
+      this.onTouchMove = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
         e.preventDefault();
         this.touchIsMoving = true;
         if (!this.interactionParticle) {
@@ -269,59 +264,53 @@ export default class Particle {
         }
         this.interactionParticle.x = e.changedTouches[0].clientX;
         this.interactionParticle.y = e.changedTouches[0].clientY;
-      }.bind(this);
+      };
 
-      this.onMouseDown = function (e) {
+      this.onMouseDown = () => {
         this.mouseIsDown = true;
         var counter = 0;
         var quantity = this.spawnQuantity;
-        var intervalId = setInterval(
-          function () {
-            if (this.mouseIsDown) {
-              if (counter === 1) {
-                quantity = 1;
-              }
-              for (var i = 0; i < quantity; i++) {
-                if (this.interactionParticle) {
-                  this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
-                }
-              }
-            } else {
-              clearInterval(intervalId);
+        var intervalId = setInterval(() => {
+          if (this.mouseIsDown) {
+            if (counter === 1) {
+              quantity = 1;
             }
-            counter++;
-          }.bind(this),
-          50
-        );
-      }.bind(this);
+            for (var i = 0; i < quantity; i++) {
+              if (this.interactionParticle) {
+                this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
+              }
+            }
+          } else {
+            clearInterval(intervalId);
+          }
+          counter++;
+        }, 50);
+      };
 
-      this.onTouchStart = function (e) {
+      this.onTouchStart = (e: { preventDefault: () => void; changedTouches: { clientX: any; clientY: any }[] }) => {
         e.preventDefault();
-        setTimeout(
-          function () {
-            if (!this.touchIsMoving) {
-              for (var i = 0; i < this.spawnQuantity; i++) {
-                this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
-              }
+        setTimeout(() => {
+          if (!this.touchIsMoving) {
+            for (var i = 0; i < this.spawnQuantity; i++) {
+              this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
             }
-          }.bind(this),
-          200
-        );
-      }.bind(this);
+          }
+        }, 200);
+      };
 
-      this.onMouseUp = function (e) {
+      this.onMouseUp = () => {
         this.mouseIsDown = false;
-      }.bind(this);
+      };
 
-      this.onMouseOut = function (e) {
+      this.onMouseOut = function () {
         this.removeInteractionParticle();
-      }.bind(this);
+      };
 
-      this.onTouchEnd = function (e) {
+      this.onTouchEnd = function (e: { preventDefault: () => void }) {
         e.preventDefault();
         this.touchIsMoving = false;
         this.removeInteractionParticle();
-      }.bind(this);
+      };
 
       // this.canvas.addEventListener('mousemove', this.onMouseMove);
       // this.canvas.addEventListener('touchmove', this.onTouchMove);
@@ -332,7 +321,7 @@ export default class Particle {
       // this.canvas.addEventListener('touchend', this.onTouchEnd);
     };
 
-    ParticleNetwork.prototype.unbindUiActions = function () {
+    ParticleNetwork.unbindUiActions = function () {
       if (this.canvas) {
         // this.canvas.removeEventListener('mousemove', this.onMouseMove);
         // this.canvas.removeEventListener('touchmove', this.onTouchMove);

src/app/layout/passport/passport.component.ts

@@ -1,5 +1,6 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+import Particle from './particle';
 
 @Component({
   selector: 'layout-passport',
@@ -11,10 +12,10 @@ export class LayoutPassportComponent implements OnInit {
 
   ngOnInit(): void {
     // this.tokenService.clear();
-    this.loadJS();
+    // this.loadJS();
 
-    // const particle = new Particle();
-    // particle.init();
+    const particle = new Particle();
+    particle.init();
   }
 
   loadJS() {