@tsparticles/shape-image 3.9.1 → 4.0.0-alpha.0

package/umd/GifUtils/Utils.js

@@ -109,7 +109,7 @@
             if (index !== getTransparencyIndex(null)) {
                 return { r, g, b, a: 255 };
             }
-            return { r, g, b, a: avgAlpha ? ~~((r + g + b) / 3) : 0 };
+            return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
         };
         const image = (() => {
             try {
@@ -179,9 +179,9 @@
             frame.bitmap = await createImageBitmap(image);
         }
         else {
-            let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4, exit = false;
+            let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;
             const dic = [[0]];
-            while (!exit) {
+            for (;;) {
                 const last = code;
                 code = readBits(pos, size);
                 pos += size;
@@ -194,7 +194,6 @@
                 }
                 else {
                     if (code === clearCode + 1) {
-                        exit = true;
                         break;
                     }
                     if (code >= dic.length) {
@@ -205,7 +204,8 @@
                     }
                     for (const item of dic[code]) {
                         const { r, g, b, a } = getColor(item);
-                        image.data.set([r, g, b, a], (pixelPos += 4));
+                        image.data.set([r, g, b, a], pixelPos);
+                        pixelPos += 4;
                     }
                     if (dic.length >= 1 << size && size < 0xc) {
                         size++;
@@ -242,8 +242,7 @@
         return NaN;
     }
     async function decodeGIF(gifURL, progressCallback, avgAlpha) {
-        if (!avgAlpha)
-            avgAlpha = false;
+        avgAlpha ??= false;
         const res = await fetch(gifURL);
         if (!res.ok && res.status === 404) {
             throw new EvalError("file not found");
@@ -346,7 +345,7 @@
         }
         catch (error) {
             if (error instanceof EvalError) {
-                throw new Error(`error while parsing frame ${frameIndex} "${error.message}"`);
+                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`);
             }
             throw error;
         }
@@ -363,14 +362,10 @@
         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;
-        }
+        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;
-        }
+        particle.gifTime ??= initialTime;
         if (!frame.bitmap) {
             return;
         }
@@ -432,7 +427,7 @@
         image.loading = true;
         try {
             image.gifData = await decodeGIF(image.source);
-            image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? defaultLoopCount;
+            image.gifLoopCount = getGIFLoopAmount(image.gifData);
             if (!image.gifLoopCount) {
                 image.gifLoopCount = Infinity;
             }

package/umd/ImageDrawer.js

@@ -4,13 +4,12 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "./Utils.js", "./GifUtils/Utils.js"], factory);
+        define(["require", "exports", "./Utils.js", "./GifUtils/Utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ImageDrawer = void 0;
-    const engine_1 = require("@tsparticles/engine");
     const Utils_js_1 = require("./Utils.js");
     const Utils_js_2 = require("./GifUtils/Utils.js");
     const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
@@ -19,21 +18,19 @@
             this.validTypes = ["image", "images"];
             this.loadImageShape = async (imageShape) => {
                 if (!this._engine.loadImage) {
-                    throw new Error(`${engine_1.errorPrefix} image shape not initialized`);
+                    throw new Error(`Image shape not initialized`);
                 }
                 await this._engine.loadImage({
                     gif: imageShape.gif,
                     name: imageShape.name,
-                    replaceColor: imageShape.replaceColor ?? false,
+                    replaceColor: imageShape.replaceColor,
                     src: imageShape.src,
                 });
             };
             this._engine = engine;
         }
         addImage(image) {
-            if (!this._engine.images) {
-                this._engine.images = [];
-            }
+            this._engine.images ??= [];
             this._engine.images.push(image);
         }
         draw(data) {
@@ -70,9 +67,7 @@
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
-            if (!this._engine.images) {
-                this._engine.images = [];
-            }
+            this._engine.images ??= [];
             const imageData = particle.shapeData;
             if (!imageData) {
                 return;
@@ -88,9 +83,7 @@
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
-            if (!this._engine.images) {
-                this._engine.images = [];
-            }
+            this._engine.images ??= [];
             const images = this._engine.images, imageData = particle.shapeData;
             if (!imageData) {
                 return;
@@ -99,7 +92,7 @@
             if (!image) {
                 return;
             }
-            const replaceColor = imageData.replaceColor ?? image.replaceColor;
+            const replaceColor = imageData.replaceColor;
             if (image.loading) {
                 setTimeout(() => {
                     this.particleInit(container, particle);
@@ -109,7 +102,7 @@
             void (async () => {
                 let imageRes;
                 if (image.svgData && color) {
-                    imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle);
+                    imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle, container.hdr);
                 }
                 else {
                     imageRes = {

package/umd/ImagePreloader.js

@@ -12,9 +12,8 @@
     exports.ImagePreloaderPlugin = void 0;
     const Preload_js_1 = require("./Options/Classes/Preload.js");
     class ImagePreloaderPlugin {
-        constructor(engine) {
+        constructor() {
             this.id = "imagePreloader";
-            this._engine = engine;
         }
         async getPlugin() {
             await Promise.resolve();
@@ -24,9 +23,7 @@
             if (!source?.preload) {
                 return;
             }
-            if (!options.preload) {
-                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);

package/umd/Utils.js

@@ -15,12 +15,12 @@
     const engine_1 = require("@tsparticles/engine");
     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) {
+    function replaceColorSvg(imageShape, color, opacity, hdr = false) {
         const { svgData } = imageShape;
         if (!svgData) {
             return "";
         }
-        const colorStyle = (0, engine_1.getStyleFromHsl)(color, opacity);
+        const colorStyle = (0, engine_1.getStyleFromHsl)(color, hdr, opacity);
         if (svgData.includes("fill")) {
             return svgData.replace(currentColorRegex, () => colorStyle);
         }
@@ -40,7 +40,7 @@
                 image.element = undefined;
                 image.error = true;
                 image.loading = false;
-                (0, engine_1.getLogger)().error(`${engine_1.errorPrefix} loading image: ${image.source}`);
+                (0, engine_1.getLogger)().error(`Error loading image: ${image.source}`);
                 resolve();
             });
             img.src = image.source;
@@ -54,7 +54,7 @@
         image.loading = true;
         const response = await fetch(image.source);
         if (!response.ok) {
-            (0, engine_1.getLogger)().error(`${engine_1.errorPrefix} Image not found`);
+            (0, engine_1.getLogger)().error("Image not found");
             image.error = true;
         }
         else {
@@ -62,8 +62,8 @@
         }
         image.loading = false;
     }
-    function replaceImageColor(image, imageData, color, particle) {
-        const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity), imageRes = {
+    function replaceImageColor(image, imageData, color, particle, hdr = false) {
+        const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity, hdr), imageRes = {
             color,
             gif: imageData.gif,
             data: {
@@ -76,15 +76,15 @@
             source: imageData.src,
         };
         return new Promise(resolve => {
-            const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
+            const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), url = URL.createObjectURL(svg), img = new Image();
             img.addEventListener("load", () => {
                 imageRes.loaded = true;
                 imageRes.element = img;
                 resolve(imageRes);
-                domUrl.revokeObjectURL(url);
+                URL.revokeObjectURL(url);
             });
             const errorHandler = async () => {
-                domUrl.revokeObjectURL(url);
+                URL.revokeObjectURL(url);
                 const img2 = {
                     ...image,
                     error: false,

package/umd/index.js

@@ -1,20 +1,49 @@
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 (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", "./Utils.js", "./ImageDrawer.js", "./ImagePreloader.js", "@tsparticles/engine", "./GifUtils/Utils.js"], factory);
+        define(["require", "exports"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadImageShape = loadImageShape;
-    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 Utils_js_2 = require("./GifUtils/Utils.js");
     const extLength = 3;
     function addLoadImageToEngine(engine) {
         if (engine.loadImage) {
@@ -22,17 +51,15 @@
         }
         engine.loadImage = async (data) => {
             if (!data.name && !data.src) {
-                throw new Error(`${engine_1.errorPrefix} no image source provided`);
+                throw new Error("No image source provided");
             }
-            if (!engine.images) {
-                engine.images = [];
-            }
-            if (engine.images.find((t) => t.name === data.name || t.source === data.src)) {
+            engine.images ??= [];
+            if (engine.images.some((t) => t.name === data.name || t.source === data.src)) {
                 return;
             }
             try {
                 const image = {
-                    gif: data.gif ?? false,
+                    gif: data.gif,
                     name: data.name ?? data.src,
                     source: data.src,
                     type: data.src.substring(data.src.length - extLength),
@@ -44,23 +71,32 @@
                 engine.images.push(image);
                 let imageFunc;
                 if (data.gif) {
-                    imageFunc = Utils_js_2.loadGifImage;
+                    const { loadGifImage } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./GifUtils/Utils.js"))) : new Promise((resolve_1, reject_1) => { require(["./GifUtils/Utils.js"], resolve_1, reject_1); }).then(__importStar));
+                    imageFunc = loadGifImage;
+                }
+                else if (data.replaceColor) {
+                    const { downloadSvgImage } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Utils.js"))) : new Promise((resolve_2, reject_2) => { require(["./Utils.js"], resolve_2, reject_2); }).then(__importStar));
+                    imageFunc = downloadSvgImage;
                 }
                 else {
-                    imageFunc = data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
+                    const { loadImage } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./Utils.js"))) : new Promise((resolve_3, reject_3) => { require(["./Utils.js"], resolve_3, reject_3); }).then(__importStar));
+                    imageFunc = loadImage;
                 }
                 await imageFunc(image);
             }
             catch {
-                throw new Error(`${engine_1.errorPrefix} ${data.name ?? data.src} not found`);
+                throw new Error(`${data.name ?? data.src} not found`);
             }
         };
     }
-    async function loadImageShape(engine, refresh = true) {
-        engine.checkVersion("3.9.1");
-        addLoadImageToEngine(engine);
-        const preloader = new ImagePreloader_js_1.ImagePreloaderPlugin(engine);
-        await engine.addPlugin(preloader, refresh);
-        await engine.addShape(new ImageDrawer_js_1.ImageDrawer(engine), refresh);
+    function loadImageShape(engine) {
+        engine.checkVersion("4.0.0-alpha.0");
+        engine.register(async (e) => {
+            const { ImageDrawer } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImageDrawer.js"))) : new Promise((resolve_4, reject_4) => { require(["./ImageDrawer.js"], resolve_4, reject_4); }).then(__importStar)), { ImagePreloaderPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImagePreloader.js"))) : new Promise((resolve_5, reject_5) => { require(["./ImagePreloader.js"], resolve_5, reject_5); }).then(__importStar));
+            addLoadImageToEngine(e);
+            const preloader = new ImagePreloaderPlugin();
+            e.addPlugin(preloader);
+            e.addShape(new ImageDrawer(e));
+        });
     }
 });