tsparticles-shape-image - npm Package Compare versions

Comparing version 2.9.3 to 2.10.0

browser/ImageDrawer.js

@@ -1,20 +0,29 @@
-import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
+import { errorPrefix } from "tsparticles-engine";
+import { replaceImageColor } from "./Utils";
 export class ImageDrawer {
-    constructor() {
-        this._images = [];
+    constructor(engine) {
+        this.loadImageShape = async (imageShape) => {
+            if (!this._engine.loadImage) {
+                throw new Error(`${errorPrefix} image shape not initialized`);
+            }
+            await this._engine.loadImage({
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor ?? imageShape.replace_color ?? false,
+                src: imageShape.src,
+            });
+        };
+        this._engine = engine;
     }
-    addImage(container, image) {
-        const containerImages = this.getImages(container);
-        containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+    addImage(image) {
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        this._engine.images.push(image);
     }
-    destroy() {
-        this._images = [];
-    }
     draw(context, particle, radius, opacity) {
-        var _a;
-        const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
+        const image = particle.image, element = image?.element;
         if (!element) {
             return;
         }
-        const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
+        const ratio = image?.ratio ?? 1, pos = {
             x: -radius,
@@ -27,18 +36,14 @@ y: -radius,
     }
-    getImages(container) {
-        const containerImages = this._images.find((t) => t.id === container.id);
-        if (!containerImages) {
-            this._images.push({
-                id: container.id,
-                images: [],
-            });
-            return this.getImages(container);
+    getSidesCount() {
+        return 12;
+    }
+    async init(container) {
+        const options = container.actualOptions;
+        if (!options.preload || !this._engine.loadImage) {
+            return;
         }
-        else {
-            return containerImages;
+        for (const imageData of options.preload) {
+            this._engine.loadImage(imageData);
         }
     }
-    getSidesCount() {
-        return 12;
-    }
     loadShape(particle) {
@@ -48,5 +53,8 @@ if (particle.shape !== "image" && particle.shape !== "images") {
         }
-        const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const imageData = particle.shapeData, image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(container, imageData).then(() => {
+            this.loadImageShape(imageData).then(() => {
                 this.loadShape(particle);
@@ -57,10 +65,13 @@ });
     particleInit(container, particle) {
-        var _a;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        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 (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const images = this._engine.images, imageData = particle.shapeData, color = particle.getFillColor(), image = images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
             return;
         }
+        const replaceColor = imageData.replaceColor ?? imageData.replace_color ?? image.replaceColor;
         if (image.loading) {
@@ -73,3 +84,2 @@ setTimeout(() => {
         (async () => {
-            var _a, _b;
             let imageRes;
@@ -85,3 +95,3 @@ if (image.svgData && color) {
                     loaded: true,
-                    ratio: imageData.width / imageData.height,
+                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
                     replaceColor: replaceColor,
@@ -94,3 +104,3 @@ source: imageData.src,
             }
-            const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+            const fill = imageData.fill ?? particle.fill, close = imageData.close ?? particle.close, imageShape = {
                 image: imageRes,
@@ -105,23 +115,2 @@ fill,
     }
-    async loadImageShape(container, imageShape) {
-        var _a;
-        const source = imageShape.src;
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        try {
-            const image = {
-                source: source,
-                type: source.substring(source.length - 3),
-                error: false,
-                loading: true,
-            };
-            this.addImage(container, image);
-            const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
-            await imageFunc(image);
-        }
-        catch (_b) {
-            throw new Error(`tsParticles error - ${imageShape.src} not found`);
-        }
-    }
 }

browser/index.js

@@ -0,4 +1,39 @@
+import { downloadSvgImage, loadImage } from "./Utils";
 import { ImageDrawer } from "./ImageDrawer";
+import { ImagePreloaderPlugin } from "./ImagePreloader";
+import { errorPrefix } from "tsparticles-engine";
 export async function loadImageShape(engine) {
-    await engine.addShape(["image", "images"], new ImageDrawer());
+    if (!engine.loadImage) {
+        engine.loadImage = async (data) => {
+            if (!data.name && !data.src) {
+                throw new Error(`${errorPrefix} no image source provided`);
+            }
+            if (!engine.images) {
+                engine.images = [];
+            }
+            if (engine.images.find((t) => t.name === data.name || t.source === data.src)) {
+                return;
+            }
+            try {
+                const image = {
+                    name: data.name ?? data.src,
+                    source: data.src,
+                    type: data.src.substring(data.src.length - 3),
+                    error: false,
+                    loading: true,
+                    replaceColor: data.replaceColor,
+                    ratio: data.width && data.height ? data.width / data.height : undefined,
+                };
+                engine.images.push(image);
+                const imageFunc = data.replaceColor ? downloadSvgImage : loadImage;
+                await imageFunc(image);
+            }
+            catch {
+                throw new Error(`${errorPrefix} ${data.name ?? data.src} not found`);
+            }
+        };
+    }
+    const preloader = new ImagePreloaderPlugin(engine);
+    await engine.addPlugin(preloader);
+    await engine.addShape(["image", "images"], new ImageDrawer(engine));
 }

browser/Utils.js

@@ -1,2 +0,2 @@
-import { getStyleFromHsl } from "tsparticles-engine";
+import { errorPrefix, getStyleFromHsl } from "tsparticles-engine";
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
@@ -28,3 +28,3 @@ function replaceColorSvg(imageShape, color, opacity) {
             image.loading = false;
-            console.error(`Error tsParticles - loading image: ${image.source}`);
+            console.error(`${errorPrefix} loading image: ${image.source}`);
             resolve();
@@ -43,3 +43,3 @@ });
     if (!response.ok) {
-        console.error("Error tsParticles - Image not found");
+        console.error(`${errorPrefix} Image not found`);
         image.error = true;
@@ -53,9 +53,11 @@ }
 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), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
         color,
-        data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        data: {
+            ...image,
+            svgData: svgColoredData,
+        },
         loaded: false,
         ratio: imageData.width / imageData.height,
-        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        replaceColor: imageData.replaceColor ?? imageData.replace_color,
         source: imageData.src,
@@ -73,3 +75,7 @@ };
             domUrl.revokeObjectURL(url);
-            const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+            const img2 = {
+                ...image,
+                error: false,
+                loading: true,
+            };
             await loadImage(img2);
@@ -76,0 +82,0 @@ imageRes.loaded = true;

cjs/ImageDrawer.js

 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageDrawer = void 0;
+const tsparticles_engine_1 = require("tsparticles-engine");
 const Utils_1 = require("./Utils");
 class ImageDrawer {
-    constructor() {
-        this._images = [];
+    constructor(engine) {
+        this.loadImageShape = async (imageShape) => {
+            if (!this._engine.loadImage) {
+                throw new Error(`${tsparticles_engine_1.errorPrefix} image shape not initialized`);
+            }
+            await this._engine.loadImage({
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor ?? imageShape.replace_color ?? false,
+                src: imageShape.src,
+            });
+        };
+        this._engine = engine;
     }
-    addImage(container, image) {
-        const containerImages = this.getImages(container);
-        containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+    addImage(image) {
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        this._engine.images.push(image);
     }
-    destroy() {
-        this._images = [];
-    }
     draw(context, particle, radius, opacity) {
-        var _a;
-        const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
+        const image = particle.image, element = image?.element;
         if (!element) {
             return;
         }
-        const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
+        const ratio = image?.ratio ?? 1, pos = {
             x: -radius,
@@ -39,18 +39,14 @@ y: -radius,
     }
-    getImages(container) {
-        const containerImages = this._images.find((t) => t.id === container.id);
-        if (!containerImages) {
-            this._images.push({
-                id: container.id,
-                images: [],
-            });
-            return this.getImages(container);
+    getSidesCount() {
+        return 12;
+    }
+    async init(container) {
+        const options = container.actualOptions;
+        if (!options.preload || !this._engine.loadImage) {
+            return;
         }
-        else {
-            return containerImages;
+        for (const imageData of options.preload) {
+            this._engine.loadImage(imageData);
         }
     }
-    getSidesCount() {
-        return 12;
-    }
     loadShape(particle) {
@@ -60,5 +56,8 @@ if (particle.shape !== "image" && particle.shape !== "images") {
         }
-        const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const imageData = particle.shapeData, image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(container, imageData).then(() => {
+            this.loadImageShape(imageData).then(() => {
                 this.loadShape(particle);
@@ -69,10 +68,13 @@ });
     particleInit(container, particle) {
-        var _a;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        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 (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const images = this._engine.images, imageData = particle.shapeData, color = particle.getFillColor(), image = images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
             return;
         }
+        const replaceColor = imageData.replaceColor ?? imageData.replace_color ?? image.replaceColor;
         if (image.loading) {
@@ -84,7 +86,6 @@ setTimeout(() => {
         }
-        (() => __awaiter(this, void 0, void 0, function* () {
-            var _b, _c;
+        (async () => {
             let imageRes;
             if (image.svgData && color) {
-                imageRes = yield (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
+                imageRes = await (0, Utils_1.replaceImageColor)(image, imageData, color, particle);
             }
@@ -97,3 +98,3 @@ else {
                     loaded: true,
-                    ratio: imageData.width / imageData.height,
+                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
                     replaceColor: replaceColor,
@@ -106,3 +107,3 @@ source: imageData.src,
             }
-            const fill = (_b = imageData.fill) !== null && _b !== void 0 ? _b : particle.fill, close = (_c = imageData.close) !== null && _c !== void 0 ? _c : particle.close, imageShape = {
+            const fill = imageData.fill ?? particle.fill, close = imageData.close ?? particle.close, imageShape = {
                 image: imageRes,
@@ -115,28 +116,5 @@ fill,
             particle.close = imageShape.close;
-        }))();
+        })();
     }
-    loadImageShape(container, imageShape) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const source = imageShape.src;
-            if (!source) {
-                throw new Error("Error tsParticles - No image.src");
-            }
-            try {
-                const image = {
-                    source: source,
-                    type: source.substring(source.length - 3),
-                    error: false,
-                    loading: true,
-                };
-                this.addImage(container, image);
-                const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? Utils_1.downloadSvgImage : Utils_1.loadImage;
-                yield imageFunc(image);
-            }
-            catch (_b) {
-                throw new Error(`tsParticles error - ${imageShape.src} not found`);
-            }
-        });
-    }
 }
 exports.ImageDrawer = ImageDrawer;

cjs/index.js

 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadImageShape = void 0;
+const Utils_1 = require("./Utils");
 const ImageDrawer_1 = require("./ImageDrawer");
-function loadImageShape(engine) {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer());
-    });
+const ImagePreloader_1 = require("./ImagePreloader");
+const tsparticles_engine_1 = require("tsparticles-engine");
+async function loadImageShape(engine) {
+    if (!engine.loadImage) {
+        engine.loadImage = async (data) => {
+            if (!data.name && !data.src) {
+                throw new Error(`${tsparticles_engine_1.errorPrefix} no image source provided`);
+            }
+            if (!engine.images) {
+                engine.images = [];
+            }
+            if (engine.images.find((t) => t.name === data.name || t.source === data.src)) {
+                return;
+            }
+            try {
+                const image = {
+                    name: data.name ?? data.src,
+                    source: data.src,
+                    type: data.src.substring(data.src.length - 3),
+                    error: false,
+                    loading: true,
+                    replaceColor: data.replaceColor,
+                    ratio: data.width && data.height ? data.width / data.height : undefined,
+                };
+                engine.images.push(image);
+                const imageFunc = data.replaceColor ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+                await imageFunc(image);
+            }
+            catch {
+                throw new Error(`${tsparticles_engine_1.errorPrefix} ${data.name ?? data.src} not found`);
+            }
+        };
+    }
+    const preloader = new ImagePreloader_1.ImagePreloaderPlugin(engine);
+    await engine.addPlugin(preloader);
+    await engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer(engine));
 }
 exports.loadImageShape = loadImageShape;

cjs/Utils.js

 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -27,51 +18,49 @@ exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
 }
-function loadImage(image) {
-    return __awaiter(this, void 0, void 0, function* () {
-        return new Promise((resolve) => {
-            image.loading = true;
-            const img = new Image();
-            image.element = img;
-            img.addEventListener("load", () => {
-                image.loading = false;
-                resolve();
-            });
-            img.addEventListener("error", () => {
-                image.element = undefined;
-                image.error = true;
-                image.loading = false;
-                console.error(`Error tsParticles - loading image: ${image.source}`);
-                resolve();
-            });
-            img.src = image.source;
+async function loadImage(image) {
+    return new Promise((resolve) => {
+        image.loading = true;
+        const img = new Image();
+        image.element = img;
+        img.addEventListener("load", () => {
+            image.loading = false;
+            resolve();
         });
+        img.addEventListener("error", () => {
+            image.element = undefined;
+            image.error = true;
+            image.loading = false;
+            console.error(`${tsparticles_engine_1.errorPrefix} loading image: ${image.source}`);
+            resolve();
+        });
+        img.src = image.source;
     });
 }
 exports.loadImage = loadImage;
-function downloadSvgImage(image) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (image.type !== "svg") {
-            yield loadImage(image);
-            return;
-        }
-        image.loading = true;
-        const response = yield fetch(image.source);
-        if (!response.ok) {
-            console.error("Error tsParticles - Image not found");
-            image.error = true;
-        }
-        if (!image.error) {
-            image.svgData = yield response.text();
-        }
-        image.loading = false;
-    });
+async function downloadSvgImage(image) {
+    if (image.type !== "svg") {
+        await loadImage(image);
+        return;
+    }
+    image.loading = true;
+    const response = await fetch(image.source);
+    if (!response.ok) {
+        console.error(`${tsparticles_engine_1.errorPrefix} Image not found`);
+        image.error = true;
+    }
+    if (!image.error) {
+        image.svgData = await response.text();
+    }
+    image.loading = false;
 }
 exports.downloadSvgImage = downloadSvgImage;
 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), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
         color,
-        data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        data: {
+            ...image,
+            svgData: svgColoredData,
+        },
         loaded: false,
         ratio: imageData.width / imageData.height,
-        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        replaceColor: imageData.replaceColor ?? imageData.replace_color,
         source: imageData.src,
@@ -87,10 +76,14 @@ };
         });
-        img.addEventListener("error", () => __awaiter(this, void 0, void 0, function* () {
+        img.addEventListener("error", async () => {
             domUrl.revokeObjectURL(url);
-            const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
-            yield loadImage(img2);
+            const img2 = {
+                ...image,
+                error: false,
+                loading: true,
+            };
+            await loadImage(img2);
             imageRes.loaded = true;
             imageRes.element = img2.element;
             resolve(imageRes);
-        }));
+        });
         img.src = url;
@@ -97,0 +90,0 @@ });

esm/ImageDrawer.js

@@ -1,20 +0,29 @@
-import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
+import { errorPrefix } from "tsparticles-engine";
+import { replaceImageColor } from "./Utils";
 export class ImageDrawer {
-    constructor() {
-        this._images = [];
+    constructor(engine) {
+        this.loadImageShape = async (imageShape) => {
+            if (!this._engine.loadImage) {
+                throw new Error(`${errorPrefix} image shape not initialized`);
+            }
+            await this._engine.loadImage({
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor ?? imageShape.replace_color ?? false,
+                src: imageShape.src,
+            });
+        };
+        this._engine = engine;
     }
-    addImage(container, image) {
-        const containerImages = this.getImages(container);
-        containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+    addImage(image) {
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        this._engine.images.push(image);
     }
-    destroy() {
-        this._images = [];
-    }
     draw(context, particle, radius, opacity) {
-        var _a;
-        const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
+        const image = particle.image, element = image?.element;
         if (!element) {
             return;
         }
-        const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
+        const ratio = image?.ratio ?? 1, pos = {
             x: -radius,
@@ -27,18 +36,14 @@ y: -radius,
     }
-    getImages(container) {
-        const containerImages = this._images.find((t) => t.id === container.id);
-        if (!containerImages) {
-            this._images.push({
-                id: container.id,
-                images: [],
-            });
-            return this.getImages(container);
+    getSidesCount() {
+        return 12;
+    }
+    async init(container) {
+        const options = container.actualOptions;
+        if (!options.preload || !this._engine.loadImage) {
+            return;
         }
-        else {
-            return containerImages;
+        for (const imageData of options.preload) {
+            this._engine.loadImage(imageData);
         }
     }
-    getSidesCount() {
-        return 12;
-    }
     loadShape(particle) {
@@ -48,5 +53,8 @@ if (particle.shape !== "image" && particle.shape !== "images") {
         }
-        const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const imageData = particle.shapeData, image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(container, imageData).then(() => {
+            this.loadImageShape(imageData).then(() => {
                 this.loadShape(particle);
@@ -57,10 +65,13 @@ });
     particleInit(container, particle) {
-        var _a;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        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 (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const images = this._engine.images, imageData = particle.shapeData, color = particle.getFillColor(), image = images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
             return;
         }
+        const replaceColor = imageData.replaceColor ?? imageData.replace_color ?? image.replaceColor;
         if (image.loading) {
@@ -73,3 +84,2 @@ setTimeout(() => {
         (async () => {
-            var _a, _b;
             let imageRes;
@@ -85,3 +95,3 @@ if (image.svgData && color) {
                     loaded: true,
-                    ratio: imageData.width / imageData.height,
+                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
                     replaceColor: replaceColor,
@@ -94,3 +104,3 @@ source: imageData.src,
             }
-            const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+            const fill = imageData.fill ?? particle.fill, close = imageData.close ?? particle.close, imageShape = {
                 image: imageRes,
@@ -105,23 +115,2 @@ fill,
     }
-    async loadImageShape(container, imageShape) {
-        var _a;
-        const source = imageShape.src;
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        try {
-            const image = {
-                source: source,
-                type: source.substring(source.length - 3),
-                error: false,
-                loading: true,
-            };
-            this.addImage(container, image);
-            const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
-            await imageFunc(image);
-        }
-        catch (_b) {
-            throw new Error(`tsParticles error - ${imageShape.src} not found`);
-        }
-    }
 }

esm/index.js

@@ -0,4 +1,39 @@
+import { downloadSvgImage, loadImage } from "./Utils";
 import { ImageDrawer } from "./ImageDrawer";
+import { ImagePreloaderPlugin } from "./ImagePreloader";
+import { errorPrefix } from "tsparticles-engine";
 export async function loadImageShape(engine) {
-    await engine.addShape(["image", "images"], new ImageDrawer());
+    if (!engine.loadImage) {
+        engine.loadImage = async (data) => {
+            if (!data.name && !data.src) {
+                throw new Error(`${errorPrefix} no image source provided`);
+            }
+            if (!engine.images) {
+                engine.images = [];
+            }
+            if (engine.images.find((t) => t.name === data.name || t.source === data.src)) {
+                return;
+            }
+            try {
+                const image = {
+                    name: data.name ?? data.src,
+                    source: data.src,
+                    type: data.src.substring(data.src.length - 3),
+                    error: false,
+                    loading: true,
+                    replaceColor: data.replaceColor,
+                    ratio: data.width && data.height ? data.width / data.height : undefined,
+                };
+                engine.images.push(image);
+                const imageFunc = data.replaceColor ? downloadSvgImage : loadImage;
+                await imageFunc(image);
+            }
+            catch {
+                throw new Error(`${errorPrefix} ${data.name ?? data.src} not found`);
+            }
+        };
+    }
+    const preloader = new ImagePreloaderPlugin(engine);
+    await engine.addPlugin(preloader);
+    await engine.addShape(["image", "images"], new ImageDrawer(engine));
 }

esm/Utils.js

@@ -1,2 +0,2 @@
-import { getStyleFromHsl } from "tsparticles-engine";
+import { errorPrefix, getStyleFromHsl } from "tsparticles-engine";
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
@@ -28,3 +28,3 @@ function replaceColorSvg(imageShape, color, opacity) {
             image.loading = false;
-            console.error(`Error tsParticles - loading image: ${image.source}`);
+            console.error(`${errorPrefix} loading image: ${image.source}`);
             resolve();
@@ -43,3 +43,3 @@ });
     if (!response.ok) {
-        console.error("Error tsParticles - Image not found");
+        console.error(`${errorPrefix} Image not found`);
         image.error = true;
@@ -53,9 +53,11 @@ }
 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), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
         color,
-        data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        data: {
+            ...image,
+            svgData: svgColoredData,
+        },
         loaded: false,
         ratio: imageData.width / imageData.height,
-        replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+        replaceColor: imageData.replaceColor ?? imageData.replace_color,
         source: imageData.src,
@@ -73,3 +75,7 @@ };
             domUrl.revokeObjectURL(url);
-            const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+            const img2 = {
+                ...image,
+                error: false,
+                loading: true,
+            };
             await loadImage(img2);
@@ -76,0 +82,0 @@ imageRes.loaded = true;

package.json

 {
   "name": "tsparticles-shape-image",
-  "version": "2.9.3",
+  "version": "2.10.0",
   "description": "tsParticles image shape",
@@ -49,4 +49,4 @@ "homepage": "https://particles.js.org",
   "dependencies": {
-    "tsparticles-engine": "^2.9.3"
+    "tsparticles-engine": "^2.10.0"
   }
 }

tsparticles.shape.image.js

@@ -7,3 +7,3 @@ /*!
  * How to use? : Check the GitHub README
- * v2.9.3
+ * v2.10.0
  */
@@ -95,3 +95,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 __webpack_require__.d(__webpack_exports__, {
-  "loadImageShape": () => (/* binding */ loadImageShape)
+  loadImageShape: () => (/* binding */ loadImageShape)
 });
@@ -131,3 +131,3 @@
       image.loading = false;
-      console.error(`Error tsParticles - loading image: ${image.source}`);
+      console.error(`${external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.errorPrefix} loading image: ${image.source}`);
       resolve();
@@ -146,3 +146,3 @@ });
   if (!response.ok) {
-    console.error("Error tsParticles - Image not found");
+    console.error(`${external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.errorPrefix} Image not found`);
     image.error = true;
@@ -156,12 +156,12 @@ }
 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 svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1),
     imageRes = {
       color,
-      data: Object.assign(Object.assign({}, image), {
+      data: {
+        ...image,
         svgData: svgColoredData
-      }),
+      },
       loaded: false,
       ratio: imageData.width / imageData.height,
-      replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+      replaceColor: imageData.replaceColor ?? imageData.replace_color,
       source: imageData.src
@@ -184,6 +184,7 @@ };
       domUrl.revokeObjectURL(url);
-      const img2 = Object.assign(Object.assign({}, image), {
+      const img2 = {
+        ...image,
         error: false,
         loading: true
-      });
+      };
       await loadImage(img2);
@@ -199,21 +200,30 @@ imageRes.loaded = true;
 
+
 class ImageDrawer {
-  constructor() {
-    this._images = [];
+  constructor(engine) {
+    this.loadImageShape = async imageShape => {
+      if (!this._engine.loadImage) {
+        throw new Error(`${external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.errorPrefix} image shape not initialized`);
+      }
+      await this._engine.loadImage({
+        name: imageShape.name,
+        replaceColor: imageShape.replaceColor ?? imageShape.replace_color ?? false,
+        src: imageShape.src
+      });
+    };
+    this._engine = engine;
   }
-  addImage(container, image) {
-    const containerImages = this.getImages(container);
-    containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+  addImage(image) {
+    if (!this._engine.images) {
+      this._engine.images = [];
+    }
+    this._engine.images.push(image);
   }
-  destroy() {
-    this._images = [];
-  }
   draw(context, particle, radius, opacity) {
-    var _a;
     const image = particle.image,
-      element = image === null || image === void 0 ? void 0 : image.element;
+      element = image?.element;
     if (!element) {
       return;
     }
-    const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1,
+    const ratio = image?.ratio ?? 1,
       pos = {
@@ -227,17 +237,14 @@ x: -radius,
   }
-  getImages(container) {
-    const containerImages = this._images.find(t => t.id === container.id);
-    if (!containerImages) {
-      this._images.push({
-        id: container.id,
-        images: []
-      });
-      return this.getImages(container);
-    } else {
-      return containerImages;
-    }
-  }
   getSidesCount() {
     return 12;
   }
+  async init(container) {
+    const options = container.actualOptions;
+    if (!options.preload || !this._engine.loadImage) {
+      return;
+    }
+    for (const imageData of options.preload) {
+      this._engine.loadImage(imageData);
+    }
+  }
   loadShape(particle) {
@@ -247,8 +254,9 @@ if (particle.shape !== "image" && particle.shape !== "images") {
     }
-    const container = particle.container,
-      images = this.getImages(container).images,
-      imageData = particle.shapeData,
-      image = images.find(t => t.source === imageData.src);
+    if (!this._engine.images) {
+      this._engine.images = [];
+    }
+    const imageData = particle.shapeData,
+      image = this._engine.images.find(t => t.name === imageData.name || t.source === imageData.src);
     if (!image) {
-      this.loadImageShape(container, imageData).then(() => {
+      this.loadImageShape(imageData).then(() => {
         this.loadShape(particle);
@@ -259,14 +267,16 @@ });
   particleInit(container, particle) {
-    var _a;
     if (particle.shape !== "image" && particle.shape !== "images") {
       return;
     }
-    const images = this.getImages(container).images,
+    if (!this._engine.images) {
+      this._engine.images = [];
+    }
+    const images = this._engine.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);
+      image = images.find(t => t.name === imageData.name || t.source === imageData.src);
     if (!image) {
       return;
     }
+    const replaceColor = imageData.replaceColor ?? imageData.replace_color ?? image.replaceColor;
     if (image.loading) {
@@ -279,3 +289,2 @@ setTimeout(() => {
     (async () => {
-      var _a, _b;
       let imageRes;
@@ -290,3 +299,3 @@ if (image.svgData && color) {
           loaded: true,
-          ratio: imageData.width / imageData.height,
+          ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
           replaceColor: replaceColor,
@@ -299,4 +308,4 @@ source: imageData.src
       }
-      const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill,
-        close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close,
+      const fill = imageData.fill ?? particle.fill,
+        close = imageData.close ?? particle.close,
         imageShape = {
@@ -312,27 +321,100 @@ image: imageRes,
   }
-  async loadImageShape(container, imageShape) {
-    var _a;
-    const source = imageShape.src;
-    if (!source) {
-      throw new Error("Error tsParticles - No image.src");
+}
+;// CONCATENATED MODULE: ./dist/browser/Options/Classes/Preload.js
+class Preload {
+  constructor() {
+    this.src = "";
+  }
+  load(data) {
+    if (!data) {
+      return;
     }
-    try {
-      const image = {
-        source: source,
-        type: source.substring(source.length - 3),
-        error: false,
-        loading: true
-      };
-      this.addImage(container, image);
-      const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
-      await imageFunc(image);
-    } catch (_b) {
-      throw new Error(`tsParticles error - ${imageShape.src} not found`);
+    if (data.height !== undefined) {
+      this.height = data.height;
     }
+    if (data.name !== undefined) {
+      this.name = data.name;
+    }
+    if (data.replaceColor !== undefined) {
+      this.replaceColor = data.replaceColor;
+    }
+    if (data.src !== undefined) {
+      this.src = data.src;
+    }
+    if (data.width !== undefined) {
+      this.width = data.width;
+    }
   }
 }
+;// CONCATENATED MODULE: ./dist/browser/ImagePreloader.js
+
+class ImagePreloaderPlugin {
+  constructor(engine) {
+    this.id = "imagePreloader";
+    this._engine = engine;
+  }
+  getPlugin() {
+    return {};
+  }
+  loadOptions(options, source) {
+    if (!source || !source.preload) {
+      return;
+    }
+    if (!options.preload) {
+      options.preload = [];
+    }
+    const preloadOptions = options.preload;
+    for (const item of source.preload) {
+      const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
+      if (existing) {
+        existing.load(item);
+      } else {
+        const preload = new Preload();
+        preload.load(item);
+        preloadOptions.push(preload);
+      }
+    }
+  }
+  needsPlugin() {
+    return true;
+  }
+}
 ;// CONCATENATED MODULE: ./dist/browser/index.js
 
+
+
+
 async function loadImageShape(engine) {
-  await engine.addShape(["image", "images"], new ImageDrawer());
+  if (!engine.loadImage) {
+    engine.loadImage = async data => {
+      if (!data.name && !data.src) {
+        throw new Error(`${external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.errorPrefix} no image source provided`);
+      }
+      if (!engine.images) {
+        engine.images = [];
+      }
+      if (engine.images.find(t => t.name === data.name || t.source === data.src)) {
+        return;
+      }
+      try {
+        const image = {
+          name: data.name ?? data.src,
+          source: data.src,
+          type: data.src.substring(data.src.length - 3),
+          error: false,
+          loading: true,
+          replaceColor: data.replaceColor,
+          ratio: data.width && data.height ? data.width / data.height : undefined
+        };
+        engine.images.push(image);
+        const imageFunc = data.replaceColor ? downloadSvgImage : loadImage;
+        await imageFunc(image);
+      } catch {
+        throw new Error(`${external_commonjs_tsparticles_engine_commonjs2_tsparticles_engine_amd_tsparticles_engine_root_window_.errorPrefix} ${data.name ?? data.src} not found`);
+      }
+    };
+  }
+  const preloader = new ImagePreloaderPlugin(engine);
+  await engine.addPlugin(preloader);
+  await engine.addShape(["image", "images"], new ImageDrawer(engine));
 }
@@ -339,0 +421,0 @@ })();

tsparticles.shape.image.min.js

 /*! 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={961: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:()=>l});var e=o(961);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 s(o,a,i,s){var n,l,c;const d=function(t,o,a){const{svgData:i}=t;if(!i)return"";const s=(0,e.getStyleFromHsl)(o,a);if(i.includes("fill"))return i.replace(r,(()=>s));const n=i.indexOf(">");return`${i.substring(0,n)} fill="${s}"${i.substring(n)}`}(o,i,null!==(l=null===(n=s.opacity)||void 0===n?void 0:n.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),s=new Image;s.addEventListener("load",(()=>{g.loaded=!0,g.element=s,e(g),a.revokeObjectURL(i)})),s.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)})),s.src=i}))}class n{constructor(){this._images=[]}addImage(e,r){const t=this.getImages(e);null==t||t.images.push(r)}destroy(){this._images=[]}draw(e,r,t,o){var a;const i=r.image,s=null==i?void 0:i.element;if(!s)return;const n=null!==(a=null==i?void 0:i.ratio)&&void 0!==a?a:1,l={x:-t,y:-t};e.globalAlpha=o,e.drawImage(s,l.x,l.y,2*t,2*t/n),e.globalAlpha=1}getImages(e){const r=this._images.find((r=>r.id===e.id));return r||(this._images.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;t.find((e=>e.source===o.src))||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(),n=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&&i?await s(l,a,i,r):{color:i,data:l,element:l.element,loaded:!0,ratio:a.width/a.height,replaceColor:n,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 s={source:a,type:a.substring(a.length-3),error:!1,loading:!0};this.addImage(e,s);const n=(null!==(o=r.replaceColor)&&void 0!==o?o:r.replace_color)?i:t;await n(s)}catch(e){throw new Error(`tsParticles error - ${r.src} not found`)}}}async function l(e){await e.addShape(["image","images"],new n)}})(),a})()));
+!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 o="object"==typeof exports?r(require("tsparticles-engine")):r(e.window);for(var t in o)("object"==typeof exports?exports:e)[t]=o[t]}}(this,(e=>(()=>{"use strict";var r={961:r=>{r.exports=e}},o={};function t(e){var a=o[e];if(void 0!==a)return a.exports;var i=o[e]={exports:{}};return r[e](i,i.exports,t),i.exports}t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{t.r(a),t.d(a,{loadImageShape:()=>d});var e=t(961);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 o(r){return new Promise((o=>{r.loading=!0;const t=new Image;r.element=t,t.addEventListener("load",(()=>{r.loading=!1,o()})),t.addEventListener("error",(()=>{r.element=void 0,r.error=!0,r.loading=!1,console.error(`${e.errorPrefix} loading image: ${r.source}`),o()})),t.src=r.source}))}async function i(r){if("svg"!==r.type)return void await o(r);r.loading=!0;const t=await fetch(r.source);t.ok||(console.error(`${e.errorPrefix} Image not found`),r.error=!0),r.error||(r.svgData=await t.text()),r.loading=!1}function n(t,a,i,n){const s=function(o,t,a){const{svgData:i}=o;if(!i)return"";const n=(0,e.getStyleFromHsl)(t,a);if(i.includes("fill"))return i.replace(r,(()=>n));const s=i.indexOf(">");return`${i.substring(0,s)} fill="${n}"${i.substring(s)}`}(t,i,n.opacity?.value??1),l={color:i,data:{...t,svgData:s},loaded:!1,ratio:a.width/a.height,replaceColor:a.replaceColor??a.replace_color,source:a.src};return new Promise((e=>{const r=new Blob([s],{type:"image/svg+xml"}),a=URL||window.URL||window.webkitURL||window,i=a.createObjectURL(r),n=new Image;n.addEventListener("load",(()=>{l.loaded=!0,l.element=n,e(l),a.revokeObjectURL(i)})),n.addEventListener("error",(async()=>{a.revokeObjectURL(i);const r={...t,error:!1,loading:!0};await o(r),l.loaded=!0,l.element=r.element,e(l)})),n.src=i}))}class s{constructor(r){this.loadImageShape=async r=>{if(!this._engine.loadImage)throw new Error(`${e.errorPrefix} image shape not initialized`);await this._engine.loadImage({name:r.name,replaceColor:r.replaceColor??r.replace_color??!1,src:r.src})},this._engine=r}addImage(e){this._engine.images||(this._engine.images=[]),this._engine.images.push(e)}draw(e,r,o,t){const a=r.image,i=a?.element;if(!i)return;const n=a?.ratio??1,s={x:-o,y:-o};e.globalAlpha=t,e.drawImage(i,s.x,s.y,2*o,2*o/n),e.globalAlpha=1}getSidesCount(){return 12}async init(e){const r=e.actualOptions;if(r.preload&&this._engine.loadImage)for(const e of r.preload)this._engine.loadImage(e)}loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;this._engine.images||(this._engine.images=[]);const r=e.shapeData;this._engine.images.find((e=>e.name===r.name||e.source===r.src))||this.loadImageShape(r).then((()=>{this.loadShape(e)}))}particleInit(e,r){if("image"!==r.shape&&"images"!==r.shape)return;this._engine.images||(this._engine.images=[]);const o=this._engine.images,t=r.shapeData,a=r.getFillColor(),i=o.find((e=>e.name===t.name||e.source===t.src));if(!i)return;const s=t.replaceColor??t.replace_color??i.replaceColor;i.loading?setTimeout((()=>{this.particleInit(e,r)})):(async()=>{let e;e=i.svgData&&a?await n(i,t,a,r):{color:a,data:i,element:i.element,loaded:!0,ratio:t.width&&t.height?t.width/t.height:i.ratio??1,replaceColor:s,source:t.src},e.ratio||(e.ratio=1);const o={image:e,fill:t.fill??r.fill,close:t.close??r.close};r.image=o.image,r.fill=o.fill,r.close=o.close})()}}class l{constructor(){this.src=""}load(e){e&&(void 0!==e.height&&(this.height=e.height),void 0!==e.name&&(this.name=e.name),void 0!==e.replaceColor&&(this.replaceColor=e.replaceColor),void 0!==e.src&&(this.src=e.src),void 0!==e.width&&(this.width=e.width))}}class c{constructor(e){this.id="imagePreloader",this._engine=e}getPlugin(){return{}}loadOptions(e,r){if(!r||!r.preload)return;e.preload||(e.preload=[]);const o=e.preload;for(const e of r.preload){const r=o.find((r=>r.name===e.name||r.src===e.src));if(r)r.load(e);else{const r=new l;r.load(e),o.push(r)}}}needsPlugin(){return!0}}async function d(r){r.loadImage||(r.loadImage=async t=>{if(!t.name&&!t.src)throw new Error(`${e.errorPrefix} no image source provided`);if(r.images||(r.images=[]),!r.images.find((e=>e.name===t.name||e.source===t.src)))try{const e={name:t.name??t.src,source:t.src,type:t.src.substring(t.src.length-3),error:!1,loading:!0,replaceColor:t.replaceColor,ratio:t.width&&t.height?t.width/t.height:void 0};r.images.push(e);const a=t.replaceColor?i:o;await a(e)}catch{throw new Error(`${e.errorPrefix} ${t.name??t.src} not found`)}});const t=new c(r);await r.addPlugin(t),await r.addShape(["image","images"],new s(r))}})(),a})()));

tsparticles.shape.image.min.js.LICENSE.txt

@@ -1,1 +0,1 @@
-/*! tsParticles Image Shape v2.9.3 by Matteo Bruni */
+/*! tsParticles Image Shape v2.10.0 by Matteo Bruni */

types/IImageShape.d.ts

 import type { IShapeValues } from "tsparticles-engine";
 export interface IImageShape extends IShapeValues {
     height: number;
+    name: string;
     replaceColor: boolean;
@@ -5,0 +6,0 @@ replace_color: boolean;

types/ImageDrawer.d.ts

@@ -1,14 +0,14 @@
-import type { Container, IShapeDrawer } from "tsparticles-engine";
-import type { ContainerImage, IImage, ImageParticle } from "./Utils";
+import { type Container, type IShapeDrawer } from "tsparticles-engine";
+import type { IImage, ImageParticle } from "./Utils";
+import type { ImageContainer, ImageEngine } from "./types";
 export declare class ImageDrawer implements IShapeDrawer {
-    private _images;
-    constructor();
-    addImage(container: Container, image: IImage): void;
-    destroy(): void;
+    private readonly _engine;
+    constructor(engine: ImageEngine);
+    addImage(image: IImage): void;
     draw(context: CanvasRenderingContext2D, particle: ImageParticle, radius: number, opacity: number): void;
-    getImages(container: Container): ContainerImage;
     getSidesCount(): number;
+    init(container: ImageContainer): Promise<void>;
     loadShape(particle: ImageParticle): void;
     particleInit(container: Container, particle: ImageParticle): void;
-    private loadImageShape;
+    private readonly loadImageShape;
 }

types/index.d.ts

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

types/Utils.d.ts

@@ -1,2 +0,2 @@
-import type { IHsl, Particle } from "tsparticles-engine";
+import { type IHsl, type Particle } from "tsparticles-engine";
 import type { IImageShape } from "./IImageShape";
@@ -8,2 +8,5 @@ export interface IImage {
     loading: boolean;
+    name: string;
+    ratio?: number;
+    replaceColor?: boolean;
     source: string;
@@ -22,6 +25,2 @@ svgData?: string;
 }
-export interface ContainerImage {
-    id: string;
-    images: IImage[];
-}
 export type ImageParticle = Particle & {
@@ -28,0 +27,0 @@ image?: IParticleImage;

umd/ImageDrawer.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Utils"], factory);
+        define(["require", "exports", "tsparticles-engine", "./Utils"], factory);
     }
@@ -14,21 +14,30 @@ })(function (require, exports) {
     exports.ImageDrawer = void 0;
+    const tsparticles_engine_1 = require("tsparticles-engine");
     const Utils_1 = require("./Utils");
     class ImageDrawer {
-        constructor() {
-            this._images = [];
+        constructor(engine) {
+            this.loadImageShape = async (imageShape) => {
+                if (!this._engine.loadImage) {
+                    throw new Error(`${tsparticles_engine_1.errorPrefix} image shape not initialized`);
+                }
+                await this._engine.loadImage({
+                    name: imageShape.name,
+                    replaceColor: imageShape.replaceColor ?? imageShape.replace_color ?? false,
+                    src: imageShape.src,
+                });
+            };
+            this._engine = engine;
         }
-        addImage(container, image) {
-            const containerImages = this.getImages(container);
-            containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+        addImage(image) {
+            if (!this._engine.images) {
+                this._engine.images = [];
+            }
+            this._engine.images.push(image);
         }
-        destroy() {
-            this._images = [];
-        }
         draw(context, particle, radius, opacity) {
-            var _a;
-            const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
+            const image = particle.image, element = image?.element;
             if (!element) {
                 return;
             }
-            const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
+            const ratio = image?.ratio ?? 1, pos = {
                 x: -radius,
@@ -41,18 +50,14 @@ y: -radius,
         }
-        getImages(container) {
-            const containerImages = this._images.find((t) => t.id === container.id);
-            if (!containerImages) {
-                this._images.push({
-                    id: container.id,
-                    images: [],
-                });
-                return this.getImages(container);
+        getSidesCount() {
+            return 12;
+        }
+        async init(container) {
+            const options = container.actualOptions;
+            if (!options.preload || !this._engine.loadImage) {
+                return;
             }
-            else {
-                return containerImages;
+            for (const imageData of options.preload) {
+                this._engine.loadImage(imageData);
             }
         }
-        getSidesCount() {
-            return 12;
-        }
         loadShape(particle) {
@@ -62,5 +67,8 @@ if (particle.shape !== "image" && particle.shape !== "images") {
             }
-            const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
+            if (!this._engine.images) {
+                this._engine.images = [];
+            }
+            const imageData = particle.shapeData, image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
             if (!image) {
-                this.loadImageShape(container, imageData).then(() => {
+                this.loadImageShape(imageData).then(() => {
                     this.loadShape(particle);
@@ -71,10 +79,13 @@ });
         particleInit(container, particle) {
-            var _a;
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
-            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 (!this._engine.images) {
+                this._engine.images = [];
+            }
+            const images = this._engine.images, imageData = particle.shapeData, color = particle.getFillColor(), image = images.find((t) => t.name === imageData.name || t.source === imageData.src);
             if (!image) {
                 return;
             }
+            const replaceColor = imageData.replaceColor ?? imageData.replace_color ?? image.replaceColor;
             if (image.loading) {
@@ -87,3 +98,2 @@ setTimeout(() => {
             (async () => {
-                var _a, _b;
                 let imageRes;
@@ -99,3 +109,3 @@ if (image.svgData && color) {
                         loaded: true,
-                        ratio: imageData.width / imageData.height,
+                        ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
                         replaceColor: replaceColor,
@@ -108,3 +118,3 @@ source: imageData.src,
                 }
-                const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+                const fill = imageData.fill ?? particle.fill, close = imageData.close ?? particle.close, imageShape = {
                     image: imageRes,
@@ -119,25 +129,4 @@ fill,
         }
-        async loadImageShape(container, imageShape) {
-            var _a;
-            const source = imageShape.src;
-            if (!source) {
-                throw new Error("Error tsParticles - No image.src");
-            }
-            try {
-                const image = {
-                    source: source,
-                    type: source.substring(source.length - 3),
-                    error: false,
-                    loading: true,
-                };
-                this.addImage(container, image);
-                const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? Utils_1.downloadSvgImage : Utils_1.loadImage;
-                await imageFunc(image);
-            }
-            catch (_b) {
-                throw new Error(`tsParticles error - ${imageShape.src} not found`);
-            }
-        }
     }
     exports.ImageDrawer = ImageDrawer;
 });

umd/index.js

@@ -7,3 +7,3 @@ (function (factory) {
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./ImageDrawer"], factory);
+        define(["require", "exports", "./Utils", "./ImageDrawer", "./ImagePreloader", "tsparticles-engine"], factory);
     }
@@ -14,7 +14,42 @@ })(function (require, exports) {
     exports.loadImageShape = void 0;
+    const Utils_1 = require("./Utils");
     const ImageDrawer_1 = require("./ImageDrawer");
+    const ImagePreloader_1 = require("./ImagePreloader");
+    const tsparticles_engine_1 = require("tsparticles-engine");
     async function loadImageShape(engine) {
-        await engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer());
+        if (!engine.loadImage) {
+            engine.loadImage = async (data) => {
+                if (!data.name && !data.src) {
+                    throw new Error(`${tsparticles_engine_1.errorPrefix} no image source provided`);
+                }
+                if (!engine.images) {
+                    engine.images = [];
+                }
+                if (engine.images.find((t) => t.name === data.name || t.source === data.src)) {
+                    return;
+                }
+                try {
+                    const image = {
+                        name: data.name ?? data.src,
+                        source: data.src,
+                        type: data.src.substring(data.src.length - 3),
+                        error: false,
+                        loading: true,
+                        replaceColor: data.replaceColor,
+                        ratio: data.width && data.height ? data.width / data.height : undefined,
+                    };
+                    engine.images.push(image);
+                    const imageFunc = data.replaceColor ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+                    await imageFunc(image);
+                }
+                catch {
+                    throw new Error(`${tsparticles_engine_1.errorPrefix} ${data.name ?? data.src} not found`);
+                }
+            };
+        }
+        const preloader = new ImagePreloader_1.ImagePreloaderPlugin(engine);
+        await engine.addPlugin(preloader);
+        await engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer(engine));
     }
     exports.loadImageShape = loadImageShape;
 });

umd/Utils.js

@@ -40,3 +40,3 @@ (function (factory) {
                 image.loading = false;
-                console.error(`Error tsParticles - loading image: ${image.source}`);
+                console.error(`${tsparticles_engine_1.errorPrefix} loading image: ${image.source}`);
                 resolve();
@@ -56,3 +56,3 @@ });
         if (!response.ok) {
-            console.error("Error tsParticles - Image not found");
+            console.error(`${tsparticles_engine_1.errorPrefix} Image not found`);
             image.error = true;
@@ -67,9 +67,11 @@ }
     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), imageRes = {
+        const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
             color,
-            data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+            data: {
+                ...image,
+                svgData: svgColoredData,
+            },
             loaded: false,
             ratio: imageData.width / imageData.height,
-            replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
+            replaceColor: imageData.replaceColor ?? imageData.replace_color,
             source: imageData.src,
@@ -87,3 +89,7 @@ };
                 domUrl.revokeObjectURL(url);
-                const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+                const img2 = {
+                    ...image,
+                    error: false,
+                    loading: true,
+                };
                 await loadImage(img2);
@@ -90,0 +96,0 @@ imageRes.loaded = true;

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

352083

increased by4.41%

Number of package files

47

increased by74.07%

Lines of code

1798

increased by39.27%

Dependency changes

• Updatedtsparticles-engine@^2.10.0