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

package/umd/Core/Utils/Vector3d.js

@@ -4,15 +4,21 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "./Constants", "../../Utils/Utils"], factory);
     }
 })(function (require, exports) {
     "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;
@@ -21,10 +27,10 @@
             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() {
@@ -34,13 +40,13 @@
             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);
@@ -84,6 +90,12 @@
             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);
         }
@@ -101,10 +113,6 @@
             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/umd/Options/Classes/AnimatableColor.js

@@ -4,12 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./HslAnimation", "./OptionsColor"], factory);
+        define(["require", "exports", "../../Utils/Utils", "./HslAnimation", "./OptionsColor"], factory);
     }
 })(function (require, exports) {
     "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 {
@@ -21,7 +22,7 @@
             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/umd/Options/Classes/AnimationOptions.js

@@ -17,6 +17,7 @@
             this.enable = false;
             this.speed = 1;
             this.decay = 0;
+            this.delay = 0;
             this.sync = false;
         }
         load(data) {
@@ -35,6 +36,9 @@
             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;
             }
@@ -44,6 +48,7 @@
     class RangedAnimationOptions extends AnimationOptions {
         constructor() {
             super();
+            this.mode = "auto";
             this.startValue = "random";
         }
         load(data) {
@@ -51,8 +56,8 @@
             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/umd/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -4,13 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./BackgroundMaskCover"], factory);
+        define(["require", "exports", "./BackgroundMaskCover", "../../../Utils/Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     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";
@@ -26,7 +27,7 @@
             }
             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/umd/Options/Classes/ColorAnimation.js

@@ -17,6 +17,7 @@
             this.enable = false;
             this.offset = 0;
             this.speed = 1;
+            this.delay = 0;
             this.decay = 0;
             this.sync = true;
         }
@@ -39,6 +40,9 @@
             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/umd/Options/Classes/Interactivity/Events/DivEvent.js

@@ -4,13 +4,12 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "../../../../Utils/Utils"], factory);
+        define(["require", "exports"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.DivEvent = void 0;
-    const Utils_1 = require("../../../../Utils/Utils");
     class DivEvent {
         constructor() {
             this.selectors = [];
@@ -18,33 +17,10 @@
             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/umd/Options/Classes/Interactivity/Events/Events.js

@@ -4,17 +4,17 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./ClickEvent", "./DivEvent", "./HoverEvent", "./ResizeEvent", "../../../../Utils/Utils"], factory);
+        define(["require", "exports", "../../../../Utils/Utils", "./ClickEvent", "./DivEvent", "./HoverEvent", "./ResizeEvent"], factory);
     }
 })(function (require, exports) {
     "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();
@@ -22,31 +22,12 @@
             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();
@@ -54,8 +35,8 @@
                     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/umd/Options/Classes/Interactivity/Interactivity.js

@@ -18,18 +18,11 @@
             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/umd/Options/Classes/Interactivity/Modes/Modes.js

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

@@ -13,17 +13,17 @@
     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/umd/Options/Classes/Options.js

@@ -22,6 +22,13 @@
     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;
@@ -35,7 +42,6 @@
             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;
@@ -45,26 +51,7 @@
             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;
             }
@@ -77,14 +64,14 @@
             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;
             }
@@ -98,8 +85,8 @@
                 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 {
@@ -107,7 +94,7 @@
             }
             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);
@@ -116,11 +103,11 @@
             }
             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) {
@@ -149,14 +136,14 @@
                     }
                 }
             }
-            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) {
@@ -172,13 +159,6 @@
                 }
             }
         }
-        _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/umd/Options/Classes/OptionsColor.js

@@ -4,12 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "../../Utils/Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.OptionsColor = void 0;
+    const Utils_1 = require("../../Utils/Utils");
     class OptionsColor {
         constructor() {
             this.value = "";
@@ -18,7 +19,7 @@
             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 {
@@ -28,7 +29,7 @@
             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/umd/Options/Classes/Particles/Collisions/Collisions.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./CollisionsAbsorb", "./CollisionsOverlap", "../Bounce/ParticlesBounce"], factory);
+        define(["require", "exports", "./CollisionsAbsorb", "./CollisionsOverlap", "../Bounce/ParticlesBounce", "../../../../Utils/NumberUtils"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,11 +13,13 @@
     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();
         }
@@ -30,6 +32,9 @@
             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/umd/Options/Classes/Particles/Move/Move.js

@@ -4,12 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./MoveAngle", "./MoveAttract", "./MoveCenter", "./MoveGravity", "./Path/MovePath", "./MoveTrail", "./OutModes", "./Spin", "../../../../Utils/NumberUtils"], factory);
+        define(["require", "exports", "../../../../Utils/Utils", "./MoveAngle", "./MoveAttract", "./MoveCenter", "./MoveGravity", "./Path/MovePath", "./MoveTrail", "./OutModes", "./Spin", "../../../../Utils/NumberUtils"], factory);
     }
 })(function (require, exports) {
     "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");
@@ -41,41 +42,11 @@
             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) {
@@ -85,13 +56,12 @@
                 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);
@@ -100,9 +70,9 @@
                 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 {
@@ -111,7 +81,7 @@
                     });
                 }
             }
-            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;
             }