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

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Gradient Updater
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-updater-gradient/badge)](https://www.jsdelivr.com/package/npm/tsparticles-updater-gradient)
-[![npmjs](https://badge.fury.io/js/tsparticles-updater-gradient.svg)](https://www.npmjs.com/package/tsparticles-updater-gradient)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-updater-gradient)](https://www.npmjs.com/package/tsparticles-updater-gradient) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/updater-gradient/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/updater-gradient)
+[![npmjs](https://badge.fury.io/js/@tsparticles/updater-gradient.svg)](https://www.npmjs.com/package/@tsparticles/updater-gradient)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/updater-gradient)](https://www.npmjs.com/package/@tsparticles/updater-gradient) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 [tsParticles](https://github.com/matteobruni/tsparticles) updater plugin for gradient animations.
 
@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
 
 ```javascript
 (async () => {
-  await loadGradientUpdater();
+  await loadGradientUpdater(tsParticles);
 
   await tsParticles.load({
     id: "tsparticles",
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the updater plugin
 This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
 
 ```shell
-$ npm install tsparticles-updater-gradient
+$ npm install @tsparticles/updater-gradient
 ```
 
 or
 
 ```shell
-$ yarn add tsparticles-updater-gradient
+$ yarn add @tsparticles/updater-gradient
 ```
 
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadGradientUpdater } = require("tsparticles-updater-gradient");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadGradientUpdater } = require("@tsparticles/updater-gradient");
 
-loadGradientUpdater(tsParticles);
+(async () => {
+  await loadGradientUpdater(tsParticles);
+})();
 ```
 
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadGradientUpdater } from "tsparticles-updater-gradient";
+import { tsParticles } from "@tsparticles/engine";
+import { loadGradientUpdater } from "@tsparticles/updater-gradient";
 
-loadGradientUpdater(tsParticles);
+(async () => {
+  await loadGradientUpdater(tsParticles);
+})();
 ```

package/browser/GradientUpdater.js

@@ -1,111 +1,8 @@
 import { executeOnSingleOrMultiple, getHslAnimationFromHsl, getRandom, getRangeMax, getRangeMin, getRangeValue, getStyleFromHsl, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
 import { AnimatableGradient } from "./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);
-        }
-    }
-}
+import { updateGradient } from "./Utils";
 export class GradientUpdater {
     getColorStyles(particle, context, radius, opacity) {
-        var _a, _b;
         const gradient = particle.gradient;
         if (!gradient) {
             return {};
@@ -113,12 +10,12 @@ export 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, 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, getStyleFromHsl({
+                h: value.h.value,
+                s: value.s.value,
+                l: value.l.value,
+            }, cOpacity?.value ?? opacity));
         }
         return { fill: fillGradient };
     }
@@ -127,20 +24,22 @@ export class GradientUpdater {
         if (!gradient) {
             return;
         }
+        const { angle } = gradient;
         particle.gradient = {
             angle: {
-                value: gradient.angle.value,
-                enable: gradient.angle.animation.enable,
-                velocity: (getRangeValue(gradient.angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
-                decay: 1 - getRangeValue(gradient.angle.animation.decay),
+                value: getRangeValue(angle.value),
+                enable: angle.animation.enable,
+                velocity: (getRangeValue(angle.animation.speed) / 360) * particle.container.retina.reduceFactor,
+                decay: 1 - getRangeValue(angle.animation.decay),
+                delayTime: getRangeValue(angle.animation.delay) * 1000,
+                time: 0,
             },
             type: gradient.type,
             colors: [],
         };
         let rotateDirection = gradient.angle.direction;
         if (rotateDirection === "random") {
-            const index = Math.floor(getRandom() * 2);
-            rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+            rotateDirection = getRandom() > 0.5 ? "counter-clockwise" : "clockwise";
         }
         switch (rotateDirection) {
             case "counter-clockwise":
@@ -170,28 +69,31 @@ export class GradientUpdater {
                         velocity: (getRangeValue(grColor.opacity.animation.speed) / 100) *
                             particle.container.retina.reduceFactor,
                         decay: 1 - getRangeValue(grColor.opacity.animation.decay),
+                        delayTime: 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 = getRangeMin(opacityRange);
-                addColor.opacity.max = getRangeMax(opacityRange);
+                addOpacity.min = getRangeMin(opacityRange);
+                addOpacity.max = 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 = randomInRange(addColor.opacity);
-                        addColor.opacity.status =
-                            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 = randomInRange(addOpacity);
+                        addOpacity.status =
+                            getRandom() >= 0.5 ? "increasing" : "decreasing";
                         break;
                 }
             }
@@ -199,15 +101,15 @@ export 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;

package/browser/Options/Classes/AnimatableGradientColor.js

@@ -1,4 +1,4 @@
-import { AnimatableColor } from "@tsparticles/engine";
+import { AnimatableColor, isNumber } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity";
 export class AnimatableGradientColor {
     constructor() {
@@ -15,7 +15,7 @@ export class AnimatableGradientColor {
         this.value = AnimatableColor.create(this.value, data.value);
         if (data.opacity !== undefined) {
             this.opacity = new GradientColorOpacity();
-            if (typeof data.opacity === "number") {
+            if (isNumber(data.opacity)) {
                 this.opacity.value = data.opacity;
             }
             else {

package/browser/Options/Classes/GradientAngle.js

@@ -1,3 +1,4 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientAngleAnimation } from "./GradientAngleAnimation";
 export class GradientAngle {
     constructor() {
@@ -11,7 +12,7 @@ export class GradientAngle {
         }
         this.animation.load(data.animation);
         if (data.value !== undefined) {
-            this.value = data.value;
+            this.value = setRangeValue(data.value);
         }
         if (data.direction !== undefined) {
             this.direction = data.direction;

package/browser/Options/Classes/GradientAngleAnimation.js

@@ -1,10 +1,11 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientAngleAnimation {
     constructor() {
         this.count = 0;
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
     }
     load(data) {
@@ -23,6 +24,9 @@ export class GradientAngleAnimation {
         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;
         }

package/browser/Options/Classes/GradientColorOpacity.js

@@ -1,5 +1,5 @@
+import { setRangeValue, } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation";
-import { setRangeValue } from "@tsparticles/engine";
 export class GradientColorOpacity {
     constructor() {
         this.value = 0;

package/browser/Options/Classes/GradientColorOpacityAnimation.js

@@ -1,10 +1,11 @@
-import { setRangeValue } from "@tsparticles/engine";
+import { setRangeValue, } from "@tsparticles/engine";
 export class GradientColorOpacityAnimation {
     constructor() {
         this.count = 0;
         this.enable = false;
         this.speed = 0;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
         this.startValue = "random";
     }
@@ -27,5 +28,11 @@ export class GradientColorOpacityAnimation {
         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);
+        }
     }
 }

package/browser/Types.js

@@ -0,0 +1 @@
+export {};

package/browser/Utils.js

@@ -0,0 +1,107 @@
+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;
+    }
+}
+export 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);
+        }
+    }
+}

package/browser/index.js

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