@tsparticles/engine 3.1.0 → 3.2.1

package/cjs/Core/Container.js

@@ -64,7 +64,7 @@ class Container {
                     this.destroy();
                     return;
                 }
-                if (this.getAnimationStatus()) {
+                if (this.animationStatus) {
                     this.draw(false);
                 }
             }
@@ -107,6 +107,9 @@ class Container {
         this._intersectionObserver = (0, Utils_js_1.safeIntersectionObserver)((entries) => this._intersectionManager(entries));
         this._engine.dispatchEvent("containerBuilt", { container: this });
     }
+    get animationStatus() {
+        return !this._paused && !this.pageHidden && guardCheck(this);
+    }
     get options() {
         return this._options;
     }
@@ -259,9 +262,6 @@ class Container {
         }
         (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} - Export plugin with type ${type} not found`);
     }
-    getAnimationStatus() {
-        return !this._paused && !this.pageHidden && guardCheck(this);
-    }
     handleClickMode(mode) {
         if (!guardCheck(this)) {
             return;
@@ -289,9 +289,10 @@ class Container {
                 this.shapeDrawers.set(type, drawer);
             }
         }
+        await this.particles.initPlugins();
         this._options = loadContainerOptions(this._engine, this, this._initialSourceOptions, this.sourceOptions);
         this.actualOptions = loadContainerOptions(this._engine, this, this._options);
-        const availablePlugins = this._engine.getAvailablePlugins(this);
+        const availablePlugins = await this._engine.getAvailablePlugins(this);
         for (const [id, plugin] of availablePlugins) {
             this.plugins.set(id, plugin);
         }
@@ -317,8 +318,8 @@ class Container {
             await plugin.init?.();
         }
         this._engine.dispatchEvent("containerInit", { container: this });
-        this.particles.init();
-        this.particles.setDensity();
+        await this.particles.init();
+        await this.particles.setDensity();
         for (const [, plugin] of this.plugins) {
             plugin.particlesSetup?.();
         }

package/cjs/Core/Engine.js

@@ -1,15 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Engine = void 0;
 const Constants_js_1 = require("./Utils/Constants.js");
 const Utils_js_1 = require("../Utils/Utils.js");
-const Container_js_1 = require("./Container.js");
 const EventDispatcher_js_1 = require("../Utils/EventDispatcher.js");
 const NumberUtils_js_1 = require("../Utils/NumberUtils.js");
-function getItemsFromInitializer(container, map, initializers, force = false) {
+async function getItemsFromInitializer(container, map, initializers, force = false) {
     let res = map.get(container);
     if (!res || force) {
-        res = [...initializers.values()].map((t) => t(container));
+        res = await Promise.all([...initializers.values()].map((t) => t(container)));
         map.set(container, res);
     }
     return res;
@@ -21,7 +43,7 @@ async function getDataFromUrl(data) {
     }
     const response = await fetch(url);
     if (response.ok) {
-        return response.json();
+        return (await response.json());
     }
     (0, Utils_js_1.getLogger)().error(`${Constants_js_1.errorPrefix} ${response.status} while retrieving config file`);
     return data.fallback;
@@ -54,7 +76,7 @@ class Engine {
         return res;
     }
     get version() {
-        return "3.1.0";
+        return "3.2.1";
     }
     addConfig(config) {
         const key = config.key ?? config.name ?? "default";
@@ -130,11 +152,11 @@ class Engine {
         }
         return item;
     }
-    getAvailablePlugins(container) {
+    async getAvailablePlugins(container) {
         const res = new Map();
         for (const plugin of this.plugins) {
             if (plugin.needsPlugin(container.actualOptions)) {
-                res.set(plugin.id, plugin.getPlugin(container));
+                res.set(plugin.id, await plugin.getPlugin(container));
             }
         }
         return res;
@@ -142,11 +164,11 @@ class Engine {
     getEffectDrawer(type) {
         return this.effectDrawers.get(type);
     }
-    getInteractors(container, force = false) {
-        return getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
+    async getInteractors(container, force = false) {
+        return await getItemsFromInitializer(container, this.interactors, this._initializers.interactors, force);
     }
-    getMovers(container, force = false) {
-        return getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
+    async getMovers(container, force = false) {
+        return await getItemsFromInitializer(container, this.movers, this._initializers.movers, force);
     }
     getPathGenerator(type) {
         return this.pathGenerators.get(type);
@@ -166,8 +188,8 @@ class Engine {
     getSupportedShapes() {
         return this.shapeDrawers.keys();
     }
-    getUpdaters(container, force = false) {
-        return getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
+    async getUpdaters(container, force = false) {
+        return await getItemsFromInitializer(container, this.updaters, this._initializers.updaters, force);
     }
     init() {
         if (this._initialized) {
@@ -216,7 +238,7 @@ class Engine {
         if (!canvasEl.style.height) {
             canvasEl.style.height = "100%";
         }
-        const newItem = new Container_js_1.Container(this, id, currentOptions);
+        const { Container } = await Promise.resolve().then(() => __importStar(require("./Container.js"))), newItem = new Container(this, id, currentOptions);
         if (oldIndex >= minIndex) {
             const deleteCount = 0;
             dom.splice(oldIndex, deleteCount, newItem);
@@ -246,7 +268,7 @@ class Engine {
         if (!refresh) {
             return;
         }
-        await Promise.allSettled(this.dom().map((t) => t.refresh()));
+        await Promise.all(this.dom().map((t) => t.refresh()));
     }
     removeEventListener(type, listener) {
         this._eventDispatcher.removeEventListener(type, listener);

package/cjs/Core/Particle.js

@@ -44,7 +44,7 @@ function fixOutMode(data) {
     }
 }
 class Particle {
-    constructor(engine, id, container, position, overrideOptions, group) {
+    constructor(engine, container) {
         this.container = container;
         this._calcPosition = (container, position, zIndex, tryCount = defaultRetryCount) => {
             for (const [, plugin] of container.plugins) {
@@ -59,7 +59,7 @@ class Particle {
             }), pos = Vector3d_js_1.Vector3d.create(exactPosition.x, exactPosition.y, zIndex), radius = this.getRadius(), outModes = this.options.move.outModes, fixHorizontal = (outMode) => {
                 fixOutMode({
                     outMode,
-                    checkModes: ["bounce", "bounce-horizontal"],
+                    checkModes: ["bounce"],
                     coord: pos.x,
                     maxCoord: container.canvas.size.width,
                     setCb: (value) => (pos.x += value),
@@ -68,7 +68,7 @@ class Particle {
             }, fixVertical = (outMode) => {
                 fixOutMode({
                     outMode,
-                    checkModes: ["bounce", "bounce-vertical"],
+                    checkModes: ["bounce"],
                     coord: pos.y,
                     maxCoord: container.canvas.size.height,
                     setCb: (value) => (pos.y += value),
@@ -155,7 +155,6 @@ class Particle {
             this.offset = Vector_js_1.Vector.origin;
         };
         this._engine = engine;
-        this.init(id, position, overrideOptions, group);
     }
     destroy(override) {
         if (this.unbreakable || this.destroyed) {
@@ -180,12 +179,12 @@ class Particle {
             },
         });
     }
-    draw(delta) {
+    async draw(delta) {
         const container = this.container, canvas = container.canvas;
         for (const [, plugin] of container.plugins) {
-            canvas.drawParticlePlugin(plugin, this, delta);
+            await canvas.drawParticlePlugin(plugin, this, delta);
         }
-        canvas.drawParticle(this, delta);
+        await canvas.drawParticle(this, delta);
     }
     getFillColor() {
         return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.color));
@@ -206,7 +205,7 @@ class Particle {
     getStrokeColor() {
         return this._getRollColor(this.bubble.color ?? (0, ColorUtils_js_1.getHslFromAnimation)(this.strokeColor));
     }
-    init(id, position, overrideOptions, group) {
+    async init(id, position, overrideOptions, group) {
         const container = this.container, engine = this._engine;
         this.id = id;
         this.group = group;
@@ -270,7 +269,7 @@ class Particle {
         if (pathOptions.generator) {
             this.pathGenerator = this._engine.getPathGenerator(pathOptions.generator);
             if (this.pathGenerator && container.addPath(pathOptions.generator, this.pathGenerator)) {
-                this.pathGenerator.init(container);
+                await this.pathGenerator.init(container);
             }
         }
         container.retina.initParticle(this);
@@ -299,7 +298,7 @@ class Particle {
             }
         }
         if (effectDrawer?.loadEffect) {
-            effectDrawer.loadEffect(this);
+            await effectDrawer.loadEffect(this);
         }
         let shapeDrawer = container.shapeDrawers.get(this.shape);
         if (!shapeDrawer) {
@@ -309,7 +308,7 @@ class Particle {
             }
         }
         if (shapeDrawer?.loadShape) {
-            shapeDrawer.loadShape(this);
+            await shapeDrawer.loadShape(this);
         }
         const sideCountFunc = shapeDrawer?.getSidesCount;
         if (sideCountFunc) {
@@ -318,13 +317,13 @@ class Particle {
         this.spawning = false;
         this.shadowColor = (0, ColorUtils_js_1.rangeColorToRgb)(this.options.shadow.color);
         for (const updater of particles.updaters) {
-            updater.init(this);
+            await updater.init(this);
         }
         for (const mover of particles.movers) {
-            mover.init?.(this);
+            await mover.init?.(this);
         }
-        effectDrawer?.particleInit?.(container, this);
-        shapeDrawer?.particleInit?.(container, this);
+        await effectDrawer?.particleInit?.(container, this);
+        await shapeDrawer?.particleInit?.(container, this);
         for (const [, plugin] of container.plugins) {
             plugin.particleCreated?.(this);
         }

package/cjs/Core/Particles.js

@@ -1,9 +1,31 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Particles = void 0;
 const Utils_js_1 = require("../Utils/Utils.js");
 const InteractionManager_js_1 = require("./Utils/InteractionManager.js");
-const Particle_js_1 = require("./Particle.js");
 const Point_js_1 = require("./Utils/Point.js");
 const QuadTree_js_1 = require("./Utils/QuadTree.js");
 const Rectangle_js_1 = require("./Utils/Rectangle.js");
@@ -20,7 +42,7 @@ class Particles {
                 this._pool.push(particle);
             }
         };
-        this._applyDensity = (options, manualCount, group) => {
+        this._applyDensity = async (options, manualCount, group) => {
             const numberOptions = options.number;
             if (!options.number.density?.enable) {
                 if (group === undefined) {
@@ -39,7 +61,7 @@ class Particles {
                 this._groupLimits.set(group, numberOptions.limit.value * densityFactor);
             }
             if (particlesCount < particlesNumber) {
-                this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
+                await this.push(Math.abs(particlesNumber - particlesCount), undefined, options, group);
             }
             else if (particlesCount > particlesNumber) {
                 this.removeQuantity(particlesCount - particlesNumber, group);
@@ -53,15 +75,14 @@ class Particles {
             const canvas = container.canvas.element, pxRatio = container.retina.pixelRatio;
             return (canvas.width * canvas.height) / (densityOptions.height * densityOptions.width * pxRatio ** squareExp);
         };
-        this._pushParticle = (position, overrideOptions, group, initializer) => {
+        this._pushParticle = async (position, overrideOptions, group, initializer) => {
             try {
                 let particle = this._pool.pop();
-                if (particle) {
-                    particle.init(this._nextId, position, overrideOptions, group);
-                }
-                else {
-                    particle = new Particle_js_1.Particle(this._engine, this._nextId, this._container, position, overrideOptions, group);
+                if (!particle) {
+                    const { Particle } = await Promise.resolve().then(() => __importStar(require("./Particle.js")));
+                    particle = new Particle(this._engine, this._container);
                 }
+                await particle.init(this._nextId, position, overrideOptions, group);
                 let canAdd = true;
                 if (initializer) {
                     canAdd = initializer(particle);
@@ -113,21 +134,22 @@ class Particles {
         this._needsSort = false;
         this._lastZIndex = 0;
         this._interactionManager = new InteractionManager_js_1.InteractionManager(engine, container);
+        this._pluginsInitialized = false;
         const canvasSize = container.canvas.size;
         this.quadTree = new QuadTree_js_1.QuadTree(qTreeRectangle(canvasSize), qTreeCapacity);
-        this.movers = this._engine.getMovers(container, true);
-        this.updaters = this._engine.getUpdaters(container, true);
+        this.movers = [];
+        this.updaters = [];
     }
     get count() {
         return this._array.length;
     }
-    addManualParticles() {
+    async addManualParticles() {
         const container = this._container, options = container.actualOptions;
         for (const particle of options.manualParticles) {
-            this.addParticle(particle.position ? (0, Utils_js_1.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);
+            await this.addParticle(particle.position ? (0, Utils_js_1.getPosition)(particle.position, container.canvas.size) : undefined, particle.options);
         }
     }
-    addParticle(position, overrideOptions, group, initializer) {
+    async addParticle(position, overrideOptions, group, initializer) {
         const limitOptions = this._container.actualOptions.particles.number.limit, limit = group === undefined ? this._limit : this._groupLimits.get(group) ?? this._limit, currentCount = this.count, minLimit = 0;
         if (limit > minLimit) {
             if (limitOptions.mode === "delete") {
@@ -142,11 +164,12 @@ class Particles {
                 }
             }
         }
-        return this._pushParticle(position, overrideOptions, group, initializer);
+        return await this._pushParticle(position, overrideOptions, group, initializer);
     }
     clear() {
         this._array = [];
         this._zArray = [];
+        this._pluginsInitialized = false;
     }
     destroy() {
         this._array = [];
@@ -159,10 +182,10 @@ class Particles {
         canvas.clear();
         await this.update(delta);
         for (const [, plugin] of container.plugins) {
-            canvas.drawPlugin(plugin, delta);
+            await canvas.drawPlugin(plugin, delta);
         }
         for (const p of this._zArray) {
-            p.draw(delta);
+            await p.draw(delta);
         }
     }
     filter(condition) {
@@ -177,13 +200,12 @@ class Particles {
     handleClickMode(mode) {
         this._interactionManager.handleClickMode(mode);
     }
-    init() {
+    async init() {
         const container = this._container, options = container.actualOptions;
         this._lastZIndex = 0;
         this._needsSort = false;
+        await this.initPlugins();
         let handled = false;
-        this.updaters = this._engine.getUpdaters(container, true);
-        this._interactionManager.init();
         for (const [, plugin] of container.plugins) {
             if (plugin.particlesInitialization !== undefined) {
                 handled = plugin.particlesInitialization();
@@ -192,32 +214,40 @@ class Particles {
                 break;
             }
         }
-        this._interactionManager.init();
-        for (const [, pathGenerator] of container.pathGenerators) {
-            pathGenerator.init(container);
-        }
-        this.addManualParticles();
+        await this.addManualParticles();
         if (!handled) {
             const particlesOptions = options.particles, groups = particlesOptions.groups;
             for (const group in groups) {
                 const groupOptions = groups[group];
                 for (let i = this.count, j = 0; j < groupOptions.number?.value && i < particlesOptions.number.value; i++, j++) {
-                    this.addParticle(undefined, groupOptions, group);
+                    await this.addParticle(undefined, groupOptions, group);
                 }
             }
             for (let i = this.count; i < particlesOptions.number.value; i++) {
-                this.addParticle();
+                await this.addParticle();
             }
         }
     }
-    push(nb, mouse, overrideOptions, group) {
+    async initPlugins() {
+        if (this._pluginsInitialized) {
+            return;
+        }
+        const container = this._container;
+        this.movers = await this._engine.getMovers(container, true);
+        this.updaters = await this._engine.getUpdaters(container, true);
+        await this._interactionManager.init();
+        for (const [, pathGenerator] of container.pathGenerators) {
+            await pathGenerator.init(container);
+        }
+    }
+    async push(nb, mouse, overrideOptions, group) {
         for (let i = 0; i < nb; i++) {
-            this.addParticle(mouse?.position, overrideOptions, group);
+            await this.addParticle(mouse?.position, overrideOptions, group);
         }
     }
     async redraw() {
         this.clear();
-        this.init();
+        await this.init();
         await this.draw({ value: 0, factor: 0 });
     }
     remove(particle, group, override) {
@@ -239,12 +269,12 @@ class Particles {
         const defaultIndex = 0;
         this.removeAt(defaultIndex, quantity, group);
     }
-    setDensity() {
+    async setDensity() {
         const options = this._container.actualOptions, groups = options.particles.groups, manualCount = 0;
         for (const group in groups) {
-            this._applyDensity(groups[group], manualCount, group);
+            await this._applyDensity(groups[group], manualCount, group);
         }
-        this._applyDensity(options.particles, options.manualParticles.length);
+        await this._applyDensity(options.particles, options.manualParticles.length);
     }
     setLastZIndex(zIndex) {
         this._lastZIndex = zIndex;
@@ -280,7 +310,7 @@ class Particles {
             }
             for (const mover of this.movers) {
                 if (mover.isEnabled(particle)) {
-                    mover.move(particle, delta);
+                    await mover.move(particle, delta);
                 }
             }
             if (particle.destroyed) {
@@ -306,7 +336,7 @@ class Particles {
         await this._interactionManager.externalInteract(delta);
         for (const particle of this._array) {
             for (const updater of this.updaters) {
-                updater.update(particle, delta);
+                await updater.update(particle, delta);
             }
             if (!particle.destroyed && !particle.spawning) {
                 await this._interactionManager.particlesInteract(particle, delta);

package/cjs/Core/Utils/EventListeners.js

@@ -58,7 +58,7 @@ class EventListeners {
             }
             else {
                 container.pageHidden = false;
-                if (container.getAnimationStatus()) {
+                if (container.animationStatus) {
                     container.play(true);
                 }
                 else {

package/cjs/Core/Utils/InteractionManager.js

@@ -5,7 +5,7 @@ class InteractionManager {
     constructor(engine, container) {
         this.container = container;
         this._engine = engine;
-        this._interactors = engine.getInteractors(this.container, true);
+        this._interactors = [];
         this._externalInteractors = [];
         this._particleInteractors = [];
     }
@@ -21,7 +21,8 @@ class InteractionManager {
             interactor.handleClickMode?.(mode);
         }
     }
-    init() {
+    async init() {
+        this._interactors = await this._engine.getInteractors(this.container, true);
         this._externalInteractors = [];
         this._particleInteractors = [];
         for (const interactor of this._interactors) {

package/cjs/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -18,7 +18,7 @@ class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover, color = ((0, Utils_js_1.isString)(data.cover) ? { color: data.cover } : data.cover);
-            this.cover.load(cover.color !== undefined ? cover : { color: color });
+            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
         }
         if (data.enable !== undefined) {
             this.enable = data.enable;

package/cjs/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -4,8 +4,6 @@ exports.BackgroundMaskCover = void 0;
 const OptionsColor_js_1 = require("../OptionsColor.js");
 class BackgroundMaskCover {
     constructor() {
-        this.color = new OptionsColor_js_1.OptionsColor();
-        this.color.value = "#fff";
         this.opacity = 1;
     }
     load(data) {
@@ -15,6 +13,9 @@ class BackgroundMaskCover {
         if (data.color !== undefined) {
             this.color = OptionsColor_js_1.OptionsColor.create(this.color, data.color);
         }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;
         }

package/cjs/Utils/CanvasUtils.js

@@ -28,7 +28,7 @@ function clear(context, dimension) {
     context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
 }
 exports.clear = clear;
-function drawParticle(data) {
+async function drawParticle(data) {
     const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data, pos = particle.getPosition(), defaultAngle = 0, angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : defaultAngle), rotateData = {
         sin: Math.sin(angle),
         cos: Math.cos(angle),
@@ -67,14 +67,14 @@ function drawParticle(data) {
         transformData,
         strokeWidth,
     };
-    drawShape(drawData);
-    drawShapeAfterDraw(drawData);
-    drawEffect(drawData);
+    await drawShape(drawData);
+    await drawShapeAfterDraw(drawData);
+    await drawEffect(drawData);
     context.globalCompositeOperation = "source-over";
     context.resetTransform();
 }
 exports.drawParticle = drawParticle;
-function drawEffect(data) {
+async function drawEffect(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
@@ -83,7 +83,7 @@ function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -94,7 +94,7 @@ function drawEffect(data) {
     });
 }
 exports.drawEffect = drawEffect;
-function drawShape(data) {
+async function drawShape(data) {
     const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
     if (!particle.shape) {
         return;
@@ -104,7 +104,7 @@ function drawShape(data) {
         return;
     }
     context.beginPath();
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -124,7 +124,7 @@ function drawShape(data) {
     }
 }
 exports.drawShape = drawShape;
-function drawShapeAfterDraw(data) {
+async function drawShapeAfterDraw(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
@@ -133,7 +133,7 @@ function drawShapeAfterDraw(data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw({
+    await drawer.afterDraw({
         context,
         particle,
         radius,
@@ -144,18 +144,18 @@ function drawShapeAfterDraw(data) {
     });
 }
 exports.drawShapeAfterDraw = drawShapeAfterDraw;
-function drawPlugin(context, plugin, delta) {
+async function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
-    plugin.draw(context, delta);
+    await plugin.draw(context, delta);
 }
 exports.drawPlugin = drawPlugin;
-function drawParticlePlugin(context, plugin, particle, delta) {
+async function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
-    plugin.drawParticle(context, particle, delta);
+    await plugin.drawParticle(context, particle, delta);
 }
 exports.drawParticlePlugin = drawParticlePlugin;
 function alterHsl(color, type, value) {