@tsparticles/engine 4.0.0-beta.0 → 4.0.0-beta.1

package/esm/Core/Engine.js

@@ -1,7 +1,7 @@
-import { canvasFirstIndex, canvasTag, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, } from "./Utils/Constants.js";
-import { getItemMapFromInitializer, getItemsFromInitializer, itemFromSingleOrMultiple, safeDocument, } from "../Utils/Utils.js";
+import { canvasFirstIndex, canvasTag, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, removeMinIndex, } from "./Utils/Constants.js";
+import { itemFromSingleOrMultiple, safeDocument } from "../Utils/Utils.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
-import { EventType } from "../Enums/Types/EventType.js";
+import { PluginManager } from "./Utils/PluginManager.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { getRandom } from "../Utils/MathUtils.js";
 const fullPercent = "100%";
@@ -45,142 +45,41 @@ const getCanvasFromContainer = (domContainer) => {
     if (domContainer) {
         return domContainer;
     }
-    domContainer = documentSafe.createElement("div");
+    domContainer = documentSafe.createElement("canvas");
     domContainer.id = id;
     domContainer.dataset[generatedAttribute] = generatedTrue;
     documentSafe.body.append(domContainer);
     return domContainer;
 };
 export class Engine {
-    colorManagers = new Map();
-    easingFunctions = new Map();
-    effectDrawers = new Map();
-    initializers = {
-        effects: new Map(),
-        shapes: new Map(),
-        updaters: new Map(),
-    };
-    palettes = new Map();
-    plugins = [];
-    presets = new Map();
-    shapeDrawers = new Map();
-    updaters = new Map();
-    _allLoadersSet = new Set();
-    _configs = new Map();
+    pluginManager = new PluginManager(this);
     _domArray = [];
     _eventDispatcher = new EventDispatcher();
-    _executedSet = new Set();
     _initialized = false;
-    _isRunningLoaders = false;
-    _loadPromises = new Set();
-    get configs() {
-        const res = {};
-        for (const [name, config] of this._configs) {
-            res[name] = config;
-        }
-        return res;
-    }
     get items() {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-beta.0";
-    }
-    addColorManager(name, manager) {
-        this.colorManagers.set(name, manager);
-    }
-    addConfig(config) {
-        const key = config.key ?? config.name ?? "default";
-        this._configs.set(key, config);
-        this._eventDispatcher.dispatchEvent(EventType.configAdded, { data: { name: key, config } });
-    }
-    addEasing(name, easing) {
-        if (this.easingFunctions.get(name)) {
-            return;
-        }
-        this.easingFunctions.set(name, easing);
-    }
-    addEffect(effect, drawer) {
-        this.initializers.effects.set(effect, drawer);
+        return "4.0.0-beta.1";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
-    addPalette(name, palette) {
-        this.palettes.set(name, palette);
-    }
-    addParticleUpdater(name, updaterInitializer) {
-        this.initializers.updaters.set(name, updaterInitializer);
-    }
-    addPlugin(plugin) {
-        if (this.getPlugin(plugin.id)) {
-            return;
-        }
-        this.plugins.push(plugin);
-    }
-    addPreset(preset, options, override = false) {
-        if (!(override || !this.getPreset(preset))) {
-            return;
-        }
-        this.presets.set(preset, options);
-    }
-    addShape(shapes, drawer) {
-        for (const shape of shapes) {
-            this.initializers.shapes.set(shape, drawer);
-        }
-    }
     checkVersion(pluginVersion) {
         if (this.version === pluginVersion) {
             return;
         }
         throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
     }
-    clearPlugins(container) {
-        this.effectDrawers.delete(container);
-        this.shapeDrawers.delete(container);
-        this.updaters.delete(container);
-    }
     dispatchEvent(type, args) {
         this._eventDispatcher.dispatchEvent(type, args);
     }
-    getEasing(name) {
-        return this.easingFunctions.get(name) ?? ((value) => value);
-    }
-    getEffectDrawers(container, force = false) {
-        return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
-    }
-    getPalette(name) {
-        return this.palettes.get(name);
-    }
-    getPlugin(plugin) {
-        return this.plugins.find(t => t.id === plugin);
-    }
-    getPreset(preset) {
-        return this.presets.get(preset);
-    }
-    async getShapeDrawers(container, force = false) {
-        return getItemMapFromInitializer(container, this.shapeDrawers, this.initializers.shapes, force);
-    }
-    async getUpdaters(container, force = false) {
-        return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
-    }
     async init() {
-        if (this._initialized || this._isRunningLoaders) {
+        if (this._initialized) {
             return;
         }
-        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._loadPromises.clear();
-            this._isRunningLoaders = false;
-            this._initialized = true;
-        }
+        await this.pluginManager.init();
+        this._initialized = true;
     }
     item(index) {
         const { items } = this, item = items[index];
@@ -192,7 +91,23 @@ export class Engine {
     }
     async load(params) {
         await this.init();
-        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({
+            dispatchCallback: (eventType, args) => {
+                this.dispatchEvent(eventType, args);
+            },
+            id,
+            onDestroy: (remove) => {
+                if (!remove) {
+                    return;
+                }
+                const mainArr = this.items, idx = mainArr.indexOf(newItem);
+                if (idx >= removeMinIndex) {
+                    mainArr.splice(idx, removeDeleteCount);
+                }
+            },
+            pluginManager: this.pluginManager,
+            sourceOptions: currentOptions,
+        });
         if (oldIndex >= loadMinIndex) {
             const old = this.item(oldIndex), deleteCount = old ? one : none;
             if (old && !old.destroyed) {
@@ -208,40 +123,13 @@ export class Engine {
         await newItem.start();
         return newItem;
     }
-    loadParticlesOptions(container, options, ...sourceOptions) {
-        const updaters = this.updaters.get(container);
-        if (!updaters) {
-            return;
-        }
-        updaters.forEach(updater => updater.loadOptions?.(options, ...sourceOptions));
-    }
     async refresh(refresh = true) {
         if (!refresh) {
             return;
         }
         await Promise.all(this.items.map(t => t.refresh()));
     }
-    async register(...loaders) {
-        if (this._initialized) {
-            throw new Error("Register plugins can only be done before calling tsParticles.load()");
-        }
-        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

@@ -33,7 +33,6 @@ function fixOutMode(data) {
     }
 }
 export class Particle {
-    container;
     backColor;
     bubble;
     destroyed;
@@ -89,10 +88,11 @@ export class Particle {
         c: 0,
         d: 1,
     };
-    _engine;
-    constructor(engine, container) {
-        this.container = container;
-        this._engine = engine;
+    _container;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
+        this._container = container;
     }
     destroy(override) {
         if (this.unbreakable || this.destroyed) {
@@ -101,25 +101,22 @@ export class Particle {
         this.destroyed = true;
         this.bubble.inRange = false;
         this.slow.inRange = false;
-        const container = this.container, shapeDrawer = this.shape ? container.particles.shapeDrawers.get(this.shape) : undefined;
+        const container = this._container, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
         shapeDrawer?.particleDestroy?.(this);
         for (const plugin of container.particleDestroyedPlugins) {
             plugin.particleDestroyed?.(this, override);
         }
-        for (const updater of container.particles.updaters) {
+        for (const updater of container.particleUpdaters) {
             updater.particleDestroyed?.(this, override);
         }
-        this._engine.dispatchEvent(EventType.particleDestroyed, {
-            container: this.container,
-            data: {
-                particle: this,
-            },
+        this._container.dispatchEvent(EventType.particleDestroyed, {
+            particle: this,
         });
     }
     draw(delta) {
-        const container = this.container, canvas = container.canvas;
-        canvas.drawParticlePlugins(this, delta);
-        canvas.drawParticle(this, delta);
+        const container = this._container, render = container.canvas.render;
+        render.drawParticlePlugins(this, delta);
+        render.drawParticle(this, delta);
     }
     getAngle() {
         return this.rotation + (this.pathRotation ? this.velocity.angle : defaultAngle);
@@ -168,7 +165,7 @@ export class Particle {
         return this._cachedTransform;
     }
     init(id, position, overrideOptions, group) {
-        const container = this.container;
+        const container = this._container;
         this.id = id;
         this.group = group;
         this.effectClose = true;
@@ -182,10 +179,14 @@ export class Particle {
         this.misplaced = false;
         this.retina = {
             maxDistance: {},
+            maxSpeed: 0,
+            moveDrift: 0,
+            moveSpeed: 0,
+            sizeAnimationSpeed: 0,
         };
         this.outType = ParticleOutType.normal;
         this.ignoresResizeRatio = true;
-        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this._engine, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
+        const pxRatio = container.retina.pixelRatio, mainOptions = container.actualOptions, particlesOptions = loadParticlesOptions(this._pluginManager, container, mainOptions.particles), reduceDuplicates = particlesOptions.reduceDuplicates, effectType = particlesOptions.effect.type, shapeType = particlesOptions.shape.type;
         this.effect = itemFromSingleOrMultiple(effectType, this.id, reduceDuplicates);
         this.shape = itemFromSingleOrMultiple(shapeType, this.id, reduceDuplicates);
         const effectOptions = particlesOptions.effect, shapeOptions = particlesOptions.shape;
@@ -206,11 +207,11 @@ export class Particle {
             }
         }
         if (this.effect === randomColorValue) {
-            const availableEffects = [...this.container.particles.effectDrawers.keys()];
+            const availableEffects = [...this._container.effectDrawers.keys()];
             this.effect = availableEffects[Math.floor(getRandom() * availableEffects.length)];
         }
         if (this.shape === randomColorValue) {
-            const availableShapes = [...this.container.particles.shapeDrawers.keys()];
+            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;
@@ -245,13 +246,13 @@ export class Particle {
         this.sides = 24;
         let effectDrawer, shapeDrawer;
         if (this.effect) {
-            effectDrawer = container.particles.effectDrawers.get(this.effect);
+            effectDrawer = container.effectDrawers.get(this.effect);
         }
         if (effectDrawer?.loadEffect) {
             effectDrawer.loadEffect(this);
         }
         if (this.shape) {
-            shapeDrawer = container.particles.shapeDrawers.get(this.shape);
+            shapeDrawer = container.shapeDrawers.get(this.shape);
         }
         if (shapeDrawer?.loadShape) {
             shapeDrawer.loadShape(this);
@@ -261,7 +262,7 @@ export class Particle {
             this.sides = sideCountFunc(this);
         }
         this.spawning = false;
-        for (const updater of particles.updaters) {
+        for (const updater of container.particleUpdaters) {
             updater.init(this);
         }
         effectDrawer?.particleInit?.(container, this);
@@ -271,7 +272,7 @@ export class Particle {
         }
     }
     isInsideCanvas() {
-        const radius = this.getRadius(), canvasSize = this.container.canvas.size, position = this.position;
+        const radius = this.getRadius(), canvasSize = this._container.canvas.size, position = this.position;
         return (position.x >= -radius &&
             position.y >= -radius &&
             position.y <= canvasSize.height + radius &&
@@ -300,13 +301,13 @@ export class Particle {
         return !this.destroyed && !this.spawning && this.isInsideCanvas();
     }
     reset() {
-        for (const updater of this.container.particles.updaters) {
+        for (const updater of this._container.particleUpdaters) {
             updater.reset?.(this);
         }
     }
     _calcPosition = (position, zIndex) => {
         let tryCount = defaultRetryCount, posVec = position ? Vector3d.create(position.x, position.y, zIndex) : undefined;
-        const container = this.container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
+        const container = this._container, plugins = container.particlePositionPlugins, outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
         while (!signal.aborted) {
             for (const plugin of plugins) {
                 const pluginPos = plugin.particlePosition?.(posVec, this);
@@ -359,7 +360,7 @@ export class Particle {
             outMode,
             checkModes: [OutMode.bounce],
             coord: pos.x,
-            maxCoord: this.container.canvas.size.width,
+            maxCoord: this._container.canvas.size.width,
             setCb: (value) => (pos.x += value),
             radius,
         });
@@ -369,7 +370,7 @@ export class Particle {
             outMode,
             checkModes: [OutMode.bounce],
             coord: pos.y,
-            maxCoord: this.container.canvas.size.height,
+            maxCoord: this._container.canvas.size.height,
             setCb: (value) => (pos.y += value),
             radius,
         });
@@ -390,7 +391,7 @@ export class Particle {
         return color;
     };
     _initPosition = position => {
-        const container = this.container, zIndexValue = getRangeValue(this.options.zIndex.value), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
+        const container = this._container, zIndexValue = getRangeValue(this.options.zIndex.value), initialPosition = this._calcPosition(position, clamp(zIndexValue, minZ, container.zLayers));
         if (!initialPosition) {
             throw new Error("a valid position cannot be found for particle");
         }

package/{browser/Core/Particles.js → esm/Core/ParticlesManager.js}

@@ -5,15 +5,11 @@ import { Particle } from "./Particle.js";
 import { SpatialHashGrid } from "./Utils/SpatialHashGrid.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
-export class Particles {
+export class ParticlesManager {
     checkParticlePositionPlugins;
-    effectDrawers;
     grid;
-    shapeDrawers;
-    updaters;
     _array;
     _container;
-    _engine;
     _groupLimits;
     _limit;
     _maxZIndex;
@@ -22,14 +18,15 @@ export class Particles {
     _nextId;
     _particleResetPlugins;
     _particleUpdatePlugins;
+    _pluginManager;
     _pool;
     _postParticleUpdatePlugins;
     _postUpdatePlugins;
     _resizeFactor;
     _updatePlugins;
     _zArray;
-    constructor(engine, container) {
-        this._engine = engine;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
         this._nextId = 0;
         this._array = [];
@@ -41,9 +38,6 @@ export class Particles {
         this._minZIndex = 0;
         this._maxZIndex = 0;
         this.grid = new SpatialHashGrid(spatialHashGridCellSize);
-        this.effectDrawers = new Map();
-        this.shapeDrawers = new Map();
-        this.updaters = [];
         this.checkParticlePositionPlugins = [];
         this._particleResetPlugins = [];
         this._particleUpdatePlugins = [];
@@ -75,7 +69,7 @@ export class Particles {
             }
         }
         try {
-            const particle = this._pool.pop() ?? new Particle(this._engine, this._container);
+            const particle = this._pool.pop() ?? new Particle(this._pluginManager, this._container);
             particle.init(this._nextId, position, overrideOptions, group);
             let canAdd = true;
             if (initializer) {
@@ -88,11 +82,8 @@ export class Particles {
             this._array.push(particle);
             this._zArray.push(particle);
             this._nextId++;
-            this._engine.dispatchEvent(EventType.particleAdded, {
-                container: this._container,
-                data: {
-                    particle,
-                },
+            this._container.dispatchEvent(EventType.particleAdded, {
+                particle,
             });
             return particle;
         }
@@ -106,19 +97,9 @@ export class Particles {
         this._zArray = [];
     }
     destroy() {
-        const container = this._container;
-        for (const [, effectDrawer] of this.effectDrawers) {
-            effectDrawer.destroy?.(container);
-        }
-        for (const [, shapeDrawer] of this.shapeDrawers) {
-            shapeDrawer.destroy?.(container);
-        }
         this._array = [];
         this._pool.length = 0;
         this._zArray = [];
-        this.effectDrawers = new Map();
-        this.shapeDrawers = new Map();
-        this.updaters = [];
         this.checkParticlePositionPlugins = [];
         this._particleResetPlugins = [];
         this._particleUpdatePlugins = [];
@@ -175,11 +156,11 @@ export class Particles {
                 this._postParticleUpdatePlugins.push(plugin);
             }
         }
-        await this.initPlugins();
-        for (const drawer of this.effectDrawers.values()) {
+        await this._container.initDrawersAndUpdaters();
+        for (const drawer of this._container.effectDrawers.values()) {
             await drawer.init?.(container);
         }
-        for (const drawer of this.shapeDrawers.values()) {
+        for (const drawer of this._container.shapeDrawers.values()) {
             await drawer.init?.(container);
         }
         let handled = false;
@@ -205,12 +186,6 @@ export class Particles {
             }
         }
     }
-    async initPlugins() {
-        const container = this._container;
-        this.effectDrawers = await this._engine.getEffectDrawers(container, true);
-        this.shapeDrawers = await this._engine.getShapeDrawers(container, true);
-        this.updaters = await this._engine.getUpdaters(container, true);
-    }
     push(nb, position, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
             this.addParticle(position, overrideOptions, group);
@@ -219,7 +194,7 @@ export class Particles {
     async redraw() {
         this.clear();
         await this.init();
-        this._container.canvas.drawParticles({ value: 0, factor: 0 });
+        this._container.canvas.render.drawParticles({ value: 0, factor: 0 });
     }
     remove(particle, group, override) {
         this.removeAt(this._array.indexOf(particle), undefined, group, override);
@@ -252,7 +227,7 @@ export class Particles {
             if (!groupData) {
                 continue;
             }
-            const groupDataOptions = loadParticlesOptions(this._engine, this._container, groupData);
+            const groupDataOptions = loadParticlesOptions(this._pluginManager, this._container, groupData);
             this._applyDensity(groupDataOptions, pluginsCount, group);
         }
         this._applyDensity(options.particles, pluginsCount);
@@ -293,25 +268,15 @@ export class Particles {
             }
             this.grid.insert(particle);
         }
-        if (particlesToDelete.size) {
-            const checkDelete = (p) => !particlesToDelete.has(p);
-            this._array = this.filter(checkDelete);
-            this._zArray = this._zArray.filter(checkDelete);
-            for (const particle of particlesToDelete) {
-                this._engine.dispatchEvent(EventType.particleRemoved, {
-                    container: this._container,
-                    data: {
-                        particle,
-                    },
-                });
-            }
-            this._addToPool(...particlesToDelete);
-        }
         for (const plugin of this._postUpdatePlugins) {
             plugin.postUpdate?.(delta);
         }
         for (const particle of this._array) {
-            for (const updater of this.updaters) {
+            if (particle.destroyed) {
+                particlesToDelete.add(particle);
+                continue;
+            }
+            for (const updater of this._container.particleUpdaters) {
                 updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
@@ -319,6 +284,14 @@ export class Particles {
                     plugin.postParticleUpdate?.(particle, delta);
                 }
             }
+            else if (particle.destroyed) {
+                particlesToDelete.add(particle);
+            }
+        }
+        if (particlesToDelete.size) {
+            for (const particle of particlesToDelete) {
+                this.remove(particle);
+            }
         }
         delete this._resizeFactor;
         if (this._needsSort) {
@@ -381,11 +354,8 @@ export class Particles {
         this._array.splice(index, deleteCount);
         this._zArray.splice(zIdx, deleteCount);
         particle.destroy(override);
-        this._engine.dispatchEvent(EventType.particleRemoved, {
-            container: this._container,
-            data: {
-                particle,
-            },
+        this._container.dispatchEvent(EventType.particleRemoved, {
+            particle,
         });
         this._addToPool(particle);
         return true;