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

package/umd/GradientUpdater.js

@@ -4,120 +4,17 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/AnimatableGradient"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./Options/Classes/AnimatableGradient.js", "./Utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     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 {};
@@ -125,12 +22,12 @@
             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 };
         }
@@ -139,20 +36,22 @@
             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":
@@ -182,28 +81,31 @@
                             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;
                     }
                 }
@@ -211,15 +113,15 @@
             }
         }
         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;
@@ -227,14 +129,14 @@
                     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/umd/Options/Classes/AnimatableGradient.js

@@ -4,17 +4,17 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./AnimatableGradientColor", "./GradientAngle"], factory);
+        define(["require", "exports", "./AnimatableGradientColor.js", "./GradientAngle.js"], factory);
     }
 })(function (require, exports) {
     "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";
         }
@@ -25,7 +25,7 @@
             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/umd/Options/Classes/AnimatableGradientColor.js

@@ -4,14 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./GradientColorOpacity"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./GradientColorOpacity.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     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;
@@ -26,8 +26,8 @@
             }
             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/umd/Options/Classes/GradientAngle.js

@@ -4,17 +4,18 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./GradientAngleAnimation"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./GradientAngleAnimation.js"], factory);
     }
 })(function (require, exports) {
     "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) {
@@ -23,7 +24,7 @@
             }
             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/umd/Options/Classes/GradientAngleAnimation.js

@@ -17,6 +17,7 @@
             this.enable = false;
             this.speed = 0;
             this.decay = 0;
+            this.delay = 0;
             this.sync = false;
         }
         load(data) {
@@ -35,6 +36,9 @@
             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/umd/Options/Classes/GradientColorOpacity.js

@@ -4,18 +4,18 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./GradientColorOpacityAnimation", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./GradientColorOpacityAnimation.js"], factory);
     }
 })(function (require, exports) {
     "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/umd/Options/Classes/GradientColorOpacityAnimation.js

@@ -17,6 +17,7 @@
             this.enable = false;
             this.speed = 0;
             this.decay = 0;
+            this.delay = 0;
             this.sync = false;
             this.startValue = "random";
         }
@@ -39,6 +40,12 @@
             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/umd/Types.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Utils.js

@@ -0,0 +1,121 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "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/umd/index.js

@@ -4,15 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./GradientUpdater"], factory);
+        define(["require", "exports", "./GradientUpdater.js"], factory);
     }
 })(function (require, exports) {
     "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;
 });