@tsparticles/updater-gradient 3.9.1 → 4.0.0-alpha.0

package/285.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 285.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_updater_gradient=this.webpackChunk_tsparticles_updater_gradient||[]).push([[285],{285(e,a,t){t.d(a,{GradientUpdater:()=>u});var i=t(303);class n{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1,this.startValue=i.StartValueType.random}load(e){(0,i.isNull)(e)||(void 0!==e.count&&(this.count=(0,i.setRangeValue)(e.count)),void 0!==e.enable&&(this.enable=e.enable),void 0!==e.speed&&(this.speed=(0,i.setRangeValue)(e.speed)),void 0!==e.sync&&(this.sync=e.sync),void 0!==e.startValue&&(this.startValue=e.startValue),void 0!==e.decay&&(this.decay=(0,i.setRangeValue)(e.decay)),void 0!==e.delay&&(this.delay=(0,i.setRangeValue)(e.delay)))}}class o{constructor(){this.value=0,this.animation=new n}load(e){(0,i.isNull)(e)||(this.animation.load(e.animation),void 0!==e.value&&(this.value=(0,i.setRangeValue)(e.value)))}}class s{constructor(){this.stop=0,this.value=new i.AnimatableColor}load(e){(0,i.isNull)(e)||(void 0!==e.stop&&(this.stop=e.stop),this.value=i.AnimatableColor.create(this.value,e.value),void 0!==e.opacity&&(this.opacity=new o,(0,i.isNumber)(e.opacity)?this.opacity.value=e.opacity:this.opacity.load(e.opacity)))}}class l{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1}load(e){(0,i.isNull)(e)||(void 0!==e.count&&(this.count=(0,i.setRangeValue)(e.count)),void 0!==e.enable&&(this.enable=e.enable),void 0!==e.speed&&(this.speed=(0,i.setRangeValue)(e.speed)),void 0!==e.decay&&(this.decay=(0,i.setRangeValue)(e.decay)),void 0!==e.delay&&(this.delay=(0,i.setRangeValue)(e.delay)),void 0!==e.sync&&(this.sync=e.sync))}}class c{constructor(){this.value=0,this.animation=new l,this.direction=i.RotateDirection.clockwise}load(e){(0,i.isNull)(e)||(this.animation.load(e.animation),void 0!==e.value&&(this.value=(0,i.setRangeValue)(e.value)),void 0!==e.direction&&(this.direction=e.direction))}}class r{constructor(){this.angle=new c,this.colors=[],this.type=i.GradientType.random}load(e){(0,i.isNull)(e)||(this.angle.load(e.angle),void 0!==e.colors&&(this.colors=e.colors.map((e=>{const a=new s;return a.load(e),a}))),void 0!==e.type&&(this.type=e.type))}}class u{constructor(e){this._engine=e}getColorStyles(e,a,t,n){const o=e.gradient;if(!o)return{};const{container:s}=e,l=o.angle.value,c=0,r=0,u=o.type===i.GradientType.radial?a.createRadialGradient(c,r,0,c,r,t):a.createLinearGradient(Math.cos(l)*-t,Math.sin(l)*-t,Math.cos(l)*t,Math.sin(l)*t);for(const{stop:e,value:a,opacity:t}of o.colors){const o={h:a.h.value,s:a.s.value,l:a.l.value};u.addColorStop(e,(0,i.getStyleFromHsl)(o,s.hdr,t?.value??n))}return{fill:u}}init(e){const a=(0,i.itemFromSingleOrMultiple)(e.options.gradient);if(!a)return;const{angle:t}=a;e.gradient={angle:{value:(0,i.getRangeValue)(t.value),enable:t.animation.enable,velocity:(0,i.getRangeValue)(t.animation.speed)/360*e.container.retina.reduceFactor,decay:1-(0,i.getRangeValue)(t.animation.decay),delayTime:(0,i.getRangeValue)(t.animation.delay)*i.millisecondsToSeconds,max:i.doublePI,min:0,time:0},type:a.type,colors:[]};let n=a.angle.direction;switch(n===i.RotateDirection.random&&(n=(0,i.getRandom)()>i.half?i.RotateDirection.counterClockwise:i.RotateDirection.clockwise),n){case i.RotateDirection.counterClockwise:case"counterClockwise":e.gradient.angle.status=i.AnimationStatus.decreasing;break;case i.RotateDirection.clockwise:e.gradient.angle.status=i.AnimationStatus.increasing}const o=e.options.reduceDuplicates;for(const t of a.colors){const a=(0,i.rangeColorToHsl)(this._engine,t.value,e.id,o);if(!a)continue;const n=(0,i.getHslAnimationFromHsl)(a,t.value.animation,e.container.retina.reduceFactor),s={stop:t.stop,value:n,opacity:t.opacity?{enable:t.opacity.animation.enable,max:(0,i.getRangeMax)(t.opacity.value),min:(0,i.getRangeMin)(t.opacity.value),status:i.AnimationStatus.increasing,value:(0,i.getRangeValue)(t.opacity.value),velocity:(0,i.getRangeValue)(t.opacity.animation.speed)/i.percentDenominator*e.container.retina.reduceFactor,decay:1-(0,i.getRangeValue)(t.opacity.animation.decay),delayTime:(0,i.getRangeValue)(t.opacity.animation.delay)*i.millisecondsToSeconds,time:0}:void 0},{opacity:l}=s;if(t.opacity&&l){const e=t.opacity.value;l.min=(0,i.getRangeMin)(e),l.max=(0,i.getRangeMax)(e);switch(t.opacity.animation.startValue){case i.StartValueType.min:l.value=l.min,l.status=i.AnimationStatus.increasing;break;case i.StartValueType.max:l.value=l.max,l.status=i.AnimationStatus.decreasing;break;case i.StartValueType.random:default:l.value=(0,i.randomInRangeValue)(l),l.status=(0,i.getRandom)()>=i.half?i.AnimationStatus.increasing:i.AnimationStatus.decreasing}}e.gradient.colors.push(s)}}isEnabled(e){return!e.destroyed&&!e.spawning&&(!!e.gradient?.angle.enable||(e.gradient?.colors.some((e=>e.value.h.enable||e.value.s.enable||e.value.l.enable))??!1))}loadOptions(e,...a){for(const t of a){if(!t?.gradient)continue;const a=t.gradient;e.gradient=(0,i.executeOnSingleOrMultiple)(a,(e=>{const a=new r;return a.load(e),a}))}}update(e,a){!function(e,a){const{gradient:t}=e;if(t){(0,i.updateAnimation)(e,t.angle,!1,i.DestroyType.none,a);for(const n of t.colors)(0,i.updateColor)(n.value,a),n.opacity&&(0,i.updateAnimation)(e,n.opacity,!0,i.DestroyType.none,a)}}(e,a)}}}}]);

package/285.min.js.LICENSE.txt

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

package/browser/GradientUpdater.js

@@ -1,7 +1,6 @@
-import { AnimationStatus, GradientType, RotateDirection, StartValueType, executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, half, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
+import { AnimationStatus, GradientType, RotateDirection, StartValueType, doublePI, executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, half, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRangeValue, rangeColorToHsl, } from "@tsparticles/engine";
 import { AnimatableGradient } from "./Options/Classes/AnimatableGradient.js";
 import { updateGradient } from "./Utils.js";
-const double = 2, doublePI = Math.PI * double;
 export class GradientUpdater {
     constructor(engine) {
         this._engine = engine;
@@ -11,15 +10,16 @@ export class GradientUpdater {
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === GradientType.radial
+        const { container } = particle, gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === GradientType.radial
             ? context.createRadialGradient(origin.x, origin.y, minRadius, origin.x, origin.y, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
         for (const { stop, value, opacity: cOpacity } of gradient.colors) {
-            fillGradient.addColorStop(stop, getStyleFromHsl({
+            const hsl = {
                 h: value.h.value,
                 s: value.s.value,
                 l: value.l.value,
-            }, cOpacity?.value ?? opacity));
+            };
+            fillGradient.addColorStop(stop, getStyleFromHsl(hsl, container.hdr, cOpacity?.value ?? opacity));
         }
         return { fill: fillGradient };
     }
@@ -97,7 +97,7 @@ export class GradientUpdater {
                         break;
                     case StartValueType.random:
                     default:
-                        addOpacity.value = randomInRange(addOpacity);
+                        addOpacity.value = randomInRangeValue(addOpacity);
                         addOpacity.status =
                             getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                         break;
@@ -119,9 +119,6 @@ export class GradientUpdater {
                 continue;
             }
             const gradientToLoad = source.gradient;
-            if (!gradientToLoad) {
-                continue;
-            }
             options.gradient = executeOnSingleOrMultiple(gradientToLoad, gradient => {
                 const tmp = new AnimatableGradient();
                 tmp.load(gradient);

package/browser/index.js

@@ -1,7 +1,9 @@
-import { GradientUpdater } from "./GradientUpdater.js";
-export async function loadGradientUpdater(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addParticleUpdater("gradient", () => {
-        return Promise.resolve(new GradientUpdater(engine));
-    }, refresh);
+export function loadGradientUpdater(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(e => {
+        e.addParticleUpdater("gradient", async () => {
+            const { GradientUpdater } = await import("./GradientUpdater.js");
+            return new GradientUpdater(e);
+        });
+    });
 }

package/cjs/GradientUpdater.js

@@ -1,11 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GradientUpdater = void 0;
-const engine_1 = require("@tsparticles/engine");
-const AnimatableGradient_js_1 = require("./Options/Classes/AnimatableGradient.js");
-const Utils_js_1 = require("./Utils.js");
-const double = 2, doublePI = Math.PI * double;
-class GradientUpdater {
+import { AnimationStatus, GradientType, RotateDirection, StartValueType, doublePI, executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, half, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRangeValue, rangeColorToHsl, } from "@tsparticles/engine";
+import { AnimatableGradient } from "./Options/Classes/AnimatableGradient.js";
+import { updateGradient } from "./Utils.js";
+export class GradientUpdater {
     constructor(engine) {
         this._engine = engine;
     }
@@ -14,31 +10,32 @@ class GradientUpdater {
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === engine_1.GradientType.radial
+        const { container } = particle, gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === GradientType.radial
             ? context.createRadialGradient(origin.x, origin.y, minRadius, origin.x, origin.y, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
         for (const { stop, value, opacity: cOpacity } of gradient.colors) {
-            fillGradient.addColorStop(stop, (0, engine_1.getStyleFromHsl)({
+            const hsl = {
                 h: value.h.value,
                 s: value.s.value,
                 l: value.l.value,
-            }, cOpacity?.value ?? opacity));
+            };
+            fillGradient.addColorStop(stop, getStyleFromHsl(hsl, container.hdr, cOpacity?.value ?? opacity));
         }
         return { fill: fillGradient };
     }
     init(particle) {
-        const gradient = (0, engine_1.itemFromSingleOrMultiple)(particle.options.gradient);
+        const gradient = itemFromSingleOrMultiple(particle.options.gradient);
         if (!gradient) {
             return;
         }
         const { angle } = gradient, speedFactor = 360, delayOffset = 1;
         particle.gradient = {
             angle: {
-                value: (0, engine_1.getRangeValue)(angle.value),
+                value: getRangeValue(angle.value),
                 enable: angle.animation.enable,
-                velocity: ((0, engine_1.getRangeValue)(angle.animation.speed) / speedFactor) * particle.container.retina.reduceFactor,
-                decay: delayOffset - (0, engine_1.getRangeValue)(angle.animation.decay),
-                delayTime: (0, engine_1.getRangeValue)(angle.animation.delay) * engine_1.millisecondsToSeconds,
+                velocity: (getRangeValue(angle.animation.speed) / speedFactor) * particle.container.retina.reduceFactor,
+                decay: delayOffset - getRangeValue(angle.animation.decay),
+                delayTime: getRangeValue(angle.animation.delay) * millisecondsToSeconds,
                 max: doublePI,
                 min: 0,
                 time: 0,
@@ -47,38 +44,38 @@ class GradientUpdater {
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
-        if (rotateDirection === engine_1.RotateDirection.random) {
-            rotateDirection = (0, engine_1.getRandom)() > engine_1.half ? engine_1.RotateDirection.counterClockwise : engine_1.RotateDirection.clockwise;
+        if (rotateDirection === RotateDirection.random) {
+            rotateDirection = getRandom() > half ? RotateDirection.counterClockwise : RotateDirection.clockwise;
         }
         switch (rotateDirection) {
-            case engine_1.RotateDirection.counterClockwise:
+            case RotateDirection.counterClockwise:
             case "counterClockwise":
-                particle.gradient.angle.status = engine_1.AnimationStatus.decreasing;
+                particle.gradient.angle.status = AnimationStatus.decreasing;
                 break;
-            case engine_1.RotateDirection.clockwise:
-                particle.gradient.angle.status = engine_1.AnimationStatus.increasing;
+            case RotateDirection.clockwise:
+                particle.gradient.angle.status = AnimationStatus.increasing;
                 break;
         }
         const reduceDuplicates = particle.options.reduceDuplicates;
         for (const grColor of gradient.colors) {
-            const grHslColor = (0, engine_1.rangeColorToHsl)(this._engine, grColor.value, particle.id, reduceDuplicates);
+            const grHslColor = rangeColorToHsl(this._engine, grColor.value, particle.id, reduceDuplicates);
             if (!grHslColor) {
                 continue;
             }
-            const grHslAnimation = (0, engine_1.getHslAnimationFromHsl)(grHslColor, grColor.value.animation, particle.container.retina.reduceFactor), addColor = {
+            const grHslAnimation = getHslAnimationFromHsl(grHslColor, grColor.value.animation, particle.container.retina.reduceFactor), addColor = {
                 stop: grColor.stop,
                 value: grHslAnimation,
                 opacity: grColor.opacity
                     ? {
                         enable: grColor.opacity.animation.enable,
-                        max: (0, engine_1.getRangeMax)(grColor.opacity.value),
-                        min: (0, engine_1.getRangeMin)(grColor.opacity.value),
-                        status: engine_1.AnimationStatus.increasing,
-                        value: (0, engine_1.getRangeValue)(grColor.opacity.value),
-                        velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / engine_1.percentDenominator) *
+                        max: getRangeMax(grColor.opacity.value),
+                        min: getRangeMin(grColor.opacity.value),
+                        status: AnimationStatus.increasing,
+                        value: getRangeValue(grColor.opacity.value),
+                        velocity: (getRangeValue(grColor.opacity.animation.speed) / percentDenominator) *
                             particle.container.retina.reduceFactor,
-                        decay: delayOffset - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
-                        delayTime: (0, engine_1.getRangeValue)(grColor.opacity.animation.delay) * engine_1.millisecondsToSeconds,
+                        decay: delayOffset - getRangeValue(grColor.opacity.animation.decay),
+                        delayTime: getRangeValue(grColor.opacity.animation.delay) * millisecondsToSeconds,
                         time: 0,
                     }
                     : undefined,
@@ -86,23 +83,23 @@ class GradientUpdater {
             const { opacity: addOpacity } = addColor;
             if (grColor.opacity && addOpacity) {
                 const opacityRange = grColor.opacity.value;
-                addOpacity.min = (0, engine_1.getRangeMin)(opacityRange);
-                addOpacity.max = (0, engine_1.getRangeMax)(opacityRange);
+                addOpacity.min = getRangeMin(opacityRange);
+                addOpacity.max = getRangeMax(opacityRange);
                 const opacityAnimation = grColor.opacity.animation;
                 switch (opacityAnimation.startValue) {
-                    case engine_1.StartValueType.min:
+                    case StartValueType.min:
                         addOpacity.value = addOpacity.min;
-                        addOpacity.status = engine_1.AnimationStatus.increasing;
+                        addOpacity.status = AnimationStatus.increasing;
                         break;
-                    case engine_1.StartValueType.max:
+                    case StartValueType.max:
                         addOpacity.value = addOpacity.max;
-                        addOpacity.status = engine_1.AnimationStatus.decreasing;
+                        addOpacity.status = AnimationStatus.decreasing;
                         break;
-                    case engine_1.StartValueType.random:
+                    case StartValueType.random:
                     default:
-                        addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
+                        addOpacity.value = randomInRangeValue(addOpacity);
                         addOpacity.status =
-                            (0, engine_1.getRandom)() >= engine_1.half ? engine_1.AnimationStatus.increasing : engine_1.AnimationStatus.decreasing;
+                            getRandom() >= half ? AnimationStatus.increasing : AnimationStatus.decreasing;
                         break;
                 }
             }
@@ -122,18 +119,14 @@ class GradientUpdater {
                 continue;
             }
             const gradientToLoad = source.gradient;
-            if (!gradientToLoad) {
-                continue;
-            }
-            options.gradient = (0, engine_1.executeOnSingleOrMultiple)(gradientToLoad, gradient => {
-                const tmp = new AnimatableGradient_js_1.AnimatableGradient();
+            options.gradient = executeOnSingleOrMultiple(gradientToLoad, gradient => {
+                const tmp = new AnimatableGradient();
                 tmp.load(gradient);
                 return tmp;
             });
         }
     }
     update(particle, delta) {
-        (0, Utils_js_1.updateGradient)(particle, delta);
+        updateGradient(particle, delta);
     }
 }
-exports.GradientUpdater = GradientUpdater;

package/cjs/Options/Classes/AnimatableGradient.js

@@ -1,23 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimatableGradient = void 0;
-const engine_1 = require("@tsparticles/engine");
-const AnimatableGradientColor_js_1 = require("./AnimatableGradientColor.js");
-const GradientAngle_js_1 = require("./GradientAngle.js");
-class AnimatableGradient {
+import { GradientType, isNull } from "@tsparticles/engine";
+import { AnimatableGradientColor } from "./AnimatableGradientColor.js";
+import { GradientAngle } from "./GradientAngle.js";
+export class AnimatableGradient {
     constructor() {
-        this.angle = new GradientAngle_js_1.GradientAngle();
+        this.angle = new GradientAngle();
         this.colors = [];
-        this.type = engine_1.GradientType.random;
+        this.type = GradientType.random;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         this.angle.load(data.angle);
         if (data.colors !== undefined) {
             this.colors = data.colors.map(s => {
-                const tmp = new AnimatableGradientColor_js_1.AnimatableGradientColor();
+                const tmp = new AnimatableGradientColor();
                 tmp.load(s);
                 return tmp;
             });
@@ -27,4 +24,3 @@ class AnimatableGradient {
         }
     }
 }
-exports.AnimatableGradient = AnimatableGradient;

package/cjs/Options/Classes/AnimatableGradientColor.js

@@ -1,24 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimatableGradientColor = void 0;
-const engine_1 = require("@tsparticles/engine");
-const GradientColorOpacity_js_1 = require("./GradientColorOpacity.js");
-class AnimatableGradientColor {
+import { AnimatableColor, isNull, isNumber } from "@tsparticles/engine";
+import { GradientColorOpacity } from "./GradientColorOpacity.js";
+export class AnimatableGradientColor {
     constructor() {
         this.stop = 0;
-        this.value = new engine_1.AnimatableColor();
+        this.value = new AnimatableColor();
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.stop !== undefined) {
             this.stop = data.stop;
         }
-        this.value = engine_1.AnimatableColor.create(this.value, data.value);
+        this.value = AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
-            this.opacity = new GradientColorOpacity_js_1.GradientColorOpacity();
-            if ((0, engine_1.isNumber)(data.opacity)) {
+            this.opacity = new GradientColorOpacity();
+            if (isNumber(data.opacity)) {
                 this.opacity.value = data.opacity;
             }
             else {
@@ -27,4 +24,3 @@ class AnimatableGradientColor {
         }
     }
 }
-exports.AnimatableGradientColor = AnimatableGradientColor;

package/cjs/Options/Classes/GradientAngle.js

@@ -1,25 +1,21 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GradientAngle = void 0;
-const engine_1 = require("@tsparticles/engine");
-const GradientAngleAnimation_js_1 = require("./GradientAngleAnimation.js");
-class GradientAngle {
+import { RotateDirection, isNull, setRangeValue, } from "@tsparticles/engine";
+import { GradientAngleAnimation } from "./GradientAngleAnimation.js";
+export class GradientAngle {
     constructor() {
         this.value = 0;
-        this.animation = new GradientAngleAnimation_js_1.GradientAngleAnimation();
-        this.direction = engine_1.RotateDirection.clockwise;
+        this.animation = new GradientAngleAnimation();
+        this.direction = RotateDirection.clockwise;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         this.animation.load(data.animation);
         if (data.value !== undefined) {
-            this.value = (0, engine_1.setRangeValue)(data.value);
+            this.value = setRangeValue(data.value);
         }
         if (data.direction !== undefined) {
             this.direction = data.direction;
         }
     }
 }
-exports.GradientAngle = GradientAngle;

package/cjs/Options/Classes/GradientAngleAnimation.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GradientAngleAnimation = void 0;
-const engine_1 = require("@tsparticles/engine");
-class GradientAngleAnimation {
+import { isNull, setRangeValue, } from "@tsparticles/engine";
+export class GradientAngleAnimation {
     constructor() {
         this.count = 0;
         this.enable = false;
@@ -12,27 +9,26 @@ class GradientAngleAnimation {
         this.sync = false;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.count !== undefined) {
-            this.count = (0, engine_1.setRangeValue)(data.count);
+            this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-            this.speed = (0, engine_1.setRangeValue)(data.speed);
+            this.speed = setRangeValue(data.speed);
         }
         if (data.decay !== undefined) {
-            this.decay = (0, engine_1.setRangeValue)(data.decay);
+            this.decay = setRangeValue(data.decay);
         }
         if (data.delay !== undefined) {
-            this.delay = (0, engine_1.setRangeValue)(data.delay);
+            this.delay = setRangeValue(data.delay);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }
     }
 }
-exports.GradientAngleAnimation = GradientAngleAnimation;

package/cjs/Options/Classes/GradientColorOpacity.js

@@ -1,21 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GradientColorOpacity = void 0;
-const engine_1 = require("@tsparticles/engine");
-const GradientColorOpacityAnimation_js_1 = require("./GradientColorOpacityAnimation.js");
-class GradientColorOpacity {
+import { isNull, setRangeValue, } from "@tsparticles/engine";
+import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation.js";
+export class GradientColorOpacity {
     constructor() {
         this.value = 0;
-        this.animation = new GradientColorOpacityAnimation_js_1.GradientColorOpacityAnimation();
+        this.animation = new GradientColorOpacityAnimation();
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         this.animation.load(data.animation);
         if (data.value !== undefined) {
-            this.value = (0, engine_1.setRangeValue)(data.value);
+            this.value = setRangeValue(data.value);
         }
     }
 }
-exports.GradientColorOpacity = GradientColorOpacity;

package/cjs/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GradientColorOpacityAnimation = void 0;
-const engine_1 = require("@tsparticles/engine");
-class GradientColorOpacityAnimation {
+import { StartValueType, isNull, setRangeValue, } from "@tsparticles/engine";
+export class GradientColorOpacityAnimation {
     constructor() {
         this.count = 0;
         this.enable = false;
@@ -10,20 +7,20 @@ class GradientColorOpacityAnimation {
         this.decay = 0;
         this.delay = 0;
         this.sync = false;
-        this.startValue = engine_1.StartValueType.random;
+        this.startValue = StartValueType.random;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.count !== undefined) {
-            this.count = (0, engine_1.setRangeValue)(data.count);
+            this.count = setRangeValue(data.count);
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
         if (data.speed !== undefined) {
-            this.speed = (0, engine_1.setRangeValue)(data.speed);
+            this.speed = setRangeValue(data.speed);
         }
         if (data.sync !== undefined) {
             this.sync = data.sync;
@@ -32,11 +29,10 @@ class GradientColorOpacityAnimation {
             this.startValue = data.startValue;
         }
         if (data.decay !== undefined) {
-            this.decay = (0, engine_1.setRangeValue)(data.decay);
+            this.decay = setRangeValue(data.decay);
         }
         if (data.delay !== undefined) {
-            this.delay = (0, engine_1.setRangeValue)(data.delay);
+            this.delay = setRangeValue(data.delay);
         }
     }
 }
-exports.GradientColorOpacityAnimation = GradientColorOpacityAnimation;

package/cjs/Options/Interfaces/Gradients.js

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

package/cjs/Options/Interfaces/IAnimatableGradient.js

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

package/cjs/Options/Interfaces/IOptionsGradient.js

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

package/cjs/Types.js

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

package/cjs/Utils.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateGradient = updateGradient;
-const engine_1 = require("@tsparticles/engine");
-function updateGradient(particle, delta) {
+import { DestroyType, updateAnimation, updateColor } from "@tsparticles/engine";
+export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {
         return;
     }
-    (0, engine_1.updateAnimation)(particle, gradient.angle, false, engine_1.DestroyType.none, delta);
+    updateAnimation(particle, gradient.angle, false, DestroyType.none, delta);
     for (const color of gradient.colors) {
-        (0, engine_1.updateColor)(color.value, delta);
+        updateColor(color.value, delta);
         if (color.opacity) {
-            (0, engine_1.updateAnimation)(particle, color.opacity, true, engine_1.DestroyType.none, delta);
+            updateAnimation(particle, color.opacity, true, DestroyType.none, delta);
         }
     }
 }

package/cjs/index.js

@@ -1,10 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadGradientUpdater = loadGradientUpdater;
-const GradientUpdater_js_1 = require("./GradientUpdater.js");
-async function loadGradientUpdater(engine, refresh = true) {
-    engine.checkVersion("3.9.1");
-    await engine.addParticleUpdater("gradient", () => {
-        return Promise.resolve(new GradientUpdater_js_1.GradientUpdater(engine));
-    }, refresh);
+export function loadGradientUpdater(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(e => {
+        e.addParticleUpdater("gradient", async () => {
+            const { GradientUpdater } = await import("./GradientUpdater.js");
+            return new GradientUpdater(e);
+        });
+    });
 }