@tsparticles/plugin-interactivity 4.0.0-alpha.4

package/esm/InteractivityEventListeners.js

@@ -0,0 +1,235 @@
+import { double, executeOnSingleOrMultiple, lengthOffset, manageListener, touchDelay, visibilityChangeEvent, } from "@tsparticles/engine";
+import { mouseDownEvent, mouseLeaveEvent, mouseMoveEvent, mouseOutEvent, mouseUpEvent, touchCancelEvent, touchEndEvent, touchMoveEvent, touchStartEvent, } from "./InteractivityConstants.js";
+import { InteractivityDetect } from "./InteractivityDetect.js";
+export class InteractivityEventListeners {
+    constructor(container, interactionManager) {
+        this._canPush = true;
+        this._doMouseTouchClick = e => {
+            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions;
+            if (this._canPush) {
+                const mouseInteractivity = interactionManager.interactivityData.mouse, mousePos = mouseInteractivity.position;
+                if (!mousePos) {
+                    return;
+                }
+                mouseInteractivity.clickPosition = { ...mousePos };
+                mouseInteractivity.clickTime = Date.now();
+                const onClick = options.interactivity?.events.onClick;
+                if (!onClick?.mode) {
+                    return;
+                }
+                executeOnSingleOrMultiple(onClick.mode, mode => {
+                    interactionManager.handleClickMode(mode);
+                });
+            }
+            if (e.type === "touchend") {
+                setTimeout(() => {
+                    this._mouseTouchFinish();
+                }, touchDelay);
+            }
+        };
+        this._handleVisibilityChange = () => {
+            this._mouseTouchFinish();
+        };
+        this._manageInteractivityListeners = (mouseLeaveTmpEvent, add) => {
+            const handlers = this._handlers, container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, interactivityEl = interactionManager.interactivityData.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._manageListeners = add => {
+            const handlers = this._handlers, container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, detectType = options.interactivity?.detectsOn, canvasEl = container.canvas.element;
+            let mouseLeaveTmpEvent = mouseLeaveEvent;
+            if (detectType === InteractivityDetect.window) {
+                interactionManager.interactivityData.element = globalThis;
+                mouseLeaveTmpEvent = mouseOutEvent;
+            }
+            else if (detectType === InteractivityDetect.parent && canvasEl) {
+                interactionManager.interactivityData.element = canvasEl.parentElement ?? canvasEl.parentNode;
+            }
+            else {
+                interactionManager.interactivityData.element = canvasEl;
+            }
+            this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
+            manageListener(document, visibilityChangeEvent, handlers.visibilityChange, add, false);
+        };
+        this._mouseDown = () => {
+            const { interactivityData } = this._interactionManager, { mouse } = interactivityData;
+            mouse.clicking = true;
+            mouse.downPosition = mouse.position;
+        };
+        this._mouseTouchClick = e => {
+            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, { mouse } = interactionManager.interactivityData;
+            mouse.inside = true;
+            let handled = false;
+            const mousePosition = mouse.position;
+            if (!mousePosition || !options.interactivity?.events.onClick.enable) {
+                return;
+            }
+            for (const plugin of container.plugins) {
+                if (!plugin.clickPositionValid) {
+                    continue;
+                }
+                handled = plugin.clickPositionValid(mousePosition);
+                if (handled) {
+                    break;
+                }
+            }
+            if (!handled) {
+                this._doMouseTouchClick(e);
+            }
+            mouse.clicking = false;
+        };
+        this._mouseTouchFinish = () => {
+            const { interactivityData } = this._interactionManager, { mouse } = interactivityData;
+            delete mouse.position;
+            delete mouse.clickPosition;
+            delete mouse.downPosition;
+            interactivityData.status = mouseLeaveEvent;
+            mouse.inside = false;
+            mouse.clicking = false;
+        };
+        this._mouseTouchMove = e => {
+            const container = this._container, interactionManager = this._interactionManager, options = container.actualOptions, interactivity = interactionManager.interactivityData, 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 === globalThis) {
+                    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._container = container;
+        this._interactionManager = interactionManager;
+        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();
+            },
+        };
+    }
+    addListeners() {
+        this._manageListeners(true);
+    }
+    removeListeners() {
+        this._manageListeners(false);
+    }
+}

package/esm/InteractivityPlugin.js

@@ -0,0 +1,48 @@
+import { deepExtend, } from "@tsparticles/engine";
+import { Interactivity } from "./Options/Classes/Interactivity.js";
+export class InteractivityPlugin {
+    constructor(engine) {
+        this._engine = engine;
+        this.id = "interactivity";
+    }
+    async getPlugin(container) {
+        const { InteractivityPluginInstance } = await import("./InteractivityPluginInstance.js");
+        return new InteractivityPluginInstance(this._engine, container);
+    }
+    loadOptions(container, options, source) {
+        if (!this.needsPlugin()) {
+            return;
+        }
+        let interactivityOptions = options.interactivity;
+        if (!interactivityOptions?.load) {
+            options.interactivity = interactivityOptions = new Interactivity(this._engine, container);
+        }
+        interactivityOptions.load(source?.interactivity);
+        const interactors = this._engine.interactors?.get(container);
+        if (!interactors) {
+            return;
+        }
+        for (const interactor of interactors) {
+            if (interactor.loadOptions) {
+                interactor.loadOptions(options, source);
+            }
+        }
+    }
+    loadParticlesOptions(container, options, source) {
+        if (source?.interactivity) {
+            options.interactivity = deepExtend({}, source.interactivity);
+        }
+        const interactors = this._engine.interactors?.get(container);
+        if (!interactors) {
+            return;
+        }
+        for (const interactor of interactors) {
+            if (interactor.loadParticlesOptions) {
+                interactor.loadParticlesOptions(options, source);
+            }
+        }
+    }
+    needsPlugin() {
+        return true;
+    }
+}

package/esm/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/esm/InteractorType.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/Options/Interfaces/Events/IClickEvent.js

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

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

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

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

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

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

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

package/esm/Options/Interfaces/IInteractivity.js

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

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

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

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

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

package/esm/ParticlesInteractorBase.js

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

package/esm/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/esm/package.json

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

package/esm/types.js

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

package/esm/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);
+    });
+}