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

package/cjs/Options/Classes/Options.js

@@ -6,11 +6,31 @@ import { ResizeEvent } from "./ResizeEvent.js";
 import { loadParticlesOptions } from "../../Utils/OptionsUtils.js";
 import { setRangeValue } from "../../Utils/MathUtils.js";
 export class Options {
-    constructor(engine, container) {
-        this._importPreset = preset => {
-            this.load(this._engine.getPreset(preset));
-        };
-        this._engine = engine;
+    autoPlay;
+    background;
+    clear;
+    defaultThemes;
+    delay;
+    detectRetina;
+    duration;
+    fpsLimit;
+    fullScreen;
+    hdr;
+    key;
+    name;
+    palette;
+    particles;
+    pauseOnBlur;
+    pauseOnOutsideViewport;
+    preset;
+    resize;
+    smooth;
+    style;
+    zLayers;
+    _container;
+    _pluginManager;
+    constructor(pluginManager, container) {
+        this._pluginManager = pluginManager;
         this._container = container;
         this.autoPlay = true;
         this.background = new Background();
@@ -22,7 +42,7 @@ export class Options {
         this.duration = 0;
         this.fpsLimit = 120;
         this.hdr = true;
-        this.particles = loadParticlesOptions(this._engine, this._container);
+        this.particles = loadParticlesOptions(this._pluginManager, this._container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
         this.resize = new ResizeEvent();
@@ -35,10 +55,15 @@ export class Options {
             return;
         }
         if (data.preset !== undefined) {
-            executeOnSingleOrMultiple(data.preset, preset => {
+            this.preset = data.preset;
+            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;
         }
@@ -91,8 +116,42 @@ export class Options {
         if (data.smooth !== undefined) {
             this.smooth = data.smooth;
         }
-        this._engine.plugins.forEach(plugin => {
+        this._pluginManager.plugins.forEach(plugin => {
             plugin.loadOptions(this._container, this, data);
         });
     }
+    _importPalette = palette => {
+        const paletteData = this._pluginManager.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._pluginManager.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,9 +1,11 @@
 import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Effect {
+    close;
+    options;
+    type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = [];
     }
@@ -23,9 +25,6 @@ export class Effect {
         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/cjs/Options/Classes/Particles/Fill.js

@@ -0,0 +1,28 @@
+import { AnimatableColor } from "../AnimatableColor.js";
+import { isNull } from "../../../Utils/TypeUtils.js";
+import { setRangeValue } from "../../../Utils/MathUtils.js";
+export class Fill {
+    color;
+    enable;
+    opacity;
+    constructor() {
+        this.enable = true;
+        this.color = new AnimatableColor();
+        this.color.value = "#fff";
+        this.opacity = 1;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = AnimatableColor.create(this.color, data.color);
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = setRangeValue(data.opacity);
+        }
+    }
+}

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

@@ -1,7 +1,6 @@
 import { MoveDirection } from "../../../../Enums/Directions/MoveDirection.js";
 import { isNull, isNumber, isObject } from "../../../../Utils/TypeUtils.js";
 import { MoveAngle } from "./MoveAngle.js";
-import { MoveAttract } from "./MoveAttract.js";
 import { MoveCenter } from "./MoveCenter.js";
 import { MoveGravity } from "./MoveGravity.js";
 import { MovePath } from "./Path/MovePath.js";
@@ -9,9 +8,25 @@ import { OutModes } from "./OutModes.js";
 import { Spin } from "./Spin.js";
 import { setRangeValue } from "../../../../Utils/MathUtils.js";
 export class Move {
+    angle;
+    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();
         this.center = new MoveCenter();
         this.decay = 0;
         this.distance = {};
@@ -34,7 +49,6 @@ export class Move {
             return;
         }
         this.angle.load(isNumber(data.angle) ? { value: data.angle } : data.angle);
-        this.attract.load(data.attract);
         this.center.load(data.center);
         if (data.decay !== undefined) {
             this.decay = setRangeValue(data.decay);

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/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

@@ -1,6 +1,6 @@
 import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
-import { AnimatableColor } from "../AnimatableColor.js";
 import { Effect } from "./Effect/Effect.js";
+import { Fill } from "./Fill.js";
 import { Move } from "./Move/Move.js";
 import { Opacity } from "./Opacity/Opacity.js";
 import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
@@ -11,13 +11,26 @@ import { Stroke } from "./Stroke.js";
 import { ZIndex } from "./ZIndex/ZIndex.js";
 import { isNull } from "../../../Utils/TypeUtils.js";
 export 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();
-        this.color = new AnimatableColor();
-        this.color.value = "#fff";
         this.effect = new Effect();
+        this.fill = new Fill();
         this.groups = {};
         this.move = new Move();
         this.number = new ParticlesNumber();
@@ -34,7 +47,7 @@ export class ParticlesOptions {
         }
         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];
@@ -47,7 +60,6 @@ export class ParticlesOptions {
             this.reduceDuplicates = data.reduceDuplicates;
         }
         this.bounce.load(data.bounce);
-        this.color.load(AnimatableColor.create(this.color, data.color));
         this.effect.load(data.effect);
         this.move.load(data.move);
         this.number.load(data.number);
@@ -55,6 +67,14 @@ export class ParticlesOptions {
         this.shape.load(data.shape);
         this.size.load(data.size);
         this.zIndex.load(data.zIndex);
+        const fillToLoad = data.fill;
+        if (fillToLoad) {
+            this.fill = executeOnSingleOrMultiple(fillToLoad, t => {
+                const tmp = new Fill();
+                tmp.load(t);
+                return tmp;
+            });
+        }
         const strokeToLoad = data.stroke;
         if (strokeToLoad) {
             this.stroke = executeOnSingleOrMultiple(strokeToLoad, t => {
@@ -64,12 +84,12 @@ export class ParticlesOptions {
             });
         }
         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/cjs/Options/Classes/Particles/Shape/Shape.js

@@ -1,9 +1,11 @@
 import { deepExtend } from "../../../../Utils/Utils.js";
 import { isNull } from "../../../../Utils/TypeUtils.js";
 export class Shape {
+    close;
+    options;
+    type;
     constructor() {
         this.close = true;
-        this.fill = true;
         this.options = {};
         this.type = "circle";
     }
@@ -23,9 +25,6 @@ export class Shape {
         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/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/ResizeEvent.js

@@ -1,5 +1,7 @@
 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();