@tsparticles/interaction-light 3.9.1 → 4.0.0-alpha.1

package/271.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 271.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_interaction_light=this.webpackChunk_tsparticles_interaction_light||[]).push([[271],{271(t,n,e){e.d(n,{ExternalLighter:()=>s});var i=e(303),o=e(324),a=e(831);class s extends i.ExternalInteractorBase{constructor(t,n){super(t),this._engine=n}clear(){}init(){}interact(){const t=this.container,n=t.actualOptions,e=t.interactivity;if(!n.interactivity.events.onHover.enable||"pointermove"!==e.status)return;const i=e.mouse.position;i&&t.canvas.draw((n=>{(0,o.tM)(t,n,i)}))}isEnabled(t){const n=this.container,e=n.interactivity.mouse,a=t?.interactivity??n.actualOptions.interactivity,s=a.events;if(!s.onHover.enable||!e.position)return!1;const r=(0,i.isInArray)(o.EF,s.onHover.mode);if(r&&a.modes.light){const t=a.modes.light.area.gradient;n.canvas.mouseLight={start:(0,i.rangeColorToRgb)(this._engine,t.start),stop:(0,i.rangeColorToRgb)(this._engine,t.stop)}}return r}loadModeOptions(t,...n){t.light??=new a.v;for(const e of n)t.light.load(e?.light)}reset(){}}},324(t,n,e){e.d(n,{EF:()=>l,No:()=>d,tM:()=>h});var i=e(303);const o=1,a=0,s=.5*Math.PI,r=2*Math.PI,c=.25*Math.PI,l="light";function h(t,n,e){const s=t.actualOptions.interactivity.modes.light?.area;if(!s)return;n.beginPath(),n.arc(e.x,e.y,s.radius,0,r);const c=n.createRadialGradient(e.x,e.y,0,e.x,e.y,s.radius),l=t.canvas.mouseLight;l?.start&&l.stop&&(c.addColorStop(a,(0,i.getStyleFromRgb)(l.start,t.hdr)),c.addColorStop(o,(0,i.getStyleFromRgb)(l.stop,t.hdr)),n.fillStyle=c,n.fill())}function d(t,n,e,o){const a=e.getPosition(),l=t.actualOptions.interactivity.modes.light?.shadow;if(!l)return;const h=e.lightShadow;if(!h)return;const d=e.getRadius(),g=e.sides,u=r/g,y=-e.rotation+c,p=[];for(let t=0;t<g;t++)p.push({x:a.x+d*Math.sin(y+u*t)*1,y:a.y+d*Math.cos(y+u*t)*1});const v=[],f=l.length;for(const t of p){const n=Math.atan2(o.y-t.y,o.x-t.x),e={x:t.x+f*Math.sin(-n-s),y:t.y+f*Math.cos(-n-s)};v.push({end:e,start:t})}const x=(0,i.getStyleFromRgb)(h,t.hdr);for(let t=v.length-1,e=0;t>=0;e=t--){n.beginPath();const i=v[t],o=v[e];i&&o&&(n.moveTo(i.start.x,i.start.y),n.lineTo(o.start.x,o.start.y),n.lineTo(o.end.x,o.end.y),n.lineTo(i.end.x,i.end.y),n.fillStyle=x,n.fill())}}}}]);

package/271.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Light Interaction v4.0.0-alpha.1 by Matteo Bruni */

package/547.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 547.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_interaction_light=this.webpackChunk_tsparticles_interaction_light||[]).push([[547],{324(t,e,i){i.d(e,{EF:()=>l,No:()=>d,tM:()=>h});var n=i(303);const o=1,s=0,a=.5*Math.PI,r=2*Math.PI,c=.25*Math.PI,l="light";function h(t,e,i){const a=t.actualOptions.interactivity.modes.light?.area;if(!a)return;e.beginPath(),e.arc(i.x,i.y,a.radius,0,r);const c=e.createRadialGradient(i.x,i.y,0,i.x,i.y,a.radius),l=t.canvas.mouseLight;l?.start&&l.stop&&(c.addColorStop(s,(0,n.getStyleFromRgb)(l.start,t.hdr)),c.addColorStop(o,(0,n.getStyleFromRgb)(l.stop,t.hdr)),e.fillStyle=c,e.fill())}function d(t,e,i,o){const s=i.getPosition(),l=t.actualOptions.interactivity.modes.light?.shadow;if(!l)return;const h=i.lightShadow;if(!h)return;const d=i.getRadius(),g=i.sides,u=r/g,y=-i.rotation+c,p=[];for(let t=0;t<g;t++)p.push({x:s.x+d*Math.sin(y+u*t)*1,y:s.y+d*Math.cos(y+u*t)*1});const v=[],f=l.length;for(const t of p){const e=Math.atan2(o.y-t.y,o.x-t.x),i={x:t.x+f*Math.sin(-e-a),y:t.y+f*Math.cos(-e-a)};v.push({end:i,start:t})}const x=(0,n.getStyleFromRgb)(h,t.hdr);for(let t=v.length-1,i=0;t>=0;i=t--){e.beginPath();const n=v[t],o=v[i];n&&o&&(e.moveTo(n.start.x,n.start.y),e.lineTo(o.start.x,o.start.y),e.lineTo(o.end.x,o.end.y),e.lineTo(n.end.x,n.end.y),e.fillStyle=x,e.fill())}}},547(t,e,i){i.d(e,{ParticlesLighter:()=>s});var n=i(303),o=i(324);class s extends n.ParticlesInteractorBase{constructor(t,e){super(t),this._engine=e}clear(){}init(){}interact(t){const e=this.container,i=e.actualOptions,n=e.interactivity;if(!i.interactivity.events.onHover.enable||"pointermove"!==n.status)return;const s=n.mouse.position;s&&e.canvas.draw((i=>{(0,o.No)(e,i,t,s)}))}isEnabled(t){const e=this.container,i=t.interactivity,s=e.interactivity.mouse,a=i.events;if(!a.onHover.enable||!s.position)return!1;const r=(0,n.isInArray)(o.EF,a.onHover.mode);if(r&&i.modes.light){const e=i.modes.light.shadow;t.lightShadow=(0,n.rangeColorToRgb)(this._engine,e.color)}return r}reset(){}}}}]);

package/547.min.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! tsParticles Light Interaction v4.0.0-alpha.1 by Matteo Bruni */

package/browser/ExternalLighter.js

@@ -39,9 +39,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         return res;
     }
     loadModeOptions(options, ...sources) {
-        if (!options.light) {
-            options.light = new Light();
-        }
+        options.light ??= new Light();
         for (const source of sources) {
             options.light.load(source?.light);
         }

package/browser/ParticlesLighter.js

@@ -23,7 +23,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         });
     }
     isEnabled(particle) {
-        const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        const container = this.container, interactivity = particle.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }

package/browser/Utils.js

@@ -16,8 +16,8 @@ export function drawLight(container, context, mousePos) {
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }
-    gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start));
-    gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop));
+    gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start, container.hdr));
+    gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop, container.hdr));
     context.fillStyle = gradientAmbientLight;
     context.fill();
 }
@@ -48,13 +48,17 @@ export function drawParticleShadow(container, context, particle, mousePos) {
             start: dot,
         });
     }
-    const shadowColor = getStyleFromRgb(shadowRgb), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+    const shadowColor = getStyleFromRgb(shadowRgb, container.hdr), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
     for (let i = last, n = 0; i >= firstPos; n = i--) {
         context.beginPath();
-        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);
+        const iPoint = points[i], nPoint = points[n];
+        if (!iPoint || !nPoint) {
+            continue;
+        }
+        context.moveTo(iPoint.start.x, iPoint.start.y);
+        context.lineTo(nPoint.start.x, nPoint.start.y);
+        context.lineTo(nPoint.end.x, nPoint.end.y);
+        context.lineTo(iPoint.end.x, iPoint.end.y);
         context.fillStyle = shadowColor;
         context.fill();
     }

package/browser/index.js

@@ -1,19 +1,17 @@
-import { ExternalLighter } from "./ExternalLighter.js";
-import { ParticlesLighter } from "./ParticlesLighter.js";
-export async function loadLightInteraction(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addInteractor("externalLight", container => {
-        return Promise.resolve(new ExternalLighter(container, engine));
-    }, refresh);
-    await engine.addInteractor("particlesLight", container => {
-        return Promise.resolve(new ParticlesLighter(container, engine));
-    }, refresh);
+export function loadLightInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.1");
+    engine.register(e => {
+        e.addInteractor("externalLight", async (container) => {
+            const { ExternalLighter } = await import("./ExternalLighter.js");
+            return new ExternalLighter(container, engine);
+        });
+        e.addInteractor("particlesLight", async (container) => {
+            const { ParticlesLighter } = await import("./ParticlesLighter.js");
+            return new ParticlesLighter(container, engine);
+        });
+    });
 }
 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/cjs/ExternalLighter.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExternalLighter = void 0;
-const engine_1 = require("@tsparticles/engine");
-const Utils_js_1 = require("./Utils.js");
-const Light_js_1 = require("./Options/Classes/Light.js");
-class ExternalLighter extends engine_1.ExternalInteractorBase {
+import { ExternalInteractorBase, isInArray, rangeColorToRgb, } from "@tsparticles/engine";
+import { drawLight, lightMode } from "./Utils.js";
+import { Light } from "./Options/Classes/Light.js";
+export class ExternalLighter extends ExternalInteractorBase {
     constructor(container, engine) {
         super(container);
         this._engine = engine;
@@ -23,7 +20,7 @@ class ExternalLighter extends engine_1.ExternalInteractorBase {
             return;
         }
         container.canvas.draw(ctx => {
-            (0, Utils_js_1.drawLight)(container, ctx, mousePos);
+            drawLight(container, ctx, mousePos);
         });
     }
     isEnabled(particle) {
@@ -31,20 +28,18 @@ class ExternalLighter extends engine_1.ExternalInteractorBase {
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }
-        const res = (0, engine_1.isInArray)(Utils_js_1.lightMode, events.onHover.mode);
+        const res = isInArray(lightMode, events.onHover.mode);
         if (res && interactivity.modes.light) {
             const lightGradient = interactivity.modes.light.area.gradient;
             container.canvas.mouseLight = {
-                start: (0, engine_1.rangeColorToRgb)(this._engine, lightGradient.start),
-                stop: (0, engine_1.rangeColorToRgb)(this._engine, lightGradient.stop),
+                start: rangeColorToRgb(this._engine, lightGradient.start),
+                stop: rangeColorToRgb(this._engine, lightGradient.stop),
             };
         }
         return res;
     }
     loadModeOptions(options, ...sources) {
-        if (!options.light) {
-            options.light = new Light_js_1.Light();
-        }
+        options.light ??= new Light();
         for (const source of sources) {
             options.light.load(source?.light);
         }
@@ -52,4 +47,3 @@ class ExternalLighter extends engine_1.ExternalInteractorBase {
     reset() {
     }
 }
-exports.ExternalLighter = ExternalLighter;

package/cjs/Options/Classes/Light.js

@@ -1,20 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Light = void 0;
-const engine_1 = require("@tsparticles/engine");
-const LightArea_js_1 = require("./LightArea.js");
-const LightShadow_js_1 = require("./LightShadow.js");
-class Light {
+import { isNull } from "@tsparticles/engine";
+import { LightArea } from "./LightArea.js";
+import { LightShadow } from "./LightShadow.js";
+export class Light {
     constructor() {
-        this.area = new LightArea_js_1.LightArea();
-        this.shadow = new LightShadow_js_1.LightShadow();
+        this.area = new LightArea();
+        this.shadow = new LightShadow();
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         this.area.load(data.area);
         this.shadow.load(data.shadow);
     }
 }
-exports.Light = Light;

package/cjs/Options/Classes/LightArea.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LightArea = void 0;
-const engine_1 = require("@tsparticles/engine");
-const LightGradient_js_1 = require("./LightGradient.js");
-class LightArea {
+import { isNull } from "@tsparticles/engine";
+import { LightGradient } from "./LightGradient.js";
+export class LightArea {
     constructor() {
-        this.gradient = new LightGradient_js_1.LightGradient();
+        this.gradient = new LightGradient();
         this.radius = 1000;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         this.gradient.load(data.gradient);
@@ -18,4 +15,3 @@ class LightArea {
         }
     }
 }
-exports.LightArea = LightArea;

package/cjs/Options/Classes/LightGradient.js

@@ -1,20 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LightGradient = void 0;
-const engine_1 = require("@tsparticles/engine");
-class LightGradient {
+import { OptionsColor, isNull } from "@tsparticles/engine";
+export class LightGradient {
     constructor() {
-        this.start = new engine_1.OptionsColor();
-        this.stop = new engine_1.OptionsColor();
+        this.start = new OptionsColor();
+        this.stop = new OptionsColor();
         this.start.value = "#ffffff";
         this.stop.value = "#000000";
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
-        this.start = engine_1.OptionsColor.create(this.start, data.start);
-        this.stop = engine_1.OptionsColor.create(this.stop, data.stop);
+        this.start = OptionsColor.create(this.start, data.start);
+        this.stop = OptionsColor.create(this.stop, data.stop);
     }
 }
-exports.LightGradient = LightGradient;

package/cjs/Options/Classes/LightOptions.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Classes/LightShadow.js

@@ -1,21 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LightShadow = void 0;
-const engine_1 = require("@tsparticles/engine");
-class LightShadow {
+import { OptionsColor, isNull } from "@tsparticles/engine";
+export class LightShadow {
     constructor() {
-        this.color = new engine_1.OptionsColor();
+        this.color = new OptionsColor();
         this.color.value = "#000000";
         this.length = 2000;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
-        this.color = engine_1.OptionsColor.create(this.color, data.color);
+        this.color = OptionsColor.create(this.color, data.color);
         if (data.length !== undefined) {
             this.length = data.length;
         }
     }
 }
-exports.LightShadow = LightShadow;

package/cjs/Options/Interfaces/ILight.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/ILightArea.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/ILightGradient.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Options/Interfaces/ILightShadow.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/ParticlesLighter.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ParticlesLighter = void 0;
-const engine_1 = require("@tsparticles/engine");
-const Utils_js_1 = require("./Utils.js");
-class ParticlesLighter extends engine_1.ParticlesInteractorBase {
+import { ParticlesInteractorBase, isInArray, rangeColorToRgb } from "@tsparticles/engine";
+import { drawParticleShadow, lightMode } from "./Utils.js";
+export class ParticlesLighter extends ParticlesInteractorBase {
     constructor(container, engine) {
         super(container);
         this._engine = engine;
@@ -22,22 +19,21 @@ class ParticlesLighter extends engine_1.ParticlesInteractorBase {
             return;
         }
         container.canvas.draw(ctx => {
-            (0, Utils_js_1.drawParticleShadow)(container, ctx, particle, mousePos);
+            drawParticleShadow(container, ctx, particle, mousePos);
         });
     }
     isEnabled(particle) {
-        const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        const container = this.container, interactivity = particle.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }
-        const res = (0, engine_1.isInArray)(Utils_js_1.lightMode, events.onHover.mode);
+        const res = isInArray(lightMode, events.onHover.mode);
         if (res && interactivity.modes.light) {
             const shadowOptions = interactivity.modes.light.shadow;
-            particle.lightShadow = (0, engine_1.rangeColorToRgb)(this._engine, shadowOptions.color);
+            particle.lightShadow = rangeColorToRgb(this._engine, shadowOptions.color);
         }
         return res;
     }
     reset() {
     }
 }
-exports.ParticlesLighter = ParticlesLighter;

package/cjs/Types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/cjs/Utils.js

@@ -1,15 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.lightMode = void 0;
-exports.drawLight = drawLight;
-exports.drawParticleShadow = drawParticleShadow;
-const engine_1 = require("@tsparticles/engine");
+import { getStyleFromRgb } from "@tsparticles/engine";
 const gradientPos = {
     max: 1,
     min: 0,
 }, half = 0.5, double = 2, halfPI = Math.PI * half, doublePI = Math.PI * double, quarter = 0.25, quarterPI = Math.PI * quarter, arcStart = 0;
-exports.lightMode = "light";
-function drawLight(container, context, mousePos) {
+export const lightMode = "light";
+export function drawLight(container, context, mousePos) {
     const lightOptions = container.actualOptions.interactivity.modes.light?.area;
     if (!lightOptions) {
         return;
@@ -21,12 +16,12 @@ function drawLight(container, context, mousePos) {
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }
-    gradientAmbientLight.addColorStop(gradientPos.min, (0, engine_1.getStyleFromRgb)(gradientRgb.start));
-    gradientAmbientLight.addColorStop(gradientPos.max, (0, engine_1.getStyleFromRgb)(gradientRgb.stop));
+    gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start, container.hdr));
+    gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop, container.hdr));
     context.fillStyle = gradientAmbientLight;
     context.fill();
 }
-function drawParticleShadow(container, context, particle, mousePos) {
+export function drawParticleShadow(container, context, particle, mousePos) {
     const pos = particle.getPosition(), shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;
     if (!shadowOptions) {
         return;
@@ -53,13 +48,17 @@ function drawParticleShadow(container, context, particle, mousePos) {
             start: dot,
         });
     }
-    const shadowColor = (0, engine_1.getStyleFromRgb)(shadowRgb), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+    const shadowColor = getStyleFromRgb(shadowRgb, container.hdr), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
     for (let i = last, n = 0; i >= firstPos; n = i--) {
         context.beginPath();
-        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);
+        const iPoint = points[i], nPoint = points[n];
+        if (!iPoint || !nPoint) {
+            continue;
+        }
+        context.moveTo(iPoint.start.x, iPoint.start.y);
+        context.lineTo(nPoint.start.x, nPoint.start.y);
+        context.lineTo(nPoint.end.x, nPoint.end.y);
+        context.lineTo(iPoint.end.x, iPoint.end.y);
         context.fillStyle = shadowColor;
         context.fill();
     }

package/cjs/index.js

@@ -1,36 +1,17 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadLightInteraction = loadLightInteraction;
-const ExternalLighter_js_1 = require("./ExternalLighter.js");
-const ParticlesLighter_js_1 = require("./ParticlesLighter.js");
-async function loadLightInteraction(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addInteractor("externalLight", container => {
-        return Promise.resolve(new ExternalLighter_js_1.ExternalLighter(container, engine));
-    }, refresh);
-    await engine.addInteractor("particlesLight", container => {
-        return Promise.resolve(new ParticlesLighter_js_1.ParticlesLighter(container, engine));
-    }, refresh);
+export function loadLightInteraction(engine) {
+    engine.checkVersion("4.0.0-alpha.1");
+    engine.register(e => {
+        e.addInteractor("externalLight", async (container) => {
+            const { ExternalLighter } = await import("./ExternalLighter.js");
+            return new ExternalLighter(container, engine);
+        });
+        e.addInteractor("particlesLight", async (container) => {
+            const { ParticlesLighter } = await import("./ParticlesLighter.js");
+            return new ParticlesLighter(container, engine);
+        });
+    });
 }
-__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);
+export * from "./Options/Classes/Light.js";
+export * from "./Options/Classes/LightArea.js";
+export * from "./Options/Classes/LightGradient.js";
+export * from "./Options/Classes/LightShadow.js";

package/dist_browser_ExternalLighter_js.js

@@ -0,0 +1,40 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-alpha.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_interaction_light"] = this["webpackChunk_tsparticles_interaction_light"] || []).push([["dist_browser_ExternalLighter_js"],{
+
+/***/ "./dist/browser/ExternalLighter.js"
+/*!*****************************************!*\
+  !*** ./dist/browser/ExternalLighter.js ***!
+  \*****************************************/
+(__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 */   ExternalLighter: () => (/* binding */ ExternalLighter)\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/* harmony import */ var _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Options/Classes/Light.js */ \"./dist/browser/Options/Classes/Light.js\");\n\n\n\nclass ExternalLighter extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._engine = engine;\n  }\n  clear() {}\n  init() {}\n  interact() {\n    const container = this.container,\n      options = container.actualOptions,\n      interactivity = container.interactivity;\n    if (!options.interactivity.events.onHover.enable || interactivity.status !== \"pointermove\") {\n      return;\n    }\n    const mousePos = interactivity.mouse.position;\n    if (!mousePos) {\n      return;\n    }\n    container.canvas.draw(ctx => {\n      (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawLight)(container, ctx, mousePos);\n    });\n  }\n  isEnabled(particle) {\n    const container = this.container,\n      mouse = container.interactivity.mouse,\n      interactivity = particle?.interactivity ?? container.actualOptions.interactivity,\n      events = interactivity.events;\n    if (!(events.onHover.enable && mouse.position)) {\n      return false;\n    }\n    const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_1__.lightMode, events.onHover.mode);\n    if (res && interactivity.modes.light) {\n      const lightGradient = interactivity.modes.light.area.gradient;\n      container.canvas.mouseLight = {\n        start: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, lightGradient.start),\n        stop: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, lightGradient.stop)\n      };\n    }\n    return res;\n  }\n  loadModeOptions(options, ...sources) {\n    options.light ??= new _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_2__.Light();\n    for (const source of sources) {\n      options.light.load(source?.light);\n    }\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ExternalLighter.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/Utils.js ***!
+  \*******************************/
+(__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 */   drawLight: () => (/* binding */ drawLight),\n/* harmony export */   drawParticleShadow: () => (/* binding */ drawParticleShadow),\n/* harmony export */   lightMode: () => (/* binding */ lightMode)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst gradientPos = {\n    max: 1,\n    min: 0\n  },\n  half = 0.5,\n  double = 2,\n  halfPI = Math.PI * half,\n  doublePI = Math.PI * double,\n  quarter = 0.25,\n  quarterPI = Math.PI * quarter,\n  arcStart = 0;\nconst lightMode = \"light\";\nfunction drawLight(container, context, mousePos) {\n  const lightOptions = container.actualOptions.interactivity.modes.light?.area;\n  if (!lightOptions) {\n    return;\n  }\n  context.beginPath();\n  context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);\n  const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);\n  const gradientRgb = container.canvas.mouseLight;\n  if (!gradientRgb?.start || !gradientRgb.stop) {\n    return;\n  }\n  gradientAmbientLight.addColorStop(gradientPos.min, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.start, container.hdr));\n  gradientAmbientLight.addColorStop(gradientPos.max, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.stop, container.hdr));\n  context.fillStyle = gradientAmbientLight;\n  context.fill();\n}\nfunction drawParticleShadow(container, context, particle, mousePos) {\n  const pos = particle.getPosition(),\n    shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;\n  if (!shadowOptions) {\n    return;\n  }\n  const shadowRgb = particle.lightShadow;\n  if (!shadowRgb) {\n    return;\n  }\n  const radius = particle.getRadius(),\n    sides = particle.sides,\n    full = doublePI / sides,\n    angle = -particle.rotation + quarterPI,\n    factor = 1,\n    dots = [];\n  for (let i = 0; i < sides; i++) {\n    dots.push({\n      x: pos.x + radius * Math.sin(angle + full * i) * factor,\n      y: pos.y + radius * Math.cos(angle + full * i) * factor\n    });\n  }\n  const points = [],\n    shadowLength = shadowOptions.length;\n  for (const dot of dots) {\n    const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),\n      end = {\n        x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),\n        y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI)\n      };\n    points.push({\n      end: end,\n      start: dot\n    });\n  }\n  const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowRgb, container.hdr),\n    lastOffset = 1,\n    firstPos = 0,\n    last = points.length - lastOffset;\n  for (let i = last, n = 0; i >= firstPos; n = i--) {\n    context.beginPath();\n    const iPoint = points[i],\n      nPoint = points[n];\n    if (!iPoint || !nPoint) {\n      continue;\n    }\n    context.moveTo(iPoint.start.x, iPoint.start.y);\n    context.lineTo(nPoint.start.x, nPoint.start.y);\n    context.lineTo(nPoint.end.x, nPoint.end.y);\n    context.lineTo(iPoint.end.x, iPoint.end.y);\n    context.fillStyle = shadowColor;\n    context.fill();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
+
+/***/ }
+
+}]);

package/dist_browser_ParticlesLighter_js.js

@@ -0,0 +1,40 @@
+/*!
+ * Author : Matteo Bruni
+ * MIT license: https://opensource.org/licenses/MIT
+ * Demo / Generator : https://particles.js.org/
+ * GitHub : https://www.github.com/matteobruni/tsparticles
+ * How to use? : Check the GitHub README
+ * v4.0.0-alpha.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_interaction_light"] = this["webpackChunk_tsparticles_interaction_light"] || []).push([["dist_browser_ParticlesLighter_js"],{
+
+/***/ "./dist/browser/ParticlesLighter.js"
+/*!******************************************!*\
+  !*** ./dist/browser/ParticlesLighter.js ***!
+  \******************************************/
+(__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 */   ParticlesLighter: () => (/* binding */ ParticlesLighter)\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\nclass ParticlesLighter extends _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.ParticlesInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._engine = engine;\n  }\n  clear() {}\n  init() {}\n  interact(particle) {\n    const container = this.container,\n      options = container.actualOptions,\n      interactivity = container.interactivity;\n    if (!options.interactivity.events.onHover.enable || interactivity.status !== \"pointermove\") {\n      return;\n    }\n    const mousePos = interactivity.mouse.position;\n    if (!mousePos) {\n      return;\n    }\n    container.canvas.draw(ctx => {\n      (0,_Utils_js__WEBPACK_IMPORTED_MODULE_1__.drawParticleShadow)(container, ctx, particle, mousePos);\n    });\n  }\n  isEnabled(particle) {\n    const container = this.container,\n      interactivity = particle.interactivity,\n      mouse = container.interactivity.mouse,\n      events = interactivity.events;\n    if (!(events.onHover.enable && mouse.position)) {\n      return false;\n    }\n    const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_1__.lightMode, events.onHover.mode);\n    if (res && interactivity.modes.light) {\n      const shadowOptions = interactivity.modes.light.shadow;\n      particle.lightShadow = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, shadowOptions.color);\n    }\n    return res;\n  }\n  reset() {}\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ParticlesLighter.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/Utils.js ***!
+  \*******************************/
+(__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 */   drawLight: () => (/* binding */ drawLight),\n/* harmony export */   drawParticleShadow: () => (/* binding */ drawParticleShadow),\n/* harmony export */   lightMode: () => (/* binding */ lightMode)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst gradientPos = {\n    max: 1,\n    min: 0\n  },\n  half = 0.5,\n  double = 2,\n  halfPI = Math.PI * half,\n  doublePI = Math.PI * double,\n  quarter = 0.25,\n  quarterPI = Math.PI * quarter,\n  arcStart = 0;\nconst lightMode = \"light\";\nfunction drawLight(container, context, mousePos) {\n  const lightOptions = container.actualOptions.interactivity.modes.light?.area;\n  if (!lightOptions) {\n    return;\n  }\n  context.beginPath();\n  context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);\n  const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);\n  const gradientRgb = container.canvas.mouseLight;\n  if (!gradientRgb?.start || !gradientRgb.stop) {\n    return;\n  }\n  gradientAmbientLight.addColorStop(gradientPos.min, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.start, container.hdr));\n  gradientAmbientLight.addColorStop(gradientPos.max, (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(gradientRgb.stop, container.hdr));\n  context.fillStyle = gradientAmbientLight;\n  context.fill();\n}\nfunction drawParticleShadow(container, context, particle, mousePos) {\n  const pos = particle.getPosition(),\n    shadowOptions = container.actualOptions.interactivity.modes.light?.shadow;\n  if (!shadowOptions) {\n    return;\n  }\n  const shadowRgb = particle.lightShadow;\n  if (!shadowRgb) {\n    return;\n  }\n  const radius = particle.getRadius(),\n    sides = particle.sides,\n    full = doublePI / sides,\n    angle = -particle.rotation + quarterPI,\n    factor = 1,\n    dots = [];\n  for (let i = 0; i < sides; i++) {\n    dots.push({\n      x: pos.x + radius * Math.sin(angle + full * i) * factor,\n      y: pos.y + radius * Math.cos(angle + full * i) * factor\n    });\n  }\n  const points = [],\n    shadowLength = shadowOptions.length;\n  for (const dot of dots) {\n    const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x),\n      end = {\n        x: dot.x + shadowLength * Math.sin(-dotAngle - halfPI),\n        y: dot.y + shadowLength * Math.cos(-dotAngle - halfPI)\n      };\n    points.push({\n      end: end,\n      start: dot\n    });\n  }\n  const shadowColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(shadowRgb, container.hdr),\n    lastOffset = 1,\n    firstPos = 0,\n    last = points.length - lastOffset;\n  for (let i = last, n = 0; i >= firstPos; n = i--) {\n    context.beginPath();\n    const iPoint = points[i],\n      nPoint = points[n];\n    if (!iPoint || !nPoint) {\n      continue;\n    }\n    context.moveTo(iPoint.start.x, iPoint.start.y);\n    context.lineTo(nPoint.start.x, nPoint.start.y);\n    context.lineTo(nPoint.end.x, nPoint.end.y);\n    context.lineTo(iPoint.end.x, iPoint.end.y);\n    context.fillStyle = shadowColor;\n    context.fill();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
+
+/***/ }
+
+}]);

package/esm/ExternalLighter.js

@@ -39,9 +39,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         return res;
     }
     loadModeOptions(options, ...sources) {
-        if (!options.light) {
-            options.light = new Light();
-        }
+        options.light ??= new Light();
         for (const source of sources) {
             options.light.load(source?.light);
         }

package/esm/ParticlesLighter.js

@@ -23,7 +23,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         });
     }
     isEnabled(particle) {
-        const container = this.container, interactivity = particle.interactivity ?? container.actualOptions.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
+        const container = this.container, interactivity = particle.interactivity, mouse = container.interactivity.mouse, events = interactivity.events;
         if (!(events.onHover.enable && mouse.position)) {
             return false;
         }

package/esm/Utils.js

@@ -16,8 +16,8 @@ export function drawLight(container, context, mousePos) {
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }
-    gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start));
-    gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop));
+    gradientAmbientLight.addColorStop(gradientPos.min, getStyleFromRgb(gradientRgb.start, container.hdr));
+    gradientAmbientLight.addColorStop(gradientPos.max, getStyleFromRgb(gradientRgb.stop, container.hdr));
     context.fillStyle = gradientAmbientLight;
     context.fill();
 }
@@ -48,13 +48,17 @@ export function drawParticleShadow(container, context, particle, mousePos) {
             start: dot,
         });
     }
-    const shadowColor = getStyleFromRgb(shadowRgb), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
+    const shadowColor = getStyleFromRgb(shadowRgb, container.hdr), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;
     for (let i = last, n = 0; i >= firstPos; n = i--) {
         context.beginPath();
-        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);
+        const iPoint = points[i], nPoint = points[n];
+        if (!iPoint || !nPoint) {
+            continue;
+        }
+        context.moveTo(iPoint.start.x, iPoint.start.y);
+        context.lineTo(nPoint.start.x, nPoint.start.y);
+        context.lineTo(nPoint.end.x, nPoint.end.y);
+        context.lineTo(iPoint.end.x, iPoint.end.y);
         context.fillStyle = shadowColor;
         context.fill();
     }