@tsparticles/plugin-emitters 3.0.0-beta.2 → 3.0.0-beta.4

package/cjs/EmitterInstance.js

@@ -4,17 +4,25 @@ exports.EmitterInstance = void 0;
 const engine_1 = require("@tsparticles/engine");
 const Emitter_js_1 = require("./Options/Classes/Emitter.js");
 const EmitterSize_js_1 = require("./Options/Classes/EmitterSize.js");
+function setParticlesOptionsColor(particlesOptions, color) {
+    if (particlesOptions.color) {
+        particlesOptions.color.value = color;
+    }
+    else {
+        particlesOptions.color = {
+            value: color,
+        };
+    }
+}
 class EmitterInstance {
     constructor(engine, emitters, container, options, position) {
         this.emitters = emitters;
         this.container = container;
-        this._calcPosition = () => {
-            return (0, engine_1.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,
@@ -23,40 +31,6 @@ class EmitterInstance {
                 },
             });
         };
-        this._emit = () => {
-            if (this._paused) {
-                return;
-            }
-            const quantity = (0, engine_1.getRangeValue)(this.options.rate.quantity);
-            this._emitParticles(quantity);
-        };
-        this._emitParticles = (quantity) => {
-            const position = this.getPosition(), size = this.getSize(), singleParticlesOptions = (0, engine_1.itemFromSingleOrMultiple)(this._particlesOptions);
-            for (let i = 0; i < quantity; i++) {
-                const particlesOptions = (0, engine_1.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;
@@ -92,7 +66,6 @@ class EmitterInstance {
         this._spawnDelay = ((0, engine_1.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;
@@ -105,19 +78,30 @@ class EmitterInstance {
         }
         this._paused = !this.options.autoPlay;
         this._particlesOptions = particlesOptions;
-        this.size =
-            this.options.size ??
-                (() => {
-                    const size = new EmitterSize_js_1.EmitterSize();
-                    size.load({
-                        height: 0,
-                        mode: "percent",
-                        width: 0,
-                    });
-                    return size;
-                })();
+        this._size = this._calcSize();
+        this.size = (0, engine_1.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: {
@@ -134,32 +118,8 @@ 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 (0, engine_1.getSize)(this.size, container.canvas.size);
+    async init() {
+        await this._shape?.init();
     }
     pause() {
         if (this._paused) {
@@ -190,8 +150,11 @@ class EmitterInstance {
             initialPosition && (0, engine_1.isPointInside)(initialPosition, this.container.canvas.size, engine_1.Vector.origin)
                 ? initialPosition
                 : this._calcPosition();
+        this._size = this._calcSize();
+        this.size = (0, engine_1.getSize)(this._size, this.container.canvas.size);
+        this._shape?.resize(this.position, this.size);
     }
-    update(delta) {
+    async update(delta) {
         if (this._paused) {
             return;
         }
@@ -202,7 +165,7 @@ 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;
@@ -245,5 +208,95 @@ 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 (0, engine_1.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_js_1.EmitterSize();
+                size.load({
+                    height: 0,
+                    mode: "percent",
+                    width: 0,
+                });
+                return size;
+            })());
+    }
+    async _emit() {
+        if (this._paused) {
+            return;
+        }
+        const quantity = (0, engine_1.getRangeValue)(this.options.rate.quantity);
+        await this._emitParticles(quantity);
+    }
+    async _emitParticles(quantity) {
+        const singleParticlesOptions = (0, engine_1.itemFromSingleOrMultiple)(this._particlesOptions);
+        for (let i = 0; i < quantity; i++) {
+            const particlesOptions = (0, engine_1.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);
+            }
+        }
+    }
 }
 exports.EmitterInstance = EmitterInstance;

package/cjs/EmitterShapeBase.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmitterShapeBase = void 0;
+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;
+    }
+}
+exports.EmitterShapeBase = EmitterShapeBase;

package/cjs/Emitters.js

@@ -20,7 +20,7 @@ class Emitters {
         container.getEmitter = (idxOrName) => idxOrName === undefined || (0, engine_1.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) {
@@ -40,10 +40,11 @@ class Emitters {
             }
         };
     }
-    addEmitter(options, position) {
+    async addEmitter(options, position) {
         const emitterOptions = new Emitter_js_1.Emitter();
         emitterOptions.load(options);
         const emitter = new EmitterInstance_js_1.EmitterInstance(this._engine, this, this.container, emitterOptions, position);
+        await emitter.init();
         this.array.push(emitter);
         return emitter;
     }
@@ -87,11 +88,11 @@ class Emitters {
         }
         if ((0, engine_1.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() {
@@ -118,9 +119,9 @@ class Emitters {
     stop() {
         this.array = [];
     }
-    update(delta) {
+    async update(delta) {
         for (const emitter of this.array) {
-            emitter.update(delta);
+            await emitter.update(delta);
         }
     }
 }

package/cjs/IRandomPositionData.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Classes/Emitter.js

@@ -4,6 +4,7 @@ exports.Emitter = void 0;
 const engine_1 = require("@tsparticles/engine");
 const EmitterLife_js_1 = require("./EmitterLife.js");
 const EmitterRate_js_1 = require("./EmitterRate.js");
+const EmitterShape_js_1 = require("./EmitterShape.js");
 const EmitterSize_js_1 = require("./EmitterSize.js");
 class Emitter {
     constructor() {
@@ -11,7 +12,7 @@ class Emitter {
         this.fill = true;
         this.life = new EmitterLife_js_1.EmitterLife();
         this.rate = new EmitterRate_js_1.EmitterRate();
-        this.shape = "square";
+        this.shape = new EmitterShape_js_1.EmitterShape();
         this.startCount = 0;
     }
     load(data) {
@@ -40,9 +41,7 @@ class Emitter {
             return (0, engine_1.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/cjs/Options/Classes/EmitterShape.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmitterShape = void 0;
+const engine_1 = require("@tsparticles/engine");
+const EmitterShapeReplace_js_1 = require("./EmitterShapeReplace.js");
+class EmitterShape {
+    constructor() {
+        this.options = {};
+        this.replace = new EmitterShapeReplace_js_1.EmitterShapeReplace();
+        this.type = "square";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.options !== undefined) {
+            this.options = (0, engine_1.deepExtend)({}, data.options ?? {});
+        }
+        this.replace.load(data.replace);
+        if (data.type !== undefined) {
+            this.type = data.type;
+        }
+    }
+}
+exports.EmitterShape = EmitterShape;

package/cjs/Options/Classes/EmitterShapeReplace.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmitterShapeReplace = void 0;
+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;
+        }
+    }
+}
+exports.EmitterShapeReplace = EmitterShapeReplace;

package/cjs/Options/Interfaces/IEmitterShape.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/Options/Interfaces/IEmitterShapeReplace.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/ShapeManager.js

@@ -1,21 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShapeManager = void 0;
-const shapes = new Map();
+const shapeGeneratorss = new Map();
 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();
     }
 }
 exports.ShapeManager = ShapeManager;

package/cjs/index.js

@@ -16,11 +16,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadEmittersPlugin = void 0;
 const engine_1 = require("@tsparticles/engine");
-const CircleShape_js_1 = require("./Shapes/Circle/CircleShape.js");
 const Emitter_js_1 = require("./Options/Classes/Emitter.js");
 const Emitters_js_1 = require("./Emitters.js");
 const ShapeManager_js_1 = require("./ShapeManager.js");
-const SquareShape_js_1 = require("./Shapes/Square/SquareShape.js");
 class EmittersPlugin {
     constructor(engine) {
         this._engine = engine;
@@ -111,18 +109,19 @@ async function loadEmittersPlugin(engine, refresh = true) {
     if (!engine.emitterShapeManager) {
         engine.emitterShapeManager = new ShapeManager_js_1.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_js_1.CircleShape());
-    engine.addEmitterShape("square", new SquareShape_js_1.SquareShape());
 }
 exports.loadEmittersPlugin = loadEmittersPlugin;
 __exportStar(require("./EmitterContainer.js"), exports);
+__exportStar(require("./EmitterShapeBase.js"), exports);
 __exportStar(require("./EmittersEngine.js"), exports);
+__exportStar(require("./IEmitterShape.js"), exports);
+__exportStar(require("./IEmitterShapeGenerator.js"), exports);
 __exportStar(require("./Enums/EmitterClickMode.js"), exports);
-__exportStar(require("./Enums/EmitterShapeType.js"), exports);
+__exportStar(require("./IRandomPositionData.js"), exports);