@tsparticles/plugin-interactivity 4.0.0-alpha.14

package/umd/InteractivityEventListeners.js

@@ -0,0 +1,258 @@
+(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", "./InteractivityDetect.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InteractivityEventListeners = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const InteractivityConstants_js_1 = require("./InteractivityConstants.js");
+    const InteractivityDetect_js_1 = require("./InteractivityDetect.js");
+    class InteractivityEventListeners {
+        _canPush = true;
+        _clickPositionPlugins;
+        _container;
+        _handlers;
+        _interactionManager;
+        _touches;
+        constructor(container, interactionManager) {
+            this._container = container;
+            this._clickPositionPlugins = [];
+            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);
+        }
+        init() {
+            this._clickPositionPlugins.length = 0;
+            for (const plugin of this._container.plugins.filter(p => !!p.clickPositionValid)) {
+                this._clickPositionPlugins.push(plugin);
+            }
+        }
+        removeListeners() {
+            this._manageListeners(false);
+        }
+        _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 = performance.now();
+                const onClick = options.interactivity?.events.onClick;
+                if (!onClick?.mode) {
+                    return;
+                }
+                (0, engine_1.executeOnSingleOrMultiple)(onClick.mode, mode => {
+                    interactionManager.handleClickMode(mode);
+                });
+            }
+            if (e.type === "touchend") {
+                setTimeout(() => {
+                    this._mouseTouchFinish();
+                }, engine_1.touchDelay);
+            }
+        };
+        _handleVisibilityChange = () => {
+            this._mouseTouchFinish();
+        };
+        _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;
+            }
+            (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.mouseMoveEvent, handlers.mouseMove, add);
+            (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.touchStartEvent, handlers.touchStart, add);
+            (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.touchMoveEvent, handlers.touchMove, add);
+            if (options.interactivity.events.onClick.enable) {
+                (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.touchEndEvent, handlers.touchEndClick, add);
+                (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.mouseUpEvent, handlers.mouseUp, add);
+                (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.mouseDownEvent, handlers.mouseDown, add);
+            }
+            else {
+                (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.touchEndEvent, handlers.touchEnd, add);
+            }
+            (0, engine_1.manageListener)(interactivityEl, mouseLeaveTmpEvent, handlers.mouseLeave, add);
+            (0, engine_1.manageListener)(interactivityEl, InteractivityConstants_js_1.touchCancelEvent, handlers.touchCancel, add);
+        };
+        _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 = InteractivityConstants_js_1.mouseLeaveEvent;
+            if (detectType === InteractivityDetect_js_1.InteractivityDetect.window) {
+                interactionManager.interactivityData.element = globalThis;
+                mouseLeaveTmpEvent = InteractivityConstants_js_1.mouseOutEvent;
+            }
+            else if (detectType === InteractivityDetect_js_1.InteractivityDetect.parent && canvasEl) {
+                interactionManager.interactivityData.element = canvasEl.parentElement ?? canvasEl.parentNode;
+            }
+            else {
+                interactionManager.interactivityData.element = canvasEl;
+            }
+            this._manageInteractivityListeners(mouseLeaveTmpEvent, add);
+            (0, engine_1.manageListener)(document, engine_1.visibilityChangeEvent, handlers.visibilityChange, add, false);
+        };
+        _mouseDown = () => {
+            const { interactivityData } = this._interactionManager, { mouse } = interactivityData;
+            mouse.clicking = true;
+            mouse.downPosition = mouse.position;
+        };
+        _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 this._clickPositionPlugins) {
+                handled = plugin.clickPositionValid?.(mousePosition) ?? false;
+                if (handled) {
+                    break;
+                }
+            }
+            if (!handled) {
+                this._doMouseTouchClick(e);
+            }
+            mouse.clicking = false;
+        };
+        _mouseTouchFinish = () => {
+            const { interactivityData } = this._interactionManager, { mouse } = interactivityData;
+            delete mouse.position;
+            delete mouse.clickPosition;
+            delete mouse.downPosition;
+            interactivityData.status = InteractivityConstants_js_1.mouseLeaveEvent;
+            mouse.inside = false;
+            mouse.clicking = false;
+        };
+        _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_js_1.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 + engine_1.double * sourceRect.left - (targetRect.left + canvasRect.left),
+                            y: mouseEvent.offsetY + engine_1.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 - engine_1.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 = InteractivityConstants_js_1.mouseMoveEvent;
+        };
+        _touchEnd = e => {
+            const evt = e, touches = Array.from(evt.changedTouches);
+            for (const touch of touches) {
+                this._touches.delete(touch.identifier);
+            }
+            this._mouseTouchFinish();
+        };
+        _touchEndClick = e => {
+            const evt = e, touches = Array.from(evt.changedTouches);
+            for (const touch of touches) {
+                this._touches.delete(touch.identifier);
+            }
+            this._mouseTouchClick(e);
+        };
+        _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);
+        };
+    }
+    exports.InteractivityEventListeners = InteractivityEventListeners;
+});

package/umd/InteractivityPlugin.js

@@ -0,0 +1,97 @@
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+(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", "./Options/Classes/Interactivity.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InteractivityPlugin = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const Interactivity_js_1 = require("./Options/Classes/Interactivity.js");
+    class InteractivityPlugin {
+        id = "interactivity";
+        _engine;
+        constructor(engine) {
+            this._engine = engine;
+        }
+        async getPlugin(container) {
+            const { InteractivityPluginInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./InteractivityPluginInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./InteractivityPluginInstance.js"], resolve_1, reject_1); }).then(__importStar));
+            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_js_1.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 = (0, engine_1.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;
+        }
+    }
+    exports.InteractivityPlugin = InteractivityPlugin;
+});

package/umd/InteractivityPluginInstance.js

@@ -0,0 +1,69 @@
+(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", "./InteractionManager.js", "./Options/Classes/Interactivity.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InteractivityPluginInstance = void 0;
+    const InteractionManager_js_1 = require("./InteractionManager.js");
+    const Interactivity_js_1 = require("./Options/Classes/Interactivity.js");
+    class InteractivityPluginInstance {
+        interactionManager;
+        _container;
+        _engine;
+        constructor(engine, container) {
+            this._container = container;
+            this._engine = engine;
+            this.interactionManager = new InteractionManager_js_1.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_js_1.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();
+        }
+    }
+    exports.InteractivityPluginInstance = InteractivityPluginInstance;
+});

package/umd/InteractorType.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.InteractorType = void 0;
+    var InteractorType;
+    (function (InteractorType) {
+        InteractorType["external"] = "external";
+        InteractorType["particles"] = "particles";
+    })(InteractorType || (exports.InteractorType = InteractorType = {}));
+});

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

@@ -0,0 +1,34 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ClickEvent = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class ClickEvent {
+        enable;
+        mode;
+        constructor() {
+            this.enable = false;
+            this.mode = [];
+        }
+        load(data) {
+            if ((0, engine_1.isNull)(data)) {
+                return;
+            }
+            if (data.enable !== undefined) {
+                this.enable = data.enable;
+            }
+            if (data.mode !== undefined) {
+                this.mode = data.mode;
+            }
+        }
+    }
+    exports.ClickEvent = ClickEvent;
+});

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

@@ -0,0 +1,45 @@
+(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", "../../../DivType.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DivEvent = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const DivType_js_1 = require("../../../DivType.js");
+    class DivEvent {
+        enable;
+        mode;
+        selectors;
+        type;
+        constructor() {
+            this.selectors = [];
+            this.enable = false;
+            this.mode = [];
+            this.type = DivType_js_1.DivType.circle;
+        }
+        load(data) {
+            if ((0, engine_1.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;
+            }
+        }
+    }
+    exports.DivEvent = DivEvent;
+});

package/umd/Options/Classes/Events/Events.js

@@ -0,0 +1,43 @@
+(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", "./ClickEvent.js", "./DivEvent.js", "./HoverEvent.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Events = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const ClickEvent_js_1 = require("./ClickEvent.js");
+    const DivEvent_js_1 = require("./DivEvent.js");
+    const HoverEvent_js_1 = require("./HoverEvent.js");
+    class Events {
+        onClick;
+        onDiv;
+        onHover;
+        constructor() {
+            this.onClick = new ClickEvent_js_1.ClickEvent();
+            this.onDiv = new DivEvent_js_1.DivEvent();
+            this.onHover = new HoverEvent_js_1.HoverEvent();
+        }
+        load(data) {
+            if ((0, engine_1.isNull)(data)) {
+                return;
+            }
+            this.onClick.load(data.onClick);
+            const onDiv = data.onDiv;
+            if (onDiv !== undefined) {
+                this.onDiv = (0, engine_1.executeOnSingleOrMultiple)(onDiv, t => {
+                    const tmp = new DivEvent_js_1.DivEvent();
+                    tmp.load(t);
+                    return tmp;
+                });
+            }
+            this.onHover.load(data.onHover);
+        }
+    }
+    exports.Events = Events;
+});

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

@@ -0,0 +1,34 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.HoverEvent = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class HoverEvent {
+        enable;
+        mode;
+        constructor() {
+            this.enable = false;
+            this.mode = [];
+        }
+        load(data) {
+            if ((0, engine_1.isNull)(data)) {
+                return;
+            }
+            if (data.enable !== undefined) {
+                this.enable = data.enable;
+            }
+            if (data.mode !== undefined) {
+                this.mode = data.mode;
+            }
+        }
+    }
+    exports.HoverEvent = HoverEvent;
+});

package/umd/Options/Classes/Interactivity.js

@@ -0,0 +1,39 @@
+(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", "./Events/Events.js", "../../InteractivityDetect.js", "./Modes/Modes.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Interactivity = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    const Events_js_1 = require("./Events/Events.js");
+    const InteractivityDetect_js_1 = require("../../InteractivityDetect.js");
+    const Modes_js_1 = require("./Modes/Modes.js");
+    class Interactivity {
+        detectsOn;
+        events;
+        modes;
+        constructor(engine, container) {
+            this.detectsOn = InteractivityDetect_js_1.InteractivityDetect.window;
+            this.events = new Events_js_1.Events();
+            this.modes = new Modes_js_1.Modes(engine, container);
+        }
+        load(data) {
+            if ((0, engine_1.isNull)(data)) {
+                return;
+            }
+            const detectsOn = data.detectsOn;
+            if (detectsOn !== undefined) {
+                this.detectsOn = detectsOn;
+            }
+            this.events.load(data.events);
+            this.modes.load(data.modes);
+        }
+    }
+    exports.Interactivity = Interactivity;
+});