@tsparticles/plugin-emitters 4.0.0-alpha.8 → 4.0.0-beta.0

package/tsparticles.plugin.emitters.min.js

@@ -1,2 +1,2 @@
-/*! For license information please see tsparticles.plugin.emitters.min.js.LICENSE.txt */
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/plugin-interactivity","@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine")):t(e.window,e.window);for(var i in r)("object"==typeof exports?exports:e)[i]=r[i]}}(this,((e,t)=>(()=>{var r,i,n,o,a={303(e){e.exports=t},702(t){t.exports=e}},s={};function l(e){var t=s[e];if(void 0!==t)return t.exports;var r=s[e]={exports:{}};return a[e](r,r.exports,l),r.exports}l.m=a,i=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,l.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var n=Object.create(null);l.r(n);var o={};r=r||[null,i({}),i([]),i(i)];for(var a=2&t&&e;("object"==typeof a||"function"==typeof a)&&!~r.indexOf(a);a=i(a))Object.getOwnPropertyNames(a).forEach((t=>o[t]=()=>e[t]));return o.default=()=>e,l.d(n,o),n},l.d=(e,t)=>{for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.f={},l.e=e=>Promise.all(Object.keys(l.f).reduce(((t,r)=>(l.f[r](e,t),t)),[])),l.u=e=>e+".min.js",l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n={},o="@tsparticles/plugin-emitters:",l.l=(e,t,r,i)=>{if(n[e])n[e].push(t);else{var a,s;if(void 0!==r)for(var c=document.getElementsByTagName("script"),p=0;p<c.length;p++){var u=c[p];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==o+r){a=u;break}}a||(s=!0,(a=document.createElement("script")).charset="utf-8",l.nc&&a.setAttribute("nonce",l.nc),a.setAttribute("data-webpack",o+r),a.src=e),n[e]=[t];var d=(t,r)=>{a.onerror=a.onload=null,clearTimeout(f);var i=n[e];if(delete n[e],a.parentNode&&a.parentNode.removeChild(a),i&&i.forEach((e=>e(r))),t)return t(r)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=d.bind(null,a.onerror),a.onload=d.bind(null,a.onload),s&&document.head.appendChild(a)}},l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;globalThis.importScripts&&(e=globalThis.location+"");var t=globalThis.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var i=r.length-1;i>-1&&(!e||!/^http(s?):/.test(e));)e=r[i--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),l.p=e})(),(()=>{var e={833:0};l.f.j=(t,r)=>{var i=l.o(e,t)?e[t]:void 0;if(0!==i)if(i)r.push(i[2]);else{var n=new Promise(((r,n)=>i=e[t]=[r,n]));r.push(i[2]=n);var o=l.p+l.u(t),a=new Error;l.l(o,(r=>{if(l.o(e,t)&&(0!==(i=e[t])&&(e[t]=void 0),i)){var n=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;a.message="Loading chunk "+t+" failed.\n("+n+": "+o+")",a.name="ChunkLoadError",a.type=n,a.request=o,i[1](a)}}),"chunk-"+t,t)}};var t=(t,r)=>{var i,n,[o,a,s]=r,c=0;if(o.some((t=>0!==e[t]))){for(i in a)l.o(a,i)&&(l.m[i]=a[i]);if(s)s(l)}for(t&&t(r);c<o.length;c++)n=o[c],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0},r=this.webpackChunk_tsparticles_plugin_emitters=this.webpackChunk_tsparticles_plugin_emitters||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var c,p={};l.r(p),l.d(p,{EmitterClickMode:()=>c,EmitterShapeBase:()=>u,loadEmittersPlugin:()=>d});class u{constructor(e,t,r,i){this.position=e,this.size=t,this.fill=r,this.options=i}resize(e,t){this.position=e,this.size=t}}async function d(e){e.checkVersion("4.0.0-alpha.8"),await e.register((async e=>{const{loadInteractivityPlugin:t}=await Promise.resolve().then(l.t.bind(l,702,19)),{ShapeManager:r}=await l.e(490).then(l.bind(l,490)),{EmittersInstancesManager:i}=await l.e(246).then(l.bind(l,246)),{EmittersPlugin:n}=await l.e(330).then(l.bind(l,330)),o=new i(e);await t(e),e.emitterShapeManager??=new r,e.addEmitterShapeGenerator??=(t,r)=>{e.emitterShapeManager?.addShapeGenerator(t,r)},e.addPlugin(new n(o)),e.addInteractor?.("externalEmitters",(async e=>{const{EmittersInteractor:t}=await l.e(940).then(l.bind(l,940));return new t(o,e)}))}))}return function(e){e.emitter="emitter"}(c||(c={})),p})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/plugin-interactivity","@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/plugin-interactivity"),require("@tsparticles/engine")):t(e.window,e.window);for(var i in r)("object"==typeof exports?exports:e)[i]=r[i]}}(this,(e,t)=>(()=>{"use strict";var r,i,o,n,a={303(e){e.exports=t},702(t){t.exports=e}},s={};function l(e){var t=s[e];if(void 0!==t)return t.exports;var r=s[e]={exports:{}};return a[e](r,r.exports,l),r.exports}l.m=a,p=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,l.t=function(e,t){if(1&t&&(e=this(e)),8&t||"object"==typeof e&&e&&(4&t&&e.__esModule||16&t&&"function"==typeof e.then))return e;var r=Object.create(null);l.r(r);var i={};c=c||[null,p({}),p([]),p(p)];for(var o=2&t&&e;("object"==typeof o||"function"==typeof o)&&!~c.indexOf(o);o=p(o))Object.getOwnPropertyNames(o).forEach(t=>i[t]=()=>e[t]);return i.default=()=>e,l.d(r,i),r},l.d=(e,t)=>{for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.f={},l.e=e=>Promise.all(Object.keys(l.f).reduce((t,r)=>(l.f[r](e,t),t),[])),l.u=e=>""+e+".min.js",l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),u={},l.l=(e,t,r,i)=>{if(u[e])return void u[e].push(t);if(void 0!==r)for(var o,n,a=document.getElementsByTagName("script"),s=0;s<a.length;s++){var c=a[s];if(c.getAttribute("src")==e||c.getAttribute("data-webpack")=="@tsparticles/plugin-emitters:"+r){o=c;break}}o||(n=!0,(o=document.createElement("script")).charset="utf-8",l.nc&&o.setAttribute("nonce",l.nc),o.setAttribute("data-webpack","@tsparticles/plugin-emitters:"+r),o.src=e),u[e]=[t];var p=(t,r)=>{o.onerror=o.onload=null,clearTimeout(d);var i=u[e];if(delete u[e],o.parentNode&&o.parentNode.removeChild(o),i&&i.forEach(e=>e(r)),t)return t(r)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=p.bind(null,o.onerror),o.onload=p.bind(null,o.onload),n&&document.head.appendChild(o)},l.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.g.importScripts&&(d=l.g.location+"");var c,p,u,d,f=l.g.document;if(!d&&f&&(f.currentScript&&"SCRIPT"===f.currentScript.tagName.toUpperCase()&&(d=f.currentScript.src),!d)){var h=f.getElementsByTagName("script");if(h.length)for(var m=h.length-1;m>-1&&(!d||!/^http(s?):/.test(d));)d=h[m--].src}if(!d)throw Error("Automatic publicPath is not supported in this browser");l.p=d=d.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),r={833:0},l.f.j=(e,t)=>{var i=l.o(r,e)?r[e]:void 0;if(0!==i)if(i)t.push(i[2]);else{var o=new Promise((t,o)=>i=r[e]=[t,o]);t.push(i[2]=o);var n=l.p+l.u(e),a=Error();l.l(n,t=>{if(l.o(r,e)&&(0!==(i=r[e])&&(r[e]=void 0),i)){var o=t&&("load"===t.type?"missing":t.type),n=t&&t.target&&t.target.src;a.message="Loading chunk "+e+` failed.
+(`+o+": "+n+")",a.name="ChunkLoadError",a.type=o,a.request=n,i[1](a)}},"chunk-"+e,e)}},i=(e,t)=>{var i,o,[n,a,s]=t,c=0;if(n.some(e=>0!==r[e])){for(i in a)l.o(a,i)&&(l.m[i]=a[i]);s&&s(l)}for(e&&e(t);c<n.length;c++)o=n[c],l.o(r,o)&&r[o]&&r[o][0](),r[o]=0},(o=this.webpackChunk_tsparticles_plugin_emitters=this.webpackChunk_tsparticles_plugin_emitters||[]).forEach(i.bind(null,0)),o.push=i.bind(null,o.push.bind(o));var b={};l.r(b),l.d(b,{EmitterClickMode:()=>n,EmitterShapeBase:()=>g,ensureEmittersPluginLoaded:()=>v,loadEmittersPlugin:()=>y});class g{fill;options;position;size;constructor(e,t,r,i){this.position=e,this.size=t,this.fill=r,this.options=i}resize(e,t){this.position=e,this.size=t}}async function y(e){e.checkVersion("4.0.0-beta.0"),await e.register(async e=>{let[{ensureInteractivityPluginLoaded:t},{ShapeManager:r},{EmittersInstancesManager:i},{EmittersPlugin:o}]=await Promise.all([Promise.resolve().then(l.t.bind(l,702,19)),l.e(772).then(l.bind(l,772)),l.e(784).then(l.bind(l,784)),l.e(588).then(l.bind(l,588))]),n=new i(e);t(e),e.emitterShapeManager??=new r,e.addEmitterShapeGenerator??=(t,r)=>{e.emitterShapeManager?.addShapeGenerator(t,r)},e.addPlugin(new o(n)),e.addInteractor?.("externalEmitters",async e=>{let{EmittersInteractor:t}=await l.e(526).then(l.bind(l,526));return new t(n,e)})})}function v(e){if(!e.addEmitterShapeGenerator)throw Error("tsParticles Emitters Plugin is not loaded")}return(n||(n={})).emitter="emitter",b})());

package/types/EmitterInstance.d.ts

@@ -10,7 +10,12 @@ export declare class EmitterInstance {
     options: Emitter;
     position: ICoordinates;
     size: IDimension;
-    spawnColor?: IHsl;
+    spawnFillColor?: IHsl;
+    spawnFillEnabled?: boolean;
+    spawnFillOpacity?: number;
+    spawnStrokeColor?: IHsl;
+    spawnStrokeOpacity?: number;
+    spawnStrokeWidth?: number;
     private _currentDuration;
     private _currentEmitDelay;
     private _currentSpawnDelay;

package/types/EmittersInteractor.d.ts

@@ -6,6 +6,7 @@ import type { EmitterInstance } from "./EmitterInstance.js";
 import type { EmittersInstancesManager } from "./EmittersInstancesManager.js";
 export declare class EmittersInteractor extends ExternalInteractorBase<EmitterContainer> {
     handleClickMode: (mode: string, interactivityData: IInteractivityData) => void;
+    readonly maxDistance: number;
     private readonly _instancesManager;
     constructor(instancesManager: EmittersInstancesManager, container: EmitterContainer);
     clear(): void;

package/types/EmittersPlugin.d.ts

@@ -3,7 +3,7 @@ import type { EmitterOptions, IEmitterOptions } from "./types.js";
 import type { EmitterContainer } from "./EmitterContainer.js";
 import type { EmittersInstancesManager } from "./EmittersInstancesManager.js";
 export declare class EmittersPlugin implements IPlugin {
-    readonly id: string;
+    readonly id = "emitters";
     private readonly _instancesManager;
     constructor(instancesManager: EmittersInstancesManager);
     getPlugin(container: EmitterContainer): Promise<IContainerPlugin>;

package/types/IEmitterShapeGenerator.d.ts

@@ -1,5 +1,5 @@
-import type { ICoordinates, IDimension } from "@tsparticles/engine";
+import type { Container, ICoordinates, IDimension } from "@tsparticles/engine";
 import type { IEmitterShape } from "./IEmitterShape.js";
 export interface IEmitterShapeGenerator<TOptions = unknown> {
-    generate(position: ICoordinates, size: IDimension, fill: boolean, options: TOptions): IEmitterShape;
+    generate(container: Container, position: ICoordinates, size: IDimension, fill: boolean, options: TOptions): IEmitterShape;
 }

package/types/Options/Classes/Emitter.d.ts

@@ -3,6 +3,7 @@ import { EmitterLife } from "./EmitterLife.js";
 import { EmitterRate } from "./EmitterRate.js";
 import { EmitterShape } from "./EmitterShape.js";
 import { EmitterSize } from "./EmitterSize.js";
+import { EmitterSpawn } from "./EmitterSpawn.js";
 import type { IEmitter } from "../Interfaces/IEmitter.js";
 export declare class Emitter implements IEmitter, IOptionLoader<IEmitter> {
     autoPlay: boolean;
@@ -16,7 +17,9 @@ export declare class Emitter implements IEmitter, IOptionLoader<IEmitter> {
     rate: EmitterRate;
     shape: EmitterShape;
     size?: EmitterSize;
-    spawnColor?: AnimatableColor;
+    spawn: EmitterSpawn;
+    spawnFillColor?: AnimatableColor;
+    spawnStrokeColor?: AnimatableColor;
     startCount: number;
     constructor();
     load(data?: RecursivePartial<IEmitter>): void;

package/types/Options/Classes/EmitterSpawn.d.ts

@@ -0,0 +1,7 @@
+import { Fill, type IOptionLoader, type RecursivePartial, Stroke } from "@tsparticles/engine";
+import type { IEmitterSpawn } from "../Interfaces/IEmitterSpawn.js";
+export declare class EmitterSpawn implements IEmitterSpawn, IOptionLoader<IEmitterSpawn> {
+    fill?: Fill;
+    stroke?: Stroke;
+    load(data?: RecursivePartial<IEmitterSpawn>): void;
+}

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

@@ -3,6 +3,7 @@ import type { IEmitterLife } from "./IEmitterLife.js";
 import type { IEmitterRate } from "./IEmitterRate.js";
 import type { IEmitterShape } from "./IEmitterShape.js";
 import type { IEmitterSize } from "./IEmitterSize.js";
+import type { IEmitterSpawn } from "./IEmitterSpawn.js";
 export interface IEmitter {
     autoPlay: boolean;
     direction?: MoveDirection | keyof typeof MoveDirection | MoveDirectionAlt | number;
@@ -15,6 +16,8 @@ export interface IEmitter {
     rate: IEmitterRate;
     shape: IEmitterShape;
     size?: IEmitterSize;
-    spawnColor?: IAnimatableColor;
+    spawn: IEmitterSpawn;
+    spawnFillColor?: IAnimatableColor;
+    spawnStrokeColor?: IAnimatableColor;
     startCount: number;
 }

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

@@ -0,0 +1,5 @@
+import type { IFill, IStroke } from "@tsparticles/engine";
+export interface IEmitterSpawn {
+    fill?: IFill;
+    stroke?: IStroke;
+}

package/types/index.d.ts

@@ -1,5 +1,6 @@
 import type { EmittersEngine } from "./EmittersEngine.js";
 export declare function loadEmittersPlugin(engine: EmittersEngine): Promise<void>;
+export declare function ensureEmittersPluginLoaded(e: EmittersEngine): void;
 export type * from "./EmitterContainer.js";
 export * from "./EmitterShapeBase.js";
 export type * from "./EmittersEngine.js";

package/umd/EmitterInstance.js

@@ -13,53 +13,54 @@
     const engine_1 = require("@tsparticles/engine");
     const Emitter_js_1 = require("./Options/Classes/Emitter.js");
     const EmitterSize_js_1 = require("./Options/Classes/EmitterSize.js");
-    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;
-        }
-        else {
-            particlesOptions.color = {
-                value: color,
-            };
-        }
+    const defaultLifeDelay = 0, minLifeCount = 0, defaultSpawnDelay = 0, defaultEmitDelay = 0, defaultLifeCount = -1, defaultColorAnimationFactor = 1, colorFactor = 3.6, defaultStrokeWidth = 1;
+    function setParticlesOptionsFillColor(particlesOptions, color, opacity, enable) {
+        particlesOptions.fill = new engine_1.Fill();
+        particlesOptions.fill.color = engine_1.AnimatableColor.create(undefined, { value: color });
+        particlesOptions.fill.enable = enable;
+        particlesOptions.fill.opacity = opacity;
+    }
+    function setParticlesOptionsStrokeColor(particlesOptions, color, opacity, width) {
+        particlesOptions.stroke = new engine_1.Stroke();
+        particlesOptions.stroke.color = engine_1.AnimatableColor.create(undefined, { value: color });
+        particlesOptions.stroke.opacity = opacity;
+        particlesOptions.stroke.width = width;
     }
     class EmitterInstance {
+        container;
+        removeCallback;
+        fill;
+        name;
+        options;
+        position;
+        size;
+        spawnFillColor;
+        spawnFillEnabled;
+        spawnFillOpacity;
+        spawnStrokeColor;
+        spawnStrokeOpacity;
+        spawnStrokeWidth;
+        _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.removeCallback = removeCallback;
-            this._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,
-                    },
-                });
-            };
-            this._prepareToDie = () => {
-                if (this._paused) {
-                    return;
-                }
-                const duration = this.options.life.duration !== undefined ? (0, engine_1.getRangeValue)(this.options.life.duration) : undefined, minDuration = 0, minLifeCount = 0;
-                if ((this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {
-                    this._duration = duration * engine_1.millisecondsToSeconds;
-                }
-            };
-            this._setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
-                const container = this.container;
-                if (!animation.enable) {
-                    return initValue;
-                }
-                const colorOffset = (0, engine_1.randomInRangeValue)(animation.offset), delay = (0, engine_1.getRangeValue)(this.options.rate.delay), emitFactor = container.retina.reduceFactor
-                    ? (delay * engine_1.millisecondsToSeconds) / container.retina.reduceFactor
-                    : Infinity, colorSpeed = (0, engine_1.getRangeValue)(animation.speed);
-                return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * factor) % maxValue;
-            };
             this._engine = engine;
             this._currentDuration = 0;
             this._currentEmitDelay = 0;
@@ -84,8 +85,11 @@
             const particlesOptions = (0, engine_1.deepExtend)({}, this.options.particles);
             particlesOptions.move ??= {};
             particlesOptions.move.direction ??= this.options.direction;
-            if (this.options.spawnColor) {
-                this.spawnColor = (0, engine_1.rangeColorToHsl)(this._engine, this.options.spawnColor);
+            if (this.options.spawn.fill?.color) {
+                this.spawnFillColor = (0, engine_1.rangeColorToHsl)(this._engine, this.options.spawn.fill.color);
+            }
+            if (this.options.spawn.stroke?.color) {
+                this.spawnStrokeColor = (0, engine_1.rangeColorToHsl)(this._engine, this.options.spawn.stroke.color);
             }
             this._paused = !this.options.autoPlay;
             this._particlesOptions = particlesOptions;
@@ -111,7 +115,7 @@
             }
             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,
@@ -213,7 +217,7 @@
                         container: this.container,
                     });
                     this.play();
-                    this._currentSpawnDelay -= this._currentSpawnDelay;
+                    this._currentSpawnDelay -= this._spawnDelay;
                     delete this._spawnDelay;
                 }
             }
@@ -266,6 +270,19 @@
                     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;
@@ -275,18 +292,36 @@
         }
         _emitParticles(quantity) {
             const singleParticlesOptions = ((0, engine_1.itemFromSingleOrMultiple)(this._particlesOptions) ??
-                {}), hslAnimation = this.options.spawnColor?.animation, reduceFactor = this.container.retina.reduceFactor, needsColorAnimation = !!hslAnimation, needsShapeData = !!this._shape, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: engine_1.hMax, s: engine_1.sMax, l: engine_1.lMax } : null, shapeOptions = this.options.shape;
+                {}), fillHslAnimation = this.options.spawn.fill?.color.animation, fillEnabled = this.options.spawn.fill?.enable ?? !!this.options.spawn.fill?.color, fillOpacity = this.options.spawn.fill?.opacity === undefined
+                ? engine_1.defaultOpacity
+                : (0, engine_1.getRangeValue)(this.options.spawn.fill.opacity), strokeHslAnimation = this.options.spawn.stroke?.color?.animation, strokeOpacity = this.options.spawn.stroke?.opacity === undefined
+                ? engine_1.defaultOpacity
+                : (0, engine_1.getRangeValue)(this.options.spawn.stroke.opacity), strokeWidth = this.options.spawn.stroke?.width === undefined
+                ? defaultStrokeWidth
+                : (0, engine_1.getRangeValue)(this.options.spawn.stroke.width), reduceFactor = this.container.retina.reduceFactor, needsFillColorAnimation = !!fillHslAnimation, needsStrokeColorAnimation = !!strokeHslAnimation, needsShapeData = !!this._shape, needsColorAnimation = needsFillColorAnimation || needsStrokeColorAnimation, needsCopy = needsColorAnimation || needsShapeData, maxValues = needsColorAnimation ? { h: engine_1.hMax, s: engine_1.sMax, l: engine_1.lMax } : null, shapeOptions = this.options.shape;
             for (let i = 0; i < quantity * reduceFactor; i++) {
                 const particlesOptions = needsCopy
                     ? (0, engine_1.deepExtend)({}, singleParticlesOptions)
                     : singleParticlesOptions;
-                if (this.spawnColor) {
-                    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);
+                this.spawnFillOpacity = fillOpacity;
+                this.spawnFillEnabled = fillEnabled;
+                this.spawnStrokeOpacity = strokeOpacity;
+                this.spawnStrokeWidth = strokeWidth;
+                if (this.spawnFillColor) {
+                    if (fillHslAnimation && maxValues) {
+                        this.spawnFillColor.h = this._setColorAnimation(fillHslAnimation.h, this.spawnFillColor.h, maxValues.h, colorFactor);
+                        this.spawnFillColor.s = this._setColorAnimation(fillHslAnimation.s, this.spawnFillColor.s, maxValues.s);
+                        this.spawnFillColor.l = this._setColorAnimation(fillHslAnimation.l, this.spawnFillColor.l, maxValues.l);
+                    }
+                    setParticlesOptionsFillColor(particlesOptions, this.spawnFillColor, this.spawnFillOpacity, this.spawnFillEnabled);
+                }
+                if (this.spawnStrokeColor) {
+                    if (strokeHslAnimation && maxValues) {
+                        this.spawnStrokeColor.h = this._setColorAnimation(strokeHslAnimation.h, this.spawnStrokeColor.h, maxValues.h, colorFactor);
+                        this.spawnStrokeColor.s = this._setColorAnimation(strokeHslAnimation.s, this.spawnStrokeColor.s, maxValues.s);
+                        this.spawnStrokeColor.l = this._setColorAnimation(strokeHslAnimation.l, this.spawnStrokeColor.l, maxValues.l);
                     }
-                    setParticlesOptionsColor(particlesOptions, this.spawnColor);
+                    setParticlesOptionsStrokeColor(particlesOptions, this.spawnStrokeColor, this.spawnStrokeOpacity, this.spawnStrokeWidth);
                 }
                 let position = this.position;
                 if (this._shape) {
@@ -295,17 +330,7 @@
                         position = shapePosData.position;
                         const replaceData = shapeOptions.replace;
                         if (replaceData.color && shapePosData.color) {
-                            setParticlesOptionsColor(particlesOptions, shapePosData.color);
-                        }
-                        if (replaceData.opacity) {
-                            if (particlesOptions.opacity) {
-                                particlesOptions.opacity.value = shapePosData.opacity;
-                            }
-                            else {
-                                particlesOptions.opacity = {
-                                    value: shapePosData.opacity,
-                                };
-                            }
+                            setParticlesOptionsFillColor(particlesOptions, shapePosData.color, replaceData.opacity ? (shapePosData.opacity ?? engine_1.defaultOpacity) : engine_1.defaultOpacity, true);
                         }
                     }
                     else {
@@ -317,6 +342,25 @@
                 }
             }
         }
+        _prepareToDie = () => {
+            if (this._paused) {
+                return;
+            }
+            const duration = this.options.life.duration !== undefined ? (0, engine_1.getRangeValue)(this.options.life.duration) : undefined, minDuration = 0, minLifeCount = 0;
+            if ((this._lifeCount > minLifeCount || this._immortal) && duration !== undefined && duration > minDuration) {
+                this._duration = duration * engine_1.millisecondsToSeconds;
+            }
+        };
+        _setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
+            const container = this.container;
+            if (!animation.enable) {
+                return initValue;
+            }
+            const colorOffset = (0, engine_1.randomInRangeValue)(animation.offset), delay = (0, engine_1.getRangeValue)(this.options.rate.delay), emitFactor = container.retina.reduceFactor
+                ? (delay * engine_1.millisecondsToSeconds) / container.retina.reduceFactor
+                : Infinity, colorSpeed = (0, engine_1.getRangeValue)(animation.speed);
+            return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * factor) % maxValue;
+        };
     }
     exports.EmitterInstance = EmitterInstance;
 });

package/umd/EmitterShapeBase.js

@@ -11,6 +11,10 @@
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.EmitterShapeBase = void 0;
     class EmitterShapeBase {
+        fill;
+        options;
+        position;
+        size;
         constructor(position, size, fill, options) {
             this.position = position;
             this.size = size;

package/umd/EmittersInstancesManager.js

@@ -48,6 +48,8 @@ var __importStar = (this && this.__importStar) || (function () {
     const Emitter_js_1 = require("./Options/Classes/Emitter.js");
     const defaultIndex = 0;
     class EmittersInstancesManager {
+        _containerArrays;
+        _engine;
         constructor(engine) {
             this._containerArrays = new Map();
             this._engine = engine;

package/umd/EmittersInteractor.js

@@ -16,9 +16,13 @@
     const constants_js_1 = require("./constants.js");
     const emittersMode = "emitters";
     class EmittersInteractor extends plugin_interactivity_1.ExternalInteractorBase {
+        handleClickMode;
+        maxDistance;
+        _instancesManager;
         constructor(instancesManager, container) {
             super(container);
             this._instancesManager = instancesManager;
+            this.maxDistance = 0;
             this.handleClickMode = (mode, interactivityData) => {
                 const container = this.container, options = container.actualOptions, modeEmitters = options.interactivity.modes.emitters;
                 if (!modeEmitters || mode !== emittersMode) {
@@ -89,7 +93,7 @@
                         options.emitters.value.push(tmp);
                     }
                 }
-                else if (Object.hasOwn(source.emitters, "value")) {
+                else if ("value" in source.emitters) {
                     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;

package/umd/EmittersPlugin.js

@@ -47,9 +47,10 @@ var __importStar = (this && this.__importStar) || (function () {
     const engine_1 = require("@tsparticles/engine");
     const Emitter_js_1 = require("./Options/Classes/Emitter.js");
     class EmittersPlugin {
+        id = "emitters";
+        _instancesManager;
         constructor(instancesManager) {
             this._instancesManager = instancesManager;
-            this.id = "emitters";
         }
         async getPlugin(container) {
             const { EmittersPluginInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./EmittersPluginInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./EmittersPluginInstance.js"], resolve_1, reject_1); }).then(__importStar));

package/umd/EmittersPluginInstance.js

@@ -12,6 +12,8 @@
     exports.EmittersPluginInstance = void 0;
     const engine_1 = require("@tsparticles/engine");
     class EmittersPluginInstance {
+        container;
+        _instancesManager;
         constructor(instancesManager, container) {
             this.container = container;
             this._instancesManager = instancesManager;

package/umd/Options/Classes/Emitter.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./EmitterLife.js", "./EmitterRate.js", "./EmitterShape.js", "./EmitterSize.js"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./EmitterLife.js", "./EmitterRate.js", "./EmitterShape.js", "./EmitterSize.js", "./EmitterSpawn.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -15,13 +15,30 @@
     const EmitterRate_js_1 = require("./EmitterRate.js");
     const EmitterShape_js_1 = require("./EmitterShape.js");
     const EmitterSize_js_1 = require("./EmitterSize.js");
+    const EmitterSpawn_js_1 = require("./EmitterSpawn.js");
     class Emitter {
+        autoPlay;
+        direction;
+        domId;
+        fill;
+        life;
+        name;
+        particles;
+        position;
+        rate;
+        shape;
+        size;
+        spawn;
+        spawnFillColor;
+        spawnStrokeColor;
+        startCount;
         constructor() {
             this.autoPlay = true;
             this.fill = true;
             this.life = new EmitterLife_js_1.EmitterLife();
             this.rate = new EmitterRate_js_1.EmitterRate();
             this.shape = new EmitterShape_js_1.EmitterShape();
+            this.spawn = new EmitterSpawn_js_1.EmitterSpawn();
             this.startCount = 0;
         }
         load(data) {
@@ -49,6 +66,7 @@
             });
             this.rate.load(data.rate);
             this.shape.load(data.shape);
+            this.spawn.load(data.spawn);
             if (data.position !== undefined) {
                 this.position = {};
                 if (data.position.x !== undefined) {
@@ -58,9 +76,13 @@
                     this.position.y = (0, engine_1.setRangeValue)(data.position.y);
                 }
             }
-            if (data.spawnColor !== undefined) {
-                this.spawnColor ??= new engine_1.AnimatableColor();
-                this.spawnColor.load(data.spawnColor);
+            if (data.spawnFillColor !== undefined) {
+                this.spawnFillColor ??= new engine_1.AnimatableColor();
+                this.spawnFillColor.load(data.spawnFillColor);
+            }
+            if (data.spawnStrokeColor !== undefined) {
+                this.spawnStrokeColor ??= new engine_1.AnimatableColor();
+                this.spawnStrokeColor.load(data.spawnStrokeColor);
             }
             if (data.startCount !== undefined) {
                 this.startCount = data.startCount;

package/umd/Options/Classes/EmitterLife.js

@@ -12,6 +12,10 @@
     exports.EmitterLife = void 0;
     const engine_1 = require("@tsparticles/engine");
     class EmitterLife {
+        count;
+        delay;
+        duration;
+        wait;
         constructor() {
             this.wait = false;
         }

package/umd/Options/Classes/EmitterRate.js

@@ -12,6 +12,8 @@
     exports.EmitterRate = void 0;
     const engine_1 = require("@tsparticles/engine");
     class EmitterRate {
+        delay;
+        quantity;
         constructor() {
             this.quantity = 1;
             this.delay = 0.1;

package/umd/Options/Classes/EmitterShape.js

@@ -13,6 +13,9 @@
     const engine_1 = require("@tsparticles/engine");
     const EmitterShapeReplace_js_1 = require("./EmitterShapeReplace.js");
     class EmitterShape {
+        options;
+        replace;
+        type;
         constructor() {
             this.options = {};
             this.replace = new EmitterShapeReplace_js_1.EmitterShapeReplace();

package/umd/Options/Classes/EmitterShapeReplace.js

@@ -12,6 +12,8 @@
     exports.EmitterShapeReplace = void 0;
     const engine_1 = require("@tsparticles/engine");
     class EmitterShapeReplace {
+        color;
+        opacity;
         constructor() {
             this.color = false;
             this.opacity = false;

package/umd/Options/Classes/EmitterSize.js

@@ -12,6 +12,9 @@
     exports.EmitterSize = void 0;
     const engine_1 = require("@tsparticles/engine");
     class EmitterSize {
+        height;
+        mode;
+        width;
         constructor() {
             this.mode = engine_1.PixelMode.percent;
             this.height = 0;

package/umd/Options/Classes/EmitterSpawn.js

@@ -0,0 +1,32 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.EmitterSpawn = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    class EmitterSpawn {
+        fill;
+        stroke;
+        load(data) {
+            if ((0, engine_1.isNull)(data)) {
+                return;
+            }
+            if (data.fill) {
+                this.fill ??= new engine_1.Fill();
+                this.fill.load(data.fill);
+            }
+            if (data.stroke) {
+                this.stroke ??= new engine_1.Stroke();
+                this.stroke.load(data.stroke);
+            }
+        }
+    }
+    exports.EmitterSpawn = EmitterSpawn;
+});

package/umd/Options/Interfaces/IEmitterSpawn.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});