@tsparticles/plugin-emitters 4.0.0-alpha.2 → 4.0.0-alpha.21

package/esm/EmitterInstance.js

@@ -1,7 +1,7 @@
 import { PixelMode, Vector, calcPositionOrRandomFromSizeRanged, deepExtend, getRangeValue, getSize, hMax, half, isPointInside, itemFromSingleOrMultiple, lMax, millisecondsToSeconds, randomInRangeValue, rangeColorToHsl, sMax, safeDocument, } from "@tsparticles/engine";
 import { Emitter } from "./Options/Classes/Emitter.js";
 import { EmitterSize } from "./Options/Classes/EmitterSize.js";
-const defaultLifeDelay = 0, minLifeCount = 0, defaultSpawnDelay = 0, defaultEmitDelay = 0, defaultLifeCount = -1, defaultColorAnimationFactor = 1;
+const defaultLifeDelay = 0, minLifeCount = 0, defaultSpawnDelay = 0, defaultEmitDelay = 0, defaultLifeCount = -1, defaultColorAnimationFactor = 1, colorFactor = 3.6;
 function setParticlesOptionsColor(particlesOptions, color) {
     if (particlesOptions.color) {
         particlesOptions.color.value = color;
@@ -13,41 +13,35 @@ function setParticlesOptionsColor(particlesOptions, color) {
     }
 }
 export class EmitterInstance {
-    constructor(engine, emitters, container, options, position) {
-        this.emitters = emitters;
+    container;
+    removeCallback;
+    fill;
+    name;
+    options;
+    position;
+    size;
+    spawnColor;
+    _currentDuration;
+    _currentEmitDelay;
+    _currentSpawnDelay;
+    _duration;
+    _emitDelay;
+    _engine;
+    _firstSpawn;
+    _immortal;
+    _initialPosition;
+    _lifeCount;
+    _mutationObserver;
+    _particlesOptions;
+    _paused;
+    _resizeObserver;
+    _shape;
+    _size;
+    _spawnDelay;
+    _startParticlesAdded;
+    constructor(engine, container, removeCallback, options, position) {
         this.container = container;
-        this._destroy = () => {
-            this._mutationObserver?.disconnect();
-            this._mutationObserver = undefined;
-            this._resizeObserver?.disconnect();
-            this._resizeObserver = undefined;
-            this.emitters.removeEmitter(this);
-            this._engine.dispatchEvent("emitterDestroyed", {
-                container: this.container,
-                data: {
-                    emitter: this,
-                },
-            });
-        };
-        this._prepareToDie = () => {
-            if (this._paused) {
-                return;
-            }
-            const duration = this.options.life.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined, minDuration = 0, minLifeCount = 0;
-            if ((this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {
-                this._duration = duration * millisecondsToSeconds;
-            }
-        };
-        this._setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
-            const container = this.container;
-            if (!animation.enable) {
-                return initValue;
-            }
-            const colorOffset = randomInRangeValue(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = container.retina.reduceFactor
-                ? (delay * millisecondsToSeconds) / container.retina.reduceFactor
-                : Infinity, colorSpeed = getRangeValue(animation.speed);
-            return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * factor) % maxValue;
-        };
+        this.removeCallback = removeCallback;
         this._engine = engine;
         this._currentDuration = 0;
         this._currentEmitDelay = 0;
@@ -99,7 +93,7 @@ export class EmitterInstance {
         }
         const shapeOptions = this.options.shape, shapeGenerator = this._engine.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
         if (shapeGenerator) {
-            this._shape = shapeGenerator.generate(this.position, this.size, this.fill, shapeOptions.options);
+            this._shape = shapeGenerator.generate(this.container, this.position, this.size, this.fill, shapeOptions.options);
         }
         this._engine.dispatchEvent("emitterCreated", {
             container,
@@ -201,7 +195,7 @@ export class EmitterInstance {
                     container: this.container,
                 });
                 this.play();
-                this._currentSpawnDelay -= this._currentSpawnDelay;
+                this._currentSpawnDelay -= this._spawnDelay;
                 delete this._spawnDelay;
             }
         }
@@ -254,6 +248,19 @@ export class EmitterInstance {
                 return size;
             })());
     }
+    _destroy = () => {
+        this._mutationObserver?.disconnect();
+        this._mutationObserver = undefined;
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
+        this.removeCallback(this);
+        this._engine.dispatchEvent("emitterDestroyed", {
+            container: this.container,
+            data: {
+                emitter: this,
+            },
+        });
+    };
     _emit() {
         if (this._paused) {
             return;
@@ -262,24 +269,20 @@ export class EmitterInstance {
         this._emitParticles(quantity);
     }
     _emitParticles(quantity) {
-        const singleParticlesOptions = itemFromSingleOrMultiple(this._particlesOptions), reduceFactor = this.container.retina.reduceFactor;
+        const singleParticlesOptions = (itemFromSingleOrMultiple(this._particlesOptions) ??
+            {}), hslAnimation = this.options.spawnColor?.animation, reduceFactor = this.container.retina.reduceFactor, needsColorAnimation = !!hslAnimation, needsShapeData = !!this._shape, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: hMax, s: sMax, l: lMax } : null, shapeOptions = this.options.shape;
         for (let i = 0; i < quantity * reduceFactor; i++) {
-            const particlesOptions = deepExtend({}, singleParticlesOptions);
+            const particlesOptions = needsCopy
+                ? deepExtend({}, singleParticlesOptions)
+                : singleParticlesOptions;
             if (this.spawnColor) {
-                const hslAnimation = this.options.spawnColor?.animation;
-                if (hslAnimation) {
-                    const maxValues = {
-                        h: hMax,
-                        s: sMax,
-                        l: lMax,
-                    }, colorFactor = 3.6;
+                if (hslAnimation && maxValues) {
                     this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, maxValues.h, colorFactor);
                     this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, maxValues.s);
                     this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, maxValues.l);
                 }
                 setParticlesOptionsColor(particlesOptions, this.spawnColor);
             }
-            const shapeOptions = this.options.shape;
             let position = this.position;
             if (this._shape) {
                 const shapePosData = this._shape.randomPosition();
@@ -309,4 +312,23 @@ export class EmitterInstance {
             }
         }
     }
+    _prepareToDie = () => {
+        if (this._paused) {
+            return;
+        }
+        const duration = this.options.life.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined, minDuration = 0, minLifeCount = 0;
+        if ((this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {
+            this._duration = duration * millisecondsToSeconds;
+        }
+    };
+    _setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
+        const container = this.container;
+        if (!animation.enable) {
+            return initValue;
+        }
+        const colorOffset = randomInRangeValue(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = container.retina.reduceFactor
+            ? (delay * millisecondsToSeconds) / container.retina.reduceFactor
+            : Infinity, colorSpeed = getRangeValue(animation.speed);
+        return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * factor) % maxValue;
+    };
 }

package/esm/EmitterShapeBase.js

@@ -1,4 +1,8 @@
 export class EmitterShapeBase {
+    fill;
+    options;
+    position;
+    size;
     constructor(position, size, fill, options) {
         this.position = position;
         this.size = size;

package/esm/EmittersInstancesManager.js

@@ -0,0 +1,71 @@
+import { isNumber } from "@tsparticles/engine";
+import { Emitter } from "./Options/Classes/Emitter.js";
+const defaultIndex = 0;
+export class EmittersInstancesManager {
+    _containerArrays;
+    _engine;
+    constructor(engine) {
+        this._containerArrays = new Map();
+        this._engine = engine;
+    }
+    async addEmitter(container, options, position) {
+        const emitterOptions = new Emitter();
+        emitterOptions.load(options);
+        const { EmitterInstance } = await import("./EmitterInstance.js"), emitter = new EmitterInstance(this._engine, container, (emitter) => {
+            this.removeEmitter(container, emitter);
+        }, emitterOptions, position);
+        await emitter.init();
+        this.getArray(container).push(emitter);
+        return emitter;
+    }
+    clear(container) {
+        this.initContainer(container);
+        this._containerArrays.set(container, []);
+    }
+    getArray(container) {
+        this.initContainer(container);
+        let array = this._containerArrays.get(container);
+        if (!array) {
+            array = [];
+            this._containerArrays.set(container, array);
+        }
+        return array;
+    }
+    initContainer(container) {
+        if (this._containerArrays.has(container)) {
+            return;
+        }
+        this._containerArrays.set(container, []);
+        container.getEmitter = (idxOrName) => {
+            const array = this.getArray(container);
+            return idxOrName === undefined || isNumber(idxOrName)
+                ? array[idxOrName ?? defaultIndex]
+                : array.find(t => t.name === idxOrName);
+        };
+        container.addEmitter = async (options, position) => this.addEmitter(container, options, position);
+        container.removeEmitter = (idxOrName) => {
+            const emitter = container.getEmitter?.(idxOrName);
+            if (emitter) {
+                this.removeEmitter(container, emitter);
+            }
+        };
+        container.playEmitter = (idxOrName) => {
+            const emitter = container.getEmitter?.(idxOrName);
+            if (emitter) {
+                emitter.externalPlay();
+            }
+        };
+        container.pauseEmitter = (idxOrName) => {
+            const emitter = container.getEmitter?.(idxOrName);
+            if (emitter) {
+                emitter.externalPause();
+            }
+        };
+    }
+    removeEmitter(container, emitter) {
+        const index = this.getArray(container).indexOf(emitter), minIndex = 0, deleteCount = 1;
+        if (index >= minIndex) {
+            this.getArray(container).splice(index, deleteCount);
+        }
+    }
+}

package/esm/EmittersInteractor.js

@@ -0,0 +1,114 @@
+import { ExternalInteractorBase, } from "@tsparticles/plugin-interactivity";
+import { arrayRandomIndex, executeOnSingleOrMultiple, isArray, isInArray, itemFromArray, } from "@tsparticles/engine";
+import { Emitter } from "./Options/Classes/Emitter.js";
+import { defaultRandomOptions } from "./constants.js";
+const emittersMode = "emitters";
+export class EmittersInteractor extends ExternalInteractorBase {
+    handleClickMode;
+    _instancesManager;
+    constructor(instancesManager, container) {
+        super(container);
+        this._instancesManager = instancesManager;
+        this.handleClickMode = (mode, interactivityData) => {
+            const container = this.container, options = container.actualOptions, modeEmitters = options.interactivity.modes.emitters;
+            if (!modeEmitters || mode !== emittersMode) {
+                return;
+            }
+            let emittersModeOptions;
+            if (isArray(modeEmitters.value)) {
+                const minLength = 0, modeEmittersCount = modeEmitters.value.length;
+                if (modeEmittersCount > minLength && modeEmitters.random.enable) {
+                    emittersModeOptions = [];
+                    const usedIndexes = new Set();
+                    for (let i = 0; i < modeEmitters.random.count; i++) {
+                        const idx = arrayRandomIndex(modeEmitters.value);
+                        if (usedIndexes.has(idx) && usedIndexes.size < modeEmittersCount) {
+                            i--;
+                            continue;
+                        }
+                        usedIndexes.add(idx);
+                        const selectedOptions = itemFromArray(modeEmitters.value, idx);
+                        if (!selectedOptions) {
+                            continue;
+                        }
+                        emittersModeOptions.push(selectedOptions);
+                    }
+                }
+                else {
+                    emittersModeOptions = modeEmitters.value;
+                }
+            }
+            else {
+                emittersModeOptions = modeEmitters.value;
+            }
+            const emittersOptions = emittersModeOptions, ePosition = interactivityData.mouse.clickPosition;
+            void executeOnSingleOrMultiple(emittersOptions, async (emitter) => {
+                await this._instancesManager.addEmitter(this.container, emitter, ePosition);
+            });
+        };
+    }
+    clear() {
+    }
+    init() {
+    }
+    interact(_interactivityData, delta) {
+        for (const emitter of this._instancesManager.getArray(this.container)) {
+            emitter.update(delta);
+        }
+    }
+    isEnabled(interactivityData, particle) {
+        const container = this.container, options = container.actualOptions, mouse = interactivityData.mouse, events = (particle?.interactivity ?? options.interactivity).events;
+        if (!mouse.clickPosition || !events.onClick.enable) {
+            return false;
+        }
+        return isInArray(emittersMode, events.onClick.mode);
+    }
+    loadModeOptions(options, ...sources) {
+        options.emitters = {
+            random: defaultRandomOptions,
+            value: [],
+        };
+        for (const source of sources) {
+            if (!source?.emitters) {
+                continue;
+            }
+            if (isArray(source.emitters)) {
+                for (const emitter of source.emitters) {
+                    const tmp = new Emitter();
+                    tmp.load(emitter);
+                    options.emitters.value.push(tmp);
+                }
+            }
+            else if (Object.hasOwn(source.emitters, "value")) {
+                const emitterModeOptions = source.emitters;
+                options.emitters.random.enable = emitterModeOptions.random?.enable ?? options.emitters.random.enable;
+                options.emitters.random.count = emitterModeOptions.random?.count ?? options.emitters.random.count;
+                if (isArray(emitterModeOptions.value)) {
+                    for (const emitter of emitterModeOptions.value) {
+                        const tmp = new Emitter();
+                        tmp.load(emitter);
+                        options.emitters.value.push(tmp);
+                    }
+                }
+                else {
+                    const tmp = new Emitter();
+                    tmp.load(emitterModeOptions.value);
+                    options.emitters.value.push(tmp);
+                }
+            }
+            else {
+                const tmp = new Emitter();
+                tmp.load(source.emitters);
+                options.emitters.value.push(tmp);
+            }
+        }
+    }
+    removeEmitter(emitter) {
+        const index = this._instancesManager.getArray(this.container).indexOf(emitter), minIndex = 0, deleteCount = 1;
+        if (index >= minIndex) {
+            this._instancesManager.getArray(this.container).splice(index, deleteCount);
+        }
+    }
+    reset() {
+    }
+}

package/esm/EmittersPlugin.js

@@ -1,16 +1,16 @@
-import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, isArray, } from "@tsparticles/engine";
 import { Emitter } from "./Options/Classes/Emitter.js";
-import { EmitterClickMode } from "./Enums/EmitterClickMode.js";
-import { Emitters } from "./Emitters.js";
 export class EmittersPlugin {
-    constructor(engine) {
-        this._engine = engine;
-        this.id = "emitters";
+    id = "emitters";
+    _instancesManager;
+    constructor(instancesManager) {
+        this._instancesManager = instancesManager;
     }
-    getPlugin(container) {
-        return Promise.resolve(new Emitters(this._engine, container));
+    async getPlugin(container) {
+        const { EmittersPluginInstance } = await import("./EmittersPluginInstance.js");
+        return new EmittersPluginInstance(this._instancesManager, container);
     }
-    loadOptions(options, source) {
+    loadOptions(_container, options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
@@ -21,58 +21,12 @@ export class EmittersPlugin {
                 return tmp;
             });
         }
-        const interactivityEmitters = source?.interactivity?.modes?.emitters;
-        if (interactivityEmitters) {
-            if (isArray(interactivityEmitters)) {
-                options.interactivity.modes.emitters = {
-                    random: {
-                        count: 1,
-                        enable: true,
-                    },
-                    value: interactivityEmitters.map(s => {
-                        const tmp = new Emitter();
-                        tmp.load(s);
-                        return tmp;
-                    }),
-                };
-            }
-            else {
-                const emitterMode = interactivityEmitters;
-                if (isArray(emitterMode.value)) {
-                    options.interactivity.modes.emitters = {
-                        random: {
-                            count: emitterMode.random.count,
-                            enable: emitterMode.random.enable,
-                        },
-                        value: emitterMode.value.map(s => {
-                            const tmp = new Emitter();
-                            tmp.load(s);
-                            return tmp;
-                        }),
-                    };
-                }
-                else {
-                    const tmp = new Emitter();
-                    tmp.load(emitterMode.value);
-                    options.interactivity.modes.emitters = {
-                        random: {
-                            count: emitterMode.random.count,
-                            enable: emitterMode.random.enable,
-                        },
-                        value: tmp,
-                    };
-                }
-            }
-        }
     }
     needsPlugin(options) {
         if (!options) {
             return false;
         }
         const emitters = options.emitters;
-        return ((isArray(emitters) && !!emitters.length) ||
-            emitters !== undefined ||
-            (!!options.interactivity?.events?.onClick?.mode &&
-                isInArray(EmitterClickMode.emitter, options.interactivity.events.onClick.mode)));
+        return (isArray(emitters) && !!emitters.length) || emitters !== undefined;
     }
 }

package/esm/EmittersPluginInstance.js

@@ -0,0 +1,44 @@
+import { isArray } from "@tsparticles/engine";
+export class EmittersPluginInstance {
+    container;
+    _instancesManager;
+    constructor(instancesManager, container) {
+        this.container = container;
+        this._instancesManager = instancesManager;
+        this._instancesManager.initContainer(container);
+    }
+    async init() {
+        const emittersOptions = this.container.actualOptions.emitters;
+        if (isArray(emittersOptions)) {
+            for (const emitterOptions of emittersOptions) {
+                await this._instancesManager.addEmitter(this.container, emitterOptions);
+            }
+        }
+        else {
+            await this._instancesManager.addEmitter(this.container, emittersOptions);
+        }
+    }
+    pause() {
+        for (const emitter of this._instancesManager.getArray(this.container)) {
+            emitter.pause();
+        }
+    }
+    play() {
+        for (const emitter of this._instancesManager.getArray(this.container)) {
+            emitter.play();
+        }
+    }
+    resize() {
+        for (const emitter of this._instancesManager.getArray(this.container)) {
+            emitter.resize();
+        }
+    }
+    stop() {
+        this._instancesManager.clear(this.container);
+    }
+    update(delta) {
+        this._instancesManager.getArray(this.container).forEach(emitter => {
+            emitter.update(delta);
+        });
+    }
+}

package/esm/Options/Classes/Emitter.js

@@ -4,6 +4,19 @@ import { EmitterRate } from "./EmitterRate.js";
 import { EmitterShape } from "./EmitterShape.js";
 import { EmitterSize } from "./EmitterSize.js";
 export class Emitter {
+    autoPlay;
+    direction;
+    domId;
+    fill;
+    life;
+    name;
+    particles;
+    position;
+    rate;
+    shape;
+    size;
+    spawnColor;
+    startCount;
     constructor() {
         this.autoPlay = true;
         this.fill = true;

package/esm/Options/Classes/EmitterLife.js

@@ -1,5 +1,9 @@
 import { isNull, setRangeValue } from "@tsparticles/engine";
 export class EmitterLife {
+    count;
+    delay;
+    duration;
+    wait;
     constructor() {
         this.wait = false;
     }

package/esm/Options/Classes/EmitterRate.js

@@ -1,5 +1,7 @@
 import { isNull, setRangeValue } from "@tsparticles/engine";
 export class EmitterRate {
+    delay;
+    quantity;
     constructor() {
         this.quantity = 1;
         this.delay = 0.1;

package/esm/Options/Classes/EmitterShape.js

@@ -1,6 +1,9 @@
 import { deepExtend, isNull } from "@tsparticles/engine";
 import { EmitterShapeReplace } from "./EmitterShapeReplace.js";
 export class EmitterShape {
+    options;
+    replace;
+    type;
     constructor() {
         this.options = {};
         this.replace = new EmitterShapeReplace();

package/esm/Options/Classes/EmitterShapeReplace.js

@@ -1,5 +1,7 @@
 import { isNull } from "@tsparticles/engine";
 export class EmitterShapeReplace {
+    color;
+    opacity;
     constructor() {
         this.color = false;
         this.opacity = false;

package/esm/Options/Classes/EmitterSize.js

@@ -1,5 +1,8 @@
 import { PixelMode, isNull } from "@tsparticles/engine";
 export class EmitterSize {
+    height;
+    mode;
+    width;
     constructor() {
         this.mode = PixelMode.percent;
         this.height = 0;

package/esm/ShapeManager.js

@@ -1,14 +1,14 @@
-const shapeGeneratorss = new Map();
+const shapeGenerators = new Map();
 export class ShapeManager {
     addShapeGenerator(name, generator) {
         if (!this.getShapeGenerator(name)) {
-            shapeGeneratorss.set(name, generator);
+            shapeGenerators.set(name, generator);
         }
     }
     getShapeGenerator(name) {
-        return shapeGeneratorss.get(name);
+        return shapeGenerators.get(name);
     }
     getSupportedShapeGenerators() {
-        return shapeGeneratorss.keys();
+        return shapeGenerators.keys();
     }
 }

package/esm/constants.js

@@ -0,0 +1,4 @@
+export const defaultRandomOptions = {
+    count: 1,
+    enable: true,
+};

package/esm/index.js

@@ -1,14 +1,28 @@
-export function loadEmittersPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
-        const { ShapeManager } = await import("./ShapeManager.js"), { EmittersPlugin } = await import("./EmittersPlugin.js");
+export async function loadEmittersPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.21");
+    await engine.register(async (e) => {
+        const [{ ensureInteractivityPluginLoaded }, { ShapeManager }, { EmittersInstancesManager }, { EmittersPlugin },] = await Promise.all([
+            import("@tsparticles/plugin-interactivity"),
+            import("./ShapeManager.js"),
+            import("./EmittersInstancesManager.js"),
+            import("./EmittersPlugin.js"),
+        ]), instancesManager = new EmittersInstancesManager(e);
+        ensureInteractivityPluginLoaded(e);
         e.emitterShapeManager ??= new ShapeManager();
         e.addEmitterShapeGenerator ??= (name, generator) => {
             e.emitterShapeManager?.addShapeGenerator(name, generator);
         };
-        const plugin = new EmittersPlugin(e);
-        e.addPlugin(plugin);
+        e.addPlugin(new EmittersPlugin(instancesManager));
+        e.addInteractor?.("externalEmitters", async (container) => {
+            const { EmittersInteractor } = await import("./EmittersInteractor.js");
+            return new EmittersInteractor(instancesManager, container);
+        });
     });
 }
+export function ensureEmittersPluginLoaded(e) {
+    if (!e.addEmitterShapeGenerator) {
+        throw new Error("tsParticles Emitters Plugin is not loaded");
+    }
+}
 export * from "./EmitterShapeBase.js";
 export * from "./Enums/EmitterClickMode.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-emitters",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.21",
   "description": "tsParticles emitters plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -86,7 +86,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.2"
+    "@tsparticles/engine": "4.0.0-alpha.21",
+    "@tsparticles/plugin-interactivity": "4.0.0-alpha.21"
   },
   "publishConfig": {
     "access": "public"