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

package/cjs/Options/Classes/Options.js

@@ -1,24 +1,34 @@
-import { deepExtend, executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils.js";
+import { deepExtend, executeOnSingleOrMultiple } from "../../Utils/Utils.js";
 import { isBoolean, isNull } from "../../Utils/TypeUtils.js";
 import { Background } from "./Background/Background.js";
 import { FullScreen } from "./FullScreen/FullScreen.js";
-import { Interactivity } from "./Interactivity/Interactivity.js";
-import { ManualParticle } from "./ManualParticle.js";
-import { Responsive } from "./Responsive.js";
-import { ResponsiveMode } from "../../Enums/Modes/ResponsiveMode.js";
-import { Theme } from "./Theme/Theme.js";
-import { ThemeMode } from "../../Enums/Modes/ThemeMode.js";
+import { ResizeEvent } from "./ResizeEvent.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export 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.any));
-        };
-        this._importPreset = preset => {
-            this.load(this._engine.getPreset(preset));
-        };
         this._engine = engine;
         this._container = container;
         this.autoPlay = true;
@@ -31,15 +41,12 @@ export class Options {
         this.duration = 0;
         this.fpsLimit = 120;
         this.hdr = true;
-        this.interactivity = new Interactivity(engine, container);
-        this.manualParticles = [];
         this.particles = loadParticlesOptions(this._engine, this._container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
-        this.responsive = [];
+        this.resize = new ResizeEvent();
         this.smooth = false;
         this.style = {};
-        this.themes = [];
         this.zLayers = 100;
     }
     load(data) {
@@ -97,70 +104,17 @@ export class Options {
         else {
             this.fullScreen.load(fullScreen);
         }
-        this.interactivity.load(data.interactivity);
-        if (data.manualParticles) {
-            this.manualParticles = data.manualParticles.map(t => {
-                const tmp = new ManualParticle();
-                tmp.load(t);
-                return tmp;
-            });
-        }
         this.particles.load(data.particles);
+        this.resize.load(data.resize);
         this.style = 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();
-                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();
-                    optTheme.load(theme);
-                    this.themes.push(optTheme);
-                }
-            }
-        }
-        this.defaultThemes.dark = this._findDefaultTheme(ThemeMode.dark)?.name;
-        this.defaultThemes.light = this._findDefaultTheme(ThemeMode.light)?.name;
-    }
-    setResponsive(width, pxRatio, defaultOptions) {
-        this.load(defaultOptions);
-        const responsiveOptions = this.responsive.find(t => t.mode === 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 = safeMatchMedia("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch?.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? ThemeMode.dark : 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));
+    };
 }

package/cjs/Options/Classes/OptionsColor.js

@@ -1,5 +1,6 @@
 import { isArray, isNull, isString } from "../../Utils/TypeUtils.js";
 export class OptionsColor {
+    value;
     constructor() {
         this.value = "";
     }

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

@@ -1,6 +1,8 @@
 import { ParticlesBounceFactor } from "./ParticlesBounceFactor.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesBounce {
+    horizontal;
+    vertical;
     constructor() {
         this.horizontal = new ParticlesBounceFactor();
         this.vertical = new ParticlesBounceFactor();

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

@@ -1,6 +1,10 @@
 import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Effect {
+    close;
+    fill;
+    options;
+    type;
     constructor() {
         this.close = true;
         this.fill = true;

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

@@ -9,6 +9,24 @@ import { OutModes } from "./OutModes.js";
 import { Spin } from "./Spin.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export 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();
         this.attract = new MoveAttract();

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

@@ -1,6 +1,8 @@
 import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class MoveAngle {
+    offset;
+    value;
     constructor() {
         this.offset = 0;
         this.value = 90;

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

@@ -1,6 +1,9 @@
 import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class MoveAttract {
+    distance;
+    enable;
+    rotate;
     constructor() {
         this.distance = 200;
         this.enable = false;

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

@@ -1,6 +1,10 @@
 import { PixelMode } from "../../../../Enums/Modes/PixelMode.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class MoveCenter {
+    mode;
+    radius;
+    x;
+    y;
     constructor() {
         this.x = 50;
         this.y = 50;

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

@@ -1,6 +1,10 @@
 import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class MoveGravity {
+    acceleration;
+    enable;
+    inverse;
+    maxSpeed;
     constructor() {
         this.acceleration = 9.81;
         this.enable = false;

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

@@ -1,6 +1,11 @@
 import { OutMode } from "../../../../Enums/Modes/OutMode.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class OutModes {
+    bottom;
+    default;
+    left;
+    right;
+    top;
     constructor() {
         this.default = OutMode.out;
     }

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

@@ -2,6 +2,11 @@ import { ValueWithRandom } from "../../../ValueWithRandom.js";
 import { deepExtend } from "../../../../../Utils/Utils.js";
 import { isNull } from "../../../../../Utils/TypeUtils.js";
 export class MovePath {
+    clamp;
+    delay;
+    enable;
+    generator;
+    options;
     constructor() {
         this.clamp = true;
         this.delay = new ValueWithRandom();

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

@@ -2,6 +2,9 @@ import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class Spin {
+    acceleration;
+    enable;
+    position;
     constructor() {
         this.acceleration = 0;
         this.enable = false;

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

@@ -1,5 +1,8 @@
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesDensity {
+    enable;
+    height;
+    width;
     constructor() {
         this.enable = false;
         this.width = 1920;

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

@@ -2,6 +2,9 @@ import { ParticlesDensity } from "./ParticlesDensity.js";
 import { ParticlesNumberLimit } from "./ParticlesNumberLimit.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesNumber {
+    density;
+    limit;
+    value;
     constructor() {
         this.density = new ParticlesDensity();
         this.limit = new ParticlesNumberLimit();

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

@@ -1,6 +1,8 @@
 import { LimitMode } from "../../../../Enums/Modes/LimitMode.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ParticlesNumberLimit {
+    mode;
+    value;
     constructor() {
         this.mode = LimitMode.delete;
         this.value = 0;

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

@@ -2,6 +2,7 @@ import { OpacityAnimation } from "./OpacityAnimation.js";
 import { RangedAnimationValueWithRandom } from "../../ValueWithRandom.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Opacity extends RangedAnimationValueWithRandom {
+    animation;
     constructor() {
         super();
         this.animation = new OpacityAnimation();

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

@@ -2,6 +2,7 @@ import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class OpacityAnimation extends RangedAnimationOptions {
+    destroy;
     constructor() {
         super();
         this.destroy = DestroyType.none;

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

@@ -11,6 +11,20 @@ import { Stroke } from "./Stroke.js";
 import { ZIndex } from "./ZIndex/ZIndex.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export 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;
@@ -55,9 +69,6 @@ export class ParticlesOptions {
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
-        if (data.interactivity !== undefined) {
-            this.interactivity = deepExtend({}, data.interactivity);
-        }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
             this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
@@ -67,6 +78,11 @@ export class ParticlesOptions {
             });
         }
         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) {
@@ -75,14 +91,6 @@ export class ParticlesOptions {
                     }
                 }
             }
-            const interactors = this._engine.interactors.get(this._container);
-            if (interactors) {
-                for (const interactor of interactors) {
-                    if (interactor.loadParticlesOptions) {
-                        interactor.loadParticlesOptions(this, data);
-                    }
-                }
-            }
         }
     }
 }

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

@@ -1,6 +1,10 @@
 import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Shape {
+    close;
+    fill;
+    options;
+    type;
     constructor() {
         this.close = true;
         this.fill = true;

package/cjs/Options/Classes/Particles/Size/Size.js

@@ -2,6 +2,7 @@ import { RangedAnimationValueWithRandom } from "../../ValueWithRandom.js";
 import { SizeAnimation } from "./SizeAnimation.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Size extends RangedAnimationValueWithRandom {
+    animation;
     constructor() {
         super();
         this.animation = new SizeAnimation();

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

@@ -2,6 +2,7 @@ import { DestroyType } from "../../../../Enums/Types/DestroyType.js";
 import { RangedAnimationOptions } from "../../AnimationOptions.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class SizeAnimation extends RangedAnimationOptions {
+    destroy;
     constructor() {
         super();
         this.destroy = DestroyType.none;

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

@@ -2,6 +2,9 @@ import { AnimatableColor } from "../AnimatableColor.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../../Utils/MathUtils.js";
 export class Stroke {
+    color;
+    opacity;
+    width;
     constructor() {
         this.width = 0;
     }

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

@@ -1,6 +1,9 @@
 import { ValueWithRandom } from "../../ValueWithRandom.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class ZIndex extends ValueWithRandom {
+    opacityRate;
+    sizeRate;
+    velocityRate;
     constructor() {
         super();
         this.opacityRate = 1;

package/cjs/Options/Classes/{Interactivity/Events/ResizeEvent.js → ResizeEvent.js}

@@ -1,5 +1,7 @@
-import { isNull } from "../../../../Utils/TypeUtils.js";
+import { isNull } from "../../Utils/TypeUtils.js";
 export class ResizeEvent {
+    delay;
+    enable;
     constructor() {
         this.delay = 0.5;
         this.enable = true;

package/cjs/Options/Classes/ValueWithRandom.js

@@ -2,6 +2,7 @@ import { AnimationOptions, RangedAnimationOptions } from "./AnimationOptions.js"
 import { isNull } from "../../Utils/TypeUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class ValueWithRandom {
+    value;
     constructor() {
         this.value = 0;
     }
@@ -15,10 +16,7 @@ export class ValueWithRandom {
     }
 }
 export class AnimationValueWithRandom extends ValueWithRandom {
-    constructor() {
-        super();
-        this.animation = new AnimationOptions();
-    }
+    animation = new AnimationOptions();
     load(data) {
         super.load(data);
         if (isNull(data)) {
@@ -31,6 +29,7 @@ export class AnimationValueWithRandom extends ValueWithRandom {
     }
 }
 export class RangedAnimationValueWithRandom extends AnimationValueWithRandom {
+    animation;
     constructor() {
         super();
         this.animation = new RangedAnimationOptions();