@tsparticles/plugin-emitters 3.0.0-beta.3 → 3.0.0-beta.5

package/browser/EmitterInstance.js

@@ -1,17 +1,25 @@
 import { Vector, calcPositionOrRandomFromSizeRanged, deepExtend, getRangeValue, getSize, isPointInside, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
 import { Emitter } from "./Options/Classes/Emitter.js";
 import { EmitterSize } from "./Options/Classes/EmitterSize.js";
+function setParticlesOptionsColor(particlesOptions, color) {
+    if (particlesOptions.color) {
+        particlesOptions.color.value = color;
+    }
+    else {
+        particlesOptions.color = {
+            value: color,
+        };
+    }
+}
 export class EmitterInstance {
     constructor(engine, emitters, container, options, position) {
         this.emitters = emitters;
         this.container = container;
-        this._calcPosition = () => {
-            return calcPositionOrRandomFromSizeRanged({
-                size: this.container.canvas.size,
-                position: this.options.position,
-            });
-        };
         this._destroy = () => {
+            this._mutationObserver?.disconnect();
+            this._mutationObserver = undefined;
+            this._resizeObserver?.disconnect();
+            this._resizeObserver = undefined;
             this.emitters.removeEmitter(this);
             this._engine.dispatchEvent("emitterDestroyed", {
                 container: this.container,
@@ -20,40 +28,6 @@ export class EmitterInstance {
                 },
             });
         };
-        this._emit = () => {
-            if (this._paused) {
-                return;
-            }
-            const quantity = getRangeValue(this.options.rate.quantity);
-            this._emitParticles(quantity);
-        };
-        this._emitParticles = (quantity) => {
-            const position = this.getPosition(), size = this.getSize(), singleParticlesOptions = itemFromSingleOrMultiple(this._particlesOptions);
-            for (let i = 0; i < quantity; i++) {
-                const particlesOptions = deepExtend({}, singleParticlesOptions);
-                if (this.spawnColor) {
-                    const hslAnimation = this.options.spawnColor?.animation;
-                    if (hslAnimation) {
-                        this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
-                        this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
-                        this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
-                    }
-                    if (!particlesOptions.color) {
-                        particlesOptions.color = {
-                            value: this.spawnColor,
-                        };
-                    }
-                    else {
-                        particlesOptions.color.value = this.spawnColor;
-                    }
-                }
-                if (!position) {
-                    return;
-                }
-                const pPosition = this._shape?.randomPosition(position, size, this.fill) ?? position;
-                this.container.particles.addParticle(pPosition, particlesOptions);
-            }
-        };
         this._prepareToDie = () => {
             if (this._paused) {
                 return;
@@ -89,7 +63,6 @@ export class EmitterInstance {
         this._spawnDelay = (getRangeValue(this.options.life.delay ?? 0) * 1000) / this.container.retina.reduceFactor;
         this.position = this._initialPosition ?? this._calcPosition();
         this.name = this.options.name;
-        this._shape = this._engine.emitterShapeManager?.getShape(this.options.shape);
         this.fill = this.options.fill;
         this._firstSpawn = !this.options.life.wait;
         this._startParticlesAdded = false;
@@ -102,19 +75,30 @@ export class EmitterInstance {
         }
         this._paused = !this.options.autoPlay;
         this._particlesOptions = particlesOptions;
-        this.size =
-            this.options.size ??
-                (() => {
-                    const size = new EmitterSize();
-                    size.load({
-                        height: 0,
-                        mode: "percent",
-                        width: 0,
-                    });
-                    return size;
-                })();
+        this._size = this._calcSize();
+        this.size = getSize(this._size, this.container.canvas.size);
         this._lifeCount = this.options.life.count ?? -1;
         this._immortal = this._lifeCount <= 0;
+        if (this.options.domId) {
+            const element = document.getElementById(this.options.domId);
+            if (element) {
+                this._mutationObserver = new MutationObserver(() => {
+                    this.resize();
+                });
+                this._resizeObserver = new ResizeObserver(() => {
+                    this.resize();
+                });
+                this._mutationObserver.observe(element, {
+                    attributes: true,
+                    attributeFilter: ["style", "width", "height"],
+                });
+                this._resizeObserver.observe(element);
+            }
+        }
+        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._engine.dispatchEvent("emitterCreated", {
             container,
             data: {
@@ -131,32 +115,8 @@ export class EmitterInstance {
         this._paused = false;
         this.play();
     }
-    getPosition() {
-        if (this.options.domId) {
-            const container = this.container, element = document.getElementById(this.options.domId);
-            if (element) {
-                const elRect = element.getBoundingClientRect();
-                return {
-                    x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
-                    y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio,
-                };
-            }
-        }
-        return this.position;
-    }
-    getSize() {
-        const container = this.container;
-        if (this.options.domId) {
-            const element = document.getElementById(this.options.domId);
-            if (element) {
-                const elRect = element.getBoundingClientRect();
-                return {
-                    width: elRect.width * container.retina.pixelRatio,
-                    height: elRect.height * container.retina.pixelRatio,
-                };
-            }
-        }
-        return getSize(this.size, container.canvas.size);
+    async init() {
+        await this._shape?.init();
     }
     pause() {
         if (this._paused) {
@@ -187,8 +147,11 @@ export class EmitterInstance {
             initialPosition && isPointInside(initialPosition, this.container.canvas.size, Vector.origin)
                 ? initialPosition
                 : this._calcPosition();
+        this._size = this._calcSize();
+        this.size = getSize(this._size, this.container.canvas.size);
+        this._shape?.resize(this.position, this.size);
     }
-    update(delta) {
+    async update(delta) {
         if (this._paused) {
             return;
         }
@@ -199,7 +162,7 @@ export class EmitterInstance {
         }
         if (!this._startParticlesAdded) {
             this._startParticlesAdded = true;
-            this._emitParticles(this.options.startCount);
+            await this._emitParticles(this.options.startCount);
         }
         if (this._duration !== undefined) {
             this._currentDuration += delta.value;
@@ -242,4 +205,94 @@ export class EmitterInstance {
             }
         }
     }
+    _calcPosition() {
+        if (this.options.domId) {
+            const container = this.container, element = document.getElementById(this.options.domId);
+            if (element) {
+                const elRect = element.getBoundingClientRect();
+                return {
+                    x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
+                    y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio,
+                };
+            }
+        }
+        return calcPositionOrRandomFromSizeRanged({
+            size: this.container.canvas.size,
+            position: this.options.position,
+        });
+    }
+    _calcSize() {
+        const container = this.container;
+        if (this.options.domId) {
+            const element = document.getElementById(this.options.domId);
+            if (element) {
+                const elRect = element.getBoundingClientRect();
+                return {
+                    width: elRect.width * container.retina.pixelRatio,
+                    height: elRect.height * container.retina.pixelRatio,
+                    mode: "precise",
+                };
+            }
+        }
+        return (this.options.size ??
+            (() => {
+                const size = new EmitterSize();
+                size.load({
+                    height: 0,
+                    mode: "percent",
+                    width: 0,
+                });
+                return size;
+            })());
+    }
+    async _emit() {
+        if (this._paused) {
+            return;
+        }
+        const quantity = getRangeValue(this.options.rate.quantity);
+        await this._emitParticles(quantity);
+    }
+    async _emitParticles(quantity) {
+        const singleParticlesOptions = itemFromSingleOrMultiple(this._particlesOptions);
+        for (let i = 0; i < quantity; i++) {
+            const particlesOptions = deepExtend({}, singleParticlesOptions);
+            if (this.spawnColor) {
+                const hslAnimation = this.options.spawnColor?.animation;
+                if (hslAnimation) {
+                    this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
+                    this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
+                    this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
+                }
+                setParticlesOptionsColor(particlesOptions, this.spawnColor);
+            }
+            const shapeOptions = this.options.shape;
+            let position = this.position;
+            if (this._shape) {
+                const shapePosData = await this._shape.randomPosition();
+                if (shapePosData) {
+                    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,
+                            };
+                        }
+                    }
+                }
+                else {
+                    position = null;
+                }
+            }
+            if (position) {
+                this.container.particles.addParticle(position, particlesOptions);
+            }
+        }
+    }
 }

package/browser/EmitterShapeBase.js

@@ -0,0 +1,12 @@
+export class EmitterShapeBase {
+    constructor(position, size, fill, options) {
+        this.position = position;
+        this.size = size;
+        this.fill = fill;
+        this.options = options;
+    }
+    resize(position, size) {
+        this.position = position;
+        this.size = size;
+    }
+}

package/browser/Emitters.js

@@ -17,7 +17,7 @@ export class Emitters {
         container.getEmitter = (idxOrName) => idxOrName === undefined || isNumber(idxOrName)
             ? this.array[idxOrName || 0]
             : this.array.find((t) => t.name === idxOrName);
-        container.addEmitter = (options, position) => this.addEmitter(options, position);
+        container.addEmitter = async (options, position) => this.addEmitter(options, position);
         container.removeEmitter = (idxOrName) => {
             const emitter = container.getEmitter(idxOrName);
             if (emitter) {
@@ -37,10 +37,11 @@ export class Emitters {
             }
         };
     }
-    addEmitter(options, position) {
+    async addEmitter(options, position) {
         const emitterOptions = new Emitter();
         emitterOptions.load(options);
         const emitter = new EmitterInstance(this._engine, this, this.container, emitterOptions, position);
+        await emitter.init();
         this.array.push(emitter);
         return emitter;
     }
@@ -84,11 +85,11 @@ export class Emitters {
         }
         if (isArray(this.emitters)) {
             for (const emitterOptions of this.emitters) {
-                this.addEmitter(emitterOptions);
+                await this.addEmitter(emitterOptions);
             }
         }
         else {
-            this.addEmitter(this.emitters);
+            await this.addEmitter(this.emitters);
         }
     }
     pause() {
@@ -115,9 +116,9 @@ export class Emitters {
     stop() {
         this.array = [];
     }
-    update(delta) {
+    async update(delta) {
         for (const emitter of this.array) {
-            emitter.update(delta);
+            await emitter.update(delta);
         }
     }
 }

package/browser/Options/Classes/Emitter.js

@@ -1,6 +1,7 @@
 import { AnimatableColor, deepExtend, executeOnSingleOrMultiple, setRangeValue, } from "@tsparticles/engine";
 import { EmitterLife } from "./EmitterLife.js";
 import { EmitterRate } from "./EmitterRate.js";
+import { EmitterShape } from "./EmitterShape.js";
 import { EmitterSize } from "./EmitterSize.js";
 export class Emitter {
     constructor() {
@@ -8,7 +9,7 @@ export class Emitter {
         this.fill = true;
         this.life = new EmitterLife();
         this.rate = new EmitterRate();
-        this.shape = "square";
+        this.shape = new EmitterShape();
         this.startCount = 0;
     }
     load(data) {
@@ -37,9 +38,7 @@ export class Emitter {
             return deepExtend({}, particles);
         });
         this.rate.load(data.rate);
-        if (data.shape !== undefined) {
-            this.shape = data.shape;
-        }
+        this.shape.load(data.shape);
         if (data.position !== undefined) {
             this.position = {};
             if (data.position.x !== undefined) {

package/browser/Options/Classes/EmitterShape.js

@@ -0,0 +1,21 @@
+import { deepExtend } from "@tsparticles/engine";
+import { EmitterShapeReplace } from "./EmitterShapeReplace.js";
+export class EmitterShape {
+    constructor() {
+        this.options = {};
+        this.replace = new EmitterShapeReplace();
+        this.type = "square";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.options !== undefined) {
+            this.options = deepExtend({}, data.options ?? {});
+        }
+        this.replace.load(data.replace);
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}

package/browser/Options/Classes/EmitterShapeReplace.js

@@ -0,0 +1,17 @@
+export class EmitterShapeReplace {
+    constructor() {
+        this.color = false;
+        this.opacity = false;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = data.color;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+    }
+}

package/browser/Options/Interfaces/IEmitterShape.js

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

package/browser/Options/Interfaces/IEmitterShapeReplace.js

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

package/browser/ShapeManager.js

@@ -1,17 +1,17 @@
-const shapes = new Map();
+const shapeGeneratorss = new Map();
 export class ShapeManager {
     constructor(engine) {
         this._engine = engine;
     }
-    addShape(name, drawer) {
-        if (!this.getShape(name)) {
-            shapes.set(name, drawer);
+    addShapeGenerator(name, generator) {
+        if (!this.getShapeGenerator(name)) {
+            shapeGeneratorss.set(name, generator);
         }
     }
-    getShape(name) {
-        return shapes.get(name);
+    getShapeGenerator(name) {
+        return shapeGeneratorss.get(name);
     }
-    getSupportedShapes() {
-        return shapes.keys();
+    getSupportedShapeGenerators() {
+        return shapeGeneratorss.keys();
     }
 }

package/browser/index.js

@@ -1,9 +1,7 @@
 import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
-import { CircleShape } from "./Shapes/Circle/CircleShape.js";
 import { Emitter } from "./Options/Classes/Emitter.js";
 import { Emitters } from "./Emitters.js";
 import { ShapeManager } from "./ShapeManager.js";
-import { SquareShape } from "./Shapes/Square/SquareShape.js";
 class EmittersPlugin {
     constructor(engine) {
         this._engine = engine;
@@ -94,17 +92,18 @@ export async function loadEmittersPlugin(engine, refresh = true) {
     if (!engine.emitterShapeManager) {
         engine.emitterShapeManager = new ShapeManager(engine);
     }
-    if (!engine.addEmitterShape) {
-        engine.addEmitterShape = (name, shape) => {
-            engine.emitterShapeManager?.addShape(name, shape);
+    if (!engine.addEmitterShapeGenerator) {
+        engine.addEmitterShapeGenerator = (name, generator) => {
+            engine.emitterShapeManager?.addShapeGenerator(name, generator);
         };
     }
     const plugin = new EmittersPlugin(engine);
     await engine.addPlugin(plugin, refresh);
-    engine.addEmitterShape("circle", new CircleShape());
-    engine.addEmitterShape("square", new SquareShape());
 }
 export * from "./EmitterContainer.js";
+export * from "./EmitterShapeBase.js";
 export * from "./EmittersEngine.js";
+export * from "./IEmitterShape.js";
+export * from "./IEmitterShapeGenerator.js";
 export * from "./Enums/EmitterClickMode.js";
-export * from "./Enums/EmitterShapeType.js";
+export * from "./IRandomPositionData.js";