@tsparticles/updater-orbit 4.0.0-beta.0 → 4.0.0-beta.10

package/183.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_updater_orbit=this.webpackChunk_tsparticles_updater_orbit||[]).push([[183],{183(t,i,a){a.d(i,{OrbitUpdater:()=>b});var o,e,r=a(303);class n extends r.ValueWithRandom{constructor(){super(),this.value=45}load(t){(0,r.isNull)(t)||super.load(t)}}class s{animation;color;enable;opacity;radius;rotation;width;constructor(){this.animation=new r.AnimationOptions,this.enable=!1,this.opacity=1,this.rotation=new n,this.width=1}load(t){(0,r.isNull)(t)||(this.animation.load(t.animation),this.rotation.load(t.rotation),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.opacity&&(this.opacity=(0,r.setRangeValue)(t.opacity)),void 0!==t.width&&(this.width=(0,r.setRangeValue)(t.width)),void 0!==t.radius&&(this.radius=(0,r.setRangeValue)(t.radius)),void 0!==t.color&&(this.color=r.OptionsColor.create(this.color,t.color)))}}(o=e||(e={})).front="front",o.back="back";let l=Math.PI*r.half,d=Math.PI+l;class b{_container;_pluginManager;constructor(t,i){this._pluginManager=t,this._container=i}afterDraw(t){let i=t.options.orbit;i?.enable&&this.drawOrbit(t,e.front)}beforeDraw(t){let i=t.options.orbit;i?.enable&&this.drawOrbit(t,e.back)}drawOrbit(t,i){let a,o,n=this._container;switch(i){case e.back:a=l,o=d;break;case e.front:a=d,o=l;break;default:a=0,o=r.doublePI}n.canvas.render.draw(i=>{!function(t,i,a,o,e,n,s,l,d,b){if(s<=0)return;let u=a.getPosition();o&&(i.strokeStyle=(0,r.getStyleFromHsl)(o,t.hdr,n)),i.lineWidth=s;let c=(0,r.degToRad)(l);i.beginPath(),i.ellipse(u.x,u.y,e*r.half,e*r.double,c,d,b),i.stroke()}(n,i,t,t.orbitColor??t.getFillColor(),t.retina.orbitRadius??n.retina.orbitRadius??t.getRadius(),t.orbitOpacity??r.defaultOpacity,t.orbitWidth??1,(t.orbitRotation??0)*n.retina.pixelRatio,a,o)})}init(t){let i=this._container,a=t.options.orbit;a?.enable&&(t.orbitRotation=(0,r.getRangeValue)(a.rotation.value),t.orbitColor=(0,r.rangeColorToHsl)(this._pluginManager,a.color),t.retina.orbitRadius=void 0!==a.radius?(0,r.getRangeValue)(a.radius)*i.retina.pixelRatio:void 0,i.retina.orbitRadius=t.retina.orbitRadius,t.orbitAnimationSpeed=a.animation.enable?(0,r.getRangeValue)(a.animation.speed):0,t.orbitWidth=(0,r.getRangeValue)(a.width),t.orbitOpacity=(0,r.getRangeValue)(a.opacity))}isEnabled(t){let i=t.options.orbit?.animation;return!t.destroyed&&!t.spawning&&!!i?.enable}loadOptions(t,...i){for(let a of(t.orbit??=new s,i))t.orbit.load(a?.orbit)}update(t,i){this.isEnabled(t)&&(t.orbitRotation??=0,t.orbitRotation+=(t.orbitAnimationSpeed??0/r.doublePI)*i.factor)}}}}]);

package/README.md

@@ -8,6 +8,12 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) updater plugin for orbit animations.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -72,3 +78,26 @@ import { loadOrbitUpdater } from "@tsparticles/updater-orbit";
   await loadOrbitUpdater(tsParticles);
 })();
 ```
+
+## Option mapping
+
+- Primary options key: `particles.orbit`
+
+```json
+{
+  "particles": {
+    "orbit": {}
+  }
+}
+```
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadOrbitUpdater(...)`
+- 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/OrbitUpdater.js

@@ -5,9 +5,9 @@ import { drawEllipse } from "./Utils.js";
 const defaultOrbitSpeed = 0, halfPI = Math.PI * half, piAndAHalf = Math.PI + halfPI, startAngle = 0, defaultWidth = 1, defaultRotation = 0;
 export class OrbitUpdater {
     _container;
-    _engine;
-    constructor(engine, container) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
     }
     afterDraw(particle) {
@@ -38,8 +38,8 @@ export class OrbitUpdater {
                 start = startAngle;
                 end = doublePI;
         }
-        container.canvas.draw(ctx => {
-            drawEllipse(ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);
+        container.canvas.render.draw(ctx => {
+            drawEllipse(container, ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);
         });
     }
     init(particle) {
@@ -48,7 +48,7 @@ export class OrbitUpdater {
             return;
         }
         particle.orbitRotation = getRangeValue(orbitOptions.rotation.value);
-        particle.orbitColor = rangeColorToHsl(this._engine, orbitOptions.color);
+        particle.orbitColor = rangeColorToHsl(this._pluginManager, orbitOptions.color);
         particle.retina.orbitRadius =
             orbitOptions.radius !== undefined ? getRangeValue(orbitOptions.radius) * container.retina.pixelRatio : undefined;
         container.retina.orbitRadius = particle.retina.orbitRadius;

package/browser/Utils.js

@@ -1,10 +1,10 @@
-import { degToRad, double, getStyleFromHsl, half } from "@tsparticles/engine";
+import { degToRad, double, getStyleFromHsl, half, } from "@tsparticles/engine";
 const minWidth = 0;
-export function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
+export function drawEllipse(container, context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
     if (width <= minWidth) {
         return;
     }
-    const pos = particle.getPosition(), { container } = particle;
+    const pos = particle.getPosition();
     if (fillColorValue) {
         context.strokeStyle = getStyleFromHsl(fillColorValue, container.hdr, opacity);
     }

package/browser/index.js

@@ -1,9 +1,9 @@
 export async function loadOrbitUpdater(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(e => {
-        e.addParticleUpdater("orbit", async (container) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addParticleUpdater("orbit", async (container) => {
             const { OrbitUpdater } = await import("./OrbitUpdater.js");
-            return new OrbitUpdater(e, container);
+            return new OrbitUpdater(e.pluginManager, container);
         });
     });
 }

package/cjs/OrbitUpdater.js

@@ -5,9 +5,9 @@ import { drawEllipse } from "./Utils.js";
 const defaultOrbitSpeed = 0, halfPI = Math.PI * half, piAndAHalf = Math.PI + halfPI, startAngle = 0, defaultWidth = 1, defaultRotation = 0;
 export class OrbitUpdater {
     _container;
-    _engine;
-    constructor(engine, container) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
     }
     afterDraw(particle) {
@@ -38,8 +38,8 @@ export class OrbitUpdater {
                 start = startAngle;
                 end = doublePI;
         }
-        container.canvas.draw(ctx => {
-            drawEllipse(ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);
+        container.canvas.render.draw(ctx => {
+            drawEllipse(container, ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);
         });
     }
     init(particle) {
@@ -48,7 +48,7 @@ export class OrbitUpdater {
             return;
         }
         particle.orbitRotation = getRangeValue(orbitOptions.rotation.value);
-        particle.orbitColor = rangeColorToHsl(this._engine, orbitOptions.color);
+        particle.orbitColor = rangeColorToHsl(this._pluginManager, orbitOptions.color);
         particle.retina.orbitRadius =
             orbitOptions.radius !== undefined ? getRangeValue(orbitOptions.radius) * container.retina.pixelRatio : undefined;
         container.retina.orbitRadius = particle.retina.orbitRadius;

package/cjs/Utils.js

@@ -1,10 +1,10 @@
-import { degToRad, double, getStyleFromHsl, half } from "@tsparticles/engine";
+import { degToRad, double, getStyleFromHsl, half, } from "@tsparticles/engine";
 const minWidth = 0;
-export function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
+export function drawEllipse(container, context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
     if (width <= minWidth) {
         return;
     }
-    const pos = particle.getPosition(), { container } = particle;
+    const pos = particle.getPosition();
     if (fillColorValue) {
         context.strokeStyle = getStyleFromHsl(fillColorValue, container.hdr, opacity);
     }

package/cjs/index.js

@@ -1,9 +1,9 @@
 export async function loadOrbitUpdater(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(e => {
-        e.addParticleUpdater("orbit", async (container) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addParticleUpdater("orbit", async (container) => {
             const { OrbitUpdater } = await import("./OrbitUpdater.js");
-            return new OrbitUpdater(e, container);
+            return new OrbitUpdater(e.pluginManager, container);
         });
     });
 }

package/dist_browser_OrbitUpdater_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";
 /*
@@ -53,7 +53,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 */   OrbitUpdater: () => (/* binding */ OrbitUpdater)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Orbit_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Orbit.js */ \"./dist/browser/Options/Classes/Orbit.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst defaultOrbitSpeed = 0, halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, piAndAHalf = Math.PI + halfPI, startAngle = 0, defaultWidth = 1, defaultRotation = 0;\nclass OrbitUpdater {\n    _container;\n    _engine;\n    constructor(engine, container){\n        this._engine = engine;\n        this._container = container;\n    }\n    afterDraw(particle) {\n        const orbitOptions = particle.options.orbit;\n        if (orbitOptions?.enable) {\n            this.drawOrbit(particle, _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.front);\n        }\n    }\n    beforeDraw(particle) {\n        const orbitOptions = particle.options.orbit;\n        if (orbitOptions?.enable) {\n            this.drawOrbit(particle, _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.back);\n        }\n    }\n    drawOrbit(particle, type) {\n        const container = this._container;\n        let start, end;\n        switch(type){\n            case _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.back:\n                start = halfPI;\n                end = piAndAHalf;\n                break;\n            case _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.front:\n                start = piAndAHalf;\n                end = halfPI;\n                break;\n            default:\n                start = startAngle;\n                end = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI;\n        }\n        container.canvas.draw((ctx)=>{\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_3__.drawEllipse)(ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);\n        });\n    }\n    init(particle) {\n        const container = this._container, particlesOptions = particle.options, orbitOptions = particlesOptions.orbit;\n        if (!orbitOptions?.enable) {\n            return;\n        }\n        particle.orbitRotation = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.rotation.value);\n        particle.orbitColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._engine, orbitOptions.color);\n        particle.retina.orbitRadius = orbitOptions.radius !== undefined ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.radius) * container.retina.pixelRatio : undefined;\n        container.retina.orbitRadius = particle.retina.orbitRadius;\n        particle.orbitAnimationSpeed = orbitOptions.animation.enable ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.animation.speed) : defaultOrbitSpeed;\n        particle.orbitWidth = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.width);\n        particle.orbitOpacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.opacity);\n    }\n    isEnabled(particle) {\n        const orbitAnimations = particle.options.orbit?.animation;\n        return !particle.destroyed && !particle.spawning && !!orbitAnimations?.enable;\n    }\n    loadOptions(options, ...sources) {\n        options.orbit ??= new _Options_Classes_Orbit_js__WEBPACK_IMPORTED_MODULE_1__.Orbit();\n        for (const source of sources){\n            options.orbit.load(source?.orbit);\n        }\n    }\n    update(particle, delta) {\n        if (!this.isEnabled(particle)) {\n            return;\n        }\n        particle.orbitRotation ??= defaultRotation;\n        particle.orbitRotation += (particle.orbitAnimationSpeed ?? defaultOrbitSpeed / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI) * delta.factor;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-orbit/./dist/browser/OrbitUpdater.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   OrbitUpdater: () => (/* binding */ OrbitUpdater)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _Options_Classes_Orbit_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Options/Classes/Orbit.js */ \"./dist/browser/Options/Classes/Orbit.js\");\n/* harmony import */ var _Enums_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./Enums.js */ \"./dist/browser/Enums.js\");\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\n\n\n\nconst defaultOrbitSpeed = 0, halfPI = Math.PI * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, piAndAHalf = Math.PI + halfPI, startAngle = 0, defaultWidth = 1, defaultRotation = 0;\nclass OrbitUpdater {\n    _container;\n    _pluginManager;\n    constructor(pluginManager, container){\n        this._pluginManager = pluginManager;\n        this._container = container;\n    }\n    afterDraw(particle) {\n        const orbitOptions = particle.options.orbit;\n        if (orbitOptions?.enable) {\n            this.drawOrbit(particle, _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.front);\n        }\n    }\n    beforeDraw(particle) {\n        const orbitOptions = particle.options.orbit;\n        if (orbitOptions?.enable) {\n            this.drawOrbit(particle, _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.back);\n        }\n    }\n    drawOrbit(particle, type) {\n        const container = this._container;\n        let start, end;\n        switch(type){\n            case _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.back:\n                start = halfPI;\n                end = piAndAHalf;\n                break;\n            case _Enums_js__WEBPACK_IMPORTED_MODULE_2__.OrbitType.front:\n                start = piAndAHalf;\n                end = halfPI;\n                break;\n            default:\n                start = startAngle;\n                end = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI;\n        }\n        container.canvas.render.draw((ctx)=>{\n            (0,_Utils_js__WEBPACK_IMPORTED_MODULE_3__.drawEllipse)(container, ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);\n        });\n    }\n    init(particle) {\n        const container = this._container, particlesOptions = particle.options, orbitOptions = particlesOptions.orbit;\n        if (!orbitOptions?.enable) {\n            return;\n        }\n        particle.orbitRotation = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.rotation.value);\n        particle.orbitColor = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToHsl)(this._pluginManager, orbitOptions.color);\n        particle.retina.orbitRadius = orbitOptions.radius !== undefined ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.radius) * container.retina.pixelRatio : undefined;\n        container.retina.orbitRadius = particle.retina.orbitRadius;\n        particle.orbitAnimationSpeed = orbitOptions.animation.enable ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.animation.speed) : defaultOrbitSpeed;\n        particle.orbitWidth = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.width);\n        particle.orbitOpacity = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRangeValue)(orbitOptions.opacity);\n    }\n    isEnabled(particle) {\n        const orbitAnimations = particle.options.orbit?.animation;\n        return !particle.destroyed && !particle.spawning && !!orbitAnimations?.enable;\n    }\n    loadOptions(options, ...sources) {\n        options.orbit ??= new _Options_Classes_Orbit_js__WEBPACK_IMPORTED_MODULE_1__.Orbit();\n        for (const source of sources){\n            options.orbit.load(source?.orbit);\n        }\n    }\n    update(particle, delta) {\n        if (!this.isEnabled(particle)) {\n            return;\n        }\n        particle.orbitRotation ??= defaultRotation;\n        particle.orbitRotation += (particle.orbitAnimationSpeed ?? defaultOrbitSpeed / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI) * delta.factor;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-orbit/./dist/browser/OrbitUpdater.js?\n}");
 
 /***/ },
 
@@ -63,7 +63,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 */   drawEllipse: () => (/* binding */ drawEllipse)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minWidth = 0;\nfunction drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {\n    if (width <= minWidth) {\n        return;\n    }\n    const pos = particle.getPosition(), { container } = particle;\n    if (fillColorValue) {\n        context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(fillColorValue, container.hdr, opacity);\n    }\n    context.lineWidth = width;\n    const rotationRadian = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(rotation);\n    context.beginPath();\n    context.ellipse(pos.x, pos.y, radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, rotationRadian, start, end);\n    context.stroke();\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-orbit/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   drawEllipse: () => (/* binding */ drawEllipse)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minWidth = 0;\nfunction drawEllipse(container, context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {\n    if (width <= minWidth) {\n        return;\n    }\n    const pos = particle.getPosition();\n    if (fillColorValue) {\n        context.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromHsl)(fillColorValue, container.hdr, opacity);\n    }\n    context.lineWidth = width;\n    const rotationRadian = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.degToRad)(rotation);\n    context.beginPath();\n    context.ellipse(pos.x, pos.y, radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, radius * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double, rotationRadian, start, end);\n    context.stroke();\n}\n\n\n//# sourceURL=webpack://@tsparticles/updater-orbit/./dist/browser/Utils.js?\n}");
 
 /***/ }
 

package/esm/OrbitUpdater.js

@@ -5,9 +5,9 @@ import { drawEllipse } from "./Utils.js";
 const defaultOrbitSpeed = 0, halfPI = Math.PI * half, piAndAHalf = Math.PI + halfPI, startAngle = 0, defaultWidth = 1, defaultRotation = 0;
 export class OrbitUpdater {
     _container;
-    _engine;
-    constructor(engine, container) {
-        this._engine = engine;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
     }
     afterDraw(particle) {
@@ -38,8 +38,8 @@ export class OrbitUpdater {
                 start = startAngle;
                 end = doublePI;
         }
-        container.canvas.draw(ctx => {
-            drawEllipse(ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);
+        container.canvas.render.draw(ctx => {
+            drawEllipse(container, ctx, particle, particle.orbitColor ?? particle.getFillColor(), particle.retina.orbitRadius ?? container.retina.orbitRadius ?? particle.getRadius(), particle.orbitOpacity ?? defaultOpacity, particle.orbitWidth ?? defaultWidth, (particle.orbitRotation ?? defaultRotation) * container.retina.pixelRatio, start, end);
         });
     }
     init(particle) {
@@ -48,7 +48,7 @@ export class OrbitUpdater {
             return;
         }
         particle.orbitRotation = getRangeValue(orbitOptions.rotation.value);
-        particle.orbitColor = rangeColorToHsl(this._engine, orbitOptions.color);
+        particle.orbitColor = rangeColorToHsl(this._pluginManager, orbitOptions.color);
         particle.retina.orbitRadius =
             orbitOptions.radius !== undefined ? getRangeValue(orbitOptions.radius) * container.retina.pixelRatio : undefined;
         container.retina.orbitRadius = particle.retina.orbitRadius;

package/esm/Utils.js

@@ -1,10 +1,10 @@
-import { degToRad, double, getStyleFromHsl, half } from "@tsparticles/engine";
+import { degToRad, double, getStyleFromHsl, half, } from "@tsparticles/engine";
 const minWidth = 0;
-export function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
+export function drawEllipse(container, context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
     if (width <= minWidth) {
         return;
     }
-    const pos = particle.getPosition(), { container } = particle;
+    const pos = particle.getPosition();
     if (fillColorValue) {
         context.strokeStyle = getStyleFromHsl(fillColorValue, container.hdr, opacity);
     }

package/esm/index.js

@@ -1,9 +1,9 @@
 export async function loadOrbitUpdater(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    await engine.register(e => {
-        e.addParticleUpdater("orbit", async (container) => {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(e => {
+        e.pluginManager.addParticleUpdater("orbit", async (container) => {
             const { OrbitUpdater } = await import("./OrbitUpdater.js");
-            return new OrbitUpdater(e, container);
+            return new OrbitUpdater(e.pluginManager, container);
         });
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/updater-orbit",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles particles orbit updater",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -95,13 +95,12 @@
       "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"
+  "peerDependencies": {
+    "@tsparticles/engine": "4.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"