@tsparticles/engine 4.0.0-alpha.1 → 4.0.0-alpha.15

package/umd/Core/Engine.js

@@ -50,14 +50,7 @@ var __importStar = (this && this.__importStar) || (function () {
     const EventType_js_1 = require("../Enums/Types/EventType.js");
     const LogUtils_js_1 = require("../Utils/LogUtils.js");
     const MathUtils_js_1 = require("../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 = (0, Utils_js_1.itemFromSingleOrMultiple)(data.url, data.index);
         if (!url) {
@@ -71,6 +64,7 @@ var __importStar = (this && this.__importStar) || (function () {
         return data.fallback;
     }
     const getCanvasFromContainer = (domContainer) => {
+        const documentSafe = (0, Utils_js_1.safeDocument)();
         let canvasEl;
         if (domContainer instanceof HTMLCanvasElement || domContainer.tagName.toLowerCase() === Constants_js_1.canvasTag) {
             canvasEl = domContainer;
@@ -83,53 +77,51 @@ var __importStar = (this && this.__importStar) || (function () {
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedFalse;
             }
             else {
-                canvasEl = (0, Utils_js_1.safeDocument)().createElement(Constants_js_1.canvasTag);
+                canvasEl = documentSafe.createElement(Constants_js_1.canvasTag);
                 canvasEl.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.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 ?? (0, Utils_js_1.safeDocument)().getElementById(id);
+        const documentSafe = (0, Utils_js_1.safeDocument)();
+        let domContainer = source ?? documentSafe.getElementById(id);
         if (domContainer) {
             return domContainer;
         }
-        domContainer = (0, Utils_js_1.safeDocument)().createElement("div");
+        domContainer = documentSafe.createElement("div");
         domContainer.id = id;
         domContainer.dataset[Constants_js_1.generatedAttribute] = Constants_js_1.generatedTrue;
-        (0, Utils_js_1.safeDocument)().body.append(domContainer);
+        documentSafe.body.append(domContainer);
         return domContainer;
     };
     class Engine {
-        constructor() {
-            this._configs = new Map();
-            this._domArray = [];
-            this._eventDispatcher = new EventDispatcher_js_1.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_js_1.EventDispatcher();
+        _executedSet = new Set();
+        _initialized = false;
+        _isRunningLoaders = false;
+        _loadPromises = new Set();
         get configs() {
             const res = {};
             for (const [name, config] of this._configs) {
@@ -141,10 +133,10 @@ var __importStar = (this && this.__importStar) || (function () {
             return this._domArray;
         }
         get version() {
-            return "4.0.0-alpha.1";
+            return "4.0.0-alpha.15";
         }
-        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";
@@ -158,28 +150,19 @@ var __importStar = (this && this.__importStar) || (function () {
             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)) {
@@ -193,12 +176,9 @@ var __importStar = (this && this.__importStar) || (function () {
             }
             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) {
@@ -208,42 +188,25 @@ var __importStar = (this && this.__importStar) || (function () {
             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);
-        }
-        async getInteractors(container, force = false) {
-            return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+        getEffectDrawers(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.effectDrawers, this.initializers.effects, force);
         }
-        async getMovers(container, force = false) {
-            return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+        getMovers(container, force = false) {
+            return (0, Utils_js_1.getItemsFromInitializer)(container, this.movers, this.initializers.movers, force);
         }
-        getPathGenerator(type) {
-            return this.pathGenerators.get(type);
+        getPathGenerators(container, force = false) {
+            return (0, Utils_js_1.getItemMapFromInitializer)(container, this.pathGenerators, this.initializers.pathGenerators, force);
         }
         getPlugin(plugin) {
             return this.plugins.find(t => t.id === plugin);
@@ -251,27 +214,28 @@ var __importStar = (this && this.__importStar) || (function () {
         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 (0, Utils_js_1.getItemMapFromInitializer)(container, this.shapeDrawers, this.initializers.shapes, force);
         }
         async getUpdaters(container, force = false) {
-            return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+            return (0, Utils_js_1.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];
@@ -283,9 +247,7 @@ var __importStar = (this && this.__importStar) || (function () {
         }
         async load(params) {
             await this.init();
-            const { Container } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Container.js"))) : new Promise((resolve_1, reject_1) => { require(["./Container.js"], resolve_1, reject_1); }).then(__importStar)), id = params.id ??
-                params.element?.id ??
-                `tsparticles${Math.floor((0, MathUtils_js_1.getRandom)() * Constants_js_1.loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
+            const { Container } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Container.js"))) : new Promise((resolve_1, reject_1) => { require(["./Container.js"], resolve_1, reject_1); }).then(__importStar)), id = params.id ?? params.element?.id ?? `tsparticles${Math.floor((0, MathUtils_js_1.getRandom)() * Constants_js_1.loadRandomFactor).toString()}`, { index, url } = params, options = url ? await getDataFromUrl({ fallback: params.options, url, index }) : params.options, currentOptions = (0, Utils_js_1.itemFromSingleOrMultiple)(options, index), { items } = this, oldIndex = items.findIndex(v => v.id.description === id), newItem = new Container(this, id, currentOptions);
             if (oldIndex >= Constants_js_1.loadMinIndex) {
                 const old = this.item(oldIndex), deleteCount = old ? Constants_js_1.one : Constants_js_1.none;
                 if (old && !old.destroyed) {
@@ -301,11 +263,6 @@ var __importStar = (this && this.__importStar) || (function () {
             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) {
@@ -319,25 +276,28 @@ var __importStar = (this && this.__importStar) || (function () {
             }
             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);
         }
     }
     exports.Engine = Engine;