@tsparticles/plugin-emitters 3.0.0-alpha.0 → 3.0.0-beta.0

package/types/Options/Interfaces/IEmitterSize.d.ts

@@ -1,4 +1,4 @@
-import type { IDimension, SizeMode } from "@tsparticles/engine";
+import type { IDimension, PixelMode } from "@tsparticles/engine";
 export interface IEmitterSize extends IDimension {
-    mode: SizeMode | keyof typeof SizeMode;
+    mode: PixelMode | keyof typeof PixelMode;
 }

package/types/Shapes/Circle/CircleShape.d.ts

@@ -1,4 +1,4 @@
-import type { ICoordinates, IDimension } from "@tsparticles/engine";
+import { type ICoordinates, type IDimension } from "@tsparticles/engine";
 import type { IEmitterShape } from "../../IEmitterShape";
 export declare class CircleShape implements IEmitterShape {
     randomPosition(position: ICoordinates, size: IDimension, fill: boolean): ICoordinates;

package/types/Shapes/Square/SquareShape.d.ts

@@ -1,4 +1,4 @@
-import type { ICoordinates, IDimension } from "@tsparticles/engine";
+import { type ICoordinates, type IDimension } from "@tsparticles/engine";
 import type { IEmitterShape } from "../../IEmitterShape";
 export declare class SquareShape implements IEmitterShape {
     randomPosition(position: ICoordinates, size: IDimension, fill: boolean): ICoordinates;

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { EmittersEngine } from "./EmittersEngine";
-export declare function loadEmittersPlugin(engine: EmittersEngine): Promise<void>;
+export declare function loadEmittersPlugin(engine: EmittersEngine, refresh?: boolean): Promise<void>;
 export * from "./EmitterContainer";
 export * from "./EmittersEngine";
 export * from "./Enums/EmitterClickMode";

package/umd/EmitterInstance.js

@@ -15,10 +15,77 @@
     const EmitterSize_1 = require("./Options/Classes/EmitterSize");
     class EmitterInstance {
         constructor(engine, emitters, container, options, position) {
-            var _a, _b, _c, _d, _e, _f, _g;
-            var _h;
             this.emitters = emitters;
             this.container = container;
+            this._calcPosition = () => {
+                return (0, engine_1.calcPositionOrRandomFromSizeRanged)({
+                    size: this.container.canvas.size,
+                    position: this.options.position,
+                });
+            };
+            this._destroy = () => {
+                this.emitters.removeEmitter(this);
+                this._engine.dispatchEvent("emitterDestroyed", {
+                    container: this.container,
+                    data: {
+                        emitter: this,
+                    },
+                });
+            };
+            this._emit = () => {
+                if (this._paused) {
+                    return;
+                }
+                const quantity = (0, engine_1.getRangeValue)(this.options.rate.quantity);
+                this._emitParticles(quantity);
+            };
+            this._emitParticles = (quantity) => {
+                const position = this.getPosition(), size = this.getSize(), singleParticlesOptions = (0, engine_1.itemFromSingleOrMultiple)(this._particlesOptions);
+                for (let i = 0; i < quantity; i++) {
+                    const particlesOptions = (0, engine_1.deepExtend)({}, singleParticlesOptions);
+                    if (this.spawnColor) {
+                        const hslAnimation = this.options.spawnColor?.animation;
+                        if (hslAnimation) {
+                            this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
+                            this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
+                            this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
+                        }
+                        if (!particlesOptions.color) {
+                            particlesOptions.color = {
+                                value: this.spawnColor,
+                            };
+                        }
+                        else {
+                            particlesOptions.color.value = this.spawnColor;
+                        }
+                    }
+                    if (!position) {
+                        return;
+                    }
+                    const pPosition = this._shape?.randomPosition(position, size, this.fill) ?? position;
+                    this.container.particles.addParticle(pPosition, particlesOptions);
+                }
+            };
+            this._prepareToDie = () => {
+                if (this._paused) {
+                    return;
+                }
+                const duration = this.options.life?.duration !== undefined ? (0, engine_1.getRangeValue)(this.options.life.duration) : undefined;
+                if (this.container.retina.reduceFactor &&
+                    (this._lifeCount > 0 || this._immortal) &&
+                    duration !== undefined &&
+                    duration > 0) {
+                    this._duration = duration * 1000;
+                }
+            };
+            this._setColorAnimation = (animation, initValue, maxValue) => {
+                const container = this.container;
+                if (!animation.enable) {
+                    return initValue;
+                }
+                const colorOffset = (0, engine_1.randomInRange)(animation.offset), delay = (0, engine_1.getRangeValue)(this.options.rate.delay), emitFactor = (1000 * delay) / container.retina.reduceFactor, colorSpeed = (0, engine_1.getRangeValue)(animation.speed ?? 0);
+                return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
+            };
             this._engine = engine;
             this._currentDuration = 0;
             this._currentEmitDelay = 0;
@@ -31,33 +98,34 @@
                 this.options = new Emitter_1.Emitter();
                 this.options.load(options);
             }
-            this._spawnDelay = (((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1000) / this.container.retina.reduceFactor;
-            this.position = (_b = this._initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
+            this._spawnDelay = ((0, engine_1.getRangeValue)(this.options.life.delay ?? 0) * 1000) / this.container.retina.reduceFactor;
+            this.position = this._initialPosition ?? this._calcPosition();
             this.name = this.options.name;
-            this._shape = (_c = this._engine.emitterShapeManager) === null || _c === void 0 ? void 0 : _c.getShape(this.options.shape);
+            this._shape = this._engine.emitterShapeManager?.getShape(this.options.shape);
             this.fill = this.options.fill;
             this._firstSpawn = !this.options.life.wait;
             this._startParticlesAdded = false;
             let particlesOptions = (0, engine_1.deepExtend)({}, this.options.particles);
-            particlesOptions !== null && particlesOptions !== void 0 ? particlesOptions : (particlesOptions = {});
-            (_d = particlesOptions.move) !== null && _d !== void 0 ? _d : (particlesOptions.move = {});
-            (_e = (_h = particlesOptions.move).direction) !== null && _e !== void 0 ? _e : (_h.direction = this.options.direction);
+            particlesOptions ??= {};
+            particlesOptions.move ??= {};
+            particlesOptions.move.direction ??= this.options.direction;
             if (this.options.spawnColor) {
                 this.spawnColor = (0, engine_1.rangeColorToHsl)(this.options.spawnColor);
             }
             this._paused = !this.options.autoPlay;
             this._particlesOptions = particlesOptions;
             this.size =
-                (_f = this.options.size) !== null && _f !== void 0 ? _f : (() => {
-                    const size = new EmitterSize_1.EmitterSize();
-                    size.load({
-                        height: 0,
-                        mode: "percent",
-                        width: 0,
-                    });
-                    return size;
-                })();
-            this._lifeCount = (_g = this.options.life.count) !== null && _g !== void 0 ? _g : -1;
+                this.options.size ??
+                    (() => {
+                        const size = new EmitterSize_1.EmitterSize();
+                        size.load({
+                            height: 0,
+                            mode: "percent",
+                            width: 0,
+                        });
+                        return size;
+                    })();
+            this._lifeCount = this.options.life.count ?? -1;
             this._immortal = this._lifeCount <= 0;
             this._engine.dispatchEvent("emitterCreated", {
                 container,
@@ -100,14 +168,7 @@
                     };
                 }
             }
-            return {
-                width: this.size.mode === "percent"
-                    ? (container.canvas.size.width * this.size.width) / 100
-                    : this.size.width,
-                height: this.size.mode === "percent"
-                    ? (container.canvas.size.height * this.size.height) / 100
-                    : this.size.height,
-            };
+            return (0, engine_1.getSize)(this.size, container.canvas.size);
         }
         pause() {
             if (this._paused) {
@@ -116,13 +177,12 @@
             delete this._emitDelay;
         }
         play() {
-            var _a;
             if (this._paused) {
                 return;
             }
             if (!(this.container.retina.reduceFactor &&
                 (this._lifeCount > 0 || this._immortal || !this.options.life.count) &&
-                (this._firstSpawn || this._currentSpawnDelay >= ((_a = this._spawnDelay) !== null && _a !== void 0 ? _a : 0)))) {
+                (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? 0)))) {
                 return;
             }
             if (this._emitDelay === undefined) {
@@ -130,7 +190,7 @@
                 this._emitDelay = (1000 * delay) / this.container.retina.reduceFactor;
             }
             if (this._lifeCount > 0 || this._immortal) {
-                this.prepareToDie();
+                this._prepareToDie();
             }
         }
         resize() {
@@ -138,21 +198,20 @@
             this.position =
                 initialPosition && (0, engine_1.isPointInside)(initialPosition, this.container.canvas.size, engine_1.Vector.origin)
                     ? initialPosition
-                    : this.calcPosition();
+                    : this._calcPosition();
         }
         update(delta) {
-            var _a, _b, _c;
             if (this._paused) {
                 return;
             }
             if (this._firstSpawn) {
                 this._firstSpawn = false;
-                this._currentSpawnDelay = (_a = this._spawnDelay) !== null && _a !== void 0 ? _a : 0;
-                this._currentEmitDelay = (_b = this._emitDelay) !== null && _b !== void 0 ? _b : 0;
+                this._currentSpawnDelay = this._spawnDelay ?? 0;
+                this._currentEmitDelay = this._emitDelay ?? 0;
             }
             if (!this._startParticlesAdded) {
                 this._startParticlesAdded = true;
-                this.emitParticles(this.options.startCount);
+                this._emitParticles(this.options.startCount);
             }
             if (this._duration !== undefined) {
                 this._currentDuration += delta.value;
@@ -165,11 +224,12 @@
                         this._lifeCount--;
                     }
                     if (this._lifeCount > 0 || this._immortal) {
-                        this.position = this.calcPosition();
-                        this._spawnDelay = (((_c = this.options.life.delay) !== null && _c !== void 0 ? _c : 0) * 1000) / this.container.retina.reduceFactor;
+                        this.position = this._calcPosition();
+                        this._spawnDelay =
+                            ((0, engine_1.getRangeValue)(this.options.life.delay ?? 0) * 1000) / this.container.retina.reduceFactor;
                     }
                     else {
-                        this.destroy();
+                        this._destroy();
                     }
                     this._currentDuration -= this._duration;
                     delete this._duration;
@@ -189,83 +249,11 @@
             if (this._emitDelay !== undefined) {
                 this._currentEmitDelay += delta.value;
                 if (this._currentEmitDelay >= this._emitDelay) {
-                    this.emit();
+                    this._emit();
                     this._currentEmitDelay -= this._emitDelay;
                 }
             }
         }
-        calcPosition() {
-            return (0, engine_1.calcPositionOrRandomFromSizeRanged)({
-                size: this.container.canvas.size,
-                position: this.options.position,
-            });
-        }
-        destroy() {
-            this.emitters.removeEmitter(this);
-            this._engine.dispatchEvent("emitterDestroyed", {
-                container: this.container,
-                data: {
-                    emitter: this,
-                },
-            });
-        }
-        emit() {
-            if (this._paused) {
-                return;
-            }
-            const quantity = (0, engine_1.getRangeValue)(this.options.rate.quantity);
-            this.emitParticles(quantity);
-        }
-        emitParticles(quantity) {
-            var _a, _b, _c;
-            const position = this.getPosition(), size = this.getSize(), singleParticlesOptions = (0, engine_1.itemFromSingleOrMultiple)(this._particlesOptions);
-            for (let i = 0; i < quantity; i++) {
-                const particlesOptions = (0, engine_1.deepExtend)({}, singleParticlesOptions);
-                if (this.spawnColor) {
-                    const hslAnimation = (_a = this.options.spawnColor) === null || _a === void 0 ? void 0 : _a.animation;
-                    if (hslAnimation) {
-                        this.spawnColor.h = this.setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
-                        this.spawnColor.s = this.setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
-                        this.spawnColor.l = this.setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
-                    }
-                    if (!particlesOptions.color) {
-                        particlesOptions.color = {
-                            value: this.spawnColor,
-                        };
-                    }
-                    else {
-                        particlesOptions.color.value = this.spawnColor;
-                    }
-                }
-                if (!position) {
-                    return;
-                }
-                const pPosition = (_c = (_b = this._shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
-                this.container.particles.addParticle(pPosition, particlesOptions);
-            }
-        }
-        prepareToDie() {
-            var _a;
-            if (this._paused) {
-                return;
-            }
-            const duration = (_a = this.options.life) === null || _a === void 0 ? void 0 : _a.duration;
-            if (this.container.retina.reduceFactor &&
-                (this._lifeCount > 0 || this._immortal) &&
-                duration !== undefined &&
-                duration > 0) {
-                this._duration = duration * 1000;
-            }
-        }
-        setColorAnimation(animation, initValue, maxValue) {
-            var _a;
-            const container = this.container;
-            if (!animation.enable) {
-                return initValue;
-            }
-            const colorOffset = (0, engine_1.randomInRange)(animation.offset), delay = (0, engine_1.getRangeValue)(this.options.rate.delay), emitFactor = (1000 * delay) / container.retina.reduceFactor, colorSpeed = (0, engine_1.getRangeValue)((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
-            return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
-        }
     }
     exports.EmitterInstance = EmitterInstance;
 });

package/umd/Emitters.js

@@ -26,7 +26,7 @@
                 },
                 value: [],
             };
-            container.getEmitter = (idxOrName) => idxOrName === undefined || typeof idxOrName === "number"
+            container.getEmitter = (idxOrName) => idxOrName === undefined || (0, engine_1.isNumber)(idxOrName)
                 ? this.array[idxOrName || 0]
                 : this.array.find((t) => t.name === idxOrName);
             container.addEmitter = (options, position) => this.addEmitter(options, position);
@@ -58,39 +58,43 @@
         }
         handleClickMode(mode) {
             const emitterOptions = this.emitters, modeEmitters = this.interactivityEmitters;
-            if (mode === "emitter") {
-                let emittersModeOptions;
-                if (modeEmitters && modeEmitters.value instanceof Array) {
-                    if (modeEmitters.value.length > 0 && modeEmitters.random.enable) {
-                        emittersModeOptions = [];
-                        const usedIndexes = [];
-                        for (let i = 0; i < modeEmitters.random.count; i++) {
-                            const idx = (0, engine_1.arrayRandomIndex)(modeEmitters.value);
-                            if (usedIndexes.includes(idx) && usedIndexes.length < modeEmitters.value.length) {
-                                i--;
-                                continue;
-                            }
-                            usedIndexes.push(idx);
-                            emittersModeOptions.push((0, engine_1.itemFromArray)(modeEmitters.value, idx));
+            if (mode !== "emitter") {
+                return;
+            }
+            let emittersModeOptions;
+            if (modeEmitters && (0, engine_1.isArray)(modeEmitters.value)) {
+                if (modeEmitters.value.length > 0 && modeEmitters.random.enable) {
+                    emittersModeOptions = [];
+                    const usedIndexes = [];
+                    for (let i = 0; i < modeEmitters.random.count; i++) {
+                        const idx = (0, engine_1.arrayRandomIndex)(modeEmitters.value);
+                        if (usedIndexes.includes(idx) && usedIndexes.length < modeEmitters.value.length) {
+                            i--;
+                            continue;
                         }
-                    }
-                    else {
-                        emittersModeOptions = modeEmitters.value;
+                        usedIndexes.push(idx);
+                        emittersModeOptions.push((0, engine_1.itemFromArray)(modeEmitters.value, idx));
                     }
                 }
                 else {
-                    emittersModeOptions = modeEmitters === null || modeEmitters === void 0 ? void 0 : modeEmitters.value;
+                    emittersModeOptions = modeEmitters.value;
                 }
-                const emittersOptions = emittersModeOptions !== null && emittersModeOptions !== void 0 ? emittersModeOptions : emitterOptions, ePosition = this.container.interactivity.mouse.clickPosition;
-                (0, engine_1.executeOnSingleOrMultiple)(emittersOptions, (emitter) => {
-                    this.addEmitter(emitter, ePosition);
-                });
             }
+            else {
+                emittersModeOptions = modeEmitters?.value;
+            }
+            const emittersOptions = emittersModeOptions ?? emitterOptions, ePosition = this.container.interactivity.mouse.clickPosition;
+            (0, engine_1.executeOnSingleOrMultiple)(emittersOptions, (emitter) => {
+                this.addEmitter(emitter, ePosition);
+            });
         }
         async init() {
             this.emitters = this.container.actualOptions.emitters;
             this.interactivityEmitters = this.container.actualOptions.interactivity.modes.emitters;
-            if (this.emitters instanceof Array) {
+            if (!this.emitters) {
+                return;
+            }
+            if ((0, engine_1.isArray)(this.emitters)) {
                 for (const emitterOptions of this.emitters) {
                     this.addEmitter(emitterOptions);
                 }

package/umd/Options/Classes/Emitter.js

@@ -24,14 +24,14 @@
             this.startCount = 0;
         }
         load(data) {
-            if (data === undefined) {
+            if (!data) {
                 return;
             }
             if (data.autoPlay !== undefined) {
                 this.autoPlay = data.autoPlay;
             }
             if (data.size !== undefined) {
-                if (this.size === undefined) {
+                if (!this.size) {
                     this.size = new EmitterSize_1.EmitterSize();
                 }
                 this.size.load(data.size);

package/umd/Options/Classes/EmitterLife.js

@@ -4,28 +4,29 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.EmitterLife = void 0;
+    const engine_1 = require("@tsparticles/engine");
     class EmitterLife {
         constructor() {
             this.wait = false;
         }
         load(data) {
-            if (data === undefined) {
+            if (!data) {
                 return;
             }
             if (data.count !== undefined) {
                 this.count = data.count;
             }
             if (data.delay !== undefined) {
-                this.delay = data.delay;
+                this.delay = (0, engine_1.setRangeValue)(data.delay);
             }
             if (data.duration !== undefined) {
-                this.duration = data.duration;
+                this.duration = (0, engine_1.setRangeValue)(data.duration);
             }
             if (data.wait !== undefined) {
                 this.wait = data.wait;

package/umd/index.js

@@ -39,20 +39,19 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
             return new Emitters_1.Emitters(this._engine, container);
         }
         loadOptions(options, source) {
-            var _a, _b, _c, _d, _e, _f;
             if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
                 return;
             }
-            if (source === null || source === void 0 ? void 0 : source.emitters) {
+            if (source?.emitters) {
                 options.emitters = (0, engine_1.executeOnSingleOrMultiple)(source.emitters, (emitter) => {
                     const tmp = new Emitter_1.Emitter();
                     tmp.load(emitter);
                     return tmp;
                 });
             }
-            const interactivityEmitters = (_b = (_a = source === null || source === void 0 ? void 0 : source.interactivity) === null || _a === void 0 ? void 0 : _a.modes) === null || _b === void 0 ? void 0 : _b.emitters;
+            const interactivityEmitters = source?.interactivity?.modes?.emitters;
             if (interactivityEmitters) {
-                if (interactivityEmitters instanceof Array) {
+                if ((0, engine_1.isArray)(interactivityEmitters)) {
                     options.interactivity.modes.emitters = {
                         random: {
                             count: 1,
@@ -68,11 +67,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
                 else {
                     const emitterMode = interactivityEmitters;
                     if (emitterMode.value !== undefined) {
-                        if (emitterMode.value instanceof Array) {
+                        if ((0, engine_1.isArray)(emitterMode.value)) {
                             options.interactivity.modes.emitters = {
                                 random: {
-                                    count: (_c = emitterMode.random.count) !== null && _c !== void 0 ? _c : 1,
-                                    enable: (_d = emitterMode.random.enable) !== null && _d !== void 0 ? _d : false,
+                                    count: emitterMode.random.count ?? 1,
+                                    enable: emitterMode.random.enable ?? false,
                                 },
                                 value: emitterMode.value.map((s) => {
                                     const tmp = new Emitter_1.Emitter();
@@ -86,8 +85,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
                             tmp.load(emitterMode.value);
                             options.interactivity.modes.emitters = {
                                 random: {
-                                    count: (_e = emitterMode.random.count) !== null && _e !== void 0 ? _e : 1,
-                                    enable: (_f = emitterMode.random.enable) !== null && _f !== void 0 ? _f : false,
+                                    count: emitterMode.random.count ?? 1,
+                                    enable: emitterMode.random.enable ?? false,
                                 },
                                 value: tmp,
                             };
@@ -107,29 +106,27 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
             }
         }
         needsPlugin(options) {
-            var _a, _b, _c;
             if (!options) {
                 return false;
             }
             const emitters = options.emitters;
-            return ((emitters instanceof Array && !!emitters.length) ||
+            return (((0, engine_1.isArray)(emitters) && !!emitters.length) ||
                 emitters !== undefined ||
-                (!!((_c = (_b = (_a = options.interactivity) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.mode) &&
+                (!!options.interactivity?.events?.onClick?.mode &&
                     (0, engine_1.isInArray)("emitter", options.interactivity.events.onClick.mode)));
         }
     }
-    async function loadEmittersPlugin(engine) {
+    async function loadEmittersPlugin(engine, refresh = true) {
         if (!engine.emitterShapeManager) {
             engine.emitterShapeManager = new ShapeManager_1.ShapeManager(engine);
         }
         if (!engine.addEmitterShape) {
             engine.addEmitterShape = (name, shape) => {
-                var _a;
-                (_a = engine.emitterShapeManager) === null || _a === void 0 ? void 0 : _a.addShape(name, shape);
+                engine.emitterShapeManager?.addShape(name, shape);
             };
         }
         const plugin = new EmittersPlugin(engine);
-        await engine.addPlugin(plugin);
+        await engine.addPlugin(plugin, refresh);
         engine.addEmitterShape("circle", new CircleShape_1.CircleShape());
         engine.addEmitterShape("square", new SquareShape_1.SquareShape());
     }