tsparticles 1.40.2 → 1.41.0

package/umd/Core/Utils/EventListeners.d.ts

@@ -0,0 +1,33 @@
+import type { Container } from "../Container";
+export declare class EventListeners {
+    private readonly container;
+    private readonly mouseMoveHandler;
+    private readonly touchStartHandler;
+    private readonly touchMoveHandler;
+    private readonly touchEndHandler;
+    private readonly mouseLeaveHandler;
+    private readonly touchCancelHandler;
+    private readonly touchEndClickHandler;
+    private readonly mouseDownHandler;
+    private readonly mouseUpHandler;
+    private readonly visibilityChangeHandler;
+    private readonly themeChangeHandler;
+    private readonly oldThemeChangeHandler;
+    private readonly resizeHandler;
+    private canPush;
+    private resizeTimeout?;
+    private resizeObserver?;
+    constructor(container: Container);
+    addListeners(): void;
+    removeListeners(): void;
+    private manageListeners;
+    private handleWindowResize;
+    private handleVisibilityChange;
+    private mouseDown;
+    private mouseTouchMove;
+    private mouseTouchFinish;
+    private mouseTouchClick;
+    private doMouseTouchClick;
+    private handleThemeChange;
+    private handleClickMode;
+}

package/umd/Core/Utils/EventListeners.js

@@ -0,0 +1,383 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "../../Utils", "./Constants"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.EventListeners = void 0;
+    const Utils_1 = require("../../Utils");
+    const Constants_1 = require("./Constants");
+    function manageListener(element, event, handler, add, options) {
+        if (add) {
+            let addOptions = { passive: true };
+            if (typeof options === "boolean") {
+                addOptions.capture = options;
+            }
+            else if (options !== undefined) {
+                addOptions = options;
+            }
+            element.addEventListener(event, handler, addOptions);
+        }
+        else {
+            const removeOptions = options;
+            element.removeEventListener(event, handler, removeOptions);
+        }
+    }
+    class EventListeners {
+        constructor(container) {
+            this.container = container;
+            this.canPush = true;
+            this.mouseMoveHandler = (e) => this.mouseTouchMove(e);
+            this.touchStartHandler = (e) => this.mouseTouchMove(e);
+            this.touchMoveHandler = (e) => this.mouseTouchMove(e);
+            this.touchEndHandler = () => this.mouseTouchFinish();
+            this.mouseLeaveHandler = () => this.mouseTouchFinish();
+            this.touchCancelHandler = () => this.mouseTouchFinish();
+            this.touchEndClickHandler = (e) => this.mouseTouchClick(e);
+            this.mouseUpHandler = (e) => this.mouseTouchClick(e);
+            this.mouseDownHandler = () => this.mouseDown();
+            this.visibilityChangeHandler = () => this.handleVisibilityChange();
+            this.themeChangeHandler = (e) => this.handleThemeChange(e);
+            this.oldThemeChangeHandler = (e) => this.handleThemeChange(e);
+            this.resizeHandler = () => this.handleWindowResize();
+        }
+        addListeners() {
+            this.manageListeners(true);
+        }
+        removeListeners() {
+            this.manageListeners(false);
+        }
+        manageListeners(add) {
+            var _a;
+            const container = this.container;
+            const options = container.actualOptions;
+            const detectType = options.interactivity.detectsOn;
+            let mouseLeaveEvent = Constants_1.Constants.mouseLeaveEvent;
+            if (detectType === "window") {
+                container.interactivity.element = window;
+                mouseLeaveEvent = Constants_1.Constants.mouseOutEvent;
+            }
+            else if (detectType === "parent" && container.canvas.element) {
+                const canvasEl = container.canvas.element;
+                container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
+            }
+            else {
+                container.interactivity.element = container.canvas.element;
+            }
+            const mediaMatch = !(0, Utils_1.isSsr)() && typeof matchMedia !== "undefined" && matchMedia("(prefers-color-scheme: dark)");
+            if (mediaMatch) {
+                if (mediaMatch.addEventListener !== undefined) {
+                    manageListener(mediaMatch, "change", this.themeChangeHandler, add);
+                }
+                else if (mediaMatch.addListener !== undefined) {
+                    if (add) {
+                        mediaMatch.addListener(this.oldThemeChangeHandler);
+                    }
+                    else {
+                        mediaMatch.removeListener(this.oldThemeChangeHandler);
+                    }
+                }
+            }
+            const interactivityEl = container.interactivity.element;
+            if (!interactivityEl) {
+                return;
+            }
+            const html = interactivityEl;
+            if (options.interactivity.events.onHover.enable || options.interactivity.events.onClick.enable) {
+                manageListener(interactivityEl, Constants_1.Constants.mouseMoveEvent, this.mouseMoveHandler, add);
+                manageListener(interactivityEl, Constants_1.Constants.touchStartEvent, this.touchStartHandler, add);
+                manageListener(interactivityEl, Constants_1.Constants.touchMoveEvent, this.touchMoveHandler, add);
+                if (!options.interactivity.events.onClick.enable) {
+                    manageListener(interactivityEl, Constants_1.Constants.touchEndEvent, this.touchEndHandler, add);
+                }
+                else {
+                    manageListener(interactivityEl, Constants_1.Constants.touchEndEvent, this.touchEndClickHandler, add);
+                    manageListener(interactivityEl, Constants_1.Constants.mouseUpEvent, this.mouseUpHandler, add);
+                    manageListener(interactivityEl, Constants_1.Constants.mouseDownEvent, this.mouseDownHandler, add);
+                }
+                manageListener(interactivityEl, mouseLeaveEvent, this.mouseLeaveHandler, add);
+                manageListener(interactivityEl, Constants_1.Constants.touchCancelEvent, this.touchCancelHandler, add);
+            }
+            if (container.canvas.element) {
+                container.canvas.element.style.pointerEvents = html === container.canvas.element ? "initial" : "none";
+            }
+            if (options.interactivity.events.resize) {
+                if (typeof ResizeObserver !== "undefined") {
+                    if (this.resizeObserver && !add) {
+                        if (container.canvas.element) {
+                            this.resizeObserver.unobserve(container.canvas.element);
+                        }
+                        this.resizeObserver.disconnect();
+                        delete this.resizeObserver;
+                    }
+                    else if (!this.resizeObserver && add && container.canvas.element) {
+                        this.resizeObserver = new ResizeObserver((entries) => {
+                            const entry = entries.find((e) => e.target === container.canvas.element);
+                            if (!entry) {
+                                return;
+                            }
+                            this.handleWindowResize();
+                        });
+                        this.resizeObserver.observe(container.canvas.element);
+                    }
+                }
+                else {
+                    manageListener(window, Constants_1.Constants.resizeEvent, this.resizeHandler, add);
+                }
+            }
+            if (document) {
+                manageListener(document, Constants_1.Constants.visibilityChangeEvent, this.visibilityChangeHandler, add, false);
+            }
+        }
+        handleWindowResize() {
+            if (this.resizeTimeout) {
+                clearTimeout(this.resizeTimeout);
+                delete this.resizeTimeout;
+            }
+            this.resizeTimeout = setTimeout(async () => { var _a; return await ((_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize()); }, 500);
+        }
+        handleVisibilityChange() {
+            const container = this.container;
+            const options = container.actualOptions;
+            this.mouseTouchFinish();
+            if (!options.pauseOnBlur) {
+                return;
+            }
+            if (document === null || document === void 0 ? void 0 : document.hidden) {
+                container.pageHidden = true;
+                container.pause();
+            }
+            else {
+                container.pageHidden = false;
+                if (container.getAnimationStatus()) {
+                    container.play(true);
+                }
+                else {
+                    container.draw(true);
+                }
+            }
+        }
+        mouseDown() {
+            const interactivity = this.container.interactivity;
+            if (interactivity) {
+                const mouse = interactivity.mouse;
+                mouse.clicking = true;
+                mouse.downPosition = mouse.position;
+            }
+        }
+        mouseTouchMove(e) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const container = this.container;
+            const options = container.actualOptions;
+            if (((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element) === undefined) {
+                return;
+            }
+            container.interactivity.mouse.inside = true;
+            let pos;
+            const canvas = container.canvas.element;
+            if (e.type.startsWith("mouse")) {
+                this.canPush = true;
+                const mouseEvent = e;
+                if (container.interactivity.element === window) {
+                    if (canvas) {
+                        const clientRect = canvas.getBoundingClientRect();
+                        pos = {
+                            x: mouseEvent.clientX - clientRect.left,
+                            y: mouseEvent.clientY - clientRect.top,
+                        };
+                    }
+                }
+                else if (options.interactivity.detectsOn === "parent") {
+                    const source = mouseEvent.target;
+                    const target = mouseEvent.currentTarget;
+                    const canvasEl = container.canvas.element;
+                    if (source && target && canvasEl) {
+                        const sourceRect = source.getBoundingClientRect();
+                        const targetRect = target.getBoundingClientRect();
+                        const canvasRect = canvasEl.getBoundingClientRect();
+                        pos = {
+                            x: mouseEvent.offsetX + 2 * sourceRect.left - (targetRect.left + canvasRect.left),
+                            y: mouseEvent.offsetY + 2 * sourceRect.top - (targetRect.top + canvasRect.top),
+                        };
+                    }
+                    else {
+                        pos = {
+                            x: (_b = mouseEvent.offsetX) !== null && _b !== void 0 ? _b : mouseEvent.clientX,
+                            y: (_c = mouseEvent.offsetY) !== null && _c !== void 0 ? _c : mouseEvent.clientY,
+                        };
+                    }
+                }
+                else {
+                    if (mouseEvent.target === container.canvas.element) {
+                        pos = {
+                            x: (_d = mouseEvent.offsetX) !== null && _d !== void 0 ? _d : mouseEvent.clientX,
+                            y: (_e = mouseEvent.offsetY) !== null && _e !== void 0 ? _e : mouseEvent.clientY,
+                        };
+                    }
+                }
+            }
+            else {
+                this.canPush = e.type !== "touchmove";
+                const touchEvent = e;
+                const lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
+                const canvasRect = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect();
+                pos = {
+                    x: lastTouch.clientX - ((_f = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _f !== void 0 ? _f : 0),
+                    y: lastTouch.clientY - ((_g = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _g !== void 0 ? _g : 0),
+                };
+            }
+            const pxRatio = container.retina.pixelRatio;
+            if (pos) {
+                pos.x *= pxRatio;
+                pos.y *= pxRatio;
+            }
+            container.interactivity.mouse.position = pos;
+            container.interactivity.status = Constants_1.Constants.mouseMoveEvent;
+        }
+        mouseTouchFinish() {
+            const interactivity = this.container.interactivity;
+            if (interactivity === undefined) {
+                return;
+            }
+            const mouse = interactivity.mouse;
+            delete mouse.position;
+            delete mouse.clickPosition;
+            delete mouse.downPosition;
+            interactivity.status = Constants_1.Constants.mouseLeaveEvent;
+            mouse.inside = false;
+            mouse.clicking = false;
+        }
+        mouseTouchClick(e) {
+            const container = this.container;
+            const options = container.actualOptions;
+            const mouse = container.interactivity.mouse;
+            mouse.inside = true;
+            let handled = false;
+            const mousePosition = mouse.position;
+            if (mousePosition === undefined || !options.interactivity.events.onClick.enable) {
+                return;
+            }
+            for (const [, plugin] of container.plugins) {
+                if (plugin.clickPositionValid !== undefined) {
+                    handled = plugin.clickPositionValid(mousePosition);
+                    if (handled) {
+                        break;
+                    }
+                }
+            }
+            if (!handled) {
+                this.doMouseTouchClick(e);
+            }
+            mouse.clicking = false;
+        }
+        doMouseTouchClick(e) {
+            const container = this.container;
+            const options = container.actualOptions;
+            if (this.canPush) {
+                const mousePos = container.interactivity.mouse.position;
+                if (mousePos) {
+                    container.interactivity.mouse.clickPosition = {
+                        x: mousePos.x,
+                        y: mousePos.y,
+                    };
+                }
+                else {
+                    return;
+                }
+                container.interactivity.mouse.clickTime = new Date().getTime();
+                const onClick = options.interactivity.events.onClick;
+                if (onClick.mode instanceof Array) {
+                    for (const mode of onClick.mode) {
+                        this.handleClickMode(mode);
+                    }
+                }
+                else {
+                    this.handleClickMode(onClick.mode);
+                }
+            }
+            if (e.type === "touchend") {
+                setTimeout(() => this.mouseTouchFinish(), 500);
+            }
+        }
+        handleThemeChange(e) {
+            const mediaEvent = e;
+            const themeName = mediaEvent.matches
+                ? this.container.options.defaultDarkTheme
+                : this.container.options.defaultLightTheme;
+            const theme = this.container.options.themes.find((theme) => theme.name === themeName);
+            if (theme && theme.default.auto) {
+                this.container.loadTheme(themeName);
+            }
+        }
+        handleClickMode(mode) {
+            const container = this.container;
+            const options = container.actualOptions;
+            const pushNb = options.interactivity.modes.push.quantity;
+            const removeNb = options.interactivity.modes.remove.quantity;
+            switch (mode) {
+                case "push": {
+                    if (pushNb > 0) {
+                        const pushOptions = options.interactivity.modes.push;
+                        const group = (0, Utils_1.itemFromArray)([undefined, ...pushOptions.groups]);
+                        const groupOptions = group !== undefined ? container.actualOptions.particles.groups[group] : undefined;
+                        container.particles.push(pushNb, container.interactivity.mouse, groupOptions, group);
+                    }
+                    break;
+                }
+                case "remove":
+                    container.particles.removeQuantity(removeNb);
+                    break;
+                case "bubble":
+                    container.bubble.clicking = true;
+                    break;
+                case "repulse":
+                    container.repulse.clicking = true;
+                    container.repulse.count = 0;
+                    for (const particle of container.repulse.particles) {
+                        particle.velocity.setTo(particle.initialVelocity);
+                    }
+                    container.repulse.particles = [];
+                    container.repulse.finish = false;
+                    setTimeout(() => {
+                        if (!container.destroyed) {
+                            container.repulse.clicking = false;
+                        }
+                    }, options.interactivity.modes.repulse.duration * 1000);
+                    break;
+                case "attract":
+                    container.attract.clicking = true;
+                    container.attract.count = 0;
+                    for (const particle of container.attract.particles) {
+                        particle.velocity.setTo(particle.initialVelocity);
+                    }
+                    container.attract.particles = [];
+                    container.attract.finish = false;
+                    setTimeout(() => {
+                        if (!container.destroyed) {
+                            container.attract.clicking = false;
+                        }
+                    }, options.interactivity.modes.attract.duration * 1000);
+                    break;
+                case "pause":
+                    if (container.getAnimationStatus()) {
+                        container.pause();
+                    }
+                    else {
+                        container.play();
+                    }
+                    break;
+            }
+            for (const [, plugin] of container.plugins) {
+                if (plugin.handleClickMode) {
+                    plugin.handleClickMode(mode);
+                }
+            }
+        }
+    }
+    exports.EventListeners = EventListeners;
+});

package/umd/Core/Utils/ExternalInteractorBase.d.ts

@@ -0,0 +1,12 @@
+import type { IDelta, IExternalInteractor } from "../Interfaces";
+import type { Container } from "../Container";
+import { InteractorType } from "../../Enums";
+import type { Particle } from "../Particle";
+export declare abstract class ExternalInteractorBase implements IExternalInteractor {
+    protected readonly container: Container;
+    protected constructor(container: Container);
+    type: InteractorType;
+    abstract interact(delta: IDelta): void;
+    abstract isEnabled(): boolean;
+    abstract reset(particle: Particle): void;
+}

package/umd/Core/Utils/ExternalInteractorBase.js

@@ -0,0 +1,20 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ExternalInteractorBase = void 0;
+    class ExternalInteractorBase {
+        constructor(container) {
+            this.container = container;
+            this.type = 0;
+        }
+    }
+    exports.ExternalInteractorBase = ExternalInteractorBase;
+});

package/umd/Core/Utils/FrameManager.d.ts

@@ -0,0 +1,6 @@
+import type { Container } from "../Container";
+export declare class FrameManager {
+    private readonly container;
+    constructor(container: Container);
+    nextFrame(timestamp: DOMHighResTimeStamp): void;
+}

package/umd/Core/Utils/FrameManager.js

@@ -0,0 +1,53 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.FrameManager = void 0;
+    class FrameManager {
+        constructor(container) {
+            this.container = container;
+        }
+        nextFrame(timestamp) {
+            var _a;
+            try {
+                const container = this.container;
+                if (container.lastFrameTime !== undefined &&
+                    timestamp < container.lastFrameTime + 1000 / container.fpsLimit) {
+                    container.draw(false);
+                    return;
+                }
+                (_a = container.lastFrameTime) !== null && _a !== void 0 ? _a : (container.lastFrameTime = timestamp);
+                const deltaValue = timestamp - container.lastFrameTime;
+                const delta = {
+                    value: deltaValue,
+                    factor: (60 * deltaValue) / 1000,
+                };
+                container.lifeTime += delta.value;
+                container.lastFrameTime = timestamp;
+                if (deltaValue > 1000) {
+                    container.draw(false);
+                    return;
+                }
+                container.particles.draw(delta);
+                if (container.duration > 0 && container.lifeTime > container.duration) {
+                    container.destroy();
+                    return;
+                }
+                if (container.getAnimationStatus()) {
+                    container.draw(false);
+                }
+            }
+            catch (e) {
+                console.error("tsParticles error in animation loop", e);
+            }
+        }
+    }
+    exports.FrameManager = FrameManager;
+});

package/umd/Core/Utils/InteractionManager.d.ts

@@ -0,0 +1,14 @@
+import type { IDelta } from "../Interfaces";
+import type { Container } from "../Container";
+import type { Engine } from "../../engine";
+import type { Particle } from "../Particle";
+export declare class InteractionManager {
+    #private;
+    private readonly container;
+    private externalInteractors;
+    private particleInteractors;
+    constructor(engine: Engine, container: Container);
+    init(): void;
+    externalInteract(delta: IDelta): void;
+    particlesInteract(particle: Particle, delta: IDelta): void;
+}

package/umd/Core/Utils/InteractionManager.js

@@ -0,0 +1,69 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    var _InteractionManager_engine;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InteractionManager = void 0;
+    class InteractionManager {
+        constructor(engine, container) {
+            this.container = container;
+            _InteractionManager_engine.set(this, void 0);
+            __classPrivateFieldSet(this, _InteractionManager_engine, engine, "f");
+            this.externalInteractors = [];
+            this.particleInteractors = [];
+            this.init();
+        }
+        init() {
+            const interactors = __classPrivateFieldGet(this, _InteractionManager_engine, "f").plugins.getInteractors(this.container, true);
+            this.externalInteractors = [];
+            this.particleInteractors = [];
+            for (const interactor of interactors) {
+                switch (interactor.type) {
+                    case 0:
+                        this.externalInteractors.push(interactor);
+                        break;
+                    case 1:
+                        this.particleInteractors.push(interactor);
+                        break;
+                }
+            }
+        }
+        externalInteract(delta) {
+            for (const interactor of this.externalInteractors) {
+                if (interactor.isEnabled()) {
+                    interactor.interact(delta);
+                }
+            }
+        }
+        particlesInteract(particle, delta) {
+            for (const interactor of this.externalInteractors) {
+                interactor.reset(particle);
+            }
+            for (const interactor of this.particleInteractors) {
+                if (interactor.isEnabled(particle)) {
+                    interactor.interact(particle, delta);
+                }
+            }
+        }
+    }
+    exports.InteractionManager = InteractionManager;
+    _InteractionManager_engine = new WeakMap();
+});

package/umd/Core/Utils/ParticlesInteractorBase.d.ts

@@ -0,0 +1,12 @@
+import type { IDelta, IParticlesInteractor } from "../Interfaces";
+import type { Container } from "../Container";
+import { InteractorType } from "../../Enums";
+import type { Particle } from "../Particle";
+export declare abstract class ParticlesInteractorBase implements IParticlesInteractor {
+    protected readonly container: Container;
+    protected constructor(container: Container);
+    type: InteractorType;
+    abstract interact(particle: Particle, delta: IDelta): void;
+    abstract isEnabled(particle: Particle): boolean;
+    abstract reset(particle: Particle): void;
+}

package/umd/Core/Utils/ParticlesInteractorBase.js

@@ -0,0 +1,20 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ParticlesInteractorBase = void 0;
+    class ParticlesInteractorBase {
+        constructor(container) {
+            this.container = container;
+            this.type = 1;
+        }
+    }
+    exports.ParticlesInteractorBase = ParticlesInteractorBase;
+});

package/umd/Core/Utils/ParticlesMover.d.ts

@@ -0,0 +1,13 @@
+import type { Container } from "../Container";
+import type { IDelta } from "../Interfaces";
+import type { Particle } from "../Particle";
+export declare class ParticlesMover {
+    private readonly container;
+    constructor(container: Container);
+    move(particle: Particle, delta: IDelta): void;
+    private moveParticle;
+    private spin;
+    private applyPath;
+    private moveParallax;
+    private getProximitySpeedFactor;
+}