@tsparticles/engine 4.0.0-alpha.4 → 4.0.0-alpha.8

package/esm/Core/Engine.js

@@ -57,7 +57,10 @@ export class Engine {
         this._domArray = [];
         this._eventDispatcher = new EventDispatcher();
         this._initialized = false;
+        this._isRunningLoaders = false;
         this._loadPromises = new Set();
+        this._allLoadersSet = new Set();
+        this._executedSet = new Set();
         this.plugins = [];
         this.colorManagers = new Map();
         this.easingFunctions = new Map();
@@ -83,7 +86,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.4";
+        return "4.0.0-alpha.8";
     }
     addColorManager(manager) {
         this.colorManagers.set(manager.key, manager);
@@ -184,40 +187,21 @@ export class Engine {
         return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
     }
     async init() {
-        if (this._initialized) {
+        if (this._initialized || this._isRunningLoaders)
             return;
-        }
-        const executed = new Set(), allLoaders = new Set(this._loadPromises), stack = [...allLoaders];
-        while (stack.length) {
-            const loader = stack.shift();
-            if (!loader) {
-                continue;
-            }
-            if (executed.has(loader)) {
-                continue;
-            }
-            executed.add(loader);
-            const inner = [], origRegister = this.register.bind(this);
-            this.register = (...loaders) => {
-                inner.push(...loaders);
-                for (const loader of loaders) {
-                    allLoaders.add(loader);
-                }
-            };
-            try {
-                await loader(this);
+        this._isRunningLoaders = true;
+        this._executedSet = new Set();
+        this._allLoadersSet = new Set(this._loadPromises);
+        try {
+            for (const loader of this._allLoadersSet) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
             }
-            finally {
-                this.register = origRegister;
-            }
-            stack.unshift(...inner);
-            this._loadPromises.delete(loader);
         }
-        this._loadPromises.clear();
-        for (const loader of allLoaders) {
-            this._loadPromises.add(loader);
+        finally {
+            this._loadPromises.clear();
+            this._isRunningLoaders = false;
+            this._initialized = true;
         }
-        this._initialized = true;
     }
     item(index) {
         const { items } = this, item = items[index];
@@ -229,10 +213,7 @@ export class Engine {
     }
     async load(params) {
         await this.init();
-        this._loadPromises.clear();
-        const { Container } = await import("./Container.js"), id = params.id ??
-            params.element?.id ??
-            `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
+        const { Container } = await import("./Container.js"), id = params.id ?? params.element?.id ?? `tsparticles${Math.floor(getRandom() * loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = itemFromSingleOrMultiple(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
         if (oldIndex >= loadMinIndex) {
             const old = this.item(oldIndex), deleteCount = old ? one : none;
             if (old && !old.destroyed) {
@@ -261,15 +242,27 @@ export class Engine {
         }
         await Promise.all(this.items.map(t => t.refresh()));
     }
-    register(...loadPromises) {
+    async register(...loaders) {
         if (this._initialized) {
-            throw new Error(`Register plugins can only be done before calling tsParticles.load()`);
+            throw new Error("Register plugins can only be done before calling tsParticles.load()");
         }
-        for (const loadPromise of loadPromises) {
-            this._loadPromises.add(loadPromise);
+        for (const loader of loaders) {
+            if (this._isRunningLoaders) {
+                await this._runLoader(loader, this._executedSet, this._allLoadersSet);
+            }
+            else {
+                this._loadPromises.add(loader);
+            }
         }
     }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);
     }
+    async _runLoader(loader, executed, allLoaders) {
+        if (executed.has(loader))
+            return;
+        executed.add(loader);
+        allLoaders.add(loader);
+        await loader(this);
+    }
 }

package/esm/Core/Particle.js

@@ -1,6 +1,6 @@
 import { Vector, Vector3d } from "./Utils/Vectors.js";
 import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeValue, randomInRangeValue, setRangeValue, } from "../Utils/MathUtils.js";
-import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, half, identity, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
+import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, doublePI, half, identity, millisecondsToSeconds, minZ, randomColorValue, squareExp, triple, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
@@ -124,8 +124,7 @@ export class Particle {
             if (!color || !this.roll || (!this.backColor && !this.roll.alter)) {
                 return color;
             }
-            const backFactor = this.roll.horizontal && this.roll.vertical ? double * rollFactor : rollFactor, backSum = this.roll.horizontal ? Math.PI * half : none, rolled = Math.floor((this.roll.angle + backSum) / (Math.PI / backFactor)) % double;
-            if (!rolled) {
+            if (!this.isShowingBack()) {
                 return color;
             }
             if (this.backColor) {
@@ -286,9 +285,7 @@ export class Particle {
             const availableShapes = [...this.container.shapeDrawers.keys()];
             this.shape = availableShapes[Math.floor(getRandom() * availableShapes.length)];
         }
-        this.effectData = this.effect
-            ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates)
-            : undefined;
+        this.effectData = this.effect ? loadEffectData(this.effect, effectOptions, this.id, reduceDuplicates) : undefined;
         this.shapeData = this.shape ? loadShapeData(this.shape, shapeOptions, this.id, reduceDuplicates) : undefined;
         particlesOptions.load(overrideOptions);
         const effectData = this.effectData;
@@ -378,6 +375,25 @@ export class Particle {
             position.y <= canvasSize.height + radius &&
             position.x <= canvasSize.width + radius);
     }
+    isShowingBack() {
+        if (!this.roll) {
+            return false;
+        }
+        const angle = this.roll.angle;
+        if (this.roll.horizontal && this.roll.vertical) {
+            const normalizedAngle = angle % doublePI, adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + doublePI : normalizedAngle;
+            return adjustedAngle >= Math.PI * half && adjustedAngle < Math.PI * triple * half;
+        }
+        if (this.roll.horizontal) {
+            const normalizedAngle = (angle + Math.PI * half) % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
+        }
+        if (this.roll.vertical) {
+            const normalizedAngle = angle % (Math.PI * double), adjustedAngle = normalizedAngle < defaultAngle ? normalizedAngle + Math.PI * double : normalizedAngle;
+            return adjustedAngle >= Math.PI && adjustedAngle < Math.PI * double;
+        }
+        return false;
+    }
     isVisible() {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }

package/esm/Core/Utils/Constants.js

@@ -7,4 +7,4 @@ export const generatedAttribute = "generated", resizeEvent = "resize", visibilit
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;

package/esm/Enums/Types/EasingType.js

@@ -1,30 +1,45 @@
 export var EasingType;
 (function (EasingType) {
     EasingType["easeInBack"] = "ease-in-back";
+    EasingType["easeInBounce"] = "ease-in-bounce";
     EasingType["easeInCirc"] = "ease-in-circ";
     EasingType["easeInCubic"] = "ease-in-cubic";
+    EasingType["easeInElastic"] = "ease-in-elastic";
+    EasingType["easeInExpo"] = "ease-in-expo";
+    EasingType["easeInGaussian"] = "ease-in-gaussian";
     EasingType["easeInLinear"] = "ease-in-linear";
     EasingType["easeInQuad"] = "ease-in-quad";
     EasingType["easeInQuart"] = "ease-in-quart";
     EasingType["easeInQuint"] = "ease-in-quint";
-    EasingType["easeInExpo"] = "ease-in-expo";
+    EasingType["easeInSigmoid"] = "ease-in-sigmoid";
     EasingType["easeInSine"] = "ease-in-sine";
+    EasingType["easeInSmoothstep"] = "ease-in-smoothstep";
     EasingType["easeOutBack"] = "ease-out-back";
+    EasingType["easeOutBounce"] = "ease-out-bounce";
     EasingType["easeOutCirc"] = "ease-out-circ";
     EasingType["easeOutCubic"] = "ease-out-cubic";
+    EasingType["easeOutElastic"] = "ease-out-elastic";
+    EasingType["easeOutExpo"] = "ease-out-expo";
+    EasingType["easeOutGaussian"] = "ease-out-gaussian";
     EasingType["easeOutLinear"] = "ease-out-linear";
     EasingType["easeOutQuad"] = "ease-out-quad";
     EasingType["easeOutQuart"] = "ease-out-quart";
     EasingType["easeOutQuint"] = "ease-out-quint";
-    EasingType["easeOutExpo"] = "ease-out-expo";
+    EasingType["easeOutSigmoid"] = "ease-out-sigmoid";
     EasingType["easeOutSine"] = "ease-out-sine";
+    EasingType["easeOutSmoothstep"] = "ease-out-smoothstep";
     EasingType["easeInOutBack"] = "ease-in-out-back";
+    EasingType["easeInOutBounce"] = "ease-in-out-bounce";
     EasingType["easeInOutCirc"] = "ease-in-out-circ";
     EasingType["easeInOutCubic"] = "ease-in-out-cubic";
+    EasingType["easeInOutElastic"] = "ease-in-out-elastic";
+    EasingType["easeInOutExpo"] = "ease-in-out-expo";
+    EasingType["easeInOutGaussian"] = "ease-in-out-gaussian";
     EasingType["easeInOutLinear"] = "ease-in-out-linear";
     EasingType["easeInOutQuad"] = "ease-in-out-quad";
     EasingType["easeInOutQuart"] = "ease-in-out-quart";
     EasingType["easeInOutQuint"] = "ease-in-out-quint";
-    EasingType["easeInOutExpo"] = "ease-in-out-expo";
+    EasingType["easeInOutSigmoid"] = "ease-in-out-sigmoid";
     EasingType["easeInOutSine"] = "ease-in-out-sine";
+    EasingType["easeInOutSmoothstep"] = "ease-in-out-smoothstep";
 })(EasingType || (EasingType = {}));

package/esm/Utils/CanvasUtils.js

@@ -1,11 +1,5 @@
 import { lFactor, minStrokeWidth, originPoint } from "../Core/Utils/Constants.js";
 import { AlterType } from "../Enums/Types/AlterType.js";
-export function clearDrawPlugin(context, plugin, delta) {
-    if (!plugin.clearDraw) {
-        return;
-    }
-    plugin.clearDraw(context, delta);
-}
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -121,12 +115,6 @@ export function drawShapeBeforeDraw(container, data) {
     }
     drawer.beforeDraw(data);
 }
-export function drawPlugin(context, plugin, delta) {
-    if (!plugin.draw) {
-        return;
-    }
-    plugin.draw(context, delta);
-}
 export function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;

package/esm/Utils/Utils.js

@@ -98,11 +98,15 @@ export function deepExtend(destination, ...sources) {
             continue;
         }
         const sourceIsArray = Array.isArray(source);
-        if (sourceIsArray && (isObject(destination) || !destination || !Array.isArray(destination))) {
-            destination = [];
+        if (sourceIsArray) {
+            if (!Array.isArray(destination)) {
+                destination = [];
+            }
         }
-        else if (!sourceIsArray && (isObject(destination) || !destination || Array.isArray(destination))) {
-            destination = {};
+        else {
+            if (!isObject(destination) || Array.isArray(destination)) {
+                destination = {};
+            }
         }
         for (const key in source) {
             if (key === "__proto__") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/engine",
-  "version": "4.0.0-alpha.4",
+  "version": "4.0.0-alpha.8",
   "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": {