tsparticles 1.42.1 → 1.42.4

package/Core/Canvas.d.ts

@@ -8,7 +8,7 @@ export declare class Canvas {
     resizeFactor?: IDimension;
     private context;
     private generatedCanvas;
-    private coverColor?;
+    private coverColorStyle?;
     private trailFillColor?;
     private originalStyle?;
     constructor(container: Container);

package/Core/Canvas.js

@@ -50,9 +50,9 @@ class Canvas {
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
-            if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
+            if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 (0, Utils_1.clear)(ctx, this.size);
-                this.paintBase((0, Utils_1.getStyleFromRgb)(this.coverColor, this.coverColor.a));
+                this.paintBase(this.coverColorStyle);
             }
             else {
                 this.paintBase();
@@ -98,11 +98,19 @@ class Canvas {
         const container = this.container;
         const pxRatio = container.retina.pixelRatio;
         const size = container.canvas.size;
+        const newSize = {
+            width: this.element.offsetWidth * pxRatio,
+            height: this.element.offsetHeight * pxRatio,
+        };
+        if (newSize.height === size.height &&
+            newSize.width === size.width &&
+            newSize.height === this.element.height &&
+            newSize.width === this.element.width) {
+            return;
+        }
         const oldSize = Object.assign({}, size);
-        size.width = this.element.offsetWidth * pxRatio;
-        size.height = this.element.offsetHeight * pxRatio;
-        this.element.width = size.width;
-        this.element.height = size.height;
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
             this.resizeFactor = {
                 width: size.width / oldSize.width,
@@ -229,12 +237,13 @@ class Canvas {
         const color = cover.color;
         const coverRgb = (0, Utils_1.colorToRgb)(color);
         if (coverRgb) {
-            this.coverColor = {
+            const coverColor = {
                 r: coverRgb.r,
                 g: coverRgb.g,
                 b: coverRgb.b,
                 a: cover.opacity,
             };
+            this.coverColorStyle = (0, Utils_1.getStyleFromRgb)(coverColor, coverColor.a);
         }
     }
     initTrail() {

package/Core/Particles.js

@@ -147,10 +147,9 @@ class Particles {
         delete container.canvas.resizeFactor;
     }
     async draw(delta) {
-        const container = this.container;
-        container.canvas.clear();
-        const canvasSize = this.container.canvas.size;
+        const container = this.container, canvasSize = this.container.canvas.size;
         this.quadTree = new Utils_1.QuadTree(new Utils_1.Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
+        container.canvas.clear();
         await this.update(delta);
         if (this.needsSort) {
             this.zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);

package/browser/Core/Canvas.d.ts

@@ -21,7 +21,7 @@ export declare class Canvas {
      */
     private context;
     private generatedCanvas;
-    private coverColor?;
+    private coverColorStyle?;
     private trailFillColor?;
     private originalStyle?;
     /**

package/browser/Core/Canvas.js

@@ -62,9 +62,9 @@ export class Canvas {
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
-            if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
+            if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 clear(ctx, this.size);
-                this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
+                this.paintBase(this.coverColorStyle);
             }
             else {
                 this.paintBase();
@@ -117,11 +117,19 @@ export class Canvas {
         const container = this.container;
         const pxRatio = container.retina.pixelRatio;
         const size = container.canvas.size;
+        const newSize = {
+            width: this.element.offsetWidth * pxRatio,
+            height: this.element.offsetHeight * pxRatio,
+        };
+        if (newSize.height === size.height &&
+            newSize.width === size.width &&
+            newSize.height === this.element.height &&
+            newSize.width === this.element.width) {
+            return;
+        }
         const oldSize = Object.assign({}, size);
-        size.width = this.element.offsetWidth * pxRatio;
-        size.height = this.element.offsetHeight * pxRatio;
-        this.element.width = size.width;
-        this.element.height = size.height;
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
             this.resizeFactor = {
                 width: size.width / oldSize.width,
@@ -248,12 +256,13 @@ export class Canvas {
         const color = cover.color;
         const coverRgb = colorToRgb(color);
         if (coverRgb) {
-            this.coverColor = {
+            const coverColor = {
                 r: coverRgb.r,
                 g: coverRgb.g,
                 b: coverRgb.b,
                 a: cover.opacity,
             };
+            this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
         }
     }
     initTrail() {

package/browser/Core/Particles.js

@@ -158,11 +158,10 @@ export class Particles {
         delete container.canvas.resizeFactor;
     }
     async draw(delta) {
-        const container = this.container;
+        const container = this.container, canvasSize = this.container.canvas.size;
+        this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
         /* clear canvas */
         container.canvas.clear();
-        const canvasSize = this.container.canvas.size;
-        this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
         /* update each particles param */
         await this.update(delta);
         if (this.needsSort) {

package/esm/Core/Canvas.d.ts

@@ -8,7 +8,7 @@ export declare class Canvas {
     resizeFactor?: IDimension;
     private context;
     private generatedCanvas;
-    private coverColor?;
+    private coverColorStyle?;
     private trailFillColor?;
     private originalStyle?;
     constructor(container: Container);

package/esm/Core/Canvas.js

@@ -47,9 +47,9 @@ export class Canvas {
     paint() {
         const options = this.container.actualOptions;
         this.draw((ctx) => {
-            if (options.backgroundMask.enable && options.backgroundMask.cover && this.coverColor) {
+            if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 clear(ctx, this.size);
-                this.paintBase(getStyleFromRgb(this.coverColor, this.coverColor.a));
+                this.paintBase(this.coverColorStyle);
             }
             else {
                 this.paintBase();
@@ -95,11 +95,19 @@ export class Canvas {
         const container = this.container;
         const pxRatio = container.retina.pixelRatio;
         const size = container.canvas.size;
+        const newSize = {
+            width: this.element.offsetWidth * pxRatio,
+            height: this.element.offsetHeight * pxRatio,
+        };
+        if (newSize.height === size.height &&
+            newSize.width === size.width &&
+            newSize.height === this.element.height &&
+            newSize.width === this.element.width) {
+            return;
+        }
         const oldSize = Object.assign({}, size);
-        size.width = this.element.offsetWidth * pxRatio;
-        size.height = this.element.offsetHeight * pxRatio;
-        this.element.width = size.width;
-        this.element.height = size.height;
+        this.element.width = size.width = this.element.offsetWidth * pxRatio;
+        this.element.height = size.height = this.element.offsetHeight * pxRatio;
         if (this.container.started) {
             this.resizeFactor = {
                 width: size.width / oldSize.width,
@@ -226,12 +234,13 @@ export class Canvas {
         const color = cover.color;
         const coverRgb = colorToRgb(color);
         if (coverRgb) {
-            this.coverColor = {
+            const coverColor = {
                 r: coverRgb.r,
                 g: coverRgb.g,
                 b: coverRgb.b,
                 a: cover.opacity,
             };
+            this.coverColorStyle = getStyleFromRgb(coverColor, coverColor.a);
         }
     }
     initTrail() {

package/esm/Core/Particles.js

@@ -144,10 +144,9 @@ export class Particles {
         delete container.canvas.resizeFactor;
     }
     async draw(delta) {
-        const container = this.container;
-        container.canvas.clear();
-        const canvasSize = this.container.canvas.size;
+        const container = this.container, canvasSize = this.container.canvas.size;
         this.quadTree = new QuadTree(new Rectangle(-canvasSize.width / 4, -canvasSize.height / 4, (canvasSize.width * 3) / 2, (canvasSize.height * 3) / 2), 4);
+        container.canvas.clear();
         await this.update(delta);
         if (this.needsSort) {
             this.zArray.sort((a, b) => b.position.z - a.position.z || a.id - b.id);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tsparticles",
-  "version": "1.42.1",
-  "description": "Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
+  "version": "1.42.4",
+  "description": "Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.",
   "homepage": "https://particles.js.org/",
   "scripts": {
     "install": "node ./scripts/install.js"
@@ -30,6 +30,10 @@
     "react-particles",
     "react",
     "reactjs",
+    "vue-particles",
+    "ngx-particles",
+    "angular-particles",
+    "particleground",
     "vue",
     "vuejs",
     "preact",
@@ -48,7 +52,15 @@
     "html",
     "css3",
     "animated",
-    "background"
+    "background",
+    "confetti",
+    "canvas",
+    "fireworks",
+    "fireworks-js",
+    "confetti-js",
+    "confettijs",
+    "fireworksjs",
+    "canvas-confetti"
   ],
   "author": "Matteo Bruni <matteo.bruni@me.com>",
   "contributors": [