@tsparticles/engine 4.0.0-alpha.26 → 4.0.0-alpha.27

package/umd/Core/Canvas.js

@@ -175,14 +175,14 @@
             if (radius <= Constants_js_1.minimumSize) {
                 return;
             }
-            const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
+            const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor();
             let [fColor, sColor] = this._getPluginParticleColors(particle);
             fColor ??= pfColor;
             sColor ??= psColor;
             if (!fColor && !sColor) {
                 return;
             }
-            const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, { opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, container.hdr, opacity) : undefined, stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, container.hdr, strokeOpacity) : fill;
+            const container = this.container, zIndexOptions = particle.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - particle.zIndexFactor, { fillOpacity, opacity, strokeOpacity } = particle.getOpacity(), transform = this._reusableTransform, colorStyles = this._reusableColorStyles, fill = fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, container.hdr, fillOpacity * opacity) : undefined, stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, container.hdr, strokeOpacity * opacity) : fill;
             transform.a = transform.b = transform.c = transform.d = undefined;
             colorStyles.fill = fill;
             colorStyles.stroke = stroke;
@@ -369,6 +369,9 @@
                 willReadFrequently: false,
             };
             this._context = this.element.getContext("2d", this._canvasSettings);
+            if (this._context) {
+                this._context.globalCompositeOperation = Constants_js_1.defaultCompositeValue;
+            }
             this._safeMutationObserver(obs => {
                 obs.disconnect();
             });
@@ -526,7 +529,7 @@
                 this._resetOriginalStyle();
             }
             for (const key in options.style) {
-                if (!key || !Object.hasOwn(options.style, key)) {
+                if (!key || !(key in options.style)) {
                     continue;
                 }
                 const value = options.style[key];

package/umd/Core/Engine.js

@@ -106,6 +106,7 @@ var __importStar = (this && this.__importStar) || (function () {
             shapes: new Map(),
             updaters: new Map(),
         };
+        palettes = new Map();
         plugins = [];
         presets = new Map();
         shapeDrawers = new Map();
@@ -129,7 +130,7 @@ var __importStar = (this && this.__importStar) || (function () {
             return this._domArray;
         }
         get version() {
-            return "4.0.0-alpha.26";
+            return "4.0.0-alpha.27";
         }
         addColorManager(name, manager) {
             this.colorManagers.set(name, manager);
@@ -151,6 +152,9 @@ var __importStar = (this && this.__importStar) || (function () {
         addEventListener(type, listener) {
             this._eventDispatcher.addEventListener(type, listener);
         }
+        addPalette(name, palette) {
+            this.palettes.set(name, palette);
+        }
         addParticleUpdater(name, updaterInitializer) {
             this.initializers.updaters.set(name, updaterInitializer);
         }
@@ -191,6 +195,9 @@ var __importStar = (this && this.__importStar) || (function () {
         getEffectDrawers(container, force = false) {
             return (0, Utils_js_1.getItemMapFromInitializer)(container, this.effectDrawers, this.initializers.effects, force);
         }
+        getPalette(name) {
+            return this.palettes.get(name);
+        }
         getPlugin(plugin) {
             return this.plugins.find(t => t.id === plugin);
         }

package/umd/Core/Interfaces/IPalette.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/Core/Particle.js

@@ -24,14 +24,12 @@
         const effectData = effectOptions.options[effect];
         return (0, Utils_js_1.deepExtend)({
             close: effectOptions.close,
-            fill: effectOptions.fill,
         }, (0, Utils_js_1.itemFromSingleOrMultiple)(effectData, id, reduceDuplicates));
     }
     function loadShapeData(shape, shapeOptions, id, reduceDuplicates) {
         const shapeData = shapeOptions.options[shape];
         return (0, Utils_js_1.deepExtend)({
             close: shapeOptions.close,
-            fill: shapeOptions.fill,
         }, (0, Utils_js_1.itemFromSingleOrMultiple)(shapeData, id, reduceDuplicates));
     }
     function fixOutMode(data) {
@@ -50,13 +48,14 @@
         container;
         backColor;
         bubble;
-        color;
         destroyed;
         direction;
         effect;
         effectClose;
         effectData;
-        effectFill;
+        fillColor;
+        fillEnabled;
+        fillOpacity;
         group;
         id;
         ignoresResizeRatio;
@@ -79,7 +78,6 @@
         shape;
         shapeClose;
         shapeData;
-        shapeFill;
         sides;
         size;
         slow;
@@ -91,6 +89,7 @@
         velocity;
         zIndexFactor;
         _cachedOpacityData = {
+            fillOpacity: Constants_js_1.defaultOpacity,
             opacity: Constants_js_1.defaultOpacity,
             strokeOpacity: Constants_js_1.defaultOpacity,
         };
@@ -138,15 +137,16 @@
             return this.rotation + (this.pathRotation ? this.velocity.angle : Constants_js_1.defaultAngle);
         }
         getFillColor() {
-            return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
+            return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.fillColor));
         }
         getMass() {
             return this.getRadius() ** Constants_js_1.squareExp * Math.PI * Constants_js_1.half;
         }
         getOpacity() {
-            const zIndexOptions = this.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0, MathUtils_js_1.getRangeValue)(this.opacity?.value ?? Constants_js_1.defaultOpacity), strokeOpacity = this.strokeOpacity ?? opacity;
+            const zIndexOptions = this.options.zIndex, zIndexFactor = Constants_js_1.zIndexFactorOffset - this.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, opacity = this.bubble.opacity ?? (0, MathUtils_js_1.getRangeValue)(this.opacity?.value ?? Constants_js_1.defaultOpacity), fillOpacity = this.fillOpacity ?? Constants_js_1.defaultOpacity, strokeOpacity = this.strokeOpacity ?? Constants_js_1.defaultOpacity;
+            this._cachedOpacityData.fillOpacity = opacity * fillOpacity * zOpacityFactor;
             this._cachedOpacityData.opacity = opacity * zOpacityFactor;
-            this._cachedOpacityData.strokeOpacity = strokeOpacity * zOpacityFactor;
+            this._cachedOpacityData.strokeOpacity = opacity * strokeOpacity * zOpacityFactor;
             return this._cachedOpacityData;
         }
         getPosition() {
@@ -184,9 +184,7 @@
             this.id = id;
             this.group = group;
             this.effectClose = true;
-            this.effectFill = true;
             this.shapeClose = true;
-            this.shapeFill = true;
             this.pathRotation = false;
             this.lastPathTime = 0;
             this.destroyed = false;
@@ -238,9 +236,7 @@
             if (shapeData) {
                 particlesOptions.load(shapeData.particles);
             }
-            this.effectFill = effectData?.fill ?? particlesOptions.effect.fill;
             this.effectClose = effectData?.close ?? particlesOptions.effect.close;
-            this.shapeFill = shapeData?.fill ?? particlesOptions.shape.fill;
             this.shapeClose = shapeData?.close ?? particlesOptions.shape.close;
             this.options = particlesOptions;
             container.retina.initParticle(this);

package/umd/Core/Utils/Constants.js

@@ -9,8 +9,8 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.defaultZoom = exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.spatialHashGridCellSize = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.visibilityChangeEvent = exports.resizeEvent = exports.generatedAttribute = void 0;
-    exports.generatedAttribute = "generated", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
+    exports.defaultZoom = exports.defaultTime = exports.defaultLoops = exports.defaultVelocity = exports.defaultRgbMin = exports.phaseNumerator = exports.sNormalizedOffset = exports.sextuple = exports.triple = exports.lMin = exports.lFactor = exports.minStrokeWidth = exports.identity = exports.defaultAngle = exports.manualDefaultPosition = exports.touchDelay = exports.deleteCount = exports.defaultDensityFactor = exports.lengthOffset = exports.minIndex = exports.minCount = exports.countOffset = exports.minLimit = exports.sizeFactor = exports.posOffset = exports.defaultRadius = exports.minZ = exports.minRetries = exports.tryCountIncrement = exports.decayOffset = exports.none = exports.one = exports.loadMinIndex = exports.loadRandomFactor = exports.canvasFirstIndex = exports.minFpsLimit = exports.defaultFpsLimit = exports.removeMinIndex = exports.removeDeleteCount = exports.minCoordinate = exports.touchEndLengthOffset = exports.clickRadius = exports.defaultOpacity = exports.zIndexFactorOffset = exports.minimumLength = exports.minimumSize = exports.defaultTransformValue = exports.minVelocity = exports.threeQuarter = exports.quarter = exports.empty = exports.hPhase = exports.sMin = exports.hMin = exports.lMax = exports.sMax = exports.hMax = exports.rgbMax = exports.inverseFactorNumerator = exports.subdivideCount = exports.defaultReduceFactor = exports.defaultRatio = exports.defaultRemoveQuantity = exports.spatialHashGridCellSize = exports.qTreeCapacity = exports.squareExp = exports.defaultRetryCount = exports.canvasTag = exports.generatedFalse = exports.generatedTrue = exports.defaultAlpha = exports.defaultFps = exports.doublePI = exports.double = exports.midColorValue = exports.randomColorValue = exports.defaultTransform = exports.originPoint = exports.millisecondsToSeconds = exports.half = exports.percentDenominator = exports.visibilityChangeEvent = exports.resizeEvent = exports.defaultCompositeValue = exports.generatedAttribute = void 0;
+    exports.generatedAttribute = "generated", exports.defaultCompositeValue = "source-over", exports.resizeEvent = "resize", exports.visibilityChangeEvent = "visibilitychange", exports.percentDenominator = 100, exports.half = 0.5, exports.millisecondsToSeconds = 1000, exports.originPoint = {
         x: 0,
         y: 0,
         z: 0,

package/umd/Options/Classes/ColorAnimation.js

@@ -14,9 +14,13 @@
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class ColorAnimation extends AnimationOptions_js_1.AnimationOptions {
+        max;
+        min;
         offset;
-        constructor() {
+        constructor(min, max) {
             super();
+            this.min = min;
+            this.max = max;
             this.offset = 0;
             this.sync = true;
         }
@@ -25,6 +29,12 @@
             if ((0, TypeUtils_js_1.isNull)(data)) {
                 return;
             }
+            if (data.max !== undefined) {
+                this.max = data.max;
+            }
+            if (data.min !== undefined) {
+                this.min = data.min;
+            }
             if (data.offset !== undefined) {
                 this.offset = (0, MathUtils_js_1.setRangeValue)(data.offset);
             }

package/umd/Options/Classes/HslAnimation.js

@@ -4,18 +4,19 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./ColorAnimation.js", "../../Utils/TypeUtils.js"], factory);
+        define(["require", "exports", "../../Core/Utils/Constants.js", "./ColorAnimation.js", "../../Utils/TypeUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.HslAnimation = void 0;
+    const Constants_js_1 = require("../../Core/Utils/Constants.js");
     const ColorAnimation_js_1 = require("./ColorAnimation.js");
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     class HslAnimation {
-        h = new ColorAnimation_js_1.ColorAnimation();
-        l = new ColorAnimation_js_1.ColorAnimation();
-        s = new ColorAnimation_js_1.ColorAnimation();
+        h = new ColorAnimation_js_1.ColorAnimation(Constants_js_1.hMin, Constants_js_1.hMax);
+        l = new ColorAnimation_js_1.ColorAnimation(Constants_js_1.lMin, Constants_js_1.lMax);
+        s = new ColorAnimation_js_1.ColorAnimation(Constants_js_1.sMin, Constants_js_1.sMax);
         load(data) {
             if ((0, TypeUtils_js_1.isNull)(data)) {
                 return;

package/umd/Options/Classes/Options.js

@@ -30,6 +30,7 @@
         hdr;
         key;
         name;
+        palette;
         particles;
         pauseOnBlur;
         pauseOnOutsideViewport;
@@ -66,10 +67,15 @@
                 return;
             }
             if (data.preset !== undefined) {
-                (0, Utils_js_1.executeOnSingleOrMultiple)(data.preset, preset => {
+                this.preset = data.preset;
+                (0, Utils_js_1.executeOnSingleOrMultiple)(this.preset, preset => {
                     this._importPreset(preset);
                 });
             }
+            if (data.palette !== undefined) {
+                this.palette = data.palette;
+                this._importPalette(this.palette);
+            }
             if (data.autoPlay !== undefined) {
                 this.autoPlay = data.autoPlay;
             }
@@ -126,6 +132,37 @@
                 plugin.loadOptions(this._container, this, data);
             });
         }
+        _importPalette = palette => {
+            const paletteData = this._engine.getPalette(palette);
+            if (!paletteData) {
+                return;
+            }
+            this.load({
+                background: {
+                    color: paletteData.background,
+                },
+                blend: {
+                    enable: true,
+                    mode: paletteData.blendMode,
+                },
+                particles: {
+                    fill: {
+                        color: paletteData.fill
+                            ? {
+                                value: paletteData.colors,
+                            }
+                            : undefined,
+                        enable: paletteData.fill,
+                    },
+                    stroke: !paletteData.fill
+                        ? paletteData.colors.map(color => ({
+                            color: { value: color },
+                            width: 1,
+                        }))
+                        : undefined,
+                },
+            });
+        };
         _importPreset = preset => {
             this.load(this._engine.getPreset(preset));
         };

package/umd/Options/Classes/Particles/Effect/Effect.js

@@ -14,12 +14,10 @@
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class Effect {
         close;
-        fill;
         options;
         type;
         constructor() {
             this.close = true;
-            this.fill = true;
             this.options = {};
             this.type = [];
         }
@@ -39,9 +37,6 @@
             if (data.close !== undefined) {
                 this.close = data.close;
             }
-            if (data.fill !== undefined) {
-                this.fill = data.fill;
-            }
             if (data.type !== undefined) {
                 this.type = data.type;
             }

package/umd/Options/Classes/Particles/Fill.js

@@ -0,0 +1,42 @@
+(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", "../AnimatableColor.js", "../../../Utils/TypeUtils.js", "../../../Utils/MathUtils.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Fill = void 0;
+    const AnimatableColor_js_1 = require("../AnimatableColor.js");
+    const TypeUtils_js_1 = require("../../../Utils/TypeUtils.js");
+    const MathUtils_js_1 = require("../../../Utils/MathUtils.js");
+    class Fill {
+        color;
+        enable;
+        opacity;
+        constructor() {
+            this.enable = true;
+            this.color = new AnimatableColor_js_1.AnimatableColor();
+            this.color.value = "#fff";
+            this.opacity = 1;
+        }
+        load(data) {
+            if ((0, TypeUtils_js_1.isNull)(data)) {
+                return;
+            }
+            if (data.color !== undefined) {
+                this.color = AnimatableColor_js_1.AnimatableColor.create(this.color, data.color);
+            }
+            if (data.enable !== undefined) {
+                this.enable = data.enable;
+            }
+            if (data.opacity !== undefined) {
+                this.opacity = (0, MathUtils_js_1.setRangeValue)(data.opacity);
+            }
+        }
+    }
+    exports.Fill = Fill;
+});

package/umd/Options/Classes/Particles/ParticlesOptions.js

@@ -4,15 +4,15 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../Utils/Utils.js", "../AnimatableColor.js", "./Effect/Effect.js", "./Move/Move.js", "./Opacity/Opacity.js", "./Bounce/ParticlesBounce.js", "./Number/ParticlesNumber.js", "./Shape/Shape.js", "./Size/Size.js", "./Stroke.js", "./ZIndex/ZIndex.js", "../../../Utils/TypeUtils.js"], factory);
+        define(["require", "exports", "../../../Utils/Utils.js", "./Effect/Effect.js", "./Fill.js", "./Move/Move.js", "./Opacity/Opacity.js", "./Bounce/ParticlesBounce.js", "./Number/ParticlesNumber.js", "./Shape/Shape.js", "./Size/Size.js", "./Stroke.js", "./ZIndex/ZIndex.js", "../../../Utils/TypeUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ParticlesOptions = void 0;
     const Utils_js_1 = require("../../../Utils/Utils.js");
-    const AnimatableColor_js_1 = require("../AnimatableColor.js");
     const Effect_js_1 = require("./Effect/Effect.js");
+    const Fill_js_1 = require("./Fill.js");
     const Move_js_1 = require("./Move/Move.js");
     const Opacity_js_1 = require("./Opacity/Opacity.js");
     const ParticlesBounce_js_1 = require("./Bounce/ParticlesBounce.js");
@@ -24,8 +24,8 @@
     const TypeUtils_js_1 = require("../../../Utils/TypeUtils.js");
     class ParticlesOptions {
         bounce;
-        color;
         effect;
+        fill;
         groups;
         move;
         number;
@@ -41,9 +41,8 @@
             this._engine = engine;
             this._container = container;
             this.bounce = new ParticlesBounce_js_1.ParticlesBounce();
-            this.color = new AnimatableColor_js_1.AnimatableColor();
-            this.color.value = "#fff";
             this.effect = new Effect_js_1.Effect();
+            this.fill = new Fill_js_1.Fill();
             this.groups = {};
             this.move = new Move_js_1.Move();
             this.number = new ParticlesNumber_js_1.ParticlesNumber();
@@ -60,7 +59,7 @@
             }
             if (data.groups !== undefined) {
                 for (const group of Object.keys(data.groups)) {
-                    if (!Object.hasOwn(data.groups, group)) {
+                    if (!(group in data.groups)) {
                         continue;
                     }
                     const item = data.groups[group];
@@ -73,7 +72,6 @@
                 this.reduceDuplicates = data.reduceDuplicates;
             }
             this.bounce.load(data.bounce);
-            this.color.load(AnimatableColor_js_1.AnimatableColor.create(this.color, data.color));
             this.effect.load(data.effect);
             this.move.load(data.move);
             this.number.load(data.number);
@@ -81,6 +79,14 @@
             this.shape.load(data.shape);
             this.size.load(data.size);
             this.zIndex.load(data.zIndex);
+            const fillToLoad = data.fill;
+            if (fillToLoad) {
+                this.fill = (0, Utils_js_1.executeOnSingleOrMultiple)(fillToLoad, t => {
+                    const tmp = new Fill_js_1.Fill();
+                    tmp.load(t);
+                    return tmp;
+                });
+            }
             const strokeToLoad = data.stroke;
             if (strokeToLoad) {
                 this.stroke = (0, Utils_js_1.executeOnSingleOrMultiple)(strokeToLoad, t => {

package/umd/Options/Classes/Particles/Shape/Shape.js

@@ -14,12 +14,10 @@
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class Shape {
         close;
-        fill;
         options;
         type;
         constructor() {
             this.close = true;
-            this.fill = true;
             this.options = {};
             this.type = "circle";
         }
@@ -39,9 +37,6 @@
             if (data.close !== undefined) {
                 this.close = data.close;
             }
-            if (data.fill !== undefined) {
-                this.fill = data.fill;
-            }
             if (data.type !== undefined) {
                 this.type = data.type;
             }

package/umd/Options/Interfaces/Particles/IFill.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/CanvasUtils.js

@@ -45,7 +45,7 @@
         if (colorStyles.fill) {
             context.fillStyle = colorStyles.fill;
         }
-        const strokeWidth = particle.strokeWidth ?? Constants_js_1.minStrokeWidth;
+        const fillEnabled = !!particle.fillEnabled, strokeWidth = particle.strokeWidth ?? Constants_js_1.minStrokeWidth;
         context.lineWidth = strokeWidth;
         if (colorStyles.stroke) {
             context.strokeStyle = colorStyles.stroke;
@@ -58,8 +58,8 @@
             opacity,
             delta,
             pixelRatio: container.retina.pixelRatio,
-            fill: particle.shapeFill,
-            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
+            fill: fillEnabled,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth,
             transformData,
             position: { ...pos },
             drawPosition,
@@ -100,7 +100,7 @@
         if (!drawer) {
             return;
         }
-        const { context, particle, stroke } = data;
+        const { context, fill, particle, stroke } = data;
         if (!particle.shape) {
             return;
         }
@@ -112,7 +112,7 @@
         if (stroke) {
             context.stroke();
         }
-        if (particle.shapeFill) {
+        if (fill) {
             context.fill();
         }
     }

package/umd/Utils/ColorUtils.js

@@ -221,10 +221,10 @@
     }
     function colorMix(color1, color2, size1, size2) {
         let rgb1 = color1, rgb2 = color2;
-        if (!Object.hasOwn(rgb1, "r")) {
+        if (!("r" in rgb1)) {
             rgb1 = hslToRgb(color1);
         }
-        if (!Object.hasOwn(rgb2, "r")) {
+        if (!("r" in rgb2)) {
             rgb2 = hslToRgb(color2);
         }
         return {
@@ -277,27 +277,33 @@
         }
     }
     function getHslFromAnimation(animation) {
-        return animation !== undefined
-            ? {
+        return animation === undefined
+            ? undefined
+            : {
                 h: animation.h.value,
                 s: animation.s.value,
                 l: animation.l.value,
-            }
-            : undefined;
+            };
     }
     function getHslAnimationFromHsl(hsl, animationOptions, reduceFactor) {
         const resColor = {
             h: {
                 enable: false,
                 value: hsl.h,
+                min: Constants_js_1.hMin,
+                max: Constants_js_1.hMax,
             },
             s: {
                 enable: false,
                 value: hsl.s,
+                min: Constants_js_1.sMin,
+                max: Constants_js_1.sMax,
             },
             l: {
                 enable: false,
                 value: hsl.l,
+                min: Constants_js_1.lMin,
+                max: Constants_js_1.lMax,
             },
         };
         if (animationOptions) {
@@ -309,6 +315,8 @@
     }
     function setColorAnimation(colorValue, colorAnimation, reduceFactor) {
         colorValue.enable = colorAnimation.enable;
+        colorValue.min = colorAnimation.min;
+        colorValue.max = colorAnimation.max;
         if (colorValue.enable) {
             colorValue.velocity = ((0, MathUtils_js_1.getRangeValue)(colorAnimation.speed) / Constants_js_1.percentDenominator) * reduceFactor;
             colorValue.decay = Constants_js_1.decayOffset - (0, MathUtils_js_1.getRangeValue)(colorAnimation.decay);
@@ -328,7 +336,7 @@
             colorValue.velocity = Constants_js_1.defaultVelocity;
         }
     }
-    function updateColorValue(data, range, decrease, delta) {
+    function updateColorValue(data, decrease, delta) {
         const minLoops = 0, minDelay = 0, identity = 1, minVelocity = 0, minOffset = 0, velocityFactor = 3.6;
         if (!data.enable ||
             ((data.maxLoops ?? minLoops) > minLoops && (data.loops ?? minLoops) > (data.maxLoops ?? minLoops))) {
@@ -341,7 +349,7 @@
         if ((data.delayTime ?? minDelay) > minDelay && data.time < (data.delayTime ?? minDelay)) {
             return;
         }
-        const offset = data.offset ? (0, MathUtils_js_1.randomInRangeValue)(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = (0, MathUtils_js_1.getRangeMax)(range), min = (0, MathUtils_js_1.getRangeMin)(range);
+        const offset = data.offset ? (0, MathUtils_js_1.randomInRangeValue)(data.offset) : minOffset, velocity = (data.velocity ?? minVelocity) * delta.factor + offset * velocityFactor, decay = data.decay ?? identity, max = data.max, min = data.min;
         if (!decrease || data.status === AnimationStatus_js_1.AnimationStatus.increasing) {
             data.value += velocity;
             if (data.value > max) {
@@ -357,8 +365,7 @@
         }
         else {
             data.value -= velocity;
-            const minValue = 0;
-            if (data.value < minValue) {
+            if (data.value < min) {
                 data.loops ??= 0;
                 data.loops++;
                 data.status = AnimationStatus_js_1.AnimationStatus.increasing;
@@ -373,14 +380,10 @@
         if (!color) {
             return;
         }
-        const { h, s, l } = color, ranges = {
-            h: { min: Constants_js_1.hMin, max: Constants_js_1.hMax },
-            s: { min: Constants_js_1.sMin, max: Constants_js_1.sMax },
-            l: { min: Constants_js_1.lMin, max: Constants_js_1.lMax },
-        };
-        updateColorValue(h, ranges.h, false, delta);
-        updateColorValue(s, ranges.s, true, delta);
-        updateColorValue(l, ranges.l, true, delta);
+        const { h, s, l } = color;
+        updateColorValue(h, false, delta);
+        updateColorValue(s, true, delta);
+        updateColorValue(l, true, delta);
     }
     function alterHsl(color, type, value) {
         return {