@tsparticles/updater-gradient 3.0.0-alpha.1 → 3.0.0-beta.1

package/cjs/GradientUpdater.js

@@ -2,113 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GradientUpdater = void 0;
 const engine_1 = require("@tsparticles/engine");
-const AnimatableGradient_1 = require("./Options/Classes/AnimatableGradient");
-function updateColorOpacity(delta, value) {
-    var _a, _b, _c;
-    if (!value.enable) {
-        return;
-    }
-    const decay = (_a = value.decay) !== null && _a !== void 0 ? _a : 1;
-    switch (value.status) {
-        case "increasing":
-            if (value.value >= value.max) {
-                value.status = "decreasing";
-            }
-            else {
-                value.value += ((_b = value.velocity) !== null && _b !== void 0 ? _b : 0) * delta.factor;
-            }
-            break;
-        case "decreasing":
-            if (value.value <= value.min) {
-                value.status = "increasing";
-            }
-            else {
-                value.value -= ((_c = value.velocity) !== null && _c !== void 0 ? _c : 0) * delta.factor;
-            }
-            break;
-    }
-    if (value.velocity && decay !== 1) {
-        value.velocity *= decay;
-    }
-}
-function updateColorValue(delta, value, max, decrease) {
-    var _a, _b;
-    const colorValue = value;
-    if (!colorValue || !colorValue.enable) {
-        return;
-    }
-    const velocity = ((_a = value.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, decay = (_b = value.decay) !== null && _b !== void 0 ? _b : 1;
-    if (!decrease || colorValue.status === "increasing") {
-        colorValue.value += velocity;
-        if (decrease && colorValue.value > max) {
-            colorValue.status = "decreasing";
-            colorValue.value -= colorValue.value % max;
-        }
-    }
-    else {
-        colorValue.value -= velocity;
-        if (colorValue.value < 0) {
-            colorValue.status = "increasing";
-            colorValue.value += colorValue.value;
-        }
-    }
-    if (colorValue.value > max) {
-        colorValue.value %= max;
-    }
-    if (value.velocity && decay !== 1) {
-        value.velocity *= decay;
-    }
-}
-function updateAngle(delta, angle) {
-    var _a, _b;
-    const speed = ((_a = angle.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor, max = 2 * Math.PI, decay = (_b = angle.decay) !== null && _b !== void 0 ? _b : 1;
-    if (!angle.enable) {
-        return;
-    }
-    switch (angle.status) {
-        case "increasing":
-            angle.value += speed;
-            if (angle.value > max) {
-                angle.value -= max;
-            }
-            break;
-        case "decreasing":
-        default:
-            angle.value -= speed;
-            if (angle.value < 0) {
-                angle.value += max;
-            }
-            break;
-    }
-    if (angle.velocity && decay !== 1) {
-        angle.velocity *= decay;
-    }
-}
-function updateGradient(particle, delta) {
-    var _a, _b, _c;
-    const gradient = particle.gradient;
-    if (!gradient) {
-        return;
-    }
-    updateAngle(delta, gradient.angle);
-    for (const color of gradient.colors) {
-        if (((_a = particle.color) === null || _a === void 0 ? void 0 : _a.h) !== undefined) {
-            updateColorValue(delta, color.value.h, 360, false);
-        }
-        if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
-            updateColorValue(delta, color.value.s, 100, true);
-        }
-        if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
-            updateColorValue(delta, color.value.l, 100, true);
-        }
-        if (color.opacity) {
-            updateColorOpacity(delta, color.opacity);
-        }
-    }
-}
+const AnimatableGradient_js_1 = require("./Options/Classes/AnimatableGradient.js");
+const Utils_js_1 = require("./Utils.js");
 class GradientUpdater {
     getColorStyles(particle, context, radius, opacity) {
-        var _a, _b;
         const gradient = particle.gradient;
         if (!gradient) {
             return {};
@@ -116,12 +13,12 @@ class GradientUpdater {
         const gradientAngle = gradient.angle.value, fillGradient = gradient.type === "radial"
             ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
             : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
-        for (const color of gradient.colors) {
-            fillGradient.addColorStop(color.stop, (0, engine_1.getStyleFromHsl)({
-                h: color.value.h.value,
-                s: color.value.s.value,
-                l: color.value.l.value,
-            }, (_b = (_a = color.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : opacity));
+        for (const { stop, value, opacity: cOpacity } of gradient.colors) {
+            fillGradient.addColorStop(stop, (0, engine_1.getStyleFromHsl)({
+                h: value.h.value,
+                s: value.s.value,
+                l: value.l.value,
+            }, cOpacity?.value ?? opacity));
         }
         return { fill: fillGradient };
     }
@@ -130,20 +27,22 @@ class GradientUpdater {
         if (!gradient) {
             return;
         }
+        const { angle } = gradient;
         particle.gradient = {
             angle: {
-                value: gradient.angle.value,
-                enable: gradient.angle.animation.enable,
-                velocity: ((0, engine_1.getRangeValue)(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                decay: 1 - (0, engine_1.getRangeValue)(gradient.angle.animation.decay),
+                value: (0, engine_1.getRangeValue)(angle.value),
+                enable: angle.animation.enable,
+                velocity: ((0, engine_1.getRangeValue)(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
+                decay: 1 - (0, engine_1.getRangeValue)(angle.animation.decay),
+                delayTime: (0, engine_1.getRangeValue)(angle.animation.delay) * 1000,
+                time: 0,
             },
             type: gradient.type,
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
         if (rotateDirection === "random") {
-            const index = Math.floor((0, engine_1.getRandom)() * 2);
-            rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+            rotateDirection = (0, engine_1.getRandom)() > 0.5 ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
             case "counter-clockwise":
@@ -173,28 +72,31 @@ class GradientUpdater {
                         velocity: ((0, engine_1.getRangeValue)(grColor.opacity.animation.speed) / 100) *
                             particle.container.retina.reduceFactor,
                         decay: 1 - (0, engine_1.getRangeValue)(grColor.opacity.animation.decay),
+                        delayTime: (0, engine_1.getRangeValue)(grColor.opacity.animation.delay) * 1000,
+                        time: 0,
                     }
                     : undefined,
             };
-            if (grColor.opacity && addColor.opacity) {
+            const { opacity: addOpacity } = addColor;
+            if (grColor.opacity && addOpacity) {
                 const opacityRange = grColor.opacity.value;
-                addColor.opacity.min = (0, engine_1.getRangeMin)(opacityRange);
-                addColor.opacity.max = (0, engine_1.getRangeMax)(opacityRange);
+                addOpacity.min = (0, engine_1.getRangeMin)(opacityRange);
+                addOpacity.max = (0, engine_1.getRangeMax)(opacityRange);
                 const opacityAnimation = grColor.opacity.animation;
                 switch (opacityAnimation.startValue) {
                     case "min":
-                        addColor.opacity.value = addColor.opacity.min;
-                        addColor.opacity.status = "increasing";
-                        break;
-                    case "random":
-                        addColor.opacity.value = (0, engine_1.randomInRange)(addColor.opacity);
-                        addColor.opacity.status =
-                            (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
+                        addOpacity.value = addOpacity.min;
+                        addOpacity.status = "increasing";
                         break;
                     case "max":
+                        addOpacity.value = addOpacity.max;
+                        addOpacity.status = "decreasing";
+                        break;
+                    case "random":
                     default:
-                        addColor.opacity.value = addColor.opacity.max;
-                        addColor.opacity.status = "decreasing";
+                        addOpacity.value = (0, engine_1.randomInRange)(addOpacity);
+                        addOpacity.status =
+                            (0, engine_1.getRandom)() >= 0.5 ? "increasing" : "decreasing";
                         break;
                 }
             }
@@ -202,15 +104,15 @@ class GradientUpdater {
         }
     }
     isEnabled(particle) {
-        var _a, _b, _c;
         return (!particle.destroyed &&
             !particle.spawning &&
-            (((_a = particle.gradient) === null || _a === void 0 ? void 0 : _a.angle.enable) ||
-                ((_c = (_b = particle.gradient) === null || _b === void 0 ? void 0 : _b.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable)) !== null && _c !== void 0 ? _c : false)));
+            (particle.gradient?.angle.enable ||
+                (particle.gradient?.colors.some((c) => c.value.h.enable || c.value.s.enable || c.value.l.enable) ??
+                    false)));
     }
     loadOptions(options, ...sources) {
         for (const source of sources) {
-            if (!(source === null || source === void 0 ? void 0 : source.gradient)) {
+            if (!source?.gradient) {
                 continue;
             }
             const gradientToLoad = source.gradient;
@@ -218,14 +120,14 @@ class GradientUpdater {
                 continue;
             }
             options.gradient = (0, engine_1.executeOnSingleOrMultiple)(gradientToLoad, (gradient) => {
-                const tmp = new AnimatableGradient_1.AnimatableGradient();
+                const tmp = new AnimatableGradient_js_1.AnimatableGradient();
                 tmp.load(gradient);
                 return tmp;
             });
         }
     }
     update(particle, delta) {
-        updateGradient(particle, delta);
+        (0, Utils_js_1.updateGradient)(particle, delta);
     }
 }
 exports.GradientUpdater = GradientUpdater;

package/cjs/Options/Classes/AnimatableGradient.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnimatableGradient = void 0;
-const AnimatableGradientColor_1 = require("./AnimatableGradientColor");
-const GradientAngle_1 = require("./GradientAngle");
+const AnimatableGradientColor_js_1 = require("./AnimatableGradientColor.js");
+const GradientAngle_js_1 = require("./GradientAngle.js");
 class AnimatableGradient {
     constructor() {
-        this.angle = new GradientAngle_1.GradientAngle();
+        this.angle = new GradientAngle_js_1.GradientAngle();
         this.colors = [];
         this.type = "random";
     }
@@ -16,7 +16,7 @@ class AnimatableGradient {
         this.angle.load(data.angle);
         if (data.colors !== undefined) {
             this.colors = data.colors.map((s) => {
-                const tmp = new AnimatableGradientColor_1.AnimatableGradientColor();
+                const tmp = new AnimatableGradientColor_js_1.AnimatableGradientColor();
                 tmp.load(s);
                 return tmp;
             });

package/cjs/Options/Classes/AnimatableGradientColor.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnimatableGradientColor = void 0;
 const engine_1 = require("@tsparticles/engine");
-const GradientColorOpacity_1 = require("./GradientColorOpacity");
+const GradientColorOpacity_js_1 = require("./GradientColorOpacity.js");
 class AnimatableGradientColor {
     constructor() {
         this.stop = 0;
@@ -17,8 +17,8 @@ class AnimatableGradientColor {
         }
         this.value = engine_1.AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
-            this.opacity = new GradientColorOpacity_1.GradientColorOpacity();
-            if (typeof data.opacity === "number") {
+            this.opacity = new GradientColorOpacity_js_1.GradientColorOpacity();
+            if ((0, engine_1.isNumber)(data.opacity)) {
                 this.opacity.value = data.opacity;
             }
             else {

package/cjs/Options/Classes/GradientAngle.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GradientAngle = void 0;
-const GradientAngleAnimation_1 = require("./GradientAngleAnimation");
+const engine_1 = require("@tsparticles/engine");
+const GradientAngleAnimation_js_1 = require("./GradientAngleAnimation.js");
 class GradientAngle {
     constructor() {
         this.value = 0;
-        this.animation = new GradientAngleAnimation_1.GradientAngleAnimation();
+        this.animation = new GradientAngleAnimation_js_1.GradientAngleAnimation();
         this.direction = "clockwise";
     }
     load(data) {
@@ -14,7 +15,7 @@ class GradientAngle {
         }
         this.animation.load(data.animation);
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = (0, engine_1.setRangeValue)(data.value);
         }
         if (data.direction !== undefined) {
             this.direction = data.direction;

package/cjs/Options/Classes/GradientAngleAnimation.js

@@ -8,6 +8,7 @@ class GradientAngleAnimation {
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
     }
     load(data) {
@@ -26,6 +27,9 @@ class GradientAngleAnimation {
         if (data.decay !== undefined) {
             this.decay = (0, engine_1.setRangeValue)(data.decay);
         }
+        if (data.delay !== undefined) {
+            this.delay = (0, engine_1.setRangeValue)(data.delay);
+        }
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }

package/cjs/Options/Classes/GradientColorOpacity.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GradientColorOpacity = void 0;
-const GradientColorOpacityAnimation_1 = require("./GradientColorOpacityAnimation");
 const engine_1 = require("@tsparticles/engine");
+const GradientColorOpacityAnimation_js_1 = require("./GradientColorOpacityAnimation.js");
 class GradientColorOpacity {
     constructor() {
         this.value = 0;
-        this.animation = new GradientColorOpacityAnimation_1.GradientColorOpacityAnimation();
+        this.animation = new GradientColorOpacityAnimation_js_1.GradientColorOpacityAnimation();
     }
     load(data) {
         if (!data) {

package/cjs/Options/Classes/GradientColorOpacityAnimation.js

@@ -8,6 +8,7 @@ class GradientColorOpacityAnimation {
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
         this.startValue = "random";
     }
@@ -30,6 +31,12 @@ class GradientColorOpacityAnimation {
         if (data.startValue !== undefined) {
             this.startValue = data.startValue;
         }
+        if (data.decay !== undefined) {
+            this.decay = (0, engine_1.setRangeValue)(data.decay);
+        }
+        if (data.delay !== undefined) {
+            this.delay = (0, engine_1.setRangeValue)(data.delay);
+        }
     }
 }
 exports.GradientColorOpacityAnimation = GradientColorOpacityAnimation;

package/cjs/Types.js

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

package/cjs/Utils.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGradient = void 0;
+function updateColorOpacity(delta, value) {
+    if (!value.enable) {
+        return;
+    }
+    const decay = value.decay ?? 1;
+    switch (value.status) {
+        case "increasing":
+            if (value.value >= value.max) {
+                value.status = "decreasing";
+            }
+            else {
+                value.value += (value.velocity ?? 0) * delta.factor;
+            }
+            break;
+        case "decreasing":
+            if (value.value <= value.min) {
+                value.status = "increasing";
+            }
+            else {
+                value.value -= (value.velocity ?? 0) * delta.factor;
+            }
+            break;
+    }
+    if (value.velocity && decay !== 1) {
+        value.velocity *= decay;
+    }
+}
+function updateColorValue(delta, colorValue, max, decrease) {
+    if (!colorValue || !colorValue.enable) {
+        return;
+    }
+    if (!colorValue.time) {
+        colorValue.time = 0;
+    }
+    if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
+        colorValue.time += delta.value;
+    }
+    if ((colorValue.delayTime ?? 0) > 0 && colorValue.time < (colorValue.delayTime ?? 0)) {
+        return;
+    }
+    const velocity = (colorValue.velocity ?? 0) * delta.factor, decay = colorValue.decay ?? 1;
+    if (!decrease || colorValue.status === "increasing") {
+        colorValue.value += velocity;
+        if (decrease && colorValue.value > max) {
+            colorValue.status = "decreasing";
+            colorValue.value -= colorValue.value % max;
+        }
+    }
+    else {
+        colorValue.value -= velocity;
+        if (colorValue.value < 0) {
+            colorValue.status = "increasing";
+            colorValue.value += colorValue.value;
+        }
+    }
+    if (colorValue.value > max) {
+        colorValue.value %= max;
+    }
+    if (colorValue.velocity && decay !== 1) {
+        colorValue.velocity *= decay;
+    }
+}
+function updateAngle(delta, angle) {
+    const speed = (angle.velocity ?? 0) * delta.factor, max = 2 * Math.PI, decay = angle.decay ?? 1;
+    if (!angle.enable) {
+        return;
+    }
+    switch (angle.status) {
+        case "increasing":
+            angle.value += speed;
+            if (angle.value > max) {
+                angle.value -= max;
+            }
+            break;
+        case "decreasing":
+        default:
+            angle.value -= speed;
+            if (angle.value < 0) {
+                angle.value += max;
+            }
+            break;
+    }
+    if (angle.velocity && decay !== 1) {
+        angle.velocity *= decay;
+    }
+}
+function updateGradient(particle, delta) {
+    const { gradient } = particle;
+    if (!gradient) {
+        return;
+    }
+    updateAngle(delta, gradient.angle);
+    for (const color of gradient.colors) {
+        if (particle.color?.h !== undefined) {
+            updateColorValue(delta, color.value.h, 360, false);
+        }
+        if (particle.color?.s !== undefined) {
+            updateColorValue(delta, color.value.s, 100, true);
+        }
+        if (particle.color?.l !== undefined) {
+            updateColorValue(delta, color.value.l, 100, true);
+        }
+        if (color.opacity) {
+            updateColorOpacity(delta, color.opacity);
+        }
+    }
+}
+exports.updateGradient = updateGradient;

package/cjs/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadGradientUpdater = void 0;
-const GradientUpdater_1 = require("./GradientUpdater");
-function loadGradientUpdater(engine) {
-    engine.addParticleUpdater("gradient", () => new GradientUpdater_1.GradientUpdater());
+const GradientUpdater_js_1 = require("./GradientUpdater.js");
+async function loadGradientUpdater(engine, refresh = true) {
+    await engine.addParticleUpdater("gradient", () => new GradientUpdater_js_1.GradientUpdater(), refresh);
 }
 exports.loadGradientUpdater = loadGradientUpdater;

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }