@tsparticles/engine 4.0.0-alpha.1 → 4.0.0-alpha.14

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", "./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);
+        define(["require", "exports", "../../Utils/Utils.js", "../../Utils/TypeUtils.js", "./Background/Background.js", "./FullScreen/FullScreen.js", "./ResizeEvent.js", "../../Utils/OptionsUtils.js", "../../Utils/MathUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -14,23 +14,33 @@
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     const Background_js_1 = require("./Background/Background.js");
     const FullScreen_js_1 = require("./FullScreen/FullScreen.js");
-    const Interactivity_js_1 = require("./Interactivity/Interactivity.js");
-    const ManualParticle_js_1 = require("./ManualParticle.js");
-    const Responsive_js_1 = require("./Responsive.js");
-    const ResponsiveMode_js_1 = require("../../Enums/Modes/ResponsiveMode.js");
-    const Theme_js_1 = require("./Theme/Theme.js");
-    const ThemeMode_js_1 = require("../../Enums/Modes/ThemeMode.js");
+    const ResizeEvent_js_1 = require("./ResizeEvent.js");
     const OptionsUtils_js_1 = require("../../Utils/OptionsUtils.js");
     const MathUtils_js_1 = require("../../Utils/MathUtils.js");
     class Options {
+        autoPlay;
+        background;
+        clear;
+        defaultThemes;
+        delay;
+        detectRetina;
+        duration;
+        fpsLimit;
+        fullScreen;
+        hdr;
+        key;
+        name;
+        particles;
+        pauseOnBlur;
+        pauseOnOutsideViewport;
+        preset;
+        resize;
+        smooth;
+        style;
+        zLayers;
+        _container;
+        _engine;
         constructor(engine, container) {
-            this._findDefaultTheme = mode => {
-                return (this.themes.find(theme => theme.default.value && theme.default.mode === mode) ??
-                    this.themes.find(theme => theme.default.value && theme.default.mode === ThemeMode_js_1.ThemeMode.any));
-            };
-            this._importPreset = preset => {
-                this.load(this._engine.getPreset(preset));
-            };
             this._engine = engine;
             this._container = container;
             this.autoPlay = true;
@@ -43,15 +53,12 @@
             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);
             this.pauseOnBlur = true;
             this.pauseOnOutsideViewport = true;
-            this.responsive = [];
+            this.resize = new ResizeEvent_js_1.ResizeEvent();
             this.smooth = false;
             this.style = {};
-            this.themes = [];
             this.zLayers = 100;
         }
         load(data) {
@@ -109,72 +116,19 @@
             else {
                 this.fullScreen.load(fullScreen);
             }
-            this.interactivity.load(data.interactivity);
-            if (data.manualParticles) {
-                this.manualParticles = data.manualParticles.map(t => {
-                    const tmp = new ManualParticle_js_1.ManualParticle();
-                    tmp.load(t);
-                    return tmp;
-                });
-            }
             this.particles.load(data.particles);
+            this.resize.load(data.resize);
             this.style = (0, Utils_js_1.deepExtend)(this.style, data.style);
-            this._engine.loadOptions(this, data);
             if (data.smooth !== undefined) {
                 this.smooth = data.smooth;
             }
-            const interactors = this._engine.interactors.get(this._container);
-            if (interactors) {
-                for (const interactor of interactors) {
-                    if (interactor.loadOptions) {
-                        interactor.loadOptions(this, data);
-                    }
-                }
-            }
-            if (data.responsive !== undefined) {
-                for (const responsive of data.responsive) {
-                    const optResponsive = new Responsive_js_1.Responsive();
-                    optResponsive.load(responsive);
-                    this.responsive.push(optResponsive);
-                }
-            }
-            this.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
-            if (data.themes !== undefined) {
-                for (const theme of data.themes) {
-                    const existingTheme = this.themes.find(t => t.name === theme.name);
-                    if (existingTheme) {
-                        existingTheme.load(theme);
-                    }
-                    else {
-                        const optTheme = new Theme_js_1.Theme();
-                        optTheme.load(theme);
-                        this.themes.push(optTheme);
-                    }
-                }
-            }
-            this.defaultThemes.dark = this._findDefaultTheme(ThemeMode_js_1.ThemeMode.dark)?.name;
-            this.defaultThemes.light = this._findDefaultTheme(ThemeMode_js_1.ThemeMode.light)?.name;
-        }
-        setResponsive(width, pxRatio, defaultOptions) {
-            this.load(defaultOptions);
-            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;
-        }
-        setTheme(name) {
-            if (name) {
-                const chosenTheme = this.themes.find(theme => theme.name === name);
-                if (chosenTheme) {
-                    this.load(chosenTheme.options);
-                }
-            }
-            else {
-                const mediaMatch = (0, Utils_js_1.safeMatchMedia)("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch?.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? ThemeMode_js_1.ThemeMode.dark : ThemeMode_js_1.ThemeMode.light);
-                if (defaultTheme) {
-                    this.load(defaultTheme.options);
-                }
-            }
+            this._engine.plugins.forEach(plugin => {
+                plugin.loadOptions(this._container, this, data);
+            });
         }
+        _importPreset = preset => {
+            this.load(this._engine.getPreset(preset));
+        };
     }
     exports.Options = Options;
 });

package/umd/Options/Classes/OptionsColor.js

@@ -12,6 +12,7 @@
     exports.OptionsColor = void 0;
     const TypeUtils_js_1 = require("../../Utils/TypeUtils.js");
     class OptionsColor {
+        value;
         constructor() {
             this.value = "";
         }

package/umd/Options/Classes/Particles/Bounce/ParticlesBounce.js

@@ -13,6 +13,8 @@
     const ParticlesBounceFactor_js_1 = require("./ParticlesBounceFactor.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class ParticlesBounce {
+        horizontal;
+        vertical;
         constructor() {
             this.horizontal = new ParticlesBounceFactor_js_1.ParticlesBounceFactor();
             this.vertical = new ParticlesBounceFactor_js_1.ParticlesBounceFactor();

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

@@ -13,6 +13,10 @@
     const Utils_js_1 = require("../../../../Utils/Utils.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class Effect {
+        close;
+        fill;
+        options;
+        type;
         constructor() {
             this.close = true;
             this.fill = true;

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

@@ -21,6 +21,24 @@
     const Spin_js_1 = require("./Spin.js");
     const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class Move {
+        angle;
+        attract;
+        center;
+        decay;
+        direction;
+        distance;
+        drift;
+        enable;
+        gravity;
+        outModes;
+        path;
+        random;
+        size;
+        speed;
+        spin;
+        straight;
+        vibrate;
+        warp;
         constructor() {
             this.angle = new MoveAngle_js_1.MoveAngle();
             this.attract = new MoveAttract_js_1.MoveAttract();

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

@@ -13,6 +13,8 @@
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class MoveAngle {
+        offset;
+        value;
         constructor() {
             this.offset = 0;
             this.value = 90;

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

@@ -13,6 +13,9 @@
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class MoveAttract {
+        distance;
+        enable;
+        rotate;
         constructor() {
             this.distance = 200;
             this.enable = false;

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

@@ -13,6 +13,10 @@
     const PixelMode_js_1 = require("../../../../Enums/Modes/PixelMode.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class MoveCenter {
+        mode;
+        radius;
+        x;
+        y;
         constructor() {
             this.x = 50;
             this.y = 50;

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

@@ -13,6 +13,10 @@
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     const MathUtils_js_1 = require("../../../../Utils/MathUtils.js");
     class MoveGravity {
+        acceleration;
+        enable;
+        inverse;
+        maxSpeed;
         constructor() {
             this.acceleration = 9.81;
             this.enable = false;

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

@@ -23,6 +23,20 @@
     const ZIndex_js_1 = require("./ZIndex/ZIndex.js");
     const TypeUtils_js_1 = require("../../../Utils/TypeUtils.js");
     class ParticlesOptions {
+        bounce;
+        color;
+        effect;
+        groups;
+        move;
+        number;
+        opacity;
+        reduceDuplicates;
+        shape;
+        size;
+        stroke;
+        zIndex;
+        _container;
+        _engine;
         constructor(engine, container) {
             this._engine = engine;
             this._container = container;
@@ -67,9 +81,6 @@
             this.shape.load(data.shape);
             this.size.load(data.size);
             this.zIndex.load(data.zIndex);
-            if (data.interactivity !== undefined) {
-                this.interactivity = (0, Utils_js_1.deepExtend)({}, data.interactivity);
-            }
             const strokeToLoad = data.stroke;
             if (strokeToLoad) {
                 this.stroke = (0, Utils_js_1.executeOnSingleOrMultiple)(strokeToLoad, t => {
@@ -79,6 +90,11 @@
                 });
             }
             if (this._container) {
+                for (const plugin of this._engine.plugins) {
+                    if (plugin.loadParticlesOptions) {
+                        plugin.loadParticlesOptions(this._container, this, data);
+                    }
+                }
                 const updaters = this._engine.updaters.get(this._container);
                 if (updaters) {
                     for (const updater of updaters) {
@@ -87,14 +103,6 @@
                         }
                     }
                 }
-                const interactors = this._engine.interactors.get(this._container);
-                if (interactors) {
-                    for (const interactor of interactors) {
-                        if (interactor.loadParticlesOptions) {
-                            interactor.loadParticlesOptions(this, data);
-                        }
-                    }
-                }
             }
         }
     }

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

@@ -13,6 +13,10 @@
     const Utils_js_1 = require("../../../../Utils/Utils.js");
     const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
     class Shape {
+        close;
+        fill;
+        options;
+        type;
         constructor() {
             this.close = true;
             this.fill = true;

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/{Interactivity/Events/ResizeEvent.js → ResizeEvent.js}

@@ -4,14 +4,16 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/TypeUtils.js"], factory);
+        define(["require", "exports", "../../Utils/TypeUtils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ResizeEvent = void 0;
-    const TypeUtils_js_1 = require("../../../../Utils/TypeUtils.js");
+    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();