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

package/browser/Options/Classes/Particles/ParticlesOptions.js

@@ -55,9 +55,6 @@ export class ParticlesOptions {
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
-        if (data.interactivity !== undefined) {
-            this.interactivity = deepExtend({}, data.interactivity);
-        }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
             this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
@@ -67,6 +64,11 @@ export class ParticlesOptions {
             });
         }
         if (this._container) {
+            for (const plugin of this._engine.plugins) {
+                if (plugin.loadParticlesOptions) {
+                    plugin.loadParticlesOptions(this._container, this, data);
+                }
+            }
             const updaters = this._engine.updaters.get(this._container);
             if (updaters) {
                 for (const updater of updaters) {
@@ -75,14 +77,6 @@ export class ParticlesOptions {
                     }
                 }
             }
-            const interactors = this._engine.interactors.get(this._container);
-            if (interactors) {
-                for (const interactor of interactors) {
-                    if (interactor.loadParticlesOptions) {
-                        interactor.loadParticlesOptions(this, data);
-                    }
-                }
-            }
         }
     }
 }

package/{esm/Options/Classes/Interactivity/Events → browser/Options/Classes}/ResizeEvent.js

@@ -1,4 +1,4 @@
-import { isNull } from "../../../../Utils/TypeUtils.js";
+import { isNull } from "../../Utils/TypeUtils.js";
 export class ResizeEvent {
     constructor() {
         this.delay = 0.5;

package/browser/Utils/ColorUtils.js

@@ -3,14 +3,16 @@ import { decayOffset, defaultLoops, defaultOpacity, defaultRgbMin, defaultTime,
 import { isArray, isString } from "./TypeUtils.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { itemFromArray } from "./Utils.js";
-const styleCache = new Map(), maxCacheSize = 1000;
+const styleCache = new Map(), maxCacheSize = 1000, firstIndex = 0, rgbFixedPrecision = 2, hslFixedPrecision = 2;
 function getCachedStyle(key, generator) {
     let cached = styleCache.get(key);
     if (!cached) {
         cached = generator();
-        if (styleCache.size < maxCacheSize) {
-            styleCache.set(key, cached);
+        if (styleCache.size >= maxCacheSize) {
+            const keysToDelete = [...styleCache.keys()].slice(firstIndex, maxCacheSize * half);
+            keysToDelete.forEach(k => styleCache.delete(k));
         }
+        styleCache.set(key, cached);
     }
     return cached;
 }
@@ -166,7 +168,7 @@ export function getRandomRgbColor(min) {
     };
 }
 export function getStyleFromRgb(color, hdr, opacity) {
-    const op = opacity ?? defaultOpacity, key = `rgb-${color.r.toString()}-${color.g.toString()}-${color.b.toString()}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    const op = opacity ?? defaultOpacity, key = `rgb-${color.r.toFixed(rgbFixedPrecision)}-${color.g.toFixed(rgbFixedPrecision)}-${color.b.toFixed(rgbFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
     return getCachedStyle(key, () => (hdr ? getHdrStyleFromRgb(color, opacity) : getSdrStyleFromRgb(color, opacity)));
 }
 function getHdrStyleFromRgb(color, opacity) {
@@ -176,7 +178,7 @@ function getSdrStyleFromRgb(color, opacity) {
     return `rgba(${color.r.toString()}, ${color.g.toString()}, ${color.b.toString()}, ${(opacity ?? defaultOpacity).toString()})`;
 }
 export function getStyleFromHsl(color, hdr, opacity) {
-    const op = opacity ?? defaultOpacity, key = `hsl-${color.h.toString()}-${color.s.toString()}-${color.l.toString()}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
+    const op = opacity ?? defaultOpacity, key = `hsl-${color.h.toFixed(hslFixedPrecision)}-${color.s.toFixed(hslFixedPrecision)}-${color.l.toFixed(hslFixedPrecision)}-${hdr ? "hdr" : "sdr"}-${op.toString()}`;
     return getCachedStyle(key, () => (hdr ? getHdrStyleFromHsl(color, opacity) : getSdrStyleFromHsl(color, opacity)));
 }
 function getHdrStyleFromHsl(color, opacity) {

package/browser/Utils/Utils.js

@@ -1,6 +1,6 @@
 import { clamp, collisionVelocity, getDistances, getRandom, getRangeMax, getRangeMin, getRangeValue, randomInRangeValue, } from "./MathUtils.js";
 import { half, millisecondsToSeconds, percentDenominator } from "../Core/Utils/Constants.js";
-import { isArray, isNull, isObject } from "./TypeUtils.js";
+import { isArray, isBoolean, isNull, isObject } from "./TypeUtils.js";
 import { AnimationMode } from "../Enums/Modes/AnimationMode.js";
 import { AnimationStatus } from "../Enums/AnimationStatus.js";
 import { DestroyType } from "../Enums/Types/DestroyType.js";
@@ -21,12 +21,6 @@ function memoize(fn) {
         return result;
     };
 }
-function checkSelector(element, selectors) {
-    const res = executeOnSingleOrMultiple(selectors, selector => {
-        return element.matches(selector);
-    });
-    return isArray(res) ? res.some(t => t) : res;
-}
 export function hasMatchMedia() {
     return typeof matchMedia !== "undefined";
 }
@@ -104,11 +98,15 @@ export function deepExtend(destination, ...sources) {
             continue;
         }
         const sourceIsArray = Array.isArray(source);
-        if (sourceIsArray && (isObject(destination) || !destination || !Array.isArray(destination))) {
-            destination = [];
+        if (sourceIsArray) {
+            if (!Array.isArray(destination)) {
+                destination = [];
+            }
         }
-        else if (!sourceIsArray && (isObject(destination) || !destination || Array.isArray(destination))) {
-            destination = {};
+        else {
+            if (!isObject(destination) || Array.isArray(destination)) {
+                destination = {};
+            }
         }
         for (const key in source) {
             if (key === "__proto__") {
@@ -123,31 +121,6 @@ export function deepExtend(destination, ...sources) {
     }
     return destination;
 }
-export function isDivModeEnabled(mode, divs) {
-    return !!findItemFromSingleOrMultiple(divs, t => t.enable && isInArray(mode, t.mode));
-}
-export function divModeExecute(mode, divs, callback) {
-    executeOnSingleOrMultiple(divs, div => {
-        const divMode = div.mode, divEnabled = div.enable;
-        if (divEnabled && isInArray(mode, divMode)) {
-            singleDivModeExecute(div, callback);
-        }
-    });
-}
-export function singleDivModeExecute(div, callback) {
-    const selectors = div.selectors;
-    executeOnSingleOrMultiple(selectors, selector => {
-        callback(selector, div);
-    });
-}
-export function divMode(divs, element) {
-    if (!element || !divs) {
-        return;
-    }
-    return findItemFromSingleOrMultiple(divs, div => {
-        return checkSelector(element, div.selectors);
-    });
-}
 export function circleBounceDataFromParticle(p) {
     return {
         position: p.getPosition(),
@@ -368,3 +341,27 @@ function computeFullScreenStyle(zIndex) {
     return fullScreenStyle;
 }
 export const getFullScreenStyle = memoize(computeFullScreenStyle);
+export function manageListener(element, event, handler, add, options) {
+    if (add) {
+        let addOptions = { passive: true };
+        if (isBoolean(options)) {
+            addOptions.capture = options;
+        }
+        else if (options !== undefined) {
+            addOptions = options;
+        }
+        element.addEventListener(event, handler, addOptions);
+    }
+    else {
+        const removeOptions = options;
+        element.removeEventListener(event, handler, removeOptions);
+    }
+}
+export 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;
+}

package/browser/exports.js

@@ -1,6 +1,4 @@
 export * from "./Core/Utils/Constants.js";
-export * from "./Core/Utils/ExternalInteractorBase.js";
-export * from "./Core/Utils/ParticlesInteractorBase.js";
 export * from "./Core/Utils/Point.js";
 export * from "./Core/Utils/Ranges.js";
 export * from "./Core/Utils/Vectors.js";
@@ -11,36 +9,20 @@ export * from "./Enums/Modes/AnimationMode.js";
 export * from "./Enums/Modes/LimitMode.js";
 export * from "./Enums/Modes/OutMode.js";
 export * from "./Enums/Modes/PixelMode.js";
-export * from "./Enums/Modes/ThemeMode.js";
-export * from "./Enums/Modes/ResponsiveMode.js";
 export * from "./Enums/Types/AlterType.js";
 export * from "./Enums/Types/DestroyType.js";
 export * from "./Enums/Types/GradientType.js";
-export * from "./Enums/Types/InteractorType.js";
 export * from "./Enums/Types/ParticleOutType.js";
 export * from "./Enums/Types/StartValueType.js";
-export * from "./Enums/Types/DivType.js";
 export * from "./Enums/Types/EasingType.js";
 export * from "./Enums/Types/EventType.js";
 export * from "./Enums/AnimationStatus.js";
-export * from "./Enums/InteractivityDetect.js";
 export * from "./Options/Classes/AnimatableColor.js";
 export * from "./Options/Classes/AnimationOptions.js";
 export * from "./Options/Classes/Background/Background.js";
 export * from "./Options/Classes/ColorAnimation.js";
 export * from "./Options/Classes/FullScreen/FullScreen.js";
 export * from "./Options/Classes/HslAnimation.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/ClickEvent.js";
-export * from "./Options/Classes/Interactivity/Events/DivEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Events.js";
-export * from "./Options/Classes/Interactivity/Events/HoverEvent.js";
-export * from "./Options/Classes/Interactivity/Events/Parallax.js";
-export * from "./Options/Classes/Interactivity/Events/ResizeEvent.js";
-export * from "./Options/Classes/Interactivity/Interactivity.js";
-export * from "./Options/Classes/Interactivity/Modes/Modes.js";
-export * from "./Options/Classes/ManualParticle.js";
 export * from "./Options/Classes/Options.js";
 export * from "./Options/Classes/OptionsColor.js";
 export * from "./Options/Classes/Particles/Bounce/ParticlesBounce.js";
@@ -64,9 +46,7 @@ export * from "./Options/Classes/Particles/Shape/Shape.js";
 export * from "./Options/Classes/Particles/Size/Size.js";
 export * from "./Options/Classes/Particles/Size/SizeAnimation.js";
 export * from "./Options/Classes/Particles/ZIndex/ZIndex.js";
-export * from "./Options/Classes/Responsive.js";
-export * from "./Options/Classes/Theme/Theme.js";
-export * from "./Options/Classes/Theme/ThemeDefault.js";
+export * from "./Options/Classes/ResizeEvent.js";
 export * from "./Options/Classes/ValueWithRandom.js";
 export * from "./Utils/CanvasUtils.js";
 export * from "./Utils/ColorUtils.js";

package/cjs/Core/Canvas.js

@@ -184,7 +184,7 @@ export class Canvas {
     }
     clear() {
         let pluginHandled = false;
-        for (const plugin of this.container.plugins.values()) {
+        for (const plugin of this.container.plugins) {
             if (!pluginHandled && plugin.canvasClear) {
                 pluginHandled = plugin.canvasClear();
             }
@@ -322,7 +322,7 @@ export class Canvas {
     }
     initPlugins() {
         this._resizePlugins = [];
-        for (const plugin of this.container.plugins.values()) {
+        for (const plugin of this.container.plugins) {
             if (plugin.resize) {
                 this._resizePlugins.push(plugin);
             }
@@ -380,7 +380,7 @@ export class Canvas {
     }
     paint() {
         let handled = false;
-        for (const plugin of this.container.plugins.values()) {
+        for (const plugin of this.container.plugins) {
             if (handled) {
                 break;
             }

package/cjs/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;
     }
 }