tsparticles 1.42.0 → 1.42.3

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,9 +147,7 @@ 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);
         await this.update(delta);
         if (this.needsSort) {
@@ -157,6 +155,7 @@ class Particles {
             this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
             this.needsSort = false;
         }
+        container.canvas.clear();
         for (const [, plugin] of container.plugins) {
             container.canvas.drawPlugin(plugin, delta);
         }

package/Plugins/Emitters/Options/Classes/Emitter.js

@@ -46,10 +46,10 @@ class Emitter {
         }
         if (data.position !== undefined) {
             this.position = {};
-            if (data.position.x) {
+            if (data.position.x !== undefined) {
                 this.position.x = (0, Utils_1.setRangeValue)(data.position.x);
             }
-            if (data.position.y) {
+            if (data.position.y !== undefined) {
                 this.position.y = (0, Utils_1.setRangeValue)(data.position.y);
             }
         }

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,10 +158,7 @@ export class Particles {
         delete container.canvas.resizeFactor;
     }
     async draw(delta) {
-        const container = this.container;
-        /* clear canvas */
-        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);
         /* update each particles param */
         await this.update(delta);
@@ -170,6 +167,8 @@ export class Particles {
             this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
             this.needsSort = false;
         }
+        /* clear canvas */
+        container.canvas.clear();
         /* draw polygon shape in debug mode */
         for (const [, plugin] of container.plugins) {
             container.canvas.drawPlugin(plugin, delta);

package/browser/Plugins/Emitters/Options/Classes/Emitter.js

@@ -47,10 +47,10 @@ export class Emitter {
         }
         if (data.position !== undefined) {
             this.position = {};
-            if (data.position.x) {
+            if (data.position.x !== undefined) {
                 this.position.x = setRangeValue(data.position.x);
             }
-            if (data.position.y) {
+            if (data.position.y !== undefined) {
                 this.position.y = setRangeValue(data.position.y);
             }
         }

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,9 +144,7 @@ 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);
         await this.update(delta);
         if (this.needsSort) {
@@ -154,6 +152,7 @@ export class Particles {
             this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
             this.needsSort = false;
         }
+        container.canvas.clear();
         for (const [, plugin] of container.plugins) {
             container.canvas.drawPlugin(plugin, delta);
         }

package/esm/Plugins/Emitters/Options/Classes/Emitter.js

@@ -43,10 +43,10 @@ export class Emitter {
         }
         if (data.position !== undefined) {
             this.position = {};
-            if (data.position.x) {
+            if (data.position.x !== undefined) {
                 this.position.x = setRangeValue(data.position.x);
             }
-            if (data.position.y) {
+            if (data.position.y !== undefined) {
                 this.position.y = setRangeValue(data.position.y);
             }
         }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tsparticles",
-  "version": "1.42.0",
-  "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.3",
+  "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": [