@tsparticles/plugin-interactivity 4.0.0-alpha.4

package/types/Options/Classes/Events/DivEvent.d.ts

@@ -0,0 +1,11 @@
+import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
+import { DivType } from "../../../DivType.js";
+import type { IDivEvent } from "../../Interfaces/Events/IDivEvent.js";
+export declare class DivEvent implements IDivEvent, IOptionLoader<IDivEvent> {
+    enable: boolean;
+    mode: SingleOrMultiple<string>;
+    selectors: SingleOrMultiple<string>;
+    type: DivType | keyof typeof DivType;
+    constructor();
+    load(data?: RecursivePartial<IDivEvent>): void;
+}

package/types/Options/Classes/Events/Events.d.ts

@@ -0,0 +1,12 @@
+import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
+import { ClickEvent } from "./ClickEvent.js";
+import { DivEvent } from "./DivEvent.js";
+import { HoverEvent } from "./HoverEvent.js";
+import type { IEvents } from "../../Interfaces/Events/IEvents.js";
+export declare class Events implements IEvents, IOptionLoader<IEvents> {
+    readonly onClick: ClickEvent;
+    onDiv: SingleOrMultiple<DivEvent>;
+    readonly onHover: HoverEvent;
+    constructor();
+    load(data?: RecursivePartial<IEvents>): void;
+}

package/types/Options/Classes/Events/HoverEvent.d.ts

@@ -0,0 +1,8 @@
+import { type IOptionLoader, type RecursivePartial, type SingleOrMultiple } from "@tsparticles/engine";
+import type { IHoverEvent } from "../../Interfaces/Events/IHoverEvent.js";
+export declare class HoverEvent implements IHoverEvent, IOptionLoader<IHoverEvent> {
+    enable: boolean;
+    mode: SingleOrMultiple<string>;
+    constructor();
+    load(data?: RecursivePartial<IHoverEvent>): void;
+}

package/types/Options/Classes/Interactivity.d.ts

@@ -0,0 +1,14 @@
+import { type Container, type IOptionLoader, type RecursivePartial } from "@tsparticles/engine";
+import { Events } from "./Events/Events.js";
+import type { IInteractivity } from "../Interfaces/IInteractivity.js";
+import { InteractivityDetect } from "../../InteractivityDetect.js";
+import type { InteractivityEngine } from "../../types.js";
+import { Modes } from "./Modes/Modes.js";
+export declare class Interactivity implements IInteractivity, IOptionLoader<IInteractivity> {
+    [name: string]: unknown;
+    detectsOn: InteractivityDetect | keyof typeof InteractivityDetect;
+    readonly events: Events;
+    readonly modes: Modes;
+    constructor(engine: InteractivityEngine, container?: Container);
+    load(data?: RecursivePartial<IInteractivity>): void;
+}

package/types/Options/Classes/Modes/Modes.d.ts

@@ -0,0 +1,10 @@
+import { type Container, type IOptionLoader, type RecursivePartial } from "@tsparticles/engine";
+import type { IModes } from "../../Interfaces/Modes/IModes.js";
+import type { InteractivityEngine } from "../../../types.js";
+export declare class Modes implements IModes, IOptionLoader<IModes> {
+    [name: string]: unknown;
+    private readonly _container;
+    private readonly _engine;
+    constructor(engine: InteractivityEngine, container?: Container);
+    load(data?: RecursivePartial<IModes>): void;
+}

package/types/Options/Interfaces/Events/IClickEvent.d.ts

@@ -0,0 +1,5 @@
+import type { SingleOrMultiple } from "@tsparticles/engine";
+export interface IClickEvent {
+    enable: boolean;
+    mode: SingleOrMultiple<string>;
+}

package/types/Options/Interfaces/Events/IDivEvent.d.ts

@@ -0,0 +1,8 @@
+import type { DivType } from "../../../DivType.js";
+import type { SingleOrMultiple } from "@tsparticles/engine";
+export interface IDivEvent {
+    enable: boolean;
+    mode: SingleOrMultiple<string>;
+    selectors: SingleOrMultiple<string>;
+    type: DivType | keyof typeof DivType;
+}

package/types/Options/Interfaces/Events/IEvents.d.ts

@@ -0,0 +1,9 @@
+import type { IClickEvent } from "./IClickEvent.js";
+import type { IDivEvent } from "./IDivEvent.js";
+import type { IHoverEvent } from "./IHoverEvent.js";
+import type { SingleOrMultiple } from "@tsparticles/engine";
+export interface IEvents {
+    onClick: IClickEvent;
+    onDiv: SingleOrMultiple<IDivEvent>;
+    onHover: IHoverEvent;
+}

package/types/Options/Interfaces/Events/IHoverEvent.d.ts

@@ -0,0 +1,5 @@
+import type { SingleOrMultiple } from "@tsparticles/engine";
+export interface IHoverEvent {
+    enable: boolean;
+    mode: SingleOrMultiple<string>;
+}

package/types/Options/Interfaces/IInteractivity.d.ts

@@ -0,0 +1,9 @@
+import type { IEvents } from "./Events/IEvents.js";
+import type { IModes } from "./Modes/IModes.js";
+import type { InteractivityDetect } from "../../InteractivityDetect.js";
+export interface IInteractivity {
+    [name: string]: unknown;
+    detectsOn: InteractivityDetect | keyof typeof InteractivityDetect;
+    events: IEvents;
+    modes: IModes;
+}

package/types/Options/Interfaces/Modes/IModeDiv.d.ts

@@ -0,0 +1,4 @@
+import type { SingleOrMultiple } from "@tsparticles/engine";
+export interface IModeDiv {
+    selectors: SingleOrMultiple<string>;
+}

package/types/Options/Interfaces/Modes/IModes.d.ts

@@ -0,0 +1 @@
+export type IModes = Record<string, unknown>;

package/types/ParticlesInteractorBase.d.ts

@@ -0,0 +1,15 @@
+import type { InteractivityContainer, InteractivityParticle } from "./types.js";
+import { type IDelta } from "@tsparticles/engine";
+import type { IInteractivityData } from "./IInteractivityData.js";
+import type { IParticlesInteractor } from "./IParticlesInteractor.js";
+import { InteractorType } from "./InteractorType.js";
+export declare abstract class ParticlesInteractorBase<TContainer extends InteractivityContainer = InteractivityContainer, TParticle extends InteractivityParticle = InteractivityParticle> implements IParticlesInteractor<TParticle> {
+    type: InteractorType;
+    protected readonly container: TContainer;
+    protected constructor(container: TContainer);
+    abstract clear(particle: TParticle, delta: IDelta): void;
+    abstract init(): void;
+    abstract interact(particle: TParticle, interactivityData: IInteractivityData, delta: IDelta): void;
+    abstract isEnabled(particle: TParticle, interactivityData: IInteractivityData): boolean;
+    abstract reset(interactivityData: IInteractivityData, particle: TParticle): void;
+}

package/types/index.d.ts

@@ -0,0 +1,19 @@
+import { type Engine } from "@tsparticles/engine";
+export declare function loadInteractivityPlugin(engine: Engine): void;
+export * from "./DivType.js";
+export * from "./ExternalInteractorBase.js";
+export type * from "./IExternalInteractor.js";
+export type * from "./IInteractivityData.js";
+export type * from "./IInteractor.js";
+export * from "./InteractivityConstants.js";
+export * from "./InteractivityDetect.js";
+export * from "./InteractorType.js";
+export type * from "./IParticlesInteractor.js";
+export * from "./ParticlesInteractorBase.js";
+export type * from "./types.js";
+export * from "./utils.js";
+export type * from "./Options/Interfaces/Events/IDivEvent.js";
+export type * from "./Options/Interfaces/Modes/IModes.js";
+export type * from "./Options/Interfaces/Modes/IModeDiv.js";
+export * from "./Options/Classes/Events/DivEvent.js";
+export * from "./Options/Classes/Modes/Modes.js";

package/types/types.d.ts

@@ -0,0 +1,32 @@
+import type { Container, Engine, GenericInitializer, IOptions, IParticlesOptions, Options, Particle, ParticlesOptions, RecursivePartial } from "@tsparticles/engine";
+import type { IInteractivity } from "./Options/Interfaces/IInteractivity.js";
+import type { IInteractor } from "./IInteractor.js";
+import type { Interactivity } from "./Options/Classes/Interactivity.js";
+export type IInteractivityOptions = IOptions & {
+    interactivity?: IInteractivity;
+};
+export type InteractivityOptions = Options & {
+    interactivity?: Interactivity;
+};
+export type InteractivityContainer = Container & {
+    actualOptions: InteractivityOptions;
+    addClickHandler?: (callback: (evt: Event, particles?: Particle[]) => void) => void;
+};
+export type InteractivityParticle = Particle & {
+    interactivity?: Interactivity;
+    options: InteractivityParticlesOptions;
+};
+export type IInteractivityParticlesOptions = IParticlesOptions & {
+    interactivity?: RecursivePartial<IInteractivity>;
+};
+export type InteractivityParticlesOptions = RecursivePartial<ParticlesOptions> & {
+    interactivity?: RecursivePartial<IInteractivity>;
+};
+export type InteractorInitializer = GenericInitializer<IInteractor>;
+export type InteractivityEngine = Engine & {
+    addInteractor?: (name: string, interactorInitializer: InteractorInitializer) => void;
+    getInteractors?: (container: Container, force?: boolean) => Promise<IInteractor[]>;
+    interactors?: Map<Container, IInteractor[]>;
+    interactorsInitializers?: Map<string, InteractorInitializer>;
+    setOnClickHandler?: (callback: (e: Event, particles?: Particle[]) => void) => void;
+};

package/types/utils.d.ts

@@ -0,0 +1,7 @@
+import { type SingleOrMultiple } from "@tsparticles/engine";
+import type { DivEvent } from "./Options/Classes/Events/DivEvent.js";
+import type { IModeDiv } from "./Options/Interfaces/Modes/IModeDiv.js";
+export declare function isDivModeEnabled(mode: string, divs: SingleOrMultiple<DivEvent>): boolean;
+export declare function divModeExecute(mode: string, divs: SingleOrMultiple<DivEvent>, callback: (id: string, div: DivEvent) => void): void;
+export declare function singleDivModeExecute(div: DivEvent, callback: (selector: string, div: DivEvent) => void): void;
+export declare function divMode<T extends IModeDiv>(divs?: SingleOrMultiple<T>, element?: HTMLElement): T | undefined;

package/umd/DivType.js

@@ -0,0 +1,18 @@
+(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.DivType = void 0;
+    var DivType;
+    (function (DivType) {
+        DivType["circle"] = "circle";
+        DivType["rectangle"] = "rectangle";
+    })(DivType || (exports.DivType = DivType = {}));
+});

package/umd/ExternalInteractorBase.js

@@ -0,0 +1,21 @@
+(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", "./InteractorType.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ExternalInteractorBase = void 0;
+    const InteractorType_js_1 = require("./InteractorType.js");
+    class ExternalInteractorBase {
+        constructor(container) {
+            this.type = InteractorType_js_1.InteractorType.external;
+            this.container = container;
+        }
+    }
+    exports.ExternalInteractorBase = ExternalInteractorBase;
+});

package/umd/IExternalInteractor.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/IInteractivityData.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/IInteractor.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/IMouseData.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/IParticlesInteractor.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/InteractionManager.js

@@ -0,0 +1,216 @@
+(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", "@tsparticles/engine", "./InteractivityConstants.js", "./InteractivityEventListeners.js", "./InteractorType.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InteractionManager = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const InteractivityConstants_js_1 = require("./InteractivityConstants.js");
+    const InteractivityEventListeners_js_1 = require("./InteractivityEventListeners.js");
+    const InteractorType_js_1 = require("./InteractorType.js");
+    class InteractionManager {
+        constructor(engine, container) {
+            this.container = container;
+            this._intersectionManager = entries => {
+                const { container } = this;
+                if (container.destroyed || !container.actualOptions.pauseOnOutsideViewport) {
+                    return;
+                }
+                for (const entry of entries) {
+                    if (entry.target !== this.interactivityData.element) {
+                        continue;
+                    }
+                    if (entry.isIntersecting) {
+                        container.play();
+                    }
+                    else {
+                        container.pause();
+                    }
+                }
+            };
+            this._engine = engine;
+            this._interactors = [];
+            this._externalInteractors = [];
+            this._particleInteractors = [];
+            this._clickHandlers = new Map();
+            this._eventListeners = new InteractivityEventListeners_js_1.InteractivityEventListeners(container, this);
+            this.interactivityData = {
+                mouse: {
+                    clicking: false,
+                    inside: false,
+                },
+            };
+            this._intersectionObserver = (0, engine_1.safeIntersectionObserver)(entries => {
+                this._intersectionManager(entries);
+            });
+        }
+        addClickHandler(callback) {
+            const { container, interactivityData } = this;
+            if (container.destroyed) {
+                return;
+            }
+            const el = interactivityData.element;
+            if (!el) {
+                return;
+            }
+            const clickOrTouchHandler = (e, pos, radius) => {
+                if (container.destroyed) {
+                    return;
+                }
+                const pxRatio = container.retina.pixelRatio, posRetina = {
+                    x: pos.x * pxRatio,
+                    y: pos.y * pxRatio,
+                }, particles = container.particles.quadTree.queryCircle(posRetina, radius * pxRatio);
+                callback(e, particles);
+            }, clickHandler = (e) => {
+                if (container.destroyed) {
+                    return;
+                }
+                const mouseEvent = e, pos = {
+                    x: mouseEvent.offsetX,
+                    y: mouseEvent.offsetY,
+                };
+                clickOrTouchHandler(e, pos, engine_1.clickRadius);
+            }, touchStartHandler = () => {
+                if (container.destroyed) {
+                    return;
+                }
+                touched = true;
+                touchMoved = false;
+            }, touchMoveHandler = () => {
+                if (container.destroyed) {
+                    return;
+                }
+                touchMoved = true;
+            }, touchEndHandler = (e) => {
+                if (container.destroyed) {
+                    return;
+                }
+                if (touched && !touchMoved) {
+                    const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - engine_1.touchEndLengthOffset];
+                    if (!lastTouch) {
+                        return;
+                    }
+                    const element = container.canvas.element, canvasRect = element ? element.getBoundingClientRect() : undefined, pos = {
+                        x: lastTouch.clientX - (canvasRect ? canvasRect.left : engine_1.minCoordinate),
+                        y: lastTouch.clientY - (canvasRect ? canvasRect.top : engine_1.minCoordinate),
+                    };
+                    clickOrTouchHandler(e, pos, Math.max(lastTouch.radiusX, lastTouch.radiusY));
+                }
+                touched = false;
+                touchMoved = false;
+            }, touchCancelHandler = () => {
+                if (container.destroyed) {
+                    return;
+                }
+                touched = false;
+                touchMoved = false;
+            };
+            let touched = false, touchMoved = false;
+            this._clickHandlers.set(InteractivityConstants_js_1.clickEvent, clickHandler);
+            this._clickHandlers.set(InteractivityConstants_js_1.touchStartEvent, touchStartHandler);
+            this._clickHandlers.set(InteractivityConstants_js_1.touchMoveEvent, touchMoveHandler);
+            this._clickHandlers.set(InteractivityConstants_js_1.touchEndEvent, touchEndHandler);
+            this._clickHandlers.set(InteractivityConstants_js_1.touchCancelEvent, touchCancelHandler);
+            for (const [key, handler] of this._clickHandlers) {
+                el.addEventListener(key, handler);
+            }
+        }
+        addListeners() {
+            this._eventListeners.addListeners();
+        }
+        clearClickHandlers() {
+            const { container, interactivityData } = this;
+            if (container.destroyed) {
+                return;
+            }
+            for (const [key, handler] of this._clickHandlers) {
+                interactivityData.element?.removeEventListener(key, handler);
+            }
+            this._clickHandlers.clear();
+        }
+        externalInteract(delta) {
+            for (const interactor of this._externalInteractors) {
+                const { interactivityData } = this;
+                if (interactor.isEnabled(interactivityData)) {
+                    interactor.interact(interactivityData, delta);
+                }
+            }
+        }
+        handleClickMode(mode) {
+            if (this.container.destroyed) {
+                return;
+            }
+            const { interactivityData } = this;
+            for (const interactor of this._externalInteractors) {
+                interactor.handleClickMode?.(mode, interactivityData);
+            }
+        }
+        async init() {
+            const interactors = await this._engine.getInteractors?.(this.container, true);
+            if (!interactors) {
+                return;
+            }
+            this._interactors = interactors;
+            this._externalInteractors = [];
+            this._particleInteractors = [];
+            for (const interactor of this._interactors) {
+                switch (interactor.type) {
+                    case InteractorType_js_1.InteractorType.external:
+                        this._externalInteractors.push(interactor);
+                        break;
+                    case InteractorType_js_1.InteractorType.particles:
+                        this._particleInteractors.push(interactor);
+                        break;
+                }
+                interactor.init();
+            }
+        }
+        particlesInteract(particle, delta) {
+            const { interactivityData } = this;
+            for (const interactor of this._externalInteractors) {
+                interactor.clear(particle, delta);
+            }
+            for (const interactor of this._particleInteractors) {
+                if (interactor.isEnabled(particle, interactivityData)) {
+                    interactor.interact(particle, interactivityData, delta);
+                }
+            }
+        }
+        removeListeners() {
+            this._eventListeners.removeListeners();
+        }
+        reset(particle) {
+            const { interactivityData } = this;
+            for (const interactor of this._externalInteractors) {
+                if (interactor.isEnabled(interactivityData)) {
+                    interactor.reset(interactivityData, particle);
+                }
+            }
+            for (const interactor of this._particleInteractors) {
+                if (interactor.isEnabled(particle, interactivityData)) {
+                    interactor.reset(interactivityData, particle);
+                }
+            }
+        }
+        startObserving() {
+            const { interactivityData } = this;
+            if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {
+                this._intersectionObserver.observe(interactivityData.element);
+            }
+        }
+        stopObserving() {
+            const { interactivityData } = this;
+            if (interactivityData.element instanceof HTMLElement && this._intersectionObserver) {
+                this._intersectionObserver.unobserve(interactivityData.element);
+            }
+        }
+    }
+    exports.InteractionManager = InteractionManager;
+});

package/umd/InteractivityConstants.js

@@ -0,0 +1,14 @@
+(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.touchCancelEvent = exports.touchMoveEvent = exports.touchEndEvent = exports.touchStartEvent = exports.mouseMoveEvent = exports.mouseOutEvent = exports.mouseLeaveEvent = exports.mouseUpEvent = exports.mouseDownEvent = exports.clickEvent = void 0;
+    exports.clickEvent = "click", exports.mouseDownEvent = "pointerdown", exports.mouseUpEvent = "pointerup", exports.mouseLeaveEvent = "pointerleave", exports.mouseOutEvent = "pointerout", exports.mouseMoveEvent = "pointermove", exports.touchStartEvent = "touchstart", exports.touchEndEvent = "touchend", exports.touchMoveEvent = "touchmove", exports.touchCancelEvent = "touchcancel";
+});

package/umd/InteractivityDetect.js

@@ -0,0 +1,19 @@
+(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.InteractivityDetect = void 0;
+    var InteractivityDetect;
+    (function (InteractivityDetect) {
+        InteractivityDetect["canvas"] = "canvas";
+        InteractivityDetect["parent"] = "parent";
+        InteractivityDetect["window"] = "window";
+    })(InteractivityDetect || (exports.InteractivityDetect = InteractivityDetect = {}));
+});