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

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,6 +1,6 @@
-import { ExternalInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
-import { Light } from "./Options/Classes/Light";
-import { drawLight } from "./Utils";
+import { ExternalInteractorBase, isInArray, rangeColorToRgb, } from "@tsparticles/engine";
+import { Light } from "./Options/Classes/Light.js";
+import { drawLight } from "./Utils.js";
 export class ExternalLighter extends ExternalInteractorBase {
     constructor(container) {
         super(container);
@@ -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/Options/Classes/Light.js

@@ -1,5 +1,5 @@
-import { LightArea } from "./LightArea";
-import { LightShadow } from "./LightShadow";
+import { LightArea } from "./LightArea.js";
+import { LightShadow } from "./LightShadow.js";
 export class Light {
     constructor() {
         this.area = new LightArea();

package/browser/Options/Classes/LightArea.js

@@ -1,4 +1,4 @@
-import { LightGradient } from "./LightGradient";
+import { LightGradient } from "./LightGradient.js";
 export class LightArea {
     constructor() {
         this.gradient = new LightGradient();

package/browser/ParticlesLighter.js

@@ -1,5 +1,5 @@
 import { ParticlesInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
-import { drawParticleShadow } from "./Utils";
+import { drawParticleShadow } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
     constructor(container) {
         super(container);
@@ -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,14 +1,14 @@
-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));
+import { ExternalLighter } from "./ExternalLighter.js";
+import { ParticlesLighter } from "./ParticlesLighter.js";
+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";
-export * from "./Options/Classes/LightGradient";
-export * from "./Options/Classes/LightShadow";
-export * from "./Options/Interfaces/ILight";
-export * from "./Options/Interfaces/ILightArea";
-export * from "./Options/Interfaces/ILightGradient";
-export * from "./Options/Interfaces/ILightShadow";
+export * from "./Options/Classes/Light.js";
+export * from "./Options/Classes/LightArea.js";
+export * from "./Options/Classes/LightGradient.js";
+export * from "./Options/Classes/LightShadow.js";
+export * from "./Options/Interfaces/ILight.js";
+export * from "./Options/Interfaces/ILightArea.js";
+export * from "./Options/Interfaces/ILightGradient.js";
+export * from "./Options/Interfaces/ILightShadow.js";

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/cjs/ExternalLighter.js

@@ -1,18 +1,9 @@
 "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");
-const Light_1 = require("./Options/Classes/Light");
-const Utils_1 = require("./Utils");
+const Light_js_1 = require("./Options/Classes/Light.js");
+const Utils_js_1 = require("./Utils.js");
 class ExternalLighter extends engine_1.ExternalInteractorBase {
     constructor(container) {
         super(container);
@@ -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_js_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;
         }
@@ -53,10 +42,10 @@ class ExternalLighter extends engine_1.ExternalInteractorBase {
     }
     loadModeOptions(options, ...sources) {
         if (!options.light) {
-            options.light = new Light_1.Light();
+            options.light = new Light_js_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/Options/Classes/Light.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Light = void 0;
-const LightArea_1 = require("./LightArea");
-const LightShadow_1 = require("./LightShadow");
+const LightArea_js_1 = require("./LightArea.js");
+const LightShadow_js_1 = require("./LightShadow.js");
 class Light {
     constructor() {
-        this.area = new LightArea_1.LightArea();
-        this.shadow = new LightShadow_1.LightShadow();
+        this.area = new LightArea_js_1.LightArea();
+        this.shadow = new LightShadow_js_1.LightShadow();
     }
     load(data) {
         if (!data) {

package/cjs/Options/Classes/LightArea.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LightArea = void 0;
-const LightGradient_1 = require("./LightGradient");
+const LightGradient_js_1 = require("./LightGradient.js");
 class LightArea {
     constructor() {
-        this.gradient = new LightGradient_1.LightGradient();
+        this.gradient = new LightGradient_js_1.LightGradient();
         this.radius = 1000;
     }
     load(data) {

package/cjs/ParticlesLighter.js

@@ -1,17 +1,8 @@
 "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");
-const Utils_1 = require("./Utils");
+const Utils_js_1 = require("./Utils.js");
 class ParticlesLighter extends engine_1.ParticlesInteractorBase {
     constructor(container) {
         super(container);
@@ -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_js_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

@@ -15,18 +15,18 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 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));
+const ExternalLighter_js_1 = require("./ExternalLighter.js");
+const ParticlesLighter_js_1 = require("./ParticlesLighter.js");
+async function loadLightInteraction(engine, refresh = true) {
+    await engine.addInteractor("externalLight", (container) => new ExternalLighter_js_1.ExternalLighter(container), refresh);
+    await engine.addInteractor("particlesLight", (container) => new ParticlesLighter_js_1.ParticlesLighter(container), refresh);
 }
 exports.loadLightInteraction = loadLightInteraction;
-__exportStar(require("./Options/Classes/Light"), exports);
-__exportStar(require("./Options/Classes/LightArea"), exports);
-__exportStar(require("./Options/Classes/LightGradient"), exports);
-__exportStar(require("./Options/Classes/LightShadow"), exports);
-__exportStar(require("./Options/Interfaces/ILight"), exports);
-__exportStar(require("./Options/Interfaces/ILightArea"), exports);
-__exportStar(require("./Options/Interfaces/ILightGradient"), exports);
-__exportStar(require("./Options/Interfaces/ILightShadow"), exports);
+__exportStar(require("./Options/Classes/Light.js"), exports);
+__exportStar(require("./Options/Classes/LightArea.js"), exports);
+__exportStar(require("./Options/Classes/LightGradient.js"), exports);
+__exportStar(require("./Options/Classes/LightShadow.js"), exports);
+__exportStar(require("./Options/Interfaces/ILight.js"), exports);
+__exportStar(require("./Options/Interfaces/ILightArea.js"), exports);
+__exportStar(require("./Options/Interfaces/ILightGradient.js"), exports);
+__exportStar(require("./Options/Interfaces/ILightShadow.js"), exports);

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/esm/ExternalLighter.js

@@ -1,6 +1,6 @@
-import { ExternalInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
-import { Light } from "./Options/Classes/Light";
-import { drawLight } from "./Utils";
+import { ExternalInteractorBase, isInArray, rangeColorToRgb, } from "@tsparticles/engine";
+import { Light } from "./Options/Classes/Light.js";
+import { drawLight } from "./Utils.js";
 export class ExternalLighter extends ExternalInteractorBase {
     constructor(container) {
         super(container);
@@ -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/Options/Classes/Light.js

@@ -1,5 +1,5 @@
-import { LightArea } from "./LightArea";
-import { LightShadow } from "./LightShadow";
+import { LightArea } from "./LightArea.js";
+import { LightShadow } from "./LightShadow.js";
 export class Light {
     constructor() {
         this.area = new LightArea();

package/esm/Options/Classes/LightArea.js

@@ -1,4 +1,4 @@
-import { LightGradient } from "./LightGradient";
+import { LightGradient } from "./LightGradient.js";
 export class LightArea {
     constructor() {
         this.gradient = new LightGradient();

package/esm/ParticlesLighter.js

@@ -1,5 +1,5 @@
 import { ParticlesInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
-import { drawParticleShadow } from "./Utils";
+import { drawParticleShadow } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
     constructor(container) {
         super(container);
@@ -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;
         }