@tsparticles/plugin-interactivity 4.0.0-alpha.14

package/19.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_interactivity=this.webpackChunk_tsparticles_plugin_interactivity||[]).push([[19],{19(e,t,i){i.d(t,{InteractivityPlugin:()=>o});var n=i(303),s=i(210);class o{id="interactivity";_engine;constructor(e){this._engine=e}async getPlugin(e){let{InteractivityPluginInstance:t}=await i.e(74).then(i.bind(i,74));return new t(this._engine,e)}loadOptions(e,t,i){if(!this.needsPlugin())return;let n=t.interactivity;n?.load||(t.interactivity=n=new s.k(this._engine,e)),n.load(i?.interactivity);let o=this._engine.interactors?.get(e);if(o)for(let e of o)e.loadOptions&&e.loadOptions(t,i)}loadParticlesOptions(e,t,i){i?.interactivity&&(t.interactivity=(0,n.deepExtend)({},i.interactivity));let s=this._engine.interactors?.get(e);if(s)for(let e of s)e.loadParticlesOptions&&e.loadParticlesOptions(t,i)}needsPlugin(){return!0}}},210(e,t,i){i.d(t,{k:()=>c});var n=i(303);class s{enable;mode;constructor(){this.enable=!1,this.mode=[]}load(e){(0,n.isNull)(e)||(void 0!==e.enable&&(this.enable=e.enable),void 0!==e.mode&&(this.mode=e.mode))}}var o=i(570);class l{enable;mode;constructor(){this.enable=!1,this.mode=[]}load(e){(0,n.isNull)(e)||(void 0!==e.enable&&(this.enable=e.enable),void 0!==e.mode&&(this.mode=e.mode))}}class a{onClick;onDiv;onHover;constructor(){this.onClick=new s,this.onDiv=new o.G,this.onHover=new l}load(e){if((0,n.isNull)(e))return;this.onClick.load(e.onClick);let t=e.onDiv;void 0!==t&&(this.onDiv=(0,n.executeOnSingleOrMultiple)(t,e=>{let t=new o.G;return t.load(e),t})),this.onHover.load(e.onHover)}}var r=i(551),d=i(870);class c{detectsOn;events;modes;constructor(e,t){this.detectsOn=r.h.window,this.events=new a,this.modes=new d.d(e,t)}load(e){if((0,n.isNull)(e))return;let t=e.detectsOn;void 0!==t&&(this.detectsOn=t),this.events.load(e.events),this.modes.load(e.modes)}}}}]);

package/74.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_interactivity=this.webpackChunk_tsparticles_plugin_interactivity||[]).push([[74],{74(e,t,i){i.d(t,{InteractivityPluginInstance:()=>h});var n=i(303),s=i(311),a=i(551);class r{_canPush=!0;_clickPositionPlugins;_container;_handlers;_interactionManager;_touches;constructor(e,t){this._container=e,this._clickPositionPlugins=[],this._interactionManager=t,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(!0)}init(){for(let e of(this._clickPositionPlugins.length=0,this._container.plugins.filter(e=>!!e.clickPositionValid)))this._clickPositionPlugins.push(e)}removeListeners(){this._manageListeners(!1)}_doMouseTouchClick=e=>{let t=this._container,i=this._interactionManager,s=t.actualOptions;if(this._canPush){let e=i.interactivityData.mouse,t=e.position;if(!t)return;e.clickPosition={...t},e.clickTime=performance.now();let a=s.interactivity?.events.onClick;if(!a?.mode)return;(0,n.executeOnSingleOrMultiple)(a.mode,e=>{i.handleClickMode(e)})}"touchend"===e.type&&setTimeout(()=>{this._mouseTouchFinish()},n.touchDelay)};_handleVisibilityChange=()=>{this._mouseTouchFinish()};_manageInteractivityListeners=(e,t)=>{let i=this._handlers,a=this._container,r=this._interactionManager,o=a.actualOptions,c=r.interactivityData.element;if(!c)return;let l=a.canvas;l.setPointerEvents(c===l.element?"initial":"none"),(o.interactivity?.events.onHover.enable||o.interactivity?.events.onClick.enable)&&((0,n.manageListener)(c,s.Rb,i.mouseMove,t),(0,n.manageListener)(c,s.s7,i.touchStart,t),(0,n.manageListener)(c,s.DG,i.touchMove,t),o.interactivity.events.onClick.enable?((0,n.manageListener)(c,s.Bp,i.touchEndClick,t),(0,n.manageListener)(c,s.vo,i.mouseUp,t),(0,n.manageListener)(c,s.ms,i.mouseDown,t)):(0,n.manageListener)(c,s.Bp,i.touchEnd,t),(0,n.manageListener)(c,e,i.mouseLeave,t),(0,n.manageListener)(c,s.G3,i.touchCancel,t))};_manageListeners=e=>{let t=this._handlers,i=this._container,r=this._interactionManager,o=i.actualOptions,c=o.interactivity?.detectsOn,l=i.canvas.element,h=s.Z0;c===a.h.window?(r.interactivityData.element=globalThis,h=s.sf):c===a.h.parent&&l?r.interactivityData.element=l.parentElement??l.parentNode:r.interactivityData.element=l,this._manageInteractivityListeners(h,e),(0,n.manageListener)(document,n.visibilityChangeEvent,t.visibilityChange,e,!1)};_mouseDown=()=>{let{interactivityData:e}=this._interactionManager,{mouse:t}=e;t.clicking=!0,t.downPosition=t.position};_mouseTouchClick=e=>{let t=this._container,i=this._interactionManager,n=t.actualOptions,{mouse:s}=i.interactivityData;s.inside=!0;let a=!1,r=s.position;if(r&&n.interactivity?.events.onClick.enable){for(let e of this._clickPositionPlugins)if(a=e.clickPositionValid?.(r)??!1)break;a||this._doMouseTouchClick(e),s.clicking=!1}};_mouseTouchFinish=()=>{let{interactivityData:e}=this._interactionManager,{mouse:t}=e;delete t.position,delete t.clickPosition,delete t.downPosition,e.status=s.Z0,t.inside=!1,t.clicking=!1};_mouseTouchMove=e=>{let t,i=this._container,r=this._interactionManager,o=i.actualOptions,c=r.interactivityData,l=i.canvas.element;if(!c.element)return;if(c.mouse.inside=!0,e.type.startsWith("pointer"))if(this._canPush=!0,c.element===globalThis){if(l){let i=l.getBoundingClientRect();t={x:e.clientX-i.left,y:e.clientY-i.top}}}else if(o.interactivity?.detectsOn===a.h.parent){let i=e.target,s=e.currentTarget;if(l){let a=i.getBoundingClientRect(),r=s.getBoundingClientRect(),o=l.getBoundingClientRect();t={x:e.offsetX+n.double*a.left-(r.left+o.left),y:e.offsetY+n.double*a.top-(r.top+o.top)}}else t={x:e.offsetX,y:e.offsetY}}else e.target===l&&(t={x:e.offsetX,y:e.offsetY});else if(this._canPush="touchmove"!==e.type,l){let i=e.touches[e.touches.length-n.lengthOffset],s=l.getBoundingClientRect();if(!i)return;t={x:i.clientX-s.left,y:i.clientY-s.top}}let h=i.retina.pixelRatio;t&&(t.x*=h,t.y*=h),c.mouse.position=t,c.status=s.Rb};_touchEnd=e=>{for(let t of Array.from(e.changedTouches))this._touches.delete(t.identifier);this._mouseTouchFinish()};_touchEndClick=e=>{for(let t of Array.from(e.changedTouches))this._touches.delete(t.identifier);this._mouseTouchClick(e)};_touchStart=e=>{for(let t of Array.from(e.changedTouches))this._touches.set(t.identifier,performance.now());this._mouseTouchMove(e)}}var o=i(520);class c{container;interactivityData;_clickHandlers;_engine;_eventListeners;_externalInteractors;_interactors;_intersectionObserver;_particleInteractors;constructor(e,t){this.container=t,this._engine=e,this._interactors=[],this._externalInteractors=[],this._particleInteractors=[],this._clickHandlers=new Map,this._eventListeners=new r(t,this),this.interactivityData={mouse:{clicking:!1,inside:!1}},this._intersectionObserver=(0,n.safeIntersectionObserver)(e=>{this._intersectionManager(e)})}addClickHandler(e){let{container:t,interactivityData:i}=this;if(t.destroyed)return;let a=i.element;if(!a)return;let r=(i,n,s)=>{if(t.destroyed)return;let a=t.retina.pixelRatio,r={x:n.x*a,y:n.y*a};e(i,t.particles.quadTree.queryCircle(r,s*a))},o=!1,c=!1;for(let[e,i]of(this._clickHandlers.set(s.xO,e=>{if(t.destroyed)return;let i={x:e.offsetX,y:e.offsetY};r(e,i,n.clickRadius)}),this._clickHandlers.set(s.s7,()=>{t.destroyed||(o=!0,c=!1)}),this._clickHandlers.set(s.DG,()=>{t.destroyed||(c=!0)}),this._clickHandlers.set(s.Bp,e=>{if(!t.destroyed){if(o&&!c){let i=e.touches[e.touches.length-n.touchEndLengthOffset];if(!i)return;let s=t.canvas.element,a=s?s.getBoundingClientRect():void 0;r(e,{x:i.clientX-(a?a.left:n.minCoordinate),y:i.clientY-(a?a.top:n.minCoordinate)},Math.max(i.radiusX,i.radiusY))}o=!1,c=!1}}),this._clickHandlers.set(s.G3,()=>{t.destroyed||(o=!1,c=!1)}),this._clickHandlers))a.addEventListener(e,i)}addListeners(){this._eventListeners.addListeners()}clearClickHandlers(){let{container:e,interactivityData:t}=this;if(!e.destroyed){for(let[e,i]of this._clickHandlers)t.element?.removeEventListener(e,i);this._clickHandlers.clear()}}externalInteract(e){for(let t of this._externalInteractors){let{interactivityData:i}=this;t.isEnabled(i)&&t.interact(i,e)}}handleClickMode(e){if(this.container.destroyed)return;let{interactivityData:t}=this;for(let i of this._externalInteractors)i.handleClickMode?.(e,t)}async init(){let e=await this._engine.getInteractors?.(this.container,!0);if(e)for(let t of(this._interactors=e,this._externalInteractors=[],this._particleInteractors=[],this._eventListeners.init(),this._interactors)){switch(t.type){case o.e.external:this._externalInteractors.push(t);break;case o.e.particles:this._particleInteractors.push(t)}t.init()}}particlesInteract(e,t){let{interactivityData:i}=this;for(let i of this._externalInteractors)i.clear(e,t);for(let n of this._particleInteractors)n.isEnabled(e,i)&&n.interact(e,i,t)}removeListeners(){this._eventListeners.removeListeners()}reset(e){let{interactivityData:t}=this;for(let i of this._externalInteractors)i.isEnabled(t)&&i.reset(t,e);for(let i of this._particleInteractors)i.isEnabled(e,t)&&i.reset(t,e)}startObserving(){let{interactivityData:e}=this;e.element instanceof HTMLElement&&this._intersectionObserver&&this._intersectionObserver.observe(e.element)}stopObserving(){let{interactivityData:e}=this;e.element instanceof HTMLElement&&this._intersectionObserver&&this._intersectionObserver.unobserve(e.element)}_intersectionManager=e=>{let{container:t}=this;if(!t.destroyed&&t.actualOptions.pauseOnOutsideViewport)for(let i of e)i.target===this.interactivityData.element&&(i.isIntersecting?t.play():t.pause())}}var l=i(210);class h{interactionManager;_container;_engine;constructor(e,t){this._container=t,this._engine=e,this.interactionManager=new c(e,t),this._container.addClickHandler=e=>{this.interactionManager.addClickHandler(e)}}addClickHandler(e){this.interactionManager.addClickHandler(e)}clearClickHandlers(){this.interactionManager.clearClickHandlers()}destroy(){this.clearClickHandlers(),this._engine.interactors?.delete(this._container)}particleCreated(e){let t=new l.k(this._engine,this._container);t.load(this._container.actualOptions.interactivity),t.load(e.options.interactivity),e.interactivity=t}particleReset(e){this.interactionManager.reset(e)}postParticleUpdate(e,t){this.interactionManager.particlesInteract(e,t)}postUpdate(e){this.interactionManager.externalInteract(e)}async preInit(){await this.interactionManager.init()}async redrawInit(){await this.interactionManager.init()}start(){return this.interactionManager.addListeners(),this.interactionManager.startObserving(),Promise.resolve()}stop(){this.interactionManager.removeListeners(),this.interactionManager.stopObserving()}}}}]);

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Interactivity Plugin
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-interactivity/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-interactivity)
+[![npmjs](https://badge.fury.io/js/@tsparticles/plugin-interactivity.svg)](https://www.npmjs.com/package/@tsparticles/plugin-interactivity)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/plugin-interactivity)](https://www.npmjs.com/package/@tsparticles/plugin-interactivity) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/tsparticles/tsparticles) plugin for handling interactivity sickness CSS value.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.plugin.interactivity.min.js` file will export the function to load the plugin:
+
+```javascript
+loadInteractivityPlugin;
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the plugin like this:
+
+```javascript
+(async () => {
+  await loadInteractivityPlugin(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      /* options */
+    },
+  });
+})();
+```
+
+### ESM / CommonJS
+
+This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
+
+```shell
+$ npm install @tsparticles/plugin-interactivity
+```
+
+or
+
+```shell
+$ yarn add @tsparticles/plugin-interactivity
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("@tsparticles/engine");
+const { loadInteractivityPlugin } = require("@tsparticles/plugin-interactivity");
+
+(async () => {
+  await loadInteractivityPlugin(tsParticles);
+})();
+```
+
+or
+
+```javascript
+import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
+
+(async () => {
+  await loadInteractivityPlugin(tsParticles);
+})();
+```

package/browser/DivType.js

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

package/browser/ExternalInteractorBase.js

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

package/browser/IExternalInteractor.js

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

package/browser/IInteractivityData.js

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

package/browser/IInteractor.js

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

package/browser/IMouseData.js

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

package/browser/IParticlesInteractor.js

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

package/browser/InteractionManager.js

@@ -0,0 +1,212 @@
+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 {
+    container;
+    interactivityData;
+    _clickHandlers;
+    _engine;
+    _eventListeners;
+    _externalInteractors;
+    _interactors;
+    _intersectionObserver;
+    _particleInteractors;
+    constructor(engine, container) {
+        this.container = container;
+        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 = [];
+        this._eventListeners.init();
+        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);
+        }
+    }
+    _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();
+            }
+        }
+    };
+}

package/browser/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/browser/InteractivityDetect.js

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

package/browser/InteractivityEventListeners.js

@@ -0,0 +1,244 @@
+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 {
+    _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;
+            }
+            executeOnSingleOrMultiple(onClick.mode, mode => {
+                interactionManager.handleClickMode(mode);
+            });
+        }
+        if (e.type === "touchend") {
+            setTimeout(() => {
+                this._mouseTouchFinish();
+            }, 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;
+        }
+        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);
+    };
+    _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);
+    };
+    _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 = 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.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;
+    };
+    _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);
+    };
+}

package/browser/InteractivityPlugin.js

@@ -0,0 +1,49 @@
+import { deepExtend, } from "@tsparticles/engine";
+import { Interactivity } from "./Options/Classes/Interactivity.js";
+export class InteractivityPlugin {
+    id = "interactivity";
+    _engine;
+    constructor(engine) {
+        this._engine = engine;
+    }
+    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;
+    }
+}