@tsparticles/interaction-particles-links 3.6.0-beta.1 → 3.7.0

package/browser/LinkInstance.js

@@ -2,20 +2,19 @@ import { getDistance, getLinkColor, getRandom, getRangeValue, rangeColorToRgb, }
 import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
 const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5, maxFrequency = 1;
 export class LinkInstance {
-    constructor(container) {
-        this.container = container;
+    constructor(container, engine) {
         this._drawLinkLine = (p1, link) => {
             const p1LinksOptions = p1.options.links;
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
                 const twinkle = p1.options.twinkle?.lines;
                 if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(twinkle.color), twinkling = getRandom() < twinkleFreq;
+                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
                         colorLine = twinkleRgb;
                         opacity = getRangeValue(twinkle.opacity);
@@ -36,6 +35,7 @@ export class LinkInstance {
                     width,
                     begin: pos1,
                     end: pos2,
+                    engine: this._engine,
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
@@ -54,7 +54,7 @@ export class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
             if (opacityTriangle <= minOpacity) {
                 return;
             }
@@ -65,7 +65,7 @@ export class LinkInstance {
                     getDistance(pos3, pos1) > linksDistance) {
                     return;
                 }
-                let colorTriangle = rangeColorToRgb(triangleOptions.color);
+                let colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color);
                 if (!colorTriangle) {
                     const linkColor = linksOptions.id !== undefined
                         ? container.particles.linksColors.get(linksOptions.id)
@@ -114,6 +114,8 @@ export class LinkInstance {
         this._getTriangleFrequency = (p1, p2, p3) => {
             return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
         };
+        this._container = container;
+        this._engine = engine;
         this._freqs = {
             links: new Map(),
             triangles: new Map(),
@@ -144,7 +146,7 @@ export class LinkInstance {
         if (!particle.options.links) {
             return;
         }
-        const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
         retina.linksDistance = distance * ratio;
         retina.linksWidth = width * ratio;
     }

package/browser/Linker.js

@@ -20,13 +20,13 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
     return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 export class Linker extends ParticlesInteractorBase {
-    constructor(container) {
+    constructor(container, engine) {
         super(container);
         this._setColor = p1 => {
             if (!p1.options.links) {
                 return;
             }
-            const container = this.linkContainer, linksOptions = p1.options.links;
+            const container = this._linkContainer, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -34,7 +34,7 @@ export class Linker extends ParticlesInteractorBase {
                 return;
             }
             const optColor = linksOptions.color;
-            linkColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
+            linkColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
             if (linksOptions.id === undefined) {
                 container.particles.linksColor = linkColor;
             }
@@ -42,13 +42,14 @@ export class Linker extends ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this.linkContainer = container;
+        this._linkContainer = container;
+        this._engine = engine;
     }
     clear() {
     }
     init() {
-        this.linkContainer.particles.linksColor = undefined;
-        this.linkContainer.particles.linksColors = new Map();
+        this._linkContainer.particles.linksColor = undefined;
+        this._linkContainer.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {

package/browser/LinksPlugin.js

@@ -1,10 +1,11 @@
 import { LinkInstance } from "./LinkInstance.js";
 export class LinksPlugin {
-    constructor() {
+    constructor(engine) {
         this.id = "links";
+        this._engine = engine;
     }
     getPlugin(container) {
-        return Promise.resolve(new LinkInstance(container));
+        return Promise.resolve(new LinkInstance(container, this._engine));
     }
     loadOptions() {
     }

package/browser/Options/Classes/Links.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "@tsparticles/engine";
+import { OptionsColor, isNull } from "@tsparticles/engine";
 import { LinksShadow } from "./LinksShadow.js";
 import { LinksTriangle } from "./LinksTriangle.js";
 export class Links {
@@ -17,7 +17,7 @@ export class Links {
         this.warp = false;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.id !== undefined) {

package/browser/Options/Classes/LinksShadow.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "@tsparticles/engine";
+import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LinksShadow {
     constructor() {
         this.blur = 5;
@@ -7,7 +7,7 @@ export class LinksShadow {
         this.enable = false;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.blur !== undefined) {

package/browser/Options/Classes/LinksTriangle.js

@@ -1,11 +1,11 @@
-import { OptionsColor } from "@tsparticles/engine";
+import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LinksTriangle {
     constructor() {
         this.enable = false;
         this.frequency = 1;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.color !== undefined) {

package/browser/Utils.js

@@ -8,7 +8,7 @@ export function drawTriangle(context, p1, p2, p3) {
 }
 export function drawLinkLine(params) {
     let drawn = false;
-    const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+    const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
     if (getDistance(begin, end) <= maxDistance) {
         drawLine(context, begin, end);
         drawn = true;
@@ -68,7 +68,7 @@ export function drawLinkLine(params) {
     context.strokeStyle = getStyleFromRgb(colorLine, opacity);
     const { shadow } = links;
     if (shadow.enable) {
-        const shadowColor = rangeColorToRgb(shadow.color);
+        const shadowColor = rangeColorToRgb(engine, shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
             context.shadowColor = getStyleFromRgb(shadowColor);

package/browser/index.js

@@ -1,6 +1,8 @@
+import { assertValidVersion } from "@tsparticles/engine";
 import { loadLinksInteraction } from "./interaction.js";
 import { loadLinksPlugin } from "./plugin.js";
 export async function loadParticlesLinksInteraction(engine, refresh = true) {
+    assertValidVersion(engine, "3.7.0");
     await loadLinksInteraction(engine, refresh);
     await loadLinksPlugin(engine, refresh);
 }

package/browser/interaction.js

@@ -1,6 +1,6 @@
 import { Linker } from "./Linker.js";
 export async function loadLinksInteraction(engine, refresh = true) {
     await engine.addInteractor("particlesLinks", async (container) => {
-        return Promise.resolve(new Linker(container));
+        return Promise.resolve(new Linker(container, engine));
     }, refresh);
 }

package/browser/plugin.js

@@ -1,5 +1,5 @@
 import { LinksPlugin } from "./LinksPlugin.js";
 export async function loadLinksPlugin(engine, refresh = true) {
-    const plugin = new LinksPlugin();
+    const plugin = new LinksPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }

package/cjs/LinkInstance.js

@@ -5,20 +5,19 @@ const engine_1 = require("@tsparticles/engine");
 const Utils_js_1 = require("./Utils.js");
 const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5, maxFrequency = 1;
 class LinkInstance {
-    constructor(container) {
-        this.container = container;
+    constructor(container, engine) {
         this._drawLinkLine = (p1, link) => {
             const p1LinksOptions = p1.options.links;
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
                 const twinkle = p1.options.twinkle?.lines;
                 if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
+                    const twinkleFreq = twinkle.frequency, twinkleRgb = (0, engine_1.rangeColorToRgb)(this._engine, twinkle.color), twinkling = (0, engine_1.getRandom)() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
                         colorLine = twinkleRgb;
                         opacity = (0, engine_1.getRangeValue)(twinkle.opacity);
@@ -39,6 +38,7 @@ class LinkInstance {
                     width,
                     begin: pos1,
                     end: pos2,
+                    engine: this._engine,
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
@@ -57,7 +57,7 @@ class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
             if (opacityTriangle <= minOpacity) {
                 return;
             }
@@ -68,7 +68,7 @@ class LinkInstance {
                     (0, engine_1.getDistance)(pos3, pos1) > linksDistance) {
                     return;
                 }
-                let colorTriangle = (0, engine_1.rangeColorToRgb)(triangleOptions.color);
+                let colorTriangle = (0, engine_1.rangeColorToRgb)(this._engine, triangleOptions.color);
                 if (!colorTriangle) {
                     const linkColor = linksOptions.id !== undefined
                         ? container.particles.linksColors.get(linksOptions.id)
@@ -117,6 +117,8 @@ class LinkInstance {
         this._getTriangleFrequency = (p1, p2, p3) => {
             return (0, Utils_js_1.setLinkFrequency)([p1, p2, p3], this._freqs.triangles);
         };
+        this._container = container;
+        this._engine = engine;
         this._freqs = {
             links: new Map(),
             triangles: new Map(),
@@ -147,7 +149,7 @@ class LinkInstance {
         if (!particle.options.links) {
             return;
         }
-        const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
         retina.linksDistance = distance * ratio;
         retina.linksWidth = width * ratio;
     }

package/cjs/Linker.js

@@ -23,13 +23,13 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
     return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 class Linker extends engine_1.ParticlesInteractorBase {
-    constructor(container) {
+    constructor(container, engine) {
         super(container);
         this._setColor = p1 => {
             if (!p1.options.links) {
                 return;
             }
-            const container = this.linkContainer, linksOptions = p1.options.links;
+            const container = this._linkContainer, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -37,7 +37,7 @@ class Linker extends engine_1.ParticlesInteractorBase {
                 return;
             }
             const optColor = linksOptions.color;
-            linkColor = (0, engine_1.getLinkRandomColor)(optColor, linksOptions.blink, linksOptions.consent);
+            linkColor = (0, engine_1.getLinkRandomColor)(this._engine, optColor, linksOptions.blink, linksOptions.consent);
             if (linksOptions.id === undefined) {
                 container.particles.linksColor = linkColor;
             }
@@ -45,13 +45,14 @@ class Linker extends engine_1.ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this.linkContainer = container;
+        this._linkContainer = container;
+        this._engine = engine;
     }
     clear() {
     }
     init() {
-        this.linkContainer.particles.linksColor = undefined;
-        this.linkContainer.particles.linksColors = new Map();
+        this._linkContainer.particles.linksColor = undefined;
+        this._linkContainer.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {

package/cjs/LinksPlugin.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinksPlugin = void 0;
 const LinkInstance_js_1 = require("./LinkInstance.js");
 class LinksPlugin {
-    constructor() {
+    constructor(engine) {
         this.id = "links";
+        this._engine = engine;
     }
     getPlugin(container) {
-        return Promise.resolve(new LinkInstance_js_1.LinkInstance(container));
+        return Promise.resolve(new LinkInstance_js_1.LinkInstance(container, this._engine));
     }
     loadOptions() {
     }

package/cjs/Options/Classes/Links.js

@@ -20,7 +20,7 @@ class Links {
         this.warp = false;
     }
     load(data) {
-        if (!data) {
+        if ((0, engine_1.isNull)(data)) {
             return;
         }
         if (data.id !== undefined) {

package/cjs/Options/Classes/LinksShadow.js

@@ -10,7 +10,7 @@ class LinksShadow {
         this.enable = false;
     }
     load(data) {
-        if (!data) {
+        if ((0, engine_1.isNull)(data)) {
             return;
         }
         if (data.blur !== undefined) {

package/cjs/Options/Classes/LinksTriangle.js

@@ -8,7 +8,7 @@ class LinksTriangle {
         this.frequency = 1;
     }
     load(data) {
-        if (!data) {
+        if ((0, engine_1.isNull)(data)) {
             return;
         }
         if (data.color !== undefined) {

package/cjs/Utils.js

@@ -15,7 +15,7 @@ function drawTriangle(context, p1, p2, p3) {
 }
 function drawLinkLine(params) {
     let drawn = false;
-    const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+    const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
     if ((0, engine_1.getDistance)(begin, end) <= maxDistance) {
         (0, engine_1.drawLine)(context, begin, end);
         drawn = true;
@@ -75,7 +75,7 @@ function drawLinkLine(params) {
     context.strokeStyle = (0, engine_1.getStyleFromRgb)(colorLine, opacity);
     const { shadow } = links;
     if (shadow.enable) {
-        const shadowColor = (0, engine_1.rangeColorToRgb)(shadow.color);
+        const shadowColor = (0, engine_1.rangeColorToRgb)(engine, shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
             context.shadowColor = (0, engine_1.getStyleFromRgb)(shadowColor);

package/cjs/index.js

@@ -15,9 +15,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadParticlesLinksInteraction = loadParticlesLinksInteraction;
+const engine_1 = require("@tsparticles/engine");
 const interaction_js_1 = require("./interaction.js");
 const plugin_js_1 = require("./plugin.js");
 async function loadParticlesLinksInteraction(engine, refresh = true) {
+    (0, engine_1.assertValidVersion)(engine, "3.7.0");
     await (0, interaction_js_1.loadLinksInteraction)(engine, refresh);
     await (0, plugin_js_1.loadLinksPlugin)(engine, refresh);
 }

package/cjs/interaction.js

@@ -4,6 +4,6 @@ exports.loadLinksInteraction = loadLinksInteraction;
 const Linker_js_1 = require("./Linker.js");
 async function loadLinksInteraction(engine, refresh = true) {
     await engine.addInteractor("particlesLinks", async (container) => {
-        return Promise.resolve(new Linker_js_1.Linker(container));
+        return Promise.resolve(new Linker_js_1.Linker(container, engine));
     }, refresh);
 }

package/cjs/plugin.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadLinksPlugin = loadLinksPlugin;
 const LinksPlugin_js_1 = require("./LinksPlugin.js");
 async function loadLinksPlugin(engine, refresh = true) {
-    const plugin = new LinksPlugin_js_1.LinksPlugin();
+    const plugin = new LinksPlugin_js_1.LinksPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }

package/esm/LinkInstance.js

@@ -2,20 +2,19 @@ import { getDistance, getLinkColor, getRandom, getRangeValue, rangeColorToRgb, }
 import { drawLinkLine, drawLinkTriangle, setLinkFrequency } from "./Utils.js";
 const minOpacity = 0, minWidth = 0, minDistance = 0, half = 0.5, maxFrequency = 1;
 export class LinkInstance {
-    constructor(container) {
-        this.container = container;
+    constructor(container, engine) {
         this._drawLinkLine = (p1, link) => {
             const p1LinksOptions = p1.options.links;
             if (!p1LinksOptions?.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
+            const container = this._container, options = container.actualOptions, p2 = link.destination, pos1 = p1.getPosition(), pos2 = p2.getPosition();
             let opacity = link.opacity;
             container.canvas.draw(ctx => {
                 let colorLine;
                 const twinkle = p1.options.twinkle?.lines;
                 if (twinkle?.enable) {
-                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(twinkle.color), twinkling = getRandom() < twinkleFreq;
+                    const twinkleFreq = twinkle.frequency, twinkleRgb = rangeColorToRgb(this._engine, twinkle.color), twinkling = getRandom() < twinkleFreq;
                     if (twinkling && twinkleRgb) {
                         colorLine = twinkleRgb;
                         opacity = getRangeValue(twinkle.opacity);
@@ -36,6 +35,7 @@ export class LinkInstance {
                     width,
                     begin: pos1,
                     end: pos2,
+                    engine: this._engine,
                     maxDistance,
                     canvasSize: container.canvas.size,
                     links: p1LinksOptions,
@@ -54,7 +54,7 @@ export class LinkInstance {
             if (!triangleOptions.enable) {
                 return;
             }
-            const container = this.container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
+            const container = this._container, options = container.actualOptions, p2 = link1.destination, p3 = link2.destination, opacityTriangle = triangleOptions.opacity ?? (link1.opacity + link2.opacity) * half;
             if (opacityTriangle <= minOpacity) {
                 return;
             }
@@ -65,7 +65,7 @@ export class LinkInstance {
                     getDistance(pos3, pos1) > linksDistance) {
                     return;
                 }
-                let colorTriangle = rangeColorToRgb(triangleOptions.color);
+                let colorTriangle = rangeColorToRgb(this._engine, triangleOptions.color);
                 if (!colorTriangle) {
                     const linkColor = linksOptions.id !== undefined
                         ? container.particles.linksColors.get(linksOptions.id)
@@ -114,6 +114,8 @@ export class LinkInstance {
         this._getTriangleFrequency = (p1, p2, p3) => {
             return setLinkFrequency([p1, p2, p3], this._freqs.triangles);
         };
+        this._container = container;
+        this._engine = engine;
         this._freqs = {
             links: new Map(),
             triangles: new Map(),
@@ -144,7 +146,7 @@ export class LinkInstance {
         if (!particle.options.links) {
             return;
         }
-        const ratio = this.container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
+        const ratio = this._container.retina.pixelRatio, { retina } = particle, { distance, width } = particle.options.links;
         retina.linksDistance = distance * ratio;
         retina.linksWidth = width * ratio;
     }

package/esm/Linker.js

@@ -20,13 +20,13 @@ function getLinkDistance(pos1, pos2, optDistance, canvasSize, warp) {
     return Math.sqrt(warpDistances.x ** squarePower + warpDistances.y ** squarePower);
 }
 export class Linker extends ParticlesInteractorBase {
-    constructor(container) {
+    constructor(container, engine) {
         super(container);
         this._setColor = p1 => {
             if (!p1.options.links) {
                 return;
             }
-            const container = this.linkContainer, linksOptions = p1.options.links;
+            const container = this._linkContainer, linksOptions = p1.options.links;
             let linkColor = linksOptions.id === undefined
                 ? container.particles.linksColor
                 : container.particles.linksColors.get(linksOptions.id);
@@ -34,7 +34,7 @@ export class Linker extends ParticlesInteractorBase {
                 return;
             }
             const optColor = linksOptions.color;
-            linkColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
+            linkColor = getLinkRandomColor(this._engine, optColor, linksOptions.blink, linksOptions.consent);
             if (linksOptions.id === undefined) {
                 container.particles.linksColor = linkColor;
             }
@@ -42,13 +42,14 @@ export class Linker extends ParticlesInteractorBase {
                 container.particles.linksColors.set(linksOptions.id, linkColor);
             }
         };
-        this.linkContainer = container;
+        this._linkContainer = container;
+        this._engine = engine;
     }
     clear() {
     }
     init() {
-        this.linkContainer.particles.linksColor = undefined;
-        this.linkContainer.particles.linksColors = new Map();
+        this._linkContainer.particles.linksColor = undefined;
+        this._linkContainer.particles.linksColors = new Map();
     }
     interact(p1) {
         if (!p1.options.links) {

package/esm/LinksPlugin.js

@@ -1,10 +1,11 @@
 import { LinkInstance } from "./LinkInstance.js";
 export class LinksPlugin {
-    constructor() {
+    constructor(engine) {
         this.id = "links";
+        this._engine = engine;
     }
     getPlugin(container) {
-        return Promise.resolve(new LinkInstance(container));
+        return Promise.resolve(new LinkInstance(container, this._engine));
     }
     loadOptions() {
     }

package/esm/Options/Classes/Links.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "@tsparticles/engine";
+import { OptionsColor, isNull } from "@tsparticles/engine";
 import { LinksShadow } from "./LinksShadow.js";
 import { LinksTriangle } from "./LinksTriangle.js";
 export class Links {
@@ -17,7 +17,7 @@ export class Links {
         this.warp = false;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.id !== undefined) {

package/esm/Options/Classes/LinksShadow.js

@@ -1,4 +1,4 @@
-import { OptionsColor } from "@tsparticles/engine";
+import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LinksShadow {
     constructor() {
         this.blur = 5;
@@ -7,7 +7,7 @@ export class LinksShadow {
         this.enable = false;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.blur !== undefined) {

package/esm/Options/Classes/LinksTriangle.js

@@ -1,11 +1,11 @@
-import { OptionsColor } from "@tsparticles/engine";
+import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LinksTriangle {
     constructor() {
         this.enable = false;
         this.frequency = 1;
     }
     load(data) {
-        if (!data) {
+        if (isNull(data)) {
             return;
         }
         if (data.color !== undefined) {

package/esm/Utils.js

@@ -8,7 +8,7 @@ export function drawTriangle(context, p1, p2, p3) {
 }
 export function drawLinkLine(params) {
     let drawn = false;
-    const { begin, end, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
+    const { begin, end, engine, maxDistance, context, canvasSize, width, backgroundMask, colorLine, opacity, links } = params;
     if (getDistance(begin, end) <= maxDistance) {
         drawLine(context, begin, end);
         drawn = true;
@@ -68,7 +68,7 @@ export function drawLinkLine(params) {
     context.strokeStyle = getStyleFromRgb(colorLine, opacity);
     const { shadow } = links;
     if (shadow.enable) {
-        const shadowColor = rangeColorToRgb(shadow.color);
+        const shadowColor = rangeColorToRgb(engine, shadow.color);
         if (shadowColor) {
             context.shadowBlur = shadow.blur;
             context.shadowColor = getStyleFromRgb(shadowColor);

package/esm/index.js

@@ -1,6 +1,8 @@
+import { assertValidVersion } from "@tsparticles/engine";
 import { loadLinksInteraction } from "./interaction.js";
 import { loadLinksPlugin } from "./plugin.js";
 export async function loadParticlesLinksInteraction(engine, refresh = true) {
+    assertValidVersion(engine, "3.7.0");
     await loadLinksInteraction(engine, refresh);
     await loadLinksPlugin(engine, refresh);
 }

package/esm/interaction.js

@@ -1,6 +1,6 @@
 import { Linker } from "./Linker.js";
 export async function loadLinksInteraction(engine, refresh = true) {
     await engine.addInteractor("particlesLinks", async (container) => {
-        return Promise.resolve(new Linker(container));
+        return Promise.resolve(new Linker(container, engine));
     }, refresh);
 }

package/esm/plugin.js

@@ -1,5 +1,5 @@
 import { LinksPlugin } from "./LinksPlugin.js";
 export async function loadLinksPlugin(engine, refresh = true) {
-    const plugin = new LinksPlugin();
+    const plugin = new LinksPlugin(engine);
     await engine.addPlugin(plugin, refresh);
 }