tsparticles 1.37.4 → 1.39.0

package/esm/Plugins/PolygonMask/pathseg.js

@@ -1033,9 +1033,9 @@
                 window.SVGPathElement.prototype.getPathSegAtLength = function (distance) {
                     if (distance === undefined || !isFinite(distance))
                         throw "Invalid arguments.";
-                    var measurementElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+                    const measurementElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
                     measurementElement.setAttribute("d", this.getAttribute("d"));
-                    var lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;
+                    let lastPathSegment = measurementElement.pathSegList.numberOfItems - 1;
                     if (lastPathSegment <= 0)
                         return 0;
                     do {
@@ -1103,7 +1103,7 @@
             window.SVGPathSegList.prototype._updateListFromPathMutations = function (mutationRecords) {
                 if (!this._pathElement)
                     return;
-                var hasPathMutations = false;
+                let hasPathMutations = false;
                 mutationRecords.forEach(function (record) {
                     if (record.attributeName == "d")
                         hasPathMutations = true;
@@ -1169,7 +1169,7 @@
             window.SVGPathSegList.prototype.removeItem = function (index) {
                 this._checkPathSynchronizedToList();
                 this._checkValidIndex(index);
-                var item = this._list[index];
+                const item = this._list[index];
                 this._list.splice(index, 1);
                 this._writeListToPath();
                 return item;
@@ -1185,8 +1185,8 @@
                 return newItem;
             };
             window.SVGPathSegList._pathSegArrayAsString = function (pathSegArray) {
-                var string = "";
-                var first = true;
+                let string = "";
+                let first = true;
                 pathSegArray.forEach(function (pathSeg) {
                     if (first) {
                         first = false;
@@ -1201,14 +1201,14 @@
             window.SVGPathSegList.prototype._parsePath = function (string) {
                 if (!string || string.length == 0)
                     return [];
-                var owningPathSegList = this;
-                var Builder = function () {
+                const owningPathSegList = this;
+                const Builder = function () {
                     this.pathSegList = [];
                 };
                 Builder.prototype.appendSegment = function (pathSeg) {
                     this.pathSegList.push(pathSeg);
                 };
-                var Source = function (string) {
+                const Source = function (string) {
                     this._string = string;
                     this._currentIndex = 0;
                     this._endIndex = this._string.length;
@@ -1216,9 +1216,13 @@
                     this._skipOptionalSpaces();
                 };
                 Source.prototype._isCurrentSpace = function () {
-                    var character = this._string[this._currentIndex];
+                    const character = this._string[this._currentIndex];
                     return (character <= " " &&
-                        (character == " " || character == "\n" || character == "\t" || character == "\r" || character == "\f"));
+                        (character == " " ||
+                            character == "\n" ||
+                            character == "\t" ||
+                            character == "\r" ||
+                            character == "\f"));
                 };
                 Source.prototype._skipOptionalSpaces = function () {
                     while (this._currentIndex < this._endIndex && this._isCurrentSpace())
@@ -1242,7 +1246,7 @@
                     return this._currentIndex < this._endIndex;
                 };
                 Source.prototype.peekSegmentType = function () {
-                    var lookahead = this._string[this._currentIndex];
+                    const lookahead = this._string[this._currentIndex];
                     return this._pathSegTypeFromChar(lookahead);
                 };
                 Source.prototype._pathSegTypeFromChar = function (lookahead) {
@@ -1291,7 +1295,10 @@
                     }
                 };
                 Source.prototype._nextCommandHelper = function (lookahead, previousCommand) {
-                    if ((lookahead == "+" || lookahead == "-" || lookahead == "." || (lookahead >= "0" && lookahead <= "9")) &&
+                    if ((lookahead == "+" ||
+                        lookahead == "-" ||
+                        lookahead == "." ||
+                        (lookahead >= "0" && lookahead <= "9")) &&
                         previousCommand != window.SVGPathSeg.PATHSEG_CLOSEPATH) {
                         if (previousCommand == window.SVGPathSeg.PATHSEG_MOVETO_ABS)
                             return window.SVGPathSeg.PATHSEG_LINETO_ABS;
@@ -1304,17 +1311,18 @@
                 Source.prototype.initialCommandIsMoveTo = function () {
                     if (!this.hasMoreData())
                         return true;
-                    var command = this.peekSegmentType();
-                    return command == window.SVGPathSeg.PATHSEG_MOVETO_ABS || command == window.SVGPathSeg.PATHSEG_MOVETO_REL;
+                    const command = this.peekSegmentType();
+                    return (command == window.SVGPathSeg.PATHSEG_MOVETO_ABS ||
+                        command == window.SVGPathSeg.PATHSEG_MOVETO_REL);
                 };
                 Source.prototype._parseNumber = function () {
-                    var exponent = 0;
-                    var integer = 0;
-                    var frac = 1;
-                    var decimal = 0;
-                    var sign = 1;
-                    var expsign = 1;
-                    var startIndex = this._currentIndex;
+                    let exponent = 0;
+                    let integer = 0;
+                    let frac = 1;
+                    let decimal = 0;
+                    let sign = 1;
+                    let expsign = 1;
+                    const startIndex = this._currentIndex;
                     this._skipOptionalSpaces();
                     if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) == "+")
                         this._currentIndex++;
@@ -1323,17 +1331,18 @@
                         sign = -1;
                     }
                     if (this._currentIndex == this._endIndex ||
-                        ((this._string.charAt(this._currentIndex) < "0" || this._string.charAt(this._currentIndex) > "9") &&
+                        ((this._string.charAt(this._currentIndex) < "0" ||
+                            this._string.charAt(this._currentIndex) > "9") &&
                             this._string.charAt(this._currentIndex) != "."))
                         return undefined;
-                    var startIntPartIndex = this._currentIndex;
+                    const startIntPartIndex = this._currentIndex;
                     while (this._currentIndex < this._endIndex &&
                         this._string.charAt(this._currentIndex) >= "0" &&
                         this._string.charAt(this._currentIndex) <= "9")
                         this._currentIndex++;
                     if (this._currentIndex != startIntPartIndex) {
-                        var scanIntPartIndex = this._currentIndex - 1;
-                        var multiplier = 1;
+                        let scanIntPartIndex = this._currentIndex - 1;
+                        let multiplier = 1;
                         while (scanIntPartIndex >= startIntPartIndex) {
                             integer += multiplier * (this._string.charAt(scanIntPartIndex--) - "0");
                             multiplier *= 10;
@@ -1355,7 +1364,8 @@
                     }
                     if (this._currentIndex != startIndex &&
                         this._currentIndex + 1 < this._endIndex &&
-                        (this._string.charAt(this._currentIndex) == "e" || this._string.charAt(this._currentIndex) == "E") &&
+                        (this._string.charAt(this._currentIndex) == "e" ||
+                            this._string.charAt(this._currentIndex) == "E") &&
                         this._string.charAt(this._currentIndex + 1) != "x" &&
                         this._string.charAt(this._currentIndex + 1) != "m") {
                         this._currentIndex++;
@@ -1378,7 +1388,7 @@
                             this._currentIndex++;
                         }
                     }
-                    var number = integer + decimal;
+                    let number = integer + decimal;
                     number *= sign;
                     if (exponent)
                         number *= Math.pow(10, expsign * exponent);
@@ -1390,8 +1400,8 @@
                 Source.prototype._parseArcFlag = function () {
                     if (this._currentIndex >= this._endIndex)
                         return undefined;
-                    var flag = false;
-                    var flagChar = this._string.charAt(this._currentIndex++);
+                    let flag = false;
+                    const flagChar = this._string.charAt(this._currentIndex++);
                     if (flagChar == "0")
                         flag = false;
                     else if (flagChar == "1")
@@ -1402,8 +1412,8 @@
                     return flag;
                 };
                 Source.prototype.parseSegment = function () {
-                    var lookahead = this._string[this._currentIndex];
-                    var command = this._pathSegTypeFromChar(lookahead);
+                    const lookahead = this._string[this._currentIndex];
+                    let command = this._pathSegTypeFromChar(lookahead);
                     if (command == window.SVGPathSeg.PATHSEG_UNKNOWN) {
                         if (this._previousCommand == window.SVGPathSeg.PATHSEG_UNKNOWN)
                             return null;
@@ -1415,6 +1425,7 @@
                         this._currentIndex++;
                     }
                     this._previousCommand = command;
+                    let points;
                     switch (command) {
                         case window.SVGPathSeg.PATHSEG_MOVETO_REL:
                             return new window.SVGPathSegMovetoRel(owningPathSegList, this._parseNumber(), this._parseNumber());
@@ -1436,7 +1447,7 @@
                             this._skipOptionalSpaces();
                             return new window.SVGPathSegClosePath(owningPathSegList);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x2: this._parseNumber(),
@@ -1446,7 +1457,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x2: this._parseNumber(),
@@ -1456,7 +1467,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
-                            var points = {
+                            points = {
                                 x2: this._parseNumber(),
                                 y2: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1464,7 +1475,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
-                            var points = {
+                            points = {
                                 x2: this._parseNumber(),
                                 y2: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1472,7 +1483,7 @@
                             };
                             return new window.SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2);
                         case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1480,7 +1491,7 @@
                             };
                             return new window.SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1);
                         case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 x: this._parseNumber(),
@@ -1492,7 +1503,7 @@
                         case window.SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
                             return new window.SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber());
                         case window.SVGPathSeg.PATHSEG_ARC_REL:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 arcAngle: this._parseNumber(),
@@ -1503,7 +1514,7 @@
                             };
                             return new window.SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep);
                         case window.SVGPathSeg.PATHSEG_ARC_ABS:
-                            var points = {
+                            points = {
                                 x1: this._parseNumber(),
                                 y1: this._parseNumber(),
                                 arcAngle: this._parseNumber(),
@@ -1517,12 +1528,12 @@
                             throw "Unknown path seg type.";
                     }
                 };
-                var builder = new Builder();
-                var source = new Source(string);
+                const builder = new Builder();
+                const source = new Source(string);
                 if (!source.initialCommandIsMoveTo())
                     return [];
                 while (source.hasMoreData()) {
-                    var pathSeg = source.parseSegment();
+                    const pathSeg = source.parseSegment();
                     if (!pathSeg)
                         return [];
                     builder.appendSegment(pathSeg);

package/esm/Shapes/Circle/CircleDrawer.d.ts

@@ -1,4 +1,4 @@
-import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
+import type { IParticle, IShapeDrawer } from "../../Core";
 export declare class CircleDrawer implements IShapeDrawer {
     getSidesCount(): number;
     draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number): void;

package/esm/Shapes/Circle/index.d.ts

@@ -1,2 +1,2 @@
-import type { Main } from "../../main";
-export declare function loadCircleShape(tsParticles: Main): Promise<void>;
+import type { Engine } from "../../engine";
+export declare function loadCircleShape(tsParticles: Engine): Promise<void>;

package/esm/Shapes/Image/ImageDrawer.d.ts

@@ -1,7 +1,5 @@
-import type { IParticle, IShapeDrawer } from "../../Core/Interfaces";
-import type { Container } from "../../Core/Container";
-import type { IImage } from "./Utils";
-import { Particle } from "../../Core/Particle";
+import type { Container, IShapeDrawer, Particle } from "../../Core";
+import type { IImage, IImageParticle } from "./Utils";
 interface ContainerImage {
     id: string;
     images: IImage[];
@@ -12,11 +10,9 @@ export declare class ImageDrawer implements IShapeDrawer {
     getSidesCount(): number;
     getImages(container: Container): ContainerImage;
     addImage(container: Container, image: IImage): void;
-    init(container: Container): Promise<void>;
     destroy(): void;
-    private loadImagesFromParticlesOptions;
     private loadImageShape;
-    draw(context: CanvasRenderingContext2D, particle: IParticle, radius: number, opacity: number): void;
+    draw(context: CanvasRenderingContext2D, particle: IImageParticle, radius: number, opacity: number): void;
     loadShape(particle: Particle): void;
 }
 export {};

package/esm/Shapes/Image/ImageDrawer.js

@@ -10,9 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _ImageDrawer_images;
-import { isInArray } from "../../Utils";
-import { ShapeType } from "../../Enums";
-import { downloadSvgImage, loadImage, replaceColorSvg } from "./Utils";
+import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
 export class ImageDrawer {
     constructor() {
         _ImageDrawer_images.set(this, void 0);
@@ -38,86 +36,31 @@ export class ImageDrawer {
         const containerImages = this.getImages(container);
         containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
     }
-    async init(container) {
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
-        await this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
-        for (const manualParticle of container.actualOptions.manualParticles) {
-            await this.loadImagesFromParticlesOptions(container, manualParticle.options);
-        }
-        const emitterOptions = container.actualOptions;
-        if (emitterOptions.emitters) {
-            if (emitterOptions.emitters instanceof Array) {
-                for (const emitter of emitterOptions.emitters) {
-                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
-                }
-            }
-            else {
-                await this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
-            }
-        }
-        const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
-        if (interactiveEmitters) {
-            if (interactiveEmitters instanceof Array) {
-                for (const emitter of interactiveEmitters) {
-                    await this.loadImagesFromParticlesOptions(container, emitter.particles);
-                }
-            }
-            else {
-                await this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
-            }
-        }
-    }
     destroy() {
         __classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
     }
-    async loadImagesFromParticlesOptions(container, options) {
-        var _a, _b, _c;
-        const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
-        if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
-            !shapeOptions.options ||
-            (!isInArray(ShapeType.image, shapeOptions.type) && !isInArray(ShapeType.images, shapeOptions.type))) {
-            return;
-        }
-        const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
-        if (idx >= 0) {
-            __classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
-        }
-        const imageOptions = (_a = shapeOptions.options[ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[ShapeType.image];
-        if (imageOptions instanceof Array) {
-            for (const optionsImage of imageOptions) {
-                await this.loadImageShape(container, optionsImage);
-            }
-        }
-        else {
-            await this.loadImageShape(container, imageOptions);
-        }
-        if (options === null || options === void 0 ? void 0 : options.groups) {
-            for (const groupName in options.groups) {
-                const group = options.groups[groupName];
-                await this.loadImagesFromParticlesOptions(container, group);
-            }
-        }
-        if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
-            await this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
-        }
-    }
     async loadImageShape(container, imageShape) {
+        const source = imageShape.src;
+        if (!source) {
+            throw new Error("Error tsParticles - No image.src");
+        }
         try {
+            const image = {
+                source: source,
+                type: source.substr(source.length - 3),
+                error: false,
+                loading: true,
+            };
+            this.addImage(container, image);
             const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
-            const image = await imageFunc(imageShape.src);
-            if (image) {
-                this.addImage(container, image);
-            }
+            await imageFunc(image);
         }
         catch (_a) {
-            console.warn(`tsParticles error - ${imageShape.src} not found`);
+            throw new Error(`tsParticles error - ${imageShape.src} not found`);
         }
     }
     draw(context, particle, radius, opacity) {
         var _a, _b;
-        if (!context) {
-            return;
-        }
         const image = particle.image;
         const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
         if (!element) {
@@ -137,64 +80,41 @@ export class ImageDrawer {
         }
     }
     loadShape(particle) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
         const images = this.getImages(particle.container).images;
         const imageData = particle.shapeData;
-        const image = (_a = images.find((t) => t.source === imageData.src)) !== null && _a !== void 0 ? _a : images[0];
-        const color = particle.getFillColor();
+        const image = images.find((t) => t.source === imageData.src);
         let imageRes;
         if (!image) {
+            this.loadImageShape(particle.container, imageData).then(() => {
+                this.loadShape(particle);
+            });
             return;
         }
-        if (image.svgData !== undefined && imageData.replaceColor && color) {
-            const svgColoredData = replaceColorSvg(image, color, (_c = (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1);
-            const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
-            const domUrl = URL || window.URL || window.webkitURL || window;
-            const url = domUrl.createObjectURL(svg);
-            const img = new Image();
-            imageRes = {
-                data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
-                ratio: imageData.width / imageData.height,
-                replaceColor: (_d = imageData.replaceColor) !== null && _d !== void 0 ? _d : imageData.replace_color,
-                source: imageData.src,
-            };
-            img.addEventListener("load", () => {
-                const pImage = particle.image;
-                if (pImage) {
-                    pImage.loaded = true;
-                    image.element = img;
-                }
-                domUrl.revokeObjectURL(url);
-            });
-            img.addEventListener("error", () => {
-                domUrl.revokeObjectURL(url);
-                loadImage(imageData.src).then((img2) => {
-                    const pImage = particle.image;
-                    if (pImage) {
-                        image.element = img2 === null || img2 === void 0 ? void 0 : img2.element;
-                        pImage.loaded = true;
-                    }
-                });
-            });
-            img.src = url;
+        if (image.error) {
+            return;
+        }
+        const color = particle.getFillColor();
+        if (image.svgData && imageData.replaceColor && color) {
+            imageRes = replaceImageColor(image, imageData, color, particle);
         }
         else {
             imageRes = {
                 data: image,
                 loaded: true,
                 ratio: imageData.width / imageData.height,
-                replaceColor: (_e = imageData.replaceColor) !== null && _e !== void 0 ? _e : imageData.replace_color,
+                replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
                 source: imageData.src,
             };
         }
         if (!imageRes.ratio) {
             imageRes.ratio = 1;
         }
-        const fill = (_f = imageData.fill) !== null && _f !== void 0 ? _f : particle.fill;
-        const close = (_g = imageData.close) !== null && _g !== void 0 ? _g : particle.close;
+        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill;
+        const close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close;
         const imageShape = {
             image: imageRes,
             fill,

package/esm/Shapes/Image/Utils.d.ts

@@ -1,9 +1,12 @@
-import type { IHsl, IParticle } from "../../Core/Interfaces";
+import type { IHsl, IParticle, Particle } from "../../Core";
+import type { IImageShape } from "../../Options/Interfaces/Particles/Shape/IImageShape";
 export interface IImage {
     source: string;
     type: string;
     element?: HTMLImageElement;
     svgData?: string;
+    error: boolean;
+    loading: boolean;
 }
 export interface IParticleImage {
     source: string;
@@ -18,8 +21,8 @@ export interface ContainerImage {
     images: IImage[];
 }
 export declare type IImageParticle = IParticle & {
-    image: IParticleImage;
+    image?: IParticleImage;
 };
-export declare function loadImage(source: string): Promise<IImage | undefined>;
-export declare function downloadSvgImage(source: string): Promise<IImage | undefined>;
-export declare function replaceColorSvg(imageShape: IImage, color: IHsl, opacity: number): string;
+export declare function loadImage(image: IImage): Promise<void>;
+export declare function downloadSvgImage(image: IImage): Promise<void>;
+export declare function replaceImageColor(image: IImage, imageData: IImageShape, color: IHsl, particle: Particle): IParticleImage;

package/esm/Shapes/Image/Utils.js

@@ -1,52 +1,83 @@
 import { getStyleFromHsl } from "../../Utils";
-export function loadImage(source) {
-    return new Promise((resolve, reject) => {
-        if (!source) {
-            reject("Error tsParticles - No image.src");
-            return;
-        }
-        const image = {
-            source: source,
-            type: source.substr(source.length - 3),
-        };
+const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
+function replaceColorSvg(imageShape, color, opacity) {
+    const { svgData } = imageShape;
+    if (!svgData) {
+        return "";
+    }
+    const colorStyle = getStyleFromHsl(color, opacity);
+    if (svgData.includes("fill")) {
+        return svgData.replace(currentColorRegex, () => colorStyle);
+    }
+    const preFillIndex = svgData.indexOf(">");
+    return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+}
+export async function loadImage(image) {
+    return new Promise((resolve) => {
+        image.loading = true;
         const img = new Image();
         img.addEventListener("load", () => {
             image.element = img;
-            resolve(image);
+            image.loading = false;
+            resolve();
         });
         img.addEventListener("error", () => {
-            reject(`Error tsParticles - loading image: ${source}`);
+            image.error = true;
+            image.loading = false;
+            console.error(`Error tsParticles - loading image: ${image.source}`);
+            resolve();
         });
-        img.src = source;
+        img.src = image.source;
     });
 }
-export async function downloadSvgImage(source) {
-    if (!source) {
-        throw new Error("Error tsParticles - No image.src");
-    }
-    const image = {
-        source: source,
-        type: source.substr(source.length - 3),
-    };
+export async function downloadSvgImage(image) {
     if (image.type !== "svg") {
-        return loadImage(source);
+        await loadImage(image);
+        return;
     }
+    image.loading = true;
     const response = await fetch(image.source);
+    image.loading = false;
     if (!response.ok) {
-        throw new Error("Error tsParticles - Image not found");
+        console.error("Error tsParticles - Image not found");
+        image.error = true;
     }
-    image.svgData = await response.text();
-    return image;
-}
-export function replaceColorSvg(imageShape, color, opacity) {
-    const { svgData } = imageShape;
-    if (!svgData) {
-        return "";
-    }
-    if (svgData.includes("fill")) {
-        const currentColor = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
-        return svgData.replace(currentColor, () => getStyleFromHsl(color, opacity));
+    if (!image.error) {
+        image.svgData = await response.text();
     }
-    const preFillIndex = svgData.indexOf(">");
-    return `${svgData.substring(0, preFillIndex)} fill="${getStyleFromHsl(color, opacity)}"${svgData.substring(preFillIndex)}`;
+}
+export function replaceImageColor(image, imageData, color, particle) {
+    var _a, _b, _c;
+    const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1);
+    const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
+    const domUrl = URL || window.URL || window.webkitURL || window;
+    const url = domUrl.createObjectURL(svg);
+    const img = new Image();
+    const imageRes = {
+        data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        ratio: imageData.width / imageData.height,
+        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        source: imageData.src,
+    };
+    img.addEventListener("load", () => {
+        const pImage = particle.image;
+        if (pImage) {
+            pImage.loaded = true;
+            image.element = img;
+        }
+        domUrl.revokeObjectURL(url);
+    });
+    img.addEventListener("error", () => {
+        domUrl.revokeObjectURL(url);
+        const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+        loadImage(img2).then(() => {
+            const pImage = particle.image;
+            if (pImage) {
+                image.element = img2.element;
+                pImage.loaded = true;
+            }
+        });
+    });
+    img.src = url;
+    return imageRes;
 }

package/esm/Shapes/Image/index.d.ts

@@ -1,2 +1,2 @@
-import type { Main } from "../../main";
-export declare function loadImageShape(tsParticles: Main): Promise<void>;
+import type { Engine } from "../../engine";
+export declare function loadImageShape(tsParticles: Engine): Promise<void>;