tsparticles 1.41.0 → 1.41.4

package/tsparticles.interaction.external.grab.js

@@ -1597,20 +1597,20 @@
           }
         }
       }
-      externalInteract(delta) {
+      async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
           if (interactor.isEnabled()) {
-            interactor.interact(delta);
+            await interactor.interact(delta);
           }
         }
       }
-      particlesInteract(particle, delta) {
+      async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
           interactor.reset(particle);
         }
         for (const interactor of this.particleInteractors) {
           if (interactor.isEnabled(particle)) {
-            interactor.interact(particle, delta);
+            await interactor.interact(particle, delta);
           }
         }
       }
@@ -3767,10 +3767,10 @@
         return this.getRadius() ** 2 * Math.PI / 2;
       }
       getFillColor() {
-        var _a, _b, _c;
+        var _a, _b;
         const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
         if (color && this.roll && (this.backColor || this.roll.alter)) {
-          const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
+          const backFactor = this.options.roll.mode === "both" ? 2 : 1, backSum = this.options.roll.mode === "horizontal" ? Math.PI / 2 : 0, rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
           if (rolled) {
             if (this.backColor) {
               return this.backColor;
@@ -4002,10 +4002,10 @@
         }
         container.pathGenerator.init(container);
       }
-      redraw() {
+      async redraw() {
         this.clear();
         this.init();
-        this.draw({
+        await this.draw({
           value: 0,
           factor: 0
         });
@@ -4030,7 +4030,7 @@
       remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
-      update(delta) {
+      async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -4064,23 +4064,23 @@
         for (const particle of particlesToDelete) {
           this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         for (const particle of container.particles.array) {
           for (const updater of this.updaters) {
             updater.update(particle, delta);
           }
           if (!particle.destroyed && !particle.spawning) {
-            this.interactionManager.particlesInteract(particle, delta);
+            await this.interactionManager.particlesInteract(particle, delta);
           }
         }
         delete container.canvas.resizeFactor;
       }
-      draw(delta) {
+      async draw(delta) {
         const container = this.container;
         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);
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
           this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
           this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
@@ -4441,12 +4441,12 @@
       }
       draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = animate()((timestamp => {
+        this.drawAnimationFrame = animate()((async timestamp => {
           if (refreshTime) {
             this.lastFrameTime = undefined;
             refreshTime = false;
           }
-          this.drawer.nextFrame(timestamp);
+          await this.drawer.nextFrame(timestamp);
         }));
       }
       getAnimationStatus() {
@@ -4903,7 +4903,7 @@
         return events.onHover.enable && !!mouse.position && Utils_isInArray("grab", events.onHover.mode);
       }
       reset() {}
-      interact() {
+      async interact() {
         var _a;
         const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
         if (interactivity.events.onHover.enable && container.interactivity.status === Constants_Constants.mouseMoveEvent) {

package/tsparticles.interaction.external.grab.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.41.0 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 n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,(function(){return function(){"use strict";var e={d:function(t,n){for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},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={};function n(e,t,n,o){return Math.floor((e*n+t*o)/(n+o))}function o(e){const t=a(e);let n=r(e);return t===n&&(n=0),Math.random()*(t-n)+n}function r(e){return"number"==typeof e?e:e.min}function a(e){return"number"==typeof e?e:e.max}function i(e,t){if(e===t||void 0===t&&"number"==typeof e)return e;const n=r(e),o=a(e);return void 0!==t?{min:Math.min(n,t),max:Math.max(o,t)}:i(n,o)}function s(e,t){return function(e,t){const n=e.x-t.x,o=e.y-t.y;return{dx:n,dy:o,distance:Math.sqrt(n*n+o*o)}}(e,t).distance}function l(e,t){return e===t||t instanceof Array&&t.indexOf(e)>-1}function u(e,t,n=!0){return e[void 0!==t&&n?t%e.length:function(e){return Math.floor(Math.random()*e.length)}(e)]}function c(e,t,n){let o=n;return o<0&&(o+=1),o>1&&(o-=1),o<1/6?e+6*(t-e)*o:o<.5?t:o<2/3?e+(t-e)*(2/3-o)*6:e}function d(e){if(e.startsWith("rgb")){const t=/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.]+)\s*)?\)/i.exec(e);return t?{a:t.length>4?parseFloat(t[5]):1,b:parseInt(t[3],10),g:parseInt(t[2],10),r:parseInt(t[1],10)}:void 0}if(e.startsWith("hsl")){const t=/hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(e);return t?function(e){const t=v(e);return{a:e.a,b:t.b,g:t.g,r:t.r}}({a:t.length>4?parseFloat(t[5]):1,h:parseInt(t[1],10),l:parseInt(t[3],10),s:parseInt(t[2],10)}):void 0}if(e.startsWith("hsv")){const t=/hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(e);return t?function(e){const t=g(e);return{a:e.a,b:t.b,g:t.g,r:t.r}}({a:t.length>4?parseFloat(t[5]):1,h:parseInt(t[1],10),s:parseInt(t[2],10),v:parseInt(t[3],10)}):void 0}{const t=/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i,n=e.replace(t,((e,t,n,o,r)=>t+t+n+n+o+o+(void 0!==r?r+r:""))),o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(n);return o?{a:void 0!==o[4]?parseInt(o[4],16)/255:1,b:parseInt(o[3],16),g:parseInt(o[2],16),r:parseInt(o[1],16)}:void 0}}function f(e,t,n=!0){var o,r,a;if(void 0===e)return;const i="string"==typeof e?{value:e}:e;let s;if("string"==typeof i.value)s=i.value===m.randomColorValue?p():function(e){return d(e)}(i.value);else if(i.value instanceof Array){s=f({value:u(i.value,t,n)})}else{const e=i.value,t=null!==(o=e.rgb)&&void 0!==o?o:i.value;if(void 0!==t.r)s=t;else{const t=null!==(r=e.hsl)&&void 0!==r?r:i.value;if(void 0!==t.h&&void 0!==t.l)s=v(t);else{const t=null!==(a=e.hsv)&&void 0!==a?a:i.value;void 0!==t.h&&void 0!==t.v&&(s=g(t))}}}return s}function v(e){const t={b:0,g:0,r:0},n={h:e.h/360,l:e.l/100,s:e.s/100};if(0===n.s)t.b=n.l,t.g=n.l,t.r=n.l;else{const e=n.l<.5?n.l*(1+n.s):n.l+n.s-n.l*n.s,o=2*n.l-e;t.r=c(o,e,n.h+1/3),t.g=c(o,e,n.h),t.b=c(o,e,n.h-1/3)}return t.r=Math.floor(255*t.r),t.g=Math.floor(255*t.g),t.b=Math.floor(255*t.b),t}function g(e){const t={b:0,g:0,r:0},n=e.h/60,o=e.s/100,r=e.v/100,a=r*o,i=a*(1-Math.abs(n%2-1));let s;if(n>=0&&n<=1?s={r:a,g:i,b:0}:n>1&&n<=2?s={r:i,g:a,b:0}:n>2&&n<=3?s={r:0,g:a,b:i}:n>3&&n<=4?s={r:0,g:i,b:a}:n>4&&n<=5?s={r:i,g:0,b:a}:n>5&&n<=6&&(s={r:a,g:0,b:i}),s){const e=r-a;t.r=Math.floor(255*(s.r+e)),t.g=Math.floor(255*(s.g+e)),t.b=Math.floor(255*(s.b+e))}return t}function p(e){const t=null!=e?e:0;return{b:Math.floor(o(i(t,256))),g:Math.floor(o(i(t,256))),r:Math.floor(o(i(t,256)))}}function b(e,t,o){var r,a;if(o===m.randomColorValue)return p();if("mid"!==o)return o;{const o=null!==(r=e.getFillColor())&&void 0!==r?r:e.getStrokeColor(),i=null!==(a=null==t?void 0:t.getFillColor())&&void 0!==a?a:null==t?void 0:t.getStrokeColor();if(o&&i&&t)return function(e,t,o,r){let a=e,i=t;return void 0===a.r&&(a=v(e)),void 0===i.r&&(i=v(t)),{b:n(a.b,i.b,o,r),g:n(a.g,i.g,o,r),r:n(a.r,i.r,o,r)}}(o,i,e.getRadius(),t.getRadius());{const e=null!=o?o:i;if(e)return v(e)}}}function h(e,t,n){const o="string"==typeof e?e:e.value;return o===m.randomColorValue?n?f({value:o}):t?m.randomColorValue:m.midColorValue:f({value:o})}e.r(t),e.d(t,{loadExternalGrabInteraction:function(){return M}});class m{}m.generatedAttribute="generated",m.randomColorValue="random",m.midColorValue="mid",m.touchEndEvent="touchend",m.mouseDownEvent="mousedown",m.mouseUpEvent="mouseup",m.mouseMoveEvent="mousemove",m.touchStartEvent="touchstart",m.touchMoveEvent="touchmove",m.mouseLeaveEvent="mouseleave",m.mouseOutEvent="mouseout",m.touchCancelEvent="touchcancel",m.resizeEvent="resize",m.visibilityChangeEvent="visibilitychange",m.noPolygonDataLoaded="No polygon data loaded.",m.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;new WeakMap;class y extends class{constructor(e){this.container=e,this.type=0}}{constructor(e){super(e)}isEnabled(){const e=this.container,t=e.interactivity.mouse,n=e.actualOptions.interactivity.events;return n.onHover.enable&&!!t.position&&l("grab",n.onHover.mode)}reset(){}interact(){var e;const t=this.container,n=t.actualOptions,o=n.interactivity;if(o.events.onHover.enable&&t.interactivity.status===m.mouseMoveEvent){const r=t.interactivity.mouse.position;if(!r)return;const a=t.retina.grabModeDistance,i=t.particles.quadTree.queryCircle(r,a);for(const l of i){const i=s(l.getPosition(),r);if(i<=a){const s=o.modes.grab.links,u=s.opacity,c=u-i*u/a;if(c<=0)continue;const d=null!==(e=s.color)&&void 0!==e?e:l.options.links.color;if(!t.particles.grabLineColor){const e=n.interactivity.modes.grab.links;t.particles.grabLineColor=h(d,e.blink,e.consent)}const f=b(l,void 0,t.particles.grabLineColor);if(!f)return;t.canvas.drawGrabLine(l,f,c,r)}}}}}async function M(e){await e.addInteractor("externalGrab",(e=>new y(e)))}return t}()}));
+/*! tsParticles v1.41.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 n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,(function(){return function(){"use strict";var e={d:function(t,n){for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},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={};function n(e,t,n,o){return Math.floor((e*n+t*o)/(n+o))}function o(e){const t=a(e);let n=r(e);return t===n&&(n=0),Math.random()*(t-n)+n}function r(e){return"number"==typeof e?e:e.min}function a(e){return"number"==typeof e?e:e.max}function i(e,t){if(e===t||void 0===t&&"number"==typeof e)return e;const n=r(e),o=a(e);return void 0!==t?{min:Math.min(n,t),max:Math.max(o,t)}:i(n,o)}function s(e,t){return function(e,t){const n=e.x-t.x,o=e.y-t.y;return{dx:n,dy:o,distance:Math.sqrt(n*n+o*o)}}(e,t).distance}function l(e,t){return e===t||t instanceof Array&&t.indexOf(e)>-1}function u(e,t,n=!0){return e[void 0!==t&&n?t%e.length:function(e){return Math.floor(Math.random()*e.length)}(e)]}function c(e,t,n){let o=n;return o<0&&(o+=1),o>1&&(o-=1),o<1/6?e+6*(t-e)*o:o<.5?t:o<2/3?e+(t-e)*(2/3-o)*6:e}function d(e){if(e.startsWith("rgb")){const t=/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*([\d.]+)\s*)?\)/i.exec(e);return t?{a:t.length>4?parseFloat(t[5]):1,b:parseInt(t[3],10),g:parseInt(t[2],10),r:parseInt(t[1],10)}:void 0}if(e.startsWith("hsl")){const t=/hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(e);return t?function(e){const t=v(e);return{a:e.a,b:t.b,g:t.g,r:t.r}}({a:t.length>4?parseFloat(t[5]):1,h:parseInt(t[1],10),l:parseInt(t[3],10),s:parseInt(t[2],10)}):void 0}if(e.startsWith("hsv")){const t=/hsva?\(\s*(\d+)°\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(,\s*([\d.]+)\s*)?\)/i.exec(e);return t?function(e){const t=g(e);return{a:e.a,b:t.b,g:t.g,r:t.r}}({a:t.length>4?parseFloat(t[5]):1,h:parseInt(t[1],10),s:parseInt(t[2],10),v:parseInt(t[3],10)}):void 0}{const t=/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i,n=e.replace(t,((e,t,n,o,r)=>t+t+n+n+o+o+(void 0!==r?r+r:""))),o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(n);return o?{a:void 0!==o[4]?parseInt(o[4],16)/255:1,b:parseInt(o[3],16),g:parseInt(o[2],16),r:parseInt(o[1],16)}:void 0}}function f(e,t,n=!0){var o,r,a;if(void 0===e)return;const i="string"==typeof e?{value:e}:e;let s;if("string"==typeof i.value)s=i.value===m.randomColorValue?p():function(e){return d(e)}(i.value);else if(i.value instanceof Array){s=f({value:u(i.value,t,n)})}else{const e=i.value,t=null!==(o=e.rgb)&&void 0!==o?o:i.value;if(void 0!==t.r)s=t;else{const t=null!==(r=e.hsl)&&void 0!==r?r:i.value;if(void 0!==t.h&&void 0!==t.l)s=v(t);else{const t=null!==(a=e.hsv)&&void 0!==a?a:i.value;void 0!==t.h&&void 0!==t.v&&(s=g(t))}}}return s}function v(e){const t={b:0,g:0,r:0},n={h:e.h/360,l:e.l/100,s:e.s/100};if(0===n.s)t.b=n.l,t.g=n.l,t.r=n.l;else{const e=n.l<.5?n.l*(1+n.s):n.l+n.s-n.l*n.s,o=2*n.l-e;t.r=c(o,e,n.h+1/3),t.g=c(o,e,n.h),t.b=c(o,e,n.h-1/3)}return t.r=Math.floor(255*t.r),t.g=Math.floor(255*t.g),t.b=Math.floor(255*t.b),t}function g(e){const t={b:0,g:0,r:0},n=e.h/60,o=e.s/100,r=e.v/100,a=r*o,i=a*(1-Math.abs(n%2-1));let s;if(n>=0&&n<=1?s={r:a,g:i,b:0}:n>1&&n<=2?s={r:i,g:a,b:0}:n>2&&n<=3?s={r:0,g:a,b:i}:n>3&&n<=4?s={r:0,g:i,b:a}:n>4&&n<=5?s={r:i,g:0,b:a}:n>5&&n<=6&&(s={r:a,g:0,b:i}),s){const e=r-a;t.r=Math.floor(255*(s.r+e)),t.g=Math.floor(255*(s.g+e)),t.b=Math.floor(255*(s.b+e))}return t}function p(e){const t=null!=e?e:0;return{b:Math.floor(o(i(t,256))),g:Math.floor(o(i(t,256))),r:Math.floor(o(i(t,256)))}}function b(e,t,o){var r,a;if(o===m.randomColorValue)return p();if("mid"!==o)return o;{const o=null!==(r=e.getFillColor())&&void 0!==r?r:e.getStrokeColor(),i=null!==(a=null==t?void 0:t.getFillColor())&&void 0!==a?a:null==t?void 0:t.getStrokeColor();if(o&&i&&t)return function(e,t,o,r){let a=e,i=t;return void 0===a.r&&(a=v(e)),void 0===i.r&&(i=v(t)),{b:n(a.b,i.b,o,r),g:n(a.g,i.g,o,r),r:n(a.r,i.r,o,r)}}(o,i,e.getRadius(),t.getRadius());{const e=null!=o?o:i;if(e)return v(e)}}}function h(e,t,n){const o="string"==typeof e?e:e.value;return o===m.randomColorValue?n?f({value:o}):t?m.randomColorValue:m.midColorValue:f({value:o})}e.r(t),e.d(t,{loadExternalGrabInteraction:function(){return M}});class m{}m.generatedAttribute="generated",m.randomColorValue="random",m.midColorValue="mid",m.touchEndEvent="touchend",m.mouseDownEvent="mousedown",m.mouseUpEvent="mouseup",m.mouseMoveEvent="mousemove",m.touchStartEvent="touchstart",m.touchMoveEvent="touchmove",m.mouseLeaveEvent="mouseleave",m.mouseOutEvent="mouseout",m.touchCancelEvent="touchcancel",m.resizeEvent="resize",m.visibilityChangeEvent="visibilitychange",m.noPolygonDataLoaded="No polygon data loaded.",m.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;new WeakMap;class y extends class{constructor(e){this.container=e,this.type=0}}{constructor(e){super(e)}isEnabled(){const e=this.container,t=e.interactivity.mouse,n=e.actualOptions.interactivity.events;return n.onHover.enable&&!!t.position&&l("grab",n.onHover.mode)}reset(){}async interact(){var e;const t=this.container,n=t.actualOptions,o=n.interactivity;if(o.events.onHover.enable&&t.interactivity.status===m.mouseMoveEvent){const r=t.interactivity.mouse.position;if(!r)return;const a=t.retina.grabModeDistance,i=t.particles.quadTree.queryCircle(r,a);for(const l of i){const i=s(l.getPosition(),r);if(i<=a){const s=o.modes.grab.links,u=s.opacity,c=u-i*u/a;if(c<=0)continue;const d=null!==(e=s.color)&&void 0!==e?e:l.options.links.color;if(!t.particles.grabLineColor){const e=n.interactivity.modes.grab.links;t.particles.grabLineColor=h(d,e.blink,e.consent)}const f=b(l,void 0,t.particles.grabLineColor);if(!f)return;t.canvas.drawGrabLine(l,f,c,r)}}}}}async function M(e){await e.addInteractor("externalGrab",(e=>new y(e)))}return t}()}));

package/tsparticles.interaction.external.repulse.js

@@ -1605,20 +1605,20 @@
           }
         }
       }
-      externalInteract(delta) {
+      async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
           if (interactor.isEnabled()) {
-            interactor.interact(delta);
+            await interactor.interact(delta);
           }
         }
       }
-      particlesInteract(particle, delta) {
+      async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
           interactor.reset(particle);
         }
         for (const interactor of this.particleInteractors) {
           if (interactor.isEnabled(particle)) {
-            interactor.interact(particle, delta);
+            await interactor.interact(particle, delta);
           }
         }
       }
@@ -3898,10 +3898,10 @@
         return this.getRadius() ** 2 * Math.PI / 2;
       }
       getFillColor() {
-        var _a, _b, _c;
+        var _a, _b;
         const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
         if (color && this.roll && (this.backColor || this.roll.alter)) {
-          const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
+          const backFactor = this.options.roll.mode === "both" ? 2 : 1, backSum = this.options.roll.mode === "horizontal" ? Math.PI / 2 : 0, rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
           if (rolled) {
             if (this.backColor) {
               return this.backColor;
@@ -4133,10 +4133,10 @@
         }
         container.pathGenerator.init(container);
       }
-      redraw() {
+      async redraw() {
         this.clear();
         this.init();
-        this.draw({
+        await this.draw({
           value: 0,
           factor: 0
         });
@@ -4161,7 +4161,7 @@
       remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
-      update(delta) {
+      async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -4195,23 +4195,23 @@
         for (const particle of particlesToDelete) {
           this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         for (const particle of container.particles.array) {
           for (const updater of this.updaters) {
             updater.update(particle, delta);
           }
           if (!particle.destroyed && !particle.spawning) {
-            this.interactionManager.particlesInteract(particle, delta);
+            await this.interactionManager.particlesInteract(particle, delta);
           }
         }
         delete container.canvas.resizeFactor;
       }
-      draw(delta) {
+      async draw(delta) {
         const container = this.container;
         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);
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
           this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
           this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
@@ -4572,12 +4572,12 @@
       }
       draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = animate()((timestamp => {
+        this.drawAnimationFrame = animate()((async timestamp => {
           if (refreshTime) {
             this.lastFrameTime = undefined;
             refreshTime = false;
           }
-          this.drawer.nextFrame(timestamp);
+          await this.drawer.nextFrame(timestamp);
         }));
       }
       getAnimationStatus() {
@@ -5038,7 +5038,7 @@
         return Utils_isInArray("repulse", hoverMode) || Utils_isInArray("repulse", clickMode) || divRepulse;
       }
       reset() {}
-      interact() {
+      async interact() {
         const container = this.container, options = container.actualOptions, mouseMoveStatus = container.interactivity.status === Constants_Constants.mouseMoveEvent, events = options.interactivity.events, hoverEnabled = events.onHover.enable, hoverMode = events.onHover.mode, clickEnabled = events.onClick.enable, clickMode = events.onClick.mode, divs = events.onDiv;
         if (mouseMoveStatus && hoverEnabled && Utils_isInArray("repulse", hoverMode)) {
           this.hoverRepulse();

package/tsparticles.interaction.external.repulse.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.41.0 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 s=t();for(var n in s)("object"==typeof exports?exports:e)[n]=s[n]}}(window,(function(){return function(){"use strict";var e={d:function(t,s){for(var n in s)e.o(s,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:s[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={};function s(e,t){const s=e.x-t.x,n=e.y-t.y;return{dx:s,dy:n,distance:Math.sqrt(s*s+n*n)}}function n(e,t){switch(t){case"ease-out-quad":return 1-(1-e)**2;case"ease-out-cubic":return 1-(1-e)**3;case"ease-out-quart":return 1-(1-e)**4;case"ease-out-quint":return 1-(1-e)**5;case"ease-out-expo":return 1===e?1:1-Math.pow(2,-10*e);case"ease-out-sine":return Math.sin(e*Math.PI/2);case"ease-out-back":{const t=1.70158;return 1+(t+1)*Math.pow(e-1,3)+t*Math.pow(e-1,2)}case"ease-out-circ":return Math.sqrt(1-Math.pow(e-1,2));default:return e}}function i(e,t){if(t instanceof Array){for(const s of t)if(e.matches(s))return!0;return!1}return e.matches(t)}function o(e,t){return e===t||t instanceof Array&&t.indexOf(e)>-1}function r(e,t){const s=e.selectors;if(s instanceof Array)for(const n of s)t(n,e);else t(s,e)}e.r(t),e.d(t,{loadExternalRepulseInteraction:function(){return p}});class a{constructor(e,t){this.position={x:e,y:t}}}class c extends a{constructor(e,t,s){super(e,t),this.radius=s}contains(e){return t=e,n=this.position,s(t,n).distance<=this.radius;var t,n}intersects(e){const t=e,s=e,n=this.position,i=e.position,o=Math.abs(i.x-n.x),r=Math.abs(i.y-n.y),a=this.radius;if(void 0!==s.radius){return a+s.radius>Math.sqrt(o*o+r+r)}if(void 0!==t.size){const e=t.size.width,s=t.size.height,n=Math.pow(o-e,2)+Math.pow(r-s,2);return!(o>a+e||r>a+s)&&(o<=e||r<=s||n<=a*a)}return!1}}class u{}u.generatedAttribute="generated",u.randomColorValue="random",u.midColorValue="mid",u.touchEndEvent="touchend",u.mouseDownEvent="mousedown",u.mouseUpEvent="mouseup",u.mouseMoveEvent="mousemove",u.touchStartEvent="touchstart",u.touchMoveEvent="touchmove",u.mouseLeaveEvent="mouseleave",u.mouseOutEvent="mouseout",u.touchCancelEvent="touchcancel",u.resizeEvent="resize",u.visibilityChangeEvent="visibilitychange",u.noPolygonDataLoaded="No polygon data loaded.",u.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;class l extends a{constructor(e,t,s,n){super(e,t),this.size={height:n,width:s}}contains(e){const t=this.size.width,s=this.size.height,n=this.position;return e.x>=n.x&&e.x<=n.x+t&&e.y>=n.y&&e.y<=n.y+s}intersects(e){const t=e,s=e,n=this.size.width,i=this.size.height,o=this.position,r=e.position;if(void 0!==s.radius)return s.intersects(this);if(void 0!==t.size){const e=t.size,s=e.width,a=e.height;return r.x<o.x+n&&r.x+s>o.x&&r.y<o.y+i&&r.y+a>o.y}return!1}}class h{constructor(e,t){let s,n;if(void 0===t){if("number"==typeof e)throw new Error("tsParticles - Vector not initialized correctly");const t=e;[s,n]=[t.x,t.y]}else[s,n]=[e,t];this.x=s,this.y=n}static clone(e){return h.create(e.x,e.y)}static create(e,t){return new h(e,t)}static get origin(){return h.create(0,0)}get angle(){return Math.atan2(this.y,this.x)}set angle(e){this.updateFromAngle(e,this.length)}get length(){return Math.sqrt(this.x**2+this.y**2)}set length(e){this.updateFromAngle(this.angle,e)}add(e){return h.create(this.x+e.x,this.y+e.y)}addTo(e){this.x+=e.x,this.y+=e.y}sub(e){return h.create(this.x-e.x,this.y-e.y)}subFrom(e){this.x-=e.x,this.y-=e.y}mult(e){return h.create(this.x*e,this.y*e)}multTo(e){this.x*=e,this.y*=e}div(e){return h.create(this.x/e,this.y/e)}divTo(e){this.x/=e,this.y/=e}distanceTo(e){return this.sub(e).length}getLengthSq(){return this.x**2+this.y**2}distanceToSq(e){return this.sub(e).getLengthSq()}manhattanDistanceTo(e){return Math.abs(e.x-this.x)+Math.abs(e.y-this.y)}copy(){return h.clone(this)}setTo(e){this.x=e.x,this.y=e.y}rotate(e){return h.create(this.x*Math.cos(e)-this.y*Math.sin(e),this.x*Math.sin(e)+this.y*Math.cos(e))}updateFromAngle(e,t){this.x=Math.cos(e)*t,this.y=Math.sin(e)*t}}new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;new WeakMap;class d extends class{constructor(e){this.container=e,this.type=0}}{constructor(e){super(e)}isEnabled(){const e=this.container,t=e.actualOptions,s=e.interactivity.mouse,n=t.interactivity.events,i=function(e,t){return t instanceof Array?!!t.find((t=>t.enable&&o(e,t.mode))):o(e,t.mode)}("repulse",n.onDiv);if(!(i||n.onHover.enable&&s.position||n.onClick.enable&&s.clickPosition))return!1;const r=n.onHover.mode,a=n.onClick.mode;return o("repulse",r)||o("repulse",a)||i}reset(){}interact(){const e=this.container,t=e.actualOptions,s=e.interactivity.status===u.mouseMoveEvent,n=t.interactivity.events,i=n.onHover.enable,a=n.onHover.mode,c=n.onClick.enable,l=n.onClick.mode,h=n.onDiv;s&&i&&o("repulse",a)?this.hoverRepulse():c&&o("repulse",l)?this.clickRepulse():function(e,t,s){if(t instanceof Array)for(const n of t){const t=n.mode;n.enable&&o(e,t)&&r(n,s)}else{const n=t.mode;t.enable&&o(e,n)&&r(t,s)}}("repulse",h,((e,t)=>this.singleSelectorRepulse(e,t)))}singleSelectorRepulse(e,t){const s=this.container,n=document.querySelectorAll(e);n.length&&n.forEach((e=>{const n=e,o=s.retina.pixelRatio,r={x:(n.offsetLeft+n.offsetWidth/2)*o,y:(n.offsetTop+n.offsetHeight/2)*o},a=n.offsetWidth/2*o,u="circle"===t.type?new c(r.x,r.y,a):new l(n.offsetLeft*o,n.offsetTop*o,n.offsetWidth*o,n.offsetHeight*o),h=function(e,t){if(t&&e)return e instanceof Array?e.find((e=>i(t,e.selectors))):i(t,e.selectors)?e:void 0}(s.actualOptions.interactivity.modes.repulse.divs,n);this.processRepulse(r,a,u,h)}))}hoverRepulse(){const e=this.container,t=e.interactivity.mouse.position;if(!t)return;const s=e.retina.repulseModeDistance;this.processRepulse(t,s,new c(t.x,t.y,s))}processRepulse(e,t,i,o){var r;const a=this.container,c=a.particles.quadTree.query(i),u=a.actualOptions.interactivity.modes.repulse;for(const i of c){const{dx:a,dy:c,distance:f}=s(i.position,e),y=(null!==(r=null==o?void 0:o.speed)&&void 0!==r?r:u.speed)*u.factor,v=(l=n(1-f/t,u.easing)*y,d=0,p=u.maxSpeed,Math.min(Math.max(l,d),p)),x=h.create(0===f?y:a/f*v,0===f?y:c/f*v);i.position.addTo(x)}var l,d,p}clickRepulse(){const e=this.container;if(e.repulse.finish||(e.repulse.count||(e.repulse.count=0),e.repulse.count++,e.repulse.count===e.particles.count&&(e.repulse.finish=!0)),e.repulse.clicking){const t=e.retina.repulseModeDistance,n=Math.pow(t/6,3),i=e.interactivity.mouse.clickPosition;if(void 0===i)return;const o=new c(i.x,i.y,n),r=e.particles.quadTree.query(o);for(const t of r){const{dx:o,dy:r,distance:a}=s(i,t.position),c=a**2,u=e.actualOptions.interactivity.modes.repulse.speed,l=-n*u/c;if(c<=n){e.repulse.particles.push(t);const s=h.create(o,r);s.length=l,t.velocity.setTo(s)}}}else if(!1===e.repulse.clicking){for(const t of e.repulse.particles)t.velocity.setTo(t.initialVelocity);e.repulse.particles=[]}}}async function p(e){await e.addInteractor("externalRepulse",(e=>new d(e)))}return t}()}));
+/*! tsParticles v1.41.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 s=t();for(var n in s)("object"==typeof exports?exports:e)[n]=s[n]}}(window,(function(){return function(){"use strict";var e={d:function(t,s){for(var n in s)e.o(s,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:s[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={};function s(e,t){const s=e.x-t.x,n=e.y-t.y;return{dx:s,dy:n,distance:Math.sqrt(s*s+n*n)}}function n(e,t){switch(t){case"ease-out-quad":return 1-(1-e)**2;case"ease-out-cubic":return 1-(1-e)**3;case"ease-out-quart":return 1-(1-e)**4;case"ease-out-quint":return 1-(1-e)**5;case"ease-out-expo":return 1===e?1:1-Math.pow(2,-10*e);case"ease-out-sine":return Math.sin(e*Math.PI/2);case"ease-out-back":{const t=1.70158;return 1+(t+1)*Math.pow(e-1,3)+t*Math.pow(e-1,2)}case"ease-out-circ":return Math.sqrt(1-Math.pow(e-1,2));default:return e}}function i(e,t){if(t instanceof Array){for(const s of t)if(e.matches(s))return!0;return!1}return e.matches(t)}function o(e,t){return e===t||t instanceof Array&&t.indexOf(e)>-1}function r(e,t){const s=e.selectors;if(s instanceof Array)for(const n of s)t(n,e);else t(s,e)}e.r(t),e.d(t,{loadExternalRepulseInteraction:function(){return p}});class a{constructor(e,t){this.position={x:e,y:t}}}class c extends a{constructor(e,t,s){super(e,t),this.radius=s}contains(e){return t=e,n=this.position,s(t,n).distance<=this.radius;var t,n}intersects(e){const t=e,s=e,n=this.position,i=e.position,o=Math.abs(i.x-n.x),r=Math.abs(i.y-n.y),a=this.radius;if(void 0!==s.radius){return a+s.radius>Math.sqrt(o*o+r+r)}if(void 0!==t.size){const e=t.size.width,s=t.size.height,n=Math.pow(o-e,2)+Math.pow(r-s,2);return!(o>a+e||r>a+s)&&(o<=e||r<=s||n<=a*a)}return!1}}class u{}u.generatedAttribute="generated",u.randomColorValue="random",u.midColorValue="mid",u.touchEndEvent="touchend",u.mouseDownEvent="mousedown",u.mouseUpEvent="mouseup",u.mouseMoveEvent="mousemove",u.touchStartEvent="touchstart",u.touchMoveEvent="touchmove",u.mouseLeaveEvent="mouseleave",u.mouseOutEvent="mouseout",u.touchCancelEvent="touchcancel",u.resizeEvent="resize",u.visibilityChangeEvent="visibilitychange",u.noPolygonDataLoaded="No polygon data loaded.",u.noPolygonFound="No polygon found, you need to specify SVG url in config.";new WeakMap;new WeakMap;class l extends a{constructor(e,t,s,n){super(e,t),this.size={height:n,width:s}}contains(e){const t=this.size.width,s=this.size.height,n=this.position;return e.x>=n.x&&e.x<=n.x+t&&e.y>=n.y&&e.y<=n.y+s}intersects(e){const t=e,s=e,n=this.size.width,i=this.size.height,o=this.position,r=e.position;if(void 0!==s.radius)return s.intersects(this);if(void 0!==t.size){const e=t.size,s=e.width,a=e.height;return r.x<o.x+n&&r.x+s>o.x&&r.y<o.y+i&&r.y+a>o.y}return!1}}class h{constructor(e,t){let s,n;if(void 0===t){if("number"==typeof e)throw new Error("tsParticles - Vector not initialized correctly");const t=e;[s,n]=[t.x,t.y]}else[s,n]=[e,t];this.x=s,this.y=n}static clone(e){return h.create(e.x,e.y)}static create(e,t){return new h(e,t)}static get origin(){return h.create(0,0)}get angle(){return Math.atan2(this.y,this.x)}set angle(e){this.updateFromAngle(e,this.length)}get length(){return Math.sqrt(this.x**2+this.y**2)}set length(e){this.updateFromAngle(this.angle,e)}add(e){return h.create(this.x+e.x,this.y+e.y)}addTo(e){this.x+=e.x,this.y+=e.y}sub(e){return h.create(this.x-e.x,this.y-e.y)}subFrom(e){this.x-=e.x,this.y-=e.y}mult(e){return h.create(this.x*e,this.y*e)}multTo(e){this.x*=e,this.y*=e}div(e){return h.create(this.x/e,this.y/e)}divTo(e){this.x/=e,this.y/=e}distanceTo(e){return this.sub(e).length}getLengthSq(){return this.x**2+this.y**2}distanceToSq(e){return this.sub(e).getLengthSq()}manhattanDistanceTo(e){return Math.abs(e.x-this.x)+Math.abs(e.y-this.y)}copy(){return h.clone(this)}setTo(e){this.x=e.x,this.y=e.y}rotate(e){return h.create(this.x*Math.cos(e)-this.y*Math.sin(e),this.x*Math.sin(e)+this.y*Math.cos(e))}updateFromAngle(e,t){this.x=Math.cos(e)*t,this.y=Math.sin(e)*t}}new WeakMap,new WeakSet;new WeakMap;new WeakMap;new WeakMap;new WeakMap;class d extends class{constructor(e){this.container=e,this.type=0}}{constructor(e){super(e)}isEnabled(){const e=this.container,t=e.actualOptions,s=e.interactivity.mouse,n=t.interactivity.events,i=function(e,t){return t instanceof Array?!!t.find((t=>t.enable&&o(e,t.mode))):o(e,t.mode)}("repulse",n.onDiv);if(!(i||n.onHover.enable&&s.position||n.onClick.enable&&s.clickPosition))return!1;const r=n.onHover.mode,a=n.onClick.mode;return o("repulse",r)||o("repulse",a)||i}reset(){}async interact(){const e=this.container,t=e.actualOptions,s=e.interactivity.status===u.mouseMoveEvent,n=t.interactivity.events,i=n.onHover.enable,a=n.onHover.mode,c=n.onClick.enable,l=n.onClick.mode,h=n.onDiv;s&&i&&o("repulse",a)?this.hoverRepulse():c&&o("repulse",l)?this.clickRepulse():function(e,t,s){if(t instanceof Array)for(const n of t){const t=n.mode;n.enable&&o(e,t)&&r(n,s)}else{const n=t.mode;t.enable&&o(e,n)&&r(t,s)}}("repulse",h,((e,t)=>this.singleSelectorRepulse(e,t)))}singleSelectorRepulse(e,t){const s=this.container,n=document.querySelectorAll(e);n.length&&n.forEach((e=>{const n=e,o=s.retina.pixelRatio,r={x:(n.offsetLeft+n.offsetWidth/2)*o,y:(n.offsetTop+n.offsetHeight/2)*o},a=n.offsetWidth/2*o,u="circle"===t.type?new c(r.x,r.y,a):new l(n.offsetLeft*o,n.offsetTop*o,n.offsetWidth*o,n.offsetHeight*o),h=function(e,t){if(t&&e)return e instanceof Array?e.find((e=>i(t,e.selectors))):i(t,e.selectors)?e:void 0}(s.actualOptions.interactivity.modes.repulse.divs,n);this.processRepulse(r,a,u,h)}))}hoverRepulse(){const e=this.container,t=e.interactivity.mouse.position;if(!t)return;const s=e.retina.repulseModeDistance;this.processRepulse(t,s,new c(t.x,t.y,s))}processRepulse(e,t,i,o){var r;const a=this.container,c=a.particles.quadTree.query(i),u=a.actualOptions.interactivity.modes.repulse;for(const i of c){const{dx:a,dy:c,distance:f}=s(i.position,e),y=(null!==(r=null==o?void 0:o.speed)&&void 0!==r?r:u.speed)*u.factor,v=(l=n(1-f/t,u.easing)*y,d=0,p=u.maxSpeed,Math.min(Math.max(l,d),p)),x=h.create(0===f?y:a/f*v,0===f?y:c/f*v);i.position.addTo(x)}var l,d,p}clickRepulse(){const e=this.container;if(e.repulse.finish||(e.repulse.count||(e.repulse.count=0),e.repulse.count++,e.repulse.count===e.particles.count&&(e.repulse.finish=!0)),e.repulse.clicking){const t=e.retina.repulseModeDistance,n=Math.pow(t/6,3),i=e.interactivity.mouse.clickPosition;if(void 0===i)return;const o=new c(i.x,i.y,n),r=e.particles.quadTree.query(o);for(const t of r){const{dx:o,dy:r,distance:a}=s(i,t.position),c=a**2,u=e.actualOptions.interactivity.modes.repulse.speed,l=-n*u/c;if(c<=n){e.repulse.particles.push(t);const s=h.create(o,r);s.length=l,t.velocity.setTo(s)}}}else if(!1===e.repulse.clicking){for(const t of e.repulse.particles)t.velocity.setTo(t.initialVelocity);e.repulse.particles=[]}}}async function p(e){await e.addInteractor("externalRepulse",(e=>new d(e)))}return t}()}));

package/tsparticles.interaction.external.trail.js

@@ -1597,20 +1597,20 @@
           }
         }
       }
-      externalInteract(delta) {
+      async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
           if (interactor.isEnabled()) {
-            interactor.interact(delta);
+            await interactor.interact(delta);
           }
         }
       }
-      particlesInteract(particle, delta) {
+      async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
           interactor.reset(particle);
         }
         for (const interactor of this.particleInteractors) {
           if (interactor.isEnabled(particle)) {
-            interactor.interact(particle, delta);
+            await interactor.interact(particle, delta);
           }
         }
       }
@@ -3767,10 +3767,10 @@
         return this.getRadius() ** 2 * Math.PI / 2;
       }
       getFillColor() {
-        var _a, _b, _c;
+        var _a, _b;
         const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
         if (color && this.roll && (this.backColor || this.roll.alter)) {
-          const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
+          const backFactor = this.options.roll.mode === "both" ? 2 : 1, backSum = this.options.roll.mode === "horizontal" ? Math.PI / 2 : 0, rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
           if (rolled) {
             if (this.backColor) {
               return this.backColor;
@@ -4002,10 +4002,10 @@
         }
         container.pathGenerator.init(container);
       }
-      redraw() {
+      async redraw() {
         this.clear();
         this.init();
-        this.draw({
+        await this.draw({
           value: 0,
           factor: 0
         });
@@ -4030,7 +4030,7 @@
       remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
-      update(delta) {
+      async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -4064,23 +4064,23 @@
         for (const particle of particlesToDelete) {
           this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         for (const particle of container.particles.array) {
           for (const updater of this.updaters) {
             updater.update(particle, delta);
           }
           if (!particle.destroyed && !particle.spawning) {
-            this.interactionManager.particlesInteract(particle, delta);
+            await this.interactionManager.particlesInteract(particle, delta);
           }
         }
         delete container.canvas.resizeFactor;
       }
-      draw(delta) {
+      async draw(delta) {
         const container = this.container;
         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);
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
           this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
           this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
@@ -4441,12 +4441,12 @@
       }
       draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = animate()((timestamp => {
+        this.drawAnimationFrame = animate()((async timestamp => {
           if (refreshTime) {
             this.lastFrameTime = undefined;
             refreshTime = false;
           }
-          this.drawer.nextFrame(timestamp);
+          await this.drawer.nextFrame(timestamp);
         }));
       }
       getAnimationStatus() {
@@ -4899,7 +4899,7 @@
         super(container);
         this.delay = 0;
       }
-      interact(delta) {
+      async interact(delta) {
         var _a, _b, _c, _d;
         if (!this.container.retina.reduceFactor) {
           return;

package/tsparticles.interaction.external.trail.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.41.0 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 i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(window,(function(){return function(){"use strict";var e={d:function(t,o){for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},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={};function o(e,t){return e===t||t instanceof Array&&t.indexOf(e)>-1}e.r(t),e.d(t,{loadExternalTrailInteraction:function(){return a}});class i{}i.generatedAttribute="generated",i.randomColorValue="random",i.midColorValue="mid",i.touchEndEvent="touchend",i.mouseDownEvent="mousedown",i.mouseUpEvent="mouseup",i.mouseMoveEvent="mousemove",i.touchStartEvent="touchstart",i.touchMoveEvent="touchmove",i.mouseLeaveEvent="mouseleave",i.mouseOutEvent="mouseout",i.touchCancelEvent="touchcancel",i.resizeEvent="resize",i.visibilityChangeEvent="visibilitychange",i.noPolygonDataLoaded="No polygon data loaded.",i.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;new WeakMap;class n extends class{constructor(e){this.container=e,this.type=0}}{constructor(e){super(e),this.delay=0}interact(e){var t,o,i,n;if(!this.container.retina.reduceFactor)return;const a=this.container,r=a.actualOptions.interactivity.modes.trail,s=1e3*r.delay/this.container.retina.reduceFactor;if(this.delay<s&&(this.delay+=e.value),this.delay<s)return;let u=!0;r.pauseOnStop&&(a.interactivity.mouse.position===this.lastPosition||(null===(t=a.interactivity.mouse.position)||void 0===t?void 0:t.x)===(null===(o=this.lastPosition)||void 0===o?void 0:o.x)&&(null===(i=a.interactivity.mouse.position)||void 0===i?void 0:i.y)===(null===(n=this.lastPosition)||void 0===n?void 0:n.y))&&(u=!1),a.interactivity.mouse.position?this.lastPosition={x:a.interactivity.mouse.position.x,y:a.interactivity.mouse.position.y}:delete this.lastPosition,u&&a.particles.push(r.quantity,a.interactivity.mouse,r.particles),this.delay-=s}isEnabled(){const e=this.container,t=e.actualOptions,i=e.interactivity.mouse,n=t.interactivity.events;return i.clicking&&i.inside&&!!i.position&&o("trail",n.onClick.mode)||i.inside&&!!i.position&&o("trail",n.onHover.mode)}reset(){}}async function a(e){await e.addInteractor("externalTrail",(e=>new n(e)))}return t}()}));
+/*! tsParticles v1.41.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 i in o)("object"==typeof exports?exports:e)[i]=o[i]}}(window,(function(){return function(){"use strict";var e={d:function(t,o){for(var i in o)e.o(o,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:o[i]})},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={};function o(e,t){return e===t||t instanceof Array&&t.indexOf(e)>-1}e.r(t),e.d(t,{loadExternalTrailInteraction:function(){return a}});class i{}i.generatedAttribute="generated",i.randomColorValue="random",i.midColorValue="mid",i.touchEndEvent="touchend",i.mouseDownEvent="mousedown",i.mouseUpEvent="mouseup",i.mouseMoveEvent="mousemove",i.touchStartEvent="touchstart",i.touchMoveEvent="touchmove",i.mouseLeaveEvent="mouseleave",i.mouseOutEvent="mouseout",i.touchCancelEvent="touchcancel",i.resizeEvent="resize",i.visibilityChangeEvent="visibilitychange",i.noPolygonDataLoaded="No polygon data loaded.",i.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;new WeakMap;class n extends class{constructor(e){this.container=e,this.type=0}}{constructor(e){super(e),this.delay=0}async interact(e){var t,o,i,n;if(!this.container.retina.reduceFactor)return;const a=this.container,r=a.actualOptions.interactivity.modes.trail,s=1e3*r.delay/this.container.retina.reduceFactor;if(this.delay<s&&(this.delay+=e.value),this.delay<s)return;let u=!0;r.pauseOnStop&&(a.interactivity.mouse.position===this.lastPosition||(null===(t=a.interactivity.mouse.position)||void 0===t?void 0:t.x)===(null===(o=this.lastPosition)||void 0===o?void 0:o.x)&&(null===(i=a.interactivity.mouse.position)||void 0===i?void 0:i.y)===(null===(n=this.lastPosition)||void 0===n?void 0:n.y))&&(u=!1),a.interactivity.mouse.position?this.lastPosition={x:a.interactivity.mouse.position.x,y:a.interactivity.mouse.position.y}:delete this.lastPosition,u&&a.particles.push(r.quantity,a.interactivity.mouse,r.particles),this.delay-=s}isEnabled(){const e=this.container,t=e.actualOptions,i=e.interactivity.mouse,n=t.interactivity.events;return i.clicking&&i.inside&&!!i.position&&o("trail",n.onClick.mode)||i.inside&&!!i.position&&o("trail",n.onHover.mode)}reset(){}}async function a(e){await e.addInteractor("externalTrail",(e=>new n(e)))}return t}()}));

package/tsparticles.interaction.particles.attract.js

@@ -1591,20 +1591,20 @@
           }
         }
       }
-      externalInteract(delta) {
+      async externalInteract(delta) {
         for (const interactor of this.externalInteractors) {
           if (interactor.isEnabled()) {
-            interactor.interact(delta);
+            await interactor.interact(delta);
           }
         }
       }
-      particlesInteract(particle, delta) {
+      async particlesInteract(particle, delta) {
         for (const interactor of this.externalInteractors) {
           interactor.reset(particle);
         }
         for (const interactor of this.particleInteractors) {
           if (interactor.isEnabled(particle)) {
-            interactor.interact(particle, delta);
+            await interactor.interact(particle, delta);
           }
         }
       }
@@ -3767,10 +3767,10 @@
         return this.getRadius() ** 2 * Math.PI / 2;
       }
       getFillColor() {
-        var _a, _b, _c;
+        var _a, _b;
         const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
         if (color && this.roll && (this.backColor || this.roll.alter)) {
-          const rolled = Math.floor(((_c = (_b = this.roll) === null || _b === void 0 ? void 0 : _b.angle) !== null && _c !== void 0 ? _c : 0) / (Math.PI / 2)) % 2;
+          const backFactor = this.options.roll.mode === "both" ? 2 : 1, backSum = this.options.roll.mode === "horizontal" ? Math.PI / 2 : 0, rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
           if (rolled) {
             if (this.backColor) {
               return this.backColor;
@@ -4002,10 +4002,10 @@
         }
         container.pathGenerator.init(container);
       }
-      redraw() {
+      async redraw() {
         this.clear();
         this.init();
-        this.draw({
+        await this.draw({
           value: 0,
           factor: 0
         });
@@ -4030,7 +4030,7 @@
       remove(particle, group, override) {
         this.removeAt(this.array.indexOf(particle), undefined, group, override);
       }
-      update(delta) {
+      async update(delta) {
         const container = this.container;
         const particlesToDelete = [];
         container.pathGenerator.update();
@@ -4064,23 +4064,23 @@
         for (const particle of particlesToDelete) {
           this.remove(particle);
         }
-        this.interactionManager.externalInteract(delta);
+        await this.interactionManager.externalInteract(delta);
         for (const particle of container.particles.array) {
           for (const updater of this.updaters) {
             updater.update(particle, delta);
           }
           if (!particle.destroyed && !particle.spawning) {
-            this.interactionManager.particlesInteract(particle, delta);
+            await this.interactionManager.particlesInteract(particle, delta);
           }
         }
         delete container.canvas.resizeFactor;
       }
-      draw(delta) {
+      async draw(delta) {
         const container = this.container;
         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);
-        this.update(delta);
+        await this.update(delta);
         if (this.needsSort) {
           this.zArray.sort(((a, b) => b.position.z - a.position.z || a.id - b.id));
           this.lastZIndex = this.zArray[this.zArray.length - 1].position.z;
@@ -4441,12 +4441,12 @@
       }
       draw(force) {
         let refreshTime = force;
-        this.drawAnimationFrame = animate()((timestamp => {
+        this.drawAnimationFrame = animate()((async timestamp => {
           if (refreshTime) {
             this.lastFrameTime = undefined;
             refreshTime = false;
           }
-          this.drawer.nextFrame(timestamp);
+          await this.drawer.nextFrame(timestamp);
         }));
       }
       getAnimationStatus() {
@@ -4898,7 +4898,7 @@
       constructor(container) {
         super(container);
       }
-      interact(p1) {
+      async interact(p1) {
         var _a;
         const container = this.container, distance = (_a = p1.retina.attractDistance) !== null && _a !== void 0 ? _a : container.retina.attractDistance, pos1 = p1.getPosition(), query = container.particles.quadTree.queryCircle(pos1, distance);
         for (const p2 of query) {

package/tsparticles.interaction.particles.attract.min.js

@@ -1,2 +1,2 @@
-/*! tsParticles v1.41.0 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={};function o(e,t){const o=e.x-t.x,n=e.y-t.y;return{dx:o,dy:n,distance:Math.sqrt(o*o+n*n)}}e.r(t),e.d(t,{loadParticlesAttractInteraction:function(){return r}});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;new WeakMap;class a extends class{constructor(e){this.container=e,this.type=1}}{constructor(e){super(e)}interact(e){var t;const n=this.container,a=null!==(t=e.retina.attractDistance)&&void 0!==t?t:n.retina.attractDistance,r=e.getPosition(),i=n.particles.quadTree.queryCircle(r,a);for(const t of i){if(e===t||!t.options.move.attract.enable||t.destroyed||t.spawning)continue;const n=t.getPosition(),{dx:a,dy:i}=o(r,n),c=e.options.move.attract.rotate,s=a/(1e3*c.x),u=i/(1e3*c.y),l=t.size.value/e.size.value,d=1/l;e.velocity.x-=s*l,e.velocity.y-=u*l,t.velocity.x+=s*d,t.velocity.y+=u*d}}isEnabled(e){return e.options.move.attract.enable}reset(){}}async function r(e){await e.addInteractor("particlesAttract",(e=>new a(e)))}return t}()}));
+/*! tsParticles v1.41.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={};function o(e,t){const o=e.x-t.x,n=e.y-t.y;return{dx:o,dy:n,distance:Math.sqrt(o*o+n*n)}}e.r(t),e.d(t,{loadParticlesAttractInteraction:function(){return r}});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;new WeakMap;class a extends class{constructor(e){this.container=e,this.type=1}}{constructor(e){super(e)}async interact(e){var t;const n=this.container,a=null!==(t=e.retina.attractDistance)&&void 0!==t?t:n.retina.attractDistance,r=e.getPosition(),i=n.particles.quadTree.queryCircle(r,a);for(const t of i){if(e===t||!t.options.move.attract.enable||t.destroyed||t.spawning)continue;const n=t.getPosition(),{dx:a,dy:i}=o(r,n),c=e.options.move.attract.rotate,s=a/(1e3*c.x),u=i/(1e3*c.y),l=t.size.value/e.size.value,d=1/l;e.velocity.x-=s*l,e.velocity.y-=u*l,t.velocity.x+=s*d,t.velocity.y+=u*d}}isEnabled(e){return e.options.move.attract.enable}reset(){}}async function r(e){await e.addInteractor("particlesAttract",(e=>new a(e)))}return t}()}));