tsparticles 1.42.1 → 1.42.4

package/tsparticles.updater.tilt.js

@@ -941,9 +941,9 @@
       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();
           }
@@ -986,11 +986,16 @@
         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,
@@ -1114,12 +1119,13 @@
         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() {
@@ -3306,10 +3312,9 @@
         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/tsparticles.updater.tilt.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.42.1 by Matteo Bruni */
+/*! tsParticles v1.42.4 by Matteo Bruni */
 !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var o=t();for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(window,(function(){return function(){"use strict";var e={d:function(t,o){for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{loadTiltUpdater:function(){return u}});class o{}o.generatedAttribute="generated",o.randomColorValue="random",o.midColorValue="mid",o.touchEndEvent="touchend",o.mouseDownEvent="mousedown",o.mouseUpEvent="mouseup",o.mouseMoveEvent="mousemove",o.touchStartEvent="touchstart",o.touchMoveEvent="touchmove",o.mouseLeaveEvent="mouseleave",o.mouseOutEvent="mouseout",o.touchCancelEvent="touchcancel",o.resizeEvent="resize",o.visibilityChangeEvent="visibilitychange",o.noPolygonDataLoaded="No polygon data loaded.",o.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function n(e){return"number"==typeof e?e:function(e){const t=i(e);let o=a(e);return t===o&&(o=0),Math.random()*(t-o)+o}(e)}function a(e){return"number"==typeof e?e:e.min}function i(e){return"number"==typeof e?e:e.max}new WeakMap;class r{constructor(e){this.container=e}init(e){const t=e.options.tilt;e.tilt={enable:t.enable,value:n(t.value)*Math.PI/180,sinDirection:Math.random()>=.5?1:-1,cosDirection:Math.random()>=.5?1:-1};let o=t.direction;if("random"===o){o=Math.floor(2*Math.random())>0?"counter-clockwise":"clockwise"}switch(o){case"counter-clockwise":case"counterClockwise":e.tilt.status=1;break;case"clockwise":e.tilt.status=0}const a=e.options.tilt.animation;a.enable&&(e.tilt.velocity=n(a.speed)/360*this.container.retina.reduceFactor,a.sync||(e.tilt.velocity*=Math.random()))}isEnabled(e){const t=e.options.tilt.animation;return!e.destroyed&&!e.spawning&&t.enable}update(e,t){this.isEnabled(e)&&function(e,t){var o;if(!e.tilt)return;const n=e.options.tilt.animation,a=(null!==(o=e.tilt.velocity)&&void 0!==o?o:0)*t.factor,i=2*Math.PI;if(n.enable)switch(e.tilt.status){case 0:e.tilt.value+=a,e.tilt.value>i&&(e.tilt.value-=i);break;case 1:default:e.tilt.value-=a,e.tilt.value<0&&(e.tilt.value+=i)}}(e,t)}}async function u(e){await e.addParticleUpdater("tilt",(e=>new r(e)))}return t}()}));

package/tsparticles.updater.wobble.js

@@ -941,9 +941,9 @@
       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();
           }
@@ -986,11 +986,16 @@
         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,
@@ -1114,12 +1119,13 @@
         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() {
@@ -3306,10 +3312,9 @@
         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/tsparticles.updater.wobble.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.42.1 by Matteo Bruni */
+/*! tsParticles v1.42.4 by Matteo Bruni */
 !function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var n=o();for(var t in n)("object"==typeof exports?exports:e)[t]=n[t]}}(window,(function(){return function(){"use strict";var e={d:function(o,n){for(var t in n)e.o(n,t)&&!e.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:n[t]})},o:function(e,o){return Object.prototype.hasOwnProperty.call(e,o)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},o={};e.r(o),e.d(o,{loadWobbleUpdater:function(){return u}});class n{}n.generatedAttribute="generated",n.randomColorValue="random",n.midColorValue="mid",n.touchEndEvent="touchend",n.mouseDownEvent="mousedown",n.mouseUpEvent="mouseup",n.mouseMoveEvent="mousemove",n.touchStartEvent="touchstart",n.touchMoveEvent="touchmove",n.mouseLeaveEvent="mouseleave",n.mouseOutEvent="mouseout",n.touchCancelEvent="touchcancel",n.resizeEvent="resize",n.visibilityChangeEvent="visibilitychange",n.noPolygonDataLoaded="No polygon data loaded.",n.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;function t(e){return"number"==typeof e?e:function(e){const o=i(e);let n=a(e);return o===n&&(n=0),Math.random()*(o-n)+n}(e)}function a(e){return"number"==typeof e?e:e.min}function i(e){return"number"==typeof e?e:e.max}new WeakMap;class r{constructor(e){this.container=e}init(e){const o=e.options.wobble;o.enable?e.wobble={angle:Math.random()*Math.PI*2,speed:t(o.speed)/360}:e.wobble={angle:0,speed:0},e.retina.wobbleDistance=t(o.distance)*this.container.retina.pixelRatio}isEnabled(e){return!e.destroyed&&!e.spawning&&e.options.wobble.enable}update(e,o){this.isEnabled(e)&&function(e,o){var n;if(!e.options.wobble.enable||!e.wobble)return;const t=e.wobble.speed*o.factor,a=(null!==(n=e.retina.wobbleDistance)&&void 0!==n?n:0)*o.factor/(1e3/60),i=2*Math.PI;e.wobble.angle+=t,e.wobble.angle>i&&(e.wobble.angle-=i),e.position.x+=a*Math.cos(e.wobble.angle),e.position.y+=a*Math.abs(Math.sin(e.wobble.angle))}(e,o)}}async function u(e){await e.addParticleUpdater("wobble",(e=>new r(e)))}return o}()}));

package/umd/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/umd/Core/Canvas.js

@@ -59,9 +59,9 @@
         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();
@@ -107,11 +107,19 @@
             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,
@@ -238,12 +246,13 @@
             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/umd/Core/Particles.js

@@ -156,10 +156,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
             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);