@tsparticles/updater-gradient 3.2.2 → 3.4.0

package/browser/GradientUpdater.js

@@ -1,5 +1,6 @@
-import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, halfRandom, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
+import { AnimationStatus, GradientType, RotateDirection, StartValueType, executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, halfRandom, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRange, 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 {
     getColorStyles(particle, context, radius, opacity) {
@@ -7,7 +8,7 @@ export class GradientUpdater {
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === "radial"
+        const 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) {
@@ -19,7 +20,7 @@ export class GradientUpdater {
         }
         return { fill: fillGradient };
     }
-    async init(particle) {
+    init(particle) {
         const gradient = itemFromSingleOrMultiple(particle.options.gradient);
         if (!gradient) {
             return;
@@ -40,16 +41,16 @@ export class GradientUpdater {
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
-        if (rotateDirection === "random") {
-            rotateDirection = getRandom() > halfRandom ? "counter-clockwise" : "clockwise";
+        if (rotateDirection === RotateDirection.random) {
+            rotateDirection = getRandom() > halfRandom ? RotateDirection.counterClockwise : RotateDirection.clockwise;
         }
         switch (rotateDirection) {
-            case "counter-clockwise":
+            case RotateDirection.counterClockwise:
             case "counterClockwise":
-                particle.gradient.angle.status = "decreasing";
+                particle.gradient.angle.status = AnimationStatus.decreasing;
                 break;
-            case "clockwise":
-                particle.gradient.angle.status = "increasing";
+            case RotateDirection.clockwise:
+                particle.gradient.angle.status = AnimationStatus.increasing;
                 break;
         }
         const reduceDuplicates = particle.options.reduceDuplicates;
@@ -66,7 +67,7 @@ export class GradientUpdater {
                         enable: grColor.opacity.animation.enable,
                         max: getRangeMax(grColor.opacity.value),
                         min: getRangeMin(grColor.opacity.value),
-                        status: "increasing",
+                        status: AnimationStatus.increasing,
                         value: getRangeValue(grColor.opacity.value),
                         velocity: (getRangeValue(grColor.opacity.animation.speed) / percentDenominator) *
                             particle.container.retina.reduceFactor,
@@ -83,31 +84,30 @@ export class GradientUpdater {
                 addOpacity.max = getRangeMax(opacityRange);
                 const opacityAnimation = grColor.opacity.animation;
                 switch (opacityAnimation.startValue) {
-                    case "min":
+                    case StartValueType.min:
                         addOpacity.value = addOpacity.min;
-                        addOpacity.status = "increasing";
+                        addOpacity.status = AnimationStatus.increasing;
                         break;
-                    case "max":
+                    case StartValueType.max:
                         addOpacity.value = addOpacity.max;
-                        addOpacity.status = "decreasing";
+                        addOpacity.status = AnimationStatus.decreasing;
                         break;
-                    case "random":
+                    case StartValueType.random:
                     default:
                         addOpacity.value = randomInRange(addOpacity);
                         addOpacity.status =
-                            getRandom() >= halfRandom ? "increasing" : "decreasing";
+                            getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
                         break;
                 }
             }
             particle.gradient.colors.push(addColor);
         }
-        await Promise.resolve();
     }
     isEnabled(particle) {
         return (!particle.destroyed &&
             !particle.spawning &&
             (!!particle.gradient?.angle.enable ||
-                (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
+                (particle.gradient?.colors.some(c => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
                     false)));
     }
     loadOptions(options, ...sources) {
@@ -119,15 +119,14 @@ export class GradientUpdater {
             if (!gradientToLoad) {
                 continue;
             }
-            options.gradient = executeOnSingleOrMultiple(gradientToLoad, (gradient) => {
+            options.gradient = executeOnSingleOrMultiple(gradientToLoad, gradient => {
                 const tmp = new AnimatableGradient();
                 tmp.load(gradient);
                 return tmp;
             });
         }
     }
-    async update(particle, delta) {
-        const { updateGradient } = await import("./Utils.js");
+    update(particle, delta) {
         updateGradient(particle, delta);
     }
 }

package/browser/Options/Classes/AnimatableGradient.js

@@ -1,10 +1,11 @@
+import { GradientType } from "@tsparticles/engine";
 import { AnimatableGradientColor } from "./AnimatableGradientColor.js";
 import { GradientAngle } from "./GradientAngle.js";
 export class AnimatableGradient {
     constructor() {
         this.angle = new GradientAngle();
         this.colors = [];
-        this.type = "random";
+        this.type = GradientType.random;
     }
     load(data) {
         if (!data) {
@@ -12,7 +13,7 @@ export class AnimatableGradient {
         }
         this.angle.load(data.angle);
         if (data.colors !== undefined) {
-            this.colors = data.colors.map((s) => {
+            this.colors = data.colors.map(s => {
                 const tmp = new AnimatableGradientColor();
                 tmp.load(s);
                 return tmp;

package/browser/Options/Classes/GradientAngle.js

@@ -1,10 +1,10 @@
-import { setRangeValue, } from "@tsparticles/engine";
+import { RotateDirection, setRangeValue, } from "@tsparticles/engine";
 import { GradientAngleAnimation } from "./GradientAngleAnimation.js";
 export class GradientAngle {
     constructor() {
         this.value = 0;
         this.animation = new GradientAngleAnimation();
-        this.direction = "clockwise";
+        this.direction = RotateDirection.clockwise;
     }
     load(data) {
         if (!data) {

package/browser/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,4 +1,4 @@
-import { setRangeValue, } from "@tsparticles/engine";
+import { StartValueType, setRangeValue, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
     constructor() {
         this.count = 0;
@@ -7,7 +7,7 @@ export class GradientColorOpacityAnimation {
         this.decay = 0;
         this.delay = 0;
         this.sync = false;
-        this.startValue = "random";
+        this.startValue = StartValueType.random;
     }
     load(data) {
         if (!data) {

package/browser/Utils.js

@@ -1,14 +1,14 @@
-import { updateAnimation, updateColor } from "@tsparticles/engine";
+import { DestroyType, updateAnimation, updateColor } from "@tsparticles/engine";
 export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {
         return;
     }
-    updateAnimation(particle, gradient.angle, false, "none", delta);
+    updateAnimation(particle, gradient.angle, false, DestroyType.none, delta);
     for (const color of gradient.colors) {
         updateColor(color.value, delta);
         if (color.opacity) {
-            updateAnimation(particle, color.opacity, true, "none", delta);
+            updateAnimation(particle, color.opacity, true, DestroyType.none, delta);
         }
     }
 }

package/browser/index.js

@@ -1,6 +1,6 @@
+import { GradientUpdater } from "./GradientUpdater.js";
 export async function loadGradientUpdater(engine, refresh = true) {
-    await engine.addParticleUpdater("gradient", async () => {
-        const { GradientUpdater } = await import("./GradientUpdater.js");
-        return new GradientUpdater();
+    await engine.addParticleUpdater("gradient", () => {
+        return Promise.resolve(new GradientUpdater());
     }, refresh);
 }

package/cjs/GradientUpdater.js

@@ -1,31 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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 {
     getColorStyles(particle, context, radius, opacity) {
@@ -33,7 +11,7 @@ class GradientUpdater {
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === "radial"
+        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === engine_1.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) {
@@ -45,7 +23,7 @@ class GradientUpdater {
         }
         return { fill: fillGradient };
     }
-    async init(particle) {
+    init(particle) {
         const gradient = (0, engine_1.itemFromSingleOrMultiple)(particle.options.gradient);
         if (!gradient) {
             return;
@@ -66,16 +44,16 @@ class GradientUpdater {
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
-        if (rotateDirection === "random") {
-            rotateDirection = (0, engine_1.getRandom)() > engine_1.halfRandom ? "counter-clockwise" : "clockwise";
+        if (rotateDirection === engine_1.RotateDirection.random) {
+            rotateDirection = (0, engine_1.getRandom)() > engine_1.halfRandom ? engine_1.RotateDirection.counterClockwise : engine_1.RotateDirection.clockwise;
         }
         switch (rotateDirection) {
-            case "counter-clockwise":
+            case engine_1.RotateDirection.counterClockwise:
             case "counterClockwise":
-                particle.gradient.angle.status = "decreasing";
+                particle.gradient.angle.status = engine_1.AnimationStatus.decreasing;
                 break;
-            case "clockwise":
-                particle.gradient.angle.status = "increasing";
+            case engine_1.RotateDirection.clockwise:
+                particle.gradient.angle.status = engine_1.AnimationStatus.increasing;
                 break;
         }
         const reduceDuplicates = particle.options.reduceDuplicates;
@@ -92,7 +70,7 @@ class GradientUpdater {
                         enable: grColor.opacity.animation.enable,
                         max: (0, engine_1.getRangeMax)(grColor.opacity.value),
                         min: (0, engine_1.getRangeMin)(grColor.opacity.value),
-                        status: "increasing",
+                        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) *
                             particle.container.retina.reduceFactor,
@@ -109,31 +87,30 @@ class GradientUpdater {
                 addOpacity.max = (0, engine_1.getRangeMax)(opacityRange);
                 const opacityAnimation = grColor.opacity.animation;
                 switch (opacityAnimation.startValue) {
-                    case "min":
+                    case engine_1.StartValueType.min:
                         addOpacity.value = addOpacity.min;
-                        addOpacity.status = "increasing";
+                        addOpacity.status = engine_1.AnimationStatus.increasing;
                         break;
-                    case "max":
+                    case engine_1.StartValueType.max:
                         addOpacity.value = addOpacity.max;
-                        addOpacity.status = "decreasing";
+                        addOpacity.status = engine_1.AnimationStatus.decreasing;
                         break;
-                    case "random":
+                    case engine_1.StartValueType.random:
                     default:
                         addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
                         addOpacity.status =
-                            (0, engine_1.getRandom)() >= engine_1.halfRandom ? "increasing" : "decreasing";
+                            (0, engine_1.getRandom)() >= engine_1.halfRandom ? engine_1.AnimationStatus.increasing : engine_1.AnimationStatus.decreasing;
                         break;
                 }
             }
             particle.gradient.colors.push(addColor);
         }
-        await Promise.resolve();
     }
     isEnabled(particle) {
         return (!particle.destroyed &&
             !particle.spawning &&
             (!!particle.gradient?.angle.enable ||
-                (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
+                (particle.gradient?.colors.some(c => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
                     false)));
     }
     loadOptions(options, ...sources) {
@@ -145,16 +122,15 @@ class GradientUpdater {
             if (!gradientToLoad) {
                 continue;
             }
-            options.gradient = (0, engine_1.executeOnSingleOrMultiple)(gradientToLoad, (gradient) => {
+            options.gradient = (0, engine_1.executeOnSingleOrMultiple)(gradientToLoad, gradient => {
                 const tmp = new AnimatableGradient_js_1.AnimatableGradient();
                 tmp.load(gradient);
                 return tmp;
             });
         }
     }
-    async update(particle, delta) {
-        const { updateGradient } = await Promise.resolve().then(() => __importStar(require("./Utils.js")));
-        updateGradient(particle, delta);
+    update(particle, delta) {
+        (0, Utils_js_1.updateGradient)(particle, delta);
     }
 }
 exports.GradientUpdater = GradientUpdater;

package/cjs/Options/Classes/AnimatableGradient.js

@@ -1,13 +1,14 @@
 "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 {
     constructor() {
         this.angle = new GradientAngle_js_1.GradientAngle();
         this.colors = [];
-        this.type = "random";
+        this.type = engine_1.GradientType.random;
     }
     load(data) {
         if (!data) {
@@ -15,7 +16,7 @@ class AnimatableGradient {
         }
         this.angle.load(data.angle);
         if (data.colors !== undefined) {
-            this.colors = data.colors.map((s) => {
+            this.colors = data.colors.map(s => {
                 const tmp = new AnimatableGradientColor_js_1.AnimatableGradientColor();
                 tmp.load(s);
                 return tmp;

package/cjs/Options/Classes/GradientAngle.js

@@ -7,7 +7,7 @@ class GradientAngle {
     constructor() {
         this.value = 0;
         this.animation = new GradientAngleAnimation_js_1.GradientAngleAnimation();
-        this.direction = "clockwise";
+        this.direction = engine_1.RotateDirection.clockwise;
     }
     load(data) {
         if (!data) {

package/cjs/Options/Classes/GradientColorOpacityAnimation.js

@@ -10,7 +10,7 @@ class GradientColorOpacityAnimation {
         this.decay = 0;
         this.delay = 0;
         this.sync = false;
-        this.startValue = "random";
+        this.startValue = engine_1.StartValueType.random;
     }
     load(data) {
         if (!data) {

package/cjs/Utils.js

@@ -7,11 +7,11 @@ function updateGradient(particle, delta) {
     if (!gradient) {
         return;
     }
-    (0, engine_1.updateAnimation)(particle, gradient.angle, false, "none", delta);
+    (0, engine_1.updateAnimation)(particle, gradient.angle, false, engine_1.DestroyType.none, delta);
     for (const color of gradient.colors) {
         (0, engine_1.updateColor)(color.value, delta);
         if (color.opacity) {
-            (0, engine_1.updateAnimation)(particle, color.opacity, true, "none", delta);
+            (0, engine_1.updateAnimation)(particle, color.opacity, true, engine_1.DestroyType.none, delta);
         }
     }
 }

package/cjs/index.js

@@ -1,33 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadGradientUpdater = void 0;
+const GradientUpdater_js_1 = require("./GradientUpdater.js");
 async function loadGradientUpdater(engine, refresh = true) {
-    await engine.addParticleUpdater("gradient", async () => {
-        const { GradientUpdater } = await Promise.resolve().then(() => __importStar(require("./GradientUpdater.js")));
-        return new GradientUpdater();
+    await engine.addParticleUpdater("gradient", () => {
+        return Promise.resolve(new GradientUpdater_js_1.GradientUpdater());
     }, refresh);
 }
 exports.loadGradientUpdater = loadGradientUpdater;

package/esm/GradientUpdater.js

@@ -1,5 +1,6 @@
-import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, halfRandom, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
+import { AnimationStatus, GradientType, RotateDirection, StartValueType, executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, halfRandom, itemFromSingleOrMultiple, millisecondsToSeconds, percentDenominator, randomInRange, 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 {
     getColorStyles(particle, context, radius, opacity) {
@@ -7,7 +8,7 @@ export class GradientUpdater {
         if (!gradient) {
             return {};
         }
-        const gradientAngle = gradient.angle.value, origin = { x: 0, y: 0 }, minRadius = 0, fillGradient = gradient.type === "radial"
+        const 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) {
@@ -19,7 +20,7 @@ export class GradientUpdater {
         }
         return { fill: fillGradient };
     }
-    async init(particle) {
+    init(particle) {
         const gradient = itemFromSingleOrMultiple(particle.options.gradient);
         if (!gradient) {
             return;
@@ -40,16 +41,16 @@ export class GradientUpdater {
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
-        if (rotateDirection === "random") {
-            rotateDirection = getRandom() > halfRandom ? "counter-clockwise" : "clockwise";
+        if (rotateDirection === RotateDirection.random) {
+            rotateDirection = getRandom() > halfRandom ? RotateDirection.counterClockwise : RotateDirection.clockwise;
         }
         switch (rotateDirection) {
-            case "counter-clockwise":
+            case RotateDirection.counterClockwise:
             case "counterClockwise":
-                particle.gradient.angle.status = "decreasing";
+                particle.gradient.angle.status = AnimationStatus.decreasing;
                 break;
-            case "clockwise":
-                particle.gradient.angle.status = "increasing";
+            case RotateDirection.clockwise:
+                particle.gradient.angle.status = AnimationStatus.increasing;
                 break;
         }
         const reduceDuplicates = particle.options.reduceDuplicates;
@@ -66,7 +67,7 @@ export class GradientUpdater {
                         enable: grColor.opacity.animation.enable,
                         max: getRangeMax(grColor.opacity.value),
                         min: getRangeMin(grColor.opacity.value),
-                        status: "increasing",
+                        status: AnimationStatus.increasing,
                         value: getRangeValue(grColor.opacity.value),
                         velocity: (getRangeValue(grColor.opacity.animation.speed) / percentDenominator) *
                             particle.container.retina.reduceFactor,
@@ -83,31 +84,30 @@ export class GradientUpdater {
                 addOpacity.max = getRangeMax(opacityRange);
                 const opacityAnimation = grColor.opacity.animation;
                 switch (opacityAnimation.startValue) {
-                    case "min":
+                    case StartValueType.min:
                         addOpacity.value = addOpacity.min;
-                        addOpacity.status = "increasing";
+                        addOpacity.status = AnimationStatus.increasing;
                         break;
-                    case "max":
+                    case StartValueType.max:
                         addOpacity.value = addOpacity.max;
-                        addOpacity.status = "decreasing";
+                        addOpacity.status = AnimationStatus.decreasing;
                         break;
-                    case "random":
+                    case StartValueType.random:
                     default:
                         addOpacity.value = randomInRange(addOpacity);
                         addOpacity.status =
-                            getRandom() >= halfRandom ? "increasing" : "decreasing";
+                            getRandom() >= halfRandom ? AnimationStatus.increasing : AnimationStatus.decreasing;
                         break;
                 }
             }
             particle.gradient.colors.push(addColor);
         }
-        await Promise.resolve();
     }
     isEnabled(particle) {
         return (!particle.destroyed &&
             !particle.spawning &&
             (!!particle.gradient?.angle.enable ||
-                (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
+                (particle.gradient?.colors.some(c => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
                     false)));
     }
     loadOptions(options, ...sources) {
@@ -119,15 +119,14 @@ export class GradientUpdater {
             if (!gradientToLoad) {
                 continue;
             }
-            options.gradient = executeOnSingleOrMultiple(gradientToLoad, (gradient) => {
+            options.gradient = executeOnSingleOrMultiple(gradientToLoad, gradient => {
                 const tmp = new AnimatableGradient();
                 tmp.load(gradient);
                 return tmp;
             });
         }
     }
-    async update(particle, delta) {
-        const { updateGradient } = await import("./Utils.js");
+    update(particle, delta) {
         updateGradient(particle, delta);
     }
 }

package/esm/Options/Classes/AnimatableGradient.js

@@ -1,10 +1,11 @@
+import { GradientType } from "@tsparticles/engine";
 import { AnimatableGradientColor } from "./AnimatableGradientColor.js";
 import { GradientAngle } from "./GradientAngle.js";
 export class AnimatableGradient {
     constructor() {
         this.angle = new GradientAngle();
         this.colors = [];
-        this.type = "random";
+        this.type = GradientType.random;
     }
     load(data) {
         if (!data) {
@@ -12,7 +13,7 @@ export class AnimatableGradient {
         }
         this.angle.load(data.angle);
         if (data.colors !== undefined) {
-            this.colors = data.colors.map((s) => {
+            this.colors = data.colors.map(s => {
                 const tmp = new AnimatableGradientColor();
                 tmp.load(s);
                 return tmp;

package/esm/Options/Classes/GradientAngle.js

@@ -1,10 +1,10 @@
-import { setRangeValue, } from "@tsparticles/engine";
+import { RotateDirection, setRangeValue, } from "@tsparticles/engine";
 import { GradientAngleAnimation } from "./GradientAngleAnimation.js";
 export class GradientAngle {
     constructor() {
         this.value = 0;
         this.animation = new GradientAngleAnimation();
-        this.direction = "clockwise";
+        this.direction = RotateDirection.clockwise;
     }
     load(data) {
         if (!data) {

package/esm/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,4 +1,4 @@
-import { setRangeValue, } from "@tsparticles/engine";
+import { StartValueType, setRangeValue, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
     constructor() {
         this.count = 0;
@@ -7,7 +7,7 @@ export class GradientColorOpacityAnimation {
         this.decay = 0;
         this.delay = 0;
         this.sync = false;
-        this.startValue = "random";
+        this.startValue = StartValueType.random;
     }
     load(data) {
         if (!data) {

package/esm/Utils.js

@@ -1,14 +1,14 @@
-import { updateAnimation, updateColor } from "@tsparticles/engine";
+import { DestroyType, updateAnimation, updateColor } from "@tsparticles/engine";
 export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {
         return;
     }
-    updateAnimation(particle, gradient.angle, false, "none", delta);
+    updateAnimation(particle, gradient.angle, false, DestroyType.none, delta);
     for (const color of gradient.colors) {
         updateColor(color.value, delta);
         if (color.opacity) {
-            updateAnimation(particle, color.opacity, true, "none", delta);
+            updateAnimation(particle, color.opacity, true, DestroyType.none, delta);
         }
     }
 }

package/esm/index.js

@@ -1,6 +1,6 @@
+import { GradientUpdater } from "./GradientUpdater.js";
 export async function loadGradientUpdater(engine, refresh = true) {
-    await engine.addParticleUpdater("gradient", async () => {
-        const { GradientUpdater } = await import("./GradientUpdater.js");
-        return new GradientUpdater();
+    await engine.addParticleUpdater("gradient", () => {
+        return Promise.resolve(new GradientUpdater());
     }, refresh);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/updater-gradient",
-  "version": "3.2.2",
+  "version": "3.4.0",
   "description": "tsParticles particles gradient updater",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -101,7 +101,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "^3.2.2"
+    "@tsparticles/engine": "^3.4.0"
   },
   "publishConfig": {
     "access": "public"