tsparticles-updater-stroke-color - npm Package Compare versions

Comparing version 2.6.0 to 2.7.0

browser/StrokeColorUpdater.js

@@ -1,6 +0,11 @@
-import { getHslAnimationFromHsl, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "tsparticles-engine";
+import { getHslAnimationFromHsl, getRangeValue, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "tsparticles-engine";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a, _b;
     const colorValue = value;
-    if (!colorValue || !colorValue.enable) {
+    if (!colorValue ||
+        !colorValue.enable ||
+        (colorValue.loops !== undefined &&
+            colorValue.maxLoops !== undefined &&
+            colorValue.maxLoops > 0 &&
+            colorValue.loops >= colorValue.maxLoops)) {
         return;
@@ -11,5 +16,11 @@ }
         colorValue.value += velocity;
-        if (decrease && colorValue.value > max) {
-            colorValue.status = "decreasing";
-            colorValue.value -= colorValue.value % max;
+        if (colorValue.value > max) {
+            if (!colorValue.loops) {
+                colorValue.loops = 0;
+            }
+            colorValue.loops++;
+            if (decrease) {
+                colorValue.status = "decreasing";
+                colorValue.value -= colorValue.value % max;
+            }
         }
@@ -20,2 +31,6 @@ }
         if (colorValue.value < 0) {
+            if (!colorValue.loops) {
+                colorValue.loops = 0;
+            }
+            colorValue.loops++;
             colorValue.status = "increasing";
@@ -33,17 +48,16 @@ colorValue.value += colorValue.value;
 function updateStrokeColor(particle, delta) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
+    if (!particle.strokeColor || !particle.strokeAnimation) {
         return;
     }
-    const animationOptions = particle.stroke.color.animation, h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
+    const h = particle.strokeColor.h;
     if (h) {
-        updateColorValue(delta, h, animationOptions.h, 360, false);
+        updateColorValue(delta, h, particle.strokeAnimation.h, 360, false);
     }
-    const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
+    const s = particle.strokeColor.s;
     if (s) {
-        updateColorValue(delta, s, animationOptions.s, 100, true);
+        updateColorValue(delta, s, particle.strokeAnimation.s, 100, true);
     }
-    const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
+    const l = particle.strokeColor.l;
     if (l) {
-        updateColorValue(delta, l, animationOptions.l, 100, true);
+        updateColorValue(delta, l, particle.strokeAnimation.l, 100, true);
     }
@@ -56,20 +70,22 @@ }
     init(particle) {
-        var _a, _b;
+        var _a, _b, _c;
         const container = this.container;
-        particle.stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
-        particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
-        const strokeHslColor = (_a = rangeColorToHsl(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+        const stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
+        particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
+        particle.strokeOpacity = getRangeValue((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1);
+        particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation;
+        const strokeHslColor = (_c = rangeColorToHsl(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor();
         if (strokeHslColor) {
-            particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+            particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
         }
     }
     isEnabled(particle) {
-        var _a, _b, _c, _d;
-        const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
+        var _a, _b, _c;
+        const color = particle.strokeAnimation;
         return (!particle.destroyed &&
             !particle.spawning &&
             !!color &&
-            ((((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable) ||
-                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable) ||
-                (((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable)));
+            ((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) ||
+                (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) ||
+                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable)));
     }
@@ -76,0 +92,0 @@ update(particle, delta) {

cjs/StrokeColorUpdater.js

@@ -8,3 +8,8 @@ "use strict";
     const colorValue = value;
-    if (!colorValue || !colorValue.enable) {
+    if (!colorValue ||
+        !colorValue.enable ||
+        (colorValue.loops !== undefined &&
+            colorValue.maxLoops !== undefined &&
+            colorValue.maxLoops > 0 &&
+            colorValue.loops >= colorValue.maxLoops)) {
         return;
@@ -15,5 +20,11 @@ }
         colorValue.value += velocity;
-        if (decrease && colorValue.value > max) {
-            colorValue.status = "decreasing";
-            colorValue.value -= colorValue.value % max;
+        if (colorValue.value > max) {
+            if (!colorValue.loops) {
+                colorValue.loops = 0;
+            }
+            colorValue.loops++;
+            if (decrease) {
+                colorValue.status = "decreasing";
+                colorValue.value -= colorValue.value % max;
+            }
         }
@@ -24,2 +35,6 @@ }
         if (colorValue.value < 0) {
+            if (!colorValue.loops) {
+                colorValue.loops = 0;
+            }
+            colorValue.loops++;
             colorValue.status = "increasing";
@@ -37,17 +52,16 @@ colorValue.value += colorValue.value;
 function updateStrokeColor(particle, delta) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
+    if (!particle.strokeColor || !particle.strokeAnimation) {
         return;
     }
-    const animationOptions = particle.stroke.color.animation, h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
+    const h = particle.strokeColor.h;
     if (h) {
-        updateColorValue(delta, h, animationOptions.h, 360, false);
+        updateColorValue(delta, h, particle.strokeAnimation.h, 360, false);
     }
-    const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
+    const s = particle.strokeColor.s;
     if (s) {
-        updateColorValue(delta, s, animationOptions.s, 100, true);
+        updateColorValue(delta, s, particle.strokeAnimation.s, 100, true);
     }
-    const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
+    const l = particle.strokeColor.l;
     if (l) {
-        updateColorValue(delta, l, animationOptions.l, 100, true);
+        updateColorValue(delta, l, particle.strokeAnimation.l, 100, true);
     }
@@ -60,20 +74,22 @@ }
     init(particle) {
-        var _a, _b;
+        var _a, _b, _c;
         const container = this.container;
-        particle.stroke = (0, tsparticles_engine_1.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
-        particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
-        const strokeHslColor = (_a = (0, tsparticles_engine_1.rangeColorToHsl)(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+        const stroke = (0, tsparticles_engine_1.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
+        particle.strokeWidth = (0, tsparticles_engine_1.getRangeValue)(stroke.width) * container.retina.pixelRatio;
+        particle.strokeOpacity = (0, tsparticles_engine_1.getRangeValue)((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1);
+        particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation;
+        const strokeHslColor = (_c = (0, tsparticles_engine_1.rangeColorToHsl)(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor();
         if (strokeHslColor) {
-            particle.strokeColor = (0, tsparticles_engine_1.getHslAnimationFromHsl)(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+            particle.strokeColor = (0, tsparticles_engine_1.getHslAnimationFromHsl)(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
         }
     }
     isEnabled(particle) {
-        var _a, _b, _c, _d;
-        const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
+        var _a, _b, _c;
+        const color = particle.strokeAnimation;
         return (!particle.destroyed &&
             !particle.spawning &&
             !!color &&
-            ((((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable) ||
-                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable) ||
-                (((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable)));
+            ((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) ||
+                (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) ||
+                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable)));
     }
@@ -80,0 +96,0 @@ update(particle, delta) {

esm/StrokeColorUpdater.js

@@ -1,6 +0,11 @@
-import { getHslAnimationFromHsl, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "tsparticles-engine";
+import { getHslAnimationFromHsl, getRangeValue, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "tsparticles-engine";
 function updateColorValue(delta, value, valueAnimation, max, decrease) {
     var _a, _b;
     const colorValue = value;
-    if (!colorValue || !colorValue.enable) {
+    if (!colorValue ||
+        !colorValue.enable ||
+        (colorValue.loops !== undefined &&
+            colorValue.maxLoops !== undefined &&
+            colorValue.maxLoops > 0 &&
+            colorValue.loops >= colorValue.maxLoops)) {
         return;
@@ -11,5 +16,11 @@ }
         colorValue.value += velocity;
-        if (decrease && colorValue.value > max) {
-            colorValue.status = "decreasing";
-            colorValue.value -= colorValue.value % max;
+        if (colorValue.value > max) {
+            if (!colorValue.loops) {
+                colorValue.loops = 0;
+            }
+            colorValue.loops++;
+            if (decrease) {
+                colorValue.status = "decreasing";
+                colorValue.value -= colorValue.value % max;
+            }
         }
@@ -20,2 +31,6 @@ }
         if (colorValue.value < 0) {
+            if (!colorValue.loops) {
+                colorValue.loops = 0;
+            }
+            colorValue.loops++;
             colorValue.status = "increasing";
@@ -33,17 +48,16 @@ colorValue.value += colorValue.value;
 function updateStrokeColor(particle, delta) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
+    if (!particle.strokeColor || !particle.strokeAnimation) {
         return;
     }
-    const animationOptions = particle.stroke.color.animation, h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
+    const h = particle.strokeColor.h;
     if (h) {
-        updateColorValue(delta, h, animationOptions.h, 360, false);
+        updateColorValue(delta, h, particle.strokeAnimation.h, 360, false);
     }
-    const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
+    const s = particle.strokeColor.s;
     if (s) {
-        updateColorValue(delta, s, animationOptions.s, 100, true);
+        updateColorValue(delta, s, particle.strokeAnimation.s, 100, true);
     }
-    const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
+    const l = particle.strokeColor.l;
     if (l) {
-        updateColorValue(delta, l, animationOptions.l, 100, true);
+        updateColorValue(delta, l, particle.strokeAnimation.l, 100, true);
     }
@@ -56,20 +70,22 @@ }
     init(particle) {
-        var _a, _b;
+        var _a, _b, _c;
         const container = this.container;
-        particle.stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
-        particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
-        const strokeHslColor = (_a = rangeColorToHsl(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+        const stroke = itemFromSingleOrMultiple(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
+        particle.strokeWidth = getRangeValue(stroke.width) * container.retina.pixelRatio;
+        particle.strokeOpacity = getRangeValue((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1);
+        particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation;
+        const strokeHslColor = (_c = rangeColorToHsl(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor();
         if (strokeHslColor) {
-            particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+            particle.strokeColor = getHslAnimationFromHsl(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
         }
     }
     isEnabled(particle) {
-        var _a, _b, _c, _d;
-        const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
+        var _a, _b, _c;
+        const color = particle.strokeAnimation;
         return (!particle.destroyed &&
             !particle.spawning &&
             !!color &&
-            ((((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable) ||
-                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable) ||
-                (((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable)));
+            ((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) ||
+                (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) ||
+                (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable)));
     }
@@ -76,0 +92,0 @@ update(particle, delta) {

package.json

 {
   "name": "tsparticles-updater-stroke-color",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "tsParticles particles stroke color updater",
@@ -77,4 +77,4 @@ "homepage": "https://particles.js.org",
   "dependencies": {
-    "tsparticles-engine": "^2.6.0"
+    "tsparticles-engine": "^2.7.0"
   }
 }

tsparticles.updater.stroke-color.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.6.0
+ * v2.7.0
  */
@@ -105,3 +105,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
   const colorValue = value;
-  if (!colorValue || !colorValue.enable) {
+  if (!colorValue || !colorValue.enable || colorValue.loops !== undefined && colorValue.maxLoops !== undefined && colorValue.maxLoops > 0 && colorValue.loops >= colorValue.maxLoops) {
     return;
@@ -114,5 +114,11 @@ }
     colorValue.value += velocity;
-    if (decrease && colorValue.value > max) {
-      colorValue.status = "decreasing";
-      colorValue.value -= colorValue.value % max;
+    if (colorValue.value > max) {
+      if (!colorValue.loops) {
+        colorValue.loops = 0;
+      }
+      colorValue.loops++;
+      if (decrease) {
+        colorValue.status = "decreasing";
+        colorValue.value -= colorValue.value % max;
+      }
     }
@@ -122,2 +128,6 @@ } else {
     if (colorValue.value < 0) {
+      if (!colorValue.loops) {
+        colorValue.loops = 0;
+      }
+      colorValue.loops++;
       colorValue.status = "increasing";
@@ -135,18 +145,16 @@ colorValue.value += colorValue.value;
 function updateStrokeColor(particle, delta) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-  if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
+  if (!particle.strokeColor || !particle.strokeAnimation) {
     return;
   }
-  const animationOptions = particle.stroke.color.animation,
-    h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
+  const h = particle.strokeColor.h;
   if (h) {
-    updateColorValue(delta, h, animationOptions.h, 360, false);
+    updateColorValue(delta, h, particle.strokeAnimation.h, 360, false);
   }
-  const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
+  const s = particle.strokeColor.s;
   if (s) {
-    updateColorValue(delta, s, animationOptions.s, 100, true);
+    updateColorValue(delta, s, particle.strokeAnimation.s, 100, true);
   }
-  const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
+  const l = particle.strokeColor.l;
   if (l) {
-    updateColorValue(delta, l, animationOptions.l, 100, true);
+    updateColorValue(delta, l, particle.strokeAnimation.l, 100, true);
   }
@@ -159,15 +167,17 @@ }
   init(particle) {
-    var _a, _b;
+    var _a, _b, _c;
     const container = this.container;
-    particle.stroke = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
-    particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
-    const strokeHslColor = (_a = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.rangeColorToHsl)(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+    const stroke = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
+    particle.strokeWidth = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getRangeValue)(stroke.width) * container.retina.pixelRatio;
+    particle.strokeOpacity = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getRangeValue)((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1);
+    particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation;
+    const strokeHslColor = (_c = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.rangeColorToHsl)(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor();
     if (strokeHslColor) {
-      particle.strokeColor = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getHslAnimationFromHsl)(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+      particle.strokeColor = (0,external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.getHslAnimationFromHsl)(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
     }
   }
   isEnabled(particle) {
-    var _a, _b, _c, _d;
-    const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
-    return !particle.destroyed && !particle.spawning && !!color && (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable || ((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable);
+    var _a, _b, _c;
+    const color = particle.strokeAnimation;
+    return !particle.destroyed && !particle.spawning && !!color && (((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable || ((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable || ((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable);
   }
@@ -174,0 +184,0 @@ update(particle, delta) {

tsparticles.updater.stroke-color.min.js

 /*! For license information please see tsparticles.updater.stroke-color.min.js.LICENSE.txt */
-!function(o,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("tsparticles-engine"));else if("function"==typeof define&&define.amd)define(["tsparticles-engine"],e);else{var t="object"==typeof exports?e(require("tsparticles-engine")):e(o.window);for(var r in t)("object"==typeof exports?exports:o)[r]=t[r]}}(this,(o=>(()=>{"use strict";var e={961:e=>{e.exports=o}},t={};function r(o){var i=t[o];if(void 0!==i)return i.exports;var l=t[o]={exports:{}};return e[o](l,l.exports,r),l.exports}r.d=(o,e)=>{for(var t in e)r.o(e,t)&&!r.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},r.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})};var i={};return(()=>{r.r(i),r.d(i,{loadStrokeColorUpdater:()=>l});var o=r(961);function e(e,t,r,i,l){var n,a;const s=t;if(!s||!s.enable)return;const d=(0,o.randomInRange)(r.offset),v=(null!==(n=t.velocity)&&void 0!==n?n:0)*e.factor+3.6*d,u=null!==(a=t.decay)&&void 0!==a?a:1;l&&"increasing"!==s.status?(s.value-=v,s.value<0&&(s.status="increasing",s.value+=s.value)):(s.value+=v,l&&s.value>i&&(s.status="decreasing",s.value-=s.value%i)),s.velocity&&1!==u&&(s.velocity*=u),s.value>i&&(s.value%=i)}class t{constructor(o){this.container=o}init(e){var t,r;const i=this.container;e.stroke=(0,o.itemFromSingleOrMultiple)(e.options.stroke,e.id,e.options.reduceDuplicates),e.strokeWidth=e.stroke.width*i.retina.pixelRatio;const l=null!==(t=(0,o.rangeColorToHsl)(e.stroke.color))&&void 0!==t?t:e.getFillColor();l&&(e.strokeColor=(0,o.getHslAnimationFromHsl)(l,null===(r=e.stroke.color)||void 0===r?void 0:r.animation,i.retina.reduceFactor))}isEnabled(o){var e,t,r,i;const l=null===(e=o.stroke)||void 0===e?void 0:e.color;return!o.destroyed&&!o.spawning&&!!l&&(void 0!==(null===(t=o.strokeColor)||void 0===t?void 0:t.h.value)&&l.animation.h.enable||void 0!==(null===(r=o.strokeColor)||void 0===r?void 0:r.s.value)&&l.animation.s.enable||void 0!==(null===(i=o.strokeColor)||void 0===i?void 0:i.l.value)&&l.animation.l.enable)}update(o,t){this.isEnabled(o)&&function(o,t){var r,i,l,n,a,s,d,v,u,c;if(!(null===(r=o.stroke)||void 0===r?void 0:r.color))return;const p=o.stroke.color.animation,f=null!==(l=null===(i=o.strokeColor)||void 0===i?void 0:i.h)&&void 0!==l?l:null===(n=o.color)||void 0===n?void 0:n.h;f&&e(t,f,p.h,360,!1);const y=null!==(s=null===(a=o.strokeColor)||void 0===a?void 0:a.s)&&void 0!==s?s:null===(d=o.color)||void 0===d?void 0:d.s;y&&e(t,y,p.s,100,!0);const b=null!==(u=null===(v=o.strokeColor)||void 0===v?void 0:v.l)&&void 0!==u?u:null===(c=o.color)||void 0===c?void 0:c.l;b&&e(t,b,p.l,100,!0)}(o,t)}}async function l(o){await o.addParticleUpdater("strokeColor",(o=>new t(o)))}})(),i})()));
+!function(o,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("tsparticles-engine"));else if("function"==typeof define&&define.amd)define(["tsparticles-engine"],e);else{var t="object"==typeof exports?e(require("tsparticles-engine")):e(o.window);for(var r in t)("object"==typeof exports?exports:o)[r]=t[r]}}(this,(o=>(()=>{"use strict";var e={961:e=>{e.exports=o}},t={};function r(o){var i=t[o];if(void 0!==i)return i.exports;var n=t[o]={exports:{}};return e[o](n,n.exports,r),n.exports}r.d=(o,e)=>{for(var t in e)r.o(e,t)&&!r.o(o,t)&&Object.defineProperty(o,t,{enumerable:!0,get:e[t]})},r.o=(o,e)=>Object.prototype.hasOwnProperty.call(o,e),r.r=o=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(o,"__esModule",{value:!0})};var i={};return(()=>{r.r(i),r.d(i,{loadStrokeColorUpdater:()=>n});var o=r(961);function e(e,t,r,i,n){var l,s;const a=t;if(!a||!a.enable||void 0!==a.loops&&void 0!==a.maxLoops&&a.maxLoops>0&&a.loops>=a.maxLoops)return;const u=(0,o.randomInRange)(r.offset),d=(null!==(l=t.velocity)&&void 0!==l?l:0)*e.factor+3.6*u,c=null!==(s=t.decay)&&void 0!==s?s:1;n&&"increasing"!==a.status?(a.value-=d,a.value<0&&(a.loops||(a.loops=0),a.loops++,a.status="increasing",a.value+=a.value)):(a.value+=d,a.value>i&&(a.loops||(a.loops=0),a.loops++,n&&(a.status="decreasing",a.value-=a.value%i))),a.velocity&&1!==c&&(a.velocity*=c),a.value>i&&(a.value%=i)}class t{constructor(o){this.container=o}init(e){var t,r,i;const n=this.container,l=(0,o.itemFromSingleOrMultiple)(e.options.stroke,e.id,e.options.reduceDuplicates);e.strokeWidth=(0,o.getRangeValue)(l.width)*n.retina.pixelRatio,e.strokeOpacity=(0,o.getRangeValue)(null!==(t=l.opacity)&&void 0!==t?t:1),e.strokeAnimation=null===(r=l.color)||void 0===r?void 0:r.animation;const s=null!==(i=(0,o.rangeColorToHsl)(l.color))&&void 0!==i?i:e.getFillColor();s&&(e.strokeColor=(0,o.getHslAnimationFromHsl)(s,e.strokeAnimation,n.retina.reduceFactor))}isEnabled(o){var e,t,r;const i=o.strokeAnimation;return!o.destroyed&&!o.spawning&&!!i&&(void 0!==(null===(e=o.strokeColor)||void 0===e?void 0:e.h.value)&&o.strokeColor.h.enable||void 0!==(null===(t=o.strokeColor)||void 0===t?void 0:t.s.value)&&o.strokeColor.s.enable||void 0!==(null===(r=o.strokeColor)||void 0===r?void 0:r.l.value)&&o.strokeColor.l.enable)}update(o,t){this.isEnabled(o)&&function(o,t){if(!o.strokeColor||!o.strokeAnimation)return;const r=o.strokeColor.h;r&&e(t,r,o.strokeAnimation.h,360,!1);const i=o.strokeColor.s;i&&e(t,i,o.strokeAnimation.s,100,!0);const n=o.strokeColor.l;n&&e(t,n,o.strokeAnimation.l,100,!0)}(o,t)}}async function n(o){await o.addParticleUpdater("strokeColor",(o=>new t(o)))}})(),i})()));

tsparticles.updater.stroke-color.min.js.LICENSE.txt

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.6.0
+ * v2.7.0
  */

types/StrokeColorUpdater.d.ts

@@ -1,8 +0,12 @@
-import type { Container, IDelta, IParticleUpdater, Particle } from "tsparticles-engine";
+import type { Container, HslAnimation, IDelta, IParticleUpdater, Particle } from "tsparticles-engine";
+type StrokeParticle = Particle & {
+    strokeAnimation?: HslAnimation;
+};
 export declare class StrokeColorUpdater implements IParticleUpdater {
     private readonly container;
     constructor(container: Container);
-    init(particle: Particle): void;
-    isEnabled(particle: Particle): boolean;
+    init(particle: StrokeParticle): void;
+    isEnabled(particle: StrokeParticle): boolean;
     update(particle: Particle, delta: IDelta): void;
 }
+export {};

umd/StrokeColorUpdater.js

@@ -17,3 +17,8 @@ (function (factory) {
         const colorValue = value;
-        if (!colorValue || !colorValue.enable) {
+        if (!colorValue ||
+            !colorValue.enable ||
+            (colorValue.loops !== undefined &&
+                colorValue.maxLoops !== undefined &&
+                colorValue.maxLoops > 0 &&
+                colorValue.loops >= colorValue.maxLoops)) {
             return;
@@ -24,5 +29,11 @@ }
             colorValue.value += velocity;
-            if (decrease && colorValue.value > max) {
-                colorValue.status = "decreasing";
-                colorValue.value -= colorValue.value % max;
+            if (colorValue.value > max) {
+                if (!colorValue.loops) {
+                    colorValue.loops = 0;
+                }
+                colorValue.loops++;
+                if (decrease) {
+                    colorValue.status = "decreasing";
+                    colorValue.value -= colorValue.value % max;
+                }
             }
@@ -33,2 +44,6 @@ }
             if (colorValue.value < 0) {
+                if (!colorValue.loops) {
+                    colorValue.loops = 0;
+                }
+                colorValue.loops++;
                 colorValue.status = "increasing";
@@ -46,17 +61,16 @@ colorValue.value += colorValue.value;
     function updateStrokeColor(particle, delta) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        if (!((_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color)) {
+        if (!particle.strokeColor || !particle.strokeAnimation) {
             return;
         }
-        const animationOptions = particle.stroke.color.animation, h = (_c = (_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h) !== null && _c !== void 0 ? _c : (_d = particle.color) === null || _d === void 0 ? void 0 : _d.h;
+        const h = particle.strokeColor.h;
         if (h) {
-            updateColorValue(delta, h, animationOptions.h, 360, false);
+            updateColorValue(delta, h, particle.strokeAnimation.h, 360, false);
         }
-        const s = (_f = (_e = particle.strokeColor) === null || _e === void 0 ? void 0 : _e.s) !== null && _f !== void 0 ? _f : (_g = particle.color) === null || _g === void 0 ? void 0 : _g.s;
+        const s = particle.strokeColor.s;
         if (s) {
-            updateColorValue(delta, s, animationOptions.s, 100, true);
+            updateColorValue(delta, s, particle.strokeAnimation.s, 100, true);
         }
-        const l = (_j = (_h = particle.strokeColor) === null || _h === void 0 ? void 0 : _h.l) !== null && _j !== void 0 ? _j : (_k = particle.color) === null || _k === void 0 ? void 0 : _k.l;
+        const l = particle.strokeColor.l;
         if (l) {
-            updateColorValue(delta, l, animationOptions.l, 100, true);
+            updateColorValue(delta, l, particle.strokeAnimation.l, 100, true);
         }
@@ -69,20 +83,22 @@ }
         init(particle) {
-            var _a, _b;
+            var _a, _b, _c;
             const container = this.container;
-            particle.stroke = (0, tsparticles_engine_1.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
-            particle.strokeWidth = particle.stroke.width * container.retina.pixelRatio;
-            const strokeHslColor = (_a = (0, tsparticles_engine_1.rangeColorToHsl)(particle.stroke.color)) !== null && _a !== void 0 ? _a : particle.getFillColor();
+            const stroke = (0, tsparticles_engine_1.itemFromSingleOrMultiple)(particle.options.stroke, particle.id, particle.options.reduceDuplicates);
+            particle.strokeWidth = (0, tsparticles_engine_1.getRangeValue)(stroke.width) * container.retina.pixelRatio;
+            particle.strokeOpacity = (0, tsparticles_engine_1.getRangeValue)((_a = stroke.opacity) !== null && _a !== void 0 ? _a : 1);
+            particle.strokeAnimation = (_b = stroke.color) === null || _b === void 0 ? void 0 : _b.animation;
+            const strokeHslColor = (_c = (0, tsparticles_engine_1.rangeColorToHsl)(stroke.color)) !== null && _c !== void 0 ? _c : particle.getFillColor();
             if (strokeHslColor) {
-                particle.strokeColor = (0, tsparticles_engine_1.getHslAnimationFromHsl)(strokeHslColor, (_b = particle.stroke.color) === null || _b === void 0 ? void 0 : _b.animation, container.retina.reduceFactor);
+                particle.strokeColor = (0, tsparticles_engine_1.getHslAnimationFromHsl)(strokeHslColor, particle.strokeAnimation, container.retina.reduceFactor);
             }
         }
         isEnabled(particle) {
-            var _a, _b, _c, _d;
-            const color = (_a = particle.stroke) === null || _a === void 0 ? void 0 : _a.color;
+            var _a, _b, _c;
+            const color = particle.strokeAnimation;
             return (!particle.destroyed &&
                 !particle.spawning &&
                 !!color &&
-                ((((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.h.value) !== undefined && color.animation.h.enable) ||
-                    (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.s.value) !== undefined && color.animation.s.enable) ||
-                    (((_d = particle.strokeColor) === null || _d === void 0 ? void 0 : _d.l.value) !== undefined && color.animation.l.enable)));
+                ((((_a = particle.strokeColor) === null || _a === void 0 ? void 0 : _a.h.value) !== undefined && particle.strokeColor.h.enable) ||
+                    (((_b = particle.strokeColor) === null || _b === void 0 ? void 0 : _b.s.value) !== undefined && particle.strokeColor.s.enable) ||
+                    (((_c = particle.strokeColor) === null || _c === void 0 ? void 0 : _c.l.value) !== undefined && particle.strokeColor.l.enable)));
         }
@@ -89,0 +105,0 @@ update(particle, delta) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

314776

increased by0.17%

Lines of code

640

increased by13.68%

Dependency changes

• Updatedtsparticles-engine@^2.7.0