@tsparticles/engine 3.9.1 → 4.0.0-alpha.1

package/umd/Options/Classes/AnimationOptions.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../Enums/Modes/AnimationMode.js", "../../Enums/Types/StartValueType.js", "../../Utils/TypeUtils.js", "../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "../../Enums/Modes/AnimationMode.js", "../../Enums/Types/StartValueType.js", "../../Utils/TypeUtils.js", "../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,7 +13,7 @@
     const AnimationMode_js_1 = require("../../Enums/Modes/AnimationMode.js");
     const StartValueType_js_1 = require("../../Enums/Types/StartValueType.js");
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class AnimationOptions {
         constructor() {
             this.count = 0;
@@ -28,19 +28,19 @@
                 return;
             }
             if (data.count !== undefined) {
-                this.count = (0, NumberUtils_js_1.setRangeValue)(data.count);
+                this.count = (0, MathUtils_js_1.setRangeValue)(data.count);
             }
             if (data.enable !== undefined) {
                 this.enable = data.enable;
             }
             if (data.speed !== undefined) {
-                this.speed = (0, NumberUtils_js_1.setRangeValue)(data.speed);
+                this.speed = (0, MathUtils_js_1.setRangeValue)(data.speed);
             }
             if (data.decay !== undefined) {
-                this.decay = (0, NumberUtils_js_1.setRangeValue)(data.decay);
+                this.decay = (0, MathUtils_js_1.setRangeValue)(data.decay);
             }
             if (data.delay !== undefined) {
-                this.delay = (0, NumberUtils_js_1.setRangeValue)(data.delay);
+                this.delay = (0, MathUtils_js_1.setRangeValue)(data.delay);
             }
             if (data.sync !== undefined) {
                 this.sync = data.sync;

package/umd/Options/Classes/ColorAnimation.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./AnimationOptions.js", "../../Utils/TypeUtils.js", "../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "./AnimationOptions.js", "../../Utils/TypeUtils.js", "../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,7 +12,7 @@
     exports.ColorAnimation = void 0;
     const AnimationOptions_js_1 = require("./AnimationOptions.js");
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class ColorAnimation extends AnimationOptions_js_1.AnimationOptions {
         constructor() {
             super();
@@ -25,7 +25,7 @@
                 return;
             }
             if (data.offset !== undefined) {
-                this.offset = (0, NumberUtils_js_1.setRangeValue)(data.offset);
+                this.offset = (0, MathUtils_js_1.setRangeValue)(data.offset);
             }
         }
     }

package/umd/Options/Classes/Options.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../Utils/Utils.js", "../../Utils/TypeUtils.js", "./Background/Background.js", "./BackgroundMask/BackgroundMask.js", "./FullScreen/FullScreen.js", "./Interactivity/Interactivity.js", "./ManualParticle.js", "./Responsive.js", "../../Enums/Modes/ResponsiveMode.js", "./Theme/Theme.js", "../../Enums/Modes/ThemeMode.js", "../../Utils/OptionsUtils.js", "../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "../../Utils/Utils.js", "../../Utils/TypeUtils.js", "./Background/Background.js", "./FullScreen/FullScreen.js", "./Interactivity/Interactivity.js", "./ManualParticle.js", "./Responsive.js", "../../Enums/Modes/ResponsiveMode.js", "./Theme/Theme.js", "../../Enums/Modes/ThemeMode.js", "../../Utils/OptionsUtils.js", "../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,7 +13,6 @@
     const Utils_js_1 = require("../../Utils/Utils.js");
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     const Background_js_1 = require("./Background/Background.js");
-    const BackgroundMask_js_1 = require("./BackgroundMask/BackgroundMask.js");
     const FullScreen_js_1 = require("./FullScreen/FullScreen.js");
     const Interactivity_js_1 = require("./Interactivity/Interactivity.js");
     const ManualParticle_js_1 = require("./ManualParticle.js");
@@ -22,7 +21,7 @@
     const Theme_js_1 = require("./Theme/Theme.js");
     const ThemeMode_js_1 = require("../../Enums/Modes/ThemeMode.js");
     const OptionsUtils_js_1 = require("../../Utils/OptionsUtils.js");
-    const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class Options {
         constructor(engine, container) {
             this._findDefaultTheme = mode => {
@@ -36,7 +35,6 @@
             this._container = container;
             this.autoPlay = true;
             this.background = new Background_js_1.Background();
-            this.backgroundMask = new BackgroundMask_js_1.BackgroundMask();
             this.clear = true;
             this.defaultThemes = {};
             this.delay = 0;
@@ -44,6 +42,7 @@
             this.detectRetina = true;
             this.duration = 0;
             this.fpsLimit = 120;
+            this.hdr = true;
             this.interactivity = new Interactivity_js_1.Interactivity(engine, container);
             this.manualParticles = [];
             this.particles = (0, OptionsUtils_js_1.loadParticlesOptions)(this._engine, this._container);
@@ -60,7 +59,9 @@
                 return;
             }
             if (data.preset !== undefined) {
-                (0, Utils_js_1.executeOnSingleOrMultiple)(data.preset, preset => this._importPreset(preset));
+                (0, Utils_js_1.executeOnSingleOrMultiple)(data.preset, preset => {
+                    this._importPreset(preset);
+                });
             }
             if (data.autoPlay !== undefined) {
                 this.autoPlay = data.autoPlay;
@@ -75,19 +76,22 @@
                 this.name = data.name;
             }
             if (data.delay !== undefined) {
-                this.delay = (0, NumberUtils_js_1.setRangeValue)(data.delay);
+                this.delay = (0, MathUtils_js_1.setRangeValue)(data.delay);
             }
             const detectRetina = data.detectRetina;
             if (detectRetina !== undefined) {
                 this.detectRetina = detectRetina;
             }
             if (data.duration !== undefined) {
-                this.duration = (0, NumberUtils_js_1.setRangeValue)(data.duration);
+                this.duration = (0, MathUtils_js_1.setRangeValue)(data.duration);
             }
             const fpsLimit = data.fpsLimit;
             if (fpsLimit !== undefined) {
                 this.fpsLimit = fpsLimit;
             }
+            if (data.hdr !== undefined) {
+                this.hdr = data.hdr;
+            }
             if (data.pauseOnBlur !== undefined) {
                 this.pauseOnBlur = data.pauseOnBlur;
             }
@@ -105,7 +109,6 @@
             else {
                 this.fullScreen.load(fullScreen);
             }
-            this.backgroundMask.load(data.backgroundMask);
             this.interactivity.load(data.interactivity);
             if (data.manualParticles) {
                 this.manualParticles = data.manualParticles.map(t => {
@@ -139,14 +142,14 @@
             if (data.themes !== undefined) {
                 for (const theme of data.themes) {
                     const existingTheme = this.themes.find(t => t.name === theme.name);
-                    if (!existingTheme) {
+                    if (existingTheme) {
+                        existingTheme.load(theme);
+                    }
+                    else {
                         const optTheme = new Theme_js_1.Theme();
                         optTheme.load(theme);
                         this.themes.push(optTheme);
                     }
-                    else {
-                        existingTheme.load(theme);
-                    }
                 }
             }
             this.defaultThemes.dark = this._findDefaultTheme(ThemeMode_js_1.ThemeMode.dark)?.name;
@@ -154,7 +157,7 @@
         }
         setResponsive(width, pxRatio, defaultOptions) {
             this.load(defaultOptions);
-            const responsiveOptions = this.responsive.find(t => t.mode === ResponsiveMode_js_1.ResponsiveMode.screen && screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
+            const responsiveOptions = this.responsive.find(t => t.mode === ResponsiveMode_js_1.ResponsiveMode.screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
             this.load(responsiveOptions?.options);
             return responsiveOptions?.maxWidth;
         }

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", "./MoveTrail.js", "./OutModes.js", "./Spin.js", "../../../../Utils/NumberUtils.js"], factory);
+        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);
     }
 })(function (require, exports) {
     "use strict";
@@ -17,10 +17,9 @@
     const MoveCenter_js_1 = require("./MoveCenter.js");
     const MoveGravity_js_1 = require("./MoveGravity.js");
     const MovePath_js_1 = require("./Path/MovePath.js");
-    const MoveTrail_js_1 = require("./MoveTrail.js");
     const OutModes_js_1 = require("./OutModes.js");
     const Spin_js_1 = require("./Spin.js");
-    const NumberUtils_js_1 = require("../../../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class Move {
         constructor() {
             this.angle = new MoveAngle_js_1.MoveAngle();
@@ -39,7 +38,6 @@
             this.speed = 2;
             this.spin = new Spin_js_1.Spin();
             this.straight = false;
-            this.trail = new MoveTrail_js_1.MoveTrail();
             this.vibrate = false;
             this.warp = false;
         }
@@ -51,7 +49,7 @@
             this.attract.load(data.attract);
             this.center.load(data.center);
             if (data.decay !== undefined) {
-                this.decay = (0, NumberUtils_js_1.setRangeValue)(data.decay);
+                this.decay = (0, MathUtils_js_1.setRangeValue)(data.decay);
             }
             if (data.direction !== undefined) {
                 this.direction = data.direction;
@@ -65,7 +63,7 @@
                     : { ...data.distance };
             }
             if (data.drift !== undefined) {
-                this.drift = (0, NumberUtils_js_1.setRangeValue)(data.drift);
+                this.drift = (0, MathUtils_js_1.setRangeValue)(data.drift);
             }
             if (data.enable !== undefined) {
                 this.enable = data.enable;
@@ -90,13 +88,12 @@
                 this.size = data.size;
             }
             if (data.speed !== undefined) {
-                this.speed = (0, NumberUtils_js_1.setRangeValue)(data.speed);
+                this.speed = (0, MathUtils_js_1.setRangeValue)(data.speed);
             }
             this.spin.load(data.spin);
             if (data.straight !== undefined) {
                 this.straight = data.straight;
             }
-            this.trail.load(data.trail);
             if (data.vibrate !== undefined) {
                 this.vibrate = data.vibrate;
             }

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

@@ -4,14 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/TypeUtils.js", "../../../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "../../../../Utils/TypeUtils.js", "../../../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MoveAngle = void 0;
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class MoveAngle {
         constructor() {
             this.offset = 0;
@@ -22,10 +22,10 @@
                 return;
             }
             if (data.offset !== undefined) {
-                this.offset = (0, NumberUtils_js_1.setRangeValue)(data.offset);
+                this.offset = (0, MathUtils_js_1.setRangeValue)(data.offset);
             }
             if (data.value !== undefined) {
-                this.value = (0, NumberUtils_js_1.setRangeValue)(data.value);
+                this.value = (0, MathUtils_js_1.setRangeValue)(data.value);
             }
         }
     }

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

@@ -4,14 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/TypeUtils.js", "../../../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "../../../../Utils/TypeUtils.js", "../../../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MoveAttract = void 0;
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class MoveAttract {
         constructor() {
             this.distance = 200;
@@ -26,7 +26,7 @@
                 return;
             }
             if (data.distance !== undefined) {
-                this.distance = (0, NumberUtils_js_1.setRangeValue)(data.distance);
+                this.distance = (0, MathUtils_js_1.setRangeValue)(data.distance);
             }
             if (data.enable !== undefined) {
                 this.enable = data.enable;

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

@@ -4,14 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/TypeUtils.js", "../../../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "../../../../Utils/TypeUtils.js", "../../../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.MoveGravity = void 0;
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class MoveGravity {
         constructor() {
             this.acceleration = 9.81;
@@ -24,7 +24,7 @@
                 return;
             }
             if (data.acceleration !== undefined) {
-                this.acceleration = (0, NumberUtils_js_1.setRangeValue)(data.acceleration);
+                this.acceleration = (0, MathUtils_js_1.setRangeValue)(data.acceleration);
             }
             if (data.enable !== undefined) {
                 this.enable = data.enable;
@@ -33,7 +33,7 @@
                 this.inverse = data.inverse;
             }
             if (data.maxSpeed !== undefined) {
-                this.maxSpeed = (0, NumberUtils_js_1.setRangeValue)(data.maxSpeed);
+                this.maxSpeed = (0, MathUtils_js_1.setRangeValue)(data.maxSpeed);
             }
         }
     }

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

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/Utils.js", "../../../../Utils/TypeUtils.js", "../../../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "../../../../Utils/Utils.js", "../../../../Utils/TypeUtils.js", "../../../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,7 +12,7 @@
     exports.Spin = void 0;
     const Utils_js_1 = require("../../../../Utils/Utils.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class Spin {
         constructor() {
             this.acceleration = 0;
@@ -23,7 +23,7 @@
                 return;
             }
             if (data.acceleration !== undefined) {
-                this.acceleration = (0, NumberUtils_js_1.setRangeValue)(data.acceleration);
+                this.acceleration = (0, MathUtils_js_1.setRangeValue)(data.acceleration);
             }
             if (data.enable !== undefined) {
                 this.enable = data.enable;

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

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../Utils/Utils.js", "../AnimatableColor.js", "./Collisions/Collisions.js", "./Effect/Effect.js", "./Move/Move.js", "./Opacity/Opacity.js", "./Bounce/ParticlesBounce.js", "./Number/ParticlesNumber.js", "./Shadow.js", "./Shape/Shape.js", "./Size/Size.js", "./Stroke.js", "./ZIndex/ZIndex.js", "../../../Utils/TypeUtils.js"], factory);
+        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);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,13 +12,11 @@
     exports.ParticlesOptions = void 0;
     const Utils_js_1 = require("../../../Utils/Utils.js");
     const AnimatableColor_js_1 = require("../AnimatableColor.js");
-    const Collisions_js_1 = require("./Collisions/Collisions.js");
     const Effect_js_1 = require("./Effect/Effect.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");
     const ParticlesNumber_js_1 = require("./Number/ParticlesNumber.js");
-    const Shadow_js_1 = require("./Shadow.js");
     const Shape_js_1 = require("./Shape/Shape.js");
     const Size_js_1 = require("./Size/Size.js");
     const Stroke_js_1 = require("./Stroke.js");
@@ -29,7 +27,6 @@
             this._engine = engine;
             this._container = container;
             this.bounce = new ParticlesBounce_js_1.ParticlesBounce();
-            this.collisions = new Collisions_js_1.Collisions();
             this.color = new AnimatableColor_js_1.AnimatableColor();
             this.color.value = "#fff";
             this.effect = new Effect_js_1.Effect();
@@ -38,7 +35,6 @@
             this.number = new ParticlesNumber_js_1.ParticlesNumber();
             this.opacity = new Opacity_js_1.Opacity();
             this.reduceDuplicates = false;
-            this.shadow = new Shadow_js_1.Shadow();
             this.shape = new Shape_js_1.Shape();
             this.size = new Size_js_1.Size();
             this.stroke = new Stroke_js_1.Stroke();
@@ -70,9 +66,7 @@
             this.opacity.load(data.opacity);
             this.shape.load(data.shape);
             this.size.load(data.size);
-            this.shadow.load(data.shadow);
             this.zIndex.load(data.zIndex);
-            this.collisions.load(data.collisions);
             if (data.interactivity !== undefined) {
                 this.interactivity = (0, Utils_js_1.deepExtend)({}, data.interactivity);
             }

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

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../AnimatableColor.js", "../../../Utils/TypeUtils.js", "../../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "../AnimatableColor.js", "../../../Utils/TypeUtils.js", "../../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,7 +12,7 @@
     exports.Stroke = void 0;
     const AnimatableColor_js_1 = require("../AnimatableColor.js");
     const TypeUtils_js_1 = require("../../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../../Utils/MathUtils.js");
     class Stroke {
         constructor() {
             this.width = 0;
@@ -25,10 +25,10 @@
                 this.color = AnimatableColor_js_1.AnimatableColor.create(this.color, data.color);
             }
             if (data.width !== undefined) {
-                this.width = (0, NumberUtils_js_1.setRangeValue)(data.width);
+                this.width = (0, MathUtils_js_1.setRangeValue)(data.width);
             }
             if (data.opacity !== undefined) {
-                this.opacity = (0, NumberUtils_js_1.setRangeValue)(data.opacity);
+                this.opacity = (0, MathUtils_js_1.setRangeValue)(data.opacity);
             }
         }
     }

package/umd/Options/Classes/ValueWithRandom.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./AnimationOptions.js", "../../Utils/TypeUtils.js", "../../Utils/NumberUtils.js"], factory);
+        define(["require", "exports", "./AnimationOptions.js", "../../Utils/TypeUtils.js", "../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -12,7 +12,7 @@
     exports.RangedAnimationValueWithRandom = exports.AnimationValueWithRandom = exports.ValueWithRandom = void 0;
     const AnimationOptions_js_1 = require("./AnimationOptions.js");
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
-    const NumberUtils_js_1 = require("../../Utils/NumberUtils.js");
+    const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class ValueWithRandom {
         constructor() {
             this.value = 0;
@@ -22,7 +22,7 @@
                 return;
             }
             if (!(0, TypeUtils_js_1.isNull)(data.value)) {
-                this.value = (0, NumberUtils_js_1.setRangeValue)(data.value);
+                this.value = (0, MathUtils_js_1.setRangeValue)(data.value);
             }
         }
     }

package/umd/Utils/CanvasUtils.js

@@ -4,25 +4,33 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../Core/Utils/Constants.js", "../Enums/Types/AlterType.js", "./ColorUtils.js"], factory);
+        define(["require", "exports", "../Core/Utils/Constants.js", "../Enums/Types/AlterType.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.clearDrawPlugin = clearDrawPlugin;
     exports.drawLine = drawLine;
     exports.paintBase = paintBase;
     exports.paintImage = paintImage;
     exports.clear = clear;
     exports.drawParticle = drawParticle;
-    exports.drawEffect = drawEffect;
+    exports.drawAfterEffect = drawAfterEffect;
+    exports.drawBeforeEffect = drawBeforeEffect;
     exports.drawShape = drawShape;
     exports.drawShapeAfterDraw = drawShapeAfterDraw;
+    exports.drawShapeBeforeDraw = drawShapeBeforeDraw;
     exports.drawPlugin = drawPlugin;
     exports.drawParticlePlugin = drawParticlePlugin;
     exports.alterHsl = alterHsl;
     const Constants_js_1 = require("../Core/Utils/Constants.js");
     const AlterType_js_1 = require("../Enums/Types/AlterType.js");
-    const ColorUtils_js_1 = require("./ColorUtils.js");
+    function clearDrawPlugin(context, plugin, delta) {
+        if (!plugin.clearDraw) {
+            return;
+        }
+        plugin.clearDraw(context, delta);
+    }
     function drawLine(context, begin, end) {
         context.beginPath();
         context.moveTo(begin.x, begin.y);
@@ -45,26 +53,16 @@
         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, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : Constants_js_1.defaultAngle), rotateData = {
+        const { container, context, particle, delta, colorStyles, radius, opacity, transform } = data, pos = particle.getPosition(), angle = particle.getAngle(), rotateData = {
             sin: Math.sin(angle),
             cos: Math.cos(angle),
-        }, rotating = !!angle, transformData = {
+        }, rotating = particle.isRotating, transformData = {
             a: rotateData.cos * (transform.a ?? Constants_js_1.defaultTransform.a),
             b: rotating ? rotateData.sin * (transform.b ?? Constants_js_1.identity) : (transform.b ?? Constants_js_1.defaultTransform.b),
             c: rotating ? -rotateData.sin * (transform.c ?? Constants_js_1.identity) : (transform.c ?? Constants_js_1.defaultTransform.c),
             d: rotateData.cos * (transform.d ?? Constants_js_1.defaultTransform.d),
         };
         context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);
-        if (backgroundMask) {
-            context.globalCompositeOperation = composite;
-        }
-        const shadowColor = particle.shadowColor;
-        if (shadow.enable && shadowColor) {
-            context.shadowBlur = shadow.blur;
-            context.shadowColor = (0, ColorUtils_js_1.getStyleFromRgb)(shadowColor);
-            context.shadowOffsetX = shadow.offset.x;
-            context.shadowOffsetY = shadow.offset.y;
-        }
         if (colorStyles.fill) {
             context.fillStyle = colorStyles.fill;
         }
@@ -83,28 +81,52 @@
             transformData,
             strokeWidth,
         };
+        drawBeforeEffect(drawData);
+        drawShapeBeforeDraw(drawData);
         drawShape(drawData);
         drawShapeAfterDraw(drawData);
-        drawEffect(drawData);
-        context.globalCompositeOperation = "source-over";
+        drawAfterEffect(drawData);
         context.resetTransform();
     }
-    function drawEffect(data) {
-        const { container, context, particle, radius, opacity, delta, transformData } = data;
+    function drawAfterEffect(data) {
+        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+        if (!particle.effect) {
+            return;
+        }
+        const drawer = container.effectDrawers.get(particle.effect), drawFunc = drawer?.drawAfter;
+        if (!drawFunc) {
+            return;
+        }
+        drawFunc({
+            context,
+            particle,
+            radius,
+            opacity,
+            delta,
+            pixelRatio: container.retina.pixelRatio,
+            fill: particle.shapeFill,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
+            transformData: { ...transformData },
+        });
+    }
+    function drawBeforeEffect(data) {
+        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
         if (!particle.effect) {
             return;
         }
         const drawer = container.effectDrawers.get(particle.effect);
-        if (!drawer) {
+        if (!drawer?.drawBefore) {
             return;
         }
-        drawer.draw({
+        drawer.drawBefore({
             context,
             particle,
             radius,
             opacity,
             delta,
             pixelRatio: container.retina.pixelRatio,
+            fill: particle.shapeFill,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
             transformData: { ...transformData },
         });
     }
@@ -125,6 +147,8 @@
             opacity,
             delta,
             pixelRatio: container.retina.pixelRatio,
+            fill: particle.shapeFill,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
             transformData: { ...transformData },
         });
         if (particle.shapeClose) {
@@ -138,7 +162,7 @@
         }
     }
     function drawShapeAfterDraw(data) {
-        const { container, context, particle, radius, opacity, delta, transformData } = data;
+        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
         if (!particle.shape) {
             return;
         }
@@ -153,6 +177,29 @@
             opacity,
             delta,
             pixelRatio: container.retina.pixelRatio,
+            fill: particle.shapeFill,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
+            transformData: { ...transformData },
+        });
+    }
+    function drawShapeBeforeDraw(data) {
+        const { container, context, particle, radius, opacity, strokeWidth, delta, transformData } = data;
+        if (!particle.shape) {
+            return;
+        }
+        const drawer = container.shapeDrawers.get(particle.shape);
+        if (!drawer?.beforeDraw) {
+            return;
+        }
+        drawer.beforeDraw({
+            context,
+            particle,
+            radius,
+            opacity,
+            delta,
+            pixelRatio: container.retina.pixelRatio,
+            fill: particle.shapeFill,
+            stroke: strokeWidth > Constants_js_1.minStrokeWidth || !particle.shapeFill,
             transformData: { ...transformData },
         });
     }