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

package/cjs/Core/Utils/Vector3d.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Vector3d = void 0;
+const Constants_1 = require("./Constants");
+const Utils_1 = require("../../Utils/Utils");
 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 (!(0, Utils_1.isNumber)(xOrCoords) && xOrCoords) {
             this.x = xOrCoords.x;
             this.y = xOrCoords.y;
             const coords3d = xOrCoords;
@@ -12,10 +18,10 @@ 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(`${Constants_1.errorPrefix} Vector3d not initialized correctly`);
         }
     }
     static get origin() {
@@ -25,13 +31,13 @@ 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);
@@ -75,6 +81,12 @@ 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);
     }
@@ -92,9 +104,5 @@ 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;
-    }
 }
 exports.Vector3d = Vector3d;

package/cjs/Options/Classes/AnimatableColor.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnimatableColor = void 0;
+const Utils_1 = require("../../Utils/Utils");
 const HslAnimation_1 = require("./HslAnimation");
 const OptionsColor_1 = require("./OptionsColor");
 class AnimatableColor extends OptionsColor_1.OptionsColor {
@@ -12,7 +13,7 @@ class AnimatableColor extends OptionsColor_1.OptionsColor {
         const color = new AnimatableColor();
         color.load(source);
         if (data !== undefined) {
-            if (typeof data === "string" || data instanceof Array) {
+            if ((0, Utils_1.isString)(data) || (0, Utils_1.isArray)(data)) {
                 color.load({ value: data });
             }
             else {

package/cjs/Options/Classes/AnimationOptions.js

@@ -8,6 +8,7 @@ class AnimationOptions {
         this.enable = false;
         this.speed = 1;
         this.decay = 0;
+        this.delay = 0;
         this.sync = false;
     }
     load(data) {
@@ -26,6 +27,9 @@ class AnimationOptions {
         if (data.decay !== undefined) {
             this.decay = (0, NumberUtils_1.setRangeValue)(data.decay);
         }
+        if (data.delay !== undefined) {
+            this.delay = (0, NumberUtils_1.setRangeValue)(data.delay);
+        }
         if (data.sync !== undefined) {
             this.sync = data.sync;
         }
@@ -35,6 +39,7 @@ exports.AnimationOptions = AnimationOptions;
 class RangedAnimationOptions extends AnimationOptions {
     constructor() {
         super();
+        this.mode = "auto";
         this.startValue = "random";
     }
     load(data) {
@@ -42,8 +47,8 @@ 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/cjs/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundMask = void 0;
 const BackgroundMaskCover_1 = require("./BackgroundMaskCover");
+const Utils_1 = require("../../../Utils/Utils");
 class BackgroundMask {
     constructor() {
         this.composite = "destination-out";
@@ -17,7 +18,7 @@ class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover;
-            const color = (typeof data.cover === "string" ? { color: data.cover } : data.cover);
+            const color = ((0, Utils_1.isString)(data.cover) ? { color: data.cover } : data.cover);
             this.cover.load(cover.color !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {

package/cjs/Options/Classes/ColorAnimation.js

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

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DivEvent = void 0;
-const Utils_1 = require("../../../../Utils/Utils");
 class DivEvent {
     constructor() {
         this.selectors = [];
@@ -9,33 +8,10 @@ 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 (0, Utils_1.executeOnSingleOrMultiple)(this.selectors, (t) => t.replace("#", ""));
-    }
-    set ids(value) {
-        this.selectors = (0, Utils_1.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/cjs/Options/Classes/Interactivity/Events/Events.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Events = void 0;
+const Utils_1 = require("../../../../Utils/Utils");
 const ClickEvent_1 = require("./ClickEvent");
 const DivEvent_1 = require("./DivEvent");
 const HoverEvent_1 = require("./HoverEvent");
 const ResizeEvent_1 = require("./ResizeEvent");
-const Utils_1 = require("../../../../Utils/Utils");
 class Events {
     constructor() {
         this.onClick = new ClickEvent_1.ClickEvent();
@@ -13,31 +13,12 @@ class Events {
         this.onHover = new HoverEvent_1.HoverEvent();
         this.resize = new ResizeEvent_1.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 = (0, Utils_1.executeOnSingleOrMultiple)(onDiv, (t) => {
                 const tmp = new DivEvent_1.DivEvent();
@@ -45,8 +26,8 @@ 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 ((0, Utils_1.isBoolean)(data.resize)) {
             this.resize.enable = data.resize;
         }
         else {

package/cjs/Options/Classes/Interactivity/Interactivity.js

@@ -9,18 +9,11 @@ class Interactivity {
         this.events = new Events_1.Events();
         this.modes = new Modes_1.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/cjs/Options/Classes/Interactivity/Modes/Modes.js

@@ -10,15 +10,18 @@ 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/cjs/Options/Classes/ManualParticle.js

@@ -4,17 +4,17 @@ exports.ManualParticle = void 0;
 const Utils_1 = require("../../Utils/Utils");
 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 = (0, Utils_1.deepExtend)({}, data.options);
         }
     }

package/cjs/Options/Classes/Options.js

@@ -13,6 +13,13 @@ const OptionsUtils_1 = require("../../Utils/OptionsUtils");
 const NumberUtils_1 = require("../../Utils/NumberUtils");
 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;
@@ -26,7 +33,6 @@ class Options {
         this.fpsLimit = 120;
         this.interactivity = new Interactivity_1.Interactivity(engine, container);
         this.manualParticles = [];
-        this.name = "default";
         this.particles = (0, OptionsUtils_1.loadParticlesOptions)(this._engine, this._container);
         this.pauseOnBlur = true;
         this.pauseOnOutsideViewport = true;
@@ -36,26 +42,7 @@ 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;
         }
@@ -68,14 +55,14 @@ class Options {
         if (data.delay !== undefined) {
             this.delay = (0, NumberUtils_1.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 = (0, NumberUtils_1.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;
         }
@@ -89,8 +76,8 @@ 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 ((0, Utils_1.isBoolean)(fullScreen)) {
             this.fullScreen.enable = fullScreen;
         }
         else {
@@ -98,7 +85,7 @@ 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_1.ManualParticle();
                 tmp.load(t);
@@ -107,11 +94,11 @@ class Options {
         }
         this.particles.load(data.particles);
         this.style = (0, Utils_1.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) {
@@ -140,14 +127,14 @@ 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) {
@@ -163,12 +150,5 @@ 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));
-    }
 }
 exports.Options = Options;

package/cjs/Options/Classes/OptionsColor.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OptionsColor = void 0;
+const Utils_1 = require("../../Utils/Utils");
 class OptionsColor {
     constructor() {
         this.value = "";
@@ -9,7 +10,7 @@ class OptionsColor {
         const color = new OptionsColor();
         color.load(source);
         if (data !== undefined) {
-            if (typeof data === "string" || data instanceof Array) {
+            if ((0, Utils_1.isString)(data) || (0, Utils_1.isArray)(data)) {
                 color.load({ value: data });
             }
             else {
@@ -19,7 +20,7 @@ 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/cjs/Options/Classes/Particles/Collisions/Collisions.js

@@ -4,11 +4,13 @@ exports.Collisions = void 0;
 const CollisionsAbsorb_1 = require("./CollisionsAbsorb");
 const CollisionsOverlap_1 = require("./CollisionsOverlap");
 const ParticlesBounce_1 = require("../Bounce/ParticlesBounce");
+const NumberUtils_1 = require("../../../../Utils/NumberUtils");
 class Collisions {
     constructor() {
         this.absorb = new CollisionsAbsorb_1.CollisionsAbsorb();
         this.bounce = new ParticlesBounce_1.ParticlesBounce();
         this.enable = false;
+        this.maxSpeed = 50;
         this.mode = "bounce";
         this.overlap = new CollisionsOverlap_1.CollisionsOverlap();
     }
@@ -21,6 +23,9 @@ class Collisions {
         if (data.enable !== undefined) {
             this.enable = data.enable;
         }
+        if (data.maxSpeed !== undefined) {
+            this.maxSpeed = (0, NumberUtils_1.setRangeValue)(data.maxSpeed);
+        }
         if (data.mode !== undefined) {
             this.mode = data.mode;
         }

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Move = void 0;
+const Utils_1 = require("../../../../Utils/Utils");
 const MoveAngle_1 = require("./MoveAngle");
 const MoveAttract_1 = require("./MoveAttract");
 const MoveCenter_1 = require("./MoveCenter");
@@ -32,41 +33,11 @@ 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((0, Utils_1.isNumber)(data.angle) ? { value: data.angle } : data.angle);
         this.attract.load(data.attract);
         this.center.load(data.center);
         if (data.decay !== undefined) {
@@ -76,13 +47,12 @@ 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 = (0, Utils_1.isNumber)(data.distance)
+                ? {
+                    horizontal: data.distance,
+                    vertical: data.distance,
+                }
+                : { ...data.distance };
         }
         if (data.drift !== undefined) {
             this.drift = (0, NumberUtils_1.setRangeValue)(data.drift);
@@ -91,9 +61,9 @@ 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 ((0, Utils_1.isObject)(outModes)) {
                 this.outModes.load(outModes);
             }
             else {
@@ -102,7 +72,7 @@ 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/cjs/Options/Classes/Particles/Move/MoveAttract.js

@@ -11,20 +11,7 @@ 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;
         }
@@ -34,13 +21,15 @@ 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/cjs/Options/Classes/Particles/Move/MoveTrail.js

@@ -8,12 +8,6 @@ class MoveTrail {
         this.length = 10;
         this.fill = new MoveTrailFill_1.MoveTrailFill();
     }
-    get fillColor() {
-        return this.fill.color;
-    }
-    set fillColor(value) {
-        this.fill.load({ color: value });
-    }
     load(data) {
         if (!data) {
             return;
@@ -21,8 +15,8 @@ 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;