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

package/tsparticles.updater.gradient.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.0
+ * v3.0.0-beta.0
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -91,7 +91,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "loadGradientUpdater": () => (/* binding */ loadGradientUpdater)
+  loadGradientUpdater: () => (/* binding */ loadGradientUpdater)
 });
 
 // EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
@@ -104,6 +104,7 @@ class GradientColorOpacityAnimation {
     this.enable = false;
     this.speed = 0;
     this.decay = 0;
+    this.delay = 0;
     this.sync = false;
     this.startValue = "random";
   }
@@ -126,6 +127,12 @@ class GradientColorOpacityAnimation {
     if (data.startValue !== undefined) {
       this.startValue = data.startValue;
     }
+    if (data.decay !== undefined) {
+      this.decay = (0,engine_root_window_.setRangeValue)(data.decay);
+    }
+    if (data.delay !== undefined) {
+      this.delay = (0,engine_root_window_.setRangeValue)(data.delay);
+    }
   }
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/GradientColorOpacity.js
@@ -164,7 +171,7 @@ class AnimatableGradientColor {
     this.value = engine_root_window_.AnimatableColor.create(this.value, data.value);
     if (data.opacity !== undefined) {
       this.opacity = new GradientColorOpacity();
-      if (typeof data.opacity === "number") {
+      if ((0,engine_root_window_.isNumber)(data.opacity)) {
         this.opacity.value = data.opacity;
       } else {
         this.opacity.load(data.opacity);
@@ -180,6 +187,7 @@ class GradientAngleAnimation {
     this.enable = false;
     this.speed = 0;
     this.decay = 0;
+    this.delay = 0;
     this.sync = false;
   }
   load(data) {
@@ -198,6 +206,9 @@ class GradientAngleAnimation {
     if (data.decay !== undefined) {
       this.decay = (0,engine_root_window_.setRangeValue)(data.decay);
     }
+    if (data.delay !== undefined) {
+      this.delay = (0,engine_root_window_.setRangeValue)(data.delay);
+    }
     if (data.sync !== undefined) {
       this.sync = data.sync;
     }
@@ -205,6 +216,7 @@ class GradientAngleAnimation {
 }
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/GradientAngle.js
 
+
 class GradientAngle {
   constructor() {
     this.value = 0;
@@ -217,7 +229,7 @@ class GradientAngle {
     }
     this.animation.load(data.animation);
     if (data.value !== undefined) {
-      this.value = data.value;
+      this.value = (0,engine_root_window_.setRangeValue)(data.value);
     }
     if (data.direction !== undefined) {
       this.direction = data.direction;
@@ -250,28 +262,25 @@ class AnimatableGradient {
     }
   }
 }
-;// CONCATENATED MODULE: ./dist/browser/GradientUpdater.js
-
-
+;// CONCATENATED MODULE: ./dist/browser/Utils.js
 function updateColorOpacity(delta, value) {
-  var _a, _b, _c;
   if (!value.enable) {
     return;
   }
-  const decay = (_a = value.decay) !== null && _a !== void 0 ? _a : 1;
+  const decay = value.decay ?? 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;
+        value.value += (value.velocity ?? 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;
+        value.value -= (value.velocity ?? 0) * delta.factor;
       }
       break;
   }
@@ -279,14 +288,21 @@ function updateColorOpacity(delta, value) {
     value.velocity *= decay;
   }
 }
-function updateColorValue(delta, value, max, decrease) {
-  var _a, _b;
-  const colorValue = value;
+function updateColorValue(delta, colorValue, max, decrease) {
   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 (!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) {
@@ -303,15 +319,14 @@ function updateColorValue(delta, value, max, decrease) {
   if (colorValue.value > max) {
     colorValue.value %= max;
   }
-  if (value.velocity && decay !== 1) {
-    value.velocity *= decay;
+  if (colorValue.velocity && decay !== 1) {
+    colorValue.velocity *= decay;
   }
 }
 function updateAngle(delta, angle) {
-  var _a, _b;
-  const speed = ((_a = angle.velocity) !== null && _a !== void 0 ? _a : 0) * delta.factor,
+  const speed = (angle.velocity ?? 0) * delta.factor,
     max = 2 * Math.PI,
-    decay = (_b = angle.decay) !== null && _b !== void 0 ? _b : 1;
+    decay = angle.decay ?? 1;
   if (!angle.enable) {
     return;
   }
@@ -335,20 +350,21 @@ function updateAngle(delta, angle) {
   }
 }
 function updateGradient(particle, delta) {
-  var _a, _b, _c;
-  const gradient = particle.gradient;
+  const {
+    gradient
+  } = particle;
   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) {
+    if (particle.color?.h !== undefined) {
       updateColorValue(delta, color.value.h, 360, false);
     }
-    if (((_b = particle.color) === null || _b === void 0 ? void 0 : _b.s) !== undefined) {
+    if (particle.color?.s !== undefined) {
       updateColorValue(delta, color.value.s, 100, true);
     }
-    if (((_c = particle.color) === null || _c === void 0 ? void 0 : _c.l) !== undefined) {
+    if (particle.color?.l !== undefined) {
       updateColorValue(delta, color.value.l, 100, true);
     }
     if (color.opacity) {
@@ -356,21 +372,28 @@ function updateGradient(particle, delta) {
     }
   }
 }
+;// CONCATENATED MODULE: ./dist/browser/GradientUpdater.js
+
+
+
 class GradientUpdater {
   getColorStyles(particle, context, radius, opacity) {
-    var _a, _b;
     const gradient = particle.gradient;
     if (!gradient) {
       return {};
     }
     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_root_window_.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_root_window_.getStyleFromHsl)({
+        h: value.h.value,
+        s: value.s.value,
+        l: value.l.value
+      }, cOpacity?.value ?? opacity));
     }
     return {
       fill: fillGradient
@@ -381,20 +404,24 @@ class GradientUpdater {
     if (!gradient) {
       return;
     }
+    const {
+      angle
+    } = gradient;
     particle.gradient = {
       angle: {
-        value: gradient.angle.value,
-        enable: gradient.angle.animation.enable,
-        velocity: (0,engine_root_window_.getRangeValue)(gradient.angle.animation.speed) / 360 * particle.container.retina.reduceFactor,
-        decay: 1 - (0,engine_root_window_.getRangeValue)(gradient.angle.animation.decay)
+        value: (0,engine_root_window_.getRangeValue)(angle.value),
+        enable: angle.animation.enable,
+        velocity: (0,engine_root_window_.getRangeValue)(angle.animation.speed) / 360 * particle.container.retina.reduceFactor,
+        decay: 1 - (0,engine_root_window_.getRangeValue)(angle.animation.decay),
+        delayTime: (0,engine_root_window_.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_root_window_.getRandom)() * 2);
-      rotateDirection = index > 0 ? "counter-clockwise" : "clockwise";
+      rotateDirection = (0,engine_root_window_.getRandom)() > 0.5 ? "counter-clockwise" : "clockwise";
     }
     switch (rotateDirection) {
       case "counter-clockwise":
@@ -422,27 +449,32 @@ class GradientUpdater {
             status: "increasing",
             value: (0,engine_root_window_.getRangeValue)(grColor.opacity.value),
             velocity: (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.speed) / 100 * particle.container.retina.reduceFactor,
-            decay: 1 - (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.decay)
+            decay: 1 - (0,engine_root_window_.getRangeValue)(grColor.opacity.animation.decay),
+            delayTime: (0,engine_root_window_.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_root_window_.getRangeMin)(opacityRange);
-        addColor.opacity.max = (0,engine_root_window_.getRangeMax)(opacityRange);
+        addOpacity.min = (0,engine_root_window_.getRangeMin)(opacityRange);
+        addOpacity.max = (0,engine_root_window_.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_root_window_.randomInRange)(addColor.opacity);
-            addColor.opacity.status = (0,engine_root_window_.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_root_window_.randomInRange)(addOpacity);
+            addOpacity.status = (0,engine_root_window_.getRandom)() >= 0.5 ? "increasing" : "decreasing";
             break;
         }
       }
@@ -450,12 +482,11 @@ 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));
+    return !particle.destroyed && !particle.spawning && (particle.gradient?.angle.enable || (particle.gradient?.colors.some(c => c.value.h.enable || c.value.s.enable || c.value.l.enable) ?? 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;
@@ -475,8 +506,8 @@ class GradientUpdater {
 }
 ;// CONCATENATED MODULE: ./dist/browser/index.js
 
-function loadGradientUpdater(engine) {
-  engine.addParticleUpdater("gradient", () => new GradientUpdater());
+async function loadGradientUpdater(engine, refresh = true) {
+  await engine.addParticleUpdater("gradient", () => new GradientUpdater(), refresh);
 }
 })();
 

package/tsparticles.updater.gradient.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.updater.gradient.min.js.LICENSE.txt */
-!function(e,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],a);else{var t="object"==typeof exports?a(require("@tsparticles/engine")):a(e.window);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,(e=>(()=>{"use strict";var a={533:a=>{a.exports=e}},t={};function o(e){var i=t[e];if(void 0!==i)return i.exports;var n=t[e]={exports:{}};return a[e](n,n.exports,o),n.exports}o.d=(e,a)=>{for(var t in a)o.o(a,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},o.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{o.r(i),o.d(i,{loadGradientUpdater:()=>p});var e=o(533);class a{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.sync=!1,this.startValue="random"}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.sync&&(this.sync=a.sync),void 0!==a.startValue&&(this.startValue=a.startValue))}}class t{constructor(){this.value=0,this.animation=new a}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)))}}class n{constructor(){this.stop=0,this.value=new e.AnimatableColor}load(a){a&&(void 0!==a.stop&&(this.stop=a.stop),this.value=e.AnimatableColor.create(this.value,a.value),void 0!==a.opacity&&(this.opacity=new t,"number"==typeof a.opacity?this.opacity.value=a.opacity:this.opacity.load(a.opacity)))}}class l{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.sync=!1}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.sync&&(this.sync=a.sync))}}class s{constructor(){this.value=0,this.animation=new l,this.direction="clockwise"}load(e){e&&(this.animation.load(e.animation),void 0!==e.value&&(this.value=e.value),void 0!==e.direction&&(this.direction=e.direction))}}class c{constructor(){this.angle=new s,this.colors=[],this.type="random"}load(e){e&&(this.angle.load(e.angle),void 0!==e.colors&&(this.colors=e.colors.map((e=>{const a=new n;return a.load(e),a}))),void 0!==e.type&&(this.type=e.type))}}function r(e,a){var t,o,i;if(!a.enable)return;const n=null!==(t=a.decay)&&void 0!==t?t:1;switch(a.status){case"increasing":a.value>=a.max?a.status="decreasing":a.value+=(null!==(o=a.velocity)&&void 0!==o?o:0)*e.factor;break;case"decreasing":a.value<=a.min?a.status="increasing":a.value-=(null!==(i=a.velocity)&&void 0!==i?i:0)*e.factor}a.velocity&&1!==n&&(a.velocity*=n)}function u(e,a,t,o){var i,n;const l=a;if(!l||!l.enable)return;const s=(null!==(i=a.velocity)&&void 0!==i?i:0)*e.factor,c=null!==(n=a.decay)&&void 0!==n?n:1;o&&"increasing"!==l.status?(l.value-=s,l.value<0&&(l.status="increasing",l.value+=l.value)):(l.value+=s,o&&l.value>t&&(l.status="decreasing",l.value-=l.value%t)),l.value>t&&(l.value%=t),a.velocity&&1!==c&&(a.velocity*=c)}function d(e,a){var t,o,i;const n=e.gradient;if(n){!function(e,a){var t,o;const i=(null!==(t=a.velocity)&&void 0!==t?t:0)*e.factor,n=2*Math.PI,l=null!==(o=a.decay)&&void 0!==o?o:1;a.enable&&("increasing"===a.status?(a.value+=i,a.value>n&&(a.value-=n)):(a.value-=i,a.value<0&&(a.value+=n)),a.velocity&&1!==l&&(a.velocity*=l))}(a,n.angle);for(const l of n.colors)void 0!==(null===(t=e.color)||void 0===t?void 0:t.h)&&u(a,l.value.h,360,!1),void 0!==(null===(o=e.color)||void 0===o?void 0:o.s)&&u(a,l.value.s,100,!0),void 0!==(null===(i=e.color)||void 0===i?void 0:i.l)&&u(a,l.value.l,100,!0),l.opacity&&r(a,l.opacity)}}class v{getColorStyles(a,t,o,i){var n,l;const s=a.gradient;if(!s)return{};const c=s.angle.value,r="radial"===s.type?t.createRadialGradient(0,0,0,0,0,o):t.createLinearGradient(Math.cos(c)*-o,Math.sin(c)*-o,Math.cos(c)*o,Math.sin(c)*o);for(const a of s.colors)r.addColorStop(a.stop,(0,e.getStyleFromHsl)({h:a.value.h.value,s:a.value.s.value,l:a.value.l.value},null!==(l=null===(n=a.opacity)||void 0===n?void 0:n.value)&&void 0!==l?l:i));return{fill:r}}init(a){const t=(0,e.itemFromSingleOrMultiple)(a.options.gradient);if(!t)return;a.gradient={angle:{value:t.angle.value,enable:t.angle.animation.enable,velocity:(0,e.getRangeValue)(t.angle.animation.speed)/360*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(t.angle.animation.decay)},type:t.type,colors:[]};let o=t.angle.direction;if("random"===o){o=Math.floor(2*(0,e.getRandom)())>0?"counter-clockwise":"clockwise"}switch(o){case"counter-clockwise":case"counterClockwise":a.gradient.angle.status="decreasing";break;case"clockwise":a.gradient.angle.status="increasing"}const i=a.options.reduceDuplicates;for(const o of t.colors){const t=(0,e.rangeColorToHsl)(o.value,a.id,i);if(!t)continue;const n=(0,e.getHslAnimationFromHsl)(t,o.value.animation,a.container.retina.reduceFactor),l={stop:o.stop,value:n,opacity:o.opacity?{enable:o.opacity.animation.enable,max:(0,e.getRangeMax)(o.opacity.value),min:(0,e.getRangeMin)(o.opacity.value),status:"increasing",value:(0,e.getRangeValue)(o.opacity.value),velocity:(0,e.getRangeValue)(o.opacity.animation.speed)/100*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(o.opacity.animation.decay)}:void 0};if(o.opacity&&l.opacity){const a=o.opacity.value;l.opacity.min=(0,e.getRangeMin)(a),l.opacity.max=(0,e.getRangeMax)(a);switch(o.opacity.animation.startValue){case"min":l.opacity.value=l.opacity.min,l.opacity.status="increasing";break;case"random":l.opacity.value=(0,e.randomInRange)(l.opacity),l.opacity.status=(0,e.getRandom)()>=.5?"increasing":"decreasing";break;default:l.opacity.value=l.opacity.max,l.opacity.status="decreasing"}}a.gradient.colors.push(l)}}isEnabled(e){var a,t,o;return!e.destroyed&&!e.spawning&&((null===(a=e.gradient)||void 0===a?void 0:a.angle.enable)||null!==(o=null===(t=e.gradient)||void 0===t?void 0:t.colors.some((e=>e.value.h.enable||e.value.s.enable||e.value.l.enable)))&&void 0!==o&&o)}loadOptions(a,...t){for(const o of t){if(!(null==o?void 0:o.gradient))continue;const t=o.gradient;t&&(a.gradient=(0,e.executeOnSingleOrMultiple)(t,(e=>{const a=new c;return a.load(e),a})))}}update(e,a){d(e,a)}}function p(e){e.addParticleUpdater("gradient",(()=>new v))}})(),i})()));
+!function(e,a){if("object"==typeof exports&&"object"==typeof module)module.exports=a(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],a);else{var t="object"==typeof exports?a(require("@tsparticles/engine")):a(e.window);for(var i in t)("object"==typeof exports?exports:e)[i]=t[i]}}(this,(e=>(()=>{"use strict";var a={533:a=>{a.exports=e}},t={};function i(e){var n=t[e];if(void 0!==n)return n.exports;var o=t[e]={exports:{}};return a[e](o,o.exports,i),o.exports}i.d=(e,a)=>{for(var t in a)i.o(a,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:a[t]})},i.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{loadGradientUpdater:()=>y});var e=i(533);class a{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1,this.startValue="random"}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.sync&&(this.sync=a.sync),void 0!==a.startValue&&(this.startValue=a.startValue),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)))}}class t{constructor(){this.value=0,this.animation=new a}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)))}}class o{constructor(){this.stop=0,this.value=new e.AnimatableColor}load(a){a&&(void 0!==a.stop&&(this.stop=a.stop),this.value=e.AnimatableColor.create(this.value,a.value),void 0!==a.opacity&&(this.opacity=new t,(0,e.isNumber)(a.opacity)?this.opacity.value=a.opacity:this.opacity.load(a.opacity)))}}class s{constructor(){this.count=0,this.enable=!1,this.speed=0,this.decay=0,this.delay=0,this.sync=!1}load(a){a&&(void 0!==a.count&&(this.count=(0,e.setRangeValue)(a.count)),void 0!==a.enable&&(this.enable=a.enable),void 0!==a.speed&&(this.speed=(0,e.setRangeValue)(a.speed)),void 0!==a.decay&&(this.decay=(0,e.setRangeValue)(a.decay)),void 0!==a.delay&&(this.delay=(0,e.setRangeValue)(a.delay)),void 0!==a.sync&&(this.sync=a.sync))}}class l{constructor(){this.value=0,this.animation=new s,this.direction="clockwise"}load(a){a&&(this.animation.load(a.animation),void 0!==a.value&&(this.value=(0,e.setRangeValue)(a.value)),void 0!==a.direction&&(this.direction=a.direction))}}class c{constructor(){this.angle=new l,this.colors=[],this.type="random"}load(e){e&&(this.angle.load(e.angle),void 0!==e.colors&&(this.colors=e.colors.map((e=>{const a=new o;return a.load(e),a}))),void 0!==e.type&&(this.type=e.type))}}function r(e,a){if(!a.enable)return;const t=a.decay??1;switch(a.status){case"increasing":a.value>=a.max?a.status="decreasing":a.value+=(a.velocity??0)*e.factor;break;case"decreasing":a.value<=a.min?a.status="increasing":a.value-=(a.velocity??0)*e.factor}a.velocity&&1!==t&&(a.velocity*=t)}function u(e,a,t,i){if(!a||!a.enable)return;if(a.time||(a.time=0),(a.delayTime??0)>0&&a.time<(a.delayTime??0)&&(a.time+=e.value),(a.delayTime??0)>0&&a.time<(a.delayTime??0))return;const n=(a.velocity??0)*e.factor,o=a.decay??1;i&&"increasing"!==a.status?(a.value-=n,a.value<0&&(a.status="increasing",a.value+=a.value)):(a.value+=n,i&&a.value>t&&(a.status="decreasing",a.value-=a.value%t)),a.value>t&&(a.value%=t),a.velocity&&1!==o&&(a.velocity*=o)}function d(e,a){const{gradient:t}=e;if(t){!function(e,a){const t=(a.velocity??0)*e.factor,i=2*Math.PI,n=a.decay??1;a.enable&&("increasing"===a.status?(a.value+=t,a.value>i&&(a.value-=i)):(a.value-=t,a.value<0&&(a.value+=i)),a.velocity&&1!==n&&(a.velocity*=n))}(a,t.angle);for(const i of t.colors)void 0!==e.color?.h&&u(a,i.value.h,360,!1),void 0!==e.color?.s&&u(a,i.value.s,100,!0),void 0!==e.color?.l&&u(a,i.value.l,100,!0),i.opacity&&r(a,i.opacity)}}class v{getColorStyles(a,t,i,n){const o=a.gradient;if(!o)return{};const s=o.angle.value,l="radial"===o.type?t.createRadialGradient(0,0,0,0,0,i):t.createLinearGradient(Math.cos(s)*-i,Math.sin(s)*-i,Math.cos(s)*i,Math.sin(s)*i);for(const{stop:a,value:t,opacity:i}of o.colors)l.addColorStop(a,(0,e.getStyleFromHsl)({h:t.h.value,s:t.s.value,l:t.l.value},i?.value??n));return{fill:l}}init(a){const t=(0,e.itemFromSingleOrMultiple)(a.options.gradient);if(!t)return;const{angle:i}=t;a.gradient={angle:{value:(0,e.getRangeValue)(i.value),enable:i.animation.enable,velocity:(0,e.getRangeValue)(i.animation.speed)/360*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(i.animation.decay),delayTime:1e3*(0,e.getRangeValue)(i.animation.delay),time:0},type:t.type,colors:[]};let n=t.angle.direction;switch("random"===n&&(n=(0,e.getRandom)()>.5?"counter-clockwise":"clockwise"),n){case"counter-clockwise":case"counterClockwise":a.gradient.angle.status="decreasing";break;case"clockwise":a.gradient.angle.status="increasing"}const o=a.options.reduceDuplicates;for(const i of t.colors){const t=(0,e.rangeColorToHsl)(i.value,a.id,o);if(!t)continue;const n=(0,e.getHslAnimationFromHsl)(t,i.value.animation,a.container.retina.reduceFactor),s={stop:i.stop,value:n,opacity:i.opacity?{enable:i.opacity.animation.enable,max:(0,e.getRangeMax)(i.opacity.value),min:(0,e.getRangeMin)(i.opacity.value),status:"increasing",value:(0,e.getRangeValue)(i.opacity.value),velocity:(0,e.getRangeValue)(i.opacity.animation.speed)/100*a.container.retina.reduceFactor,decay:1-(0,e.getRangeValue)(i.opacity.animation.decay),delayTime:1e3*(0,e.getRangeValue)(i.opacity.animation.delay),time:0}:void 0},{opacity:l}=s;if(i.opacity&&l){const a=i.opacity.value;l.min=(0,e.getRangeMin)(a),l.max=(0,e.getRangeMax)(a);switch(i.opacity.animation.startValue){case"min":l.value=l.min,l.status="increasing";break;case"max":l.value=l.max,l.status="decreasing";break;default:l.value=(0,e.randomInRange)(l),l.status=(0,e.getRandom)()>=.5?"increasing":"decreasing"}}a.gradient.colors.push(s)}}isEnabled(e){return!e.destroyed&&!e.spawning&&(e.gradient?.angle.enable||(e.gradient?.colors.some((e=>e.value.h.enable||e.value.s.enable||e.value.l.enable))??!1))}loadOptions(a,...t){for(const i of t){if(!i?.gradient)continue;const t=i.gradient;t&&(a.gradient=(0,e.executeOnSingleOrMultiple)(t,(e=>{const a=new c;return a.load(e),a})))}}update(e,a){d(e,a)}}async function y(e,a=!0){await e.addParticleUpdater("gradient",(()=>new v),a)}})(),n})()));

package/tsparticles.updater.gradient.min.js.LICENSE.txt

@@ -1,8 +1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.0
- */
+/*! tsParticles Gradient Updater v3.0.0-beta.0 by Matteo Bruni */

package/types/GradientUpdater.d.ts

@@ -1,27 +1,5 @@
-import { GradientType } from "@tsparticles/engine";
-import type { IDelta, IParticleColorStyle, IParticleHslAnimation, IParticleNumericValueAnimation, IParticleUpdater, IParticleValueAnimation, IParticlesOptions, Particle, ParticlesOptions, RecursivePartial, SingleOrMultiple } from "@tsparticles/engine";
-import { AnimatableGradient } from "./Options/Classes/AnimatableGradient";
-import type { IAnimatableGradient } from "./Options/Interfaces/IAnimatableGradient";
-interface IParticleGradientColorAnimation {
-    opacity?: IParticleNumericValueAnimation;
-    stop: number;
-    value: IParticleHslAnimation;
-}
-interface IParticleGradientAnimation {
-    angle: IParticleValueAnimation<number>;
-    colors: IParticleGradientColorAnimation[];
-    type: GradientType;
-}
-type GradientParticle = Particle & {
-    gradient?: IParticleGradientAnimation;
-    options: GradientParticlesOptions;
-};
-type IGradientParticlesOptions = IParticlesOptions & {
-    gradient?: SingleOrMultiple<IAnimatableGradient>;
-};
-type GradientParticlesOptions = ParticlesOptions & {
-    gradient?: SingleOrMultiple<AnimatableGradient>;
-};
+import { type IDelta, type IParticleColorStyle, type IParticleUpdater, type RecursivePartial } from "@tsparticles/engine";
+import type { GradientParticle, GradientParticlesOptions, IGradientParticlesOptions } from "./Types";
 export declare class GradientUpdater implements IParticleUpdater {
     getColorStyles(particle: GradientParticle, context: CanvasRenderingContext2D, radius: number, opacity: number): IParticleColorStyle;
     init(particle: GradientParticle): void;
@@ -29,4 +7,3 @@ export declare class GradientUpdater implements IParticleUpdater {
     loadOptions(options: GradientParticlesOptions, ...sources: (RecursivePartial<IGradientParticlesOptions> | undefined)[]): void;
     update(particle: GradientParticle, delta: IDelta): void;
 }
-export {};

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

@@ -1,7 +1,6 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
+import { GradientType, type IOptionLoader, type RecursivePartial } from "@tsparticles/engine";
 import { AnimatableGradientColor } from "./AnimatableGradientColor";
 import { GradientAngle } from "./GradientAngle";
-import { GradientType } from "@tsparticles/engine";
 import type { IAnimatableGradient } from "../Interfaces/IAnimatableGradient";
 export declare class AnimatableGradient implements IAnimatableGradient, IOptionLoader<IAnimatableGradient> {
     angle: GradientAngle;

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

@@ -1,5 +1,4 @@
-import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import { AnimatableColor } from "@tsparticles/engine";
+import { AnimatableColor, type IOptionLoader, type RecursivePartial } from "@tsparticles/engine";
 import { GradientColorOpacity } from "./GradientColorOpacity";
 import type { IAnimatableGradientColor } from "../Interfaces/IOptionsGradient";
 export declare class AnimatableGradientColor implements IAnimatableGradientColor, IOptionLoader<IAnimatableGradientColor> {

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

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

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

@@ -1,7 +1,8 @@
-import type { IAnimation, IOptionLoader, RangeValue, RecursivePartial } from "@tsparticles/engine";
+import { type IAnimation, type IOptionLoader, type RangeValue, type RecursivePartial } from "@tsparticles/engine";
 export declare class GradientAngleAnimation implements IAnimation, IOptionLoader<IAnimation> {
     count: RangeValue;
     decay: RangeValue;
+    delay: RangeValue;
     enable: boolean;
     speed: RangeValue;
     sync: boolean;

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

@@ -1,4 +1,4 @@
-import type { IAnimatable, IAnimation, IOptionLoader, RangeValue, RecursivePartial } from "@tsparticles/engine";
+import { type IAnimatable, type IAnimation, type IOptionLoader, type RangeValue, type RecursivePartial } from "@tsparticles/engine";
 import { GradientColorOpacityAnimation } from "./GradientColorOpacityAnimation";
 import type { IGradientColorOpacity } from "../Interfaces/Gradients";
 import type { IGradientColorOpacityAnimation } from "../Interfaces/IOptionsGradient";

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

@@ -1,9 +1,9 @@
-import type { IOptionLoader, RangeValue, RecursivePartial } from "@tsparticles/engine";
-import { StartValueType } from "@tsparticles/engine";
+import { type IOptionLoader, type RangeValue, type RecursivePartial, StartValueType } from "@tsparticles/engine";
 import type { IGradientColorOpacityAnimation } from "../Interfaces/IOptionsGradient";
 export declare class GradientColorOpacityAnimation implements IGradientColorOpacityAnimation, IOptionLoader<IGradientColorOpacityAnimation> {
     count: RangeValue;
     decay: RangeValue;
+    delay: RangeValue;
     enable: boolean;
     speed: RangeValue;
     startValue: StartValueType | keyof typeof StartValueType;

package/types/Options/Interfaces/Gradients.d.ts

@@ -9,7 +9,7 @@ export interface IGradientColor {
 }
 export interface IGradientAngle {
     direction: RotateDirection | keyof typeof RotateDirection | RotateDirectionAlt;
-    value: number;
+    value: RangeValue;
 }
 export interface IGradient {
     angle?: IGradientAngle;

package/types/Types.d.ts

@@ -0,0 +1,23 @@
+import type { GradientType, IParticleHslAnimation, IParticleNumericValueAnimation, IParticleValueAnimation, IParticlesOptions, Particle, ParticlesOptions, SingleOrMultiple } from "@tsparticles/engine";
+import type { AnimatableGradient } from "./Options/Classes/AnimatableGradient";
+import type { IAnimatableGradient } from "./Options/Interfaces/IAnimatableGradient";
+export interface IParticleGradientColorAnimation {
+    opacity?: IParticleNumericValueAnimation;
+    stop: number;
+    value: IParticleHslAnimation;
+}
+export interface IParticleGradientAnimation {
+    angle: IParticleValueAnimation<number>;
+    colors: IParticleGradientColorAnimation[];
+    type: GradientType;
+}
+export type GradientParticle = Particle & {
+    gradient?: IParticleGradientAnimation;
+    options: GradientParticlesOptions;
+};
+export type IGradientParticlesOptions = IParticlesOptions & {
+    gradient?: SingleOrMultiple<IAnimatableGradient>;
+};
+export type GradientParticlesOptions = ParticlesOptions & {
+    gradient?: SingleOrMultiple<AnimatableGradient>;
+};

package/types/Utils.d.ts

@@ -0,0 +1,3 @@
+import { type IDelta } from "@tsparticles/engine";
+import type { GradientParticle } from "./Types";
+export declare function updateGradient(particle: GradientParticle, delta: IDelta): void;

package/types/index.d.ts

@@ -1,2 +1,2 @@
 import type { Engine } from "@tsparticles/engine";
-export declare function loadGradientUpdater(engine: Engine): void;
+export declare function loadGradientUpdater(engine: Engine, refresh?: boolean): Promise<void>;