@tsparticles/plugin-emitters 4.0.0-beta.0 → 4.0.0-beta.10

package/esm/EmitterInstance.js

@@ -1,22 +1,24 @@
-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 { AnimatableColor, Paint, PixelMode, 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, 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;
+    const paint = (particlesOptions.paint ??= new Paint());
+    paint.fill = {
+        color: AnimatableColor.create(undefined, { value: color }),
+        enable,
+        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;
+    const paint = (particlesOptions.paint ??= new Paint());
+    paint.stroke = {
+        color: AnimatableColor.create(undefined, { value: color }),
+        opacity,
+        width,
+    };
 }
 export class EmitterInstance {
-    container;
-    removeCallback;
     fill;
     name;
     options;
@@ -28,12 +30,12 @@ export class EmitterInstance {
     spawnStrokeColor;
     spawnStrokeOpacity;
     spawnStrokeWidth;
+    _container;
     _currentDuration;
     _currentEmitDelay;
     _currentSpawnDelay;
     _duration;
     _emitDelay;
-    _engine;
     _firstSpawn;
     _immortal;
     _initialPosition;
@@ -41,15 +43,17 @@ export class EmitterInstance {
     _mutationObserver;
     _particlesOptions;
     _paused;
+    _pluginManager;
+    _removeCallback;
     _resizeObserver;
     _shape;
     _size;
     _spawnDelay;
     _startParticlesAdded;
-    constructor(engine, container, removeCallback, options, position) {
-        this.container = container;
-        this.removeCallback = removeCallback;
-        this._engine = engine;
+    constructor(pluginManager, container, removeCallback, options, position) {
+        this._pluginManager = pluginManager;
+        this._container = container;
+        this._removeCallback = removeCallback;
         this._currentDuration = 0;
         this._currentEmitDelay = 0;
         this._currentSpawnDelay = 0;
@@ -74,15 +78,15 @@ export class EmitterInstance {
         particlesOptions.move ??= {};
         particlesOptions.move.direction ??= this.options.direction;
         if (this.options.spawn.fill?.color) {
-            this.spawnFillColor = rangeColorToHsl(this._engine, this.options.spawn.fill.color);
+            this.spawnFillColor = rangeColorToHsl(this._pluginManager, this.options.spawn.fill.color);
         }
         if (this.options.spawn.stroke?.color) {
-            this.spawnStrokeColor = rangeColorToHsl(this._engine, this.options.spawn.stroke.color);
+            this.spawnStrokeColor = rangeColorToHsl(this._pluginManager, this.options.spawn.stroke.color);
         }
         this._paused = !this.options.autoPlay;
         this._particlesOptions = particlesOptions;
         this._size = this._calcSize();
-        this.size = getSize(this._size, this.container.canvas.size);
+        this.size = getSize(this._size, this._container.canvas.size);
         this._lifeCount = this.options.life.count ?? defaultLifeCount;
         this._immortal = this._lifeCount <= minLifeCount;
         if (this.options.domId) {
@@ -101,15 +105,12 @@ export class EmitterInstance {
                 this._resizeObserver.observe(element);
             }
         }
-        const shapeOptions = this.options.shape, shapeGenerator = this._engine.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
+        const shapeOptions = this.options.shape, shapeGenerator = this._pluginManager.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
         if (shapeGenerator) {
-            this._shape = shapeGenerator.generate(this.container, 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,
-            data: {
-                emitter: this,
-            },
+        this._container.dispatchEvent("emitterCreated", {
+            emitter: this,
         });
         this.play();
     }
@@ -138,7 +139,7 @@ export class EmitterInstance {
             (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? defaultSpawnDelay)))) {
             return;
         }
-        const container = this.container;
+        const container = this._container;
         if (this._emitDelay === undefined) {
             const delay = getRangeValue(this.options.rate.delay);
             this._emitDelay = container.retina.reduceFactor
@@ -150,7 +151,7 @@ export class EmitterInstance {
         }
     }
     resize() {
-        const initialPosition = this._initialPosition, container = this.container;
+        const initialPosition = this._initialPosition, container = this._container;
         this.position =
             initialPosition && isPointInside(initialPosition, container.canvas.size, Vector.origin)
                 ? initialPosition
@@ -163,7 +164,7 @@ export class EmitterInstance {
         if (this._paused) {
             return;
         }
-        const container = this.container;
+        const container = this._container;
         if (this._firstSpawn) {
             this._firstSpawn = false;
             this._currentSpawnDelay = this._spawnDelay ?? defaultSpawnDelay;
@@ -201,9 +202,7 @@ export class EmitterInstance {
         if (this._spawnDelay !== undefined) {
             this._currentSpawnDelay += delta.value;
             if (this._currentSpawnDelay >= this._spawnDelay) {
-                this._engine.dispatchEvent("emitterPlay", {
-                    container: this.container,
-                });
+                this._container.dispatchEvent("emitterPlay");
                 this.play();
                 this._currentSpawnDelay -= this._spawnDelay;
                 delete this._spawnDelay;
@@ -218,7 +217,7 @@ export class EmitterInstance {
         }
     }
     _calcPosition() {
-        const container = this.container;
+        const container = this._container;
         if (this.options.domId) {
             const element = safeDocument().getElementById(this.options.domId);
             if (element) {
@@ -235,7 +234,7 @@ export class EmitterInstance {
         });
     }
     _calcSize() {
-        const container = this.container;
+        const container = this._container;
         if (this.options.domId) {
             const element = safeDocument().getElementById(this.options.domId);
             if (element) {
@@ -263,12 +262,9 @@ export class EmitterInstance {
         this._mutationObserver = undefined;
         this._resizeObserver?.disconnect();
         this._resizeObserver = undefined;
-        this.removeCallback(this);
-        this._engine.dispatchEvent("emitterDestroyed", {
-            container: this.container,
-            data: {
-                emitter: this,
-            },
+        this._removeCallback(this);
+        this._container.dispatchEvent("emitterDestroyed", {
+            emitter: this,
         });
     };
     _emit() {
@@ -286,7 +282,7 @@ export class EmitterInstance {
             ? 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;
+            : 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)
@@ -326,7 +322,7 @@ export class EmitterInstance {
                 }
             }
             if (position) {
-                this.container.particles.addParticle(position, particlesOptions);
+                this._container.particles.addParticle(position, particlesOptions);
             }
         }
     }
@@ -340,7 +336,7 @@ export class EmitterInstance {
         }
     };
     _setColorAnimation = (animation, initValue, maxValue, factor = defaultColorAnimationFactor) => {
-        const container = this.container;
+        const container = this._container;
         if (!animation.enable) {
             return initValue;
         }

package/esm/EmittersInstancesManager.js

@@ -3,15 +3,15 @@ import { Emitter } from "./Options/Classes/Emitter.js";
 const defaultIndex = 0;
 export class EmittersInstancesManager {
     _containerArrays;
-    _engine;
-    constructor(engine) {
+    _pluginManager;
+    constructor(pluginManager) {
         this._containerArrays = new Map();
-        this._engine = engine;
+        this._pluginManager = pluginManager;
     }
     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) => {
+        const { EmitterInstance } = await import("./EmitterInstance.js"), emitter = new EmitterInstance(this._pluginManager, container, (emitter) => {
             this.removeEmitter(container, emitter);
         }, emitterOptions, position);
         await emitter.init();

package/esm/addEmittersShapesManager.js

@@ -0,0 +1,7 @@
+export async function addEmittersShapesManager(e) {
+    const { ShapeManager } = await import("./ShapeManager.js"), pluginManager = e.pluginManager;
+    pluginManager.emitterShapeManager ??= new ShapeManager();
+    pluginManager.addEmitterShapeGenerator ??= (name, generator) => {
+        pluginManager.emitterShapeManager?.addShapeGenerator(name, generator);
+    };
+}

package/esm/ensureEmittersPluginLoaded.js

@@ -0,0 +1,5 @@
+export function ensureEmittersPluginLoaded(e) {
+    if (!e.pluginManager.addEmitterShapeGenerator) {
+        throw new Error("tsParticles Emitters Plugin is not loaded");
+    }
+}

package/esm/getEmittersInstancesManager.js

@@ -0,0 +1,15 @@
+const instancesManagers = new WeakMap();
+export function getEmittersInstancesManager(e) {
+    const pluginManager = e.pluginManager;
+    let manager = instancesManagers.get(pluginManager);
+    if (!manager) {
+        manager = import("./EmittersInstancesManager.js")
+            .then(({ EmittersInstancesManager }) => new EmittersInstancesManager(pluginManager))
+            .catch((error) => {
+            instancesManagers.delete(pluginManager);
+            throw error;
+        });
+        instancesManagers.set(pluginManager, manager);
+    }
+    return manager;
+}

package/esm/index.js

@@ -1,28 +1,9 @@
+import { loadEmittersInteraction } from "./interaction.js";
+import { loadEmittersPluginSimple } from "./plugin.js";
 export async function loadEmittersPlugin(engine) {
-    engine.checkVersion("4.0.0-beta.0");
-    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);
-        };
-        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");
-    }
+    await loadEmittersPluginSimple(engine);
+    await loadEmittersInteraction(engine);
 }
+export * from "./ensureEmittersPluginLoaded.js";
 export * from "./EmitterShapeBase.js";
 export * from "./Enums/EmitterClickMode.js";

package/esm/interaction.js

@@ -0,0 +1,18 @@
+export async function loadEmittersInteraction(engine) {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
+        const [{ ensureInteractivityPluginLoaded }, { addEmittersShapesManager }, { getEmittersInstancesManager },] = await Promise.all([
+            import("@tsparticles/plugin-interactivity"),
+            import("./addEmittersShapesManager.js"),
+            import("./getEmittersInstancesManager.js"),
+        ]), instancesManager = await getEmittersInstancesManager(e);
+        ensureInteractivityPluginLoaded(e);
+        await addEmittersShapesManager(e);
+        e.pluginManager.addInteractor?.("externalEmitters", async (container) => {
+            const { EmittersInteractor } = await import("./EmittersInteractor.js");
+            return new EmittersInteractor(instancesManager, container);
+        });
+    });
+}
+export * from "./EmitterShapeBase.js";
+export * from "./Enums/EmitterClickMode.js";

package/esm/plugin.js

@@ -0,0 +1,14 @@
+export async function loadEmittersPluginSimple(engine) {
+    engine.checkVersion("4.0.0-beta.10");
+    await engine.pluginManager.register(async (e) => {
+        const [{ addEmittersShapesManager }, { getEmittersInstancesManager }, { EmittersPlugin },] = await Promise.all([
+            import("./addEmittersShapesManager.js"),
+            import("./getEmittersInstancesManager.js"),
+            import("./EmittersPlugin.js"),
+        ]), instancesManager = await getEmittersInstancesManager(e);
+        await addEmittersShapesManager(e);
+        e.pluginManager.addPlugin(new EmittersPlugin(instancesManager));
+    });
+}
+export * from "./EmitterShapeBase.js";
+export * from "./Enums/EmitterClickMode.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-emitters",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles emitters plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -80,14 +80,32 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
+    },
+    "./interaction": {
+      "types": "./types/interaction.d.ts",
+      "browser": "./browser/interaction.js",
+      "import": "./esm/interaction.js",
+      "require": "./cjs/interaction.js",
+      "default": "./esm/interaction.js"
+    },
+    "./plugin": {
+      "types": "./types/plugin.d.ts",
+      "browser": "./browser/plugin.js",
+      "import": "./esm/plugin.js",
+      "require": "./cjs/plugin.js",
+      "default": "./esm/plugin.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/engine": "4.0.0-beta.0",
-    "@tsparticles/plugin-interactivity": "4.0.0-beta.0"
+  "peerDependencies": {
+    "@tsparticles/engine": "4.0.0-beta.10",
+    "@tsparticles/plugin-interactivity": "4.0.0-beta.10"
+  },
+  "peerDependenciesMeta": {
+    "@tsparticles/plugin-interactivity": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"