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

package/esm/EmitterInstance.js

@@ -1,53 +1,54 @@
-import { PixelMode, Vector, calcPositionOrRandomFromSizeRanged, deepExtend, getRangeValue, getSize, hMax, half, isPointInside, itemFromSingleOrMultiple, lMax, millisecondsToSeconds, randomInRangeValue, rangeColorToHsl, sMax, safeDocument, } from "@tsparticles/engine";
+import { AnimatableColor, Fill, PixelMode, Stroke, Vector, calcPositionOrRandomFromSizeRanged, deepExtend, defaultOpacity, 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, 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 Fill();
+    particlesOptions.fill.color = AnimatableColor.create(undefined, { value: color });
+    particlesOptions.fill.enable = enable;
+    particlesOptions.fill.opacity = opacity;
+}
+function setParticlesOptionsStrokeColor(particlesOptions, color, opacity, width) {
+    particlesOptions.stroke = new Stroke();
+    particlesOptions.stroke.color = AnimatableColor.create(undefined, { value: color });
+    particlesOptions.stroke.opacity = opacity;
+    particlesOptions.stroke.width = width;
 }
 export 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 ? 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._engine = engine;
         this._currentDuration = 0;
         this._currentEmitDelay = 0;
@@ -72,8 +73,11 @@ export class EmitterInstance {
         const particlesOptions = deepExtend({}, this.options.particles);
         particlesOptions.move ??= {};
         particlesOptions.move.direction ??= this.options.direction;
-        if (this.options.spawnColor) {
-            this.spawnColor = rangeColorToHsl(this._engine, this.options.spawnColor);
+        if (this.options.spawn.fill?.color) {
+            this.spawnFillColor = rangeColorToHsl(this._engine, this.options.spawn.fill.color);
+        }
+        if (this.options.spawn.stroke?.color) {
+            this.spawnStrokeColor = rangeColorToHsl(this._engine, this.options.spawn.stroke.color);
         }
         this._paused = !this.options.autoPlay;
         this._particlesOptions = particlesOptions;
@@ -99,7 +103,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 +205,7 @@ export class EmitterInstance {
                     container: this.container,
                 });
                 this.play();
-                this._currentSpawnDelay -= this._currentSpawnDelay;
+                this._currentSpawnDelay -= this._spawnDelay;
                 delete this._spawnDelay;
             }
         }
@@ -254,6 +258,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;
@@ -263,18 +280,36 @@ export class EmitterInstance {
     }
     _emitParticles(quantity) {
         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;
+            {}), 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
+            ? defaultOpacity
+            : getRangeValue(this.options.spawn.fill.opacity), strokeHslAnimation = this.options.spawn.stroke?.color?.animation, strokeOpacity = this.options.spawn.stroke?.opacity === undefined
+            ? defaultOpacity
+            : getRangeValue(this.options.spawn.stroke.opacity), strokeWidth = this.options.spawn.stroke?.width === undefined
+            ? defaultStrokeWidth
+            : 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: hMax, s: sMax, l: lMax } : null, shapeOptions = this.options.shape;
         for (let i = 0; i < quantity * reduceFactor; i++) {
             const particlesOptions = needsCopy
                 ? 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) {
@@ -283,17 +318,7 @@ export class EmitterInstance {
                     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 ?? defaultOpacity) : defaultOpacity, true);
                     }
                 }
                 else {
@@ -305,4 +330,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

@@ -2,6 +2,8 @@ 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;

package/esm/EmittersInteractor.js

@@ -4,9 +4,13 @@ import { Emitter } from "./Options/Classes/Emitter.js";
 import { defaultRandomOptions } from "./constants.js";
 const emittersMode = "emitters";
 export class EmittersInteractor extends 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) {
@@ -77,7 +81,7 @@ export class EmittersInteractor extends ExternalInteractorBase {
                     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/esm/EmittersPlugin.js

@@ -1,9 +1,10 @@
 import { executeOnSingleOrMultiple, isArray, } from "@tsparticles/engine";
 import { Emitter } from "./Options/Classes/Emitter.js";
 export class EmittersPlugin {
+    id = "emitters";
+    _instancesManager;
     constructor(instancesManager) {
         this._instancesManager = instancesManager;
-        this.id = "emitters";
     }
     async getPlugin(container) {
         const { EmittersPluginInstance } = await import("./EmittersPluginInstance.js");

package/esm/EmittersPluginInstance.js

@@ -1,5 +1,7 @@
 import { isArray } from "@tsparticles/engine";
 export class EmittersPluginInstance {
+    container;
+    _instancesManager;
     constructor(instancesManager, container) {
         this.container = container;
         this._instancesManager = instancesManager;

package/esm/Options/Classes/Emitter.js

@@ -3,13 +3,30 @@ 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";
 export 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();
         this.rate = new EmitterRate();
         this.shape = new EmitterShape();
+        this.spawn = new EmitterSpawn();
         this.startCount = 0;
     }
     load(data) {
@@ -37,6 +54,7 @@ export class Emitter {
         });
         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) {
@@ -46,9 +64,13 @@ export class Emitter {
                 this.position.y = setRangeValue(data.position.y);
             }
         }
-        if (data.spawnColor !== undefined) {
-            this.spawnColor ??= new AnimatableColor();
-            this.spawnColor.load(data.spawnColor);
+        if (data.spawnFillColor !== undefined) {
+            this.spawnFillColor ??= new AnimatableColor();
+            this.spawnFillColor.load(data.spawnFillColor);
+        }
+        if (data.spawnStrokeColor !== undefined) {
+            this.spawnStrokeColor ??= new AnimatableColor();
+            this.spawnStrokeColor.load(data.spawnStrokeColor);
         }
         if (data.startCount !== undefined) {
             this.startCount = data.startCount;

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/Options/Classes/EmitterSpawn.js

@@ -0,0 +1,18 @@
+import { Fill, Stroke, isNull } from "@tsparticles/engine";
+export class EmitterSpawn {
+    fill;
+    stroke;
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.fill) {
+            this.fill ??= new Fill();
+            this.fill.load(data.fill);
+        }
+        if (data.stroke) {
+            this.stroke ??= new Stroke();
+            this.stroke.load(data.stroke);
+        }
+    }
+}

package/esm/Options/Interfaces/IEmitterSpawn.js

@@ -0,0 +1 @@
+export {};

package/esm/index.js

@@ -1,8 +1,13 @@
 export async function loadEmittersPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadInteractivityPlugin } = await import("@tsparticles/plugin-interactivity"), { ShapeManager } = await import("./ShapeManager.js"), { EmittersInstancesManager } = await import("./EmittersInstancesManager.js"), { EmittersPlugin } = await import("./EmittersPlugin.js"), instancesManager = new EmittersInstancesManager(e);
-        await loadInteractivityPlugin(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);
@@ -14,5 +19,10 @@ export async function loadEmittersPlugin(engine) {
         });
     });
 }
+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.8",
+  "version": "4.0.0-beta.0",
   "description": "tsParticles emitters plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -86,8 +86,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.8",
-    "@tsparticles/plugin-interactivity": "4.0.0-alpha.8"
+    "@tsparticles/engine": "4.0.0-beta.0",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
   },
   "publishConfig": {
     "access": "public"

package/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@tsparticles/plugin-emitters [23 Jan 2026 at 23:55]</title>
+    <title>@tsparticles/plugin-emitters [19 Mar 2026 at 14:00]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>

package/tsparticles.plugin.emitters.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.8
+ * v4.0.0-beta.0
  */
 /*
  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
@@ -28,13 +28,33 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
+/***/ "@tsparticles/engine"
+/*!*********************************************************************************************************************************!*\
+  !*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
+  \*********************************************************************************************************************************/
+(module) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
+
+/***/ },
+
+/***/ "@tsparticles/plugin-interactivity"
+/*!***************************************************************************************************************************************************************************!*\
+  !*** external {"commonjs":"@tsparticles/plugin-interactivity","commonjs2":"@tsparticles/plugin-interactivity","amd":"@tsparticles/plugin-interactivity","root":"window"} ***!
+  \***************************************************************************************************************************************************************************/
+(module) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_interactivity__;
+
+/***/ },
+
 /***/ "./dist/browser/EmitterShapeBase.js"
 /*!******************************************!*\
   !*** ./dist/browser/EmitterShapeBase.js ***!
   \******************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterShapeBase: () => (/* binding */ EmitterShapeBase)\n/* harmony export */ });\nclass EmitterShapeBase {\n  constructor(position, size, fill, options) {\n    this.position = position;\n    this.size = size;\n    this.fill = fill;\n    this.options = options;\n  }\n  resize(position, size) {\n    this.position = position;\n    this.size = size;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/EmitterShapeBase.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterShapeBase: () => (/* binding */ EmitterShapeBase)\n/* harmony export */ });\nclass EmitterShapeBase {\n    fill;\n    options;\n    position;\n    size;\n    constructor(position, size, fill, options){\n        this.position = position;\n        this.size = size;\n        this.fill = fill;\n        this.options = options;\n    }\n    resize(position, size) {\n        this.position = position;\n        this.size = size;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/EmitterShapeBase.js?\n}");
 
 /***/ },
 
@@ -44,7 +64,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \************************************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterClickMode: () => (/* binding */ EmitterClickMode)\n/* harmony export */ });\nvar EmitterClickMode;\n(function (EmitterClickMode) {\n  EmitterClickMode[\"emitter\"] = \"emitter\";\n})(EmitterClickMode || (EmitterClickMode = {}));\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Enums/EmitterClickMode.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterClickMode: () => (/* binding */ EmitterClickMode)\n/* harmony export */ });\nvar EmitterClickMode;\n(function(EmitterClickMode) {\n    EmitterClickMode[\"emitter\"] = \"emitter\";\n})(EmitterClickMode || (EmitterClickMode = {}));\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/Enums/EmitterClickMode.js?\n}");
 
 /***/ },
 
@@ -54,27 +74,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*******************************/
 (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterClickMode: () => (/* reexport safe */ _Enums_EmitterClickMode_js__WEBPACK_IMPORTED_MODULE_1__.EmitterClickMode),\n/* harmony export */   EmitterShapeBase: () => (/* reexport safe */ _EmitterShapeBase_js__WEBPACK_IMPORTED_MODULE_0__.EmitterShapeBase),\n/* harmony export */   loadEmittersPlugin: () => (/* binding */ loadEmittersPlugin)\n/* harmony export */ });\n/* harmony import */ var _EmitterShapeBase_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EmitterShapeBase.js */ \"./dist/browser/EmitterShapeBase.js\");\n/* harmony import */ var _Enums_EmitterClickMode_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enums/EmitterClickMode.js */ \"./dist/browser/Enums/EmitterClickMode.js\");\nasync function loadEmittersPlugin(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n        loadInteractivityPlugin\n      } = await Promise.resolve(/*! import() */).then(__webpack_require__.t.bind(__webpack_require__, /*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\", 19)),\n      {\n        ShapeManager\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_ShapeManager_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ShapeManager.js */ \"./dist/browser/ShapeManager.js\")),\n      {\n        EmittersInstancesManager\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_EmittersInstancesManager_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./EmittersInstancesManager.js */ \"./dist/browser/EmittersInstancesManager.js\")),\n      {\n        EmittersPlugin\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_EmittersPlugin_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./EmittersPlugin.js */ \"./dist/browser/EmittersPlugin.js\")),\n      instancesManager = new EmittersInstancesManager(e);\n    await loadInteractivityPlugin(e);\n    e.emitterShapeManager ??= new ShapeManager();\n    e.addEmitterShapeGenerator ??= (name, generator) => {\n      e.emitterShapeManager?.addShapeGenerator(name, generator);\n    };\n    e.addPlugin(new EmittersPlugin(instancesManager));\n    e.addInteractor?.(\"externalEmitters\", async container => {\n      const {\n        EmittersInteractor\n      } = await __webpack_require__.e(/*! import() */ \"dist_browser_EmittersInteractor_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./EmittersInteractor.js */ \"./dist/browser/EmittersInteractor.js\"));\n      return new EmittersInteractor(instancesManager, container);\n    });\n  });\n}\n\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/index.js?\n}");
-
-/***/ },
-
-/***/ "@tsparticles/engine"
-/*!*********************************************************************************************************************************!*\
-  !*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
-  \*********************************************************************************************************************************/
-(module) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
-
-/***/ },
-
-/***/ "@tsparticles/plugin-interactivity"
-/*!***************************************************************************************************************************************************************************!*\
-  !*** external {"commonjs":"@tsparticles/plugin-interactivity","commonjs2":"@tsparticles/plugin-interactivity","amd":"@tsparticles/plugin-interactivity","root":"window"} ***!
-  \***************************************************************************************************************************************************************************/
-(module) {
-
-module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_interactivity__;
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   EmitterClickMode: () => (/* reexport safe */ _Enums_EmitterClickMode_js__WEBPACK_IMPORTED_MODULE_1__.EmitterClickMode),\n/* harmony export */   EmitterShapeBase: () => (/* reexport safe */ _EmitterShapeBase_js__WEBPACK_IMPORTED_MODULE_0__.EmitterShapeBase),\n/* harmony export */   ensureEmittersPluginLoaded: () => (/* binding */ ensureEmittersPluginLoaded),\n/* harmony export */   loadEmittersPlugin: () => (/* binding */ loadEmittersPlugin)\n/* harmony export */ });\n/* harmony import */ var _EmitterShapeBase_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./EmitterShapeBase.js */ \"./dist/browser/EmitterShapeBase.js\");\n/* harmony import */ var _Enums_EmitterClickMode_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Enums/EmitterClickMode.js */ \"./dist/browser/Enums/EmitterClickMode.js\");\nasync function loadEmittersPlugin(engine) {\n    engine.checkVersion(\"4.0.0-beta.0\");\n    await engine.register(async (e)=>{\n        const [{ ensureInteractivityPluginLoaded }, { ShapeManager }, { EmittersInstancesManager }, { EmittersPlugin }] = await Promise.all([\n            Promise.resolve(/*! import() */).then(__webpack_require__.t.bind(__webpack_require__, /*! @tsparticles/plugin-interactivity */ \"@tsparticles/plugin-interactivity\", 19)),\n            __webpack_require__.e(/*! import() */ \"dist_browser_ShapeManager_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ShapeManager.js */ \"./dist/browser/ShapeManager.js\")),\n            __webpack_require__.e(/*! import() */ \"dist_browser_EmittersInstancesManager_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./EmittersInstancesManager.js */ \"./dist/browser/EmittersInstancesManager.js\")),\n            __webpack_require__.e(/*! import() */ \"dist_browser_EmittersPlugin_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./EmittersPlugin.js */ \"./dist/browser/EmittersPlugin.js\"))\n        ]), instancesManager = new EmittersInstancesManager(e);\n        ensureInteractivityPluginLoaded(e);\n        e.emitterShapeManager ??= new ShapeManager();\n        e.addEmitterShapeGenerator ??= (name, generator)=>{\n            e.emitterShapeManager?.addShapeGenerator(name, generator);\n        };\n        e.addPlugin(new EmittersPlugin(instancesManager));\n        e.addInteractor?.(\"externalEmitters\", async (container)=>{\n            const { EmittersInteractor } = await __webpack_require__.e(/*! import() */ \"dist_browser_EmittersInteractor_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./EmittersInteractor.js */ \"./dist/browser/EmittersInteractor.js\"));\n            return new EmittersInteractor(instancesManager, container);\n        });\n    });\n}\nfunction ensureEmittersPluginLoaded(e) {\n    if (!e.addEmitterShapeGenerator) {\n        throw new Error(\"tsParticles Emitters Plugin is not loaded\");\n    }\n}\n\n\n\n\n//# sourceURL=webpack://@tsparticles/plugin-emitters/./dist/browser/index.js?\n}");
 
 /***/ }
 
@@ -90,12 +90,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_interactivity__;
 /******/ 		if (cachedModule !== undefined) {
 /******/ 			return cachedModule.exports;
 /******/ 		}
-/******/ 		// Check if module exists (development only)
-/******/ 		if (__webpack_modules__[moduleId] === undefined) {
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
-/******/ 			e.code = 'MODULE_NOT_FOUND';
-/******/ 			throw e;
-/******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = __webpack_module_cache__[moduleId] = {
 /******/ 			// no module.id needed
@@ -104,6 +98,12 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_interactivity__;
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
+/******/ 		if (!(moduleId in __webpack_modules__)) {
+/******/ 			delete __webpack_module_cache__[moduleId];
+/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			e.code = 'MODULE_NOT_FOUND';
+/******/ 			throw e;
+/******/ 		}
 /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 /******/ 	
 /******/ 		// Return the exports of the module
@@ -178,6 +178,18 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_interactivity__;
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/global */
+/******/ 	(() => {
+/******/ 		__webpack_require__.g = (function() {
+/******/ 			if (typeof globalThis === 'object') return globalThis;
+/******/ 			try {
+/******/ 				return this || new Function('return this')();
+/******/ 			} catch (e) {
+/******/ 				if (typeof window === 'object') return window;
+/******/ 			}
+/******/ 		})();
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
 /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
@@ -242,8 +254,8 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_plugin_interactivity__;
 /******/ 	/* webpack/runtime/publicPath */
 /******/ 	(() => {
 /******/ 		var scriptUrl;
-/******/ 		if (globalThis.importScripts) scriptUrl = globalThis.location + "";
-/******/ 		var document = globalThis.document;
+/******/ 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ 		var document = __webpack_require__.g.document;
 /******/ 		if (!scriptUrl && document) {
 /******/ 			if (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT')
 /******/ 				scriptUrl = document.currentScript.src;