@tsparticles/engine 3.1.0 → 3.2.0

package/browser/Core/Particle.js

@@ -41,7 +41,7 @@ function fixOutMode(data) {
     }
 }
 export 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) {
@@ -56,7 +56,7 @@ export class Particle {
             }), pos = 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),
@@ -65,7 +65,7 @@ export 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),
@@ -152,7 +152,6 @@ export class Particle {
             this.offset = Vector.origin;
         };
         this._engine = engine;
-        this.init(id, position, overrideOptions, group);
     }
     destroy(override) {
         if (this.unbreakable || this.destroyed) {
@@ -177,12 +176,12 @@ export 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 ?? getHslFromAnimation(this.color));
@@ -203,7 +202,7 @@ export class Particle {
     getStrokeColor() {
         return this._getRollColor(this.bubble.color ?? 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;
@@ -267,7 +266,7 @@ export 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);
@@ -296,7 +295,7 @@ export class Particle {
             }
         }
         if (effectDrawer?.loadEffect) {
-            effectDrawer.loadEffect(this);
+            await effectDrawer.loadEffect(this);
         }
         let shapeDrawer = container.shapeDrawers.get(this.shape);
         if (!shapeDrawer) {
@@ -306,7 +305,7 @@ export class Particle {
             }
         }
         if (shapeDrawer?.loadShape) {
-            shapeDrawer.loadShape(this);
+            await shapeDrawer.loadShape(this);
         }
         const sideCountFunc = shapeDrawer?.getSidesCount;
         if (sideCountFunc) {
@@ -315,13 +314,13 @@ export class Particle {
         this.spawning = false;
         this.shadowColor = 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/browser/Core/Particles.js

@@ -1,6 +1,5 @@
 import { getLogger, getPosition } from "../Utils/Utils.js";
 import { InteractionManager } from "./Utils/InteractionManager.js";
-import { Particle } from "./Particle.js";
 import { Point } from "./Utils/Point.js";
 import { QuadTree } from "./Utils/QuadTree.js";
 import { Rectangle } from "./Utils/Rectangle.js";
@@ -17,7 +16,7 @@ export 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) {
@@ -36,7 +35,7 @@ export 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);
@@ -50,15 +49,14 @@ export 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(this._engine, this._nextId, this._container, position, overrideOptions, group);
+                if (!particle) {
+                    const { Particle } = await import("./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);
@@ -110,21 +108,22 @@ export class Particles {
         this._needsSort = false;
         this._lastZIndex = 0;
         this._interactionManager = new InteractionManager(engine, container);
+        this._pluginsInitialized = false;
         const canvasSize = container.canvas.size;
         this.quadTree = new 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 ? getPosition(particle.position, container.canvas.size) : undefined, particle.options);
+            await this.addParticle(particle.position ? 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") {
@@ -139,11 +138,12 @@ export 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 = [];
@@ -156,10 +156,10 @@ export 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) {
@@ -174,13 +174,12 @@ export 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();
@@ -189,32 +188,40 @@ export 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) {
@@ -236,12 +243,12 @@ export 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;
@@ -277,7 +284,7 @@ export class Particles {
             }
             for (const mover of this.movers) {
                 if (mover.isEnabled(particle)) {
-                    mover.move(particle, delta);
+                    await mover.move(particle, delta);
                 }
             }
             if (particle.destroyed) {
@@ -303,7 +310,7 @@ export 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/browser/Core/Utils/EventListeners.js

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

package/browser/Core/Utils/InteractionManager.js

@@ -2,7 +2,7 @@ export class InteractionManager {
     constructor(engine, container) {
         this.container = container;
         this._engine = engine;
-        this._interactors = engine.getInteractors(this.container, true);
+        this._interactors = [];
         this._externalInteractors = [];
         this._particleInteractors = [];
     }
@@ -18,7 +18,8 @@ export 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/browser/Options/Classes/BackgroundMask/BackgroundMask.js

@@ -15,7 +15,7 @@ export class BackgroundMask {
         }
         if (data.cover !== undefined) {
             const cover = data.cover, color = (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/browser/Options/Classes/BackgroundMask/BackgroundMaskCover.js

@@ -1,8 +1,6 @@
 import { OptionsColor } from "../OptionsColor.js";
 export class BackgroundMaskCover {
     constructor() {
-        this.color = new OptionsColor();
-        this.color.value = "#fff";
         this.opacity = 1;
     }
     load(data) {
@@ -12,6 +10,9 @@ export class BackgroundMaskCover {
         if (data.color !== undefined) {
             this.color = OptionsColor.create(this.color, data.color);
         }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
         if (data.opacity !== undefined) {
             this.opacity = data.opacity;
         }

package/browser/Utils/CanvasUtils.js

@@ -21,7 +21,7 @@ export function paintImage(context, dimension, image, opacity) {
 export function clear(context, dimension) {
     context.clearRect(origin.x, origin.y, dimension.width, dimension.height);
 }
-export function drawParticle(data) {
+export 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),
@@ -60,13 +60,13 @@ export 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();
 }
-export function drawEffect(data) {
+export async function drawEffect(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.effect) {
         return;
@@ -75,7 +75,7 @@ export function drawEffect(data) {
     if (!drawer) {
         return;
     }
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -85,7 +85,7 @@ export function drawEffect(data) {
         transformData: { ...transformData },
     });
 }
-export function drawShape(data) {
+export async function drawShape(data) {
     const { container, context, particle, radius, opacity, delta, strokeWidth, transformData } = data, minStrokeWidth = 0;
     if (!particle.shape) {
         return;
@@ -95,7 +95,7 @@ export function drawShape(data) {
         return;
     }
     context.beginPath();
-    drawer.draw({
+    await drawer.draw({
         context,
         particle,
         radius,
@@ -114,7 +114,7 @@ export function drawShape(data) {
         context.fill();
     }
 }
-export function drawShapeAfterDraw(data) {
+export async function drawShapeAfterDraw(data) {
     const { container, context, particle, radius, opacity, delta, transformData } = data;
     if (!particle.shape) {
         return;
@@ -123,7 +123,7 @@ export function drawShapeAfterDraw(data) {
     if (!drawer?.afterDraw) {
         return;
     }
-    drawer.afterDraw({
+    await drawer.afterDraw({
         context,
         particle,
         radius,
@@ -133,17 +133,17 @@ export function drawShapeAfterDraw(data) {
         transformData: { ...transformData },
     });
 }
-export function drawPlugin(context, plugin, delta) {
+export async function drawPlugin(context, plugin, delta) {
     if (!plugin.draw) {
         return;
     }
-    plugin.draw(context, delta);
+    await plugin.draw(context, delta);
 }
-export function drawParticlePlugin(context, plugin, particle, delta) {
+export async function drawParticlePlugin(context, plugin, particle, delta) {
     if (!plugin.drawParticle) {
         return;
     }
-    plugin.drawParticle(context, particle, delta);
+    await plugin.drawParticle(context, particle, delta);
 }
 export function alterHsl(color, type, value) {
     const lFactor = 1;

package/cjs/Core/Canvas.js

@@ -11,6 +11,26 @@ function setTransformValue(factor, newFactor, key) {
         factor[key] = (factor[key] ?? defaultValue) * newValue;
     }
 }
+function setStyle(canvas, style, important = false) {
+    if (!style) {
+        return;
+    }
+    const element = canvas;
+    if (!element) {
+        return;
+    }
+    const elementStyle = element.style;
+    if (!elementStyle) {
+        return;
+    }
+    for (const key in style) {
+        const value = style[key];
+        if (!value) {
+            continue;
+        }
+        elementStyle.setProperty(key, value, important ? "important" : "");
+    }
+}
 class Canvas {
     constructor(container) {
         this.container = container;
@@ -59,14 +79,36 @@ class Canvas {
             }
             return [fColor, sColor];
         };
-        this._initCover = () => {
-            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color, coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(color);
-            if (coverRgb) {
-                const coverColor = {
-                    ...coverRgb,
-                    a: cover.opacity,
-                };
-                this._coverColorStyle = (0, ColorUtils_js_1.getStyleFromRgb)(coverColor, coverColor.a);
+        this._initCover = async () => {
+            const options = this.container.actualOptions, cover = options.backgroundMask.cover, color = cover.color;
+            if (color) {
+                const coverRgb = (0, ColorUtils_js_1.rangeColorToRgb)(color);
+                if (coverRgb) {
+                    const coverColor = {
+                        ...coverRgb,
+                        a: cover.opacity,
+                    };
+                    this._coverColorStyle = (0, ColorUtils_js_1.getStyleFromRgb)(coverColor, coverColor.a);
+                }
+            }
+            else {
+                await new Promise((resolve, reject) => {
+                    if (!cover.image) {
+                        return;
+                    }
+                    const img = document.createElement("img");
+                    img.addEventListener("load", () => {
+                        this._coverImage = {
+                            image: img,
+                            opacity: cover.opacity,
+                        };
+                        resolve();
+                    });
+                    img.addEventListener("error", (evt) => {
+                        reject(evt.error);
+                    });
+                    img.src = cover.image;
+                });
             }
         };
         this._initStyle = () => {
@@ -151,13 +193,7 @@ class Canvas {
             if (!(element && originalStyle)) {
                 return;
             }
-            const style = element.style;
-            style.position = originalStyle.position;
-            style.zIndex = originalStyle.zIndex;
-            style.top = originalStyle.top;
-            style.left = originalStyle.left;
-            style.width = originalStyle.width;
-            style.height = originalStyle.height;
+            setStyle(element, originalStyle);
         };
         this._safeMutationObserver = (callback) => {
             if (!this._mutationObserver) {
@@ -170,13 +206,15 @@ class Canvas {
             if (!element) {
                 return;
             }
-            const priority = "important", style = element.style, radix = 10;
-            style.setProperty("position", "fixed", priority);
-            style.setProperty("z-index", this.container.actualOptions.fullScreen.zIndex.toString(radix), priority);
-            style.setProperty("top", "0", priority);
-            style.setProperty("left", "0", priority);
-            style.setProperty("width", "100%", priority);
-            style.setProperty("height", "100%", priority);
+            const radix = 10;
+            setStyle(element, {
+                position: "fixed",
+                zIndex: this.container.actualOptions.fullScreen.zIndex.toString(radix),
+                top: "0",
+                left: "0",
+                width: "100%",
+                height: "100%",
+            }, true);
         };
         this.size = {
             height: 0,
@@ -232,7 +270,14 @@ class Canvas {
         }
         return cb(ctx);
     }
-    drawParticle(particle, delta) {
+    drawAsync(cb) {
+        const ctx = this._context;
+        if (!ctx) {
+            return Promise.resolve(undefined);
+        }
+        return cb(ctx);
+    }
+    async drawParticle(particle, delta) {
         if (particle.spawning || particle.destroyed) {
             return;
         }
@@ -251,13 +296,13 @@ class Canvas {
         if (!fColor && !sColor) {
             return;
         }
-        this.draw((ctx) => {
+        await this.drawAsync(async (ctx) => {
             const container = this.container, options = container.actualOptions, zIndexOptions = particle.options.zIndex, zIndexFactorOffset = 1, zIndexFactor = zIndexFactorOffset - particle.zIndexFactor, zOpacityFactor = zIndexFactor ** zIndexOptions.opacityRate, defaultOpacity = 1, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? defaultOpacity, strokeOpacity = particle.strokeOpacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
                 fill: fColor ? (0, ColorUtils_js_1.getStyleFromHsl)(fColor, zOpacity) : undefined,
             };
             colorStyles.stroke = sColor ? (0, ColorUtils_js_1.getStyleFromHsl)(sColor, zStrokeOpacity) : colorStyles.fill;
             this._applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform);
-            (0, CanvasUtils_js_1.drawParticle)({
+            await (0, CanvasUtils_js_1.drawParticle)({
                 container,
                 context: ctx,
                 particle,
@@ -273,11 +318,11 @@ class Canvas {
             this._applyPostDrawUpdaters(particle);
         });
     }
-    drawParticlePlugin(plugin, particle, delta) {
-        this.draw((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
+    async drawParticlePlugin(plugin, particle, delta) {
+        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawParticlePlugin)(ctx, plugin, particle, delta));
     }
-    drawPlugin(plugin, delta) {
-        this.draw((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
+    async drawPlugin(plugin, delta) {
+        await this.drawAsync((ctx) => (0, CanvasUtils_js_1.drawPlugin)(ctx, plugin, delta));
     }
     async init() {
         this._safeMutationObserver((obs) => obs.disconnect());
@@ -290,7 +335,7 @@ class Canvas {
         });
         this.resize();
         this._initStyle();
-        this._initCover();
+        await this._initCover();
         try {
             await this._initTrail();
         }
@@ -380,7 +425,15 @@ class Canvas {
         this.draw((ctx) => {
             if (options.backgroundMask.enable && options.backgroundMask.cover) {
                 (0, CanvasUtils_js_1.clear)(ctx, this.size);
-                this._paintBase(this._coverColorStyle);
+                if (this._coverImage) {
+                    this._paintImage(this._coverImage.image, this._coverImage.opacity);
+                }
+                else if (this._coverColorStyle) {
+                    this._paintBase(this._coverColorStyle);
+                }
+                else {
+                    this._paintBase();
+                }
             }
             else {
                 this._paintBase();
@@ -422,7 +475,7 @@ class Canvas {
             return;
         }
         const container = this.container, needsRefresh = container.updateActualOptions();
-        container.particles.setDensity();
+        await container.particles.setDensity();
         this._applyResizePlugins();
         if (needsRefresh) {
             await container.refresh();