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

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/Move/Move.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Enums/Directions/MoveDirection.js", "../../../../Utils/TypeUtils.js", "./MoveAngle.js", "./MoveAttract.js", "./MoveCenter.js", "./MoveGravity.js", "./Path/MovePath.js", "./OutModes.js", "./Spin.js", "../../../../Utils/MathUtils.js"], factory);
+        define(["require", "exports", "../../../../Enums/Directions/MoveDirection.js", "../../../../Utils/TypeUtils.js", "./MoveAngle.js", "./MoveCenter.js", "./MoveGravity.js", "./Path/MovePath.js", "./OutModes.js", "./Spin.js", "../../../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,7 +13,6 @@
     const MoveDirection_js_1 = require("../../../../Enums/Directions/MoveDirection.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     const MoveAngle_js_1 = require("./MoveAngle.js");
-    const MoveAttract_js_1 = require("./MoveAttract.js");
     const MoveCenter_js_1 = require("./MoveCenter.js");
     const MoveGravity_js_1 = require("./MoveGravity.js");
     const MovePath_js_1 = require("./Path/MovePath.js");
@@ -22,7 +21,6 @@
     const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class Move {
         angle;
-        attract;
         center;
         decay;
         direction;
@@ -41,7 +39,6 @@
         warp;
         constructor() {
             this.angle = new MoveAngle_js_1.MoveAngle();
-            this.attract = new MoveAttract_js_1.MoveAttract();
             this.center = new MoveCenter_js_1.MoveCenter();
             this.decay = 0;
             this.distance = {};
@@ -64,7 +61,6 @@
                 return;
             }
             this.angle.load((0, TypeUtils_js_1.isNumber)(data.angle) ? { value: data.angle } : data.angle);
-            this.attract.load(data.attract);
             this.center.load(data.center);
             if (data.decay !== undefined) {
                 this.decay = (0, MathUtils_js_1.setRangeValue)(data.decay);

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/Utils/CanvasUtils.js

@@ -28,15 +28,16 @@
         if (!image) {
             return;
         }
+        const prevAlpha = context.globalAlpha;
         context.globalAlpha = opacity;
         context.drawImage(image, Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
-        context.globalAlpha = 1;
+        context.globalAlpha = prevAlpha;
     }
     function clear(context, dimension) {
         context.clearRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
     }
     function drawParticle(data) {
-        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = Constants_js_1.defaultZoom, drawPosition = {
+        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container.particles, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = Constants_js_1.defaultZoom, drawPosition = {
             x: pos.x,
             y: pos.y,
         };
@@ -44,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;
@@ -57,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,
@@ -67,42 +68,40 @@
         for (const plugin of container.plugins) {
             plugin.drawParticleTransform?.(drawData);
         }
-        drawBeforeEffect(container, drawData);
-        drawShapeBeforeDraw(container, drawData);
-        drawShape(container, drawData);
-        drawShapeAfterDraw(container, drawData);
-        drawAfterEffect(container, drawData);
+        const effect = particle.effect ? effectDrawers.get(particle.effect) : undefined, shape = particle.shape ? shapeDrawers.get(particle.shape) : undefined;
+        drawBeforeEffect(effect, drawData);
+        drawShapeBeforeDraw(shape, drawData);
+        drawShape(shape, drawData);
+        drawShapeAfterDraw(shape, drawData);
+        drawAfterEffect(effect, drawData);
         context.resetTransform();
     }
-    function drawAfterEffect(container, data) {
+    function drawAfterEffect(drawer, data) {
+        if (!drawer?.drawAfter) {
+            return;
+        }
         const { particle } = data;
         if (!particle.effect) {
             return;
         }
-        const drawer = container.particles.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
-        if (!drawFunc) {
+        drawer.drawAfter(data);
+    }
+    function drawBeforeEffect(drawer, data) {
+        if (!drawer?.drawBefore) {
             return;
         }
-        drawFunc(data);
-    }
-    function drawBeforeEffect(container, data) {
         const { particle } = data;
         if (!particle.effect) {
             return;
         }
-        const drawer = container.particles.effectDrawers.get(particle.effect);
-        if (!drawer?.drawBefore) {
-            return;
-        }
         drawer.drawBefore(data);
     }
-    function drawShape(container, data) {
-        const { context, particle, stroke } = data;
-        if (!particle.shape) {
+    function drawShape(drawer, data) {
+        if (!drawer) {
             return;
         }
-        const drawer = container.particles.shapeDrawers.get(particle.shape);
-        if (!drawer) {
+        const { context, fill, particle, stroke } = data;
+        if (!particle.shape) {
             return;
         }
         context.beginPath();
@@ -113,30 +112,28 @@
         if (stroke) {
             context.stroke();
         }
-        if (particle.shapeFill) {
+        if (fill) {
             context.fill();
         }
     }
-    function drawShapeAfterDraw(container, data) {
-        const { particle } = data;
-        if (!particle.shape) {
-            return;
-        }
-        const drawer = container.particles.shapeDrawers.get(particle.shape);
+    function drawShapeAfterDraw(drawer, data) {
         if (!drawer?.afterDraw) {
             return;
         }
-        drawer.afterDraw(data);
-    }
-    function drawShapeBeforeDraw(container, data) {
         const { particle } = data;
         if (!particle.shape) {
             return;
         }
-        const drawer = container.particles.shapeDrawers.get(particle.shape);
+        drawer.afterDraw(data);
+    }
+    function drawShapeBeforeDraw(drawer, data) {
         if (!drawer?.beforeDraw) {
             return;
         }
+        const { particle } = data;
+        if (!particle.shape) {
+            return;
+        }
         drawer.beforeDraw(data);
     }
     function drawParticlePlugin(context, plugin, particle, delta) {

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 {

package/umd/Utils/MathUtils.js

@@ -23,7 +23,9 @@
     exports.getRangeMax = getRangeMax;
     exports.setRangeValue = setRangeValue;
     exports.getDistances = getDistances;
+    exports.getDistanceSq = getDistanceSq;
     exports.getDistance = getDistance;
+    exports.checkDistance = checkDistance;
     exports.degToRad = degToRad;
     exports.getParticleDirectionAngle = getParticleDirectionAngle;
     exports.getParticleBaseVelocity = getParticleBaseVelocity;
@@ -105,8 +107,15 @@
         const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
         return { dx: dx, dy: dy, distance: Math.hypot(dx, dy) };
     }
+    function getDistanceSq(pointA, pointB) {
+        const dx = pointA.x - pointB.x, dy = pointA.y - pointB.y;
+        return dx * dx + dy * dy;
+    }
     function getDistance(pointA, pointB) {
-        return getDistances(pointA, pointB).distance;
+        return Math.sqrt(getDistanceSq(pointA, pointB));
+    }
+    function checkDistance(pointA, pointB, distance) {
+        return getDistanceSq(pointA, pointB) <= distance * distance;
     }
     function degToRad(degrees) {
         return degrees * degToRadFactor;