@tsparticles/shape-image 3.0.0-alpha.1 → 3.0.0-beta.0

package/umd/Options/Interfaces/IPreload.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

package/umd/Utils.js

@@ -4,13 +4,14 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/engine", "./GifUtils/Utils"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.replaceImageColor = exports.downloadSvgImage = exports.loadImage = void 0;
+    exports.replaceImageColor = exports.downloadSvgImage = exports.loadGifImage = exports.loadImage = void 0;
     const engine_1 = require("@tsparticles/engine");
+    const Utils_1 = require("./GifUtils/Utils");
     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;
@@ -37,13 +38,32 @@
                 image.element = undefined;
                 image.error = true;
                 image.loading = false;
-                console.error(`Error tsParticles - loading image: ${image.source}`);
+                (0, engine_1.getLogger)().error(`${engine_1.errorPrefix} loading image: ${image.source}`);
                 resolve();
             });
             img.src = image.source;
         });
     }
     exports.loadImage = loadImage;
+    async function loadGifImage(image) {
+        if (image.type !== "gif") {
+            await loadImage(image);
+            return;
+        }
+        image.loading = true;
+        try {
+            image.gifData = await (0, Utils_1.decodeGIF)(image.source);
+            image.gifLoopCount = (0, Utils_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);
@@ -52,23 +72,26 @@
         image.loading = true;
         const response = await fetch(image.source);
         if (!response.ok) {
-            console.error("Error tsParticles - Image not found");
+            (0, engine_1.getLogger)().error(`${engine_1.errorPrefix} Image not found`);
             image.error = true;
         }
-        if (!image.error) {
+        else {
             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 }),
+            gif: imageData.gif,
+            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,
             source: imageData.src,
         };
         return new Promise((resolve) => {
@@ -81,7 +104,11 @@
             });
             img.addEventListener("error", async () => {
                 domUrl.revokeObjectURL(url);
-                const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
+                const img2 = {
+                    ...image,
+                    error: false,
+                    loading: true,
+                };
                 await loadImage(img2);
                 imageRes.loaded = true;
                 imageRes.element = img2.element;

package/umd/index.js

@@ -4,15 +4,55 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./ImageDrawer"], factory);
+        define(["require", "exports", "./Utils", "./ImageDrawer", "./ImagePreloader", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadImageShape = void 0;
+    const Utils_1 = require("./Utils");
     const ImageDrawer_1 = require("./ImageDrawer");
-    async function loadImageShape(engine) {
-        await engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer());
+    const ImagePreloader_1 = require("./ImagePreloader");
+    const engine_1 = require("@tsparticles/engine");
+    function addLoadImageToEngine(engine) {
+        if (engine.loadImage) {
+            return;
+        }
+        engine.loadImage = async (data) => {
+            if (!data.name && !data.src) {
+                throw new Error(`${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 = {
+                    gif: data.gif ?? false,
+                    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.gif ? Utils_1.loadGifImage : data.replaceColor ? Utils_1.downloadSvgImage : Utils_1.loadImage;
+                await imageFunc(image);
+            }
+            catch {
+                throw new Error(`${engine_1.errorPrefix} ${data.name ?? data.src} not found`);
+            }
+        };
+    }
+    async function loadImageShape(engine, refresh = true) {
+        addLoadImageToEngine(engine);
+        const preloader = new ImagePreloader_1.ImagePreloaderPlugin(engine);
+        await engine.addPlugin(preloader, refresh);
+        await engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer(engine), refresh);
     }
     exports.loadImageShape = loadImageShape;
 });

package/umd/types.js

@@ -0,0 +1,12 @@
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});