@tsparticles/plugin-emitters 3.0.0-alpha.1 → 3.0.0-beta.0

package/README.md

@@ -2,9 +2,9 @@
 
 # tsParticles Emitters Plugin
 
-[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/tsparticles-plugin-emitters/badge)](https://www.jsdelivr.com/package/npm/tsparticles-plugin-emitters)
-[![npmjs](https://badge.fury.io/js/tsparticles-plugin-emitters.svg)](https://www.npmjs.com/package/tsparticles-plugin-emitters)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-plugin-emitters)](https://www.npmjs.com/package/tsparticles-plugin-emitters) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-emitters/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-emitters)
+[![npmjs](https://badge.fury.io/js/@tsparticles/plugin-emitters.svg)](https://www.npmjs.com/package/@tsparticles/plugin-emitters)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/plugin-emitters)](https://www.npmjs.com/package/@tsparticles/plugin-emitters) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
 [tsParticles](https://github.com/matteobruni/tsparticles) plugin for particles emitters.
 
@@ -42,29 +42,33 @@ Once the scripts are loaded you can set up `tsParticles` and the plugin like thi
 This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
 
 ```shell
-$ npm install tsparticles-plugin-emitters
+$ npm install @tsparticles/plugin-emitters
 ```
 
 or
 
 ```shell
-$ yarn add tsparticles-plugin-emitters
+$ yarn add @tsparticles/plugin-emitters
 ```
 
 Then you need to import it in the app, like this:
 
 ```javascript
-const { tsParticles } = require("tsparticles-engine");
-const { loadEmittersPlugin } = require("tsparticles-plugin-emitters");
+const { tsParticles } = require("@tsparticles/engine");
+const { loadEmittersPlugin } = require("@tsparticles/plugin-emitters");
 
-loadEmittersPlugin(tsParticles);
+(async () => {
+  await loadEmittersPlugin(tsParticles);
+})();
 ```
 
 or
 
 ```javascript
-import { tsParticles } from "tsparticles-engine";
-import { loadEmittersPlugin } from "tsparticles-plugin-emitters";
+import { tsParticles } from "@tsparticles/engine";
+import { loadEmittersPlugin } from "@tsparticles/plugin-emitters";
 
-loadEmittersPlugin(tsParticles);
+(async () => {
+  await loadEmittersPlugin(tsParticles);
+})();
 ```

package/browser/EmitterInstance.js

@@ -1,12 +1,79 @@
-import { Vector, calcPositionOrRandomFromSizeRanged, deepExtend, getRangeValue, isPointInside, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
+import { Vector, calcPositionOrRandomFromSizeRanged, deepExtend, getRangeValue, getSize, isPointInside, itemFromSingleOrMultiple, randomInRange, rangeColorToHsl, } from "@tsparticles/engine";
 import { Emitter } from "./Options/Classes/Emitter";
 import { EmitterSize } from "./Options/Classes/EmitterSize";
 export class EmitterInstance {
     constructor(engine, emitters, container, options, position) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _h;
         this.emitters = emitters;
         this.container = container;
+        this._calcPosition = () => {
+            return calcPositionOrRandomFromSizeRanged({
+                size: this.container.canvas.size,
+                position: this.options.position,
+            });
+        };
+        this._destroy = () => {
+            this.emitters.removeEmitter(this);
+            this._engine.dispatchEvent("emitterDestroyed", {
+                container: this.container,
+                data: {
+                    emitter: this,
+                },
+            });
+        };
+        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;
+            }
+            const duration = this.options.life?.duration !== undefined ? getRangeValue(this.options.life.duration) : undefined;
+            if (this.container.retina.reduceFactor &&
+                (this._lifeCount > 0 || this._immortal) &&
+                duration !== undefined &&
+                duration > 0) {
+                this._duration = duration * 1000;
+            }
+        };
+        this._setColorAnimation = (animation, initValue, maxValue) => {
+            const container = this.container;
+            if (!animation.enable) {
+                return initValue;
+            }
+            const colorOffset = randomInRange(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = (1000 * delay) / container.retina.reduceFactor, colorSpeed = getRangeValue(animation.speed ?? 0);
+            return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
+        };
         this._engine = engine;
         this._currentDuration = 0;
         this._currentEmitDelay = 0;
@@ -19,33 +86,34 @@ export class EmitterInstance {
             this.options = new Emitter();
             this.options.load(options);
         }
-        this._spawnDelay = (((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1000) / this.container.retina.reduceFactor;
-        this.position = (_b = this._initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
+        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 = (_c = this._engine.emitterShapeManager) === null || _c === void 0 ? void 0 : _c.getShape(this.options.shape);
+        this._shape = this._engine.emitterShapeManager?.getShape(this.options.shape);
         this.fill = this.options.fill;
         this._firstSpawn = !this.options.life.wait;
         this._startParticlesAdded = false;
         let particlesOptions = deepExtend({}, this.options.particles);
-        particlesOptions !== null && particlesOptions !== void 0 ? particlesOptions : (particlesOptions = {});
-        (_d = particlesOptions.move) !== null && _d !== void 0 ? _d : (particlesOptions.move = {});
-        (_e = (_h = particlesOptions.move).direction) !== null && _e !== void 0 ? _e : (_h.direction = this.options.direction);
+        particlesOptions ??= {};
+        particlesOptions.move ??= {};
+        particlesOptions.move.direction ??= this.options.direction;
         if (this.options.spawnColor) {
             this.spawnColor = rangeColorToHsl(this.options.spawnColor);
         }
         this._paused = !this.options.autoPlay;
         this._particlesOptions = particlesOptions;
         this.size =
-            (_f = this.options.size) !== null && _f !== void 0 ? _f : (() => {
-                const size = new EmitterSize();
-                size.load({
-                    height: 0,
-                    mode: "percent",
-                    width: 0,
-                });
-                return size;
-            })();
-        this._lifeCount = (_g = this.options.life.count) !== null && _g !== void 0 ? _g : -1;
+            this.options.size ??
+                (() => {
+                    const size = new EmitterSize();
+                    size.load({
+                        height: 0,
+                        mode: "percent",
+                        width: 0,
+                    });
+                    return size;
+                })();
+        this._lifeCount = this.options.life.count ?? -1;
         this._immortal = this._lifeCount <= 0;
         this._engine.dispatchEvent("emitterCreated", {
             container,
@@ -88,14 +156,7 @@ export class EmitterInstance {
                 };
             }
         }
-        return {
-            width: this.size.mode === "percent"
-                ? (container.canvas.size.width * this.size.width) / 100
-                : this.size.width,
-            height: this.size.mode === "percent"
-                ? (container.canvas.size.height * this.size.height) / 100
-                : this.size.height,
-        };
+        return getSize(this.size, container.canvas.size);
     }
     pause() {
         if (this._paused) {
@@ -104,13 +165,12 @@ export class EmitterInstance {
         delete this._emitDelay;
     }
     play() {
-        var _a;
         if (this._paused) {
             return;
         }
         if (!(this.container.retina.reduceFactor &&
             (this._lifeCount > 0 || this._immortal || !this.options.life.count) &&
-            (this._firstSpawn || this._currentSpawnDelay >= ((_a = this._spawnDelay) !== null && _a !== void 0 ? _a : 0)))) {
+            (this._firstSpawn || this._currentSpawnDelay >= (this._spawnDelay ?? 0)))) {
             return;
         }
         if (this._emitDelay === undefined) {
@@ -118,7 +178,7 @@ export class EmitterInstance {
             this._emitDelay = (1000 * delay) / this.container.retina.reduceFactor;
         }
         if (this._lifeCount > 0 || this._immortal) {
-            this.prepareToDie();
+            this._prepareToDie();
         }
     }
     resize() {
@@ -126,21 +186,20 @@ export class EmitterInstance {
         this.position =
             initialPosition && isPointInside(initialPosition, this.container.canvas.size, Vector.origin)
                 ? initialPosition
-                : this.calcPosition();
+                : this._calcPosition();
     }
     update(delta) {
-        var _a, _b, _c;
         if (this._paused) {
             return;
         }
         if (this._firstSpawn) {
             this._firstSpawn = false;
-            this._currentSpawnDelay = (_a = this._spawnDelay) !== null && _a !== void 0 ? _a : 0;
-            this._currentEmitDelay = (_b = this._emitDelay) !== null && _b !== void 0 ? _b : 0;
+            this._currentSpawnDelay = this._spawnDelay ?? 0;
+            this._currentEmitDelay = this._emitDelay ?? 0;
         }
         if (!this._startParticlesAdded) {
             this._startParticlesAdded = true;
-            this.emitParticles(this.options.startCount);
+            this._emitParticles(this.options.startCount);
         }
         if (this._duration !== undefined) {
             this._currentDuration += delta.value;
@@ -153,11 +212,12 @@ export class EmitterInstance {
                     this._lifeCount--;
                 }
                 if (this._lifeCount > 0 || this._immortal) {
-                    this.position = this.calcPosition();
-                    this._spawnDelay = (((_c = this.options.life.delay) !== null && _c !== void 0 ? _c : 0) * 1000) / this.container.retina.reduceFactor;
+                    this.position = this._calcPosition();
+                    this._spawnDelay =
+                        (getRangeValue(this.options.life.delay ?? 0) * 1000) / this.container.retina.reduceFactor;
                 }
                 else {
-                    this.destroy();
+                    this._destroy();
                 }
                 this._currentDuration -= this._duration;
                 delete this._duration;
@@ -177,81 +237,9 @@ export class EmitterInstance {
         if (this._emitDelay !== undefined) {
             this._currentEmitDelay += delta.value;
             if (this._currentEmitDelay >= this._emitDelay) {
-                this.emit();
+                this._emit();
                 this._currentEmitDelay -= this._emitDelay;
             }
         }
     }
-    calcPosition() {
-        return calcPositionOrRandomFromSizeRanged({
-            size: this.container.canvas.size,
-            position: this.options.position,
-        });
-    }
-    destroy() {
-        this.emitters.removeEmitter(this);
-        this._engine.dispatchEvent("emitterDestroyed", {
-            container: this.container,
-            data: {
-                emitter: this,
-            },
-        });
-    }
-    emit() {
-        if (this._paused) {
-            return;
-        }
-        const quantity = getRangeValue(this.options.rate.quantity);
-        this.emitParticles(quantity);
-    }
-    emitParticles(quantity) {
-        var _a, _b, _c;
-        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 = (_a = this.options.spawnColor) === null || _a === void 0 ? void 0 : _a.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 = (_c = (_b = this._shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
-            this.container.particles.addParticle(pPosition, particlesOptions);
-        }
-    }
-    prepareToDie() {
-        var _a;
-        if (this._paused) {
-            return;
-        }
-        const duration = (_a = this.options.life) === null || _a === void 0 ? void 0 : _a.duration;
-        if (this.container.retina.reduceFactor &&
-            (this._lifeCount > 0 || this._immortal) &&
-            duration !== undefined &&
-            duration > 0) {
-            this._duration = duration * 1000;
-        }
-    }
-    setColorAnimation(animation, initValue, maxValue) {
-        var _a;
-        const container = this.container;
-        if (!animation.enable) {
-            return initValue;
-        }
-        const colorOffset = randomInRange(animation.offset), delay = getRangeValue(this.options.rate.delay), emitFactor = (1000 * delay) / container.retina.reduceFactor, colorSpeed = getRangeValue((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
-        return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
-    }
 }

package/browser/Emitters.js

@@ -1,4 +1,4 @@
-import { arrayRandomIndex, executeOnSingleOrMultiple, itemFromArray } from "@tsparticles/engine";
+import { arrayRandomIndex, executeOnSingleOrMultiple, isArray, isNumber, itemFromArray, } from "@tsparticles/engine";
 import { Emitter } from "./Options/Classes/Emitter";
 import { EmitterInstance } from "./EmitterInstance";
 export class Emitters {
@@ -14,7 +14,7 @@ export class Emitters {
             },
             value: [],
         };
-        container.getEmitter = (idxOrName) => idxOrName === undefined || typeof idxOrName === "number"
+        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);
@@ -46,39 +46,43 @@ export class Emitters {
     }
     handleClickMode(mode) {
         const emitterOptions = this.emitters, modeEmitters = this.interactivityEmitters;
-        if (mode === "emitter") {
-            let emittersModeOptions;
-            if (modeEmitters && modeEmitters.value instanceof Array) {
-                if (modeEmitters.value.length > 0 && modeEmitters.random.enable) {
-                    emittersModeOptions = [];
-                    const usedIndexes = [];
-                    for (let i = 0; i < modeEmitters.random.count; i++) {
-                        const idx = arrayRandomIndex(modeEmitters.value);
-                        if (usedIndexes.includes(idx) && usedIndexes.length < modeEmitters.value.length) {
-                            i--;
-                            continue;
-                        }
-                        usedIndexes.push(idx);
-                        emittersModeOptions.push(itemFromArray(modeEmitters.value, idx));
+        if (mode !== "emitter") {
+            return;
+        }
+        let emittersModeOptions;
+        if (modeEmitters && isArray(modeEmitters.value)) {
+            if (modeEmitters.value.length > 0 && modeEmitters.random.enable) {
+                emittersModeOptions = [];
+                const usedIndexes = [];
+                for (let i = 0; i < modeEmitters.random.count; i++) {
+                    const idx = arrayRandomIndex(modeEmitters.value);
+                    if (usedIndexes.includes(idx) && usedIndexes.length < modeEmitters.value.length) {
+                        i--;
+                        continue;
                     }
-                }
-                else {
-                    emittersModeOptions = modeEmitters.value;
+                    usedIndexes.push(idx);
+                    emittersModeOptions.push(itemFromArray(modeEmitters.value, idx));
                 }
             }
             else {
-                emittersModeOptions = modeEmitters === null || modeEmitters === void 0 ? void 0 : modeEmitters.value;
+                emittersModeOptions = modeEmitters.value;
             }
-            const emittersOptions = emittersModeOptions !== null && emittersModeOptions !== void 0 ? emittersModeOptions : emitterOptions, ePosition = this.container.interactivity.mouse.clickPosition;
-            executeOnSingleOrMultiple(emittersOptions, (emitter) => {
-                this.addEmitter(emitter, ePosition);
-            });
         }
+        else {
+            emittersModeOptions = modeEmitters?.value;
+        }
+        const emittersOptions = emittersModeOptions ?? emitterOptions, ePosition = this.container.interactivity.mouse.clickPosition;
+        executeOnSingleOrMultiple(emittersOptions, (emitter) => {
+            this.addEmitter(emitter, ePosition);
+        });
     }
     async init() {
         this.emitters = this.container.actualOptions.emitters;
         this.interactivityEmitters = this.container.actualOptions.interactivity.modes.emitters;
-        if (this.emitters instanceof Array) {
+        if (!this.emitters) {
+            return;
+        }
+        if (isArray(this.emitters)) {
             for (const emitterOptions of this.emitters) {
                 this.addEmitter(emitterOptions);
             }

package/browser/Options/Classes/Emitter.js

@@ -1,4 +1,4 @@
-import { AnimatableColor, deepExtend, executeOnSingleOrMultiple, setRangeValue } from "@tsparticles/engine";
+import { AnimatableColor, deepExtend, executeOnSingleOrMultiple, setRangeValue, } from "@tsparticles/engine";
 import { EmitterLife } from "./EmitterLife";
 import { EmitterRate } from "./EmitterRate";
 import { EmitterSize } from "./EmitterSize";
@@ -12,14 +12,14 @@ export class Emitter {
         this.startCount = 0;
     }
     load(data) {
-        if (data === undefined) {
+        if (!data) {
             return;
         }
         if (data.autoPlay !== undefined) {
             this.autoPlay = data.autoPlay;
         }
         if (data.size !== undefined) {
-            if (this.size === undefined) {
+            if (!this.size) {
                 this.size = new EmitterSize();
             }
             this.size.load(data.size);

package/browser/Options/Classes/EmitterLife.js

@@ -1,19 +1,20 @@
+import { setRangeValue } from "@tsparticles/engine";
 export class EmitterLife {
     constructor() {
         this.wait = false;
     }
     load(data) {
-        if (data === undefined) {
+        if (!data) {
             return;
         }
         if (data.count !== undefined) {
             this.count = data.count;
         }
         if (data.delay !== undefined) {
-            this.delay = data.delay;
+            this.delay = setRangeValue(data.delay);
         }
         if (data.duration !== undefined) {
-            this.duration = data.duration;
+            this.duration = setRangeValue(data.duration);
         }
         if (data.wait !== undefined) {
             this.wait = data.wait;

package/browser/index.js

@@ -1,4 +1,4 @@
-import { executeOnSingleOrMultiple, isInArray } from "@tsparticles/engine";
+import { executeOnSingleOrMultiple, isArray, isInArray, } from "@tsparticles/engine";
 import { CircleShape } from "./Shapes/Circle/CircleShape";
 import { Emitter } from "./Options/Classes/Emitter";
 import { Emitters } from "./Emitters";
@@ -13,20 +13,19 @@ class EmittersPlugin {
         return new Emitters(this._engine, container);
     }
     loadOptions(options, source) {
-        var _a, _b, _c, _d, _e, _f;
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
-        if (source === null || source === void 0 ? void 0 : source.emitters) {
+        if (source?.emitters) {
             options.emitters = executeOnSingleOrMultiple(source.emitters, (emitter) => {
                 const tmp = new Emitter();
                 tmp.load(emitter);
                 return tmp;
             });
         }
-        const interactivityEmitters = (_b = (_a = source === null || source === void 0 ? void 0 : source.interactivity) === null || _a === void 0 ? void 0 : _a.modes) === null || _b === void 0 ? void 0 : _b.emitters;
+        const interactivityEmitters = source?.interactivity?.modes?.emitters;
         if (interactivityEmitters) {
-            if (interactivityEmitters instanceof Array) {
+            if (isArray(interactivityEmitters)) {
                 options.interactivity.modes.emitters = {
                     random: {
                         count: 1,
@@ -42,11 +41,11 @@ class EmittersPlugin {
             else {
                 const emitterMode = interactivityEmitters;
                 if (emitterMode.value !== undefined) {
-                    if (emitterMode.value instanceof Array) {
+                    if (isArray(emitterMode.value)) {
                         options.interactivity.modes.emitters = {
                             random: {
-                                count: (_c = emitterMode.random.count) !== null && _c !== void 0 ? _c : 1,
-                                enable: (_d = emitterMode.random.enable) !== null && _d !== void 0 ? _d : false,
+                                count: emitterMode.random.count ?? 1,
+                                enable: emitterMode.random.enable ?? false,
                             },
                             value: emitterMode.value.map((s) => {
                                 const tmp = new Emitter();
@@ -60,8 +59,8 @@ class EmittersPlugin {
                         tmp.load(emitterMode.value);
                         options.interactivity.modes.emitters = {
                             random: {
-                                count: (_e = emitterMode.random.count) !== null && _e !== void 0 ? _e : 1,
-                                enable: (_f = emitterMode.random.enable) !== null && _f !== void 0 ? _f : false,
+                                count: emitterMode.random.count ?? 1,
+                                enable: emitterMode.random.enable ?? false,
                             },
                             value: tmp,
                         };
@@ -81,29 +80,27 @@ class EmittersPlugin {
         }
     }
     needsPlugin(options) {
-        var _a, _b, _c;
         if (!options) {
             return false;
         }
         const emitters = options.emitters;
-        return ((emitters instanceof Array && !!emitters.length) ||
+        return ((isArray(emitters) && !!emitters.length) ||
             emitters !== undefined ||
-            (!!((_c = (_b = (_a = options.interactivity) === null || _a === void 0 ? void 0 : _a.events) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.mode) &&
+            (!!options.interactivity?.events?.onClick?.mode &&
                 isInArray("emitter", options.interactivity.events.onClick.mode)));
     }
 }
-export async function loadEmittersPlugin(engine) {
+export async function loadEmittersPlugin(engine, refresh = true) {
     if (!engine.emitterShapeManager) {
         engine.emitterShapeManager = new ShapeManager(engine);
     }
     if (!engine.addEmitterShape) {
         engine.addEmitterShape = (name, shape) => {
-            var _a;
-            (_a = engine.emitterShapeManager) === null || _a === void 0 ? void 0 : _a.addShape(name, shape);
+            engine.emitterShapeManager?.addShape(name, shape);
         };
     }
     const plugin = new EmittersPlugin(engine);
-    await engine.addPlugin(plugin);
+    await engine.addPlugin(plugin, refresh);
     engine.addEmitterShape("circle", new CircleShape());
     engine.addEmitterShape("square", new SquareShape());
 }