@tsparticles/interaction-light 4.0.0-beta.0 → 4.0.0-beta.10

package/481.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_light=this.webpackChunk_tsparticles_interaction_light||[]).push([[481],{481(t,e,i){i.d(e,{ParticlesLighter:()=>o});var a=i(702),r=i(303),n=i(206);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(){}}},206(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/621.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_interaction_light=this.webpackChunk_tsparticles_interaction_light||[]).push([[621],{621(t,e,a){a.d(e,{ExternalLighter:()=>l});var i=a(702),r=a(303),n=a(206),o=a(913);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(){}}},206(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

@@ -8,6 +8,12 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) interaction plugin for light effect.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call `loadInteractivityPlugin(tsParticles)` and `loadLightInteraction(tsParticles)` before `tsParticles.load(...)`
+3. Enable `"light"` in interactivity events and configure `interactivity.modes.light`
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -77,3 +83,57 @@ import { loadLightInteraction } from "@tsparticles/interaction-light";
   await loadLightInteraction(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- Event mode key: `interactivity.events.onHover.mode` or `interactivity.events.onClick.mode` with value `"light"`
+- Mode options key: `interactivity.modes.light`
+
+### `interactivity.modes.light` properties
+
+| Key                   | Type     | Default     | Notes                    |
+| --------------------- | -------- | ----------- | ------------------------ |
+| `area.radius`         | `number` | `1000`      | Light interaction radius |
+| `area.gradient.start` | `color`  |             | Gradient start color     |
+| `area.gradient.stop`  | `color`  |             | Gradient stop color      |
+| `shadow.color`        | `color`  | `"#000000"` | Shadow/tint color        |
+| `shadow.length`       | `number` | `2000`      | Shadow projection length |
+
+```json
+{
+  "interactivity": {
+    "events": {
+      "onHover": {
+        "enable": true,
+        "mode": "light"
+      }
+    },
+    "modes": {
+      "light": {
+        "area": {
+          "radius": 700,
+          "gradient": {
+            "start": "#ffffff",
+            "stop": "#000000"
+          }
+        },
+        "shadow": {
+          "color": "#000000",
+          "length": 1400
+        }
+      }
+    }
+  }
+}
+```
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before both `loadInteractivityPlugin(...)` and `loadLightInteraction(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/ExternalLighter.js

@@ -1,13 +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 {
     maxDistance = 0;
-    _engine;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     clear() {
     }
@@ -22,7 +22,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawLight(container, ctx, mousePos);
         });
     }
@@ -35,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/ParticlesLighter.js

@@ -1,12 +1,12 @@
-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 {
     maxDistance;
-    _engine;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this.maxDistance = 0;
     }
     clear() {
@@ -22,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);
         });
     }
@@ -34,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,

package/browser/index.js

@@ -1,15 +1,15 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalLight", async (container) => {
+        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,13 +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 {
     maxDistance = 0;
-    _engine;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     clear() {
     }
@@ -22,7 +22,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawLight(container, ctx, mousePos);
         });
     }
@@ -35,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/ParticlesLighter.js

@@ -1,12 +1,12 @@
-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 {
     maxDistance;
-    _engine;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this.maxDistance = 0;
     }
     clear() {
@@ -22,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);
         });
     }
@@ -34,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,

package/cjs/index.js

@@ -1,15 +1,15 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalLight", async (container) => {
+        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-beta.0
+ * v4.0.0-beta.10
  */
 "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    maxDistance = 0;\n    _engine;\n    constructor(container, engine){\n        super(container);\n        this._engine = engine;\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.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_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\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}");
 
 /***/ },
 

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-beta.0
+ * v4.0.0-beta.10
  */
 "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    maxDistance;\n    _engine;\n    constructor(container, engine){\n        super(container);\n        this._engine = engine;\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.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_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\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}");
 
 /***/ },
 

package/esm/ExternalLighter.js

@@ -1,13 +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 {
     maxDistance = 0;
-    _engine;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     clear() {
     }
@@ -22,7 +22,7 @@ export class ExternalLighter extends ExternalInteractorBase {
         if (!mousePos) {
             return;
         }
-        container.canvas.draw(ctx => {
+        container.canvas.render.draw(ctx => {
             drawLight(container, ctx, mousePos);
         });
     }
@@ -35,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/ParticlesLighter.js

@@ -1,12 +1,12 @@
-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 {
     maxDistance;
-    _engine;
-    constructor(container, engine) {
+    _pluginManager;
+    constructor(pluginManager, container) {
         super(container);
-        this._engine = engine;
+        this._pluginManager = pluginManager;
         this.maxDistance = 0;
     }
     clear() {
@@ -22,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);
         });
     }
@@ -34,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,

package/esm/index.js

@@ -1,15 +1,15 @@
 export async function loadLightInteraction(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(async (e) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
         const { ensureInteractivityPluginLoaded } = await import("@tsparticles/plugin-interactivity");
         ensureInteractivityPluginLoaded(e);
-        e.addInteractor?.("externalLight", async (container) => {
+        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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/interaction-light",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles Light interaction",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -95,14 +95,13 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/engine": "4.0.0-beta.0",
-    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
+  "peerDependencies": {
+    "@tsparticles/engine": "4.0.0-beta.10",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"