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

package/esm/Core/Container.js

@@ -1,5 +1,5 @@
 import { animate, cancelAnimation, getRangeValue } from "../Utils/MathUtils.js";
-import { clickRadius, defaultFps, defaultFpsLimit, millisecondsToSeconds, minCoordinate, minFpsLimit, removeDeleteCount, removeMinIndex, touchEndLengthOffset, } from "./Utils/Constants.js";
+import { defaultFps, defaultFpsLimit, millisecondsToSeconds, minFpsLimit, removeDeleteCount, removeMinIndex, } from "./Utils/Constants.js";
 import { Canvas } from "./Canvas.js";
 import { EventListeners } from "./Utils/EventListeners.js";
 import { EventType } from "../Enums/Types/EventType.js";
@@ -8,7 +8,6 @@ import { Particles } from "./Particles.js";
 import { Retina } from "./Retina.js";
 import { getLogger } from "../Utils/LogUtils.js";
 import { loadOptions } from "../Utils/OptionsUtils.js";
-import { safeIntersectionObserver } from "../Utils/Utils.js";
 function guardCheck(container) {
     return !container.destroyed;
 }
@@ -24,22 +23,6 @@ function loadContainerOptions(engine, container, ...sourceOptionsArr) {
 export class Container {
     constructor(engine, id, sourceOptions) {
         this._delta = { value: 0, factor: 0 };
-        this._intersectionManager = entries => {
-            if (!guardCheck(this) || !this.actualOptions.pauseOnOutsideViewport) {
-                return;
-            }
-            for (const entry of entries) {
-                if (entry.target !== this.interactivity.element) {
-                    continue;
-                }
-                if (entry.isIntersecting) {
-                    this.play();
-                }
-                else {
-                    this.pause();
-                }
-            }
-        };
         this._nextFrame = (timestamp) => {
             try {
                 if (!this._smooth &&
@@ -84,28 +67,18 @@ export class Container {
         this._lastFrameTime = 0;
         this.zLayers = 100;
         this.pageHidden = false;
-        this._clickHandlers = new Map();
         this._sourceOptions = sourceOptions;
         this._initialSourceOptions = sourceOptions;
         this.retina = new Retina(this);
         this.canvas = new Canvas(this, this._engine);
         this.particles = new Particles(this._engine, this);
         this.pathGenerators = new Map();
-        this.interactivity = {
-            mouse: {
-                clicking: false,
-                inside: false,
-            },
-        };
-        this.plugins = new Map();
+        this.plugins = [];
         this.effectDrawers = new Map();
         this.shapeDrawers = new Map();
         this._options = loadContainerOptions(this._engine, this);
         this.actualOptions = loadContainerOptions(this._engine, this);
         this._eventListeners = new EventListeners(this);
-        this._intersectionObserver = safeIntersectionObserver(entries => {
-            this._intersectionManager(entries);
-        });
         this._engine.dispatchEvent(EventType.containerBuilt, { container: this });
     }
     get animationStatus() {
@@ -117,77 +90,6 @@ export class Container {
     get sourceOptions() {
         return this._sourceOptions;
     }
-    addClickHandler(callback) {
-        if (!guardCheck(this)) {
-            return;
-        }
-        const el = this.interactivity.element;
-        if (!el) {
-            return;
-        }
-        const clickOrTouchHandler = (e, pos, radius) => {
-            if (!guardCheck(this)) {
-                return;
-            }
-            const pxRatio = this.retina.pixelRatio, posRetina = {
-                x: pos.x * pxRatio,
-                y: pos.y * pxRatio,
-            }, particles = this.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
-            callback(e, particles);
-        }, clickHandler = (e) => {
-            if (!guardCheck(this)) {
-                return;
-            }
-            const mouseEvent = e, pos = {
-                x: mouseEvent.offsetX || mouseEvent.clientX,
-                y: mouseEvent.offsetY || mouseEvent.clientY,
-            };
-            clickOrTouchHandler(e, pos, clickRadius);
-        }, touchStartHandler = () => {
-            if (!guardCheck(this)) {
-                return;
-            }
-            touched = true;
-            touchMoved = false;
-        }, touchMoveHandler = () => {
-            if (!guardCheck(this)) {
-                return;
-            }
-            touchMoved = true;
-        }, touchEndHandler = (e) => {
-            if (!guardCheck(this)) {
-                return;
-            }
-            if (touched && !touchMoved) {
-                const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - touchEndLengthOffset];
-                if (!lastTouch) {
-                    return;
-                }
-                const element = this.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
-                    x: lastTouch.clientX - (canvasRect ? canvasRect.left : minCoordinate),
-                    y: lastTouch.clientY - (canvasRect ? canvasRect.top : minCoordinate),
-                };
-                clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
-            }
-            touched = false;
-            touchMoved = false;
-        }, touchCancelHandler = () => {
-            if (!guardCheck(this)) {
-                return;
-            }
-            touched = false;
-            touchMoved = false;
-        };
-        let touched = false, touchMoved = false;
-        this._clickHandlers.set("click", clickHandler);
-        this._clickHandlers.set("touchstart", touchStartHandler);
-        this._clickHandlers.set("touchmove", touchMoveHandler);
-        this._clickHandlers.set("touchend", touchEndHandler);
-        this._clickHandlers.set("touchcancel", touchCancelHandler);
-        for (const [key, handler] of this._clickHandlers) {
-            el.addEventListener(key, handler);
-        }
-    }
     addLifeTime(value) {
         this._lifeTime += value;
     }
@@ -201,21 +103,11 @@ export class Container {
     alive() {
         return !this._duration || this._lifeTime <= this._duration;
     }
-    clearClickHandlers() {
-        if (!guardCheck(this)) {
-            return;
-        }
-        for (const [key, handler] of this._clickHandlers) {
-            this.interactivity.element?.removeEventListener(key, handler);
-        }
-        this._clickHandlers.clear();
-    }
     destroy(remove = true) {
         if (!guardCheck(this)) {
             return;
         }
         this.stop();
-        this.clearClickHandlers();
         this.particles.destroy();
         this.canvas.destroy();
         for (const effectDrawer of this.effectDrawers.values()) {
@@ -226,10 +118,14 @@ export class Container {
             shapeDrawer.destroy?.(this);
         }
         this.shapeDrawers.clear();
+        for (const plugin of this.plugins) {
+            plugin.destroy?.();
+        }
+        this.plugins.length = 0;
         this._engine.clearPlugins(this);
         this.destroyed = true;
         if (remove) {
-            const mainArr = this._engine.items, idx = mainArr.findIndex(t => t === this);
+            const mainArr = this._engine.items, idx = mainArr.indexOf(this);
             if (idx >= removeMinIndex) {
                 mainArr.splice(idx, removeDeleteCount);
             }
@@ -253,7 +149,7 @@ export class Container {
         });
     }
     async export(type, options = {}) {
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             if (!plugin.export) {
                 continue;
             }
@@ -266,15 +162,6 @@ export class Container {
         getLogger().error(`Export plugin with type ${type} not found`);
         return undefined;
     }
-    handleClickMode(mode) {
-        if (!guardCheck(this)) {
-            return;
-        }
-        this.particles.handleClickMode(mode);
-        for (const plugin of this.plugins.values()) {
-            plugin.handleClickMode?.(mode);
-        }
-    }
     async init() {
         if (!guardCheck(this)) {
             return;
@@ -293,12 +180,21 @@ export class Container {
                 this.shapeDrawers.set(type, drawer);
             }
         }
+        const allContainerPlugins = new Map();
+        for (const plugin of this._engine.plugins) {
+            const containerPlugin = await plugin.getPlugin(this);
+            if (containerPlugin.preInit) {
+                await containerPlugin.preInit();
+            }
+            allContainerPlugins.set(plugin, containerPlugin);
+        }
         await this.particles.initPlugins();
         this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
         this.actualOptions = loadContainerOptions(this._engine, this, this._options);
-        const availablePlugins = await this._engine.getAvailablePlugins(this);
-        for (const [id, plugin] of availablePlugins) {
-            this.plugins.set(id, plugin);
+        for (const [plugin, containerPlugin] of allContainerPlugins) {
+            if (plugin.needsPlugin(this.actualOptions)) {
+                this.plugins.push(containerPlugin);
+            }
         }
         this.retina.init();
         this.canvas.init();
@@ -313,30 +209,23 @@ export class Container {
         this._lifeTime = 0;
         this.fpsLimit = fpsLimit > minFpsLimit ? fpsLimit : defaultFpsLimit;
         this._smooth = smooth;
+        for (const plugin of this.plugins) {
+            await plugin.init?.();
+        }
         for (const drawer of this.effectDrawers.values()) {
             await drawer.init?.(this);
         }
         for (const drawer of this.shapeDrawers.values()) {
             await drawer.init?.(this);
         }
-        for (const plugin of this.plugins.values()) {
-            await plugin.init?.();
-        }
         this._engine.dispatchEvent(EventType.containerInit, { container: this });
         await this.particles.init();
         this.particles.setDensity();
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             plugin.particlesSetup?.();
         }
         this._engine.dispatchEvent(EventType.particlesSetup, { container: this });
     }
-    async loadTheme(name) {
-        if (!guardCheck(this)) {
-            return;
-        }
-        this._currentTheme = name;
-        await this.refresh();
-    }
     pause() {
         if (!guardCheck(this)) {
             return;
@@ -348,7 +237,7 @@ export class Container {
         if (this._paused) {
             return;
         }
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             plugin.pause?.();
         }
         if (!this.pageHidden) {
@@ -369,7 +258,7 @@ export class Container {
             this._paused = false;
         }
         if (needsUpdate) {
-            for (const plugin of this.plugins.values()) {
+            for (const plugin of this.plugins) {
                 if (plugin.play) {
                     plugin.play();
                 }
@@ -404,10 +293,7 @@ export class Container {
         await new Promise(resolve => {
             const start = async () => {
                 this._eventListeners.addListeners();
-                if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
-                    this._intersectionObserver.observe(this.interactivity.element);
-                }
-                for (const plugin of this.plugins.values()) {
+                for (const plugin of this.plugins) {
                     await plugin.start?.();
                 }
                 this._engine.dispatchEvent(EventType.containerStarted, { container: this });
@@ -431,26 +317,20 @@ export class Container {
         this.pause();
         this.particles.clear();
         this.canvas.stop();
-        if (this.interactivity.element instanceof HTMLElement && this._intersectionObserver) {
-            this._intersectionObserver.unobserve(this.interactivity.element);
-        }
-        for (const plugin of this.plugins.values()) {
+        for (const plugin of this.plugins) {
             plugin.stop?.();
         }
-        for (const key of this.plugins.keys()) {
-            this.plugins.delete(key);
-        }
+        this.plugins.length = 0;
         this._sourceOptions = this._options;
         this._engine.dispatchEvent(EventType.containerStopped, { container: this });
     }
     updateActualOptions() {
-        this.actualOptions.responsive = [];
-        const newMaxWidth = this.actualOptions.setResponsive(this.canvas.size.width, this.retina.pixelRatio, this._options);
-        this.actualOptions.setTheme(this._currentTheme);
-        if (this._responsiveMaxWidth === newMaxWidth) {
-            return false;
+        let refresh = false;
+        for (const plugin of this.plugins) {
+            if (plugin.updateActualOptions) {
+                refresh = plugin.updateActualOptions() || refresh;
+            }
         }
-        this._responsiveMaxWidth = newMaxWidth;
-        return true;
+        return refresh;
     }
 }

package/esm/Core/Engine.js

@@ -1,18 +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 { 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";
 const fullPercent = "100%";
-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;
-}
 async function getDataFromUrl(data) {
     const url = itemFromSingleOrMultiple(data.url, data.index);
     if (!url) {
@@ -49,7 +41,7 @@ const getCanvasFromContainer = (domContainer) => {
     return canvasEl;
 }, getDomContainer = (id, source) => {
     const documentSafe = safeDocument();
-    let domContainer = source ?? document.getElementById(id);
+    let domContainer = source ?? documentSafe.getElementById(id);
     if (domContainer) {
         return domContainer;
     }
@@ -70,11 +62,9 @@ export class Engine {
         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();
@@ -93,7 +83,7 @@ export class Engine {
         return this._domArray;
     }
     get version() {
-        return "4.0.0-alpha.3";
+        return "4.0.0-alpha.4";
     }
     addColorManager(manager) {
         this.colorManagers.set(manager.key, manager);
@@ -118,9 +108,6 @@ export class Engine {
     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);
     }
@@ -162,35 +149,16 @@ export class Engine {
     clearPlugins(container) {
         this.updaters.delete(container);
         this.movers.delete(container);
-        this.interactors.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);
-    }
     async getMovers(container, force = false) {
         return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
     }
@@ -236,8 +204,12 @@ export class Engine {
                     allLoaders.add(loader);
                 }
             };
-            await loader(this);
-            this.register = origRegister;
+            try {
+                await loader(this);
+            }
+            finally {
+                this.register = origRegister;
+            }
             stack.unshift(...inner);
             this._loadPromises.delete(loader);
         }
@@ -257,6 +229,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);
@@ -275,11 +248,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) {
@@ -304,13 +272,4 @@ export class Engine {
     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);
-        });
-    }
 }

package/esm/Core/Particle.js

@@ -3,7 +3,6 @@ import { calcExactPositionOrRandomFromSize, clamp, degToRad, getParticleBaseVelo
 import { decayOffset, defaultAngle, defaultOpacity, defaultRetryCount, defaultTransform, double, half, identity, millisecondsToSeconds, minZ, none, randomColorValue, rollFactor, squareExp, tryCountIncrement, zIndexFactorOffset, } from "./Utils/Constants.js";
 import { deepExtend, getPosition, initParticleNumericAnimationValue, isInArray, itemFromSingleOrMultiple, } from "../Utils/Utils.js";
 import { EventType } from "../Enums/Types/EventType.js";
-import { Interactivity } from "../Options/Classes/Interactivity/Interactivity.js";
 import { MoveDirection } from "../Enums/Directions/MoveDirection.js";
 import { OutMode } from "../Enums/Modes/OutMode.js";
 import { ParticleOutType } from "../Enums/Types/ParticleOutType.js";
@@ -53,7 +52,7 @@ export class Particle {
         };
         this._calcPosition = (position, zIndex) => {
             let tryCount = defaultRetryCount, posVec = position ? Vector3d.create(position.x, position.y, zIndex) : undefined;
-            const container = this.container, plugins = Array.from(container.plugins.values()), outModes = this.options.move.outModes, radius = this.getRadius(), canvasSize = container.canvas.size, abortController = new AbortController(), { signal } = abortController;
+            const container = this.container, plugins = Array.from(container.plugins), 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);
@@ -173,7 +172,7 @@ export class Particle {
         this.slow.inRange = false;
         const container = this.container, pathGenerator = this.pathGenerator, shapeDrawer = this.shape ? container.shapeDrawers.get(this.shape) : undefined;
         shapeDrawer?.particleDestroy?.(this);
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             plugin.particleDestroyed?.(this, override);
         }
         for (const updater of container.particles.updaters) {
@@ -189,7 +188,7 @@ export class Particle {
     }
     draw(delta) {
         const container = this.container, canvas = container.canvas;
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             canvas.drawParticlePlugin(plugin, this, delta);
         }
         canvas.drawParticle(this, delta);
@@ -240,7 +239,7 @@ export class Particle {
         return this._cachedTransform;
     }
     init(id, position, overrideOptions, group) {
-        const container = this.container, engine = this._engine;
+        const container = this.container;
         this.id = id;
         this.group = group;
         this.effectClose = true;
@@ -300,10 +299,6 @@ export class Particle {
         if (shapeData) {
             particlesOptions.load(shapeData.particles);
         }
-        const interactivity = new Interactivity(engine, container);
-        interactivity.load(container.actualOptions.interactivity);
-        interactivity.load(particlesOptions.interactivity);
-        this.interactivity = interactivity;
         this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
         this.effectClose = effectData?.close ?? particlesOptions.effect.close;
         this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
@@ -372,7 +367,7 @@ export class Particle {
         }
         effectDrawer?.particleInit?.(container, this);
         shapeDrawer?.particleInit?.(container, this);
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             plugin.particleCreated?.(this);
         }
     }