@tsparticles/interaction-light 4.0.0-alpha.8 → 4.0.0-beta.1

package/386.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_light=this.webpackChunk_tsparticles_interaction_light||[]).push([[386],{386(t,e,i){i.d(e,{ParticlesLighter:()=>o});var a=i(702),r=i(303),n=i(131);class o extends a.ParticlesInteractorBase{maxDistance;_pluginManager;constructor(t,e){super(e),this._pluginManager=t,this.maxDistance=0}clear(){}init(){}interact(t,e){let i=this.container,a=i.actualOptions;if(!a.interactivity?.events.onHover.enable||"pointermove"!==e.status)return;let r=e.mouse.position;r&&i.canvas.render.draw(e=>{(0,n.No)(i,e,t,r)})}isEnabled(t,e){let i=t.interactivity,a=e.mouse,o=i.events;if(!(o.onHover.enable&&a.position))return!1;let l=(0,r.isInArray)(n.EF,o.onHover.mode);if(l&&i.modes.light){let e=i.modes.light.shadow;t.lightShadow=(0,r.rangeColorToRgb)(this._pluginManager,e.color)}return l}reset(){}}},131(t,e,i){i.d(e,{EF:()=>o,No:()=>s,tM:()=>l});var a=i(303);let r=Math.PI*a.half,n=Math.PI*a.quarter,o="light";function l(t,e,i){let r=t.actualOptions.interactivity?.modes.light?.area;if(!r)return;e.beginPath(),e.arc(i.x,i.y,r.radius,0,a.doublePI);let n=e.createRadialGradient(i.x,i.y,0,i.x,i.y,r.radius),o=t.canvas.mouseLight;o?.start&&o.stop&&(n.addColorStop(0,(0,a.getStyleFromRgb)(o.start,t.hdr)),n.addColorStop(1,(0,a.getStyleFromRgb)(o.stop,t.hdr)),e.fillStyle=n,e.fill())}function s(t,e,i,o){let l=i.getPosition(),s=t.actualOptions.interactivity?.modes.light?.shadow;if(!s)return;let h=i.lightShadow;if(!h)return;let d=i.getRadius(),c=i.sides,u=a.doublePI/c,g=-i.rotation+n,y=[];for(let t=0;t<c;t++)y.push({x:l.x+d*Math.sin(g+u*t)*1,y:l.y+d*Math.cos(g+u*t)*1});let p=[],f=s.length;for(let t of y){let e=Math.atan2(o.y-t.y,o.x-t.x),i={x:t.x+f*Math.sin(-e-r),y:t.y+f*Math.cos(-e-r)};p.push({end:i,start:t})}let x=(0,a.getStyleFromRgb)(h,t.hdr),m=p.length-1;for(let t=m,i=0;t>=0;i=t--){e.beginPath();let a=p[t],r=p[i];a&&r&&(e.moveTo(a.start.x,a.start.y),e.lineTo(r.start.x,r.start.y),e.lineTo(r.end.x,r.end.y),e.lineTo(a.end.x,a.end.y),e.fillStyle=x,e.fill())}}}}]);

package/456.min.js

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

package/README.md

@@ -26,6 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the interaction plu
 
 ```javascript
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadLightInteraction(tsParticles);
 
   await tsParticles.load({
@@ -55,9 +56,11 @@ Then you need to import it in the app, like this:
 
 ```javascript
 const { tsParticles } = require("@tsparticles/engine");
+const { loadInteractivityPlugin } = require("@tsparticles/plugin-interactivity");
 const { loadLightInteraction } = require("@tsparticles/interaction-light");
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadLightInteraction(tsParticles);
 })();
 ```
@@ -66,9 +69,11 @@ or
 
 ```javascript
 import { tsParticles } from "@tsparticles/engine";
+import { loadInteractivityPlugin } from "@tsparticles/plugin-interactivity";
 import { loadLightInteraction } from "@tsparticles/interaction-light";
 
 (async () => {
+  await loadInteractivityPlugin(tsParticles);
   await loadLightInteraction(tsParticles);
 })();
 ```

package/browser/ExternalLighter.js

@@ -1,11 +1,13 @@
-import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { 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) {
+    maxDistance = 0;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     clear() {
     }
@@ -20,7 +22,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawLight(container, ctx, mousePos);
         });
     }
@@ -33,8 +35,8 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (res && interactivity?.modes.light) {
             const lightGradient = interactivity.modes.light.area.gradient;
             container.canvas.mouseLight = {
-                start: rangeColorToRgb(this._engine, lightGradient.start),
-                stop: rangeColorToRgb(this._engine, lightGradient.stop),
+                start: rangeColorToRgb(this._pluginManager, lightGradient.start),
+                stop: rangeColorToRgb(this._pluginManager, lightGradient.stop),
             };
         }
         return res;

package/browser/Options/Classes/Light.js

@@ -2,6 +2,8 @@ import { isNull } from "@tsparticles/engine";
 import { LightArea } from "./LightArea.js";
 import { LightShadow } from "./LightShadow.js";
 export class Light {
+    area;
+    shadow;
     constructor() {
         this.area = new LightArea();
         this.shadow = new LightShadow();

package/browser/Options/Classes/LightArea.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { LightGradient } from "./LightGradient.js";
 export class LightArea {
+    gradient;
+    radius;
     constructor() {
         this.gradient = new LightGradient();
         this.radius = 1000;

package/browser/Options/Classes/LightGradient.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightGradient {
+    start;
+    stop;
     constructor() {
         this.start = new OptionsColor();
         this.stop = new OptionsColor();

package/browser/Options/Classes/LightShadow.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightShadow {
+    color;
+    length;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "#000000";

package/browser/ParticlesLighter.js

@@ -1,10 +1,13 @@
-import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
+import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { drawParticleShadow, lightMode } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
-    constructor(container, engine) {
+    maxDistance;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
+        this.maxDistance = 0;
     }
     clear() {
     }
@@ -19,7 +22,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawParticleShadow(container, ctx, particle, mousePos);
         });
     }
@@ -31,7 +34,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         const res = isInArray(lightMode, events.onHover.mode);
         if (res && interactivity.modes.light) {
             const shadowOptions = interactivity.modes.light.shadow;
-            particle.lightShadow = rangeColorToRgb(this._engine, shadowOptions.color);
+            particle.lightShadow = rangeColorToRgb(this._pluginManager, shadowOptions.color);
         }
         return res;
     }

package/browser/Utils.js

@@ -1,4 +1,4 @@
-import { doublePI, getStyleFromRgb, half, quarter } from "@tsparticles/engine";
+import { doublePI, getStyleFromRgb, half, quarter, } from "@tsparticles/engine";
 const gradientPos = {
     max: 1,
     min: 0,
@@ -11,8 +11,7 @@ export function drawLight(container, context, mousePos) {
     }
     context.beginPath();
     context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
-    const gradientRgb = container.canvas.mouseLight;
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }

package/browser/index.js

@@ -1,15 +1,15 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
-        e.addInteractor?.("externalLight", async (container) => {
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalLight", async (container) => {
             const { ExternalLighter } = await import("./ExternalLighter.js");
-            return new ExternalLighter(container, engine);
+            return new ExternalLighter(e.pluginManager, container);
         });
-        e.addInteractor?.("particlesLight", async (container) => {
+        e.pluginManager.addInteractor?.("particlesLight", async (container) => {
             const { ParticlesLighter } = await import("./ParticlesLighter.js");
-            return new ParticlesLighter(container, engine);
+            return new ParticlesLighter(e.pluginManager, container);
         });
     });
 }

package/cjs/ExternalLighter.js

@@ -1,11 +1,13 @@
-import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { 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) {
+    maxDistance = 0;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     clear() {
     }
@@ -20,7 +22,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawLight(container, ctx, mousePos);
         });
     }
@@ -33,8 +35,8 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (res && interactivity?.modes.light) {
             const lightGradient = interactivity.modes.light.area.gradient;
             container.canvas.mouseLight = {
-                start: rangeColorToRgb(this._engine, lightGradient.start),
-                stop: rangeColorToRgb(this._engine, lightGradient.stop),
+                start: rangeColorToRgb(this._pluginManager, lightGradient.start),
+                stop: rangeColorToRgb(this._pluginManager, lightGradient.stop),
             };
         }
         return res;

package/cjs/Options/Classes/Light.js

@@ -2,6 +2,8 @@ import { isNull } from "@tsparticles/engine";
 import { LightArea } from "./LightArea.js";
 import { LightShadow } from "./LightShadow.js";
 export class Light {
+    area;
+    shadow;
     constructor() {
         this.area = new LightArea();
         this.shadow = new LightShadow();

package/cjs/Options/Classes/LightArea.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { LightGradient } from "./LightGradient.js";
 export class LightArea {
+    gradient;
+    radius;
     constructor() {
         this.gradient = new LightGradient();
         this.radius = 1000;

package/cjs/Options/Classes/LightGradient.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightGradient {
+    start;
+    stop;
     constructor() {
         this.start = new OptionsColor();
         this.stop = new OptionsColor();

package/cjs/Options/Classes/LightShadow.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightShadow {
+    color;
+    length;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "#000000";

package/cjs/ParticlesLighter.js

@@ -1,10 +1,13 @@
-import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
+import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { drawParticleShadow, lightMode } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
-    constructor(container, engine) {
+    maxDistance;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
+        this.maxDistance = 0;
     }
     clear() {
     }
@@ -19,7 +22,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawParticleShadow(container, ctx, particle, mousePos);
         });
     }
@@ -31,7 +34,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         const res = isInArray(lightMode, events.onHover.mode);
         if (res && interactivity.modes.light) {
             const shadowOptions = interactivity.modes.light.shadow;
-            particle.lightShadow = rangeColorToRgb(this._engine, shadowOptions.color);
+            particle.lightShadow = rangeColorToRgb(this._pluginManager, shadowOptions.color);
         }
         return res;
     }

package/cjs/Utils.js

@@ -1,4 +1,4 @@
-import { doublePI, getStyleFromRgb, half, quarter } from "@tsparticles/engine";
+import { doublePI, getStyleFromRgb, half, quarter, } from "@tsparticles/engine";
 const gradientPos = {
     max: 1,
     min: 0,
@@ -11,8 +11,7 @@ export function drawLight(container, context, mousePos) {
     }
     context.beginPath();
     context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
-    const gradientRgb = container.canvas.mouseLight;
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }

package/cjs/index.js

@@ -1,15 +1,15 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
-        e.addInteractor?.("externalLight", async (container) => {
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalLight", async (container) => {
             const { ExternalLighter } = await import("./ExternalLighter.js");
-            return new ExternalLighter(container, engine);
+            return new ExternalLighter(e.pluginManager, container);
         });
-        e.addInteractor?.("particlesLight", async (container) => {
+        e.pluginManager.addInteractor?.("particlesLight", async (container) => {
             const { ParticlesLighter } = await import("./ParticlesLighter.js");
-            return new ParticlesLighter(container, engine);
+            return new ParticlesLighter(e.pluginManager, container);
         });
     });
 }

package/dist_browser_ExternalLighter_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \*****************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   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 _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Light.js */ \"./dist/browser/Options/Classes/Light.js\");\n\n\n\n\nclass ExternalLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ExternalInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._engine = engine;\n  }\n  clear() {}\n  init() {}\n  interact(interactivityData) {\n    const container = this.container,\n      options = container.actualOptions,\n      interactivity = interactivityData;\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_2__.drawLight)(container, ctx, mousePos);\n    });\n  }\n  isEnabled(interactivityData, particle) {\n    const container = this.container,\n      mouse = interactivityData.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_2__.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_3__.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}");
+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_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n/* harmony import */ var _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Options/Classes/Light.js */ \"./dist/browser/Options/Classes/Light.js\");\n\n\n\n\nclass ExternalLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ExternalInteractorBase {\n    maxDistance = 0;\n    _pluginManager;\n    constructor(pluginManager, container){\n        super(container);\n        this._pluginManager = pluginManager;\n    }\n    clear() {}\n    init() {}\n    interact(interactivityData) {\n        const container = this.container, options = container.actualOptions, interactivity = interactivityData;\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.render.draw((ctx)=>{\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawLight)(container, ctx, mousePos);\n        });\n    }\n    isEnabled(interactivityData, particle) {\n        const container = this.container, mouse = interactivityData.mouse, interactivity = particle?.interactivity ?? container.actualOptions.interactivity, events = interactivity?.events;\n        if (!(events?.onHover.enable && mouse.position)) {\n            return false;\n        }\n        const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_2__.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_1__.rangeColorToRgb)(this._pluginManager, lightGradient.start),\n                stop: (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.rangeColorToRgb)(this._pluginManager, lightGradient.stop)\n            };\n        }\n        return res;\n    }\n    loadModeOptions(options, ...sources) {\n        options.light ??= new _Options_Classes_Light_js__WEBPACK_IMPORTED_MODULE_3__.Light();\n        for (const source of sources){\n            options.light.load(source?.light);\n        }\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ExternalLighter.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   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  halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n  quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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}");
+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}, halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.quarter, 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, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI);\n    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), 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(), 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(), sides = particle.sides, full = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, 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 = [], shadowLength = shadowOptions.length;\n    for (const dot of dots){\n        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), 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), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;\n    for(let i = last, n = 0; i >= firstPos; n = i--){\n        context.beginPath();\n        const iPoint = points[i], 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\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/dist_browser_ParticlesLighter_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 "use strict";
 /*
@@ -23,7 +23,7 @@
   \******************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   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 _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\nclass ParticlesLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_1__.ParticlesInteractorBase {\n  constructor(container, engine) {\n    super(container);\n    this._engine = engine;\n  }\n  clear() {}\n  init() {}\n  interact(particle, interactivityData) {\n    const container = this.container,\n      options = container.actualOptions;\n    if (!options.interactivity?.events.onHover.enable || interactivityData.status !== \"pointermove\") {\n      return;\n    }\n    const mousePos = interactivityData.mouse.position;\n    if (!mousePos) {\n      return;\n    }\n    container.canvas.draw(ctx => {\n      (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawParticleShadow)(container, ctx, particle, mousePos);\n    });\n  }\n  isEnabled(particle, interactivityData) {\n    const interactivity = particle.interactivity,\n      mouse = interactivityData.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_2__.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}");
+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_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\nclass ParticlesLighter extends _tsparticles_plugin_interactivity__WEBPACK_IMPORTED_MODULE_0__.ParticlesInteractorBase {\n    maxDistance;\n    _pluginManager;\n    constructor(pluginManager, container){\n        super(container);\n        this._pluginManager = pluginManager;\n        this.maxDistance = 0;\n    }\n    clear() {}\n    init() {}\n    interact(particle, interactivityData) {\n        const container = this.container, options = container.actualOptions;\n        if (!options.interactivity?.events.onHover.enable || interactivityData.status !== \"pointermove\") {\n            return;\n        }\n        const mousePos = interactivityData.mouse.position;\n        if (!mousePos) {\n            return;\n        }\n        container.canvas.render.draw((ctx)=>{\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_2__.drawParticleShadow)(container, ctx, particle, mousePos);\n        });\n    }\n    isEnabled(particle, interactivityData) {\n        const interactivity = particle.interactivity, mouse = interactivityData.mouse, events = interactivity.events;\n        if (!(events.onHover.enable && mouse.position)) {\n            return false;\n        }\n        const res = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isInArray)(_Utils_js__WEBPACK_IMPORTED_MODULE_2__.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_1__.rangeColorToRgb)(this._pluginManager, shadowOptions.color);\n        }\n        return res;\n    }\n    reset() {}\n}\n\n\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/ParticlesLighter.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   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  halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half,\n  quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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}");
+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}, halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, quarterPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.quarter, 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, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI);\n    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), 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(), 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(), sides = particle.sides, full = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI / sides, angle = -particle.rotation + quarterPI, factor = 1, 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 = [], shadowLength = shadowOptions.length;\n    for (const dot of dots){\n        const dotAngle = Math.atan2(mousePos.y - dot.y, mousePos.x - dot.x), 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), lastOffset = 1, firstPos = 0, last = points.length - lastOffset;\n    for(let i = last, n = 0; i >= firstPos; n = i--){\n        context.beginPath();\n        const iPoint = points[i], 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\n//# sourceURL=webpack://@tsparticles/interaction-light/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/esm/ExternalLighter.js

@@ -1,11 +1,13 @@
-import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { 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) {
+    maxDistance = 0;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     clear() {
     }
@@ -20,7 +22,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawLight(container, ctx, mousePos);
         });
     }
@@ -33,8 +35,8 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (res && interactivity?.modes.light) {
             const lightGradient = interactivity.modes.light.area.gradient;
             container.canvas.mouseLight = {
-                start: rangeColorToRgb(this._engine, lightGradient.start),
-                stop: rangeColorToRgb(this._engine, lightGradient.stop),
+                start: rangeColorToRgb(this._pluginManager, lightGradient.start),
+                stop: rangeColorToRgb(this._pluginManager, lightGradient.stop),
             };
         }
         return res;

package/esm/Options/Classes/Light.js

@@ -2,6 +2,8 @@ import { isNull } from "@tsparticles/engine";
 import { LightArea } from "./LightArea.js";
 import { LightShadow } from "./LightShadow.js";
 export class Light {
+    area;
+    shadow;
     constructor() {
         this.area = new LightArea();
         this.shadow = new LightShadow();

package/esm/Options/Classes/LightArea.js

@@ -1,6 +1,8 @@
 import { isNull } from "@tsparticles/engine";
 import { LightGradient } from "./LightGradient.js";
 export class LightArea {
+    gradient;
+    radius;
     constructor() {
         this.gradient = new LightGradient();
         this.radius = 1000;

package/esm/Options/Classes/LightGradient.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightGradient {
+    start;
+    stop;
     constructor() {
         this.start = new OptionsColor();
         this.stop = new OptionsColor();

package/esm/Options/Classes/LightShadow.js

@@ -1,5 +1,7 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class LightShadow {
+    color;
+    length;
     constructor() {
         this.color = new OptionsColor();
         this.color.value = "#000000";

package/esm/ParticlesLighter.js

@@ -1,10 +1,13 @@
-import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { ParticlesInteractorBase } from "@tsparticles/plugin-interactivity";
+import { isInArray, rangeColorToRgb } from "@tsparticles/engine";
 import { drawParticleShadow, lightMode } from "./Utils.js";
 export class ParticlesLighter extends ParticlesInteractorBase {
-    constructor(container, engine) {
+    maxDistance;
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
+        this.maxDistance = 0;
     }
     clear() {
     }
@@ -19,7 +22,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawParticleShadow(container, ctx, particle, mousePos);
         });
     }
@@ -31,7 +34,7 @@ export class ParticlesLighter extends ParticlesInteractorBase {
         const res = isInArray(lightMode, events.onHover.mode);
         if (res && interactivity.modes.light) {
             const shadowOptions = interactivity.modes.light.shadow;
-            particle.lightShadow = rangeColorToRgb(this._engine, shadowOptions.color);
+            particle.lightShadow = rangeColorToRgb(this._pluginManager, shadowOptions.color);
         }
         return res;
     }

package/esm/Utils.js

@@ -1,4 +1,4 @@
-import { doublePI, getStyleFromRgb, half, quarter } from "@tsparticles/engine";
+import { doublePI, getStyleFromRgb, half, quarter, } from "@tsparticles/engine";
 const gradientPos = {
     max: 1,
     min: 0,
@@ -11,8 +11,7 @@ export function drawLight(container, context, mousePos) {
     }
     context.beginPath();
     context.arc(mousePos.x, mousePos.y, lightOptions.radius, arcStart, doublePI);
-    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius);
-    const gradientRgb = container.canvas.mouseLight;
+    const gradientAmbientLight = context.createRadialGradient(mousePos.x, mousePos.y, arcStart, mousePos.x, mousePos.y, lightOptions.radius), gradientRgb = container.canvas.mouseLight;
     if (!gradientRgb?.start || !gradientRgb.stop) {
         return;
     }

package/esm/index.js

@@ -1,15 +1,15 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity");
-        await loadInteractivityPlugin(e);
-        e.addInteractor?.("externalLight", async (container) => {
+    engine.checkVersion("4.0.0-beta.1");
+    await engine.pluginManager.register(async (e) => {
+        const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
+        ensureInteractivityPluginLoaded(e);
+        e.pluginManager.addInteractor?.("externalLight", async (container) => {
             const { ExternalLighter } = await import("./ExternalLighter.js");
-            return new ExternalLighter(container, engine);
+            return new ExternalLighter(e.pluginManager, container);
         });
-        e.addInteractor?.("particlesLight", async (container) => {
+        e.pluginManager.addInteractor?.("particlesLight", async (container) => {
             const { ParticlesLighter } = await import("./ParticlesLighter.js");
-            return new ParticlesLighter(container, engine);
+            return new ParticlesLighter(e.pluginManager, container);
         });
     });
 }