@tsparticles/plugin-absorbers 4.0.0-alpha.3 → 4.0.0-alpha.5

package/215.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 215.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_absorbers=this.webpackChunk_tsparticles_plugin_absorbers||[]).push([[215],{104(i,t,s){s.d(t,{h:()=>a});var o=s(303);class e{constructor(){this.radius=0,this.mass=0}load(i){(0,o.isNull)(i)||(void 0!==i.mass&&(this.mass=i.mass),void 0!==i.radius&&(this.radius=i.radius))}}class n extends o.ValueWithRandom{constructor(){super(),this.density=5,this.value=50,this.limit=new e}load(i){(0,o.isNull)(i)||(super.load(i),void 0!==i.density&&(this.density=i.density),(0,o.isNumber)(i.limit)?this.limit.radius=i.limit:this.limit.load(i.limit))}}class a{constructor(){this.color=new o.OptionsColor,this.color.value="#000000",this.draggable=!1,this.opacity=1,this.destroy=!0,this.orbits=!1,this.size=new n}load(i){(0,o.isNull)(i)||(void 0!==i.color&&(this.color=o.OptionsColor.create(this.color,i.color)),void 0!==i.draggable&&(this.draggable=i.draggable),this.name=i.name,void 0!==i.opacity&&(this.opacity=i.opacity),void 0!==i.position&&(this.position={},void 0!==i.position.x&&(this.position.x=(0,o.setRangeValue)(i.position.x)),void 0!==i.position.y&&(this.position.y=(0,o.setRangeValue)(i.position.y))),void 0!==i.size&&this.size.load(i.size),void 0!==i.destroy&&(this.destroy=i.destroy),void 0!==i.orbits&&(this.orbits=i.orbits))}}},215(i,t,s){s.d(t,{AbsorberInstance:()=>a});var o=s(303),e=s(104);const n=o.doublePI;class a{constructor(i,t,s,a){this._calcPosition=()=>{const i=(0,o.calcPositionOrRandomFromSizeRanged)({size:this._container.canvas.size,position:this.options.position});return o.Vector.create(i.x,i.y)},this._updateParticlePosition=(i,t)=>{if(i.destroyed)return;const s=this._container,e=s.canvas.size;if(i.needsNewPosition){const t=(0,o.calcPositionOrRandomFromSize)({size:e});i.position.setTo(t),i.velocity.setTo(i.initialVelocity),i.absorberOrbit=void 0,i.needsNewPosition=!1}if(this.options.orbits){if(void 0===i.absorberOrbit&&(i.absorberOrbit=o.Vector.origin,i.absorberOrbit.length=(0,o.getDistance)(i.getPosition(),this.position),i.absorberOrbit.angle=(0,o.getRandom)()*n),i.absorberOrbit.length<=this.size&&!this.options.destroy){const t=Math.min(e.width,e.height),s=1,n=.1,a=.2;i.absorberOrbit.length=t*(s+((0,o.getRandom)()*a-n))}i.absorberOrbitDirection??=i.velocity.x>=0?o.RotateDirection.clockwise:o.RotateDirection.counterClockwise;const a=i.absorberOrbit.length,r=i.absorberOrbit.angle,h=i.absorberOrbitDirection;i.velocity.setTo(o.Vector.origin);const c={x:h===o.RotateDirection.clockwise?Math.cos:Math.sin,y:h===o.RotateDirection.clockwise?Math.sin:Math.cos};i.position.x=this.position.x+a*c.x(r),i.position.y=this.position.y+a*c.y(r),i.absorberOrbit.length-=t.length,i.absorberOrbit.angle+=(i.retina.moveSpeed??0)*s.retina.pixelRatio/o.percentDenominator*s.retina.reduceFactor}else{const s=o.Vector.origin;s.length=t.length,s.angle=t.angle,i.velocity.addTo(s)}},this._container=t,this._engine=i,this.initialPosition=a?o.Vector.create(a.x,a.y):void 0,s instanceof e.h?this.options=s:(this.options=new e.h,this.options.load(s)),this.name=this.options.name,this.opacity=this.options.opacity,this.size=(0,o.getRangeValue)(this.options.size.value)*t.retina.pixelRatio,this.mass=this.size*this.options.size.density*t.retina.reduceFactor;const r=this.options.size.limit;this.limit={radius:r.radius*t.retina.pixelRatio*t.retina.reduceFactor,mass:r.mass},this.color=(0,o.rangeColorToRgb)(this._engine,this.options.color)??{b:0,g:0,r:0},this.position=this.initialPosition?.copy()??this._calcPosition()}attract(i,t){const s=this._container,e=this.options,n=i.getPosition(),{dx:a,dy:r,distance:h}=(0,o.getDistances)(this.position,n),c=o.Vector.create(a,r);if(c.length=this.mass/Math.pow(h,2)*s.retina.reduceFactor,h<this.size+i.getRadius()){const o=.033*i.getRadius()*s.retina.pixelRatio*t.factor;this.size>i.getRadius()&&h<this.size-i.getRadius()||void 0!==i.absorberOrbit&&i.absorberOrbit.length<0?e.destroy?i.destroy():(i.needsNewPosition=!0,this._updateParticlePosition(i,c)):(e.destroy&&(i.size.value-=o),this._updateParticlePosition(i,c)),(this.limit.radius<=0||this.size<this.limit.radius)&&(this.size+=o),(this.limit.mass<=0||this.mass<this.limit.mass)&&(this.mass+=o*this.options.size.density*s.retina.reduceFactor)}else this._updateParticlePosition(i,c)}draw(i){i.translate(this.position.x,this.position.y),i.beginPath(),i.arc(o.originPoint.x,o.originPoint.y,this.size,0,n,!1),i.closePath(),i.fillStyle=(0,o.getStyleFromRgb)(this.color,this._container.hdr,this.opacity),i.fill()}resize(){const i=this.initialPosition;this.position=i&&(0,o.isPointInside)(i,this._container.canvas.size,o.Vector.origin)?i:this._calcPosition()}}}}]);

package/215.min.js.LICENSE.txt

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

package/384.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 384.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_absorbers=this.webpackChunk_tsparticles_plugin_absorbers||[]).push([[384],{104(s,i,t){t.d(i,{h:()=>a});var o=t(303);class e{constructor(){this.radius=0,this.mass=0}load(s){(0,o.isNull)(s)||(void 0!==s.mass&&(this.mass=s.mass),void 0!==s.radius&&(this.radius=s.radius))}}class r extends o.ValueWithRandom{constructor(){super(),this.density=5,this.value=50,this.limit=new e}load(s){(0,o.isNull)(s)||(super.load(s),void 0!==s.density&&(this.density=s.density),(0,o.isNumber)(s.limit)?this.limit.radius=s.limit:this.limit.load(s.limit))}}class a{constructor(){this.color=new o.OptionsColor,this.color.value="#000000",this.draggable=!1,this.opacity=1,this.destroy=!0,this.orbits=!1,this.size=new r}load(s){(0,o.isNull)(s)||(void 0!==s.color&&(this.color=o.OptionsColor.create(this.color,s.color)),void 0!==s.draggable&&(this.draggable=s.draggable),this.name=s.name,void 0!==s.opacity&&(this.opacity=s.opacity),void 0!==s.position&&(this.position={},void 0!==s.position.x&&(this.position.x=(0,o.setRangeValue)(s.position.x)),void 0!==s.position.y&&(this.position.y=(0,o.setRangeValue)(s.position.y))),void 0!==s.size&&this.size.load(s.size),void 0!==s.destroy&&(this.destroy=s.destroy),void 0!==s.orbits&&(this.orbits=s.orbits))}}},384(s,i,t){t.d(i,{AbsorbersPlugin:()=>r});var o=t(303),e=t(104);class r{constructor(s){this.id="absorbers",this._instancesManager=s}async getPlugin(s){const{AbsorbersPluginInstance:i}=await t.e(903).then(t.bind(t,903));return new i(s,this._instancesManager)}loadOptions(s,i,t){(this.needsPlugin(i)||this.needsPlugin(t))&&t?.absorbers&&(i.absorbers=(0,o.executeOnSingleOrMultiple)(t.absorbers,(s=>{const i=new e.h;return i.load(s),i})))}needsPlugin(s){if(!s)return!1;const i=s.absorbers;return(0,o.isArray)(i)?!!i.length:!!i}}}}]);

package/384.min.js.LICENSE.txt

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

package/688.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 688.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_absorbers=this.webpackChunk_tsparticles_plugin_absorbers||[]).push([[688],{104(i,s,t){t.d(s,{h:()=>n});var o=t(303);class r{constructor(){this.radius=0,this.mass=0}load(i){(0,o.isNull)(i)||(void 0!==i.mass&&(this.mass=i.mass),void 0!==i.radius&&(this.radius=i.radius))}}class e extends o.ValueWithRandom{constructor(){super(),this.density=5,this.value=50,this.limit=new r}load(i){(0,o.isNull)(i)||(super.load(i),void 0!==i.density&&(this.density=i.density),(0,o.isNumber)(i.limit)?this.limit.radius=i.limit:this.limit.load(i.limit))}}class n{constructor(){this.color=new o.OptionsColor,this.color.value="#000000",this.draggable=!1,this.opacity=1,this.destroy=!0,this.orbits=!1,this.size=new e}load(i){(0,o.isNull)(i)||(void 0!==i.color&&(this.color=o.OptionsColor.create(this.color,i.color)),void 0!==i.draggable&&(this.draggable=i.draggable),this.name=i.name,void 0!==i.opacity&&(this.opacity=i.opacity),void 0!==i.position&&(this.position={},void 0!==i.position.x&&(this.position.x=(0,o.setRangeValue)(i.position.x)),void 0!==i.position.y&&(this.position.y=(0,o.setRangeValue)(i.position.y))),void 0!==i.size&&this.size.load(i.size),void 0!==i.destroy&&(this.destroy=i.destroy),void 0!==i.orbits&&(this.orbits=i.orbits))}}},688(i,s,t){t.d(s,{AbsorbersInteractor:()=>a});var o=t(702),r=t(303),e=t(104);const n="absorbers";class a extends o.ExternalInteractorBase{constructor(i,s){super(i),this.dragging=!1,this._instancesManager=s,this._instancesManager.initContainer(i),this.handleClickMode=(i,t)=>{const o=this.container,a=o.actualOptions.interactivity.modes.absorbers;if(!a||i!==n)return;const{clickPosition:c}=t.mouse;if(c){if(s.getArray(this.container).some((i=>(0,r.getDistance)(i.position,c)<i.size)))return}const d=(0,r.itemFromArray)(a)??new e.h;this._instancesManager.addAbsorber(o,d,c)}}clear(){}init(){}interact(i,s){for(const t of this.container.particles.filter((s=>this.isEnabled(i,s))))for(const o of this._instancesManager.getArray(this.container)){if(o.options.draggable){const s=i.mouse;if(s.clicking&&s.downPosition){(0,r.getDistance)(o.position,s.downPosition)<=o.size&&(this.dragging=!0,this.draggingAbsorber=o)}else this.dragging=!1,this.draggingAbsorber=void 0;this.dragging&&this.draggingAbsorber==o&&s.position&&(o.position.x=s.position.x,o.position.y=s.position.y)}if(o.attract(t,s),t.destroyed)break}}isEnabled(i,s){const t=this.container.actualOptions,o=i.mouse,e=(s?.interactivity??t.interactivity).events;return!(!o.clickPosition||!e.onClick.enable)&&(0,r.isInArray)(n,e.onClick.mode)}loadModeOptions(i,...s){i.absorbers??=[];for(const t of s)if(t)if((0,r.isArray)(t.absorbers))for(const s of t.absorbers){const t=new e.h;t.load(s),i.absorbers.push(t)}else{const s=new e.h;s.load(t.absorbers),i.absorbers.push(s)}}reset(){}}}}]);

package/688.min.js.LICENSE.txt

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

package/903.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 903.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_absorbers=this.webpackChunk_tsparticles_plugin_absorbers||[]).push([[903],{903(a,s,t){t.d(s,{AbsorbersPluginInstance:()=>i});var n=t(303);class i{constructor(a,s){this._container=a,this._instancesManager=s,this._instancesManager.initContainer(a)}draw(a){for(const s of this._instancesManager.getArray(this._container))s.draw(a)}async init(){const a=this._container.actualOptions.absorbers,s=(0,n.executeOnSingleOrMultiple)(a,(async a=>{await this._instancesManager.addAbsorber(this._container,a)}));(0,n.isArray)(s)?await Promise.all(s):await s}particleUpdate(a,s){for(const t of this._instancesManager.getArray(this._container))if(t.attract(a,s),a.destroyed)break}resize(){for(const a of this._instancesManager.getArray(this._container))a.resize()}stop(){this._instancesManager.clear(this._container)}}}}]);

package/903.min.js.LICENSE.txt

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

package/980.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 980.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_absorbers=this.webpackChunk_tsparticles_plugin_absorbers||[]).push([[980],{980(r,s,t){t.d(s,{AbsorbersInstancesManager:()=>n});var e=t(303);class n{constructor(r){this._containerArrays=new Map,this._engine=r}async addAbsorber(r,s,e){const{AbsorberInstance:n}=await t.e(215).then(t.bind(t,215)),i=new n(this._engine,r,s,e);return this.getArray(r).push(i),i}clear(r){this.initContainer(r),this._containerArrays.set(r,[])}getArray(r){this.initContainer(r);let s=this._containerArrays.get(r);return s||(s=[],this._containerArrays.set(r,s)),s}initContainer(r){this._containerArrays.has(r)||(this._containerArrays.set(r,[]),r.getAbsorber??=s=>{const t=this.getArray(r);return void 0===s||(0,e.isNumber)(s)?t[s??0]:t.find((r=>r.name===s))},r.addAbsorber??=(s,t)=>this.addAbsorber(r,s,t))}removeAbsorber(r,s){const t=this.getArray(r).indexOf(s);t>=0&&this.getArray(r).splice(t,1)}}}}]);

package/980.min.js.LICENSE.txt

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

package/browser/AbsorberInstance.js

@@ -1,8 +1,8 @@
-import { RotateDirection, Vector, calcPositionOrRandomFromSize, calcPositionOrRandomFromSizeRanged, getDistance, getDistances, getRandom, getRangeValue, getStyleFromRgb, isPointInside, originPoint, percentDenominator, rangeColorToRgb, } from "@tsparticles/engine";
+import { RotateDirection, Vector, calcPositionOrRandomFromSize, calcPositionOrRandomFromSizeRanged, doublePI, getDistance, getDistances, getRandom, getRangeValue, getStyleFromRgb, isPointInside, originPoint, percentDenominator, rangeColorToRgb, } from "@tsparticles/engine";
 import { Absorber } from "./Options/Classes/Absorber.js";
-const squareExp = 2, absorbFactor = 0.033, minOrbitLength = 0, minRadius = 0, minMass = 0, minAngle = 0, double = 2, maxAngle = Math.PI * double, minVelocity = 0;
+const squareExp = 2, absorbFactor = 0.033, minOrbitLength = 0, minRadius = 0, minMass = 0, minAngle = 0, maxAngle = doublePI, minVelocity = 0;
 export class AbsorberInstance {
-    constructor(container, engine, options, position) {
+    constructor(engine, container, options, position) {
         this._calcPosition = () => {
             const exactPosition = calcPositionOrRandomFromSizeRanged({
                 size: this._container.canvas.size,
@@ -64,7 +64,6 @@ export class AbsorberInstance {
             this.options = new Absorber();
             this.options.load(options);
         }
-        this.dragging = false;
         this.name = this.options.name;
         this.opacity = this.options.opacity;
         this.size = getRangeValue(this.options.size.value) * container.retina.pixelRatio;
@@ -81,28 +80,11 @@ export class AbsorberInstance {
         };
         this.position = this.initialPosition?.copy() ?? this._calcPosition();
     }
-    attract(particle) {
-        const container = this._container, options = this.options;
-        if (options.draggable) {
-            const mouse = container.interactivity.mouse;
-            if (mouse.clicking && mouse.downPosition) {
-                const mouseDist = getDistance(this.position, mouse.downPosition);
-                if (mouseDist <= this.size) {
-                    this.dragging = true;
-                }
-            }
-            else {
-                this.dragging = false;
-            }
-            if (this.dragging && mouse.position) {
-                this.position.x = mouse.position.x;
-                this.position.y = mouse.position.y;
-            }
-        }
-        const pos = particle.getPosition(), { dx, dy, distance } = getDistances(this.position, pos), v = Vector.create(dx, dy);
+    attract(particle, delta) {
+        const container = this._container, options = this.options, pos = particle.getPosition(), { dx, dy, distance } = getDistances(this.position, pos), v = Vector.create(dx, dy);
         v.length = (this.mass / Math.pow(distance, squareExp)) * container.retina.reduceFactor;
         if (distance < this.size + particle.getRadius()) {
-            const sizeFactor = particle.getRadius() * absorbFactor * container.retina.pixelRatio;
+            const sizeFactor = particle.getRadius() * absorbFactor * container.retina.pixelRatio * delta.factor;
             if ((this.size > particle.getRadius() && distance < this.size - particle.getRadius()) ||
                 (particle.absorberOrbit !== undefined && particle.absorberOrbit.length < minOrbitLength)) {
                 if (options.destroy) {

package/browser/AbsorbersInstancesManager.js

@@ -0,0 +1,47 @@
+import { isNumber } from "@tsparticles/engine";
+const defaultIndex = 0;
+export class AbsorbersInstancesManager {
+    constructor(engine) {
+        this._containerArrays = new Map();
+        this._engine = engine;
+    }
+    async addAbsorber(container, options, position) {
+        const { AbsorberInstance } = await import("./AbsorberInstance.js"), absorber = new AbsorberInstance(this._engine, container, options, position), array = this.getArray(container);
+        array.push(absorber);
+        return absorber;
+    }
+    clear(container) {
+        this.initContainer(container);
+        this._containerArrays.set(container, []);
+    }
+    getArray(container) {
+        this.initContainer(container);
+        let array = this._containerArrays.get(container);
+        if (!array) {
+            array = [];
+            this._containerArrays.set(container, array);
+        }
+        return array;
+    }
+    initContainer(container) {
+        if (this._containerArrays.has(container)) {
+            return;
+        }
+        this._containerArrays.set(container, []);
+        container.getAbsorber ??= (idxOrName) => {
+            const array = this.getArray(container);
+            return idxOrName === undefined || isNumber(idxOrName)
+                ? array[idxOrName ?? defaultIndex]
+                : array.find(t => t.name === idxOrName);
+        };
+        container.addAbsorber ??= (options, position) => {
+            return this.addAbsorber(container, options, position);
+        };
+    }
+    removeAbsorber(container, absorber) {
+        const index = this.getArray(container).indexOf(absorber), deleteCount = 1;
+        if (index >= defaultIndex) {
+            this.getArray(container).splice(index, deleteCount);
+        }
+    }
+}

package/browser/AbsorbersInteractor.js

@@ -0,0 +1,90 @@
+import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { getDistance, isArray, isInArray, itemFromArray, } from "@tsparticles/engine";
+import { Absorber } from "./Options/Classes/Absorber.js";
+const absorbersMode = "absorbers";
+export class AbsorbersInteractor extends ExternalInteractorBase {
+    constructor(container, instancesManager) {
+        super(container);
+        this.dragging = false;
+        this._instancesManager = instancesManager;
+        this._instancesManager.initContainer(container);
+        this.handleClickMode = (mode, interactivityData) => {
+            const container = this.container, options = container.actualOptions, absorbers = options.interactivity.modes.absorbers;
+            if (!absorbers || mode !== absorbersMode) {
+                return;
+            }
+            const { clickPosition } = interactivityData.mouse;
+            if (clickPosition) {
+                const existingAbsorber = instancesManager
+                    .getArray(this.container)
+                    .some(t => getDistance(t.position, clickPosition) < t.size);
+                if (existingAbsorber) {
+                    return;
+                }
+            }
+            const absorbersModeOptions = itemFromArray(absorbers) ?? new Absorber();
+            void this._instancesManager.addAbsorber(container, absorbersModeOptions, clickPosition);
+        };
+    }
+    clear() {
+    }
+    init() {
+    }
+    interact(interactivityData, delta) {
+        for (const particle of this.container.particles.filter(p => this.isEnabled(interactivityData, p))) {
+            for (const absorber of this._instancesManager.getArray(this.container)) {
+                if (absorber.options.draggable) {
+                    const mouse = interactivityData.mouse;
+                    if (mouse.clicking && mouse.downPosition) {
+                        const mouseDist = getDistance(absorber.position, mouse.downPosition);
+                        if (mouseDist <= absorber.size) {
+                            this.dragging = true;
+                            this.draggingAbsorber = absorber;
+                        }
+                    }
+                    else {
+                        this.dragging = false;
+                        this.draggingAbsorber = undefined;
+                    }
+                    if (this.dragging && this.draggingAbsorber == absorber && mouse.position) {
+                        absorber.position.x = mouse.position.x;
+                        absorber.position.y = mouse.position.y;
+                    }
+                }
+                absorber.attract(particle, delta);
+                if (particle.destroyed) {
+                    break;
+                }
+            }
+        }
+    }
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity).events;
+        if (!mouse.clickPosition || !events.onClick.enable) {
+            return false;
+        }
+        return isInArray(absorbersMode, events.onClick.mode);
+    }
+    loadModeOptions(options, ...sources) {
+        options.absorbers ??= [];
+        for (const source of sources) {
+            if (!source) {
+                continue;
+            }
+            if (isArray(source.absorbers)) {
+                for (const absorber of source.absorbers) {
+                    const tmp = new Absorber();
+                    tmp.load(absorber);
+                    options.absorbers.push(tmp);
+                }
+            }
+            else {
+                const tmp = new Absorber();
+                tmp.load(source.absorbers);
+                options.absorbers.push(tmp);
+            }
+        }
+    }
+    reset() {
+    }
+}

package/browser/AbsorbersPlugin.js

@@ -1,16 +1,15 @@
-import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, isArray, } from "@tsparticles/engine";
 import { Absorber } from "./Options/Classes/Absorber.js";
-import { AbsorberClickMode } from "./Enums/AbsorberClickMode.js";
-import { Absorbers } from "./Absorbers.js";
 export class AbsorbersPlugin {
-    constructor(engine) {
+    constructor(instancesManager) {
         this.id = "absorbers";
-        this._engine = engine;
+        this._instancesManager = instancesManager;
     }
     async getPlugin(container) {
-        return Promise.resolve(new Absorbers(container, this._engine));
+        const { AbsorbersPluginInstance } = await import("./AbsorbersPluginInstance.js");
+        return new AbsorbersPluginInstance(container, this._instancesManager);
     }
-    loadOptions(options, source) {
+    loadOptions(_container, options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
@@ -21,11 +20,6 @@ export class AbsorbersPlugin {
                 return tmp;
             });
         }
-        options.interactivity.modes.absorbers = executeOnSingleOrMultiple(source?.interactivity?.modes?.absorbers, absorber => {
-            const tmp = new Absorber();
-            tmp.load(absorber);
-            return tmp;
-        });
     }
     needsPlugin(options) {
         if (!options) {
@@ -38,10 +32,6 @@ export class AbsorbersPlugin {
         else if (absorbers) {
             return true;
         }
-        else if (options.interactivity?.events?.onClick?.mode &&
-            isInArray(AbsorberClickMode.absorber, options.interactivity.events.onClick.mode)) {
-            return true;
-        }
         return false;
     }
 }

package/browser/AbsorbersPluginInstance.js

@@ -0,0 +1,40 @@
+import { executeOnSingleOrMultiple, isArray, } from "@tsparticles/engine";
+export class AbsorbersPluginInstance {
+    constructor(container, instancesManager) {
+        this._container = container;
+        this._instancesManager = instancesManager;
+        this._instancesManager.initContainer(container);
+    }
+    draw(context) {
+        for (const absorber of this._instancesManager.getArray(this._container)) {
+            absorber.draw(context);
+        }
+    }
+    async init() {
+        const absorbers = this._container.actualOptions.absorbers, promises = executeOnSingleOrMultiple(absorbers, async (absorber) => {
+            await this._instancesManager.addAbsorber(this._container, absorber);
+        });
+        if (isArray(promises)) {
+            await Promise.all(promises);
+        }
+        else {
+            await promises;
+        }
+    }
+    particleUpdate(particle, delta) {
+        for (const absorber of this._instancesManager.getArray(this._container)) {
+            absorber.attract(particle, delta);
+            if (particle.destroyed) {
+                break;
+            }
+        }
+    }
+    resize() {
+        for (const absorber of this._instancesManager.getArray(this._container)) {
+            absorber.resize();
+        }
+    }
+    stop() {
+        this._instancesManager.clear(this._container);
+    }
+}

package/browser/index.js

@@ -1,8 +1,12 @@
-export function loadAbsorbersPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.3");
-    engine.register(async (e) => {
-        const { AbsorbersPlugin } = await import("./AbsorbersPlugin.js");
-        e.addPlugin(new AbsorbersPlugin(e));
+export async function loadAbsorbersPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.5");
+    await engine.register(async (e) => {
+        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity"), { AbsorbersInstancesManager } = await import("./AbsorbersInstancesManager.js"), { AbsorbersPlugin } = await import("./AbsorbersPlugin.js"), instancesManager = new AbsorbersInstancesManager(e);
+        await loadInteractivityPlugin(e);
+        e.addPlugin(new AbsorbersPlugin(instancesManager));
+        e.addInteractor?.("externalAbsorbers", async (container) => {
+            const { AbsorbersInteractor } = await import("./AbsorbersInteractor.js");
+            return new AbsorbersInteractor(container, instancesManager);
+        });
     });
 }
-export * from "./Enums/AbsorberClickMode.js";

package/cjs/AbsorberInstance.js

@@ -1,8 +1,8 @@
-import { RotateDirection, Vector, calcPositionOrRandomFromSize, calcPositionOrRandomFromSizeRanged, getDistance, getDistances, getRandom, getRangeValue, getStyleFromRgb, isPointInside, originPoint, percentDenominator, rangeColorToRgb, } from "@tsparticles/engine";
+import { RotateDirection, Vector, calcPositionOrRandomFromSize, calcPositionOrRandomFromSizeRanged, doublePI, getDistance, getDistances, getRandom, getRangeValue, getStyleFromRgb, isPointInside, originPoint, percentDenominator, rangeColorToRgb, } from "@tsparticles/engine";
 import { Absorber } from "./Options/Classes/Absorber.js";
-const squareExp = 2, absorbFactor = 0.033, minOrbitLength = 0, minRadius = 0, minMass = 0, minAngle = 0, double = 2, maxAngle = Math.PI * double, minVelocity = 0;
+const squareExp = 2, absorbFactor = 0.033, minOrbitLength = 0, minRadius = 0, minMass = 0, minAngle = 0, maxAngle = doublePI, minVelocity = 0;
 export class AbsorberInstance {
-    constructor(container, engine, options, position) {
+    constructor(engine, container, options, position) {
         this._calcPosition = () => {
             const exactPosition = calcPositionOrRandomFromSizeRanged({
                 size: this._container.canvas.size,
@@ -64,7 +64,6 @@ export class AbsorberInstance {
             this.options = new Absorber();
             this.options.load(options);
         }
-        this.dragging = false;
         this.name = this.options.name;
         this.opacity = this.options.opacity;
         this.size = getRangeValue(this.options.size.value) * container.retina.pixelRatio;
@@ -81,28 +80,11 @@ export class AbsorberInstance {
         };
         this.position = this.initialPosition?.copy() ?? this._calcPosition();
     }
-    attract(particle) {
-        const container = this._container, options = this.options;
-        if (options.draggable) {
-            const mouse = container.interactivity.mouse;
-            if (mouse.clicking && mouse.downPosition) {
-                const mouseDist = getDistance(this.position, mouse.downPosition);
-                if (mouseDist <= this.size) {
-                    this.dragging = true;
-                }
-            }
-            else {
-                this.dragging = false;
-            }
-            if (this.dragging && mouse.position) {
-                this.position.x = mouse.position.x;
-                this.position.y = mouse.position.y;
-            }
-        }
-        const pos = particle.getPosition(), { dx, dy, distance } = getDistances(this.position, pos), v = Vector.create(dx, dy);
+    attract(particle, delta) {
+        const container = this._container, options = this.options, pos = particle.getPosition(), { dx, dy, distance } = getDistances(this.position, pos), v = Vector.create(dx, dy);
         v.length = (this.mass / Math.pow(distance, squareExp)) * container.retina.reduceFactor;
         if (distance < this.size + particle.getRadius()) {
-            const sizeFactor = particle.getRadius() * absorbFactor * container.retina.pixelRatio;
+            const sizeFactor = particle.getRadius() * absorbFactor * container.retina.pixelRatio * delta.factor;
             if ((this.size > particle.getRadius() && distance < this.size - particle.getRadius()) ||
                 (particle.absorberOrbit !== undefined && particle.absorberOrbit.length < minOrbitLength)) {
                 if (options.destroy) {

package/cjs/AbsorbersInstancesManager.js

@@ -0,0 +1,47 @@
+import { isNumber } from "@tsparticles/engine";
+const defaultIndex = 0;
+export class AbsorbersInstancesManager {
+    constructor(engine) {
+        this._containerArrays = new Map();
+        this._engine = engine;
+    }
+    async addAbsorber(container, options, position) {
+        const { AbsorberInstance } = await import("./AbsorberInstance.js"), absorber = new AbsorberInstance(this._engine, container, options, position), array = this.getArray(container);
+        array.push(absorber);
+        return absorber;
+    }
+    clear(container) {
+        this.initContainer(container);
+        this._containerArrays.set(container, []);
+    }
+    getArray(container) {
+        this.initContainer(container);
+        let array = this._containerArrays.get(container);
+        if (!array) {
+            array = [];
+            this._containerArrays.set(container, array);
+        }
+        return array;
+    }
+    initContainer(container) {
+        if (this._containerArrays.has(container)) {
+            return;
+        }
+        this._containerArrays.set(container, []);
+        container.getAbsorber ??= (idxOrName) => {
+            const array = this.getArray(container);
+            return idxOrName === undefined || isNumber(idxOrName)
+                ? array[idxOrName ?? defaultIndex]
+                : array.find(t => t.name === idxOrName);
+        };
+        container.addAbsorber ??= (options, position) => {
+            return this.addAbsorber(container, options, position);
+        };
+    }
+    removeAbsorber(container, absorber) {
+        const index = this.getArray(container).indexOf(absorber), deleteCount = 1;
+        if (index >= defaultIndex) {
+            this.getArray(container).splice(index, deleteCount);
+        }
+    }
+}

package/cjs/AbsorbersInteractor.js

@@ -0,0 +1,90 @@
+import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { getDistance, isArray, isInArray, itemFromArray, } from "@tsparticles/engine";
+import { Absorber } from "./Options/Classes/Absorber.js";
+const absorbersMode = "absorbers";
+export class AbsorbersInteractor extends ExternalInteractorBase {
+    constructor(container, instancesManager) {
+        super(container);
+        this.dragging = false;
+        this._instancesManager = instancesManager;
+        this._instancesManager.initContainer(container);
+        this.handleClickMode = (mode, interactivityData) => {
+            const container = this.container, options = container.actualOptions, absorbers = options.interactivity.modes.absorbers;
+            if (!absorbers || mode !== absorbersMode) {
+                return;
+            }
+            const { clickPosition } = interactivityData.mouse;
+            if (clickPosition) {
+                const existingAbsorber = instancesManager
+                    .getArray(this.container)
+                    .some(t => getDistance(t.position, clickPosition) < t.size);
+                if (existingAbsorber) {
+                    return;
+                }
+            }
+            const absorbersModeOptions = itemFromArray(absorbers) ?? new Absorber();
+            void this._instancesManager.addAbsorber(container, absorbersModeOptions, clickPosition);
+        };
+    }
+    clear() {
+    }
+    init() {
+    }
+    interact(interactivityData, delta) {
+        for (const particle of this.container.particles.filter(p => this.isEnabled(interactivityData, p))) {
+            for (const absorber of this._instancesManager.getArray(this.container)) {
+                if (absorber.options.draggable) {
+                    const mouse = interactivityData.mouse;
+                    if (mouse.clicking && mouse.downPosition) {
+                        const mouseDist = getDistance(absorber.position, mouse.downPosition);
+                        if (mouseDist <= absorber.size) {
+                            this.dragging = true;
+                            this.draggingAbsorber = absorber;
+                        }
+                    }
+                    else {
+                        this.dragging = false;
+                        this.draggingAbsorber = undefined;
+                    }
+                    if (this.dragging && this.draggingAbsorber == absorber && mouse.position) {
+                        absorber.position.x = mouse.position.x;
+                        absorber.position.y = mouse.position.y;
+                    }
+                }
+                absorber.attract(particle, delta);
+                if (particle.destroyed) {
+                    break;
+                }
+            }
+        }
+    }
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity).events;
+        if (!mouse.clickPosition || !events.onClick.enable) {
+            return false;
+        }
+        return isInArray(absorbersMode, events.onClick.mode);
+    }
+    loadModeOptions(options, ...sources) {
+        options.absorbers ??= [];
+        for (const source of sources) {
+            if (!source) {
+                continue;
+            }
+            if (isArray(source.absorbers)) {
+                for (const absorber of source.absorbers) {
+                    const tmp = new Absorber();
+                    tmp.load(absorber);
+                    options.absorbers.push(tmp);
+                }
+            }
+            else {
+                const tmp = new Absorber();
+                tmp.load(source.absorbers);
+                options.absorbers.push(tmp);
+            }
+        }
+    }
+    reset() {
+    }
+}

package/cjs/AbsorbersPlugin.js

@@ -1,16 +1,15 @@
-import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, isArray, } from "@tsparticles/engine";
 import { Absorber } from "./Options/Classes/Absorber.js";
-import { AbsorberClickMode } from "./Enums/AbsorberClickMode.js";
-import { Absorbers } from "./Absorbers.js";
 export class AbsorbersPlugin {
-    constructor(engine) {
+    constructor(instancesManager) {
         this.id = "absorbers";
-        this._engine = engine;
+        this._instancesManager = instancesManager;
     }
     async getPlugin(container) {
-        return Promise.resolve(new Absorbers(container, this._engine));
+        const { AbsorbersPluginInstance } = await import("./AbsorbersPluginInstance.js");
+        return new AbsorbersPluginInstance(container, this._instancesManager);
     }
-    loadOptions(options, source) {
+    loadOptions(_container, options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
@@ -21,11 +20,6 @@ export class AbsorbersPlugin {
                 return tmp;
             });
         }
-        options.interactivity.modes.absorbers = executeOnSingleOrMultiple(source?.interactivity?.modes?.absorbers, absorber => {
-            const tmp = new Absorber();
-            tmp.load(absorber);
-            return tmp;
-        });
     }
     needsPlugin(options) {
         if (!options) {
@@ -38,10 +32,6 @@ export class AbsorbersPlugin {
         else if (absorbers) {
             return true;
         }
-        else if (options.interactivity?.events?.onClick?.mode &&
-            isInArray(AbsorberClickMode.absorber, options.interactivity.events.onClick.mode)) {
-            return true;
-        }
         return false;
     }
 }

package/cjs/AbsorbersPluginInstance.js

@@ -0,0 +1,40 @@
+import { executeOnSingleOrMultiple, isArray, } from "@tsparticles/engine";
+export class AbsorbersPluginInstance {
+    constructor(container, instancesManager) {
+        this._container = container;
+        this._instancesManager = instancesManager;
+        this._instancesManager.initContainer(container);
+    }
+    draw(context) {
+        for (const absorber of this._instancesManager.getArray(this._container)) {
+            absorber.draw(context);
+        }
+    }
+    async init() {
+        const absorbers = this._container.actualOptions.absorbers, promises = executeOnSingleOrMultiple(absorbers, async (absorber) => {
+            await this._instancesManager.addAbsorber(this._container, absorber);
+        });
+        if (isArray(promises)) {
+            await Promise.all(promises);
+        }
+        else {
+            await promises;
+        }
+    }
+    particleUpdate(particle, delta) {
+        for (const absorber of this._instancesManager.getArray(this._container)) {
+            absorber.attract(particle, delta);
+            if (particle.destroyed) {
+                break;
+            }
+        }
+    }
+    resize() {
+        for (const absorber of this._instancesManager.getArray(this._container)) {
+            absorber.resize();
+        }
+    }
+    stop() {
+        this._instancesManager.clear(this._container);
+    }
+}

package/cjs/index.js

@@ -1,8 +1,12 @@
-export function loadAbsorbersPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.3");
-    engine.register(async (e) => {
-        const { AbsorbersPlugin } = await import("./AbsorbersPlugin.js");
-        e.addPlugin(new AbsorbersPlugin(e));
+export async function loadAbsorbersPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.5");
+    await engine.register(async (e) => {
+        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity"), { AbsorbersInstancesManager } = await import("./AbsorbersInstancesManager.js"), { AbsorbersPlugin } = await import("./AbsorbersPlugin.js"), instancesManager = new AbsorbersInstancesManager(e);
+        await loadInteractivityPlugin(e);
+        e.addPlugin(new AbsorbersPlugin(instancesManager));
+        e.addInteractor?.("externalAbsorbers", async (container) => {
+            const { AbsorbersInteractor } = await import("./AbsorbersInteractor.js");
+            return new AbsorbersInteractor(container, instancesManager);
+        });
     });
 }
-export * from "./Enums/AbsorberClickMode.js";