@tsparticles/shape-image 4.0.0-alpha.8 → 4.0.0-beta.0

package/umd/GifUtils/Utils.js

@@ -4,7 +4,7 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "@tsparticles/engine", "../Utils.js", "./Constants.js", "./ByteStream.js", "./Enums/DisposalMethod.js", "./Types/GIFDataHeaders.js"], factory);
+        define(["require", "exports", "../Utils.js", "@tsparticles/engine", "./Constants.js", "./ByteStream.js", "./Enums/DisposalMethod.js", "./Types/GIFDataHeaders.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
@@ -13,16 +13,13 @@
     exports.decodeGIF = decodeGIF;
     exports.drawGif = drawGif;
     exports.loadGifImage = loadGifImage;
-    const engine_1 = require("@tsparticles/engine");
     const Utils_js_1 = require("../Utils.js");
+    const engine_1 = require("@tsparticles/engine");
     const Constants_js_1 = require("./Constants.js");
     const ByteStream_js_1 = require("./ByteStream.js");
     const DisposalMethod_js_1 = require("./Enums/DisposalMethod.js");
     const GIFDataHeaders_js_1 = require("./Types/GIFDataHeaders.js");
-    const origin = {
-        x: 0,
-        y: 0,
-    }, defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
+    const defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
     function parseColorTable(byteStream, count) {
         const colors = [];
         for (let i = 0; i < count; i++) {
@@ -92,7 +89,13 @@
                 break;
         }
     }
-    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+    function readBits(imageData, pos, len) {
+        const bytePos = pos >>> 3, bitPos = pos & 7;
+        return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
+            (((1 << len) - 1) << bitPos)) >>>
+            bitPos);
+    }
+    async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
         const frame = gif.frames[getFrameIndex(true)];
         frame.left = byteStream.nextTwoBytes();
         frame.top = byteStream.nextTwoBytes();
@@ -111,10 +114,9 @@
                 return { r, g, b, a: 255 };
             }
             return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
-        };
-        const image = (() => {
+        }, image = (() => {
             try {
-                return new ImageData(frame.width, frame.height, { colorSpace: "srgb" });
+                return new ImageData(frame.width, frame.height, canvasSettings);
             }
             catch (error) {
                 if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -127,19 +129,13 @@
             throw new EvalError("GIF frame size is to large");
         }
         const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
-        const readBits = (pos, len) => {
-            const bytePos = pos >>> 3, bitPos = pos & 7;
-            return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
-                (((1 << len) - 1) << bitPos)) >>>
-                bitPos);
-        };
         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) {
                     let pixelPos = 0, lineIndex = 0, exit = false;
                     while (!exit) {
                         const last = code;
-                        code = readBits(pos, size);
+                        code = readBits(imageData, pos, size);
                         pos += size + 1;
                         if (code === clearCode) {
                             size = minCodeSize + 1;
@@ -184,7 +180,7 @@
             const dic = [[0]];
             for (;;) {
                 const last = code;
-                code = readBits(pos, size);
+                code = readBits(imageData, pos, size);
                 pos += size;
                 if (code === clearCode) {
                     size = minCodeSize + 1;
@@ -205,8 +201,8 @@
                     }
                     for (const item of dic[code]) {
                         const { r, g, b, a } = getColor(item);
-                        image.data.set([r, g, b, a], pixelPos);
                         pixelPos += 4;
+                        image.data.set([r, g, b, a], pixelPos);
                     }
                     if (dic.length >= 1 << size && size < 0xc) {
                         size++;
@@ -218,12 +214,12 @@
             progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, { x: frame.left, y: frame.top }, { width: gif.width, height: gif.height });
         }
     }
-    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+    async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
         switch (byteStream.nextByte()) {
             case GIFDataHeaders_js_1.GIFDataHeaders.EndOfFile:
                 return true;
             case GIFDataHeaders_js_1.GIFDataHeaders.Image:
-                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
+                await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);
                 break;
             case GIFDataHeaders_js_1.GIFDataHeaders.Extension:
                 parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
@@ -240,16 +236,15 @@
             }
             return extension.data[1] + (extension.data[2] << 8);
         }
-        return NaN;
+        return Number.NaN;
     }
-    async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+    async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
         avgAlpha ??= false;
         const res = await fetch(gifURL);
         if (!res.ok && res.status === 404) {
             throw new EvalError("file not found");
         }
-        const buffer = await res.arrayBuffer();
-        const gif = {
+        const buffer = await res.arrayBuffer(), gif = {
             width: 0,
             height: 0,
             totalTime: 0,
@@ -258,7 +253,7 @@
             frames: [],
             sortFlag: false,
             globalColorTable: [],
-            backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
+            backgroundImage: new ImageData(1, 1, canvasSettings),
             comments: [],
             applicationExtensions: [],
         }, byteStream = new ByteStream_js_1.ByteStream(new Uint8ClampedArray(buffer));
@@ -280,7 +275,7 @@
         }
         const backgroundImage = (() => {
             try {
-                return new ImageData(gif.width, gif.height, { colorSpace: "srgb" });
+                return new ImageData(gif.width, gif.height, canvasSettings);
             }
             catch (error) {
                 if (error instanceof DOMException && error.name === "IndexSizeError") {
@@ -304,8 +299,7 @@
                 incrementFrameIndex = true;
             }
             return frameIndex;
-        };
-        const getTransparencyIndex = (newValue) => {
+        }, getTransparencyIndex = (newValue) => {
             if (newValue != null) {
                 transparencyIndex = newValue;
             }
@@ -320,7 +314,7 @@
                         width: 0,
                         height: 0,
                         disposalMethod: DisposalMethod_js_1.DisposalMethod.Replace,
-                        image: new ImageData(1, 1, { colorSpace: "srgb" }),
+                        image: new ImageData(1, 1, canvasSettings),
                         plainTextData: null,
                         userInputDelayFlag: false,
                         delayTime: 0,
@@ -333,7 +327,7 @@
                     transparencyIndex = -1;
                     incrementFrameIndex = false;
                 }
-            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));
+            } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
             gif.frames.length--;
             for (const frame of gif.frames) {
                 if (frame.userInputDelayFlag && frame.delayTime === 0) {
@@ -346,23 +340,23 @@
         }
         catch (error) {
             if (error instanceof EvalError) {
-                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`);
+                throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
             }
             throw error;
         }
     }
-    function drawGif(data) {
+    function drawGif(data, canvasSettings) {
         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");
+        const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
         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);
+        offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
         particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;
         let frameIndex = particle.gifFrame ?? defaultFrame;
         const pos = { x: -image.gifData.width * engine_1.half, y: -image.gifData.height * engine_1.half }, frame = image.gifData.frames[frameIndex];
@@ -379,7 +373,7 @@
             case DisposalMethod_js_1.DisposalMethod.Replace:
                 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.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
                 break;
             case DisposalMethod_js_1.DisposalMethod.Combine:
                 offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
@@ -388,7 +382,7 @@
             case DisposalMethod_js_1.DisposalMethod.RestoreBackground:
                 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.clearRect(engine_1.originPoint.x, engine_1.originPoint.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);
                 }
@@ -398,11 +392,11 @@
                 break;
             case DisposalMethod_js_1.DisposalMethod.RestorePrevious:
                 {
-                    const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+                    const previousImageData = offscreenContext.getImageData(engine_1.originPoint.x, engine_1.originPoint.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);
+                    offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
+                    offscreenContext.putImageData(previousImageData, engine_1.originPoint.x, engine_1.originPoint.y);
                 }
                 break;
         }
@@ -414,20 +408,20 @@
                     return;
                 }
                 frameIndex = firstIndex;
-                offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
+                offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
             }
             particle.gifFrame = frameIndex;
         }
         context.scale(image.gifData.width / radius, image.gifData.height / radius);
     }
-    async function loadGifImage(image) {
+    async function loadGifImage(image, canvasSettings) {
         if (image.type !== "gif") {
             await (0, Utils_js_1.loadImage)(image);
             return;
         }
         image.loading = true;
         try {
-            image.gifData = await decodeGIF(image.source);
+            image.gifData = await decodeGIF(image.source, canvasSettings);
             image.gifLoopCount = getGIFLoopAmount(image.gifData);
             if (!image.gifLoopCount) {
                 image.gifLoopCount = Infinity;

package/umd/ImageDrawer.js

@@ -15,25 +15,10 @@
     const Utils_js_2 = require("./GifUtils/Utils.js");
     const sides = 12;
     class ImageDrawer {
+        _engine;
         constructor(engine) {
-            this.validTypes = ["image", "images"];
-            this.loadImageShape = async (imageShape) => {
-                if (!this._engine.loadImage) {
-                    throw new Error(`Image shape not initialized`);
-                }
-                await this._engine.loadImage({
-                    gif: imageShape.gif,
-                    name: imageShape.name,
-                    replaceColor: imageShape.replaceColor,
-                    src: imageShape.src,
-                });
-            };
             this._engine = engine;
         }
-        addImage(image) {
-            this._engine.images ??= [];
-            this._engine.images.push(image);
-        }
         draw(data) {
             const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
             if (!image) {
@@ -41,7 +26,7 @@
             }
             context.globalAlpha = opacity;
             if (image.gif && image.gifData) {
-                (0, Utils_js_2.drawGif)(data);
+                (0, Utils_js_2.drawGif)(data, particle.container.canvas.settings);
             }
             else if (element) {
                 const ratio = image.ratio, pos = {
@@ -60,36 +45,38 @@
             if (!options.preload || !this._engine.loadImage) {
                 return;
             }
+            const promises = [];
             for (const imageData of options.preload) {
-                await this._engine.loadImage(imageData);
+                promises.push(this._engine.loadImage(container, imageData));
             }
+            await Promise.all(promises);
         }
         loadShape(particle) {
-            if (particle.shape !== "image" && particle.shape !== "images") {
+            const { container } = particle;
+            if (!particle.shape || !Utils_js_1.shapeTypes.includes(particle.shape)) {
                 return;
             }
-            this._engine.images ??= [];
             const imageData = particle.shapeData;
             if (!imageData) {
                 return;
             }
-            const image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
-            if (!image) {
-                void this.loadImageShape(imageData).then(() => {
-                    this.loadShape(particle);
-                });
+            const images = this._engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
+            if (image) {
+                return;
             }
+            void this.loadImageShape(container, imageData).then(() => {
+                this.loadShape(particle);
+            });
         }
         particleInit(container, particle) {
             if (particle.shape !== "image" && particle.shape !== "images") {
                 return;
             }
-            this._engine.images ??= [];
-            const images = this._engine.images, imageData = particle.shapeData;
+            const images = this._engine.getImages?.(container), imageData = particle.shapeData;
             if (!imageData) {
                 return;
             }
-            const color = particle.getFillColor(), image = images.find((t) => t.name === imageData.name || t.source === imageData.src);
+            const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
             if (!image) {
                 return;
             }
@@ -122,16 +109,25 @@
                 if (!imageRes.ratio) {
                     imageRes.ratio = 1;
                 }
-                const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
+                const close = imageData.close ?? particle.shapeClose, imageShape = {
                     image: imageRes,
-                    fill,
                     close,
                 };
                 particle.image = imageShape.image;
-                particle.shapeFill = imageShape.fill;
                 particle.shapeClose = imageShape.close;
             })();
         }
+        loadImageShape = async (container, imageShape) => {
+            if (!this._engine.loadImage) {
+                throw new Error(`Image shape not initialized`);
+            }
+            await this._engine.loadImage(container, {
+                gif: imageShape.gif,
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor,
+                src: imageShape.src,
+            });
+        };
     }
     exports.ImageDrawer = ImageDrawer;
 });

package/umd/ImagePreloader.js

@@ -1,3 +1,36 @@
+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);
@@ -8,16 +41,19 @@
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ImagePreloaderPlugin = void 0;
     const Preload_js_1 = require("./Options/Classes/Preload.js");
     class ImagePreloaderPlugin {
-        constructor() {
-            this.id = "imagePreloader";
+        id = "image-preloader";
+        _engine;
+        constructor(engine) {
+            this._engine = engine;
         }
-        async getPlugin() {
-            await Promise.resolve();
-            return {};
+        async getPlugin(container) {
+            const { ImagePreloaderInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImagePreloaderInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./ImagePreloaderInstance.js"], resolve_1, reject_1); }).then(__importStar));
+            return new ImagePreloaderInstance(this._engine, container);
         }
         loadOptions(_container, options, source) {
             if (!source?.preload) {

package/umd/ImagePreloaderInstance.js

@@ -0,0 +1,25 @@
+(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 });
+    exports.ImagePreloaderInstance = void 0;
+    class ImagePreloaderInstance {
+        _container;
+        _engine;
+        constructor(engine, container) {
+            this._engine = engine;
+            this._container = container;
+        }
+        destroy() {
+            this._engine.images?.delete(this._container);
+        }
+    }
+    exports.ImagePreloaderInstance = ImagePreloaderInstance;
+});

package/umd/Options/Classes/Preload.js

@@ -12,6 +12,12 @@
     exports.Preload = void 0;
     const engine_1 = require("@tsparticles/engine");
     class Preload {
+        gif;
+        height;
+        name;
+        replaceColor;
+        src;
+        width;
         constructor() {
             this.src = "";
             this.gif = false;

package/umd/Utils.js

@@ -9,10 +9,12 @@
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.shapeTypes = void 0;
     exports.loadImage = loadImage;
     exports.downloadSvgImage = downloadSvgImage;
     exports.replaceImageColor = replaceImageColor;
     const engine_1 = require("@tsparticles/engine");
+    exports.shapeTypes = ["image", "images"];
     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, hdr = false) {
@@ -22,13 +24,13 @@
         }
         const colorStyle = (0, engine_1.getStyleFromHsl)(color, hdr, opacity);
         if (svgData.includes("fill")) {
-            return svgData.replace(currentColorRegex, () => colorStyle);
+            return svgData.replaceAll(currentColorRegex, () => colorStyle);
         }
         const preFillIndex = svgData.indexOf(">");
         return `${svgData.substring(stringStart, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
     }
     async function loadImage(image) {
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             image.loading = true;
             const img = new Image();
             image.element = img;
@@ -53,12 +55,12 @@
         }
         image.loading = true;
         const response = await fetch(image.source);
-        if (!response.ok) {
-            (0, engine_1.getLogger)().error("Image not found");
-            image.error = true;
+        if (response.ok) {
+            image.svgData = await response.text();
         }
         else {
-            image.svgData = await response.text();
+            (0, engine_1.getLogger)().error("Image not found");
+            image.error = true;
         }
         image.loading = false;
     }

package/umd/index.js

@@ -37,24 +37,35 @@ var __importStar = (this && this.__importStar) || (function () {
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "./Utils.js"], 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 extLength = 3;
     function addLoadImageToEngine(engine) {
-        if (engine.loadImage) {
-            return;
-        }
-        engine.loadImage = async (data) => {
+        engine.getImages ??= (container) => {
+            engine.images ??= new Map();
+            let images = engine.images.get(container);
+            if (!images) {
+                images = [];
+                engine.images.set(container, images);
+            }
+            return images;
+        };
+        engine.loadImage ??= async (container, data) => {
+            if (!engine.getImages) {
+                throw new Error("No images collection found");
+            }
             if (!data.name && !data.src) {
                 throw new Error("No image source provided");
             }
-            engine.images ??= [];
-            if (engine.images.some((t) => t.name === data.name || t.source === data.src)) {
+            engine.images ??= new Map();
+            const containerImages = engine.getImages(container);
+            if (containerImages.some((t) => t.name === data.name || t.source === data.src)) {
                 return;
             }
             try {
@@ -68,11 +79,12 @@ var __importStar = (this && this.__importStar) || (function () {
                     replaceColor: data.replaceColor,
                     ratio: data.width && data.height ? data.width / data.height : undefined,
                 };
-                engine.images.push(image);
+                containerImages.push(image);
+                engine.images.set(container, containerImages);
                 let imageFunc;
                 if (data.gif) {
                     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;
+                    imageFunc = (img) => loadGifImage(img, { colorSpace: "srgb" });
                 }
                 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));
@@ -90,13 +102,15 @@ var __importStar = (this && this.__importStar) || (function () {
         };
     }
     async function loadImageShape(engine) {
-        engine.checkVersion("4.0.0-alpha.8");
+        engine.checkVersion("4.0.0-beta.0");
         await 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));
+            const { ImagePreloaderPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImagePreloader.js"))) : new Promise((resolve_4, reject_4) => { require(["./ImagePreloader.js"], resolve_4, reject_4); }).then(__importStar));
             addLoadImageToEngine(e);
-            const preloader = new ImagePreloaderPlugin();
-            e.addPlugin(preloader);
-            e.addShape(new ImageDrawer(e));
+            e.addPlugin(new ImagePreloaderPlugin(e));
+            e.addShape(Utils_js_1.shapeTypes, async () => {
+                const { ImageDrawer } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImageDrawer.js"))) : new Promise((resolve_5, reject_5) => { require(["./ImageDrawer.js"], resolve_5, reject_5); }).then(__importStar));
+                return new ImageDrawer(e);
+            });
         });
     }
 });

package/324.min.js

@@ -1,2 +0,0 @@
-/*! For license information please see 324.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).push([[324,337,413],{324(e,t,a){a.d(t,{ImageDrawer:()=>r});var o=a(303),i=a(413),n=a(337);class r{constructor(e){this.validTypes=["image","images"],this.loadImageShape=async e=>{if(!this._engine.loadImage)throw new Error("Image shape not initialized");await this._engine.loadImage({gif:e.gif,name:e.name,replaceColor:e.replaceColor,src:e.src})},this._engine=e}addImage(e){this._engine.images??=[],this._engine.images.push(e)}draw(e){const{context:t,radius:a,particle:i,opacity:r}=e,s=i.image,l=s?.element;if(s){if(t.globalAlpha=r,s.gif&&s.gifData)(0,n.zS)(e);else if(l){const e=s.ratio,i={x:-a,y:-a},n=a*o.double;t.drawImage(l,i.x,i.y,n,n/e)}t.globalAlpha=o.defaultAlpha}}getSidesCount(){return 12}async init(e){const t=e.actualOptions;if(t.preload&&this._engine.loadImage)for(const e of t.preload)await this._engine.loadImage(e)}loadShape(e){if("image"!==e.shape&&"images"!==e.shape)return;this._engine.images??=[];const t=e.shapeData;if(!t)return;this._engine.images.find((e=>e.name===t.name||e.source===t.src))||this.loadImageShape(t).then((()=>{this.loadShape(e)}))}particleInit(e,t){if("image"!==t.shape&&"images"!==t.shape)return;this._engine.images??=[];const a=this._engine.images,n=t.shapeData;if(!n)return;const r=t.getFillColor(),s=a.find((e=>e.name===n.name||e.source===n.src));if(!s)return;const l=n.replaceColor;s.loading?setTimeout((()=>{this.particleInit(e,t)})):(async()=>{let a;a=s.svgData&&r?await(0,i.d)(s,n,r,t,e.hdr):{color:r,data:s,element:s.element,gif:s.gif,gifData:s.gifData,gifLoopCount:s.gifLoopCount,loaded:!0,ratio:n.width&&n.height?n.width/n.height:s.ratio??o.defaultRatio,replaceColor:l,source:n.src},a.ratio||(a.ratio=1);const c={image:a,fill:n.fill??t.shapeFill,close:n.close??t.shapeClose};t.image=c.image,t.shapeFill=c.fill,t.shapeClose=c.close})()}}},337(e,t,a){a.d(t,{zS:()=>p,loadGifImage:()=>m});var o=a(303),i=a(413);const n=[0,4,2,1],r=[8,8,4,2];class s{constructor(e){this.pos=0,this.data=new Uint8ClampedArray(e)}getString(e){const t=this.data.slice(this.pos,this.pos+e);return this.pos+=t.length,t.reduce(((e,t)=>e+String.fromCharCode(t)),"")}nextByte(){return this.data[this.pos++]}nextTwoBytes(){return this.pos+=2,this.data[this.pos-2]+(this.data[this.pos-1]<<8)}readSubBlocks(){let e="",t=0;do{t=this.data[this.pos++];for(let a=t;--a>=0;e+=String.fromCharCode(this.data[this.pos++]));}while(0!==t);return e}readSubBlocksBin(){let e=this.data[this.pos],t=0;for(let a=0;0!==e;a+=e+1,e=this.data[this.pos+a])t+=e;const a=new Uint8Array(t);e=this.data[this.pos++];for(let t=0;0!==e;e=this.data[this.pos++])for(let o=e;--o>=0;a[t++]=this.data[this.pos++]);return a}skipSubBlocks(){for(const e=1,t=0;this.data[this.pos]!==t;this.pos+=this.data[this.pos]+e);this.pos++}}var l,c;!function(e){e[e.Replace=0]="Replace",e[e.Combine=1]="Combine",e[e.RestoreBackground=2]="RestoreBackground",e[e.RestorePrevious=3]="RestorePrevious",e[e.UndefinedA=4]="UndefinedA",e[e.UndefinedB=5]="UndefinedB",e[e.UndefinedC=6]="UndefinedC",e[e.UndefinedD=7]="UndefinedD"}(l||(l={})),function(e){e[e.Extension=33]="Extension",e[e.ApplicationExtension=255]="ApplicationExtension",e[e.GraphicsControlExtension=249]="GraphicsControlExtension",e[e.PlainTextExtension=1]="PlainTextExtension",e[e.CommentExtension=254]="CommentExtension",e[e.Image=44]="Image",e[e.EndOfFile=59]="EndOfFile"}(c||(c={}));const g=0,h=0;function d(e,t){const a=[];for(let o=0;o<t;o++)a.push({r:e.data[e.pos],g:e.data[e.pos+1],b:e.data[e.pos+2]}),e.pos+=3;return a}async function f(e,t,a,o,i,s){switch(e.nextByte()){case c.EndOfFile:return!0;case c.Image:await async function(e,t,a,o,i,s){const l=t.frames[o(!0)];l.left=e.nextTwoBytes(),l.top=e.nextTwoBytes(),l.width=e.nextTwoBytes(),l.height=e.nextTwoBytes();const c=e.nextByte(),g=!(128&~c),h=!(64&~c);l.sortFlag=!(32&~c),l.reserved=(24&c)>>>3;const f=1<<1+(7&c);g&&(l.localColorTable=d(e,f));const p=e=>{const{r:o,g:n,b:r}=(g?l.localColorTable:t.globalColorTable)[e];return e!==i(null)?{r:o,g:n,b:r,a:255}:{r:o,g:n,b:r,a:a?Math.trunc((o+n+r)/3):0}},m=(()=>{try{return new ImageData(l.width,l.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==m)throw new EvalError("GIF frame size is to large");const u=e.nextByte(),w=e.readSubBlocksBin(),x=1<<u,b=(e,t)=>{const a=e>>>3,o=7&e;return(w[a]+(w[a+1]<<8)+(w[a+2]<<16)&(1<<t)-1<<o)>>>o};if(h){for(let a=0,i=u+1,c=0,g=[[0]],h=0;h<4;h++){if(n[h]<l.height){let e=0,t=0,o=!1;for(;!o;){const s=a;if(a=b(c,i),c+=i+1,a===x){i=u+1,g.length=x+2;for(let e=0;e<g.length;e++)g[e]=e<x?[e]:[]}else{a>=g.length?g.push(g[s].concat(g[s][0])):s!==x&&g.push(g[s].concat(g[a][0]));for(const o of g[a]){const{r:a,g:i,b:s,a:c}=p(o);m.data.set([a,i,s,c],n[h]*l.width+r[h]*t+e%(4*l.width)),e+=4}g.length===1<<i&&i<12&&i++}e===4*l.width*(t+1)&&(t++,n[h]+r[h]*t>=l.height&&(o=!0))}}s?.(e.pos/(e.data.length-1),o(!1)+1,m,{x:l.left,y:l.top},{width:t.width,height:t.height})}l.image=m,l.bitmap=await createImageBitmap(m)}else{let a=0,i=u+1,n=0,r=-4;const c=[[0]];for(;;){const e=a;if(a=b(n,i),n+=i,a===x){i=u+1,c.length=x+2;for(let e=0;e<c.length;e++)c[e]=e<x?[e]:[]}else{if(a===x+1)break;a>=c.length?c.push(c[e].concat(c[e][0])):e!==x&&c.push(c[e].concat(c[a][0]));for(const e of c[a]){const{r:t,g:a,b:o,a:i}=p(e);m.data.set([t,a,o,i],r),r+=4}c.length>=1<<i&&i<12&&i++}}l.image=m,l.bitmap=await createImageBitmap(m),s?.((e.pos+1)/e.data.length,o(!1)+1,l.image,{x:l.left,y:l.top},{width:t.width,height:t.height})}}(e,t,a,o,i,s);break;case c.Extension:!function(e,t,a,o){switch(e.nextByte()){case c.GraphicsControlExtension:{const i=t.frames[a(!1)];e.pos++;const n=e.nextByte();i.GCreserved=(224&n)>>>5,i.disposalMethod=(28&n)>>>2,i.userInputDelayFlag=!(2&~n);const r=!(1&~n);i.delayTime=10*e.nextTwoBytes();const s=e.nextByte();r&&o(s),e.pos++;break}case c.ApplicationExtension:{e.pos++;const a={identifier:e.getString(8),authenticationCode:e.getString(3),data:e.readSubBlocksBin()};t.applicationExtensions.push(a);break}case c.CommentExtension:t.comments.push([a(!1),e.readSubBlocks()]);break;case c.PlainTextExtension:if(0===t.globalColorTable.length)throw new EvalError("plain text extension without global color table");e.pos++,t.frames[a(!1)].plainTextData={left:e.nextTwoBytes(),top:e.nextTwoBytes(),width:e.nextTwoBytes(),height:e.nextTwoBytes(),charSize:{width:e.nextTwoBytes(),height:e.nextTwoBytes()},foregroundColor:e.nextByte(),backgroundColor:e.nextByte(),text:e.readSubBlocks()};break;default:e.skipSubBlocks()}}(e,t,o,i);break;default:throw new EvalError("undefined block found")}return!1}function p(e){const{context:t,radius:a,particle:i,delta:n}=e,r=i.image;if(!r?.gifData||!r.gif)return;const s=new OffscreenCanvas(r.gifData.width,r.gifData.height),c=s.getContext("2d");if(!c)throw new Error("could not create offscreen canvas context");c.imageSmoothingQuality="low",c.imageSmoothingEnabled=!1,c.clearRect(g,h,s.width,s.height),i.gifLoopCount??=r.gifLoopCount??0;let d=i.gifFrame??0;const f={x:-r.gifData.width*o.half,y:-r.gifData.height*o.half},p=r.gifData.frames[d];if(i.gifTime??=0,p.bitmap){switch(t.scale(a/r.gifData.width,a/r.gifData.height),p.disposalMethod){case l.UndefinedA:case l.UndefinedB:case l.UndefinedC:case l.UndefinedD:case l.Replace:c.drawImage(p.bitmap,p.left,p.top),t.drawImage(s,f.x,f.y),c.clearRect(g,h,s.width,s.height);break;case l.Combine:c.drawImage(p.bitmap,p.left,p.top),t.drawImage(s,f.x,f.y);break;case l.RestoreBackground:c.drawImage(p.bitmap,p.left,p.top),t.drawImage(s,f.x,f.y),c.clearRect(g,h,s.width,s.height),r.gifData.globalColorTable.length?c.putImageData(r.gifData.backgroundImage,f.x,f.y):c.putImageData(r.gifData.frames[0].image,f.x+p.left,f.y+p.top);break;case l.RestorePrevious:{const e=c.getImageData(g,h,s.width,s.height);c.drawImage(p.bitmap,p.left,p.top),t.drawImage(s,f.x,f.y),c.clearRect(g,h,s.width,s.height),c.putImageData(e,g,h)}}if(i.gifTime+=n.value,i.gifTime>p.delayTime){if(i.gifTime-=p.delayTime,++d>=r.gifData.frames.length){if(--i.gifLoopCount<=0)return;d=0,c.clearRect(g,h,s.width,s.height)}i.gifFrame=d}t.scale(r.gifData.width/a,r.gifData.height/a)}}async function m(e){if("gif"===e.type){e.loading=!0;try{e.gifData=await async function(e,t,a){a??=!1;const o=await fetch(e);if(!o.ok&&404===o.status)throw new EvalError("file not found");const i=await o.arrayBuffer(),n={width:0,height:0,totalTime:0,colorRes:0,pixelAspectRatio:0,frames:[],sortFlag:!1,globalColorTable:[],backgroundImage:new ImageData(1,1,{colorSpace:"srgb"}),comments:[],applicationExtensions:[]},r=new s(new Uint8ClampedArray(i));if("GIF89a"!==r.getString(6))throw new Error("not a supported GIF file");n.width=r.nextTwoBytes(),n.height=r.nextTwoBytes();const c=r.nextByte(),g=!(128&~c);n.colorRes=(112&c)>>>4,n.sortFlag=!(8&~c);const h=1<<1+(7&c),p=r.nextByte();n.pixelAspectRatio=r.nextByte(),0!==n.pixelAspectRatio&&(n.pixelAspectRatio=(n.pixelAspectRatio+15)/64),g&&(n.globalColorTable=d(r,h));const m=(()=>{try{return new ImageData(n.width,n.height,{colorSpace:"srgb"})}catch(e){if(e instanceof DOMException&&"IndexSizeError"===e.name)return null;throw e}})();if(null==m)throw new Error("GIF frame size is to large");const{r:u,g:w,b:x}=n.globalColorTable[p];m.data.set(g?[u,w,x,255]:[0,0,0,0]);for(let e=4;e<m.data.length;e*=2)m.data.copyWithin(e,0,e);n.backgroundImage=m;let b=-1,y=!0,C=-1;const I=e=>(e&&(y=!0),b),E=e=>(null!=e&&(C=e),C);try{do{y&&(n.frames.push({left:0,top:0,width:0,height:0,disposalMethod:l.Replace,image:new ImageData(1,1,{colorSpace:"srgb"}),plainTextData:null,userInputDelayFlag:!1,delayTime:0,sortFlag:!1,localColorTable:[],reserved:0,GCreserved:0}),b++,C=-1,y=!1)}while(!await f(r,n,a,I,E,t));n.frames.length--;for(const e of n.frames){if(e.userInputDelayFlag&&0===e.delayTime){n.totalTime=1/0;break}n.totalTime+=e.delayTime}return n}catch(e){if(e instanceof EvalError)throw new Error(`error while parsing frame ${b.toString()} "${e.message}"`);throw e}}(e.source),e.gifLoopCount=function(e){for(const t of e.applicationExtensions)if(t.identifier+t.authenticationCode==="NETSCAPE2.0")return t.data[1]+(t.data[2]<<8);return NaN}(e.gifData),e.gifLoopCount||(e.gifLoopCount=1/0)}catch{e.error=!0}e.loading=!1}else await(0,i.loadImage)(e)}},413(e,t,a){a.d(t,{d:()=>s,downloadSvgImage:()=>r,loadImage:()=>n});var o=a(303);const i=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function n(e){return new Promise((t=>{e.loading=!0;const a=new Image;e.element=a,a.addEventListener("load",(()=>{e.loading=!1,t()})),a.addEventListener("error",(()=>{e.element=void 0,e.error=!0,e.loading=!1,(0,o.getLogger)().error(`Error loading image: ${e.source}`),t()})),a.src=e.source}))}async function r(e){if("svg"!==e.type)return void await n(e);e.loading=!0;const t=await fetch(e.source);t.ok?e.svgData=await t.text():((0,o.getLogger)().error("Image not found"),e.error=!0),e.loading=!1}function s(e,t,a,r,s=!1){const l=function(e,t,a,n=!1){const{svgData:r}=e;if(!r)return"";const s=(0,o.getStyleFromHsl)(t,n,a);if(r.includes("fill"))return r.replace(i,(()=>s));const l=r.indexOf(">");return`${r.substring(0,l)} fill="${s}"${r.substring(l)}`}(e,a,r.opacity?.value??1,s),c={color:a,gif:t.gif,data:{...e,svgData:l},loaded:!1,ratio:t.width/t.height,replaceColor:t.replaceColor,source:t.src};return new Promise((t=>{const a=new Blob([l],{type:"image/svg+xml"}),o=URL.createObjectURL(a),i=new Image;i.addEventListener("load",(()=>{c.loaded=!0,c.element=i,t(c),URL.revokeObjectURL(o)}));i.addEventListener("error",(()=>{(async()=>{URL.revokeObjectURL(o);const a={...e,error:!1,loading:!0};await n(a),c.loaded=!0,c.element=a.element,t(c)})()})),i.src=o}))}}}]);

package/324.min.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! tsParticles Image Shape v4.0.0-alpha.8 by Matteo Bruni */