@tsparticles/engine 4.0.0-alpha.8 → 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 { 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,163 +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 {
-    constructor() {
-        this._configs = new Map();
-        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();
-        this._initializers = {
-            movers: new Map(),
-            updaters: 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();
-    }
-    get configs() {
-        const res = {};
-        for (const [name, config] of this._configs) {
-            res[name] = config;
-        }
-        return res;
-    }
+    pluginManager = new PluginManager(this);
+    _domArray = [];
+    _eventDispatcher = new EventDispatcher();
+    _initialized = false;
     get items() {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.8";
-    }
-    addColorManager(manager) {
-        this.colorManagers.set(manager.key, 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) {
-        if (this.getEffectDrawer(effect)) {
-            return;
-        }
-        this.effectDrawers.set(effect, drawer);
+        return "4.0.0-beta.1";
     }
     addEventListener(type, listener) {
         this._eventDispatcher.addEventListener(type, listener);
     }
-    addMover(name, moverInitializer) {
-        this._initializers.movers.set(name, moverInitializer);
-    }
-    addParticleUpdater(name, updaterInitializer) {
-        this._initializers.updaters.set(name, updaterInitializer);
-    }
-    addPathGenerator(name, generator) {
-        if (this.getPathGenerator(name)) {
-            return;
-        }
-        this.pathGenerators.set(name, generator);
-    }
-    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(drawer) {
-        for (const validType of drawer.validTypes) {
-            if (this.getShapeDrawer(validType)) {
-                continue;
-            }
-            this.shapeDrawers.set(validType, 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.updaters.delete(container);
-        this.movers.delete(container);
-    }
     dispatchEvent(type, args) {
         this._eventDispatcher.dispatchEvent(type, args);
     }
-    getEasing(name) {
-        return this.easingFunctions.get(name) ?? ((value) => value);
-    }
-    getEffectDrawer(type) {
-        return this.effectDrawers.get(type);
-    }
-    async getMovers(container, force = false) {
-        return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
-    }
-    getPathGenerator(type) {
-        return this.pathGenerators.get(type);
-    }
-    getPlugin(plugin) {
-        return this.plugins.find(t => t.id === plugin);
-    }
-    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 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];
@@ -213,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) {
@@ -229,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);
-    }
 }