@tsparticles/plugin-interactivity 4.0.0-alpha.4

package/browser/InteractivityPluginInstance.js

@@ -0,0 +1,52 @@
+import { InteractionManager } from "./InteractionManager.js";
+import { Interactivity } from "./Options/Classes/Interactivity.js";
+export class InteractivityPluginInstance {
+    constructor(engine, container) {
+        this._container = container;
+        this._engine = engine;
+        this.interactionManager = new InteractionManager(engine, container);
+        this._container.addClickHandler = (callback) => {
+            this.interactionManager.addClickHandler(callback);
+        };
+    }
+    addClickHandler(callback) {
+        this.interactionManager.addClickHandler(callback);
+    }
+    clearClickHandlers() {
+        this.interactionManager.clearClickHandlers();
+    }
+    destroy() {
+        this.clearClickHandlers();
+        this._engine.interactors?.delete(this._container);
+    }
+    particleCreated(particle) {
+        const interactivityParticle = particle, interactivity = new Interactivity(this._engine, this._container);
+        interactivity.load(this._container.actualOptions.interactivity);
+        interactivity.load(interactivityParticle.options.interactivity);
+        interactivityParticle.interactivity = interactivity;
+    }
+    particleReset(particle) {
+        this.interactionManager.reset(particle);
+    }
+    postParticleUpdate(particle, delta) {
+        this.interactionManager.particlesInteract(particle, delta);
+    }
+    postUpdate(delta) {
+        this.interactionManager.externalInteract(delta);
+    }
+    async preInit() {
+        await this.interactionManager.init();
+    }
+    async redrawInit() {
+        await this.interactionManager.init();
+    }
+    start() {
+        this.interactionManager.addListeners();
+        this.interactionManager.startObserving();
+        return Promise.resolve();
+    }
+    stop() {
+        this.interactionManager.removeListeners();
+        this.interactionManager.stopObserving();
+    }
+}

package/browser/InteractorType.js

@@ -0,0 +1,5 @@
+export var InteractorType;
+(function (InteractorType) {
+    InteractorType["external"] = "external";
+    InteractorType["particles"] = "particles";
+})(InteractorType || (InteractorType = {}));

package/browser/Options/Classes/Events/ClickEvent.js

@@ -0,0 +1,18 @@
+import { isNull } from "@tsparticles/engine";
+export class ClickEvent {
+    constructor() {
+        this.enable = false;
+        this.mode = [];
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+    }
+}

package/browser/Options/Classes/Events/DivEvent.js

@@ -0,0 +1,27 @@
+import { isNull } from "@tsparticles/engine";
+import { DivType } from "../../../DivType.js";
+export class DivEvent {
+    constructor() {
+        this.selectors = [];
+        this.enable = false;
+        this.mode = [];
+        this.type = DivType.circle;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.selectors !== undefined) {
+            this.selectors = data.selectors;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}

package/browser/Options/Classes/Events/Events.js

@@ -0,0 +1,26 @@
+import { executeOnSingleOrMultiple, isNull, } from "@tsparticles/engine";
+import { ClickEvent } from "./ClickEvent.js";
+import { DivEvent } from "./DivEvent.js";
+import { HoverEvent } from "./HoverEvent.js";
+export class Events {
+    constructor() {
+        this.onClick = new ClickEvent();
+        this.onDiv = new DivEvent();
+        this.onHover = new HoverEvent();
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        this.onClick.load(data.onClick);
+        const onDiv = data.onDiv;
+        if (onDiv !== undefined) {
+            this.onDiv = executeOnSingleOrMultiple(onDiv, t => {
+                const tmp = new DivEvent();
+                tmp.load(t);
+                return tmp;
+            });
+        }
+        this.onHover.load(data.onHover);
+    }
+}

package/browser/Options/Classes/Events/HoverEvent.js

@@ -0,0 +1,18 @@
+import { isNull } from "@tsparticles/engine";
+export class HoverEvent {
+    constructor() {
+        this.enable = false;
+        this.mode = [];
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+    }
+}

package/browser/Options/Classes/Interactivity.js

@@ -0,0 +1,22 @@
+import { isNull } from "@tsparticles/engine";
+import { Events } from "./Events/Events.js";
+import { InteractivityDetect } from "../../InteractivityDetect.js";
+import { Modes } from "./Modes/Modes.js";
+export class Interactivity {
+    constructor(engine, container) {
+        this.detectsOn = InteractivityDetect.window;
+        this.events = new Events();
+        this.modes = new Modes(engine, container);
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        const detectsOn = data.detectsOn;
+        if (detectsOn !== undefined) {
+            this.detectsOn = detectsOn;
+        }
+        this.events.load(data.events);
+        this.modes.load(data.modes);
+    }
+}

package/browser/Options/Classes/Modes/Modes.js

@@ -0,0 +1,25 @@
+import { isNull } from "@tsparticles/engine";
+export class Modes {
+    constructor(engine, container) {
+        this._engine = engine;
+        this._container = container;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (!this._container) {
+            return;
+        }
+        const interactors = this._engine.interactors?.get(this._container);
+        if (!interactors) {
+            return;
+        }
+        for (const interactor of interactors) {
+            if (!interactor.loadModeOptions) {
+                continue;
+            }
+            interactor.loadModeOptions(this, data);
+        }
+    }
+}

package/browser/Options/Interfaces/Events/IClickEvent.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/Events/IDivEvent.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/Events/IEvents.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/Events/IHoverEvent.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/IInteractivity.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/Modes/IModeDiv.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/Modes/IModes.js

@@ -0,0 +1 @@
+export {};

package/browser/ParticlesInteractorBase.js

@@ -0,0 +1,7 @@
+import { InteractorType } from "./InteractorType.js";
+export class ParticlesInteractorBase {
+    constructor(container) {
+        this.type = InteractorType.particles;
+        this.container = container;
+    }
+}

package/browser/index.js

@@ -0,0 +1,38 @@
+import { getItemsFromInitializer } from "@tsparticles/engine";
+export function loadInteractivityPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.4");
+    engine.register(async (e) => {
+        const interactivityEngine = e, { InteractivityPlugin } = await import("./InteractivityPlugin.js");
+        interactivityEngine.addPlugin(new InteractivityPlugin(interactivityEngine));
+        interactivityEngine.interactorsInitializers ??= new Map();
+        interactivityEngine.interactors ??= new Map();
+        interactivityEngine.addInteractor = (name, interactorInitializer) => {
+            interactivityEngine.interactorsInitializers ??= new Map();
+            interactivityEngine.interactorsInitializers.set(name, interactorInitializer);
+        };
+        interactivityEngine.getInteractors = async (container, force = false) => {
+            interactivityEngine.interactors ??= new Map();
+            interactivityEngine.interactorsInitializers ??= new Map();
+            return getItemsFromInitializer(container, interactivityEngine.interactors, interactivityEngine.interactorsInitializers, force);
+        };
+        interactivityEngine.setOnClickHandler = (callback) => {
+            const { items } = interactivityEngine;
+            if (!items.length) {
+                throw new Error("Click handlers can only be set after calling tsParticles.load()");
+            }
+            items.forEach(item => {
+                const interactivityContainer = item;
+                interactivityContainer.addClickHandler?.(callback);
+            });
+        };
+    });
+}
+export * from "./DivType.js";
+export * from "./ExternalInteractorBase.js";
+export * from "./InteractivityConstants.js";
+export * from "./InteractivityDetect.js";
+export * from "./InteractorType.js";
+export * from "./ParticlesInteractorBase.js";
+export * from "./utils.js";
+export * from "./Options/Classes/Events/DivEvent.js";
+export * from "./Options/Classes/Modes/Modes.js";

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/browser/utils.js

@@ -0,0 +1,32 @@
+import { executeOnSingleOrMultiple, findItemFromSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
+function checkSelector(element, selectors) {
+    const res = executeOnSingleOrMultiple(selectors, selector => {
+        return element.matches(selector);
+    });
+    return isArray(res) ? res.some(t => t) : res;
+}
+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);
+    });
+}

package/cjs/DivType.js

@@ -0,0 +1,5 @@
+export var DivType;
+(function (DivType) {
+    DivType["circle"] = "circle";
+    DivType["rectangle"] = "rectangle";
+})(DivType || (DivType = {}));

package/cjs/ExternalInteractorBase.js

@@ -0,0 +1,7 @@
+import { InteractorType } from "./InteractorType.js";
+export class ExternalInteractorBase {
+    constructor(container) {
+        this.type = InteractorType.external;
+        this.container = container;
+    }
+}

package/cjs/IExternalInteractor.js

@@ -0,0 +1 @@
+export {};

package/cjs/IInteractivityData.js

@@ -0,0 +1 @@
+export {};

package/cjs/IInteractor.js

@@ -0,0 +1 @@
+export {};

package/cjs/IMouseData.js

@@ -0,0 +1 @@
+export {};

package/cjs/IParticlesInteractor.js

@@ -0,0 +1 @@
+export {};

package/cjs/InteractionManager.js

@@ -0,0 +1,202 @@
+import { clickRadius, minCoordinate, safeIntersectionObserver, touchEndLengthOffset, } from "@tsparticles/engine";
+import { clickEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, } from "./InteractivityConstants.js";
+import { InteractivityEventListeners } from "./InteractivityEventListeners.js";
+import { InteractorType } from "./InteractorType.js";
+export 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(container, this);
+        this.interactivityData = {
+            mouse: {
+                clicking: false,
+                inside: false,
+            },
+        };
+        this._intersectionObserver = 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, 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 - touchEndLengthOffset];
+                if (!lastTouch) {
+                    return;
+                }
+                const element = container.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 (container.destroyed) {
+                return;
+            }
+            touched = false;
+            touchMoved = false;
+        };
+        let touched = false, touchMoved = false;
+        this._clickHandlers.set(clickEvent, clickHandler);
+        this._clickHandlers.set(touchStartEvent, touchStartHandler);
+        this._clickHandlers.set(touchMoveEvent, touchMoveHandler);
+        this._clickHandlers.set(touchEndEvent, touchEndHandler);
+        this._clickHandlers.set(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.external:
+                    this._externalInteractors.push(interactor);
+                    break;
+                case 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);
+        }
+    }
+}

package/cjs/InteractivityConstants.js

@@ -0,0 +1 @@
+export const clickEvent = "click", mouseDownEvent = "pointerdown", mouseUpEvent = "pointerup", mouseLeaveEvent = "pointerleave", mouseOutEvent = "pointerout", mouseMoveEvent = "pointermove", touchStartEvent = "touchstart", touchEndEvent = "touchend", touchMoveEvent = "touchmove", touchCancelEvent = "touchcancel";

package/cjs/InteractivityDetect.js

@@ -0,0 +1,6 @@
+export var InteractivityDetect;
+(function (InteractivityDetect) {
+    InteractivityDetect["canvas"] = "canvas";
+    InteractivityDetect["parent"] = "parent";
+    InteractivityDetect["window"] = "window";
+})(InteractivityDetect || (InteractivityDetect = {}));