@tsparticles/plugin-interactivity 4.0.0-alpha.4

package/284.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 284.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_interactivity=this.webpackChunk_tsparticles_plugin_interactivity||[]).push([[284],{284(t,i,e){e.d(i,{InteractivityPlugin:()=>o});var n=e(303),s=e(688);class o{constructor(t){this._engine=t,this.id="interactivity"}async getPlugin(t){const{InteractivityPluginInstance:i}=await e.e(721).then(e.bind(e,721));return new i(this._engine,t)}loadOptions(t,i,e){if(!this.needsPlugin())return;let n=i.interactivity;n?.load||(i.interactivity=n=new s.k(this._engine,t)),n.load(e?.interactivity);const o=this._engine.interactors?.get(t);if(o)for(const t of o)t.loadOptions&&t.loadOptions(i,e)}loadParticlesOptions(t,i,e){e?.interactivity&&(i.interactivity=(0,n.deepExtend)({},e.interactivity));const s=this._engine.interactors?.get(t);if(s)for(const t of s)t.loadParticlesOptions&&t.loadParticlesOptions(i,e)}needsPlugin(){return!0}}},688(t,i,e){e.d(i,{k:()=>d});var n=e(303);class s{constructor(){this.enable=!1,this.mode=[]}load(t){(0,n.isNull)(t)||(void 0!==t.enable&&(this.enable=t.enable),void 0!==t.mode&&(this.mode=t.mode))}}var o=e(897);class a{constructor(){this.enable=!1,this.mode=[]}load(t){(0,n.isNull)(t)||(void 0!==t.enable&&(this.enable=t.enable),void 0!==t.mode&&(this.mode=t.mode))}}class l{constructor(){this.onClick=new s,this.onDiv=new o.G,this.onHover=new a}load(t){if((0,n.isNull)(t))return;this.onClick.load(t.onClick);const i=t.onDiv;void 0!==i&&(this.onDiv=(0,n.executeOnSingleOrMultiple)(i,(t=>{const i=new o.G;return i.load(t),i}))),this.onHover.load(t.onHover)}}var c=e(784),r=e(617);class d{constructor(t,i){this.detectsOn=c.h.window,this.events=new l,this.modes=new r.d(t,i)}load(t){if((0,n.isNull)(t))return;const i=t.detectsOn;void 0!==i&&(this.detectsOn=i),this.events.load(t.events),this.modes.load(t.modes)}}}}]);

package/284.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Interactivity Plugin v4.0.0-alpha.4 by Matteo Bruni */

package/721.min.js

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

@@ -0,0 +1 @@
+/*! tsParticles Interactivity Plugin v4.0.0-alpha.4 by Matteo Bruni */

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,7 @@
+import { InteractorType } from "./InteractorType.js";
+export class ExternalInteractorBase {
+    constructor(container) {
+        this.type = InteractorType.external;
+        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,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/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,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/browser/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;
+    }
+}