tsparticles-shape-image - npm Package Compare versions

Comparing version 2.1.4 to 2.2.0

browser/ImageDrawer.js

@@ -52,8 +52,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     draw(context, particle, radius, opacity) {
-        var _a, _b;
-        const image = particle.image, element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
+        var _a;
+        const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
         if (!element) {
             return;
         }
-        const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1, pos = {
+        const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
             x: -radius,
@@ -91,15 +91,9 @@ y: -radius,
     }
-    /**
-     * Loads the image shape to the given particle
-     * @param particle the particle loading the image shape
-     */
     loadShape(particle) {
-        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        const images = this.getImages(particle.container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
-        let imageRes;
+        const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(particle.container, imageData).then(() => {
+            this.loadImageShape(container, imageData).then(() => {
                 this.loadShape(particle);
@@ -112,26 +106,52 @@ });
         }
-        const color = particle.getFillColor();
-        if (image.svgData && imageData.replaceColor && color) {
-            imageRes = replaceImageColor(image, imageData, color, particle);
+    }
+    /**
+     * Loads the image shape to the given particle
+     * @param container the particles container
+     * @param particle the particle loading the image shape
+     */
+    particleInit(container, particle) {
+        var _a;
+        if (particle.shape !== "image" && particle.shape !== "images") {
+            return;
         }
-        else {
-            imageRes = {
-                data: image,
-                loaded: true,
-                ratio: imageData.width / imageData.height,
-                replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
-                source: imageData.src,
-            };
+        const images = this.getImages(container).images, imageData = particle.shapeData, color = particle.getFillColor(), replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color, image = images.find((t) => t.source === imageData.src);
+        if (!image) {
+            return;
         }
-        if (!imageRes.ratio) {
-            imageRes.ratio = 1;
+        if (image.loading) {
+            setTimeout(() => {
+                this.particleInit(container, particle);
+            });
+            return;
         }
-        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill, close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close, imageShape = {
-            image: imageRes,
-            fill,
-            close,
-        };
-        particle.image = imageShape.image;
-        particle.fill = imageShape.fill;
-        particle.close = imageShape.close;
+        (async () => {
+            var _a, _b;
+            let imageRes;
+            if (image.svgData && replaceColor && color) {
+                imageRes = await replaceImageColor(image, imageData, color, particle);
+            }
+            else {
+                imageRes = {
+                    color,
+                    data: image,
+                    element: image.element,
+                    loaded: true,
+                    ratio: imageData.width / imageData.height,
+                    replaceColor: replaceColor,
+                    source: imageData.src,
+                };
+            }
+            if (!imageRes.ratio) {
+                imageRes.ratio = 1;
+            }
+            const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+                image: imageRes,
+                fill,
+                close,
+            };
+            particle.image = imageShape.image;
+            particle.fill = imageShape.fill;
+            particle.close = imageShape.close;
+        })();
     }
@@ -145,2 +165,3 @@ /**
     async loadImageShape(container, imageShape) {
+        var _a;
         const source = imageShape.src;
@@ -153,3 +174,3 @@ if (!source) {
                 source: source,
-                type: source.substr(source.length - 3),
+                type: source.substring(source.length - 3),
                 error: false,
@@ -159,6 +180,6 @@ loading: true,
             this.addImage(container, image);
-            const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+            const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
             await imageFunc(image);
         }
-        catch (_a) {
+        catch (_b) {
             throw new Error(`tsParticles error - ${imageShape.src} not found`);
@@ -165,0 +186,0 @@ }

browser/Utils.js

@@ -34,4 +34,4 @@ import { getStyleFromHsl } from "tsparticles-engine";
         const img = new Image();
+        image.element = img;
         img.addEventListener("load", () => {
-            image.element = img;
             image.loading = false;
@@ -41,2 +41,3 @@ resolve();
         img.addEventListener("error", () => {
+            image.element = undefined;
             image.error = true;
@@ -61,3 +62,2 @@ image.loading = false;
     const response = await fetch(image.source);
-    image.loading = false;
     if (!response.ok) {
@@ -70,2 +70,3 @@ console.error("Error tsParticles - Image not found");
     }
+    image.loading = false;
 }
@@ -81,4 +82,6 @@ /**
     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), svg = new Blob([svgColoredData], { type: "image/svg+xml" }) /* prepare to create img with colored svg */, domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image() /* create particle img obj */, imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1), imageRes = {
+        color,
         data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        loaded: false,
         ratio: imageData.width / imageData.height,
@@ -88,24 +91,22 @@ replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
     };
-    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 });
-        // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
-        loadImage(img2).then(() => {
-            const pImage = particle.image;
-            if (pImage) {
-                image.element = img2.element;
-                pImage.loaded = true;
-            }
+    return new Promise((resolve) => {
+        const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), // prepare to create img with colored svg
+        domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
+        img.addEventListener("load", () => {
+            imageRes.loaded = true;
+            imageRes.element = img;
+            resolve(imageRes);
+            domUrl.revokeObjectURL(url);
         });
+        img.addEventListener("error", async () => {
+            domUrl.revokeObjectURL(url);
+            const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+            // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
+            await loadImage(img2);
+            imageRes.loaded = true;
+            imageRes.element = img2.element;
+            resolve(imageRes);
+        });
+        img.src = url;
     });
-    img.src = url;
-    return imageRes;
 }

cjs/ImageDrawer.js

@@ -30,8 +30,8 @@ "use strict";
     draw(context, particle, radius, opacity) {
-        var _a, _b;
-        const image = particle.image, element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
+        var _a;
+        const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
         if (!element) {
             return;
         }
-        const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1, pos = {
+        const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
             x: -radius,
@@ -61,10 +61,8 @@ y: -radius,
     loadShape(particle) {
-        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        const images = this.getImages(particle.container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
-        let imageRes;
+        const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(particle.container, imageData).then(() => {
+            this.loadImageShape(container, imageData).then(() => {
                 this.loadShape(particle);
@@ -77,28 +75,50 @@ });
         }
-        const color = particle.getFillColor();
-        if (image.svgData && imageData.replaceColor && color) {
-            imageRes = (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+    }
+    particleInit(container, particle) {
+        var _a;
+        if (particle.shape !== "image" && particle.shape !== "images") {
+            return;
         }
-        else {
-            imageRes = {
-                data: image,
-                loaded: true,
-                ratio: imageData.width / imageData.height,
-                replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
-                source: imageData.src,
-            };
+        const images = this.getImages(container).images, imageData = particle.shapeData, color = particle.getFillColor(), replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color, image = images.find((t) => t.source === imageData.src);
+        if (!image) {
+            return;
         }
-        if (!imageRes.ratio) {
-            imageRes.ratio = 1;
+        if (image.loading) {
+            setTimeout(() => {
+                this.particleInit(container, particle);
+            });
+            return;
         }
-        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill, close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close, imageShape = {
-            image: imageRes,
-            fill,
-            close,
-        };
-        particle.image = imageShape.image;
-        particle.fill = imageShape.fill;
-        particle.close = imageShape.close;
+        (async () => {
+            var _a, _b;
+            let imageRes;
+            if (image.svgData && replaceColor && color) {
+                imageRes = await (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+            }
+            else {
+                imageRes = {
+                    color,
+                    data: image,
+                    element: image.element,
+                    loaded: true,
+                    ratio: imageData.width / imageData.height,
+                    replaceColor: replaceColor,
+                    source: imageData.src,
+                };
+            }
+            if (!imageRes.ratio) {
+                imageRes.ratio = 1;
+            }
+            const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+                image: imageRes,
+                fill,
+                close,
+            };
+            particle.image = imageShape.image;
+            particle.fill = imageShape.fill;
+            particle.close = imageShape.close;
+        })();
     }
     async loadImageShape(container, imageShape) {
+        var _a;
         const source = imageShape.src;
@@ -111,3 +131,3 @@ if (!source) {
                 source: source,
-                type: source.substr(source.length - 3),
+                type: source.substring(source.length - 3),
                 error: false,
@@ -117,6 +137,6 @@ loading: true,
             this.addImage(container, image);
-            const imageFunc = imageShape.replaceColor ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+            const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? Utils_1.downloadSvgImage : Utils_1.loadImage;
             await imageFunc(image);
         }
-        catch (_a) {
+        catch (_b) {
             throw new Error(`tsParticles error - ${imageShape.src} not found`);
@@ -123,0 +143,0 @@ }

cjs/Utils.js

@@ -22,4 +22,4 @@ "use strict";
         const img = new Image();
+        image.element = img;
         img.addEventListener("load", () => {
-            image.element = img;
             image.loading = false;
@@ -29,2 +29,3 @@ resolve();
         img.addEventListener("error", () => {
+            image.element = undefined;
             image.error = true;
@@ -46,3 +47,2 @@ image.loading = false;
     const response = await fetch(image.source);
-    image.loading = false;
     if (!response.ok) {
@@ -55,2 +55,3 @@ console.error("Error tsParticles - Image not found");
     }
+    image.loading = false;
 }
@@ -60,4 +61,6 @@ exports.downloadSvgImage = downloadSvgImage;
     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), svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image(), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1), imageRes = {
+        color,
         data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        loaded: false,
         ratio: imageData.width / imageData.height,
@@ -67,24 +70,21 @@ replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
     };
-    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;
-            }
+    return new Promise((resolve) => {
+        const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
+        img.addEventListener("load", () => {
+            imageRes.loaded = true;
+            imageRes.element = img;
+            resolve(imageRes);
+            domUrl.revokeObjectURL(url);
         });
+        img.addEventListener("error", async () => {
+            domUrl.revokeObjectURL(url);
+            const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+            await loadImage(img2);
+            imageRes.loaded = true;
+            imageRes.element = img2.element;
+            resolve(imageRes);
+        });
+        img.src = url;
     });
-    img.src = url;
-    return imageRes;
 }
 exports.replaceImageColor = replaceImageColor;

esm/ImageDrawer.js

@@ -27,8 +27,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     draw(context, particle, radius, opacity) {
-        var _a, _b;
-        const image = particle.image, element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
+        var _a;
+        const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
         if (!element) {
             return;
         }
-        const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1, pos = {
+        const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
             x: -radius,
@@ -58,10 +58,8 @@ y: -radius,
     loadShape(particle) {
-        var _a, _b, _c;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        const images = this.getImages(particle.container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
-        let imageRes;
+        const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(particle.container, imageData).then(() => {
+            this.loadImageShape(container, imageData).then(() => {
                 this.loadShape(particle);
@@ -74,28 +72,50 @@ });
         }
-        const color = particle.getFillColor();
-        if (image.svgData && imageData.replaceColor && color) {
-            imageRes = replaceImageColor(image, imageData, color, particle);
+    }
+    particleInit(container, particle) {
+        var _a;
+        if (particle.shape !== "image" && particle.shape !== "images") {
+            return;
         }
-        else {
-            imageRes = {
-                data: image,
-                loaded: true,
-                ratio: imageData.width / imageData.height,
-                replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
-                source: imageData.src,
-            };
+        const images = this.getImages(container).images, imageData = particle.shapeData, color = particle.getFillColor(), replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color, image = images.find((t) => t.source === imageData.src);
+        if (!image) {
+            return;
         }
-        if (!imageRes.ratio) {
-            imageRes.ratio = 1;
+        if (image.loading) {
+            setTimeout(() => {
+                this.particleInit(container, particle);
+            });
+            return;
         }
-        const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill, close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close, imageShape = {
-            image: imageRes,
-            fill,
-            close,
-        };
-        particle.image = imageShape.image;
-        particle.fill = imageShape.fill;
-        particle.close = imageShape.close;
+        (async () => {
+            var _a, _b;
+            let imageRes;
+            if (image.svgData && replaceColor && color) {
+                imageRes = await replaceImageColor(image, imageData, color, particle);
+            }
+            else {
+                imageRes = {
+                    color,
+                    data: image,
+                    element: image.element,
+                    loaded: true,
+                    ratio: imageData.width / imageData.height,
+                    replaceColor: replaceColor,
+                    source: imageData.src,
+                };
+            }
+            if (!imageRes.ratio) {
+                imageRes.ratio = 1;
+            }
+            const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+                image: imageRes,
+                fill,
+                close,
+            };
+            particle.image = imageShape.image;
+            particle.fill = imageShape.fill;
+            particle.close = imageShape.close;
+        })();
     }
     async loadImageShape(container, imageShape) {
+        var _a;
         const source = imageShape.src;
@@ -108,3 +128,3 @@ if (!source) {
                 source: source,
-                type: source.substr(source.length - 3),
+                type: source.substring(source.length - 3),
                 error: false,
@@ -114,6 +134,6 @@ loading: true,
             this.addImage(container, image);
-            const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+            const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
             await imageFunc(image);
         }
-        catch (_a) {
+        catch (_b) {
             throw new Error(`tsParticles error - ${imageShape.src} not found`);
@@ -120,0 +140,0 @@ }

esm/Utils.js

@@ -19,4 +19,4 @@ import { getStyleFromHsl } from "tsparticles-engine";
         const img = new Image();
+        image.element = img;
         img.addEventListener("load", () => {
-            image.element = img;
             image.loading = false;
@@ -26,2 +26,3 @@ resolve();
         img.addEventListener("error", () => {
+            image.element = undefined;
             image.error = true;
@@ -42,3 +43,2 @@ image.loading = false;
     const response = await fetch(image.source);
-    image.loading = false;
     if (!response.ok) {
@@ -51,7 +51,10 @@ console.error("Error tsParticles - Image not found");
     }
+    image.loading = false;
 }
 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), svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image(), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1), imageRes = {
+        color,
         data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        loaded: false,
         ratio: imageData.width / imageData.height,
@@ -61,23 +64,20 @@ replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
     };
-    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;
-            }
+    return new Promise((resolve) => {
+        const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
+        img.addEventListener("load", () => {
+            imageRes.loaded = true;
+            imageRes.element = img;
+            resolve(imageRes);
+            domUrl.revokeObjectURL(url);
         });
+        img.addEventListener("error", async () => {
+            domUrl.revokeObjectURL(url);
+            const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+            await loadImage(img2);
+            imageRes.loaded = true;
+            imageRes.element = img2.element;
+            resolve(imageRes);
+        });
+        img.src = url;
     });
-    img.src = url;
-    return imageRes;
 }

package.json

 {
   "name": "tsparticles-shape-image",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "description": "tsParticles image shape",
-  "homepage": "https://particles.js.org/",
+  "homepage": "https://particles.js.org",
   "repository": {
@@ -36,3 +36,3 @@ "type": "git",
   ],
-  "author": "Matteo Bruni",
+  "author": "Matteo Bruni <[e-mail]>",
   "license": "MIT",
@@ -48,4 +48,4 @@ "bugs": {
   "dependencies": {
-    "tsparticles-engine": "^2.1.4"
+    "tsparticles-engine": "^2.2.0"
   }
 }

README.md

@@ -7,3 +7,3 @@ [![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
 [![npmjs](https://badge.fury.io/js/tsparticles-shape-image.svg)](https://www.npmjs.com/package/tsparticles-shape-image)
-[![npmjs](https://img.shields.io/npm/dt/tsparticles-shape-image)](https://www.npmjs.com/package/tsparticles-shape-image)
+[![npmjs](https://img.shields.io/npm/dt/tsparticles-shape-image)](https://www.npmjs.com/package/tsparticles-shape-image) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
 
@@ -10,0 +10,0 @@ [tsParticles](https://github.com/matteobruni/tsparticles) additional image shape.

tsparticles.shape.image.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.1.4
+ * v2.2.0
  */
@@ -144,4 +144,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
     const img = new Image();
+    image.element = img;
     img.addEventListener("load", () => {
-      image.element = img;
       image.loading = false;
@@ -151,2 +151,3 @@ resolve();
     img.addEventListener("error", () => {
+      image.element = undefined;
       image.error = true;
@@ -173,3 +174,2 @@ image.loading = false;
   const response = await fetch(image.source);
-  image.loading = false;
 
@@ -184,2 +184,4 @@ if (!response.ok) {
   }
+
+  image.loading = false;
 }
@@ -198,16 +200,8 @@ /**
   const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1),
-        svg = new Blob([svgColoredData], {
-    type: "image/svg+xml"
-  })
-  /* prepare to create img with colored svg */
-  ,
-        domUrl = URL || window.URL || window.webkitURL || window,
-        url = domUrl.createObjectURL(svg),
-        img = new Image()
-  /* create particle img obj */
-  ,
         imageRes = {
+    color,
     data: Object.assign(Object.assign({}, image), {
       svgData: svgColoredData
     }),
+    loaded: false,
     ratio: imageData.width / imageData.height,
@@ -217,30 +211,30 @@ replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
   };
-  img.addEventListener("load", () => {
-    const pImage = particle.image;
+  return new Promise(resolve => {
+    const svg = new Blob([svgColoredData], {
+      type: "image/svg+xml"
+    }),
+          // prepare to create img with colored svg
+    domUrl = URL || window.URL || window.webkitURL || window,
+          url = domUrl.createObjectURL(svg),
+          img = new Image();
+    img.addEventListener("load", () => {
+      imageRes.loaded = true;
+      imageRes.element = img;
+      resolve(imageRes);
+      domUrl.revokeObjectURL(url);
+    });
+    img.addEventListener("error", async () => {
+      domUrl.revokeObjectURL(url);
+      const img2 = Object.assign(Object.assign({}, image), {
+        error: false,
+        loading: true
+      }); // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
 
-    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
-    }); // deepcode ignore PromiseNotCaughtGeneral: catch can be ignored
-
-    loadImage(img2).then(() => {
-      const pImage = particle.image;
-
-      if (pImage) {
-        image.element = img2.element;
-        pImage.loaded = true;
-      }
+      await loadImage(img2);
+      imageRes.loaded = true;
+      imageRes.element = img2.element;
+      resolve(imageRes);
     });
+    img.src = url;
   });
-  img.src = url;
-  return imageRes;
 }
@@ -310,6 +304,6 @@ ;// CONCATENATED MODULE: ./dist/browser/ImageDrawer.js
   draw(context, particle, radius, opacity) {
-    var _a, _b;
+    var _a;
 
     const image = particle.image,
-          element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
+          element = image === null || image === void 0 ? void 0 : image.element;
 
@@ -320,3 +314,3 @@ if (!element) {
 
-    const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1,
+    const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1,
           pos = {
@@ -360,11 +354,4 @@ x: -radius,
   }
-  /**
-   * Loads the image shape to the given particle
-   * @param particle the particle loading the image shape
-   */
 
-
   loadShape(particle) {
-    var _a, _b, _c;
-
     if (particle.shape !== "image" && particle.shape !== "images") {
@@ -374,9 +361,9 @@ return;
 
-    const images = this.getImages(particle.container).images,
+    const container = particle.container,
+          images = this.getImages(container).images,
           imageData = particle.shapeData,
           image = images.find(t => t.source === imageData.src);
-    let imageRes;
 
     if (!image) {
-      this.loadImageShape(particle.container, imageData).then(() => {
+      this.loadImageShape(container, imageData).then(() => {
         this.loadShape(particle);
@@ -390,31 +377,68 @@ });
     }
+  }
+  /**
+   * Loads the image shape to the given particle
+   * @param container the particles container
+   * @param particle the particle loading the image shape
+   */
 
-    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: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
-        source: imageData.src
-      };
+  particleInit(container, particle) {
+    var _a;
+
+    if (particle.shape !== "image" && particle.shape !== "images") {
+      return;
     }
 
-    if (!imageRes.ratio) {
-      imageRes.ratio = 1;
+    const images = this.getImages(container).images,
+          imageData = particle.shapeData,
+          color = particle.getFillColor(),
+          replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
+          image = images.find(t => t.source === imageData.src);
+
+    if (!image) {
+      return;
     }
 
-    const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill,
-          close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close,
-          imageShape = {
-      image: imageRes,
-      fill,
-      close
-    };
-    particle.image = imageShape.image;
-    particle.fill = imageShape.fill;
-    particle.close = imageShape.close;
+    if (image.loading) {
+      setTimeout(() => {
+        this.particleInit(container, particle);
+      });
+      return;
+    }
+
+    (async () => {
+      var _a, _b;
+
+      let imageRes;
+
+      if (image.svgData && replaceColor && color) {
+        imageRes = await replaceImageColor(image, imageData, color, particle);
+      } else {
+        imageRes = {
+          color,
+          data: image,
+          element: image.element,
+          loaded: true,
+          ratio: imageData.width / imageData.height,
+          replaceColor: replaceColor,
+          source: imageData.src
+        };
+      }
+
+      if (!imageRes.ratio) {
+        imageRes.ratio = 1;
+      }
+
+      const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill,
+            close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close,
+            imageShape = {
+        image: imageRes,
+        fill,
+        close
+      };
+      particle.image = imageShape.image;
+      particle.fill = imageShape.fill;
+      particle.close = imageShape.close;
+    })();
   }
@@ -430,2 +454,4 @@ /**
   async loadImageShape(container, imageShape) {
+    var _a;
+
     const source = imageShape.src;
@@ -440,3 +466,3 @@
         source: source,
-        type: source.substr(source.length - 3),
+        type: source.substring(source.length - 3),
         error: false,
@@ -446,5 +472,5 @@ loading: true
       this.addImage(container, image);
-      const imageFunc = imageShape.replaceColor ? downloadSvgImage : loadImage;
+      const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
       await imageFunc(image);
-    } catch (_a) {
+    } catch (_b) {
       throw new Error(`tsParticles error - ${imageShape.src} not found`);
@@ -451,0 +477,0 @@ }

tsparticles.shape.image.min.js

@@ -1,2 +0,2 @@
-/*! tsParticles Image Shape v2.1.4 by Matteo Bruni */
-!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("tsparticles-engine"));else if("function"==typeof define&&define.amd)define(["tsparticles-engine"],r);else{var t="object"==typeof exports?r(require("tsparticles-engine")):r(e.window);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,(e=>(()=>{"use strict";var r={818:r=>{r.exports=e}},t={};function o(e){var a=t[e];if(void 0!==a)return a.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a),o.d(a,{loadImageShape:()=>u});var e=o(818);const r=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function t(e){return new Promise((r=>{e.loading=!0;const t=new Image;t.addEventListener("load",(()=>{e.element=t,e.loading=!1,r()})),t.addEventListener("error",(()=>{e.error=!0,e.loading=!1,console.error(`Error tsParticles - loading image: ${e.source}`),r()})),t.src=e.source}))}async function i(e){if("svg"!==e.type)return void await t(e);e.loading=!0;const r=await fetch(e.source);e.loading=!1,r.ok||(console.error("Error tsParticles - Image not found"),e.error=!0),e.error||(e.svgData=await r.text())}function n(o,a,i,n){var s,l,c;const d=function(t,o,a){const{svgData:i}=t;if(!i)return"";const n=(0,e.getStyleFromHsl)(o,a);if(i.includes("fill"))return i.replace(r,(()=>n));const s=i.indexOf(">");return`${i.substring(0,s)} fill="${n}"${i.substring(s)}`}(o,i,null!==(l=null===(s=n.opacity)||void 0===s?void 0:s.value)&&void 0!==l?l:1),u=new Blob([d],{type:"image/svg+xml"}),g=URL||window.URL||window.webkitURL||window,f=g.createObjectURL(u),p=new Image,h={data:Object.assign(Object.assign({},o),{svgData:d}),ratio:a.width/a.height,replaceColor:null!==(c=a.replaceColor)&&void 0!==c?c:a.replace_color,source:a.src};return p.addEventListener("load",(()=>{const e=n.image;e&&(e.loaded=!0,o.element=p),g.revokeObjectURL(f)})),p.addEventListener("error",(()=>{g.revokeObjectURL(f);const e=Object.assign(Object.assign({},o),{error:!1,loading:!0});t(e).then((()=>{const r=n.image;r&&(o.element=e.element,r.loaded=!0)}))})),p.src=f,h}var s,l=function(e,r,t,o,a){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!a:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?a.call(e,t):a?a.value=t:r.set(e,t),t},c=function(e,r,t,o){if("a"===t&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?e!==r||!o:!r.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?o:"a"===t?o.call(e):o?o.value:r.get(e)};class d{constructor(){s.set(this,void 0),l(this,s,[],"f")}addImage(e,r){const t=this.getImages(e);null==t||t.images.push(r)}destroy(){l(this,s,[],"f")}draw(e,r,t,o){var a,i;const n=r.image,s=null===(a=null==n?void 0:n.data)||void 0===a?void 0:a.element;if(!s)return;const l=null!==(i=null==n?void 0:n.ratio)&&void 0!==i?i:1,c={x:-t,y:-t};e.globalAlpha=o,e.drawImage(s,c.x,c.y,2*t,2*t/l),e.globalAlpha=1}getImages(e){const r=c(this,s,"f").find((r=>r.id===e.id));return r||(c(this,s,"f").push({id:e.id,images:[]}),this.getImages(e))}getSidesCount(){return 12}loadShape(e){var r,t,o;if("image"!==e.shape&&"images"!==e.shape)return;const a=this.getImages(e.container).images,i=e.shapeData,s=a.find((e=>e.source===i.src));let l;if(!s)return void this.loadImageShape(e.container,i).then((()=>{this.loadShape(e)}));if(s.error)return;const c=e.getFillColor();l=s.svgData&&i.replaceColor&&c?n(s,i,c,e):{data:s,loaded:!0,ratio:i.width/i.height,replaceColor:null!==(r=i.replaceColor)&&void 0!==r?r:i.replace_color,source:i.src},l.ratio||(l.ratio=1);const d={image:l,fill:null!==(t=i.fill)&&void 0!==t?t:e.fill,close:null!==(o=i.close)&&void 0!==o?o:e.close};e.image=d.image,e.fill=d.fill,e.close=d.close}async loadImageShape(e,r){const o=r.src;if(!o)throw new Error("Error tsParticles - No image.src");try{const a={source:o,type:o.substr(o.length-3),error:!1,loading:!0};this.addImage(e,a);const n=r.replaceColor?i:t;await n(a)}catch(e){throw new Error(`tsParticles error - ${r.src} not found`)}}}async function u(e){const r=new d;await e.addShape("image",r),await e.addShape("images",r)}s=new WeakMap})(),a})()));
+/*! For license information please see tsparticles.shape.image.min.js.LICENSE.txt */
+!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("tsparticles-engine"));else if("function"==typeof define&&define.amd)define(["tsparticles-engine"],r);else{var t="object"==typeof exports?r(require("tsparticles-engine")):r(e.window);for(var o in t)("object"==typeof exports?exports:e)[o]=t[o]}}(this,(e=>(()=>{"use strict";var r={818:r=>{r.exports=e}},t={};function o(e){var a=t[e];if(void 0!==a)return a.exports;var i=t[e]={exports:{}};return r[e](i,i.exports,o),i.exports}o.d=(e,r)=>{for(var t in r)o.o(r,t)&&!o.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},o.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{o.r(a),o.d(a,{loadImageShape:()=>g});var e=o(818);const r=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function t(e){return new Promise((r=>{e.loading=!0;const t=new Image;e.element=t,t.addEventListener("load",(()=>{e.loading=!1,r()})),t.addEventListener("error",(()=>{e.element=void 0,e.error=!0,e.loading=!1,console.error(`Error tsParticles - loading image: ${e.source}`),r()})),t.src=e.source}))}async function i(e){if("svg"!==e.type)return void await t(e);e.loading=!0;const r=await fetch(e.source);r.ok||(console.error("Error tsParticles - Image not found"),e.error=!0),e.error||(e.svgData=await r.text()),e.loading=!1}function n(o,a,i,n){var s,l,c;const d=function(t,o,a){const{svgData:i}=t;if(!i)return"";const n=(0,e.getStyleFromHsl)(o,a);if(i.includes("fill"))return i.replace(r,(()=>n));const s=i.indexOf(">");return`${i.substring(0,s)} fill="${n}"${i.substring(s)}`}(o,i,null!==(l=null===(s=n.opacity)||void 0===s?void 0:s.value)&&void 0!==l?l:1),g={color:i,data:Object.assign(Object.assign({},o),{svgData:d}),loaded:!1,ratio:a.width/a.height,replaceColor:null!==(c=a.replaceColor)&&void 0!==c?c:a.replace_color,source:a.src};return new Promise((e=>{const r=new Blob([d],{type:"image/svg+xml"}),a=URL||window.URL||window.webkitURL||window,i=a.createObjectURL(r),n=new Image;n.addEventListener("load",(()=>{g.loaded=!0,g.element=n,e(g),a.revokeObjectURL(i)})),n.addEventListener("error",(async()=>{a.revokeObjectURL(i);const r=Object.assign(Object.assign({},o),{error:!1,loading:!0});await t(r),g.loaded=!0,g.element=r.element,e(g)})),n.src=i}))}var s,l=function(e,r,t,o,a){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!a:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?a.call(e,t):a?a.value=t:r.set(e,t),t},c=function(e,r,t,o){if("a"===t&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?e!==r||!o:!r.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?o:"a"===t?o.call(e):o?o.value:r.get(e)};class d{constructor(){s.set(this,void 0),l(this,s,[],"f")}addImage(e,r){const t=this.getImages(e);null==t||t.images.push(r)}destroy(){l(this,s,[],"f")}draw(e,r,t,o){var a;const i=r.image,n=null==i?void 0:i.element;if(!n)return;const s=null!==(a=null==i?void 0:i.ratio)&&void 0!==a?a:1,l={x:-t,y:-t};e.globalAlpha=o,e.drawImage(n,l.x,l.y,2*t,2*t/s),e.globalAlpha=1}getImages(e){const r=c(this,s,"f").find((r=>r.id===e.id));return r||(c(this,s,"f").push({id:e.id,images:[]}),this.getImages(e))}getSidesCount(){return 12}loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;const r=e.container,t=this.getImages(r).images,o=e.shapeData,a=t.find((e=>e.source===o.src));a?a.error:this.loadImageShape(r,o).then((()=>{this.loadShape(e)}))}particleInit(e,r){var t;if("image"!==r.shape&&"images"!==r.shape)return;const o=this.getImages(e).images,a=r.shapeData,i=r.getFillColor(),s=null!==(t=a.replaceColor)&&void 0!==t?t:a.replace_color,l=o.find((e=>e.source===a.src));l&&(l.loading?setTimeout((()=>{this.particleInit(e,r)})):(async()=>{var e,t;let o;o=l.svgData&&s&&i?await n(l,a,i,r):{color:i,data:l,element:l.element,loaded:!0,ratio:a.width/a.height,replaceColor:s,source:a.src},o.ratio||(o.ratio=1);const c={image:o,fill:null!==(e=a.fill)&&void 0!==e?e:r.fill,close:null!==(t=a.close)&&void 0!==t?t:r.close};r.image=c.image,r.fill=c.fill,r.close=c.close})())}async loadImageShape(e,r){var o;const a=r.src;if(!a)throw new Error("Error tsParticles - No image.src");try{const n={source:a,type:a.substring(a.length-3),error:!1,loading:!0};this.addImage(e,n);const s=(null!==(o=r.replaceColor)&&void 0!==o?o:r.replace_color)?i:t;await s(n)}catch(e){throw new Error(`tsParticles error - ${r.src} not found`)}}}async function g(e){const r=new d;await e.addShape("image",r),await e.addShape("images",r)}s=new WeakMap})(),a})()));

types/ImageDrawer.d.ts

@@ -1,3 +0,3 @@
-import type { Container, IShapeDrawer, Particle } from "tsparticles-engine";
-import type { ContainerImage, IImage, IImageParticle } from "./Utils";
+import type { Container, IShapeDrawer } from "tsparticles-engine";
+import type { ContainerImage, IImage, ImageParticle } from "./Utils";
 export declare class ImageDrawer implements IShapeDrawer {
@@ -8,7 +8,8 @@ #private;
     destroy(): void;
-    draw(context: CanvasRenderingContext2D, particle: IImageParticle, radius: number, opacity: number): void;
+    draw(context: CanvasRenderingContext2D, particle: ImageParticle, radius: number, opacity: number): void;
     getImages(container: Container): ContainerImage;
     getSidesCount(): number;
-    loadShape(particle: Particle): void;
+    loadShape(particle: ImageParticle): void;
+    particleInit(container: Container, particle: ImageParticle): void;
     private loadImageShape;
 }

types/Utils.d.ts

@@ -1,4 +0,5 @@
-import type { IHsl, IParticle, Particle } from "tsparticles-engine";
+import type { IHsl, Particle } from "tsparticles-engine";
 import type { IImageShape } from "./IImageShape";
 export interface IImage {
+    color?: IHsl;
     element?: HTMLImageElement;
@@ -12,2 +13,3 @@ error: boolean;
 export interface IParticleImage {
+    color?: IHsl;
     data: IImage;
@@ -24,3 +26,3 @@ element?: HTMLImageElement;
 }
-export declare type IImageParticle = IParticle & {
+export declare type ImageParticle = Particle & {
     image?: IParticleImage;
@@ -30,2 +32,2 @@ };
 export declare function downloadSvgImage(image: IImage): Promise<void>;
-export declare function replaceImageColor(image: IImage, imageData: IImageShape, color: IHsl, particle: Particle): IParticleImage;
+export declare function replaceImageColor(image: IImage, imageData: IImageShape, color: IHsl, particle: Particle): Promise<IParticleImage>;

umd/ImageDrawer.js

@@ -39,8 +39,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
         draw(context, particle, radius, opacity) {
-            var _a, _b;
-            const image = particle.image, element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
+            var _a;
+            const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
             if (!element) {
                 return;
             }
-            const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1, pos = {
+            const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
                 x: -radius,
@@ -70,10 +70,8 @@ y: -radius,
         loadShape(particle) {
-            var _a, _b, _c;
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
-            const images = this.getImages(particle.container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
-            let imageRes;
+            const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
             if (!image) {
-                this.loadImageShape(particle.container, imageData).then(() => {
+                this.loadImageShape(container, imageData).then(() => {
                     this.loadShape(particle);
@@ -86,28 +84,50 @@ });
             }
-            const color = particle.getFillColor();
-            if (image.svgData && imageData.replaceColor && color) {
-                imageRes = (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+        }
+        particleInit(container, particle) {
+            var _a;
+            if (particle.shape !== "image" && particle.shape !== "images") {
+                return;
             }
-            else {
-                imageRes = {
-                    data: image,
-                    loaded: true,
-                    ratio: imageData.width / imageData.height,
-                    replaceColor: (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color,
-                    source: imageData.src,
-                };
+            const images = this.getImages(container).images, imageData = particle.shapeData, color = particle.getFillColor(), replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color, image = images.find((t) => t.source === imageData.src);
+            if (!image) {
+                return;
             }
-            if (!imageRes.ratio) {
-                imageRes.ratio = 1;
+            if (image.loading) {
+                setTimeout(() => {
+                    this.particleInit(container, particle);
+                });
+                return;
             }
-            const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill, close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close, imageShape = {
-                image: imageRes,
-                fill,
-                close,
-            };
-            particle.image = imageShape.image;
-            particle.fill = imageShape.fill;
-            particle.close = imageShape.close;
+            (async () => {
+                var _a, _b;
+                let imageRes;
+                if (image.svgData && replaceColor && color) {
+                    imageRes = await (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+                }
+                else {
+                    imageRes = {
+                        color,
+                        data: image,
+                        element: image.element,
+                        loaded: true,
+                        ratio: imageData.width / imageData.height,
+                        replaceColor: replaceColor,
+                        source: imageData.src,
+                    };
+                }
+                if (!imageRes.ratio) {
+                    imageRes.ratio = 1;
+                }
+                const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+                    image: imageRes,
+                    fill,
+                    close,
+                };
+                particle.image = imageShape.image;
+                particle.fill = imageShape.fill;
+                particle.close = imageShape.close;
+            })();
         }
         async loadImageShape(container, imageShape) {
+            var _a;
             const source = imageShape.src;
@@ -120,3 +140,3 @@ if (!source) {
                     source: source,
-                    type: source.substr(source.length - 3),
+                    type: source.substring(source.length - 3),
                     error: false,
@@ -126,6 +146,6 @@ loading: true,
                 this.addImage(container, image);
-                const imageFunc = imageShape.replaceColor ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+                const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? Utils_1.downloadSvgImage : Utils_1.loadImage;
                 await imageFunc(image);
             }
-            catch (_a) {
+            catch (_b) {
                 throw new Error(`tsParticles error - ${imageShape.src} not found`);
@@ -132,0 +152,0 @@ }

umd/Utils.js

@@ -31,4 +31,4 @@ (function (factory) {
             const img = new Image();
+            image.element = img;
             img.addEventListener("load", () => {
-                image.element = img;
                 image.loading = false;
@@ -38,2 +38,3 @@ resolve();
             img.addEventListener("error", () => {
+                image.element = undefined;
                 image.error = true;
@@ -55,3 +56,2 @@ image.loading = false;
         const response = await fetch(image.source);
-        image.loading = false;
         if (!response.ok) {
@@ -64,2 +64,3 @@ console.error("Error tsParticles - Image not found");
         }
+        image.loading = false;
     }
@@ -69,4 +70,6 @@ exports.downloadSvgImage = downloadSvgImage;
         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), svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image(), imageRes = {
+        const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1), imageRes = {
+            color,
             data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+            loaded: false,
             ratio: imageData.width / imageData.height,
@@ -76,25 +79,22 @@ replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
         };
-        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;
-                }
+        return new Promise((resolve) => {
+            const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
+            img.addEventListener("load", () => {
+                imageRes.loaded = true;
+                imageRes.element = img;
+                resolve(imageRes);
+                domUrl.revokeObjectURL(url);
             });
+            img.addEventListener("error", async () => {
+                domUrl.revokeObjectURL(url);
+                const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+                await loadImage(img2);
+                imageRes.loaded = true;
+                imageRes.element = img2.element;
+                resolve(imageRes);
+            });
+            img.src = url;
         });
-        img.src = url;
-        return imageRes;
     }
     exports.replaceImageColor = replaceImageColor;
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

346092

increased by1.76%

Number of package files

27

increased by8%

Lines of code

1508

increased by7.33%

Dependency changes

• Updatedtsparticles-engine@^2.2.0