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

package/esm/Core/Particles.js

@@ -1,13 +1,11 @@
 import { countOffset, defaultDensityFactor, defaultRemoveQuantity, deleteCount, lengthOffset, minCount, minIndex, minLimit, posOffset, qTreeCapacity, sizeFactor, squareExp, } from "./Utils/Constants.js";
 import { EventType } from "../Enums/Types/EventType.js";
-import { InteractionManager } from "./Utils/InteractionManager.js";
 import { LimitMode } from "../Enums/Modes/LimitMode.js";
 import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Ranges.js";
 import { getLogger } from "../Utils/LogUtils.js";
-import { getPosition } from "../Utils/Utils.js";
 import { loadParticlesOptions } from "../Utils/OptionsUtils.js";
 const qTreeRectangle = (canvasSize) => {
     const { height, width } = canvasSize;
@@ -18,7 +16,7 @@ export class Particles {
         this._addToPool = (...particles) => {
             this._pool.push(...particles);
         };
-        this._applyDensity = (options, manualCount, group, groupOptions) => {
+        this._applyDensity = (options, pluginsCount, group, groupOptions) => {
             const numberOptions = options.number;
             if (!numberOptions.density.enable) {
                 if (group === undefined) {
@@ -29,7 +27,7 @@ export class Particles {
                 }
                 return;
             }
-            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + manualCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
+            const densityFactor = this._initDensityFactor(numberOptions.density), optParticlesNumber = numberOptions.value, optParticlesLimit = numberOptions.limit.value > minLimit ? numberOptions.limit.value : optParticlesNumber, particlesNumber = Math.min(optParticlesNumber, optParticlesLimit) * densityFactor + pluginsCount, particlesCount = Math.min(this.count, this.filter(t => t.group === group).length);
             if (group === undefined) {
                 this._limit = numberOptions.limit.value * densityFactor;
             }
@@ -109,7 +107,6 @@ export class Particles {
         this._groupLimits = new Map();
         this._needsSort = false;
         this._lastZIndex = 0;
-        this._interactionManager = new InteractionManager(engine, container);
         this._pluginsInitialized = false;
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
@@ -119,10 +116,6 @@ export class Particles {
     get count() {
         return this._array.length;
     }
-    addManualParticles() {
-        const container = this._container, options = container.actualOptions;
-        options.manualParticles.forEach(p => this.addParticle(p.position ? getPosition(p.position, container.canvas.size) : undefined, p.options));
-    }
     addParticle(position, overrideOptions, group, initializer) {
         const limitMode = this._container.actualOptions.particles.number.limit.mode, limit = group === undefined ? this._limit : (this._groupLimits.get(group) ?? this._limit), currentCount = this.count;
         if (limit > minLimit) {
@@ -168,22 +161,23 @@ export class Particles {
     get(index) {
         return this._array[index];
     }
-    handleClickMode(mode) {
-        this._interactionManager.handleClickMode(mode);
-    }
     async init() {
         const container = this._container, options = container.actualOptions;
         this._lastZIndex = 0;
         this._needsSort = false;
+        for (const plugin of container.plugins) {
+            if (plugin.redrawInit) {
+                await plugin.redrawInit();
+            }
+        }
         await this.initPlugins();
         let handled = false;
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             handled = plugin.particlesInitialization?.() ?? handled;
             if (handled) {
                 break;
             }
         }
-        this.addManualParticles();
         if (!handled) {
             const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
@@ -207,14 +201,13 @@ export class Particles {
         const container = this._container;
         this.movers = await this._engine.getMovers(container, true);
         this.updaters = await this._engine.getUpdaters(container, true);
-        await this._interactionManager.init();
         for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.init(container);
         }
     }
-    push(nb, mouse, overrideOptions, group) {
+    push(nb, position, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
-            this.addParticle(mouse?.position, overrideOptions, group);
+            this.addParticle(position, overrideOptions, group);
         }
     }
     async redraw() {
@@ -241,16 +234,22 @@ export class Particles {
         this.removeAt(minIndex, quantity, group);
     }
     setDensity() {
-        const options = this._container.actualOptions, groups = options.particles.groups, manualCount = options.manualParticles.length;
+        const options = this._container.actualOptions, groups = options.particles.groups;
+        let pluginsCount = 0;
+        for (const plugin of this._container.plugins) {
+            if (plugin.particlesDensityCount) {
+                pluginsCount += plugin.particlesDensityCount();
+            }
+        }
         for (const group in groups) {
             const groupData = groups[group];
             if (!groupData) {
                 continue;
             }
             const groupDataOptions = loadParticlesOptions(this._engine, this._container, groupData);
-            this._applyDensity(groupDataOptions, manualCount, group);
+            this._applyDensity(groupDataOptions, pluginsCount, group);
         }
-        this._applyDensity(options.particles, manualCount);
+        this._applyDensity(options.particles, pluginsCount);
     }
     setLastZIndex(zIndex) {
         this._lastZIndex = zIndex;
@@ -265,7 +264,7 @@ export class Particles {
         for (const pathGenerator of container.pathGenerators.values()) {
             pathGenerator.update();
         }
-        for (const plugin of container.plugins.values()) {
+        for (const plugin of container.plugins) {
             plugin.update?.(delta);
         }
         const resizeFactor = this._resizeFactor;
@@ -277,8 +276,12 @@ export class Particles {
                 particle.initialPosition.y *= resizeFactor.height;
             }
             particle.ignoresResizeRatio = false;
-            this._interactionManager.reset(particle);
-            for (const plugin of this._container.plugins.values()) {
+            for (const plugin of this._container.plugins) {
+                if (plugin.particleReset) {
+                    plugin.particleReset(particle);
+                }
+            }
+            for (const plugin of this._container.plugins) {
                 if (particle.destroyed) {
                     break;
                 }
@@ -309,13 +312,21 @@ export class Particles {
             }
             this._addToPool(...particlesToDelete);
         }
-        this._interactionManager.externalInteract(delta);
+        for (const plugin of container.plugins) {
+            if (plugin.postUpdate) {
+                plugin.postUpdate(delta);
+            }
+        }
         for (const particle of this._array) {
             for (const updater of this.updaters) {
                 updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
-                this._interactionManager.particlesInteract(particle, delta);
+                for (const plugin of container.plugins) {
+                    if (plugin.postParticleUpdate) {
+                        plugin.postParticleUpdate(particle, delta);
+                    }
+                }
             }
         }
         delete this._resizeFactor;

package/esm/Core/Utils/Constants.js

@@ -1,4 +1,4 @@
-export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
+export const generatedAttribute = "generated", resizeEvent = "resize", visibilityChangeEvent = "visibilitychange", percentDenominator = 100, half = 0.5, millisecondsToSeconds = 1000, originPoint = {
     x: 0,
     y: 0,
     z: 0,
@@ -7,4 +7,4 @@ export const generatedAttribute = "generated", mouseDownEvent = "pointerdown", m
     b: 0,
     c: 0,
     d: 1,
-}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, manualCount = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;
+}, randomColorValue = "random", midColorValue = "mid", double = 2, doublePI = Math.PI * double, defaultFps = 60, defaultAlpha = 1, generatedTrue = "true", generatedFalse = "false", canvasTag = "canvas", defaultRetryCount = 0, squareExp = 2, qTreeCapacity = 4, defaultRemoveQuantity = 1, defaultRatio = 1, defaultReduceFactor = 1, subdivideCount = 4, inverseFactorNumerator = 1.0, rgbMax = 255, hMax = 360, sMax = 100, lMax = 100, hMin = 0, sMin = 0, hPhase = 60, empty = 0, quarter = 0.25, threeQuarter = half + quarter, minVelocity = 0, defaultTransformValue = 1, minimumSize = 0, minimumLength = 0, zIndexFactorOffset = 1, defaultOpacity = 1, clickRadius = 1, touchEndLengthOffset = 1, minCoordinate = 0, removeDeleteCount = 1, removeMinIndex = 0, defaultFpsLimit = 120, minFpsLimit = 0, canvasFirstIndex = 0, loadRandomFactor = 10000, loadMinIndex = 0, one = 1, none = 0, decayOffset = 1, tryCountIncrement = 1, minRetries = 0, rollFactor = 1, minZ = 0, defaultRadius = 0, posOffset = -quarter, sizeFactor = 1.5, minLimit = 0, countOffset = 1, minCount = 0, minIndex = 0, lengthOffset = 1, defaultDensityFactor = 1, deleteCount = 1, touchDelay = 500, manualDefaultPosition = 50, defaultAngle = 0, identity = 1, minStrokeWidth = 0, lFactor = 1, lMin = 0, triple = 3, sextuple = 6, sNormalizedOffset = 1, phaseNumerator = 1, defaultRgbMin = 0, defaultVelocity = 0, defaultLoops = 0, defaultTime = 0;

package/esm/Core/Utils/EventListeners.js

@@ -1,56 +1,10 @@
-import { double, lengthOffset, millisecondsToSeconds, mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, resizeEvent, touchCancelEvent, touchDelay, touchEndEvent, touchMoveEvent, touchStartEvent, visibilityChangeEvent, } from "./Constants.js";
-import { executeOnSingleOrMultiple, safeDocument, safeMatchMedia } from "../../Utils/Utils.js";
-import { InteractivityDetect } from "../../Enums/InteractivityDetect.js";
-import { isBoolean } from "../../Utils/TypeUtils.js";
-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);
-    }
-}
+import { manageListener, safeDocument } from "../../Utils/Utils.js";
+import { millisecondsToSeconds, resizeEvent, visibilityChangeEvent } from "./Constants.js";
 export class EventListeners {
     constructor(container) {
         this.container = container;
-        this._canPush = true;
-        this._doMouseTouchClick = e => {
-            const container = this.container, options = container.actualOptions;
-            if (this._canPush) {
-                const mouseInteractivity = container.interactivity.mouse, mousePos = mouseInteractivity.position;
-                if (!mousePos) {
-                    return;
-                }
-                mouseInteractivity.clickPosition = { ...mousePos };
-                mouseInteractivity.clickTime = Date.now();
-                const onClick = options.interactivity.events.onClick;
-                executeOnSingleOrMultiple(onClick.mode, mode => {
-                    this.container.handleClickMode(mode);
-                });
-            }
-            if (e.type === "touchend") {
-                setTimeout(() => {
-                    this._mouseTouchFinish();
-                }, touchDelay);
-            }
-        };
-        this._handleThemeChange = (e) => {
-            const mediaEvent = e, container = this.container, options = container.options, defaultThemes = options.defaultThemes, themeName = mediaEvent.matches ? defaultThemes.dark : defaultThemes.light, theme = options.themes.find(theme => theme.name === themeName);
-            if (theme?.default.auto) {
-                void container.loadTheme(themeName);
-            }
-        };
         this._handleVisibilityChange = () => {
             const container = this.container, options = container.actualOptions;
-            this._mouseTouchFinish();
             if (!options.pauseOnBlur) {
                 return;
             }
@@ -77,60 +31,16 @@ export class EventListeners {
                 const canvas = this.container.canvas;
                 await canvas.windowResize();
             };
-            this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.interactivity.events.resize.delay * millisecondsToSeconds);
-        };
-        this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
-            const handlers = this._handlers, container = this.container, options = container.actualOptions, interactivityEl = container.interactivity.element;
-            if (!interactivityEl) {
-                return;
-            }
-            const html = interactivityEl, canvas = container.canvas;
-            canvas.setPointerEvents(html === canvas.element ? "initial" : "none");
-            if (!(options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable)) {
-                return;
-            }
-            manageListener(interactivityEl, mouseMoveEvent, handlers.mouseMove, add);
-            manageListener(interactivityEl, touchStartEvent, handlers.touchStart, add);
-            manageListener(interactivityEl, touchMoveEvent, handlers.touchMove, add);
-            if (options.interactivity.events.onClick.enable) {
-                manageListener(interactivityEl, touchEndEvent, handlers.touchEndClick, add);
-                manageListener(interactivityEl, mouseUpEvent, handlers.mouseUp, add);
-                manageListener(interactivityEl, mouseDownEvent, handlers.mouseDown, add);
-            }
-            else {
-                manageListener(interactivityEl, touchEndEvent, handlers.touchEnd, add);
-            }
-            manageListener(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
-            manageListener(interactivityEl, touchCancelEvent, handlers.touchCancel, add);
+            this._resizeTimeout = setTimeout(() => void handleResize(), this.container.actualOptions.resize.delay * millisecondsToSeconds);
         };
         this._manageListeners = add => {
-            const handlers = this._handlers, container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn, canvasEl = container.canvas.element;
-            let mouseLeaveTmpEvent = mouseLeaveEvent;
-            if (detectType === InteractivityDetect.window) {
-                container.interactivity.element = window;
-                mouseLeaveTmpEvent = mouseOutEvent;
-            }
-            else if (detectType === InteractivityDetect.parent && canvasEl) {
-                container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
-            }
-            else {
-                container.interactivity.element = canvasEl;
-            }
-            this._manageMediaMatch(add);
+            const handlers = this._handlers;
             this._manageResize(add);
-            this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
             manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
         };
-        this._manageMediaMatch = add => {
-            const handlers = this._handlers;
-            if (!this._matchMedia) {
-                return;
-            }
-            manageListener(this._matchMedia, "change", handlers.themeChange, add);
-        };
         this._manageResize = add => {
             const handlers = this._handlers, container = this.container, options = container.actualOptions;
-            if (!options.interactivity.events.resize.enable) {
+            if (!options.resize.enable) {
                 return;
             }
             if (typeof ResizeObserver === "undefined") {
@@ -156,165 +66,10 @@ export class EventListeners {
                 this._resizeObserver.observe(canvasEl);
             }
         };
-        this._mouseDown = () => {
-            const { interactivity } = this.container, { mouse } = interactivity;
-            mouse.clicking = true;
-            mouse.downPosition = mouse.position;
-        };
-        this._mouseTouchClick = e => {
-            const container = this.container, options = container.actualOptions, { mouse } = container.interactivity;
-            mouse.inside = true;
-            let handled = false;
-            const mousePosition = mouse.position;
-            if (!mousePosition || !options.interactivity.events.onClick.enable) {
-                return;
-            }
-            for (const plugin of container.plugins.values()) {
-                if (!plugin.clickPositionValid) {
-                    continue;
-                }
-                handled = plugin.clickPositionValid(mousePosition);
-                if (handled) {
-                    break;
-                }
-            }
-            if (!handled) {
-                this._doMouseTouchClick(e);
-            }
-            mouse.clicking = false;
-        };
-        this._mouseTouchFinish = () => {
-            const { interactivity } = this.container, { mouse } = interactivity;
-            delete mouse.position;
-            delete mouse.clickPosition;
-            delete mouse.downPosition;
-            interactivity.status = mouseLeaveEvent;
-            mouse.inside = false;
-            mouse.clicking = false;
-        };
-        this._mouseTouchMove = e => {
-            const container = this.container, options = container.actualOptions, interactivity = container.interactivity, canvasEl = container.canvas.element;
-            if (!interactivity.element) {
-                return;
-            }
-            interactivity.mouse.inside = true;
-            let pos;
-            if (e.type.startsWith("pointer")) {
-                this._canPush = true;
-                const mouseEvent = e;
-                if (interactivity.element === window) {
-                    if (canvasEl) {
-                        const clientRect = canvasEl.getBoundingClientRect();
-                        pos = {
-                            x: mouseEvent.clientX - clientRect.left,
-                            y: mouseEvent.clientY - clientRect.top,
-                        };
-                    }
-                }
-                else if (options.interactivity.detectsOn === InteractivityDetect.parent) {
-                    const source = mouseEvent.target, target = mouseEvent.currentTarget;
-                    if (canvasEl) {
-                        const sourceRect = source.getBoundingClientRect(), targetRect = target.getBoundingClientRect(), canvasRect = canvasEl.getBoundingClientRect();
-                        pos = {
-                            x: mouseEvent.offsetX + double * sourceRect.left - (targetRect.left + canvasRect.left),
-                            y: mouseEvent.offsetY + double * sourceRect.top - (targetRect.top + canvasRect.top),
-                        };
-                    }
-                    else {
-                        pos = {
-                            x: mouseEvent.offsetX,
-                            y: mouseEvent.offsetY,
-                        };
-                    }
-                }
-                else if (mouseEvent.target === canvasEl) {
-                    pos = {
-                        x: mouseEvent.offsetX,
-                        y: mouseEvent.offsetY,
-                    };
-                }
-            }
-            else {
-                this._canPush = e.type !== "touchmove";
-                if (canvasEl) {
-                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - lengthOffset], canvasRect = canvasEl.getBoundingClientRect();
-                    if (!lastTouch) {
-                        return;
-                    }
-                    pos = {
-                        x: lastTouch.clientX - canvasRect.left,
-                        y: lastTouch.clientY - canvasRect.top,
-                    };
-                }
-            }
-            const pxRatio = container.retina.pixelRatio;
-            if (pos) {
-                pos.x *= pxRatio;
-                pos.y *= pxRatio;
-            }
-            interactivity.mouse.position = pos;
-            interactivity.status = mouseMoveEvent;
-        };
-        this._touchEnd = e => {
-            const evt = e, touches = Array.from(evt.changedTouches);
-            for (const touch of touches) {
-                this._touches.delete(touch.identifier);
-            }
-            this._mouseTouchFinish();
-        };
-        this._touchEndClick = e => {
-            const evt = e, touches = Array.from(evt.changedTouches);
-            for (const touch of touches) {
-                this._touches.delete(touch.identifier);
-            }
-            this._mouseTouchClick(e);
-        };
-        this._touchStart = e => {
-            const evt = e, touches = Array.from(evt.changedTouches);
-            for (const touch of touches) {
-                this._touches.set(touch.identifier, performance.now());
-            }
-            this._mouseTouchMove(e);
-        };
-        this._matchMedia = safeMatchMedia("(prefers-color-scheme: dark)");
-        this._touches = new Map();
         this._handlers = {
-            mouseDown: () => {
-                this._mouseDown();
-            },
-            mouseLeave: () => {
-                this._mouseTouchFinish();
-            },
-            mouseMove: (e) => {
-                this._mouseTouchMove(e);
-            },
-            mouseUp: (e) => {
-                this._mouseTouchClick(e);
-            },
-            touchStart: (e) => {
-                this._touchStart(e);
-            },
-            touchMove: (e) => {
-                this._mouseTouchMove(e);
-            },
-            touchEnd: (e) => {
-                this._touchEnd(e);
-            },
-            touchCancel: (e) => {
-                this._touchEnd(e);
-            },
-            touchEndClick: (e) => {
-                this._touchEndClick(e);
-            },
             visibilityChange: () => {
                 this._handleVisibilityChange();
             },
-            themeChange: (e) => {
-                this._handleThemeChange(e);
-            },
-            oldThemeChange: (e) => {
-                this._handleThemeChange(e);
-            },
             resize: () => {
                 this._handleWindowResize();
             },

package/esm/Options/Classes/Options.js

@@ -1,21 +1,12 @@
-import { deepExtend, executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
+import { deepExtend, executeOnSingleOrMultiple } from "../../Utils/Utils.js";
 import { isBoolean, isNull } from "../../Utils/TypeUtils.js";
 import { Background } from "./Background/Background.js";
 import { FullScreen } from "./FullScreen/FullScreen.js";
-import { Interactivity } from "./Interactivity/Interactivity.js";
-import { ManualParticle } from "./ManualParticle.js";
-import { Responsive } from "./Responsive.js";
-import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
-import { Theme } from "./Theme/Theme.js";
-import { ThemeMode } from "../../Enums/Modes/ThemeMode.js";
+import { ResizeEvent } from "./ResizeEvent.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class Options {
     constructor(engine, container) {
-        this._findDefaultTheme = mode => {
-            return (this.themes.find(theme => theme.default.value && theme.default.mode === mode) ??
-                this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode.any));
-        };
         this._importPreset = preset => {
             this.load(this._engine.getPreset(preset));
         };
@@ -31,15 +22,12 @@ export class Options {
         this.duration = 0;
         this.fpsLimit = 120;
         this.hdr = true;
-        this.interactivity = new Interactivity(engine, container);
-        this.manualParticles = [];
         this.particles = loadParticlesOptions(this._engine, this._container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
-        this.responsive = [];
+        this.resize = new ResizeEvent();
         this.smooth = false;
         this.style = {};
-        this.themes = [];
         this.zLayers = 100;
     }
     load(data) {
@@ -97,70 +85,14 @@ export class Options {
         else {
             this.fullScreen.load(fullScreen);
         }
-        this.interactivity.load(data.interactivity);
-        if (data.manualParticles) {
-            this.manualParticles = data.manualParticles.map(t => {
-                const tmp = new ManualParticle();
-                tmp.load(t);
-                return tmp;
-            });
-        }
         this.particles.load(data.particles);
+        this.resize.load(data.resize);
         this.style = deepExtend(this.style, data.style);
-        this._engine.loadOptions(this, data);
         if (data.smooth !== undefined) {
             this.smooth = data.smooth;
         }
-        const interactors = this._engine.interactors.get(this._container);
-        if (interactors) {
-            for (const interactor of interactors) {
-                if (interactor.loadOptions) {
-                    interactor.loadOptions(this, data);
-                }
-            }
-        }
-        if (data.responsive !== undefined) {
-            for (const responsive of data.responsive) {
-                const optResponsive = new Responsive();
-                optResponsive.load(responsive);
-                this.responsive.push(optResponsive);
-            }
-        }
-        this.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
-        if (data.themes !== undefined) {
-            for (const theme of data.themes) {
-                const existingTheme = this.themes.find(t => t.name === theme.name);
-                if (existingTheme) {
-                    existingTheme.load(theme);
-                }
-                else {
-                    const optTheme = new Theme();
-                    optTheme.load(theme);
-                    this.themes.push(optTheme);
-                }
-            }
-        }
-        this.defaultThemes.dark = this._findDefaultTheme(ThemeMode.dark)?.name;
-        this.defaultThemes.light = this._findDefaultTheme(ThemeMode.light)?.name;
-    }
-    setResponsive(width, pxRatio, defaultOptions) {
-        this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find(t => t.mode === ResponsiveMode.screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
-        this.load(responsiveOptions?.options);
-        return responsiveOptions?.maxWidth;
-    }
-    setTheme(name) {
-        if (name) {
-            const chosenTheme = this.themes.find(theme => theme.name === name);
-            if (chosenTheme) {
-                this.load(chosenTheme.options);
-            }
-        }
-        else {
-            const mediaMatch = safeMatchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch?.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? ThemeMode.dark : ThemeMode.light);
-            if (defaultTheme) {
-                this.load(defaultTheme.options);
-            }
-        }
+        this._engine.plugins.forEach(plugin => {
+            plugin.loadOptions(this._container, this, data);
+        });
     }
 }

package/esm/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/{browser/Options/Classes/Interactivity/Events → esm/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/esm/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) {