@tsparticles/updater-gradient 4.1.3 → 4.2.1

package/browser/Options/Classes/AnimatableGradient.js

@@ -1,15 +1,10 @@
-import { GradientType, isNull } from "@tsparticles/engine";
+import { GradientType, isNull, loadProperty } from "@tsparticles/engine";
 import { AnimatableGradientColor } from "./AnimatableGradientColor.js";
 import { GradientAngle } from "./GradientAngle.js";
 export class AnimatableGradient {
-    angle;
-    colors;
-    type;
-    constructor() {
-        this.angle = new GradientAngle();
-        this.colors = [];
-        this.type = GradientType.random;
-    }
+    angle = new GradientAngle();
+    colors = [];
+    type = GradientType.random;
     load(data) {
         if (isNull(data)) {
             return;
@@ -22,8 +17,6 @@ export class AnimatableGradient {
                 return tmp;
             });
         }
-        if (data.type !== undefined) {
-            this.type = data.type;
-        }
+        loadProperty(this, "type", data.type);
     }
 }

package/browser/Options/Classes/AnimatableGradientColor.js

@@ -1,20 +1,14 @@
-import { AnimatableColor, isNull, isNumber } from "@tsparticles/engine";
+import { AnimatableColor, isNull, isNumber, loadProperty, } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity.js";
 export class AnimatableGradientColor {
     opacity;
-    stop;
-    value;
-    constructor() {
-        this.stop = 0;
-        this.value = new AnimatableColor();
-    }
+    stop = 0;
+    value = new AnimatableColor();
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.stop !== undefined) {
-            this.stop = data.stop;
-        }
+        loadProperty(this, "stop", data.stop);
         this.value = AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
             this.opacity = new GradientColorOpacity();

package/browser/Options/Classes/GradientAngle.js

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

package/browser/Options/Classes/GradientAngleAnimation.js

@@ -1,40 +1,20 @@
-import { isNull, setRangeValue, } from "@tsparticles/engine";
+import { isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class GradientAngleAnimation {
-    count;
-    decay;
-    delay;
-    enable;
-    speed;
-    sync;
-    constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 0;
-        this.decay = 0;
-        this.delay = 0;
-        this.sync = false;
-    }
+    count = 0;
+    decay = 0;
+    delay = 0;
+    enable = false;
+    speed = 0;
+    sync = false;
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
+        loadRangeProperty(this, "count", data.count);
+        loadProperty(this, "enable", data.enable);
+        loadRangeProperty(this, "speed", data.speed);
+        loadRangeProperty(this, "decay", data.decay);
+        loadRangeProperty(this, "delay", data.delay);
+        loadProperty(this, "sync", data.sync);
     }
 }

package/browser/Options/Classes/GradientColorOpacity.js

@@ -1,19 +1,13 @@
-import { isNull, setRangeValue, } from "@tsparticles/engine";
+import { isNull, loadRangeProperty, } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation.js";
 export class GradientColorOpacity {
-    animation;
-    value;
-    constructor() {
-        this.value = 0;
-        this.animation = new GradientColorOpacityAnimation();
-    }
+    animation = new GradientColorOpacityAnimation();
+    value = 0;
     load(data) {
         if (isNull(data)) {
             return;
         }
         this.animation.load(data.animation);
-        if (data.value !== undefined) {
-            this.value = setRangeValue(data.value);
-        }
+        loadRangeProperty(this, "value", data.value);
     }
 }

package/browser/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,45 +1,22 @@
-import { StartValueType, isNull, setRangeValue, } from "@tsparticles/engine";
+import { StartValueType, isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
-    count;
-    decay;
-    delay;
-    enable;
-    speed;
-    startValue;
-    sync;
-    constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 0;
-        this.decay = 0;
-        this.delay = 0;
-        this.sync = false;
-        this.startValue = StartValueType.random;
-    }
+    count = 0;
+    decay = 0;
+    delay = 0;
+    enable = false;
+    speed = 0;
+    startValue = StartValueType.random;
+    sync = false;
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
-        if (data.startValue !== undefined) {
-            this.startValue = data.startValue;
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
+        loadRangeProperty(this, "count", data.count);
+        loadProperty(this, "enable", data.enable);
+        loadRangeProperty(this, "speed", data.speed);
+        loadProperty(this, "sync", data.sync);
+        loadProperty(this, "startValue", data.startValue);
+        loadRangeProperty(this, "decay", data.decay);
+        loadRangeProperty(this, "delay", data.delay);
     }
 }

package/browser/Utils.js

@@ -1,4 +1,5 @@
-import { DestroyType, updateAnimation, updateColor } from "@tsparticles/engine";
+import { DestroyType, updateColor } from "@tsparticles/engine";
+import { updateAnimation } from "@tsparticles/animation-utils";
 export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {

package/browser/index.js

@@ -1,6 +1,6 @@
 import { GradientUpdater } from "./GradientUpdater.js";
 export async function loadGradientUpdater(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.1");
     await engine.pluginManager.register(e => {
         e.pluginManager.addParticleUpdater("gradient", container => {
             return Promise.resolve(new GradientUpdater(e.pluginManager, container));

package/browser/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadGradientUpdater(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.1");
     await engine.pluginManager.register(e => {
         e.pluginManager.addParticleUpdater("gradient", async (container) => {
             const { GradientUpdater } = await import("./GradientUpdater.js");

package/cjs/Options/Classes/AnimatableGradient.js

@@ -1,15 +1,10 @@
-import { GradientType, isNull } from "@tsparticles/engine";
+import { GradientType, isNull, loadProperty } from "@tsparticles/engine";
 import { AnimatableGradientColor } from "./AnimatableGradientColor.js";
 import { GradientAngle } from "./GradientAngle.js";
 export class AnimatableGradient {
-    angle;
-    colors;
-    type;
-    constructor() {
-        this.angle = new GradientAngle();
-        this.colors = [];
-        this.type = GradientType.random;
-    }
+    angle = new GradientAngle();
+    colors = [];
+    type = GradientType.random;
     load(data) {
         if (isNull(data)) {
             return;
@@ -22,8 +17,6 @@ export class AnimatableGradient {
                 return tmp;
             });
         }
-        if (data.type !== undefined) {
-            this.type = data.type;
-        }
+        loadProperty(this, "type", data.type);
     }
 }

package/cjs/Options/Classes/AnimatableGradientColor.js

@@ -1,20 +1,14 @@
-import { AnimatableColor, isNull, isNumber } from "@tsparticles/engine";
+import { AnimatableColor, isNull, isNumber, loadProperty, } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity.js";
 export class AnimatableGradientColor {
     opacity;
-    stop;
-    value;
-    constructor() {
-        this.stop = 0;
-        this.value = new AnimatableColor();
-    }
+    stop = 0;
+    value = new AnimatableColor();
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.stop !== undefined) {
-            this.stop = data.stop;
-        }
+        loadProperty(this, "stop", data.stop);
         this.value = AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
             this.opacity = new GradientColorOpacity();

package/cjs/Options/Classes/GradientAngle.js

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

package/cjs/Options/Classes/GradientAngleAnimation.js

@@ -1,40 +1,20 @@
-import { isNull, setRangeValue, } from "@tsparticles/engine";
+import { isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class GradientAngleAnimation {
-    count;
-    decay;
-    delay;
-    enable;
-    speed;
-    sync;
-    constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 0;
-        this.decay = 0;
-        this.delay = 0;
-        this.sync = false;
-    }
+    count = 0;
+    decay = 0;
+    delay = 0;
+    enable = false;
+    speed = 0;
+    sync = false;
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
+        loadRangeProperty(this, "count", data.count);
+        loadProperty(this, "enable", data.enable);
+        loadRangeProperty(this, "speed", data.speed);
+        loadRangeProperty(this, "decay", data.decay);
+        loadRangeProperty(this, "delay", data.delay);
+        loadProperty(this, "sync", data.sync);
     }
 }

package/cjs/Options/Classes/GradientColorOpacity.js

@@ -1,19 +1,13 @@
-import { isNull, setRangeValue, } from "@tsparticles/engine";
+import { isNull, loadRangeProperty, } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation.js";
 export class GradientColorOpacity {
-    animation;
-    value;
-    constructor() {
-        this.value = 0;
-        this.animation = new GradientColorOpacityAnimation();
-    }
+    animation = new GradientColorOpacityAnimation();
+    value = 0;
     load(data) {
         if (isNull(data)) {
             return;
         }
         this.animation.load(data.animation);
-        if (data.value !== undefined) {
-            this.value = setRangeValue(data.value);
-        }
+        loadRangeProperty(this, "value", data.value);
     }
 }

package/cjs/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,45 +1,22 @@
-import { StartValueType, isNull, setRangeValue, } from "@tsparticles/engine";
+import { StartValueType, isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
-    count;
-    decay;
-    delay;
-    enable;
-    speed;
-    startValue;
-    sync;
-    constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 0;
-        this.decay = 0;
-        this.delay = 0;
-        this.sync = false;
-        this.startValue = StartValueType.random;
-    }
+    count = 0;
+    decay = 0;
+    delay = 0;
+    enable = false;
+    speed = 0;
+    startValue = StartValueType.random;
+    sync = false;
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
-        if (data.startValue !== undefined) {
-            this.startValue = data.startValue;
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
+        loadRangeProperty(this, "count", data.count);
+        loadProperty(this, "enable", data.enable);
+        loadRangeProperty(this, "speed", data.speed);
+        loadProperty(this, "sync", data.sync);
+        loadProperty(this, "startValue", data.startValue);
+        loadRangeProperty(this, "decay", data.decay);
+        loadRangeProperty(this, "delay", data.delay);
     }
 }

package/cjs/Utils.js

@@ -1,4 +1,5 @@
-import { DestroyType, updateAnimation, updateColor } from "@tsparticles/engine";
+import { DestroyType, updateColor } from "@tsparticles/engine";
+import { updateAnimation } from "@tsparticles/animation-utils";
 export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {

package/cjs/index.js

@@ -1,6 +1,6 @@
 import { GradientUpdater } from "./GradientUpdater.js";
 export async function loadGradientUpdater(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.1");
     await engine.pluginManager.register(e => {
         e.pluginManager.addParticleUpdater("gradient", container => {
             return Promise.resolve(new GradientUpdater(e.pluginManager, container));

package/cjs/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadGradientUpdater(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.1");
     await engine.pluginManager.register(e => {
         e.pluginManager.addParticleUpdater("gradient", async (container) => {
             const { GradientUpdater } = await import("./GradientUpdater.js");

package/esm/Options/Classes/AnimatableGradient.js

@@ -1,15 +1,10 @@
-import { GradientType, isNull } from "@tsparticles/engine";
+import { GradientType, isNull, loadProperty } from "@tsparticles/engine";
 import { AnimatableGradientColor } from "./AnimatableGradientColor.js";
 import { GradientAngle } from "./GradientAngle.js";
 export class AnimatableGradient {
-    angle;
-    colors;
-    type;
-    constructor() {
-        this.angle = new GradientAngle();
-        this.colors = [];
-        this.type = GradientType.random;
-    }
+    angle = new GradientAngle();
+    colors = [];
+    type = GradientType.random;
     load(data) {
         if (isNull(data)) {
             return;
@@ -22,8 +17,6 @@ export class AnimatableGradient {
                 return tmp;
             });
         }
-        if (data.type !== undefined) {
-            this.type = data.type;
-        }
+        loadProperty(this, "type", data.type);
     }
 }

package/esm/Options/Classes/AnimatableGradientColor.js

@@ -1,20 +1,14 @@
-import { AnimatableColor, isNull, isNumber } from "@tsparticles/engine";
+import { AnimatableColor, isNull, isNumber, loadProperty, } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity.js";
 export class AnimatableGradientColor {
     opacity;
-    stop;
-    value;
-    constructor() {
-        this.stop = 0;
-        this.value = new AnimatableColor();
-    }
+    stop = 0;
+    value = new AnimatableColor();
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.stop !== undefined) {
-            this.stop = data.stop;
-        }
+        loadProperty(this, "stop", data.stop);
         this.value = AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
             this.opacity = new GradientColorOpacity();

package/esm/Options/Classes/GradientAngle.js

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

package/esm/Options/Classes/GradientAngleAnimation.js

@@ -1,40 +1,20 @@
-import { isNull, setRangeValue, } from "@tsparticles/engine";
+import { isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class GradientAngleAnimation {
-    count;
-    decay;
-    delay;
-    enable;
-    speed;
-    sync;
-    constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 0;
-        this.decay = 0;
-        this.delay = 0;
-        this.sync = false;
-    }
+    count = 0;
+    decay = 0;
+    delay = 0;
+    enable = false;
+    speed = 0;
+    sync = false;
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
+        loadRangeProperty(this, "count", data.count);
+        loadProperty(this, "enable", data.enable);
+        loadRangeProperty(this, "speed", data.speed);
+        loadRangeProperty(this, "decay", data.decay);
+        loadRangeProperty(this, "delay", data.delay);
+        loadProperty(this, "sync", data.sync);
     }
 }

package/esm/Options/Classes/GradientColorOpacity.js

@@ -1,19 +1,13 @@
-import { isNull, setRangeValue, } from "@tsparticles/engine";
+import { isNull, loadRangeProperty, } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation.js";
 export class GradientColorOpacity {
-    animation;
-    value;
-    constructor() {
-        this.value = 0;
-        this.animation = new GradientColorOpacityAnimation();
-    }
+    animation = new GradientColorOpacityAnimation();
+    value = 0;
     load(data) {
         if (isNull(data)) {
             return;
         }
         this.animation.load(data.animation);
-        if (data.value !== undefined) {
-            this.value = setRangeValue(data.value);
-        }
+        loadRangeProperty(this, "value", data.value);
     }
 }

package/esm/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,45 +1,22 @@
-import { StartValueType, isNull, setRangeValue, } from "@tsparticles/engine";
+import { StartValueType, isNull, loadProperty, loadRangeProperty, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
-    count;
-    decay;
-    delay;
-    enable;
-    speed;
-    startValue;
-    sync;
-    constructor() {
-        this.count = 0;
-        this.enable = false;
-        this.speed = 0;
-        this.decay = 0;
-        this.delay = 0;
-        this.sync = false;
-        this.startValue = StartValueType.random;
-    }
+    count = 0;
+    decay = 0;
+    delay = 0;
+    enable = false;
+    speed = 0;
+    startValue = StartValueType.random;
+    sync = false;
     load(data) {
         if (isNull(data)) {
             return;
         }
-        if (data.count !== undefined) {
-            this.count = setRangeValue(data.count);
-        }
-        if (data.enable !== undefined) {
-            this.enable = data.enable;
-        }
-        if (data.speed !== undefined) {
-            this.speed = setRangeValue(data.speed);
-        }
-        if (data.sync !== undefined) {
-            this.sync = data.sync;
-        }
-        if (data.startValue !== undefined) {
-            this.startValue = data.startValue;
-        }
-        if (data.decay !== undefined) {
-            this.decay = setRangeValue(data.decay);
-        }
-        if (data.delay !== undefined) {
-            this.delay = setRangeValue(data.delay);
-        }
+        loadRangeProperty(this, "count", data.count);
+        loadProperty(this, "enable", data.enable);
+        loadRangeProperty(this, "speed", data.speed);
+        loadProperty(this, "sync", data.sync);
+        loadProperty(this, "startValue", data.startValue);
+        loadRangeProperty(this, "decay", data.decay);
+        loadRangeProperty(this, "delay", data.delay);
     }
 }

package/esm/Utils.js

@@ -1,4 +1,5 @@
-import { DestroyType, updateAnimation, updateColor } from "@tsparticles/engine";
+import { DestroyType, updateColor } from "@tsparticles/engine";
+import { updateAnimation } from "@tsparticles/animation-utils";
 export function updateGradient(particle, delta) {
     const { gradient } = particle;
     if (!gradient) {

package/esm/index.js

@@ -1,6 +1,6 @@
 import { GradientUpdater } from "./GradientUpdater.js";
 export async function loadGradientUpdater(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.1");
     await engine.pluginManager.register(e => {
         e.pluginManager.addParticleUpdater("gradient", container => {
             return Promise.resolve(new GradientUpdater(e.pluginManager, container));

package/esm/index.lazy.js

@@ -1,5 +1,5 @@
 export async function loadGradientUpdater(engine) {
-    engine.checkVersion("4.1.3");
+    engine.checkVersion("4.2.1");
     await engine.pluginManager.register(e => {
         e.pluginManager.addParticleUpdater("gradient", async (container) => {
             const { GradientUpdater } = await import("./GradientUpdater.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/updater-gradient",
-  "version": "4.1.3",
+  "version": "4.2.1",
   "description": "tsParticles particles gradient updater",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -106,8 +106,11 @@
     },
     "./package.json": "./package.json"
   },
+  "dependencies": {
+    "@tsparticles/animation-utils": "4.2.1"
+  },
   "peerDependencies": {
-    "@tsparticles/engine": "4.1.3"
+    "@tsparticles/engine": "4.2.1"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -4930,7 +4930,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.updater.gradient.js","children":[{"name":"dist/browser","children":[{"name":"Options/Classes","children":[{"uid":"d3a68c52-1","name":"GradientColorOpacityAnimation.js"},{"uid":"d3a68c52-3","name":"GradientColorOpacity.js"},{"uid":"d3a68c52-5","name":"AnimatableGradientColor.js"},{"uid":"d3a68c52-7","name":"GradientAngleAnimation.js"},{"uid":"d3a68c52-9","name":"GradientAngle.js"},{"uid":"d3a68c52-11","name":"AnimatableGradient.js"}]},{"uid":"d3a68c52-13","name":"Utils.js"},{"uid":"d3a68c52-15","name":"GradientUpdater.js"},{"uid":"d3a68c52-17","name":"index.js"},{"uid":"d3a68c52-19","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"d3a68c52-1":{"renderedLength":1331,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-0"},"d3a68c52-3":{"renderedLength":478,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-2"},"d3a68c52-5":{"renderedLength":826,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-4"},"d3a68c52-7":{"renderedLength":1130,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-6"},"d3a68c52-9":{"renderedLength":657,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-8"},"d3a68c52-11":{"renderedLength":748,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-10"},"d3a68c52-13":{"renderedLength":502,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-12"},"d3a68c52-15":{"renderedLength":6816,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-14"},"d3a68c52-17":{"renderedLength":334,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-16"},"d3a68c52-19":{"renderedLength":181,"gzipLength":0,"brotliLength":0,"metaUid":"d3a68c52-18"}},"nodeMetas":{"d3a68c52-0":{"id":"/dist/browser/Options/Classes/GradientColorOpacityAnimation.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-1"},"imported":[{"uid":"d3a68c52-20"}],"importedBy":[{"uid":"d3a68c52-2"}]},"d3a68c52-2":{"id":"/dist/browser/Options/Classes/GradientColorOpacity.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-3"},"imported":[{"uid":"d3a68c52-20"},{"uid":"d3a68c52-0"}],"importedBy":[{"uid":"d3a68c52-4"}]},"d3a68c52-4":{"id":"/dist/browser/Options/Classes/AnimatableGradientColor.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-5"},"imported":[{"uid":"d3a68c52-20"},{"uid":"d3a68c52-2"}],"importedBy":[{"uid":"d3a68c52-10"}]},"d3a68c52-6":{"id":"/dist/browser/Options/Classes/GradientAngleAnimation.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-7"},"imported":[{"uid":"d3a68c52-20"}],"importedBy":[{"uid":"d3a68c52-8"}]},"d3a68c52-8":{"id":"/dist/browser/Options/Classes/GradientAngle.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-9"},"imported":[{"uid":"d3a68c52-20"},{"uid":"d3a68c52-6"}],"importedBy":[{"uid":"d3a68c52-10"}]},"d3a68c52-10":{"id":"/dist/browser/Options/Classes/AnimatableGradient.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-11"},"imported":[{"uid":"d3a68c52-20"},{"uid":"d3a68c52-4"},{"uid":"d3a68c52-8"}],"importedBy":[{"uid":"d3a68c52-14"}]},"d3a68c52-12":{"id":"/dist/browser/Utils.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-13"},"imported":[{"uid":"d3a68c52-20"}],"importedBy":[{"uid":"d3a68c52-14"}]},"d3a68c52-14":{"id":"/dist/browser/GradientUpdater.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-15"},"imported":[{"uid":"d3a68c52-20"},{"uid":"d3a68c52-10"},{"uid":"d3a68c52-12"}],"importedBy":[{"uid":"d3a68c52-16"}]},"d3a68c52-16":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-17"},"imported":[{"uid":"d3a68c52-14"}],"importedBy":[{"uid":"d3a68c52-18"}]},"d3a68c52-18":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.updater.gradient.js":"d3a68c52-19"},"imported":[{"uid":"d3a68c52-16"}],"importedBy":[],"isEntry":true},"d3a68c52-20":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"d3a68c52-14"},{"uid":"d3a68c52-10"},{"uid":"d3a68c52-12"},{"uid":"d3a68c52-4"},{"uid":"d3a68c52-8"},{"uid":"d3a68c52-2"},{"uid":"d3a68c52-6"},{"uid":"d3a68c52-0"}],"isExternal":true}},"env":{"rollup":"4.60.4"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"tsparticles.updater.gradient.js","children":[{"name":"dist/browser","children":[{"name":"Options/Classes","children":[{"uid":"336fcac3-1","name":"GradientColorOpacityAnimation.js"},{"uid":"336fcac3-3","name":"GradientColorOpacity.js"},{"uid":"336fcac3-5","name":"AnimatableGradientColor.js"},{"uid":"336fcac3-7","name":"GradientAngleAnimation.js"},{"uid":"336fcac3-9","name":"GradientAngle.js"},{"uid":"336fcac3-11","name":"AnimatableGradient.js"}]},{"uid":"336fcac3-13","name":"Utils.js"},{"uid":"336fcac3-15","name":"GradientUpdater.js"},{"uid":"336fcac3-17","name":"index.js"},{"uid":"336fcac3-19","name":"browser.js"}]}]}],"isRoot":true},"nodeParts":{"336fcac3-1":{"renderedLength":778,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-0"},"336fcac3-3":{"renderedLength":336,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-2"},"336fcac3-5":{"renderedLength":707,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-4"},"336fcac3-7":{"renderedLength":650,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-6"},"336fcac3-9":{"renderedLength":444,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-8"},"336fcac3-11":{"renderedLength":604,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-10"},"336fcac3-13":{"renderedLength":518,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-12"},"336fcac3-15":{"renderedLength":6816,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-14"},"336fcac3-17":{"renderedLength":334,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-16"},"336fcac3-19":{"renderedLength":181,"gzipLength":0,"brotliLength":0,"metaUid":"336fcac3-18"}},"nodeMetas":{"336fcac3-0":{"id":"/dist/browser/Options/Classes/GradientColorOpacityAnimation.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-1"},"imported":[{"uid":"336fcac3-20"}],"importedBy":[{"uid":"336fcac3-2"}]},"336fcac3-2":{"id":"/dist/browser/Options/Classes/GradientColorOpacity.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-3"},"imported":[{"uid":"336fcac3-20"},{"uid":"336fcac3-0"}],"importedBy":[{"uid":"336fcac3-4"}]},"336fcac3-4":{"id":"/dist/browser/Options/Classes/AnimatableGradientColor.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-5"},"imported":[{"uid":"336fcac3-20"},{"uid":"336fcac3-2"}],"importedBy":[{"uid":"336fcac3-10"}]},"336fcac3-6":{"id":"/dist/browser/Options/Classes/GradientAngleAnimation.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-7"},"imported":[{"uid":"336fcac3-20"}],"importedBy":[{"uid":"336fcac3-8"}]},"336fcac3-8":{"id":"/dist/browser/Options/Classes/GradientAngle.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-9"},"imported":[{"uid":"336fcac3-20"},{"uid":"336fcac3-6"}],"importedBy":[{"uid":"336fcac3-10"}]},"336fcac3-10":{"id":"/dist/browser/Options/Classes/AnimatableGradient.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-11"},"imported":[{"uid":"336fcac3-20"},{"uid":"336fcac3-4"},{"uid":"336fcac3-8"}],"importedBy":[{"uid":"336fcac3-14"}]},"336fcac3-12":{"id":"/dist/browser/Utils.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-13"},"imported":[{"uid":"336fcac3-20"},{"uid":"336fcac3-21"}],"importedBy":[{"uid":"336fcac3-14"}]},"336fcac3-14":{"id":"/dist/browser/GradientUpdater.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-15"},"imported":[{"uid":"336fcac3-20"},{"uid":"336fcac3-10"},{"uid":"336fcac3-12"}],"importedBy":[{"uid":"336fcac3-16"}]},"336fcac3-16":{"id":"/dist/browser/index.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-17"},"imported":[{"uid":"336fcac3-14"}],"importedBy":[{"uid":"336fcac3-18"}]},"336fcac3-18":{"id":"/dist/browser/browser.js","moduleParts":{"tsparticles.updater.gradient.js":"336fcac3-19"},"imported":[{"uid":"336fcac3-16"}],"importedBy":[],"isEntry":true},"336fcac3-20":{"id":"@tsparticles/engine","moduleParts":{},"imported":[],"importedBy":[{"uid":"336fcac3-14"},{"uid":"336fcac3-10"},{"uid":"336fcac3-12"},{"uid":"336fcac3-4"},{"uid":"336fcac3-8"},{"uid":"336fcac3-2"},{"uid":"336fcac3-6"},{"uid":"336fcac3-0"}],"isExternal":true},"336fcac3-21":{"id":"@tsparticles/animation-utils","moduleParts":{},"imported":[],"importedBy":[{"uid":"336fcac3-12"}],"isExternal":true}},"env":{"rollup":"4.62.0"},"options":{"gzip":false,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/tsparticles.updater.gradient.js

@@ -1,89 +1,54 @@
 (function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
-/* Updater v4.1.3 */
+/* Updater v4.2.1 */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/engine')) :
-    typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/engine'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.updaters = global.__tsParticlesInternals.updaters || {}, global.__tsParticlesInternals.updaters.gradient = global.__tsParticlesInternals.updaters.gradient || {}), global.__tsParticlesInternals.engine));
-})(this, (function (exports, engine) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/engine'), require('@tsparticles/animation-utils')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/engine', '@tsparticles/animation-utils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.updaters = global.__tsParticlesInternals.updaters || {}, global.__tsParticlesInternals.updaters.gradient = global.__tsParticlesInternals.updaters.gradient || {}), global.__tsParticlesInternals.engine, global.__tsParticlesInternals.animation.utils));
+})(this, (function (exports, engine, animationUtils) { 'use strict';
 
     class GradientColorOpacityAnimation {
-        count;
-        decay;
-        delay;
-        enable;
-        speed;
-        startValue;
-        sync;
-        constructor() {
-            this.count = 0;
-            this.enable = false;
-            this.speed = 0;
-            this.decay = 0;
-            this.delay = 0;
-            this.sync = false;
-            this.startValue = engine.StartValueType.random;
-        }
+        count = 0;
+        decay = 0;
+        delay = 0;
+        enable = false;
+        speed = 0;
+        startValue = engine.StartValueType.random;
+        sync = false;
         load(data) {
             if (engine.isNull(data)) {
                 return;
             }
-            if (data.count !== undefined) {
-                this.count = engine.setRangeValue(data.count);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.speed !== undefined) {
-                this.speed = engine.setRangeValue(data.speed);
-            }
-            if (data.sync !== undefined) {
-                this.sync = data.sync;
-            }
-            if (data.startValue !== undefined) {
-                this.startValue = data.startValue;
-            }
-            if (data.decay !== undefined) {
-                this.decay = engine.setRangeValue(data.decay);
-            }
-            if (data.delay !== undefined) {
-                this.delay = engine.setRangeValue(data.delay);
-            }
+            engine.loadRangeProperty(this, "count", data.count);
+            engine.loadProperty(this, "enable", data.enable);
+            engine.loadRangeProperty(this, "speed", data.speed);
+            engine.loadProperty(this, "sync", data.sync);
+            engine.loadProperty(this, "startValue", data.startValue);
+            engine.loadRangeProperty(this, "decay", data.decay);
+            engine.loadRangeProperty(this, "delay", data.delay);
         }
     }
 
     class GradientColorOpacity {
-        animation;
-        value;
-        constructor() {
-            this.value = 0;
-            this.animation = new GradientColorOpacityAnimation();
-        }
+        animation = new GradientColorOpacityAnimation();
+        value = 0;
         load(data) {
             if (engine.isNull(data)) {
                 return;
             }
             this.animation.load(data.animation);
-            if (data.value !== undefined) {
-                this.value = engine.setRangeValue(data.value);
-            }
+            engine.loadRangeProperty(this, "value", data.value);
         }
     }
 
     class AnimatableGradientColor {
         opacity;
-        stop;
-        value;
-        constructor() {
-            this.stop = 0;
-            this.value = new engine.AnimatableColor();
-        }
+        stop = 0;
+        value = new engine.AnimatableColor();
         load(data) {
             if (engine.isNull(data)) {
                 return;
             }
-            if (data.stop !== undefined) {
-                this.stop = data.stop;
-            }
+            engine.loadProperty(this, "stop", data.stop);
             this.value = engine.AnimatableColor.create(this.value, data.value);
             if (data.opacity !== undefined) {
                 this.opacity = new GradientColorOpacity();
@@ -98,77 +63,43 @@
     }
 
     class GradientAngleAnimation {
-        count;
-        decay;
-        delay;
-        enable;
-        speed;
-        sync;
-        constructor() {
-            this.count = 0;
-            this.enable = false;
-            this.speed = 0;
-            this.decay = 0;
-            this.delay = 0;
-            this.sync = false;
-        }
+        count = 0;
+        decay = 0;
+        delay = 0;
+        enable = false;
+        speed = 0;
+        sync = false;
         load(data) {
             if (engine.isNull(data)) {
                 return;
             }
-            if (data.count !== undefined) {
-                this.count = engine.setRangeValue(data.count);
-            }
-            if (data.enable !== undefined) {
-                this.enable = data.enable;
-            }
-            if (data.speed !== undefined) {
-                this.speed = engine.setRangeValue(data.speed);
-            }
-            if (data.decay !== undefined) {
-                this.decay = engine.setRangeValue(data.decay);
-            }
-            if (data.delay !== undefined) {
-                this.delay = engine.setRangeValue(data.delay);
-            }
-            if (data.sync !== undefined) {
-                this.sync = data.sync;
-            }
+            engine.loadRangeProperty(this, "count", data.count);
+            engine.loadProperty(this, "enable", data.enable);
+            engine.loadRangeProperty(this, "speed", data.speed);
+            engine.loadRangeProperty(this, "decay", data.decay);
+            engine.loadRangeProperty(this, "delay", data.delay);
+            engine.loadProperty(this, "sync", data.sync);
         }
     }
 
     class GradientAngle {
-        animation;
-        direction;
-        value;
-        constructor() {
-            this.value = 0;
-            this.animation = new GradientAngleAnimation();
-            this.direction = engine.RotateDirection.clockwise;
-        }
+        animation = new GradientAngleAnimation();
+        direction = engine.RotateDirection.clockwise;
+        value = 0;
         load(data) {
             if (engine.isNull(data)) {
                 return;
             }
             this.animation.load(data.animation);
-            if (data.value !== undefined) {
-                this.value = engine.setRangeValue(data.value);
-            }
-            if (data.direction !== undefined) {
-                this.direction = data.direction;
-            }
+            engine.loadRangeProperty(this, "value", data.value);
+            engine.loadProperty(this, "direction", data.direction);
         }
     }
 
     class AnimatableGradient {
-        angle;
-        colors;
-        type;
-        constructor() {
-            this.angle = new GradientAngle();
-            this.colors = [];
-            this.type = engine.GradientType.random;
-        }
+        angle = new GradientAngle();
+        colors = [];
+        type = engine.GradientType.random;
         load(data) {
             if (engine.isNull(data)) {
                 return;
@@ -181,9 +112,7 @@
                     return tmp;
                 });
             }
-            if (data.type !== undefined) {
-                this.type = data.type;
-            }
+            engine.loadProperty(this, "type", data.type);
         }
     }
 
@@ -192,11 +121,11 @@
         if (!gradient) {
             return;
         }
-        engine.updateAnimation(particle, gradient.angle, false, engine.DestroyType.none, delta);
+        animationUtils.updateAnimation(particle, gradient.angle, false, engine.DestroyType.none, delta);
         for (const color of gradient.colors) {
             engine.updateColor(color.value, delta);
             if (color.opacity) {
-                engine.updateAnimation(particle, color.opacity, true, engine.DestroyType.none, delta);
+                animationUtils.updateAnimation(particle, color.opacity, true, engine.DestroyType.none, delta);
             }
         }
     }
@@ -331,7 +260,7 @@
     }
 
     async function loadGradientUpdater(engine) {
-        engine.checkVersion("4.1.3");
+        engine.checkVersion("4.2.1");
         await engine.pluginManager.register(e => {
             e.pluginManager.addParticleUpdater("gradient", container => {
                 return Promise.resolve(new GradientUpdater(e.pluginManager, container));

package/tsparticles.updater.gradient.min.js

@@ -1 +1 @@
-!function(t){t.__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.bundles=t.__tsParticlesInternals.bundles||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.engine=t.__tsParticlesInternals.engine||{},t.__tsParticlesInternals.interactions=t.__tsParticlesInternals.interactions||{},t.__tsParticlesInternals.palettes=t.__tsParticlesInternals.palettes||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins.emittersShapes=t.__tsParticlesInternals.plugins.emittersShapes||{},t.__tsParticlesInternals.presets=t.__tsParticlesInternals.presets||{},t.__tsParticlesInternals.shapes=t.__tsParticlesInternals.shapes||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.utils=t.__tsParticlesInternals.utils||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas.utils=t.__tsParticlesInternals.canvas.utils||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path.utils=t.__tsParticlesInternals.path.utils||{};var e="undefined"!=typeof Proxy?function(t){return new Proxy(t,{get:function(t,e){return e in t||(t[e]={}),t[e]}})}:function(t){return t};t.__tsParticlesInternals.bundles=e(t.__tsParticlesInternals.bundles),t.__tsParticlesInternals.effects=e(t.__tsParticlesInternals.effects),t.__tsParticlesInternals.interactions=e(t.__tsParticlesInternals.interactions),t.__tsParticlesInternals.palettes=e(t.__tsParticlesInternals.palettes),t.__tsParticlesInternals.paths=e(t.__tsParticlesInternals.paths),t.__tsParticlesInternals.plugins=e(t.__tsParticlesInternals.plugins),t.__tsParticlesInternals.plugins.emittersShapes=e(t.__tsParticlesInternals.plugins.emittersShapes),t.__tsParticlesInternals.presets=e(t.__tsParticlesInternals.presets),t.__tsParticlesInternals.shapes=e(t.__tsParticlesInternals.shapes),t.__tsParticlesInternals.updaters=e(t.__tsParticlesInternals.updaters),t.__tsParticlesInternals.utils=e(t.__tsParticlesInternals.utils),t.__tsParticlesInternals.canvas=e(t.__tsParticlesInternals.canvas),t.__tsParticlesInternals.path=e(t.__tsParticlesInternals.path),t.tsparticlesInternalExports=t.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@tsparticles/engine")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/engine"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.updaters.gradient=t.__tsParticlesInternals.updaters.gradient||{}),t.__tsParticlesInternals.engine)}(this,function(t,e){"use strict";class a{count;decay;delay;enable;speed;startValue;sync;constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1,this.startValue=e.StartValueType.random}load(t){e.isNull(t)||(void 0!==t.count&&(this.count=e.setRangeValue(t.count)),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.speed&&(this.speed=e.setRangeValue(t.speed)),void 0!==t.sync&&(this.sync=t.sync),void 0!==t.startValue&&(this.startValue=t.startValue),void 0!==t.decay&&(this.decay=e.setRangeValue(t.decay)),void 0!==t.delay&&(this.delay=e.setRangeValue(t.delay)))}}class s{animation;value;constructor(){this.value=0,this.animation=new a}load(t){e.isNull(t)||(this.animation.load(t.animation),void 0!==t.value&&(this.value=e.setRangeValue(t.value)))}}class n{opacity;stop;value;constructor(){this.stop=0,this.value=new e.AnimatableColor}load(t){e.isNull(t)||(void 0!==t.stop&&(this.stop=t.stop),this.value=e.AnimatableColor.create(this.value,t.value),void 0!==t.opacity&&(this.opacity=new s,e.isNumber(t.opacity)?this.opacity.value=t.opacity:this.opacity.load(t.opacity)))}}class i{count;decay;delay;enable;speed;sync;constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1}load(t){e.isNull(t)||(void 0!==t.count&&(this.count=e.setRangeValue(t.count)),void 0!==t.enable&&(this.enable=t.enable),void 0!==t.speed&&(this.speed=e.setRangeValue(t.speed)),void 0!==t.decay&&(this.decay=e.setRangeValue(t.decay)),void 0!==t.delay&&(this.delay=e.setRangeValue(t.delay)),void 0!==t.sync&&(this.sync=t.sync))}}class l{animation;direction;value;constructor(){this.value=0,this.animation=new i,this.direction=e.RotateDirection.clockwise}load(t){e.isNull(t)||(this.animation.load(t.animation),void 0!==t.value&&(this.value=e.setRangeValue(t.value)),void 0!==t.direction&&(this.direction=t.direction))}}class r{angle;colors;type;constructor(){this.angle=new l,this.colors=[],this.type=e.GradientType.random}load(t){e.isNull(t)||(this.angle.load(t.angle),void 0!==t.colors&&(this.colors=t.colors.map(t=>{const e=new n;return e.load(t),e})),void 0!==t.type&&(this.type=t.type))}}class o{#t;#e;constructor(t,e){this.#e=t,this.#t=e}getColorStyles(t,a,s,n){const i=t.gradient;if(!i)return{};const l=this.#t,r=i.angle.value,o=0,c=0,u=i.type===e.GradientType.radial?a.createRadialGradient(o,c,0,o,c,s):a.createLinearGradient(Math.cos(r)*-s,Math.sin(r)*-s,Math.cos(r)*s,Math.sin(r)*s);for(const{stop:t,value:a,opacity:s}of i.colors){const i={h:a.h.value,s:a.s.value,l:a.l.value};u.addColorStop(t,e.getStyleFromHsl(i,l.hdr,s?.value??n))}return{fill:u}}init(t){const a=e.itemFromSingleOrMultiple(t.options.gradient);if(!a)return;const s=this.#t,{angle:n}=a;t.gradient={angle:{value:e.getRangeValue(n.value),enable:n.animation.enable,velocity:e.getRangeValue(n.animation.speed)/360*s.retina.reduceFactor,decay:1-e.getRangeValue(n.animation.decay),delayTime:e.getRangeValue(n.animation.delay)*e.millisecondsToSeconds,max:e.doublePI,min:0,time:0},type:a.type,colors:[]};let i=a.angle.direction;switch(i===e.RotateDirection.random&&(i=e.getRandom()>e.half?e.RotateDirection.counterClockwise:e.RotateDirection.clockwise),i){case e.RotateDirection.counterClockwise:case"counterClockwise":t.gradient.angle.status=e.AnimationStatus.decreasing;break;case e.RotateDirection.clockwise:t.gradient.angle.status=e.AnimationStatus.increasing}const l=t.options.reduceDuplicates;for(const n of a.colors){const a=e.rangeColorToHsl(this.#e,n.value,t.id,l);if(!a)continue;const i=e.getHslAnimationFromHsl(a,n.value.animation,s.retina.reduceFactor),r={stop:n.stop,value:i,opacity:n.opacity?{enable:n.opacity.animation.enable,max:e.getRangeMax(n.opacity.value),min:e.getRangeMin(n.opacity.value),status:e.AnimationStatus.increasing,value:e.getRangeValue(n.opacity.value),velocity:e.getRangeValue(n.opacity.animation.speed)/e.percentDenominator*s.retina.reduceFactor,decay:1-e.getRangeValue(n.opacity.animation.decay),delayTime:e.getRangeValue(n.opacity.animation.delay)*e.millisecondsToSeconds,time:0}:void 0},{opacity:o}=r;if(n.opacity&&o){const t=n.opacity.value;o.min=e.getRangeMin(t),o.max=e.getRangeMax(t);switch(n.opacity.animation.startValue){case e.StartValueType.min:o.value=o.min,o.status=e.AnimationStatus.increasing;break;case e.StartValueType.max:o.value=o.max,o.status=e.AnimationStatus.decreasing;break;case e.StartValueType.random:default:o.value=e.randomInRangeValue(o),o.status=e.getRandom()>=e.half?e.AnimationStatus.increasing:e.AnimationStatus.decreasing}}t.gradient.colors.push(r)}}isEnabled(t){return!t.destroyed&&!t.spawning&&(!!t.gradient?.angle.enable||(t.gradient?.colors.some(t=>t.value.h.enable||t.value.s.enable||t.value.l.enable)??!1))}loadOptions(t,...a){for(const s of a){if(!s?.gradient)continue;const a=s.gradient;t.gradient=e.executeOnSingleOrMultiple(a,t=>{const e=new r;return e.load(t),e})}}update(t,a){!function(t,a){const{gradient:s}=t;if(s){e.updateAnimation(t,s.angle,!1,e.DestroyType.none,a);for(const n of s.colors)e.updateColor(n.value,a),n.opacity&&e.updateAnimation(t,n.opacity,!0,e.DestroyType.none,a)}}(t,a)}}async function c(t){t.checkVersion("4.1.3"),await t.pluginManager.register(t=>{t.pluginManager.addParticleUpdater("gradient",e=>Promise.resolve(new o(t.pluginManager,e)))})}const u=globalThis;u.__tsParticlesInternals=u.__tsParticlesInternals??{},u.loadGradientUpdater=c,t.loadGradientUpdater=c}),Object.assign(globalThis.window||globalThis,{loadGradientUpdater:(globalThis.__tsParticlesInternals.updaters.gradient||{}).loadGradientUpdater}),delete(globalThis.window||globalThis).tsparticlesInternalExports;
+!function(t){t.__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.bundles=t.__tsParticlesInternals.bundles||{},t.__tsParticlesInternals.effects=t.__tsParticlesInternals.effects||{},t.__tsParticlesInternals.engine=t.__tsParticlesInternals.engine||{},t.__tsParticlesInternals.interactions=t.__tsParticlesInternals.interactions||{},t.__tsParticlesInternals.palettes=t.__tsParticlesInternals.palettes||{},t.__tsParticlesInternals.paths=t.__tsParticlesInternals.paths||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins=t.__tsParticlesInternals.plugins||{},t.__tsParticlesInternals.plugins.emittersShapes=t.__tsParticlesInternals.plugins.emittersShapes||{},t.__tsParticlesInternals.presets=t.__tsParticlesInternals.presets||{},t.__tsParticlesInternals.shapes=t.__tsParticlesInternals.shapes||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.utils=t.__tsParticlesInternals.utils||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas=t.__tsParticlesInternals.canvas||{},t.__tsParticlesInternals.canvas.utils=t.__tsParticlesInternals.canvas.utils||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path=t.__tsParticlesInternals.path||{},t.__tsParticlesInternals.path.utils=t.__tsParticlesInternals.path.utils||{};var e="undefined"!=typeof Proxy?function(t){return new Proxy(t,{get:function(t,e){return e in t||(t[e]={}),t[e]}})}:function(t){return t};t.__tsParticlesInternals.bundles=e(t.__tsParticlesInternals.bundles),t.__tsParticlesInternals.effects=e(t.__tsParticlesInternals.effects),t.__tsParticlesInternals.interactions=e(t.__tsParticlesInternals.interactions),t.__tsParticlesInternals.palettes=e(t.__tsParticlesInternals.palettes),t.__tsParticlesInternals.paths=e(t.__tsParticlesInternals.paths),t.__tsParticlesInternals.plugins=e(t.__tsParticlesInternals.plugins),t.__tsParticlesInternals.plugins.emittersShapes=e(t.__tsParticlesInternals.plugins.emittersShapes),t.__tsParticlesInternals.presets=e(t.__tsParticlesInternals.presets),t.__tsParticlesInternals.shapes=e(t.__tsParticlesInternals.shapes),t.__tsParticlesInternals.updaters=e(t.__tsParticlesInternals.updaters),t.__tsParticlesInternals.utils=e(t.__tsParticlesInternals.utils),t.__tsParticlesInternals.canvas=e(t.__tsParticlesInternals.canvas),t.__tsParticlesInternals.path=e(t.__tsParticlesInternals.path),t.tsparticlesInternalExports=t.tsparticlesInternalExports||{}}("undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:this),function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@tsparticles/engine"),require("@tsparticles/animation-utils")):"function"==typeof define&&define.amd?define(["exports","@tsparticles/engine","@tsparticles/animation-utils"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).__tsParticlesInternals=t.__tsParticlesInternals||{},t.__tsParticlesInternals.updaters=t.__tsParticlesInternals.updaters||{},t.__tsParticlesInternals.updaters.gradient=t.__tsParticlesInternals.updaters.gradient||{}),t.__tsParticlesInternals.engine,t.__tsParticlesInternals.animation.utils)}(this,function(t,e,a){"use strict";class s{count=0;decay=0;delay=0;enable=!1;speed=0;startValue=e.StartValueType.random;sync=!1;load(t){e.isNull(t)||(e.loadRangeProperty(this,"count",t.count),e.loadProperty(this,"enable",t.enable),e.loadRangeProperty(this,"speed",t.speed),e.loadProperty(this,"sync",t.sync),e.loadProperty(this,"startValue",t.startValue),e.loadRangeProperty(this,"decay",t.decay),e.loadRangeProperty(this,"delay",t.delay))}}class n{animation=new s;value=0;load(t){e.isNull(t)||(this.animation.load(t.animation),e.loadRangeProperty(this,"value",t.value))}}class l{opacity;stop=0;value=new e.AnimatableColor;load(t){e.isNull(t)||(e.loadProperty(this,"stop",t.stop),this.value=e.AnimatableColor.create(this.value,t.value),void 0!==t.opacity&&(this.opacity=new n,e.isNumber(t.opacity)?this.opacity.value=t.opacity:this.opacity.load(t.opacity)))}}class i{count=0;decay=0;delay=0;enable=!1;speed=0;sync=!1;load(t){e.isNull(t)||(e.loadRangeProperty(this,"count",t.count),e.loadProperty(this,"enable",t.enable),e.loadRangeProperty(this,"speed",t.speed),e.loadRangeProperty(this,"decay",t.decay),e.loadRangeProperty(this,"delay",t.delay),e.loadProperty(this,"sync",t.sync))}}class r{animation=new i;direction=e.RotateDirection.clockwise;value=0;load(t){e.isNull(t)||(this.animation.load(t.animation),e.loadRangeProperty(this,"value",t.value),e.loadProperty(this,"direction",t.direction))}}class o{angle=new r;colors=[];type=e.GradientType.random;load(t){e.isNull(t)||(this.angle.load(t.angle),void 0!==t.colors&&(this.colors=t.colors.map(t=>{const e=new l;return e.load(t),e})),e.loadProperty(this,"type",t.type))}}class c{#t;#e;constructor(t,e){this.#e=t,this.#t=e}getColorStyles(t,a,s,n){const l=t.gradient;if(!l)return{};const i=this.#t,r=l.angle.value,o=0,c=0,d=l.type===e.GradientType.radial?a.createRadialGradient(o,c,0,o,c,s):a.createLinearGradient(Math.cos(r)*-s,Math.sin(r)*-s,Math.cos(r)*s,Math.sin(r)*s);for(const{stop:t,value:a,opacity:s}of l.colors){const l={h:a.h.value,s:a.s.value,l:a.l.value};d.addColorStop(t,e.getStyleFromHsl(l,i.hdr,s?.value??n))}return{fill:d}}init(t){const a=e.itemFromSingleOrMultiple(t.options.gradient);if(!a)return;const s=this.#t,{angle:n}=a;t.gradient={angle:{value:e.getRangeValue(n.value),enable:n.animation.enable,velocity:e.getRangeValue(n.animation.speed)/360*s.retina.reduceFactor,decay:1-e.getRangeValue(n.animation.decay),delayTime:e.getRangeValue(n.animation.delay)*e.millisecondsToSeconds,max:e.doublePI,min:0,time:0},type:a.type,colors:[]};let l=a.angle.direction;switch(l===e.RotateDirection.random&&(l=e.getRandom()>e.half?e.RotateDirection.counterClockwise:e.RotateDirection.clockwise),l){case e.RotateDirection.counterClockwise:case"counterClockwise":t.gradient.angle.status=e.AnimationStatus.decreasing;break;case e.RotateDirection.clockwise:t.gradient.angle.status=e.AnimationStatus.increasing}const i=t.options.reduceDuplicates;for(const n of a.colors){const a=e.rangeColorToHsl(this.#e,n.value,t.id,i);if(!a)continue;const l=e.getHslAnimationFromHsl(a,n.value.animation,s.retina.reduceFactor),r={stop:n.stop,value:l,opacity:n.opacity?{enable:n.opacity.animation.enable,max:e.getRangeMax(n.opacity.value),min:e.getRangeMin(n.opacity.value),status:e.AnimationStatus.increasing,value:e.getRangeValue(n.opacity.value),velocity:e.getRangeValue(n.opacity.animation.speed)/e.percentDenominator*s.retina.reduceFactor,decay:1-e.getRangeValue(n.opacity.animation.decay),delayTime:e.getRangeValue(n.opacity.animation.delay)*e.millisecondsToSeconds,time:0}:void 0},{opacity:o}=r;if(n.opacity&&o){const t=n.opacity.value;o.min=e.getRangeMin(t),o.max=e.getRangeMax(t);switch(n.opacity.animation.startValue){case e.StartValueType.min:o.value=o.min,o.status=e.AnimationStatus.increasing;break;case e.StartValueType.max:o.value=o.max,o.status=e.AnimationStatus.decreasing;break;case e.StartValueType.random:default:o.value=e.randomInRangeValue(o),o.status=e.getRandom()>=e.half?e.AnimationStatus.increasing:e.AnimationStatus.decreasing}}t.gradient.colors.push(r)}}isEnabled(t){return!t.destroyed&&!t.spawning&&(!!t.gradient?.angle.enable||(t.gradient?.colors.some(t=>t.value.h.enable||t.value.s.enable||t.value.l.enable)??!1))}loadOptions(t,...a){for(const s of a){if(!s?.gradient)continue;const a=s.gradient;t.gradient=e.executeOnSingleOrMultiple(a,t=>{const e=new o;return e.load(t),e})}}update(t,s){!function(t,s){const{gradient:n}=t;if(n){a.updateAnimation(t,n.angle,!1,e.DestroyType.none,s);for(const l of n.colors)e.updateColor(l.value,s),l.opacity&&a.updateAnimation(t,l.opacity,!0,e.DestroyType.none,s)}}(t,s)}}async function d(t){t.checkVersion("4.2.1"),await t.pluginManager.register(t=>{t.pluginManager.addParticleUpdater("gradient",e=>Promise.resolve(new c(t.pluginManager,e)))})}const u=globalThis;u.__tsParticlesInternals=u.__tsParticlesInternals??{},u.loadGradientUpdater=d,t.loadGradientUpdater=d}),Object.assign(globalThis.window||globalThis,{loadGradientUpdater:(globalThis.__tsParticlesInternals.updaters.gradient||{}).loadGradientUpdater}),delete(globalThis.window||globalThis).tsparticlesInternalExports;

package/types/Options/Classes/AnimatableGradient.d.ts

@@ -3,9 +3,8 @@ import { AnimatableGradientColor } from "./AnimatableGradientColor.js";
 import { GradientAngle } from "./GradientAngle.js";
 import type { IAnimatableGradient } from "../Interfaces/IAnimatableGradient.js";
 export declare class AnimatableGradient implements IAnimatableGradient, IOptionLoader<IAnimatableGradient> {
-    angle: GradientAngle;
+    readonly angle: GradientAngle;
     colors: AnimatableGradientColor[];
     type: GradientType;
-    constructor();
     load(data?: RecursivePartial<IAnimatableGradient>): void;
 }

package/types/Options/Classes/AnimatableGradientColor.d.ts

@@ -5,6 +5,5 @@ export declare class AnimatableGradientColor implements IAnimatableGradientColor
     opacity?: GradientColorOpacity;
     stop: number;
     value: AnimatableColor;
-    constructor();
     load(data?: RecursivePartial<IAnimatableGradientColor>): void;
 }

package/types/Options/Classes/GradientAngle.d.ts

@@ -2,9 +2,8 @@ import { type IAnimatable, type IAnimation, type IOptionLoader, type RangeValue,
 import { GradientAngleAnimation } from "./GradientAngleAnimation.js";
 import type { IGradientAngle } from "../Interfaces/Gradients.js";
 export declare class GradientAngle implements IGradientAngle, IAnimatable<IAnimation>, IOptionLoader<IGradientAngle & IAnimatable<IAnimation>> {
-    animation: GradientAngleAnimation;
+    readonly animation: GradientAngleAnimation;
     direction: RotateDirection | keyof typeof RotateDirection | RotateDirectionAlt;
     value: RangeValue;
-    constructor();
     load(data?: RecursivePartial<IGradientAngle & IAnimatable<IAnimation>>): void;
 }

package/types/Options/Classes/GradientAngleAnimation.d.ts

@@ -6,6 +6,5 @@ export declare class GradientAngleAnimation implements IAnimation, IOptionLoader
     enable: boolean;
     speed: RangeValue;
     sync: boolean;
-    constructor();
     load(data?: RecursivePartial<IAnimation>): void;
 }

package/types/Options/Classes/GradientColorOpacity.d.ts

@@ -3,8 +3,7 @@ import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation.j
 import type { IGradientColorOpacity } from "../Interfaces/Gradients.js";
 import type { IGradientColorOpacityAnimation } from "../Interfaces/IOptionsGradient.js";
 export declare class GradientColorOpacity implements IGradientColorOpacity, IAnimatable<GradientColorOpacityAnimation>, IOptionLoader<IGradientColorOpacity & IAnimatable<IGradientColorOpacityAnimation>> {
-    animation: GradientColorOpacityAnimation;
+    readonly animation: GradientColorOpacityAnimation;
     value: RangeValue;
-    constructor();
     load(data?: RecursivePartial<IGradientColorOpacity & IAnimatable<IAnimation>>): void;
 }

package/types/Options/Classes/GradientColorOpacityAnimation.d.ts

@@ -8,6 +8,5 @@ export declare class GradientColorOpacityAnimation implements IGradientColorOpac
     speed: RangeValue;
     startValue: StartValueType | keyof typeof StartValueType;
     sync: boolean;
-    constructor();
     load(data?: RecursivePartial<IGradientColorOpacityAnimation>): void;
 }