@tsparticles/shape-image 3.0.3 → 3.2.0

package/cjs/GifUtils/Utils.js

@@ -1,8 +1,35 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeGIF = exports.getGIFLoopAmount = void 0;
+exports.loadGifImage = exports.drawGif = exports.decodeGIF = exports.getGIFLoopAmount = void 0;
 const Constants_js_1 = require("./Constants.js");
 const ByteStream_js_1 = require("./ByteStream.js");
+const origin = {
+    x: 0,
+    y: 0,
+}, defaultFrame = 0, half = 0.5, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
 function parseColorTable(byteStream, count) {
     const colors = [];
     for (let i = 0; i < count; i++) {
@@ -15,7 +42,7 @@ function parseColorTable(byteStream, count) {
     }
     return colors;
 }
-async function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
     switch (byteStream.nextByte()) {
         case 249: {
             const frame = gif.frames[getFrameIndex(false)];
@@ -87,7 +114,10 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
     }
     const getColor = (index) => {
         const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
-        return { r, g, b, a: index === getTransparencyIndex(null) ? (avgAlpha ? ~~((r + g + b) / 3) : 0) : 255 };
+        if (index !== getTransparencyIndex(null)) {
+            return { r, g, b, a: 255 };
+        }
+        return { r, g, b, a: avgAlpha ? ~~((r + g + b) / 3) : 0 };
     };
     const image = (() => {
         try {
@@ -113,7 +143,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
     if (interlacedFlag) {
         for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
             if (Constants_js_1.InterlaceOffsets[pass] < frame.height) {
-                for (let pixelPos = 0, lineIndex = 0;;) {
+                let pixelPos = 0, lineIndex = 0, exit = false;
+                while (!exit) {
                     const last = code;
                     code = readBits(pos, size);
                     pos += size + 1;
@@ -131,8 +162,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                         else if (last !== clearCode) {
                             dic.push(dic[last].concat(dic[code][0]));
                         }
-                        for (let i = 0; i < dic[code].length; i++) {
-                            const { r, g, b, a } = getColor(dic[code][i]);
+                        for (const item of dic[code]) {
+                            const { r, g, b, a } = getColor(item);
                             image.data.set([r, g, b, a], Constants_js_1.InterlaceOffsets[pass] * frame.width +
                                 Constants_js_1.InterlaceSteps[pass] * lineIndex +
                                 (pixelPos % (frame.width * 4)));
@@ -145,7 +176,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                     if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
                         lineIndex++;
                         if (Constants_js_1.InterlaceOffsets[pass] + Constants_js_1.InterlaceSteps[pass] * lineIndex >= frame.height) {
-                            break;
+                            exit = true;
                         }
                     }
                 }
@@ -156,7 +187,9 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
         frame.bitmap = await createImageBitmap(image);
     }
     else {
-        for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pixelPos = -4;;) {
+        let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4, exit = false;
+        const dic = [[0]];
+        while (!exit) {
             const last = code;
             code = readBits(pos, size);
             pos += size;
@@ -169,6 +202,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
             }
             else {
                 if (code === clearCode + 1) {
+                    exit = true;
                     break;
                 }
                 if (code >= dic.length) {
@@ -177,8 +211,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
                 else if (last !== clearCode) {
                     dic.push(dic[last].concat(dic[code][0]));
                 }
-                for (let i = 0; i < dic[code].length; i++) {
-                    const { r, g, b, a } = getColor(dic[code][i]);
+                for (const item of dic[code]) {
+                    const { r, g, b, a } = getColor(item);
                     image.data.set([r, g, b, a], (pixelPos += 4));
                 }
                 if (dic.length >= 1 << size && size < 0xc) {
@@ -199,7 +233,7 @@ async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTranspare
             await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
             break;
         case 33:
-            await parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
+            parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
             break;
         default:
             throw new EvalError("undefined block found");
@@ -327,3 +361,97 @@ async function decodeGIF(gifURL, progressCallback, avgAlpha) {
     }
 }
 exports.decodeGIF = decodeGIF;
+function drawGif(data) {
+    const { context, radius, particle, delta } = data, image = particle.image;
+    if (!image?.gifData || !image.gif) {
+        return;
+    }
+    const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d");
+    if (!offscreenContext) {
+        throw new Error("could not create offscreen canvas context");
+    }
+    offscreenContext.imageSmoothingQuality = "low";
+    offscreenContext.imageSmoothingEnabled = false;
+    offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+    if (particle.gifLoopCount === undefined) {
+        particle.gifLoopCount = image.gifLoopCount ?? defaultLoopCount;
+    }
+    let frameIndex = particle.gifFrame ?? defaultFrame;
+    const pos = { x: -image.gifData.width * half, y: -image.gifData.height * half }, frame = image.gifData.frames[frameIndex];
+    if (particle.gifTime === undefined) {
+        particle.gifTime = initialTime;
+    }
+    if (!frame.bitmap) {
+        return;
+    }
+    context.scale(radius / image.gifData.width, radius / image.gifData.height);
+    switch (frame.disposalMethod) {
+        case 4:
+        case 5:
+        case 6:
+        case 7:
+        case 0:
+            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+            context.drawImage(offscreenCanvas, pos.x, pos.y);
+            offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+            break;
+        case 1:
+            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+            context.drawImage(offscreenCanvas, pos.x, pos.y);
+            break;
+        case 2:
+            offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+            context.drawImage(offscreenCanvas, pos.x, pos.y);
+            offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+            if (!image.gifData.globalColorTable.length) {
+                offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);
+            }
+            else {
+                offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
+            }
+            break;
+        case 3:
+            {
+                const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+                offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
+                context.drawImage(offscreenCanvas, pos.x, pos.y);
+                offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+                offscreenContext.putImageData(previousImageData, origin.x, origin.y);
+            }
+            break;
+    }
+    particle.gifTime += delta.value;
+    if (particle.gifTime > frame.delayTime) {
+        particle.gifTime -= frame.delayTime;
+        if (++frameIndex >= image.gifData.frames.length) {
+            if (--particle.gifLoopCount <= defaultLoopCount) {
+                return;
+            }
+            frameIndex = firstIndex;
+            offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+        }
+        particle.gifFrame = frameIndex;
+    }
+    context.scale(image.gifData.width / radius, image.gifData.height / radius);
+}
+exports.drawGif = drawGif;
+async function loadGifImage(image) {
+    if (image.type !== "gif") {
+        const { loadImage } = await Promise.resolve().then(() => __importStar(require("../Utils.js")));
+        await loadImage(image);
+        return;
+    }
+    image.loading = true;
+    try {
+        image.gifData = await decodeGIF(image.source);
+        image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? defaultLoopCount;
+        if (!image.gifLoopCount) {
+            image.gifLoopCount = Infinity;
+        }
+    }
+    catch {
+        image.error = true;
+    }
+    image.loading = false;
+}
+exports.loadGifImage = loadGifImage;

package/cjs/ImageDrawer.js

@@ -1,8 +1,31 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageDrawer = void 0;
 const engine_1 = require("@tsparticles/engine");
-const Utils_js_1 = require("./Utils.js");
+const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
 class ImageDrawer {
     constructor(engine) {
         this.loadImageShape = async (imageShape) => {
@@ -24,92 +47,27 @@ class ImageDrawer {
         }
         this._engine.images.push(image);
     }
-    draw(data) {
-        const { context, radius, particle, opacity, delta } = data, image = particle.image, element = image?.element;
+    async draw(data) {
+        const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
         if (!image) {
             return;
         }
         context.globalAlpha = opacity;
         if (image.gif && image.gifData) {
-            const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d");
-            if (!offscreenContext) {
-                throw new Error("could not create offscreen canvas context");
-            }
-            offscreenContext.imageSmoothingQuality = "low";
-            offscreenContext.imageSmoothingEnabled = false;
-            offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-            if (particle.gifLoopCount === undefined) {
-                particle.gifLoopCount = image.gifLoopCount ?? 0;
-            }
-            let frameIndex = particle.gifFrame ?? 0;
-            const pos = { x: -image.gifData.width * 0.5, y: -image.gifData.height * 0.5 }, frame = image.gifData.frames[frameIndex];
-            if (particle.gifTime === undefined) {
-                particle.gifTime = 0;
-            }
-            if (!frame.bitmap) {
-                return;
-            }
-            context.scale(radius / image.gifData.width, radius / image.gifData.height);
-            switch (frame.disposalMethod) {
-                case 4:
-                case 5:
-                case 6:
-                case 7:
-                case 0:
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                    break;
-                case 1:
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    break;
-                case 2:
-                    offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                    context.drawImage(offscreenCanvas, pos.x, pos.y);
-                    offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                    if (image.gifData.globalColorTable.length === 0) {
-                        offscreenContext.putImageData(image.gifData.frames[0].image, pos.x + frame.left, pos.y + frame.top);
-                    }
-                    else {
-                        offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
-                    }
-                    break;
-                case 3:
-                    {
-                        const previousImageData = offscreenContext.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                        offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
-                        context.drawImage(offscreenCanvas, pos.x, pos.y);
-                        offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                        offscreenContext.putImageData(previousImageData, 0, 0);
-                    }
-                    break;
-            }
-            particle.gifTime += delta.value;
-            if (particle.gifTime > frame.delayTime) {
-                particle.gifTime -= frame.delayTime;
-                if (++frameIndex >= image.gifData.frames.length) {
-                    if (--particle.gifLoopCount <= 0) {
-                        return;
-                    }
-                    frameIndex = 0;
-                    offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
-                }
-                particle.gifFrame = frameIndex;
-            }
-            context.scale(image.gifData.width / radius, image.gifData.height / radius);
+            const { drawGif } = await Promise.resolve().then(() => __importStar(require("./GifUtils/Utils.js")));
+            drawGif(data);
         }
         else if (element) {
             const ratio = image.ratio, pos = {
                 x: -radius,
                 y: -radius,
-            }, diameter = radius * 2;
+            }, diameter = radius * double;
             context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
         }
-        context.globalAlpha = 1;
+        context.globalAlpha = defaultAlpha;
     }
     getSidesCount() {
-        return 12;
+        return sides;
     }
     async init(container) {
         const options = container.actualOptions;
@@ -120,7 +78,7 @@ class ImageDrawer {
             await this._engine.loadImage(imageData);
         }
     }
-    loadShape(particle) {
+    async loadShape(particle) {
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
@@ -133,12 +91,11 @@ class ImageDrawer {
         }
         const image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(imageData).then(() => {
-                this.loadShape(particle);
-            });
+            await this.loadImageShape(imageData);
+            await this.loadShape(particle);
         }
     }
-    particleInit(container, particle) {
+    async particleInit(container, particle) {
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
@@ -156,41 +113,42 @@ class ImageDrawer {
         const replaceColor = imageData.replaceColor ?? image.replaceColor;
         if (image.loading) {
             setTimeout(() => {
-                this.particleInit(container, particle);
+                void this.particleInit(container, particle);
             });
             return;
         }
-        (async () => {
-            let imageRes;
-            if (image.svgData && color) {
-                imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle);
-            }
-            else {
-                imageRes = {
-                    color,
-                    data: image,
-                    element: image.element,
-                    gif: image.gif,
-                    gifData: image.gifData,
-                    gifLoopCount: image.gifLoopCount,
-                    loaded: true,
-                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
-                    replaceColor: replaceColor,
-                    source: imageData.src,
-                };
-            }
-            if (!imageRes.ratio) {
-                imageRes.ratio = 1;
-            }
-            const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
-                image: imageRes,
-                fill,
-                close,
+        let imageRes;
+        if (image.svgData && color) {
+            const { replaceImageColor } = await Promise.resolve().then(() => __importStar(require("./Utils.js")));
+            imageRes = await replaceImageColor(image, imageData, color, particle);
+        }
+        else {
+            imageRes = {
+                color,
+                data: image,
+                element: image.element,
+                gif: image.gif,
+                gifData: image.gifData,
+                gifLoopCount: image.gifLoopCount,
+                loaded: true,
+                ratio: imageData.width && imageData.height
+                    ? imageData.width / imageData.height
+                    : image.ratio ?? defaultRatio,
+                replaceColor: replaceColor,
+                source: imageData.src,
             };
-            particle.image = imageShape.image;
-            particle.shapeFill = imageShape.fill;
-            particle.shapeClose = imageShape.close;
-        })();
+        }
+        if (!imageRes.ratio) {
+            imageRes.ratio = 1;
+        }
+        const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
+            image: imageRes,
+            fill,
+            close,
+        };
+        particle.image = imageShape.image;
+        particle.shapeFill = imageShape.fill;
+        particle.shapeClose = imageShape.close;
     }
 }
 exports.ImageDrawer = ImageDrawer;

package/cjs/ImagePreloader.js

@@ -7,11 +7,12 @@ class ImagePreloaderPlugin {
         this.id = "imagePreloader";
         this._engine = engine;
     }
-    getPlugin() {
+    async getPlugin() {
+        await Promise.resolve();
         return {};
     }
     loadOptions(options, source) {
-        if (!source || !source.preload) {
+        if (!source?.preload) {
             return;
         }
         if (!options.preload) {

package/cjs/Utils.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.replaceImageColor = exports.downloadSvgImage = exports.loadGifImage = exports.loadImage = void 0;
+exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
 const engine_1 = require("@tsparticles/engine");
-const Utils_js_1 = require("./GifUtils/Utils.js");
+const stringStart = 0, defaultOpacity = 1;
 const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
 function replaceColorSvg(imageShape, color, opacity) {
     const { svgData } = imageShape;
@@ -14,7 +14,7 @@ function replaceColorSvg(imageShape, color, opacity) {
         return svgData.replace(currentColorRegex, () => colorStyle);
     }
     const preFillIndex = svgData.indexOf(">");
-    return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
+    return `${svgData.substring(stringStart, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
 }
 async function loadImage(image) {
     return new Promise((resolve) => {
@@ -36,25 +36,6 @@ async function loadImage(image) {
     });
 }
 exports.loadImage = loadImage;
-async function loadGifImage(image) {
-    if (image.type !== "gif") {
-        await loadImage(image);
-        return;
-    }
-    image.loading = true;
-    try {
-        image.gifData = await (0, Utils_js_1.decodeGIF)(image.source);
-        image.gifLoopCount = (0, Utils_js_1.getGIFLoopAmount)(image.gifData) ?? 0;
-        if (image.gifLoopCount === 0) {
-            image.gifLoopCount = Infinity;
-        }
-    }
-    catch {
-        image.error = true;
-    }
-    image.loading = false;
-}
-exports.loadGifImage = loadGifImage;
 async function downloadSvgImage(image) {
     if (image.type !== "svg") {
         await loadImage(image);
@@ -73,7 +54,7 @@ async function downloadSvgImage(image) {
 }
 exports.downloadSvgImage = downloadSvgImage;
 function replaceImageColor(image, imageData, color, particle) {
-    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity), imageRes = {
         color,
         gif: imageData.gif,
         data: {
@@ -93,7 +74,7 @@ function replaceImageColor(image, imageData, color, particle) {
             resolve(imageRes);
             domUrl.revokeObjectURL(url);
         });
-        img.addEventListener("error", async () => {
+        const errorHandler = async () => {
             domUrl.revokeObjectURL(url);
             const img2 = {
                 ...image,
@@ -104,7 +85,8 @@ function replaceImageColor(image, imageData, color, particle) {
             imageRes.loaded = true;
             imageRes.element = img2.element;
             resolve(imageRes);
-        });
+        };
+        img.addEventListener("error", () => void errorHandler());
         img.src = url;
     });
 }

package/cjs/index.js

@@ -1,10 +1,32 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadImageShape = void 0;
 const Utils_js_1 = require("./Utils.js");
-const ImageDrawer_js_1 = require("./ImageDrawer.js");
-const ImagePreloader_js_1 = require("./ImagePreloader.js");
 const engine_1 = require("@tsparticles/engine");
+const extLength = 3;
 function addLoadImageToEngine(engine) {
     if (engine.loadImage) {
         return;
@@ -24,14 +46,21 @@ function addLoadImageToEngine(engine) {
                 gif: data.gif ?? false,
                 name: data.name ?? data.src,
                 source: data.src,
-                type: data.src.substring(data.src.length - 3),
+                type: data.src.substring(data.src.length - extLength),
                 error: false,
                 loading: true,
                 replaceColor: data.replaceColor,
                 ratio: data.width && data.height ? data.width / data.height : undefined,
             };
             engine.images.push(image);
-            const imageFunc = data.gif ? Utils_js_1.loadGifImage : data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
+            let imageFunc;
+            if (data.gif) {
+                const { loadGifImage } = await Promise.resolve().then(() => __importStar(require("./GifUtils/Utils.js")));
+                imageFunc = loadGifImage;
+            }
+            else {
+                imageFunc = data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
+            }
             await imageFunc(image);
         }
         catch {
@@ -41,8 +70,9 @@ function addLoadImageToEngine(engine) {
 }
 async function loadImageShape(engine, refresh = true) {
     addLoadImageToEngine(engine);
-    const preloader = new ImagePreloader_js_1.ImagePreloaderPlugin(engine);
+    const { ImagePreloaderPlugin } = await Promise.resolve().then(() => __importStar(require("./ImagePreloader.js"))), { ImageDrawer } = await Promise.resolve().then(() => __importStar(require("./ImageDrawer.js")));
+    const preloader = new ImagePreloaderPlugin(engine);
     await engine.addPlugin(preloader, refresh);
-    await engine.addShape(["image", "images"], new ImageDrawer_js_1.ImageDrawer(engine), refresh);
+    await engine.addShape(["image", "images"], new ImageDrawer(engine), refresh);
 }
 exports.loadImageShape = loadImageShape;