@tsparticles/engine 3.0.0-alpha.0

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Interactivity = void 0;
+const Events_1 = require("./Events/Events");
+const Modes_1 = require("./Modes/Modes");
+class Interactivity {
+    constructor(engine, container) {
+        this.detectsOn = "window";
+        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;
+        if (detectsOn !== undefined) {
+            this.detectsOn = detectsOn;
+        }
+        this.events.load(data.events);
+        this.modes.load(data.modes);
+    }
+}
+exports.Interactivity = Interactivity;

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modes = void 0;
+class Modes {
+    constructor(engine, container) {
+        this._engine = engine;
+        this._container = container;
+    }
+    load(data) {
+        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);
+                    }
+                }
+            }
+        }
+    }
+}
+exports.Modes = Modes;

package/cjs/Options/Classes/ManualParticle.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManualParticle = void 0;
+const Utils_1 = require("../../Utils/Utils");
+class ManualParticle {
+    load(data) {
+        var _a, _b;
+        if (!data) {
+            return;
+        }
+        if (data.position !== undefined) {
+            this.position = {
+                x: (_a = data.position.x) !== null && _a !== void 0 ? _a : 50,
+                y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50,
+            };
+        }
+        if (data.options !== undefined) {
+            this.options = (0, Utils_1.deepExtend)({}, data.options);
+        }
+    }
+}
+exports.ManualParticle = ManualParticle;

package/cjs/Options/Classes/Options.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Options = void 0;
+const Utils_1 = require("../../Utils/Utils");
+const Background_1 = require("./Background/Background");
+const BackgroundMask_1 = require("./BackgroundMask/BackgroundMask");
+const FullScreen_1 = require("./FullScreen/FullScreen");
+const Interactivity_1 = require("./Interactivity/Interactivity");
+const ManualParticle_1 = require("./ManualParticle");
+const Responsive_1 = require("./Responsive");
+const Theme_1 = require("./Theme/Theme");
+const OptionsUtils_1 = require("../../Utils/OptionsUtils");
+const NumberUtils_1 = require("../../Utils/NumberUtils");
+class Options {
+    constructor(engine, container) {
+        this._engine = engine;
+        this._container = container;
+        this.autoPlay = true;
+        this.background = new Background_1.Background();
+        this.backgroundMask = new BackgroundMask_1.BackgroundMask();
+        this.defaultThemes = {};
+        this.delay = 0;
+        this.fullScreen = new FullScreen_1.FullScreen();
+        this.detectRetina = true;
+        this.duration = 0;
+        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;
+        this.responsive = [];
+        this.smooth = false;
+        this.style = {};
+        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;
+        }
+        if (data.preset !== undefined) {
+            (0, Utils_1.executeOnSingleOrMultiple)(data.preset, (preset) => this._importPreset(preset));
+        }
+        if (data.autoPlay !== undefined) {
+            this.autoPlay = data.autoPlay;
+        }
+        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;
+        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;
+        if (fpsLimit !== undefined) {
+            this.fpsLimit = fpsLimit;
+        }
+        if (data.pauseOnBlur !== undefined) {
+            this.pauseOnBlur = data.pauseOnBlur;
+        }
+        if (data.pauseOnOutsideViewport !== undefined) {
+            this.pauseOnOutsideViewport = data.pauseOnOutsideViewport;
+        }
+        if (data.zLayers !== undefined) {
+            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") {
+            this.fullScreen.enable = fullScreen;
+        }
+        else {
+            this.fullScreen.load(fullScreen);
+        }
+        this.backgroundMask.load(data.backgroundMask);
+        this.interactivity.load(data.interactivity);
+        if (data.manualParticles !== undefined) {
+            this.manualParticles = data.manualParticles.map((t) => {
+                const tmp = new ManualParticle_1.ManualParticle();
+                tmp.load(t);
+                return tmp;
+            });
+        }
+        this.particles.load(data.particles);
+        this.style = (0, Utils_1.deepExtend)(this.style, data.style);
+        this._engine.plugins.loadOptions(this, data);
+        if (data.smooth !== undefined) {
+            this.smooth = data.smooth;
+        }
+        const interactors = this._engine.plugins.interactors.get(this._container);
+        if (interactors) {
+            for (const interactor of interactors) {
+                if (interactor.loadOptions) {
+                    interactor.loadOptions(this, data);
+                }
+            }
+        }
+        if (data.responsive !== undefined) {
+            for (const responsive of data.responsive) {
+                const optResponsive = new Responsive_1.Responsive();
+                optResponsive.load(responsive);
+                this.responsive.push(optResponsive);
+            }
+        }
+        this.responsive.sort((a, b) => a.maxWidth - b.maxWidth);
+        if (data.themes !== undefined) {
+            for (const theme of data.themes) {
+                const existingTheme = this.themes.find((t) => t.name === theme.name);
+                if (!existingTheme) {
+                    const optTheme = new Theme_1.Theme();
+                    optTheme.load(theme);
+                    this.themes.push(optTheme);
+                }
+                else {
+                    existingTheme.load(theme);
+                }
+            }
+        }
+        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;
+    }
+    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;
+    }
+    setTheme(name) {
+        if (name) {
+            const chosenTheme = this.themes.find((theme) => theme.name === name);
+            if (chosenTheme) {
+                this.load(chosenTheme.options);
+            }
+        }
+        else {
+            const mediaMatch = (0, Utils_1.safeMatchMedia)("(prefers-color-scheme: dark)"), clientDarkMode = mediaMatch && mediaMatch.matches, defaultTheme = this._findDefaultTheme(clientDarkMode ? "dark" : "light");
+            if (defaultTheme) {
+                this.load(defaultTheme.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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionsColor = void 0;
+class OptionsColor {
+    constructor() {
+        this.value = "";
+    }
+    static create(source, data) {
+        const color = new OptionsColor();
+        color.load(source);
+        if (data !== undefined) {
+            if (typeof data === "string" || data instanceof Array) {
+                color.load({ value: data });
+            }
+            else {
+                color.load(data);
+            }
+        }
+        return color;
+    }
+    load(data) {
+        if ((data === null || data === void 0 ? void 0 : data.value) === undefined) {
+            return;
+        }
+        this.value = data.value;
+    }
+}
+exports.OptionsColor = OptionsColor;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticlesBounce = void 0;
+const ParticlesBounceFactor_1 = require("./ParticlesBounceFactor");
+class ParticlesBounce {
+    constructor() {
+        this.horizontal = new ParticlesBounceFactor_1.ParticlesBounceFactor();
+        this.vertical = new ParticlesBounceFactor_1.ParticlesBounceFactor();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.horizontal.load(data.horizontal);
+        this.vertical.load(data.vertical);
+    }
+}
+exports.ParticlesBounce = ParticlesBounce;

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticlesBounceFactor = void 0;
+const ValueWithRandom_1 = require("../../ValueWithRandom");
+class ParticlesBounceFactor extends ValueWithRandom_1.ValueWithRandom {
+    constructor() {
+        super();
+        this.random.minimumValue = 0.1;
+        this.value = 1;
+    }
+}
+exports.ParticlesBounceFactor = ParticlesBounceFactor;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collisions = void 0;
+const CollisionsAbsorb_1 = require("./CollisionsAbsorb");
+const CollisionsOverlap_1 = require("./CollisionsOverlap");
+const ParticlesBounce_1 = require("../Bounce/ParticlesBounce");
+class Collisions {
+    constructor() {
+        this.absorb = new CollisionsAbsorb_1.CollisionsAbsorb();
+        this.bounce = new ParticlesBounce_1.ParticlesBounce();
+        this.enable = false;
+        this.mode = "bounce";
+        this.overlap = new CollisionsOverlap_1.CollisionsOverlap();
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        this.absorb.load(data.absorb);
+        this.bounce.load(data.bounce);
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+        this.overlap.load(data.overlap);
+    }
+}
+exports.Collisions = Collisions;

package/cjs/Options/Classes/Particles/Collisions/CollisionsAbsorb.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollisionsAbsorb = void 0;
+class CollisionsAbsorb {
+    constructor() {
+        this.speed = 2;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.speed !== undefined) {
+            this.speed = data.speed;
+        }
+    }
+}
+exports.CollisionsAbsorb = CollisionsAbsorb;

package/cjs/Options/Classes/Particles/Collisions/CollisionsOverlap.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollisionsOverlap = void 0;
+class CollisionsOverlap {
+    constructor() {
+        this.enable = true;
+        this.retries = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.retries !== undefined) {
+            this.retries = data.retries;
+        }
+    }
+}
+exports.CollisionsOverlap = CollisionsOverlap;

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

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Move = void 0;
+const MoveAngle_1 = require("./MoveAngle");
+const MoveAttract_1 = require("./MoveAttract");
+const MoveCenter_1 = require("./MoveCenter");
+const MoveGravity_1 = require("./MoveGravity");
+const MovePath_1 = require("./Path/MovePath");
+const MoveTrail_1 = require("./MoveTrail");
+const OutModes_1 = require("./OutModes");
+const Spin_1 = require("./Spin");
+const NumberUtils_1 = require("../../../../Utils/NumberUtils");
+class Move {
+    constructor() {
+        this.angle = new MoveAngle_1.MoveAngle();
+        this.attract = new MoveAttract_1.MoveAttract();
+        this.center = new MoveCenter_1.MoveCenter();
+        this.decay = 0;
+        this.distance = {};
+        this.direction = "none";
+        this.drift = 0;
+        this.enable = false;
+        this.gravity = new MoveGravity_1.MoveGravity();
+        this.path = new MovePath_1.MovePath();
+        this.outModes = new OutModes_1.OutModes();
+        this.random = false;
+        this.size = false;
+        this.speed = 2;
+        this.spin = new Spin_1.Spin();
+        this.straight = false;
+        this.trail = new MoveTrail_1.MoveTrail();
+        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.attract.load(data.attract);
+        this.center.load(data.center);
+        if (data.decay !== undefined) {
+            this.decay = (0, NumberUtils_1.setRangeValue)(data.decay);
+        }
+        if (data.direction !== undefined) {
+            this.direction = data.direction;
+        }
+        if (data.distance !== undefined) {
+            this.distance =
+                typeof data.distance === "number"
+                    ? {
+                        horizontal: data.distance,
+                        vertical: data.distance,
+                    }
+                    : Object.assign({}, data.distance);
+        }
+        if (data.drift !== undefined) {
+            this.drift = (0, NumberUtils_1.setRangeValue)(data.drift);
+        }
+        if (data.enable !== undefined) {
+            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;
+        if (outModes !== undefined) {
+            if (typeof outModes === "object") {
+                this.outModes.load(outModes);
+            }
+            else {
+                this.outModes.load({
+                    default: outModes,
+                });
+            }
+        }
+        this.path.load((_c = data.path) !== null && _c !== void 0 ? _c : data.noise);
+        if (data.random !== undefined) {
+            this.random = data.random;
+        }
+        if (data.size !== undefined) {
+            this.size = data.size;
+        }
+        if (data.speed !== undefined) {
+            this.speed = (0, NumberUtils_1.setRangeValue)(data.speed);
+        }
+        this.spin.load(data.spin);
+        if (data.straight !== undefined) {
+            this.straight = data.straight;
+        }
+        this.trail.load(data.trail);
+        if (data.vibrate !== undefined) {
+            this.vibrate = data.vibrate;
+        }
+        if (data.warp !== undefined) {
+            this.warp = data.warp;
+        }
+    }
+}
+exports.Move = Move;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveAngle = void 0;
+const NumberUtils_1 = require("../../../../Utils/NumberUtils");
+class MoveAngle {
+    constructor() {
+        this.offset = 0;
+        this.value = 90;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.offset !== undefined) {
+            this.offset = (0, NumberUtils_1.setRangeValue)(data.offset);
+        }
+        if (data.value !== undefined) {
+            this.value = (0, NumberUtils_1.setRangeValue)(data.value);
+        }
+    }
+}
+exports.MoveAngle = MoveAngle;

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveAttract = void 0;
+const NumberUtils_1 = require("../../../../Utils/NumberUtils");
+class MoveAttract {
+    constructor() {
+        this.distance = 200;
+        this.enable = false;
+        this.rotate = {
+            x: 3000,
+            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;
+        }
+        if (data.distance !== undefined) {
+            this.distance = (0, NumberUtils_1.setRangeValue)(data.distance);
+        }
+        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;
+        }
+    }
+}
+exports.MoveAttract = MoveAttract;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveCenter = void 0;
+class MoveCenter {
+    constructor() {
+        this.x = 50;
+        this.y = 50;
+        this.mode = "percent";
+        this.radius = 0;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.x !== undefined) {
+            this.x = data.x;
+        }
+        if (data.y !== undefined) {
+            this.y = data.y;
+        }
+        if (data.mode !== undefined) {
+            this.mode = data.mode;
+        }
+        if (data.radius !== undefined) {
+            this.radius = data.radius;
+        }
+    }
+}
+exports.MoveCenter = MoveCenter;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveGravity = void 0;
+const NumberUtils_1 = require("../../../../Utils/NumberUtils");
+class MoveGravity {
+    constructor() {
+        this.acceleration = 9.81;
+        this.enable = false;
+        this.inverse = false;
+        this.maxSpeed = 50;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.acceleration !== undefined) {
+            this.acceleration = (0, NumberUtils_1.setRangeValue)(data.acceleration);
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+        if (data.inverse !== undefined) {
+            this.inverse = data.inverse;
+        }
+        if (data.maxSpeed !== undefined) {
+            this.maxSpeed = (0, NumberUtils_1.setRangeValue)(data.maxSpeed);
+        }
+    }
+}
+exports.MoveGravity = MoveGravity;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoveTrail = void 0;
+const MoveTrailFill_1 = require("./MoveTrailFill");
+class MoveTrail {
+    constructor() {
+        this.enable = false;
+        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;
+        }
+        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.length !== undefined) {
+            this.length = data.length;
+        }
+    }
+}
+exports.MoveTrail = MoveTrail;