@tsparticles/interaction-light 3.0.0-alpha.0 → 3.0.0-beta.0

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Light Interaction
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-interaction-light/badge)](https://www.jsdelivr.com/package/npm/tsparticles-interaction-light)
-[![npmjs](https://badge.fury.io/js/tsparticles-interaction-light.svg)](https://www.npmjs.com/package/tsparticles-interaction-light)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-interaction-light)](https://www.npmjs.com/package/tsparticles-interaction-light) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/interaction-light/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/interaction-light)
+[![npmjs](https://badge.fury.io/js/@tsparticles/interaction-light.svg)](https://www.npmjs.com/package/@tsparticles/interaction-light)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/interaction-light)](https://www.npmjs.com/package/@tsparticles/interaction-light) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 [tsParticles](https://github.com/matteobruni/tsparticles) interaction plugin for light effect.
 
@@ -25,14 +25,16 @@ loadLightInteraction
 Once the scripts are loaded you can set up `tsParticles` and the interaction plugin like this:
 
 ```javascript
-loadLightInteraction(tsParticles);
-
-tsParticles.load({
-  id: "tsparticles",
-  options: {
-    /* options */
-  },
-});
+(async () => {
+  await loadLightInteraction(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      /* options */
+    },
+  });
+})();
 ```
 
 ### ESM / CommonJS
@@ -40,29 +42,33 @@ tsParticles.load({
 This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
 
 ```shell
-$ npm install tsparticles-interaction-light
+$ npm install @tsparticles/interaction-light
 ```
 
 or
 
 ```shell
-$ yarn add tsparticles-interaction-light
+$ yarn add @tsparticles/interaction-light
 ```
 
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadLightInteraction } = require("tsparticles-interaction-light");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadLightInteraction } = require("@tsparticles/interaction-light");
 
-loadLightInteraction(tsParticles);
+(async () => {
+  await loadLightInteraction(tsParticles);
+})();
 ```
 
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadLightInteraction } from "tsparticles-interaction-light";
+import { tsParticles } from "@tsparticles/engine";
+import { loadLightInteraction } from "@tsparticles/interaction-light";
 
-loadLightInteraction(tsParticles);
+(async () => {
+  await loadLightInteraction(tsParticles);
+})();
 ```

package/browser/ExternalLighter.js

@@ -1,4 +1,4 @@
-import { ExternalInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
+import { ExternalInteractorBase, isInArray, rangeColorToRgb, } from "@tsparticles/engine";
 import { Light } from "./Options/Classes/Light";
 import { drawLight } from "./Utils";
 export class ExternalLighter extends ExternalInteractorBase {
@@ -10,20 +10,20 @@ export class ExternalLighter extends ExternalInteractorBase {
     init() {
     }
     async interact() {
-        const container = this.container, options = container.actualOptions;
-        if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
-            const mousePos = container.interactivity.mouse.position;
-            if (!mousePos) {
-                return;
-            }
-            container.canvas.draw((ctx) => {
-                drawLight(container, ctx, mousePos);
-            });
+        const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
+        if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
+            return;
         }
+        const mousePos = interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        container.canvas.draw((ctx) => {
+            drawLight(container, ctx, mousePos);
+        });
     }
     isEnabled(particle) {
-        var _a;
-        const container = this.container, mouse = container.interactivity.mouse, interactivity = (_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, events = interactivity.events;
+        const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }
@@ -42,7 +42,7 @@ export class ExternalLighter extends ExternalInteractorBase {
             options.light = new Light();
         }
         for (const source of sources) {
-            options.light.load(source === null || source === void 0 ? void 0 : source.light);
+            options.light.load(source?.light);
         }
     }
     reset() {

package/browser/ParticlesLighter.js

@@ -9,19 +9,20 @@ export class ParticlesLighter extends ParticlesInteractorBase {
     init() {
     }
     async interact(particle) {
-        const container = this.container, options = container.actualOptions;
-        if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
-            const mousePos = this.container.interactivity.mouse.position;
-            if (mousePos) {
-                container.canvas.draw((ctx) => {
-                    drawParticleShadow(container, ctx, particle, mousePos);
-                });
-            }
+        const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
+        if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
+            return;
         }
+        const mousePos = interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        container.canvas.draw((ctx) => {
+            drawParticleShadow(container, ctx, particle, mousePos);
+        });
     }
     isEnabled(particle) {
-        var _a;
-        const container = this.container, interactivity = (_a = particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }

package/browser/Utils.js

@@ -1,7 +1,6 @@
 import { getStyleFromRgb } from "@tsparticles/engine";
 export function drawLight(container, context, mousePos) {
-    var _a;
-    const lightOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.area;
+    const lightOptions = container.actualOptions.interactivity.modes.light?.area;
     if (!lightOptions) {
         return;
     }
@@ -18,8 +17,7 @@ export function drawLight(container, context, mousePos) {
     context.fill();
 }
 export function drawParticleShadow(container, context, particle, mousePos) {
-    var _a;
-    const pos = particle.getPosition(), shadowOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.shadow;
+    const pos = particle.getPosition(), shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
     if (!shadowOptions) {
         return;
     }
@@ -36,22 +34,22 @@ export function drawParticleShadow(container, context, particle, mousePos) {
     }
     const points = [], shadowLength = shadowOptions.length;
     for (const dot of dots) {
-        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), endX = dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2), endY = dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2);
+        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
+            x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
+            y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
+        };
         points.push({
-            endX: endX,
-            endY: endY,
-            startX: dot.x,
-            startY: dot.y,
+            end: end,
+            start: dot,
         });
     }
-    const shadowColor = getStyleFromRgb(shadowRgb);
-    for (let i = points.length - 1; i >= 0; i--) {
-        const n = i === points.length - 1 ? 0 : i + 1;
+    const shadowColor = getStyleFromRgb(shadowRgb), last = points.length - 1;
+    for (let i = last, n = 0; i >= 0; n = i--) {
         context.beginPath();
-        context.moveTo(points[i].startX, points[i].startY);
-        context.lineTo(points[n].startX, points[n].startY);
-        context.lineTo(points[n].endX, points[n].endY);
-        context.lineTo(points[i].endX, points[i].endY);
+        context.moveTo(points[i].start.x, points[i].start.y);
+        context.lineTo(points[n].start.x, points[n].start.y);
+        context.lineTo(points[n].end.x, points[n].end.y);
+        context.lineTo(points[i].end.x, points[i].end.y);
         context.fillStyle = shadowColor;
         context.fill();
     }

package/browser/index.js

@@ -1,8 +1,8 @@
 import { ExternalLighter } from "./ExternalLighter";
 import { ParticlesLighter } from "./ParticlesLighter";
-export function loadLightInteraction(engine) {
-    engine.addInteractor("externalLight", (container) => new ExternalLighter(container));
-    engine.addInteractor("particlesLight", (container) => new ParticlesLighter(container));
+export async function loadLightInteraction(engine, refresh = true) {
+    await engine.addInteractor("externalLight", (container) => new ExternalLighter(container), refresh);
+    await engine.addInteractor("particlesLight", (container) => new ParticlesLighter(container), refresh);
 }
 export * from "./Options/Classes/Light";
 export * from "./Options/Classes/LightArea";

package/cjs/ExternalLighter.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExternalLighter = void 0;
 const engine_1 = require("@tsparticles/engine");
@@ -21,23 +12,21 @@ class ExternalLighter extends engine_1.ExternalInteractorBase {
     }
     init() {
     }
-    interact() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const container = this.container, options = container.actualOptions;
-            if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
-                const mousePos = container.interactivity.mouse.position;
-                if (!mousePos) {
-                    return;
-                }
-                container.canvas.draw((ctx) => {
-                    (0, Utils_1.drawLight)(container, ctx, mousePos);
-                });
-            }
+    async interact() {
+        const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
+        if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
+            return;
+        }
+        const mousePos = interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        container.canvas.draw((ctx) => {
+            (0, Utils_1.drawLight)(container, ctx, mousePos);
         });
     }
     isEnabled(particle) {
-        var _a;
-        const container = this.container, mouse = container.interactivity.mouse, interactivity = (_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, events = interactivity.events;
+        const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }
@@ -56,7 +45,7 @@ class ExternalLighter extends engine_1.ExternalInteractorBase {
             options.light = new Light_1.Light();
         }
         for (const source of sources) {
-            options.light.load(source === null || source === void 0 ? void 0 : source.light);
+            options.light.load(source?.light);
         }
     }
     reset() {

package/cjs/ParticlesLighter.js

@@ -1,13 +1,4 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ParticlesLighter = void 0;
 const engine_1 = require("@tsparticles/engine");
@@ -20,22 +11,21 @@ class ParticlesLighter extends engine_1.ParticlesInteractorBase {
     }
     init() {
     }
-    interact(particle) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const container = this.container, options = container.actualOptions;
-            if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
-                const mousePos = this.container.interactivity.mouse.position;
-                if (mousePos) {
-                    container.canvas.draw((ctx) => {
-                        (0, Utils_1.drawParticleShadow)(container, ctx, particle, mousePos);
-                    });
-                }
-            }
+    async interact(particle) {
+        const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
+        if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
+            return;
+        }
+        const mousePos = interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        container.canvas.draw((ctx) => {
+            (0, Utils_1.drawParticleShadow)(container, ctx, particle, mousePos);
         });
     }
     isEnabled(particle) {
-        var _a;
-        const container = this.container, interactivity = (_a = particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }

package/cjs/Utils.js

@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.drawParticleShadow = exports.drawLight = void 0;
 const engine_1 = require("@tsparticles/engine");
 function drawLight(container, context, mousePos) {
-    var _a;
-    const lightOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.area;
+    const lightOptions = container.actualOptions.interactivity.modes.light?.area;
     if (!lightOptions) {
         return;
     }
@@ -22,8 +21,7 @@ function drawLight(container, context, mousePos) {
 }
 exports.drawLight = drawLight;
 function drawParticleShadow(container, context, particle, mousePos) {
-    var _a;
-    const pos = particle.getPosition(), shadowOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.shadow;
+    const pos = particle.getPosition(), shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
     if (!shadowOptions) {
         return;
     }
@@ -40,22 +38,22 @@ function drawParticleShadow(container, context, particle, mousePos) {
     }
     const points = [], shadowLength = shadowOptions.length;
     for (const dot of dots) {
-        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), endX = dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2), endY = dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2);
+        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
+            x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
+            y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
+        };
         points.push({
-            endX: endX,
-            endY: endY,
-            startX: dot.x,
-            startY: dot.y,
+            end: end,
+            start: dot,
         });
     }
-    const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb);
-    for (let i = points.length - 1; i >= 0; i--) {
-        const n = i === points.length - 1 ? 0 : i + 1;
+    const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb), last = points.length - 1;
+    for (let i = last, n = 0; i >= 0; n = i--) {
         context.beginPath();
-        context.moveTo(points[i].startX, points[i].startY);
-        context.lineTo(points[n].startX, points[n].startY);
-        context.lineTo(points[n].endX, points[n].endY);
-        context.lineTo(points[i].endX, points[i].endY);
+        context.moveTo(points[i].start.x, points[i].start.y);
+        context.lineTo(points[n].start.x, points[n].start.y);
+        context.lineTo(points[n].end.x, points[n].end.y);
+        context.lineTo(points[i].end.x, points[i].end.y);
         context.fillStyle = shadowColor;
         context.fill();
     }

package/cjs/index.js

@@ -17,9 +17,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadLightInteraction = void 0;
 const ExternalLighter_1 = require("./ExternalLighter");
 const ParticlesLighter_1 = require("./ParticlesLighter");
-function loadLightInteraction(engine) {
-    engine.addInteractor("externalLight", (container) => new ExternalLighter_1.ExternalLighter(container));
-    engine.addInteractor("particlesLight", (container) => new ParticlesLighter_1.ParticlesLighter(container));
+async function loadLightInteraction(engine, refresh = true) {
+    await engine.addInteractor("externalLight", (container) => new ExternalLighter_1.ExternalLighter(container), refresh);
+    await engine.addInteractor("particlesLight", (container) => new ParticlesLighter_1.ParticlesLighter(container), refresh);
 }
 exports.loadLightInteraction = loadLightInteraction;
 __exportStar(require("./Options/Classes/Light"), exports);

package/esm/ExternalLighter.js

@@ -1,4 +1,4 @@
-import { ExternalInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
+import { ExternalInteractorBase, isInArray, rangeColorToRgb, } from "@tsparticles/engine";
 import { Light } from "./Options/Classes/Light";
 import { drawLight } from "./Utils";
 export class ExternalLighter extends ExternalInteractorBase {
@@ -10,20 +10,20 @@ export class ExternalLighter extends ExternalInteractorBase {
     init() {
     }
     async interact() {
-        const container = this.container, options = container.actualOptions;
-        if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
-            const mousePos = container.interactivity.mouse.position;
-            if (!mousePos) {
-                return;
-            }
-            container.canvas.draw((ctx) => {
-                drawLight(container, ctx, mousePos);
-            });
+        const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
+        if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
+            return;
         }
+        const mousePos = interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        container.canvas.draw((ctx) => {
+            drawLight(container, ctx, mousePos);
+        });
     }
     isEnabled(particle) {
-        var _a;
-        const container = this.container, mouse = container.interactivity.mouse, interactivity = (_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, events = interactivity.events;
+        const container = this.container, mouse = container.interactivity.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }
@@ -42,7 +42,7 @@ export class ExternalLighter extends ExternalInteractorBase {
             options.light = new Light();
         }
         for (const source of sources) {
-            options.light.load(source === null || source === void 0 ? void 0 : source.light);
+            options.light.load(source?.light);
         }
     }
     reset() {

package/esm/ParticlesLighter.js

@@ -9,19 +9,20 @@ export class ParticlesLighter extends ParticlesInteractorBase {
     init() {
     }
     async interact(particle) {
-        const container = this.container, options = container.actualOptions;
-        if (options.interactivity.events.onHover.enable && container.interactivity.status === "pointermove") {
-            const mousePos = this.container.interactivity.mouse.position;
-            if (mousePos) {
-                container.canvas.draw((ctx) => {
-                    drawParticleShadow(container, ctx, particle, mousePos);
-                });
-            }
+        const container = this.container, options = container.actualOptions, interactivity = container.interactivity;
+        if (!options.interactivity.events.onHover.enable || interactivity.status !== "pointermove") {
+            return;
         }
+        const mousePos = interactivity.mouse.position;
+        if (!mousePos) {
+            return;
+        }
+        container.canvas.draw((ctx) => {
+            drawParticleShadow(container, ctx, particle, mousePos);
+        });
     }
     isEnabled(particle) {
-        var _a;
-        const container = this.container, interactivity = (_a = particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }

package/esm/Utils.js

@@ -1,7 +1,6 @@
 import { getStyleFromRgb } from "@tsparticles/engine";
 export function drawLight(container, context, mousePos) {
-    var _a;
-    const lightOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.area;
+    const lightOptions = container.actualOptions.interactivity.modes.light?.area;
     if (!lightOptions) {
         return;
     }
@@ -18,8 +17,7 @@ export function drawLight(container, context, mousePos) {
     context.fill();
 }
 export function drawParticleShadow(container, context, particle, mousePos) {
-    var _a;
-    const pos = particle.getPosition(), shadowOptions = (_a = container.actualOptions.interactivity.modes.light) === null || _a === void 0 ? void 0 : _a.shadow;
+    const pos = particle.getPosition(), shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
     if (!shadowOptions) {
         return;
     }
@@ -36,22 +34,22 @@ export function drawParticleShadow(container, context, particle, mousePos) {
     }
     const points = [], shadowLength = shadowOptions.length;
     for (const dot of dots) {
-        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), endX = dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2), endY = dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2);
+        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), end = {
+            x: dot.x + shadowLength * Math.sin(-dotAngle - Math.PI / 2),
+            y: dot.y + shadowLength * Math.cos(-dotAngle - Math.PI / 2),
+        };
         points.push({
-            endX: endX,
-            endY: endY,
-            startX: dot.x,
-            startY: dot.y,
+            end: end,
+            start: dot,
         });
     }
-    const shadowColor = getStyleFromRgb(shadowRgb);
-    for (let i = points.length - 1; i >= 0; i--) {
-        const n = i === points.length - 1 ? 0 : i + 1;
+    const shadowColor = getStyleFromRgb(shadowRgb), last = points.length - 1;
+    for (let i = last, n = 0; i >= 0; n = i--) {
         context.beginPath();
-        context.moveTo(points[i].startX, points[i].startY);
-        context.lineTo(points[n].startX, points[n].startY);
-        context.lineTo(points[n].endX, points[n].endY);
-        context.lineTo(points[i].endX, points[i].endY);
+        context.moveTo(points[i].start.x, points[i].start.y);
+        context.lineTo(points[n].start.x, points[n].start.y);
+        context.lineTo(points[n].end.x, points[n].end.y);
+        context.lineTo(points[i].end.x, points[i].end.y);
         context.fillStyle = shadowColor;
         context.fill();
     }

package/esm/index.js

@@ -1,8 +1,8 @@
 import { ExternalLighter } from "./ExternalLighter";
 import { ParticlesLighter } from "./ParticlesLighter";
-export function loadLightInteraction(engine) {
-    engine.addInteractor("externalLight", (container) => new ExternalLighter(container));
-    engine.addInteractor("particlesLight", (container) => new ParticlesLighter(container));
+export async function loadLightInteraction(engine, refresh = true) {
+    await engine.addInteractor("externalLight", (container) => new ExternalLighter(container), refresh);
+    await engine.addInteractor("particlesLight", (container) => new ParticlesLighter(container), refresh);
 }
 export * from "./Options/Classes/Light";
 export * from "./Options/Classes/LightArea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-light",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-beta.0",
   "description": "tsParticles Light interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -73,6 +73,10 @@
       "type": "github",
       "url": "https://github.com/sponsors/matteobruni"
     },
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/tsparticles"
+    },
     {
       "type": "buymeacoffee",
       "url": "https://www.buymeacoffee.com/matteobruni"
@@ -83,10 +87,11 @@
   "unpkg": "tsparticles.interaction.light.min.js",
   "module": "esm/index.js",
   "types": "types/index.d.ts",
+  "sideEffects": false,
+  "dependencies": {
+    "@tsparticles/engine": "^3.0.0-beta.0"
+  },
   "publishConfig": {
     "access": "public"
-  },
-  "dependencies": {
-    "@tsparticles/engine": "^3.0.0-alpha.0"
   }
-}
+}