@tsparticles/interaction-particles-links 4.0.0-beta.0 → 4.0.0-beta.1

package/212.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[212],{212(e,i,t){t.d(i,{LinkInstance:()=>s});var n=t(303);function l(e,i){let t=[...e.map(e=>e.id)].sort((e,i)=>e-i).join("_"),l=i.get(t);return void 0===l&&(l=(0,n.getRandom)(),i.set(t,l)),l}class s{_colorCache=new Map;_container;_freqs;_pluginManager;constructor(e,i){this._pluginManager=e,this._container=i,this._freqs={links:new Map,triangles:new Map}}drawParticle(e,i){let{links:t,options:l}=i;if(!t?.length||!l.links)return;let s=l.links,a=i.retina.linksWidth??0,o=i.getPosition(),r=i.options.twinkle?.links,c=s.triangles.enable,h=c?new Set(t.map(e=>e.destination.id)):null,g=e.globalAlpha,d="",p=-1,_=-1,k=!1,u=()=>{k&&(e.stroke(),k=!1)};for(let g of t){if(s.frequency<1&&this._getLinkFrequency(i,g.destination)>s.frequency)continue;let t=g.destination.getPosition();if(c&&!g.isWarped&&h&&(u(),this._drawTriangles(l,i,g,h,o,t,e)),g.opacity<=0||a<=0||!s.enable)continue;let y=g.opacity,f=g.color,b=r?.enable&&(0,n.getRandom)()<r.frequency?(0,n.rangeColorToRgb)(this._pluginManager,r.color):void 0;if(r&&b&&(f=b,y=(0,n.getRangeValue)(r.opacity)),!f){let e=void 0!==s.id?this._container.particles.linksColors.get(s.id):this._container.particles.linksColor;f=(0,n.getLinkColor)(i,g.destination,e)}if(!f)continue;let q=this._getCachedStyle(f);if((q!==d||a!==p||y!==_)&&(u(),e.strokeStyle=q,e.lineWidth=a,e.globalAlpha=y,d=q,p=a,_=y,e.beginPath(),k=!0),g.isWarped){let i=this._container.canvas.size,l=t.x-o.x,s=t.y-o.y,a=n.originPoint.x,r=n.originPoint.y;Math.abs(l)>i.width*n.half&&(a=l>0?-i.width:i.width),Math.abs(s)>i.height*n.half&&(r=s>0?-i.height:i.height),e.moveTo(o.x,o.y),e.lineTo(t.x+a,t.y+r),e.moveTo(o.x-a,o.y-r),e.lineTo(t.x,t.y)}else e.moveTo(o.x,o.y),e.lineTo(t.x,t.y)}u(),e.globalAlpha=g}init(){return this._freqs.links.clear(),this._freqs.triangles.clear(),this._colorCache.clear(),Promise.resolve()}particleCreated(e){if(e.links=[],!e.options.links)return;e.linksDistance=e.options.links.distance,e.linksWidth=e.options.links.width;let i=this._container.retina.pixelRatio;e.retina.linksDistance=e.linksDistance*i,e.retina.linksWidth=e.linksWidth*i}particleDestroyed(e){e.links=[]}_drawTriangles(e,i,t,l,s,a,o){let r=t.destination,c=e.links?.triangles;if(!c?.enable||!r.options.links?.triangles.enable)return;let h=r.links;if(h?.length)for(let g of h){if(g.isWarped||this._getLinkFrequency(r,g.destination)>r.options.links.frequency||!l.has(g.destination.id))continue;let h=g.destination;if(this._getTriangleFrequency(i,r,h)>(e.links?.triangles.frequency??0))continue;let d=c.opacity??(t.opacity+g.opacity)*n.half,p=(0,n.rangeColorToRgb)(this._pluginManager,c.color)??t.color;if(!p||d<=0)continue;let _=h.getPosition();o.save(),o.fillStyle=this._getCachedStyle(p),o.globalAlpha=d,o.beginPath(),o.moveTo(s.x,s.y),o.lineTo(a.x,a.y),o.lineTo(_.x,_.y),o.closePath(),o.fill(),o.restore()}}_getCachedStyle(e){let i=`${e.r},${e.g},${e.b}`,t=this._colorCache.get(i);return t||(t=(0,n.getStyleFromRgb)(e,this._container.hdr),this._colorCache.set(i,t)),t}_getLinkFrequency(e,i){return l([e,i],this._freqs.links)}_getTriangleFrequency(e,i,t){return l([e,i,t],this._freqs.triangles)}}}}]);

package/513.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[513],{513(n,i,t){t.r(i),t.d(i,{LinksPlugin:()=>s});class s{id="links";_pluginManager;constructor(n){this._pluginManager=n}async getPlugin(n){let{LinkInstance:i}=await t.e(212).then(t.bind(t,212));return new i(this._pluginManager,n)}loadOptions(){}needsPlugin(){return!0}}}}]);

package/866.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_particles_links=this.webpackChunk_tsparticles_interaction_particles_links||[]).push([[866],{866(i,t,n){n.d(t,{Linker:()=>a});var s=n(303);class e extends s.Circle{canvasSize;constructor(i,t,n,s){super(i,t,n),this.canvasSize=s}contains(i){if(super.contains(i))return!0;let{width:t,height:n}=this.canvasSize,{x:s,y:e}=i;return super.contains({x:s-t,y:e})||super.contains({x:s+t,y:e})||super.contains({x:s,y:e-n})||super.contains({x:s,y:e+n})||super.contains({x:s-t,y:e-n})||super.contains({x:s+t,y:e+n})||super.contains({x:s-t,y:e+n})||super.contains({x:s+t,y:e-n})}intersects(i){if(super.intersects(i))return!0;let{width:t,height:n}=this.canvasSize,e=i.position;for(let r of[{x:-t,y:0},{x:t,y:0},{x:0,y:-n},{x:0,y:n},{x:-t,y:-n},{x:t,y:n},{x:-t,y:n},{x:t,y:-n}]){let t,n={x:e.x+r.x,y:e.y+r.y};if(t=i instanceof s.Circle?new s.Circle(n.x,n.y,i.radius):new s.Rectangle(n.x,n.y,i.size.width,i.size.height),super.intersects(t))return!0}return!1}}var r=n(56),o=n(702);class a extends o.ParticlesInteractorBase{_maxDistance;_pluginManager;constructor(i,t){super(t),this._pluginManager=i,this._maxDistance=0}get maxDistance(){return this._maxDistance}clear(){}init(){this.container.particles.linksColor=void 0,this.container.particles.linksColors=new Map}interact(i){if(!i.options.links)return;i.links=[],i.linksDistance&&i.linksDistance>this._maxDistance&&(this._maxDistance=i.linksDistance);let t=i.getPosition(),n=this.container,r=n.canvas.size;if(t.x<s.originPoint.x||t.y<s.originPoint.y||t.x>r.width||t.y>r.height)return;let o=i.options.links,a=o.opacity,l=i.retina.linksDistance??0,c=o.warp,p=c?new e(t.x,t.y,l,r):new s.Circle(t.x,t.y,l);for(let e of n.particles.grid.query(p)){let n=e.options.links;if(i===e||!n?.enable||o.id!==n.id||e.spawning||e.destroyed||!e.links||i.links.some(i=>i.destination===e)||e.links.some(t=>t.destination===i))continue;let p=e.getPosition();if(p.x<s.originPoint.x||p.y<s.originPoint.y||p.x>r.width||p.y>r.height)continue;let u=(0,s.getDistances)(t,p).distance,h=c&&n.warp?function(i,t,n){let{dx:e,dy:r}=(0,s.getDistances)(i,t),o={x:Math.abs(e),y:Math.abs(r)},a={x:Math.min(o.x,n.width-o.x),y:Math.min(o.y,n.height-o.y)};return Math.hypot(a.x,a.y)}(t,p,r):u,x=Math.min(u,h);if(x>l)continue;let k=(1-x/l)*a;this._setColor(i),i.links.push({destination:e,opacity:k,color:this._getLinkColor(i,e),isWarped:h<u})}}isEnabled(i){return!!i.options.links?.enable}loadParticlesOptions(i,...t){for(let n of(i.links??=new r.q,t))i.links.load(n?.links)}reset(){}_getLinkColor(i,t){let n=this.container,e=i.options.links;if(!e)return;let r=void 0!==e.id?n.particles.linksColors.get(e.id):n.particles.linksColor;return(0,s.getLinkColor)(i,t,r)}_setColor(i){if(!i.options.links)return;let t=this.container,n=i.options.links,e=void 0===n.id?t.particles.linksColor:t.particles.linksColors.get(n.id);e||(e=(0,s.getLinkRandomColor)(this._pluginManager,n.color,n.blink,n.consent),void 0===n.id?t.particles.linksColor=e:t.particles.linksColors.set(n.id,e))}}}}]);

package/browser/LinkInstance.js

@@ -4,11 +4,11 @@ const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFr
 export class LinkInstance {
     _colorCache = new Map();
     _container;
-    _engine;
     _freqs;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
-        this._engine = engine;
         this._freqs = { links: new Map(), triangles: new Map() };
     }
     drawParticle(context, particle) {
@@ -41,7 +41,9 @@ export class LinkInstance {
                 continue;
             }
             let opacity = link.opacity, colorLine = link.color;
-            const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency ? rangeColorToRgb(this._engine, twinkle.color) : undefined;
+            const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency
+                ? rangeColorToRgb(this._pluginManager, twinkle.color)
+                : undefined;
             if (twinkle && twinkleRgb) {
                 colorLine = twinkleRgb;
                 opacity = getRangeValue(twinkle.opacity);
@@ -128,7 +130,7 @@ export class LinkInstance {
             if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {
                 continue;
             }
-            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color) ?? link.color;
+            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this._pluginManager, triangleOptions.color) ?? link.color;
             if (!colorTriangle || opacityTriangle <= minOpacity) {
                 continue;
             }

package/browser/Linker.js

@@ -11,11 +11,11 @@ function getWarpDistance(pos1, pos2, canvasSize) {
     return Math.hypot(warpDistances.x, warpDistances.y);
 }
 export class Linker extends ParticlesInteractorBase {
-    _engine;
     _maxDistance;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
     }
     get maxDistance() {
@@ -102,7 +102,7 @@ export class Linker extends ParticlesInteractorBase {
         if (linkColor) {
             return;
         }
-        linkColor = getLinkRandomColor(this._engine, linksOptions.color, linksOptions.blink, linksOptions.consent);
+        linkColor = getLinkRandomColor(this._pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
         if (linksOptions.id === undefined) {
             container.particles.linksColor = linkColor;
         }

package/browser/LinksPlugin.js

@@ -1,12 +1,12 @@
 export class LinksPlugin {
     id = "links";
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { LinkInstance } = await import("./LinkInstance.js");
-        return new LinkInstance(container, this._engine);
+        return new LinkInstance(this._pluginManager, container);
     }
     loadOptions() {
     }

package/browser/index.js

@@ -1,15 +1,15 @@
 export async function loadParticlesLinksInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
-        const [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const pluginManager = e.pluginManager, [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
             import("@tsparticles/plugin-interactivity"),
             import("./LinksPlugin.js"),
         ]);
         ensureInteractivityPluginLoaded(e);
-        e.addPlugin(new LinksPlugin(e));
-        e.addInteractor?.("particlesLinks", async (container) => {
+        pluginManager.addPlugin(new LinksPlugin(pluginManager));
+        pluginManager.addInteractor?.("particlesLinks", async (container) => {
             const { Linker } = await import("./Linker.js");
-            return new Linker(container, e);
+            return new Linker(pluginManager, container);
         });
     });
 }

package/cjs/LinkInstance.js

@@ -4,11 +4,11 @@ const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFr
 export class LinkInstance {
     _colorCache = new Map();
     _container;
-    _engine;
     _freqs;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
-        this._engine = engine;
         this._freqs = { links: new Map(), triangles: new Map() };
     }
     drawParticle(context, particle) {
@@ -41,7 +41,9 @@ export class LinkInstance {
                 continue;
             }
             let opacity = link.opacity, colorLine = link.color;
-            const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency ? rangeColorToRgb(this._engine, twinkle.color) : undefined;
+            const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency
+                ? rangeColorToRgb(this._pluginManager, twinkle.color)
+                : undefined;
             if (twinkle && twinkleRgb) {
                 colorLine = twinkleRgb;
                 opacity = getRangeValue(twinkle.opacity);
@@ -128,7 +130,7 @@ export class LinkInstance {
             if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {
                 continue;
             }
-            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color) ?? link.color;
+            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this._pluginManager, triangleOptions.color) ?? link.color;
             if (!colorTriangle || opacityTriangle <= minOpacity) {
                 continue;
             }

package/cjs/Linker.js

@@ -11,11 +11,11 @@ function getWarpDistance(pos1, pos2, canvasSize) {
     return Math.hypot(warpDistances.x, warpDistances.y);
 }
 export class Linker extends ParticlesInteractorBase {
-    _engine;
     _maxDistance;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
     }
     get maxDistance() {
@@ -102,7 +102,7 @@ export class Linker extends ParticlesInteractorBase {
         if (linkColor) {
             return;
         }
-        linkColor = getLinkRandomColor(this._engine, linksOptions.color, linksOptions.blink, linksOptions.consent);
+        linkColor = getLinkRandomColor(this._pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
         if (linksOptions.id === undefined) {
             container.particles.linksColor = linkColor;
         }

package/cjs/LinksPlugin.js

@@ -1,12 +1,12 @@
 export class LinksPlugin {
     id = "links";
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { LinkInstance } = await import("./LinkInstance.js");
-        return new LinkInstance(container, this._engine);
+        return new LinkInstance(this._pluginManager, container);
     }
     loadOptions() {
     }

package/cjs/index.js

@@ -1,15 +1,15 @@
 export async function loadParticlesLinksInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
-        const [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const pluginManager = e.pluginManager, [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
             import("@tsparticles/plugin-interactivity"),
             import("./LinksPlugin.js"),
         ]);
         ensureInteractivityPluginLoaded(e);
-        e.addPlugin(new LinksPlugin(e));
-        e.addInteractor?.("particlesLinks", async (container) => {
+        pluginManager.addPlugin(new LinksPlugin(pluginManager));
+        pluginManager.addInteractor?.("particlesLinks", async (container) => {
             const { Linker } = await import("./Linker.js");
-            return new Linker(container, e);
+            return new Linker(pluginManager, container);
         });
     });
 }

package/dist_browser_LinkInstance_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-beta.0
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \**************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinkInstance: () => (/* binding */ LinkInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFrequency = 0;\nclass LinkInstance {\n    _colorCache = new Map();\n    _container;\n    _engine;\n    _freqs;\n    constructor(container, engine){\n        this._container = container;\n        this._engine = engine;\n        this._freqs = {\n            links: new Map(),\n            triangles: new Map()\n        };\n    }\n    drawParticle(context, particle) {\n        const { links, options } = particle;\n        if (!links?.length || !options.links) {\n            return;\n        }\n        const linkOpts = options.links, width = particle.retina.linksWidth ?? minWidth, pos1 = particle.getPosition(), twinkle = particle.options[\"twinkle\"]?.links, trianglesEnabled = linkOpts.triangles.enable, p1Destinations = trianglesEnabled ? new Set(links.map((l)=>l.destination.id)) : null, originalAlpha = context.globalAlpha;\n        let currentColorStyle = \"\", currentWidth = -1, currentAlpha = -1, pathOpen = false;\n        const flushLines = ()=>{\n            if (pathOpen) {\n                context.stroke();\n                pathOpen = false;\n            }\n        };\n        for (const link of links){\n            if (linkOpts.frequency < maxFrequency && this._getLinkFrequency(particle, link.destination) > linkOpts.frequency) {\n                continue;\n            }\n            const pos2 = link.destination.getPosition();\n            if (trianglesEnabled && !link.isWarped && p1Destinations) {\n                flushLines();\n                this._drawTriangles(options, particle, link, p1Destinations, pos1, pos2, context);\n            }\n            if (link.opacity <= minOpacity || width <= minWidth) {\n                continue;\n            }\n            if (!linkOpts.enable) {\n                continue;\n            }\n            let opacity = link.opacity, colorLine = link.color;\n            const twinkleRgb = twinkle?.enable && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() < twinkle.frequency ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, twinkle.color) : undefined;\n            if (twinkle && twinkleRgb) {\n                colorLine = twinkleRgb;\n                opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(twinkle.opacity);\n            }\n            if (!colorLine) {\n                const linkColor = linkOpts.id !== undefined ? this._container.particles.linksColors.get(linkOpts.id) : this._container.particles.linksColor;\n                colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(particle, link.destination, linkColor);\n            }\n            if (!colorLine) {\n                continue;\n            }\n            const colorStyle = this._getCachedStyle(colorLine);\n            if (colorStyle !== currentColorStyle || width !== currentWidth || opacity !== currentAlpha) {\n                flushLines();\n                context.strokeStyle = colorStyle;\n                context.lineWidth = width;\n                context.globalAlpha = opacity;\n                currentColorStyle = colorStyle;\n                currentWidth = width;\n                currentAlpha = opacity;\n                context.beginPath();\n                pathOpen = true;\n            }\n            if (link.isWarped) {\n                const canvasSize = this._container.canvas.size, dx = pos2.x - pos1.x, dy = pos2.y - pos1.y;\n                let sx = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, sy = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y;\n                if (Math.abs(dx) > canvasSize.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n                    sx = dx > minDistance ? -canvasSize.width : canvasSize.width;\n                }\n                if (Math.abs(dy) > canvasSize.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n                    sy = dy > minDistance ? -canvasSize.height : canvasSize.height;\n                }\n                context.moveTo(pos1.x, pos1.y);\n                context.lineTo(pos2.x + sx, pos2.y + sy);\n                context.moveTo(pos1.x - sx, pos1.y - sy);\n                context.lineTo(pos2.x, pos2.y);\n            } else {\n                context.moveTo(pos1.x, pos1.y);\n                context.lineTo(pos2.x, pos2.y);\n            }\n        }\n        flushLines();\n        context.globalAlpha = originalAlpha;\n    }\n    init() {\n        this._freqs.links.clear();\n        this._freqs.triangles.clear();\n        this._colorCache.clear();\n        return Promise.resolve();\n    }\n    particleCreated(particle) {\n        particle.links = [];\n        if (!particle.options.links) {\n            return;\n        }\n        particle.linksDistance = particle.options.links.distance;\n        particle.linksWidth = particle.options.links.width;\n        const ratio = this._container.retina.pixelRatio;\n        particle.retina.linksDistance = particle.linksDistance * ratio;\n        particle.retina.linksWidth = particle.linksWidth * ratio;\n    }\n    particleDestroyed(particle) {\n        particle.links = [];\n    }\n    _drawTriangles(options, p1, link, p1Destinations, pos1, pos2, context) {\n        const p2 = link.destination, triangleOptions = options.links?.triangles;\n        if (!triangleOptions?.enable || !p2.options.links?.triangles.enable) {\n            return;\n        }\n        const p2Links = p2.links;\n        if (!p2Links?.length) {\n            return;\n        }\n        for (const vertex of p2Links){\n            if (vertex.isWarped || this._getLinkFrequency(p2, vertex.destination) > p2.options.links.frequency || !p1Destinations.has(vertex.destination.id)) {\n                continue;\n            }\n            const p3 = vertex.destination;\n            if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {\n                continue;\n            }\n            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, triangleOptions.color) ?? link.color;\n            if (!colorTriangle || opacityTriangle <= minOpacity) {\n                continue;\n            }\n            const pos3 = p3.getPosition();\n            context.save();\n            context.fillStyle = this._getCachedStyle(colorTriangle);\n            context.globalAlpha = opacityTriangle;\n            context.beginPath();\n            context.moveTo(pos1.x, pos1.y);\n            context.lineTo(pos2.x, pos2.y);\n            context.lineTo(pos3.x, pos3.y);\n            context.closePath();\n            context.fill();\n            context.restore();\n        }\n    }\n    _getCachedStyle(rgb) {\n        const key = `${rgb.r},${rgb.g},${rgb.b}`;\n        let style = this._colorCache.get(key);\n        if (!style) {\n            style = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(rgb, this._container.hdr);\n            this._colorCache.set(key, style);\n        }\n        return style;\n    }\n    _getLinkFrequency(p1, p2) {\n        return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([\n            p1,\n            p2\n        ], this._freqs.links);\n    }\n    _getTriangleFrequency(p1, p2, p3) {\n        return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([\n            p1,\n            p2,\n            p3\n        ], this._freqs.triangles);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinkInstance.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinkInstance: () => (/* binding */ LinkInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\nconst minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFrequency = 0;\nclass LinkInstance {\n    _colorCache = new Map();\n    _container;\n    _freqs;\n    _pluginManager;\n    constructor(pluginManager, container){\n        this._pluginManager = pluginManager;\n        this._container = container;\n        this._freqs = {\n            links: new Map(),\n            triangles: new Map()\n        };\n    }\n    drawParticle(context, particle) {\n        const { links, options } = particle;\n        if (!links?.length || !options.links) {\n            return;\n        }\n        const linkOpts = options.links, width = particle.retina.linksWidth ?? minWidth, pos1 = particle.getPosition(), twinkle = particle.options[\"twinkle\"]?.links, trianglesEnabled = linkOpts.triangles.enable, p1Destinations = trianglesEnabled ? new Set(links.map((l)=>l.destination.id)) : null, originalAlpha = context.globalAlpha;\n        let currentColorStyle = \"\", currentWidth = -1, currentAlpha = -1, pathOpen = false;\n        const flushLines = ()=>{\n            if (pathOpen) {\n                context.stroke();\n                pathOpen = false;\n            }\n        };\n        for (const link of links){\n            if (linkOpts.frequency < maxFrequency && this._getLinkFrequency(particle, link.destination) > linkOpts.frequency) {\n                continue;\n            }\n            const pos2 = link.destination.getPosition();\n            if (trianglesEnabled && !link.isWarped && p1Destinations) {\n                flushLines();\n                this._drawTriangles(options, particle, link, p1Destinations, pos1, pos2, context);\n            }\n            if (link.opacity <= minOpacity || width <= minWidth) {\n                continue;\n            }\n            if (!linkOpts.enable) {\n                continue;\n            }\n            let opacity = link.opacity, colorLine = link.color;\n            const twinkleRgb = twinkle?.enable && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() < twinkle.frequency ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._pluginManager, twinkle.color) : undefined;\n            if (twinkle && twinkleRgb) {\n                colorLine = twinkleRgb;\n                opacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(twinkle.opacity);\n            }\n            if (!colorLine) {\n                const linkColor = linkOpts.id !== undefined ? this._container.particles.linksColors.get(linkOpts.id) : this._container.particles.linksColor;\n                colorLine = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(particle, link.destination, linkColor);\n            }\n            if (!colorLine) {\n                continue;\n            }\n            const colorStyle = this._getCachedStyle(colorLine);\n            if (colorStyle !== currentColorStyle || width !== currentWidth || opacity !== currentAlpha) {\n                flushLines();\n                context.strokeStyle = colorStyle;\n                context.lineWidth = width;\n                context.globalAlpha = opacity;\n                currentColorStyle = colorStyle;\n                currentWidth = width;\n                currentAlpha = opacity;\n                context.beginPath();\n                pathOpen = true;\n            }\n            if (link.isWarped) {\n                const canvasSize = this._container.canvas.size, dx = pos2.x - pos1.x, dy = pos2.y - pos1.y;\n                let sx = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, sy = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y;\n                if (Math.abs(dx) > canvasSize.width * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n                    sx = dx > minDistance ? -canvasSize.width : canvasSize.width;\n                }\n                if (Math.abs(dy) > canvasSize.height * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half) {\n                    sy = dy > minDistance ? -canvasSize.height : canvasSize.height;\n                }\n                context.moveTo(pos1.x, pos1.y);\n                context.lineTo(pos2.x + sx, pos2.y + sy);\n                context.moveTo(pos1.x - sx, pos1.y - sy);\n                context.lineTo(pos2.x, pos2.y);\n            } else {\n                context.moveTo(pos1.x, pos1.y);\n                context.lineTo(pos2.x, pos2.y);\n            }\n        }\n        flushLines();\n        context.globalAlpha = originalAlpha;\n    }\n    init() {\n        this._freqs.links.clear();\n        this._freqs.triangles.clear();\n        this._colorCache.clear();\n        return Promise.resolve();\n    }\n    particleCreated(particle) {\n        particle.links = [];\n        if (!particle.options.links) {\n            return;\n        }\n        particle.linksDistance = particle.options.links.distance;\n        particle.linksWidth = particle.options.links.width;\n        const ratio = this._container.retina.pixelRatio;\n        particle.retina.linksDistance = particle.linksDistance * ratio;\n        particle.retina.linksWidth = particle.linksWidth * ratio;\n    }\n    particleDestroyed(particle) {\n        particle.links = [];\n    }\n    _drawTriangles(options, p1, link, p1Destinations, pos1, pos2, context) {\n        const p2 = link.destination, triangleOptions = options.links?.triangles;\n        if (!triangleOptions?.enable || !p2.options.links?.triangles.enable) {\n            return;\n        }\n        const p2Links = p2.links;\n        if (!p2Links?.length) {\n            return;\n        }\n        for (const vertex of p2Links){\n            if (vertex.isWarped || this._getLinkFrequency(p2, vertex.destination) > p2.options.links.frequency || !p1Destinations.has(vertex.destination.id)) {\n                continue;\n            }\n            const p3 = vertex.destination;\n            if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {\n                continue;\n            }\n            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, colorTriangle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._pluginManager, triangleOptions.color) ?? link.color;\n            if (!colorTriangle || opacityTriangle <= minOpacity) {\n                continue;\n            }\n            const pos3 = p3.getPosition();\n            context.save();\n            context.fillStyle = this._getCachedStyle(colorTriangle);\n            context.globalAlpha = opacityTriangle;\n            context.beginPath();\n            context.moveTo(pos1.x, pos1.y);\n            context.lineTo(pos2.x, pos2.y);\n            context.lineTo(pos3.x, pos3.y);\n            context.closePath();\n            context.fill();\n            context.restore();\n        }\n    }\n    _getCachedStyle(rgb) {\n        const key = `${rgb.r},${rgb.g},${rgb.b}`;\n        let style = this._colorCache.get(key);\n        if (!style) {\n            style = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(rgb, this._container.hdr);\n            this._colorCache.set(key, style);\n        }\n        return style;\n    }\n    _getLinkFrequency(p1, p2) {\n        return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([\n            p1,\n            p2\n        ], this._freqs.links);\n    }\n    _getTriangleFrequency(p1, p2, p3) {\n        return (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.setLinkFrequency)([\n            p1,\n            p2,\n            p3\n        ], this._freqs.triangles);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinkInstance.js?\n}");
 
 /***/ },
 

package/dist_browser_Linker_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-beta.0
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \********************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Linker: () => (/* binding */ Linker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CircleWarp.js */ \"./dist/browser/CircleWarp.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n\n\n\n\nconst opacityOffset = 1, minDistance = 0;\nfunction getWarpDistance(pos1, pos2, canvasSize) {\n    const { dx, dy } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2), absDiffs = {\n        x: Math.abs(dx),\n        y: Math.abs(dy)\n    }, warpDistances = {\n        x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),\n        y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)\n    };\n    return Math.hypot(warpDistances.x, warpDistances.y);\n}\nclass Linker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__.ParticlesInteractorBase {\n    _engine;\n    _maxDistance;\n    constructor(container, engine){\n        super(container);\n        this._engine = engine;\n        this._maxDistance = 0;\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear() {}\n    init() {\n        this.container.particles.linksColor = undefined;\n        this.container.particles.linksColors = new Map();\n    }\n    interact(p1) {\n        if (!p1.options.links) {\n            return;\n        }\n        p1.links = [];\n        if (p1.linksDistance && p1.linksDistance > this._maxDistance) {\n            this._maxDistance = p1.linksDistance;\n        }\n        const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;\n        if (pos1.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos1.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {\n            return;\n        }\n        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp ? new _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos1.x, pos1.y, optDistance), query = container.particles.grid.query(range);\n        for (const p2 of query){\n            const linkOpt2 = p2.options.links;\n            if (p1 === p2 || !linkOpt2?.enable || linkOpt1.id !== linkOpt2.id || p2.spawning || p2.destroyed || !p2.links || p1.links.some((t)=>t.destination === p2) || p2.links.some((t)=>t.destination === p1)) {\n                continue;\n            }\n            const pos2 = p2.getPosition();\n            if (pos2.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos2.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {\n                continue;\n            }\n            const distDirect = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);\n            if (distance > optDistance) {\n                continue;\n            }\n            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;\n            this._setColor(p1);\n            p1.links.push({\n                destination: p2,\n                opacity: opacityLine,\n                color: this._getLinkColor(p1, p2),\n                isWarped: distWarp < distDirect\n            });\n        }\n    }\n    isEnabled(particle) {\n        return !!particle.options.links?.enable;\n    }\n    loadParticlesOptions(options, ...sources) {\n        options.links ??= new _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__.Links();\n        for (const source of sources){\n            options.links.load(source?.links);\n        }\n    }\n    reset() {}\n    _getLinkColor(p1, p2) {\n        const container = this.container, linksOptions = p1.options.links;\n        if (!linksOptions) {\n            return;\n        }\n        const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n    }\n    _setColor(p1) {\n        if (!p1.options.links) {\n            return;\n        }\n        const container = this.container, linksOptions = p1.options.links;\n        let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);\n        if (linkColor) {\n            return;\n        }\n        linkColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkRandomColor)(this._engine, linksOptions.color, linksOptions.blink, linksOptions.consent);\n        if (linksOptions.id === undefined) {\n            container.particles.linksColor = linkColor;\n        } else {\n            container.particles.linksColors.set(linksOptions.id, linkColor);\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Linker.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   Linker: () => (/* binding */ Linker)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CircleWarp.js */ \"./dist/browser/CircleWarp.js\");\n/* harmony import */ var _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Links.js */ \"./dist/browser/Options/Classes/Links.js\");\n/* harmony import */ var _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n\n\n\n\nconst opacityOffset = 1, minDistance = 0;\nfunction getWarpDistance(pos1, pos2, canvasSize) {\n    const { dx, dy } = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2), absDiffs = {\n        x: Math.abs(dx),\n        y: Math.abs(dy)\n    }, warpDistances = {\n        x: Math.min(absDiffs.x, canvasSize.width - absDiffs.x),\n        y: Math.min(absDiffs.y, canvasSize.height - absDiffs.y)\n    };\n    return Math.hypot(warpDistances.x, warpDistances.y);\n}\nclass Linker extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_3__.ParticlesInteractorBase {\n    _maxDistance;\n    _pluginManager;\n    constructor(pluginManager, container){\n        super(container);\n        this._pluginManager = pluginManager;\n        this._maxDistance = 0;\n    }\n    get maxDistance() {\n        return this._maxDistance;\n    }\n    clear() {}\n    init() {\n        this.container.particles.linksColor = undefined;\n        this.container.particles.linksColors = new Map();\n    }\n    interact(p1) {\n        if (!p1.options.links) {\n            return;\n        }\n        p1.links = [];\n        if (p1.linksDistance && p1.linksDistance > this._maxDistance) {\n            this._maxDistance = p1.linksDistance;\n        }\n        const pos1 = p1.getPosition(), container = this.container, canvasSize = container.canvas.size;\n        if (pos1.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos1.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos1.x > canvasSize.width || pos1.y > canvasSize.height) {\n            return;\n        }\n        const linkOpt1 = p1.options.links, optOpacity = linkOpt1.opacity, optDistance = p1.retina.linksDistance ?? minDistance, warp = linkOpt1.warp, range = warp ? new _CircleWarp_js__WEBPACK_IMPORTED_MODULE_1__.CircleWarp(pos1.x, pos1.y, optDistance, canvasSize) : new _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.Circle(pos1.x, pos1.y, optDistance), query = container.particles.grid.query(range);\n        for (const p2 of query){\n            const linkOpt2 = p2.options.links;\n            if (p1 === p2 || !linkOpt2?.enable || linkOpt1.id !== linkOpt2.id || p2.spawning || p2.destroyed || !p2.links || p1.links.some((t)=>t.destination === p2) || p2.links.some((t)=>t.destination === p1)) {\n                continue;\n            }\n            const pos2 = p2.getPosition();\n            if (pos2.x < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x || pos2.y < _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y || pos2.x > canvasSize.width || pos2.y > canvasSize.height) {\n                continue;\n            }\n            const distDirect = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getDistances)(pos1, pos2).distance, distWarp = warp && linkOpt2.warp ? getWarpDistance(pos1, pos2, canvasSize) : distDirect, distance = Math.min(distDirect, distWarp);\n            if (distance > optDistance) {\n                continue;\n            }\n            const opacityLine = (opacityOffset - distance / optDistance) * optOpacity;\n            this._setColor(p1);\n            p1.links.push({\n                destination: p2,\n                opacity: opacityLine,\n                color: this._getLinkColor(p1, p2),\n                isWarped: distWarp < distDirect\n            });\n        }\n    }\n    isEnabled(particle) {\n        return !!particle.options.links?.enable;\n    }\n    loadParticlesOptions(options, ...sources) {\n        options.links ??= new _Options_Classes_Links_js__WEBPACK_IMPORTED_MODULE_2__.Links();\n        for (const source of sources){\n            options.links.load(source?.links);\n        }\n    }\n    reset() {}\n    _getLinkColor(p1, p2) {\n        const container = this.container, linksOptions = p1.options.links;\n        if (!linksOptions) {\n            return;\n        }\n        const linkColor = linksOptions.id !== undefined ? container.particles.linksColors.get(linksOptions.id) : container.particles.linksColor;\n        return (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkColor)(p1, p2, linkColor);\n    }\n    _setColor(p1) {\n        if (!p1.options.links) {\n            return;\n        }\n        const container = this.container, linksOptions = p1.options.links;\n        let linkColor = linksOptions.id === undefined ? container.particles.linksColor : container.particles.linksColors.get(linksOptions.id);\n        if (linkColor) {\n            return;\n        }\n        linkColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLinkRandomColor)(this._pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);\n        if (linksOptions.id === undefined) {\n            container.particles.linksColor = linkColor;\n        } else {\n            container.particles.linksColors.set(linksOptions.id, linkColor);\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/Linker.js?\n}");
 
 /***/ }
 

package/dist_browser_LinksPlugin_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-beta.0
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinksPlugin: () => (/* binding */ LinksPlugin)\n/* harmony export */ });\nclass LinksPlugin {\n    id = \"links\";\n    _engine;\n    constructor(engine){\n        this._engine = engine;\n    }\n    async getPlugin(container) {\n        const { LinkInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_LinkInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./LinkInstance.js */ \"./dist/browser/LinkInstance.js\"));\n        return new LinkInstance(container, this._engine);\n    }\n    loadOptions() {}\n    needsPlugin() {\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinksPlugin.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   LinksPlugin: () => (/* binding */ LinksPlugin)\n/* harmony export */ });\nclass LinksPlugin {\n    id = \"links\";\n    _pluginManager;\n    constructor(pluginManager){\n        this._pluginManager = pluginManager;\n    }\n    async getPlugin(container) {\n        const { LinkInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_LinkInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./LinkInstance.js */ \"./dist/browser/LinkInstance.js\"));\n        return new LinkInstance(this._pluginManager, container);\n    }\n    loadOptions() {}\n    needsPlugin() {\n        return true;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-particles-links/./dist/browser/LinksPlugin.js?\n}");
 
 /***/ }
 

package/esm/LinkInstance.js

@@ -4,11 +4,11 @@ const minOpacity = 0, minWidth = 0, minDistance = 0, maxFrequency = 1, defaultFr
 export class LinkInstance {
     _colorCache = new Map();
     _container;
-    _engine;
     _freqs;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
-        this._engine = engine;
         this._freqs = { links: new Map(), triangles: new Map() };
     }
     drawParticle(context, particle) {
@@ -41,7 +41,9 @@ export class LinkInstance {
                 continue;
             }
             let opacity = link.opacity, colorLine = link.color;
-            const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency ? rangeColorToRgb(this._engine, twinkle.color) : undefined;
+            const twinkleRgb = twinkle?.enable && getRandom() < twinkle.frequency
+                ? rangeColorToRgb(this._pluginManager, twinkle.color)
+                : undefined;
             if (twinkle && twinkleRgb) {
                 colorLine = twinkleRgb;
                 opacity = getRangeValue(twinkle.opacity);
@@ -128,7 +130,7 @@ export class LinkInstance {
             if (this._getTriangleFrequency(p1, p2, p3) > (options.links?.triangles.frequency ?? defaultFrequency)) {
                 continue;
             }
-            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color) ?? link.color;
+            const opacityTriangle = triangleOptions.opacity ?? (link.opacity + vertex.opacity) * half, colorTriangle = rangeColorToRgb(this._pluginManager, triangleOptions.color) ?? link.color;
             if (!colorTriangle || opacityTriangle <= minOpacity) {
                 continue;
             }

package/esm/Linker.js

@@ -11,11 +11,11 @@ function getWarpDistance(pos1, pos2, canvasSize) {
     return Math.hypot(warpDistances.x, warpDistances.y);
 }
 export class Linker extends ParticlesInteractorBase {
-    _engine;
     _maxDistance;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this._maxDistance = 0;
     }
     get maxDistance() {
@@ -102,7 +102,7 @@ export class Linker extends ParticlesInteractorBase {
         if (linkColor) {
             return;
         }
-        linkColor = getLinkRandomColor(this._engine, linksOptions.color, linksOptions.blink, linksOptions.consent);
+        linkColor = getLinkRandomColor(this._pluginManager, linksOptions.color, linksOptions.blink, linksOptions.consent);
         if (linksOptions.id === undefined) {
             container.particles.linksColor = linkColor;
         }

package/esm/LinksPlugin.js

@@ -1,12 +1,12 @@
 export class LinksPlugin {
     id = "links";
-    _engine;
-    constructor(engine) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager) {
+        this._pluginManager = pluginManager;
     }
     async getPlugin(container) {
         const { LinkInstance } = await import("./LinkInstance.js");
-        return new LinkInstance(container, this._engine);
+        return new LinkInstance(this._pluginManager, container);
     }
     loadOptions() {
     }

package/esm/index.js

@@ -1,15 +1,15 @@
 export async function loadParticlesLinksInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
-        const [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const pluginManager = e.pluginManager, [{ ensureInteractivityPluginLoaded }, { LinksPlugin },] = await Promise.all([
             import("@tsparticles/plugin-interactivity"),
             import("./LinksPlugin.js"),
         ]);
         ensureInteractivityPluginLoaded(e);
-        e.addPlugin(new LinksPlugin(e));
-        e.addInteractor?.("particlesLinks", async (container) => {
+        pluginManager.addPlugin(new LinksPlugin(pluginManager));
+        pluginManager.addInteractor?.("particlesLinks", async (container) => {
             const { Linker } = await import("./Linker.js");
-            return new Linker(container, e);
+            return new Linker(pluginManager, container);
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-particles-links",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "description": "tsParticles links particles interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -87,9 +87,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/canvas-utils": "4.0.0-beta.0",
-    "@tsparticles/engine": "4.0.0-beta.0",
-    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
+    "@tsparticles/canvas-utils": "4.0.0-beta.1",
+    "@tsparticles/engine": "4.0.0-beta.1",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.1"
   },
   "publishConfig": {
     "access": "public"