@tsparticles/engine 3.0.0-alpha.0 → 3.0.0-beta.0

package/browser/Core/Utils/Vector3d.js

@@ -1,6 +1,12 @@
+import { errorPrefix } from "./Constants";
+import { isNumber } from "../../Utils/Utils";
 export class Vector3d {
     constructor(xOrCoords, y, z) {
-        if (typeof xOrCoords !== "number" && xOrCoords) {
+        this._updateFromAngle = (angle, length) => {
+            this.x = Math.cos(angle) * length;
+            this.y = Math.sin(angle) * length;
+        };
+        if (!isNumber(xOrCoords) && xOrCoords) {
             this.x = xOrCoords.x;
             this.y = xOrCoords.y;
             const coords3d = xOrCoords;
@@ -9,10 +15,10 @@ export class Vector3d {
         else if (xOrCoords !== undefined && y !== undefined) {
             this.x = xOrCoords;
             this.y = y;
-            this.z = z !== null && z !== void 0 ? z : 0;
+            this.z = z ?? 0;
         }
         else {
-            throw new Error("tsParticles - Vector3d not initialized correctly");
+            throw new Error(`${errorPrefix} Vector3d not initialized correctly`);
         }
     }
     static get origin() {
@@ -22,13 +28,13 @@ export class Vector3d {
         return Math.atan2(this.y, this.x);
     }
     set angle(angle) {
-        this.updateFromAngle(angle, this.length);
+        this._updateFromAngle(angle, this.length);
     }
     get length() {
         return Math.sqrt(this.getLengthSq());
     }
     set length(length) {
-        this.updateFromAngle(this.angle, length);
+        this._updateFromAngle(this.angle, length);
     }
     static clone(source) {
         return Vector3d.create(source.x, source.y, source.z);
@@ -72,6 +78,12 @@ export class Vector3d {
         this.y *= n;
         this.z *= n;
     }
+    normalize() {
+        const length = this.length;
+        if (length != 0) {
+            this.multTo(1.0 / length);
+        }
+    }
     rotate(angle) {
         return Vector3d.create(this.x * Math.cos(angle) - this.y * Math.sin(angle), this.x * Math.sin(angle) + this.y * Math.cos(angle), 0);
     }
@@ -89,8 +101,4 @@ export class Vector3d {
         this.y -= v.y;
         this.z -= v.z;
     }
-    updateFromAngle(angle, length) {
-        this.x = Math.cos(angle) * length;
-        this.y = Math.sin(angle) * length;
-    }
 }

package/browser/Options/Classes/AnimatableColor.js

@@ -1,3 +1,4 @@
+import { isArray, isString } from "../../Utils/Utils";
 import { HslAnimation } from "./HslAnimation";
 import { OptionsColor } from "./OptionsColor";
 export class AnimatableColor extends OptionsColor {
@@ -9,7 +10,7 @@ export class AnimatableColor extends OptionsColor {
         const color = new AnimatableColor();
         color.load(source);
         if (data !== undefined) {
-            if (typeof data === "string" || data instanceof Array) {
+            if (isString(data) || isArray(data)) {
                 color.load({ value: data });
             }
             else {

package/browser/Options/Classes/AnimationOptions.js

@@ -5,6 +5,7 @@ export class AnimationOptions {
         this.enable = false;
         this.speed = 1;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
     }
     load(data) {
@@ -23,6 +24,9 @@ export class AnimationOptions {
         if (data.decay !== undefined) {
             this.decay = setRangeValue(data.decay);
         }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }
@@ -31,6 +35,7 @@ export class AnimationOptions {
 export class RangedAnimationOptions extends AnimationOptions {
     constructor() {
         super();
+        this.mode = "auto";
         this.startValue = "random";
     }
     load(data) {
@@ -38,8 +43,8 @@ export class RangedAnimationOptions extends AnimationOptions {
         if (!data) {
             return;
         }
-        if (data.minimumValue !== undefined) {
-            this.minimumValue = data.minimumValue;
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
         }
         if (data.startValue !== undefined) {
             this.startValue = data.startValue;

package/browser/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -1,4 +1,5 @@
 import { BackgroundMaskCover } from "./BackgroundMaskCover";
+import { isString } from "../../../Utils/Utils";
 export class BackgroundMask {
     constructor() {
         this.composite = "destination-out";
@@ -14,7 +15,7 @@ export class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover;
-            const color = (typeof data.cover === "string" ? { color: data.cover } : data.cover);
+            const color = (isString(data.cover) ? { color: data.cover } : data.cover);
             this.cover.load(cover.color !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {

package/browser/Options/Classes/ColorAnimation.js

@@ -5,6 +5,7 @@ export class ColorAnimation {
         this.enable = false;
         this.offset = 0;
         this.speed = 1;
+        this.delay = 0;
         this.decay = 0;
         this.sync = true;
     }
@@ -27,6 +28,9 @@ export class ColorAnimation {
         if (data.decay !== undefined) {
             this.decay = setRangeValue(data.decay);
         }
+        if (data.delay !== undefined) {
+            this.delay = setRangeValue(data.delay);
+        }
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }

package/browser/Options/Classes/Interactivity/Events/DivEvent.js

@@ -1,4 +1,3 @@
-import { executeOnSingleOrMultiple } from "../../../../Utils/Utils";
 export class DivEvent {
     constructor() {
         this.selectors = [];
@@ -6,33 +5,10 @@ export class DivEvent {
         this.mode = [];
         this.type = "circle";
     }
-    get el() {
-        return this.elementId;
-    }
-    set el(value) {
-        this.elementId = value;
-    }
-    get elementId() {
-        return this.ids;
-    }
-    set elementId(value) {
-        this.ids = value;
-    }
-    get ids() {
-        return executeOnSingleOrMultiple(this.selectors, (t) => t.replace("#", ""));
-    }
-    set ids(value) {
-        this.selectors = executeOnSingleOrMultiple(value, (t) => `#${t}`);
-    }
     load(data) {
-        var _a, _b;
         if (!data) {
             return;
         }
-        const ids = (_b = (_a = data.ids) !== null && _a !== void 0 ? _a : data.elementId) !== null && _b !== void 0 ? _b : data.el;
-        if (ids !== undefined) {
-            this.ids = ids;
-        }
         if (data.selectors !== undefined) {
             this.selectors = data.selectors;
         }

package/browser/Options/Classes/Interactivity/Events/Events.js

@@ -1,8 +1,8 @@
+import { executeOnSingleOrMultiple, isBoolean } from "../../../../Utils/Utils";
 import { ClickEvent } from "./ClickEvent";
 import { DivEvent } from "./DivEvent";
 import { HoverEvent } from "./HoverEvent";
 import { ResizeEvent } from "./ResizeEvent";
-import { executeOnSingleOrMultiple } from "../../../../Utils/Utils";
 export class Events {
     constructor() {
         this.onClick = new ClickEvent();
@@ -10,31 +10,12 @@ export class Events {
         this.onHover = new HoverEvent();
         this.resize = new ResizeEvent();
     }
-    get onclick() {
-        return this.onClick;
-    }
-    set onclick(value) {
-        this.onClick = value;
-    }
-    get ondiv() {
-        return this.onDiv;
-    }
-    set ondiv(value) {
-        this.onDiv = value;
-    }
-    get onhover() {
-        return this.onHover;
-    }
-    set onhover(value) {
-        this.onHover = value;
-    }
     load(data) {
-        var _a, _b, _c;
         if (!data) {
             return;
         }
-        this.onClick.load((_a = data.onClick) !== null && _a !== void 0 ? _a : data.onclick);
-        const onDiv = (_b = data.onDiv) !== null && _b !== void 0 ? _b : data.ondiv;
+        this.onClick.load(data.onClick);
+        const onDiv = data.onDiv;
         if (onDiv !== undefined) {
             this.onDiv = executeOnSingleOrMultiple(onDiv, (t) => {
                 const tmp = new DivEvent();
@@ -42,8 +23,8 @@ export class Events {
                 return tmp;
             });
         }
-        this.onHover.load((_c = data.onHover) !== null && _c !== void 0 ? _c : data.onhover);
-        if (typeof data.resize === "boolean") {
+        this.onHover.load(data.onHover);
+        if (isBoolean(data.resize)) {
             this.resize.enable = data.resize;
         }
         else {

package/browser/Options/Classes/Interactivity/Interactivity.js

@@ -6,18 +6,11 @@ export class Interactivity {
         this.events = new Events();
         this.modes = new Modes(engine, container);
     }
-    get detect_on() {
-        return this.detectsOn;
-    }
-    set detect_on(value) {
-        this.detectsOn = value;
-    }
     load(data) {
-        var _a;
         if (!data) {
             return;
         }
-        const detectsOn = (_a = data.detectsOn) !== null && _a !== void 0 ? _a : data.detect_on;
+        const detectsOn = data.detectsOn;
         if (detectsOn !== undefined) {
             this.detectsOn = detectsOn;
         }

package/browser/Options/Classes/Interactivity/Modes/Modes.js

@@ -7,15 +7,18 @@ export class Modes {
         if (!data) {
             return;
         }
-        if (this._container) {
-            const interactors = this._engine.plugins.interactors.get(this._container);
-            if (interactors) {
-                for (const interactor of interactors) {
-                    if (interactor.loadModeOptions) {
-                        interactor.loadModeOptions(this, data);
-                    }
-                }
+        if (!this._container) {
+            return;
+        }
+        const interactors = this._engine.interactors.get(this._container);
+        if (!interactors) {
+            return;
+        }
+        for (const interactor of interactors) {
+            if (!interactor.loadModeOptions) {
+                continue;
             }
+            interactor.loadModeOptions(this, data);
         }
     }
 }

package/browser/Options/Classes/ManualParticle.js

@@ -1,17 +1,17 @@
 import { deepExtend } from "../../Utils/Utils";
 export class ManualParticle {
     load(data) {
-        var _a, _b;
         if (!data) {
             return;
         }
-        if (data.position !== undefined) {
+        if (data.position) {
             this.position = {
-                x: (_a = data.position.x) !== null && _a !== void 0 ? _a : 50,
-                y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50,
+                x: data.position.x ?? 50,
+                y: data.position.y ?? 50,
+                mode: data.position.mode ?? "percent",
             };
         }
-        if (data.options !== undefined) {
+        if (data.options) {
             this.options = deepExtend({}, data.options);
         }
     }

package/browser/Options/Classes/Options.js

@@ -1,4 +1,4 @@
-import { deepExtend, executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils";
+import { deepExtend, executeOnSingleOrMultiple, isBoolean, safeMatchMedia } from "../../Utils/Utils";
 import { Background } from "./Background/Background";
 import { BackgroundMask } from "./BackgroundMask/BackgroundMask";
 import { FullScreen } from "./FullScreen/FullScreen";
@@ -10,6 +10,13 @@ import { loadParticlesOptions } from "../../Utils/OptionsUtils";
 import { setRangeValue } from "../../Utils/NumberUtils";
 export class Options {
     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 === "any"));
+        };
+        this._importPreset = (preset) => {
+            this.load(this._engine.getPreset(preset));
+        };
         this._engine = engine;
         this._container = container;
         this.autoPlay = true;
@@ -23,7 +30,6 @@ export class Options {
         this.fpsLimit = 120;
         this.interactivity = new Interactivity(engine, container);
         this.manualParticles = [];
-        this.name = "default";
         this.particles = loadParticlesOptions(this._engine, this._container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
@@ -33,26 +39,7 @@ export class Options {
         this.themes = [];
         this.zLayers = 100;
     }
-    get backgroundMode() {
-        return this.fullScreen;
-    }
-    set backgroundMode(value) {
-        this.fullScreen.load(value);
-    }
-    get fps_limit() {
-        return this.fpsLimit;
-    }
-    set fps_limit(value) {
-        this.fpsLimit = value;
-    }
-    get retina_detect() {
-        return this.detectRetina;
-    }
-    set retina_detect(value) {
-        this.detectRetina = value;
-    }
     load(data) {
-        var _a, _b, _c, _d, _e;
         if (!data) {
             return;
         }
@@ -65,14 +52,14 @@ export class Options {
         if (data.delay !== undefined) {
             this.delay = setRangeValue(data.delay);
         }
-        const detectRetina = (_a = data.detectRetina) !== null && _a !== void 0 ? _a : data.retina_detect;
+        const detectRetina = data.detectRetina;
         if (detectRetina !== undefined) {
             this.detectRetina = detectRetina;
         }
         if (data.duration !== undefined) {
             this.duration = setRangeValue(data.duration);
         }
-        const fpsLimit = (_b = data.fpsLimit) !== null && _b !== void 0 ? _b : data.fps_limit;
+        const fpsLimit = data.fpsLimit;
         if (fpsLimit !== undefined) {
             this.fpsLimit = fpsLimit;
         }
@@ -86,8 +73,8 @@ export class Options {
             this.zLayers = data.zLayers;
         }
         this.background.load(data.background);
-        const fullScreen = (_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode;
-        if (typeof fullScreen === "boolean") {
+        const fullScreen = data.fullScreen;
+        if (isBoolean(fullScreen)) {
             this.fullScreen.enable = fullScreen;
         }
         else {
@@ -95,7 +82,7 @@ export class Options {
         }
         this.backgroundMask.load(data.backgroundMask);
         this.interactivity.load(data.interactivity);
-        if (data.manualParticles !== undefined) {
+        if (data.manualParticles) {
             this.manualParticles = data.manualParticles.map((t) => {
                 const tmp = new ManualParticle();
                 tmp.load(t);
@@ -104,11 +91,11 @@ export class Options {
         }
         this.particles.load(data.particles);
         this.style = deepExtend(this.style, data.style);
-        this._engine.plugins.loadOptions(this, data);
+        this._engine.loadOptions(this, data);
         if (data.smooth !== undefined) {
             this.smooth = data.smooth;
         }
-        const interactors = this._engine.plugins.interactors.get(this._container);
+        const interactors = this._engine.interactors.get(this._container);
         if (interactors) {
             for (const interactor of interactors) {
                 if (interactor.loadOptions) {
@@ -137,14 +124,14 @@ export class Options {
                 }
             }
         }
-        this.defaultThemes.dark = (_d = this._findDefaultTheme("dark")) === null || _d === void 0 ? void 0 : _d.name;
-        this.defaultThemes.light = (_e = this._findDefaultTheme("light")) === null || _e === void 0 ? void 0 : _e.name;
+        this.defaultThemes.dark = this._findDefaultTheme("dark")?.name;
+        this.defaultThemes.light = this._findDefaultTheme("light")?.name;
     }
     setResponsive(width, pxRatio, defaultOptions) {
         this.load(defaultOptions);
         const responsiveOptions = this.responsive.find((t) => t.mode === "screen" && screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
-        this.load(responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.options);
-        return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
+        this.load(responsiveOptions?.options);
+        return responsiveOptions?.maxWidth;
     }
     setTheme(name) {
         if (name) {
@@ -160,11 +147,4 @@ export class Options {
             }
         }
     }
-    _findDefaultTheme(mode) {
-        var _a;
-        return ((_a = this.themes.find((theme) => theme.default.value && theme.default.mode === mode)) !== null && _a !== void 0 ? _a : this.themes.find((theme) => theme.default.value && theme.default.mode === "any"));
-    }
-    _importPreset(preset) {
-        this.load(this._engine.plugins.getPreset(preset));
-    }
 }

package/browser/Options/Classes/OptionsColor.js

@@ -1,3 +1,4 @@
+import { isArray, isString } from "../../Utils/Utils";
 export class OptionsColor {
     constructor() {
         this.value = "";
@@ -6,7 +7,7 @@ export class OptionsColor {
         const color = new OptionsColor();
         color.load(source);
         if (data !== undefined) {
-            if (typeof data === "string" || data instanceof Array) {
+            if (isString(data) || isArray(data)) {
                 color.load({ value: data });
             }
             else {
@@ -16,7 +17,7 @@ export class OptionsColor {
         return color;
     }
     load(data) {
-        if ((data === null || data === void 0 ? void 0 : data.value) === undefined) {
+        if (data?.value === undefined) {
             return;
         }
         this.value = data.value;

package/browser/Options/Classes/Particles/Collisions/Collisions.js

@@ -1,11 +1,13 @@
 import { CollisionsAbsorb } from "./CollisionsAbsorb";
 import { CollisionsOverlap } from "./CollisionsOverlap";
 import { ParticlesBounce } from "../Bounce/ParticlesBounce";
+import { setRangeValue } from "../../../../Utils/NumberUtils";
 export class Collisions {
     constructor() {
         this.absorb = new CollisionsAbsorb();
         this.bounce = new ParticlesBounce();
         this.enable = false;
+        this.maxSpeed = 50;
         this.mode = "bounce";
         this.overlap = new CollisionsOverlap();
     }
@@ -18,6 +20,9 @@ export class Collisions {
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
+        if (data.maxSpeed !== undefined) {
+            this.maxSpeed = setRangeValue(data.maxSpeed);
+        }
         if (data.mode !== undefined) {
             this.mode = data.mode;
         }

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

@@ -1,3 +1,4 @@
+import { isNumber, isObject } from "../../../../Utils/Utils";
 import { MoveAngle } from "./MoveAngle";
 import { MoveAttract } from "./MoveAttract";
 import { MoveCenter } from "./MoveCenter";
@@ -29,41 +30,11 @@ export class Move {
         this.vibrate = false;
         this.warp = false;
     }
-    get bounce() {
-        return this.collisions;
-    }
-    set bounce(value) {
-        this.collisions = value;
-    }
-    get collisions() {
-        return false;
-    }
-    set collisions(_) {
-    }
-    get noise() {
-        return this.path;
-    }
-    set noise(value) {
-        this.path = value;
-    }
-    get outMode() {
-        return this.outModes.default;
-    }
-    set outMode(value) {
-        this.outModes.default = value;
-    }
-    get out_mode() {
-        return this.outMode;
-    }
-    set out_mode(value) {
-        this.outMode = value;
-    }
     load(data) {
-        var _a, _b, _c;
         if (!data) {
             return;
         }
-        this.angle.load(typeof data.angle === "number" ? { value: data.angle } : data.angle);
+        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) {
@@ -73,13 +44,12 @@ export class Move {
             this.direction = data.direction;
         }
         if (data.distance !== undefined) {
-            this.distance =
-                typeof data.distance === "number"
-                    ? {
-                        horizontal: data.distance,
-                        vertical: data.distance,
-                    }
-                    : Object.assign({}, data.distance);
+            this.distance = isNumber(data.distance)
+                ? {
+                    horizontal: data.distance,
+                    vertical: data.distance,
+                }
+                : { ...data.distance };
         }
         if (data.drift !== undefined) {
             this.drift = setRangeValue(data.drift);
@@ -88,9 +58,9 @@ export class Move {
             this.enable = data.enable;
         }
         this.gravity.load(data.gravity);
-        const outModes = (_b = (_a = data.outModes) !== null && _a !== void 0 ? _a : data.outMode) !== null && _b !== void 0 ? _b : data.out_mode;
+        const outModes = data.outModes;
         if (outModes !== undefined) {
-            if (typeof outModes === "object") {
+            if (isObject(outModes)) {
                 this.outModes.load(outModes);
             }
             else {
@@ -99,7 +69,7 @@ export class Move {
                 });
             }
         }
-        this.path.load((_c = data.path) !== null && _c !== void 0 ? _c : data.noise);
+        this.path.load(data.path);
         if (data.random !== undefined) {
             this.random = data.random;
         }

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

@@ -8,20 +8,7 @@ export class MoveAttract {
             y: 3000,
         };
     }
-    get rotateX() {
-        return this.rotate.x;
-    }
-    set rotateX(value) {
-        this.rotate.x = value;
-    }
-    get rotateY() {
-        return this.rotate.y;
-    }
-    set rotateY(value) {
-        this.rotate.y = value;
-    }
     load(data) {
-        var _a, _b, _c, _d;
         if (!data) {
             return;
         }
@@ -31,13 +18,15 @@ export class MoveAttract {
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
-        const rotateX = (_b = (_a = data.rotate) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : data.rotateX;
-        if (rotateX !== undefined) {
-            this.rotate.x = rotateX;
-        }
-        const rotateY = (_d = (_c = data.rotate) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : data.rotateY;
-        if (rotateY !== undefined) {
-            this.rotate.y = rotateY;
+        if (data.rotate) {
+            const rotateX = data.rotate.x;
+            if (rotateX !== undefined) {
+                this.rotate.x = rotateX;
+            }
+            const rotateY = data.rotate.y;
+            if (rotateY !== undefined) {
+                this.rotate.y = rotateY;
+            }
         }
     }
 }

package/browser/Options/Classes/Particles/Move/MoveTrail.js

@@ -5,12 +5,6 @@ export class MoveTrail {
         this.length = 10;
         this.fill = new MoveTrailFill();
     }
-    get fillColor() {
-        return this.fill.color;
-    }
-    set fillColor(value) {
-        this.fill.load({ color: value });
-    }
     load(data) {
         if (!data) {
             return;
@@ -18,8 +12,8 @@ export class MoveTrail {
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
-        if (data.fill !== undefined || data.fillColor !== undefined) {
-            this.fill.load(data.fill || { color: data.fillColor });
+        if (data.fill !== undefined) {
+            this.fill.load(data.fill);
         }
         if (data.length !== undefined) {
             this.length = data.length;

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

@@ -3,16 +3,15 @@ export class OutModes {
         this.default = "out";
     }
     load(data) {
-        var _a, _b, _c, _d;
         if (!data) {
             return;
         }
         if (data.default !== undefined) {
             this.default = data.default;
         }
-        this.bottom = (_a = data.bottom) !== null && _a !== void 0 ? _a : data.default;
-        this.left = (_b = data.left) !== null && _b !== void 0 ? _b : data.default;
-        this.right = (_c = data.right) !== null && _c !== void 0 ? _c : data.default;
-        this.top = (_d = data.top) !== null && _d !== void 0 ? _d : data.default;
+        this.bottom = data.bottom ?? data.default;
+        this.left = data.left ?? data.default;
+        this.right = data.right ?? data.default;
+        this.top = data.top ?? data.default;
     }
 }