@tsparticles/engine 4.0.0-alpha.0 → 4.0.0-alpha.14

package/cjs/Core/Engine.js

@@ -1,17 +1,10 @@
 import { canvasFirstIndex, canvasTag, generatedAttribute, generatedFalse, generatedTrue, loadMinIndex, loadRandomFactor, none, one, removeDeleteCount, } from "./Utils/Constants.js";
-import { itemFromSingleOrMultiple, safeDocument } from "../Utils/Utils.js";
+import { getItemMapFromInitializer, getItemsFromInitializer, itemFromSingleOrMultiple, safeDocument, } from "../Utils/Utils.js";
 import { EventDispatcher } from "../Utils/EventDispatcher.js";
 import { EventType } from "../Enums/Types/EventType.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { getRandom } from "../Utils/MathUtils.js";
-async function getItemsFromInitializer(container, map, initializers, force = false) {
-    let res = map.get(container);
-    if (!res || force) {
-        res = await Promise.all([...initializers.values()].map(t => t(container)));
-        map.set(container, res);
-    }
-    return res;
-}
+const fullPercent = "100%";
 async function getDataFromUrl(data) {
     const url = itemFromSingleOrMultiple(data.url, data.index);
     if (!url) {
@@ -25,6 +18,7 @@ async function getDataFromUrl(data) {
     return data.fallback;
 }
 const getCanvasFromContainer = (domContainer) => {
+    const documentSafe = safeDocument();
     let canvasEl;
     if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === canvasTag) {
         canvasEl = domContainer;
@@ -37,53 +31,51 @@ const getCanvasFromContainer = (domContainer) => {
             canvasEl.dataset[generatedAttribute] = generatedFalse;
         }
         else {
-            canvasEl = safeDocument().createElement(canvasTag);
+            canvasEl = documentSafe.createElement(canvasTag);
             canvasEl.dataset[generatedAttribute] = generatedTrue;
             domContainer.appendChild(canvasEl);
         }
     }
-    const fullPercent = "100%";
-    if (!canvasEl.style.width) {
-        canvasEl.style.width = fullPercent;
-    }
-    if (!canvasEl.style.height) {
-        canvasEl.style.height = fullPercent;
-    }
+    canvasEl.style.width ||= fullPercent;
+    canvasEl.style.height ||= fullPercent;
     return canvasEl;
 }, getDomContainer = (id, source) => {
-    let domContainer = source ?? safeDocument().getElementById(id);
+    const documentSafe = safeDocument();
+    let domContainer = source ?? documentSafe.getElementById(id);
     if (domContainer) {
         return domContainer;
     }
-    domContainer = safeDocument().createElement("div");
+    domContainer = documentSafe.createElement("div");
     domContainer.id = id;
     domContainer.dataset[generatedAttribute] = generatedTrue;
-    safeDocument().body.append(domContainer);
+    documentSafe.body.append(domContainer);
     return domContainer;
 };
 export class Engine {
-    constructor() {
-        this._configs = new Map();
-        this._domArray = [];
-        this._eventDispatcher = new EventDispatcher();
-        this._initialized = false;
-        this._loadPromises = new Set();
-        this.plugins = [];
-        this.colorManagers = new Map();
-        this.easingFunctions = new Map();
-        this._initializers = {
-            interactors: new Map(),
-            movers: new Map(),
-            updaters: new Map(),
-        };
-        this.interactors = new Map();
-        this.movers = new Map();
-        this.updaters = new Map();
-        this.presets = new Map();
-        this.effectDrawers = new Map();
-        this.shapeDrawers = new Map();
-        this.pathGenerators = new Map();
-    }
+    colorManagers = new Map();
+    easingFunctions = new Map();
+    effectDrawers = new Map();
+    initializers = {
+        effects: new Map(),
+        movers: new Map(),
+        pathGenerators: new Map(),
+        shapes: new Map(),
+        updaters: new Map(),
+    };
+    movers = new Map();
+    pathGenerators = new Map();
+    plugins = [];
+    presets = new Map();
+    shapeDrawers = new Map();
+    updaters = new Map();
+    _allLoadersSet = new Set();
+    _configs = new Map();
+    _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) {
@@ -95,10 +87,10 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.0";
+        return "4.0.0-alpha.14";
     }
-    addColorManager(manager) {
-        this.colorManagers.set(manager.key, manager);
+    addColorManager(name, manager) {
+        this.colorManagers.set(name, manager);
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
@@ -112,28 +104,19 @@ export class Engine {
         this.easingFunctions.set(name, easing);
     }
     addEffect(effect, drawer) {
-        if (this.getEffectDrawer(effect)) {
-            return;
-        }
-        this.effectDrawers.set(effect, drawer);
+        this.initializers.effects.set(effect, drawer);
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
-    addInteractor(name, interactorInitializer) {
-        this._initializers.interactors.set(name, interactorInitializer);
-    }
     addMover(name, moverInitializer) {
-        this._initializers.movers.set(name, moverInitializer);
+        this.initializers.movers.set(name, moverInitializer);
     }
     addParticleUpdater(name, updaterInitializer) {
-        this._initializers.updaters.set(name, updaterInitializer);
+        this.initializers.updaters.set(name, updaterInitializer);
     }
     addPathGenerator(name, generator) {
-        if (this.getPathGenerator(name)) {
-            return;
-        }
-        this.pathGenerators.set(name, generator);
+        this.initializers.pathGenerators.set(name, generator);
     }
     addPlugin(plugin) {
         if (this.getPlugin(plugin.id)) {
@@ -147,12 +130,9 @@ export class Engine {
         }
         this.presets.set(preset, options);
     }
-    addShape(drawer) {
-        for (const validType of drawer.validTypes) {
-            if (this.getShapeDrawer(validType)) {
-                continue;
-            }
-            this.shapeDrawers.set(validType, drawer);
+    addShape(shapes, drawer) {
+        for (const shape of shapes) {
+            this.initializers.shapes.set(shape, drawer);
         }
     }
     checkVersion(pluginVersion) {
@@ -162,42 +142,25 @@ export class Engine {
         throw new Error(`The tsParticles version is different from the loaded plugins version. Engine version: ${this.version}. Plugin version: ${pluginVersion}`);
     }
     clearPlugins(container) {
-        this.updaters.delete(container);
+        this.effectDrawers.delete(container);
         this.movers.delete(container);
-        this.interactors.delete(container);
+        this.shapeDrawers.delete(container);
+        this.updaters.delete(container);
     }
     dispatchEvent(type, args) {
         this._eventDispatcher.dispatchEvent(type, args);
     }
-    dom() {
-        return this.items;
-    }
-    domItem(index) {
-        return this.item(index);
-    }
-    async getAvailablePlugins(container) {
-        const res = new Map();
-        for (const plugin of this.plugins) {
-            if (plugin.needsPlugin(container.actualOptions)) {
-                res.set(plugin.id, await plugin.getPlugin(container));
-            }
-        }
-        return res;
-    }
     getEasing(name) {
         return this.easingFunctions.get(name) ?? ((value) => value);
     }
-    getEffectDrawer(type) {
-        return this.effectDrawers.get(type);
+    getEffectDrawers(container, force = false) {
+        return getItemMapFromInitializer(container, this.effectDrawers, this.initializers.effects, force);
     }
-    async getInteractors(container, force = false) {
-        return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+    getMovers(container, force = false) {
+        return getItemsFromInitializer(container, this.movers, this.initializers.movers, force);
     }
-    async getMovers(container, force = false) {
-        return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
-    }
-    getPathGenerator(type) {
-        return this.pathGenerators.get(type);
+    getPathGenerators(container, force = false) {
+        return getItemMapFromInitializer(container, this.pathGenerators, this.initializers.pathGenerators, force);
     }
     getPlugin(plugin) {
         return this.plugins.find(t => t.id === plugin);
@@ -205,27 +168,28 @@ export class Engine {
     getPreset(preset) {
         return this.presets.get(preset);
     }
-    getShapeDrawer(type) {
-        return this.shapeDrawers.get(type);
-    }
-    getSupportedEffects() {
-        return this.effectDrawers.keys();
-    }
-    getSupportedShapes() {
-        return this.shapeDrawers.keys();
+    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);
+        return getItemsFromInitializer(container, this.updaters, this.initializers.updaters, force);
     }
     async init() {
-        if (this._initialized) {
+        if (this._initialized || this._isRunningLoaders)
             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);
+            }
         }
-        for (const loadPromise of this._loadPromises) {
-            await loadPromise(this);
+        finally {
+            this._loadPromises.clear();
+            this._isRunningLoaders = false;
+            this._initialized = true;
         }
-        this._loadPromises.clear();
-        this._initialized = true;
     }
     item(index) {
         const { items } = this, item = items[index];
@@ -237,9 +201,7 @@ 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(this, id, currentOptions);
         if (oldIndex >= loadMinIndex) {
             const old = this.item(oldIndex), deleteCount = old ? one : none;
             if (old && !old.destroyed) {
@@ -255,11 +217,6 @@ export class Engine {
         await newItem.start();
         return newItem;
     }
-    loadOptions(options, sourceOptions) {
-        this.plugins.forEach(plugin => {
-            plugin.loadOptions(options, sourceOptions);
-        });
-    }
     loadParticlesOptions(container, options, ...sourceOptions) {
         const updaters = this.updaters.get(container);
         if (!updaters) {
@@ -273,24 +230,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);
     }
-    setOnClickHandler(callback) {
-        const { items } = this;
-        if (!items.length) {
-            throw new Error("Click handlers can only be set after calling tsParticles.load()");
-        }
-        items.forEach(item => {
-            item.addClickHandler(callback);
-        });
+    async _runLoader(loader, executed, allLoaders) {
+        if (executed.has(loader))
+            return;
+        executed.add(loader);
+        allLoaders.add(loader);
+        await loader(this);
     }
 }