@tsparticles/engine 4.0.0-alpha.8 → 4.0.0-beta.1

package/umd/Options/Classes/Particles/Move/OutModes.js

@@ -13,6 +13,11 @@
     const OutMode_js_1 = require("../../../../Enums/Modes/OutMode.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class OutModes {
+        bottom;
+        default;
+        left;
+        right;
+        top;
         constructor() {
             this.default = OutMode_js_1.OutMode.out;
         }

package/umd/Options/Classes/Particles/Move/Path/MovePath.js

@@ -14,6 +14,11 @@
     const Utils_js_1 = require("../../../../../Utils/Utils.js");
     const TypeUtils_js_1 = require("../../../../../Utils/TypeUtils.js");
     class MovePath {
+        clamp;
+        delay;
+        enable;
+        generator;
+        options;
         constructor() {
             this.clamp = true;
             this.delay = new ValueWithRandom_js_1.ValueWithRandom();

package/umd/Options/Classes/Particles/Move/Spin.js

@@ -14,6 +14,9 @@
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class Spin {
+        acceleration;
+        enable;
+        position;
         constructor() {
             this.acceleration = 0;
             this.enable = false;

package/umd/Options/Classes/Particles/Number/ParticlesDensity.js

@@ -12,6 +12,9 @@
     exports.ParticlesDensity = void 0;
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class ParticlesDensity {
+        enable;
+        height;
+        width;
         constructor() {
             this.enable = false;
             this.width = 1920;

package/umd/Options/Classes/Particles/Number/ParticlesNumber.js

@@ -14,6 +14,9 @@
     const ParticlesNumberLimit_js_1 = require("./ParticlesNumberLimit.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class ParticlesNumber {
+        density;
+        limit;
+        value;
         constructor() {
             this.density = new ParticlesDensity_js_1.ParticlesDensity();
             this.limit = new ParticlesNumberLimit_js_1.ParticlesNumberLimit();

package/umd/Options/Classes/Particles/Number/ParticlesNumberLimit.js

@@ -13,6 +13,8 @@
     const LimitMode_js_1 = require("../../../../Enums/Modes/LimitMode.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class ParticlesNumberLimit {
+        mode;
+        value;
         constructor() {
             this.mode = LimitMode_js_1.LimitMode.delete;
             this.value = 0;

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

@@ -14,6 +14,7 @@
     const ValueWithRandom_js_1 = require("../../ValueWithRandom.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class Opacity extends ValueWithRandom_js_1.RangedAnimationValueWithRandom {
+        animation;
         constructor() {
             super();
             this.animation = new OpacityAnimation_js_1.OpacityAnimation();

package/umd/Options/Classes/Particles/Opacity/OpacityAnimation.js

@@ -14,6 +14,7 @@
     const AnimationOptions_js_1 = require("../../AnimationOptions.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class OpacityAnimation extends AnimationOptions_js_1.RangedAnimationOptions {
+        destroy;
         constructor() {
             super();
             this.destroy = DestroyType_js_1.DestroyType.none;

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");
@@ -23,13 +23,26 @@
     const ZIndex_js_1 = require("./ZIndex/ZIndex.js");
     const TypeUtils_js_1 = require("../../../Utils/TypeUtils.js");
     class ParticlesOptions {
-        constructor(engine, container) {
-            this._engine = engine;
+        bounce;
+        effect;
+        fill;
+        groups;
+        move;
+        number;
+        opacity;
+        reduceDuplicates;
+        shape;
+        size;
+        stroke;
+        zIndex;
+        _container;
+        _pluginManager;
+        constructor(pluginManager, container) {
+            this._pluginManager = pluginManager;
             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();
@@ -46,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];
@@ -59,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);
@@ -67,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 => {
@@ -76,12 +96,12 @@
                 });
             }
             if (this._container) {
-                for (const plugin of this._engine.plugins) {
+                for (const plugin of this._pluginManager.plugins) {
                     if (plugin.loadParticlesOptions) {
                         plugin.loadParticlesOptions(this._container, this, data);
                     }
                 }
-                const updaters = this._engine.updaters.get(this._container);
+                const updaters = this._pluginManager.updaters.get(this._container);
                 if (updaters) {
                     for (const updater of updaters) {
                         if (updater.loadOptions) {

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

@@ -13,9 +13,11 @@
     const Utils_js_1 = require("../../../../Utils/Utils.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class Shape {
+        close;
+        options;
+        type;
         constructor() {
             this.close = true;
-            this.fill = true;
             this.options = {};
             this.type = "circle";
         }
@@ -35,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/Size/Size.js

@@ -14,6 +14,7 @@
     const SizeAnimation_js_1 = require("./SizeAnimation.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class Size extends ValueWithRandom_js_1.RangedAnimationValueWithRandom {
+        animation;
         constructor() {
             super();
             this.animation = new SizeAnimation_js_1.SizeAnimation();

package/umd/Options/Classes/Particles/Size/SizeAnimation.js

@@ -14,6 +14,7 @@
     const AnimationOptions_js_1 = require("../../AnimationOptions.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class SizeAnimation extends AnimationOptions_js_1.RangedAnimationOptions {
+        destroy;
         constructor() {
             super();
             this.destroy = DestroyType_js_1.DestroyType.none;

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

@@ -14,6 +14,9 @@
     const TypeUtils_js_1 = require("../../../Utils/TypeUtils.js");
     const MathUtils_js_1 = require("../../../Utils/MathUtils.js");
     class Stroke {
+        color;
+        opacity;
+        width;
         constructor() {
             this.width = 0;
         }

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

@@ -13,6 +13,9 @@
     const ValueWithRandom_js_1 = require("../../ValueWithRandom.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class ZIndex extends ValueWithRandom_js_1.ValueWithRandom {
+        opacityRate;
+        sizeRate;
+        velocityRate;
         constructor() {
             super();
             this.opacityRate = 1;

package/umd/Options/Classes/ResizeEvent.js

@@ -12,6 +12,8 @@
     exports.ResizeEvent = void 0;
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     class ResizeEvent {
+        delay;
+        enable;
         constructor() {
             this.delay = 0.5;
             this.enable = true;

package/umd/Options/Classes/ValueWithRandom.js

@@ -14,6 +14,7 @@
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class ValueWithRandom {
+        value;
         constructor() {
             this.value = 0;
         }
@@ -28,10 +29,7 @@
     }
     exports.ValueWithRandom = ValueWithRandom;
     class AnimationValueWithRandom extends ValueWithRandom {
-        constructor() {
-            super();
-            this.animation = new AnimationOptions_js_1.AnimationOptions();
-        }
+        animation = new AnimationOptions_js_1.AnimationOptions();
         load(data) {
             super.load(data);
             if ((0, TypeUtils_js_1.isNull)(data)) {
@@ -45,6 +43,7 @@
     }
     exports.AnimationValueWithRandom = AnimationValueWithRandom;
     class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
+        animation;
         constructor() {
             super();
             this.animation = new AnimationOptions_js_1.RangedAnimationOptions();

package/umd/Utils/CanvasUtils.js

@@ -4,12 +4,11 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Core/Utils/Constants.js", "../Enums/Types/AlterType.js"], factory);
+        define(["require", "exports", "../Core/Utils/Constants.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.drawLine = drawLine;
     exports.paintBase = paintBase;
     exports.paintImage = paintImage;
     exports.clear = clear;
@@ -20,15 +19,7 @@
     exports.drawShapeAfterDraw = drawShapeAfterDraw;
     exports.drawShapeBeforeDraw = drawShapeBeforeDraw;
     exports.drawParticlePlugin = drawParticlePlugin;
-    exports.alterHsl = alterHsl;
     const Constants_js_1 = require("../Core/Utils/Constants.js");
-    const AlterType_js_1 = require("../Enums/Types/AlterType.js");
-    function drawLine(context, begin, end) {
-        context.beginPath();
-        context.moveTo(begin.x, begin.y);
-        context.lineTo(end.x, end.y);
-        context.closePath();
-    }
     function paintBase(context, dimension, baseColor) {
         context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
         context.fillRect(Constants_js_1.originPoint.x, Constants_js_1.originPoint.y, dimension.width, dimension.height);
@@ -37,20 +28,24 @@
         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);
+        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, { effectDrawers, shapeDrawers } = container, pos = particle.getPosition(), transformData = particle.getTransformData(transform), drawScale = Constants_js_1.defaultZoom, drawPosition = {
+            x: pos.x,
+            y: pos.y,
+        };
         context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
         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;
@@ -59,49 +54,54 @@
             context,
             particle,
             radius,
+            drawRadius: radius * drawScale,
             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,
+            drawScale,
         };
-        drawBeforeEffect(container, drawData);
-        drawShapeBeforeDraw(container, drawData);
-        drawShape(container, drawData);
-        drawShapeAfterDraw(container, drawData);
-        drawAfterEffect(container, drawData);
+        for (const plugin of container.plugins) {
+            plugin.drawParticleTransform?.(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.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.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.shapeDrawers.get(particle.shape);
-        if (!drawer) {
+        const { context, fill, particle, stroke } = data;
+        if (!particle.shape) {
             return;
         }
         context.beginPath();
@@ -112,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.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.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) {
@@ -144,11 +142,4 @@
         }
         plugin.drawParticle(context, particle, delta);
     }
-    function alterHsl(color, type, value) {
-        return {
-            h: color.h,
-            s: color.s,
-            l: color.l + (type === AlterType_js_1.AlterType.darken ? -Constants_js_1.lFactor : Constants_js_1.lFactor) * value,
-        };
-    }
 });