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

package/browser/ImageDrawer.js

@@ -1,65 +1,148 @@
-import { downloadSvgImage, loadImage, replaceImageColor } from "./Utils";
+import { errorPrefix } from "@tsparticles/engine";
+import { replaceImageColor } from "./Utils.js";
 export class ImageDrawer {
-    constructor() {
-        this._images = [];
-    }
-    addImage(container, image) {
-        const containerImages = this.getImages(container);
-        containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
+    constructor(engine) {
+        this.loadImageShape = async (imageShape) => {
+            if (!this._engine.loadImage) {
+                throw new Error(`${errorPrefix} image shape not initialized`);
+            }
+            await this._engine.loadImage({
+                gif: imageShape.gif,
+                name: imageShape.name,
+                replaceColor: imageShape.replaceColor ?? false,
+                src: imageShape.src,
+            });
+        };
+        this._engine = engine;
     }
-    destroy() {
-        this._images = [];
+    addImage(image) {
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        this._engine.images.push(image);
     }
-    draw(context, particle, radius, opacity) {
-        var _a;
-        const image = particle.image, element = image === null || image === void 0 ? void 0 : image.element;
-        if (!element) {
+    draw(context, particle, radius, opacity, delta) {
+        const image = particle.image, element = image?.element;
+        if (!image) {
             return;
         }
-        const ratio = (_a = image === null || image === void 0 ? void 0 : image.ratio) !== null && _a !== void 0 ? _a : 1, pos = {
-            x: -radius,
-            y: -radius,
-        };
         context.globalAlpha = opacity;
-        context.drawImage(element, pos.x, pos.y, radius * 2, (radius * 2) / ratio);
-        context.globalAlpha = 1;
-    }
-    getImages(container) {
-        const containerImages = this._images.find((t) => t.id === container.id);
-        if (!containerImages) {
-            this._images.push({
-                id: container.id,
-                images: [],
-            });
-            return this.getImages(container);
+        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);
         }
-        else {
-            return containerImages;
+        else if (element) {
+            const ratio = image.ratio, pos = {
+                x: -radius,
+                y: -radius,
+            };
+            context.drawImage(element, pos.x, pos.y, radius * 2, (radius * 2) / ratio);
         }
+        context.globalAlpha = 1;
     }
     getSidesCount() {
         return 12;
     }
+    async init(container) {
+        const options = container.actualOptions;
+        if (!options.preload || !this._engine.loadImage) {
+            return;
+        }
+        for (const imageData of options.preload) {
+            await this._engine.loadImage(imageData);
+        }
+    }
     loadShape(particle) {
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        const container = particle.container, images = this.getImages(container).images, imageData = particle.shapeData, image = images.find((t) => t.source === imageData.src);
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const imageData = particle.shapeData, image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
-            this.loadImageShape(container, imageData).then(() => {
+            this.loadImageShape(imageData).then(() => {
                 this.loadShape(particle);
             });
         }
     }
     particleInit(container, particle) {
-        var _a;
         if (particle.shape !== "image" && particle.shape !== "images") {
             return;
         }
-        const images = this.getImages(container).images, imageData = particle.shapeData, color = particle.getFillColor(), replaceColor = (_a = imageData.replaceColor) !== null && _a !== void 0 ? _a : imageData.replace_color, image = images.find((t) => t.source === imageData.src);
+        if (!this._engine.images) {
+            this._engine.images = [];
+        }
+        const images = this._engine.images, imageData = particle.shapeData, color = particle.getFillColor(), image = images.find((t) => t.name === imageData.name || t.source === imageData.src);
         if (!image) {
             return;
         }
+        const replaceColor = imageData.replaceColor ?? image.replaceColor;
         if (image.loading) {
             setTimeout(() => {
                 this.particleInit(container, particle);
@@ -67,7 +150,6 @@ export class ImageDrawer {
             return;
         }
         (async () => {
-            var _a, _b;
             let imageRes;
             if (image.svgData && color) {
                 imageRes = await replaceImageColor(image, imageData, color, particle);
@@ -77,8 +159,11 @@ export class ImageDrawer {
                     color,
                     data: image,
                     element: image.element,
+                    gif: image.gif,
+                    gifData: image.gifData,
+                    gifLoopCount: image.gifLoopCount,
                     loaded: true,
-                    ratio: imageData.width / imageData.height,
+                    ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
                     replaceColor: replaceColor,
                     source: imageData.src,
                 };
@@ -86,7 +171,7 @@ export class ImageDrawer {
             if (!imageRes.ratio) {
                 imageRes.ratio = 1;
             }
-            const fill = (_a = imageData.fill) !== null && _a !== void 0 ? _a : particle.fill, close = (_b = imageData.close) !== null && _b !== void 0 ? _b : particle.close, imageShape = {
+            const fill = imageData.fill ?? particle.fill, close = imageData.close ?? particle.close, imageShape = {
                 image: imageRes,
                 fill,
                 close,
@@ -96,25 +181,4 @@ export class ImageDrawer {
             particle.close = imageShape.close;
         })();
     }
-    async loadImageShape(container, imageShape) {
-        var _a;
-        const source = imageShape.src;
-        if (!source) {
-            throw new Error("Error tsParticles - No image.src");
-        }
-        try {
-            const image = {
-                source: source,
-                type: source.substring(source.length - 3),
-                error: false,
-                loading: true,
-            };
-            this.addImage(container, image);
-            const imageFunc = ((_a = imageShape.replaceColor) !== null && _a !== void 0 ? _a : imageShape.replace_color) ? downloadSvgImage : loadImage;
-            await imageFunc(image);
-        }
-        catch (_b) {
-            throw new Error(`tsParticles error - ${imageShape.src} not found`);
-        }
-    }
 }

package/browser/ImagePreloader.js

@@ -0,0 +1,33 @@
+import { Preload } from "./Options/Classes/Preload.js";
+export class ImagePreloaderPlugin {
+    constructor(engine) {
+        this.id = "imagePreloader";
+        this._engine = engine;
+    }
+    getPlugin() {
+        return {};
+    }
+    loadOptions(options, source) {
+        if (!source || !source.preload) {
+            return;
+        }
+        if (!options.preload) {
+            options.preload = [];
+        }
+        const preloadOptions = options.preload;
+        for (const item of source.preload) {
+            const existing = preloadOptions.find((t) => t.name === item.name || t.src === item.src);
+            if (existing) {
+                existing.load(item);
+            }
+            else {
+                const preload = new Preload();
+                preload.load(item);
+                preloadOptions.push(preload);
+            }
+        }
+    }
+    needsPlugin() {
+        return true;
+    }
+}

package/browser/Options/Classes/Preload.js

@@ -0,0 +1,29 @@
+export class Preload {
+    constructor() {
+        this.src = "";
+        this.gif = false;
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.gif !== undefined) {
+            this.gif = data.gif;
+        }
+        if (data.height !== undefined) {
+            this.height = data.height;
+        }
+        if (data.name !== undefined) {
+            this.name = data.name;
+        }
+        if (data.replaceColor !== undefined) {
+            this.replaceColor = data.replaceColor;
+        }
+        if (data.src !== undefined) {
+            this.src = data.src;
+        }
+        if (data.width !== undefined) {
+            this.width = data.width;
+        }
+    }
+}

package/browser/Options/Interfaces/IPreload.js

@@ -0,0 +1 @@
+export {};

package/browser/Utils.js

@@ -1,4 +1,5 @@
-import { getStyleFromHsl } from "@tsparticles/engine";
+import { errorPrefix, getLogger, getStyleFromHsl } from "@tsparticles/engine";
+import { decodeGIF, getGIFLoopAmount } from "./GifUtils/Utils.js";
 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;
@@ -25,12 +26,30 @@ export async function loadImage(image) {
             image.element = undefined;
             image.error = true;
             image.loading = false;
-            console.error(`Error tsParticles - loading image: ${image.source}`);
+            getLogger().error(`${errorPrefix} loading image: ${image.source}`);
             resolve();
         });
         img.src = image.source;
     });
 }
+export async function loadGifImage(image) {
+    if (image.type !== "gif") {
+        await loadImage(image);
+        return;
+    }
+    image.loading = true;
+    try {
+        image.gifData = await decodeGIF(image.source);
+        image.gifLoopCount = getGIFLoopAmount(image.gifData) ?? 0;
+        if (image.gifLoopCount === 0) {
+            image.gifLoopCount = Infinity;
+        }
+    }
+    catch {
+        image.error = true;
+    }
+    image.loading = false;
+}
 export async function downloadSvgImage(image) {
     if (image.type !== "svg") {
         await loadImage(image);
@@ -39,22 +58,25 @@ export async function downloadSvgImage(image) {
     image.loading = true;
     const response = await fetch(image.source);
     if (!response.ok) {
-        console.error("Error tsParticles - Image not found");
+        getLogger().error(`${errorPrefix} Image not found`);
         image.error = true;
     }
-    if (!image.error) {
+    else {
         image.svgData = await response.text();
     }
     image.loading = false;
 }
 export function replaceImageColor(image, imageData, color, particle) {
-    var _a, _b, _c;
-    const svgColoredData = replaceColorSvg(image, color, (_b = (_a = particle.opacity) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 1), imageRes = {
+    const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
         color,
-        data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
+        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) => {
@@ -67,7 +89,11 @@ export function replaceImageColor(image, imageData, color, particle) {
         });
         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/browser/index.js

@@ -1,4 +1,44 @@
-import { ImageDrawer } from "./ImageDrawer";
-export async function loadImageShape(engine) {
-    await engine.addShape(["image", "images"], new ImageDrawer());
+import { downloadSvgImage, loadGifImage, loadImage } from "./Utils.js";
+import { ImageDrawer } from "./ImageDrawer.js";
+import { ImagePreloaderPlugin } from "./ImagePreloader.js";
+import { errorPrefix } from "@tsparticles/engine";
+function addLoadImageToEngine(engine) {
+    if (engine.loadImage) {
+        return;
+    }
+    engine.loadImage = async (data) => {
+        if (!data.name && !data.src) {
+            throw new Error(`${errorPrefix} no image source provided`);
+        }
+        if (!engine.images) {
+            engine.images = [];
+        }
+        if (engine.images.find((t) => t.name === data.name || t.source === data.src)) {
+            return;
+        }
+        try {
+            const image = {
+                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 ? loadGifImage : data.replaceColor ? downloadSvgImage : loadImage;
+            await imageFunc(image);
+        }
+        catch {
+            throw new Error(`${errorPrefix} ${data.name ?? data.src} not found`);
+        }
+    };
+}
+export async function loadImageShape(engine, refresh = true) {
+    addLoadImageToEngine(engine);
+    const preloader = new ImagePreloaderPlugin(engine);
+    await engine.addPlugin(preloader, refresh);
+    await engine.addShape(["image", "images"], new ImageDrawer(engine), refresh);
 }

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/cjs/GifUtils/ByteStream.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ByteStream = void 0;
+class ByteStream {
+    constructor(bytes) {
+        this.pos = 0;
+        this.data = new Uint8ClampedArray(bytes);
+    }
+    getString(count) {
+        const slice = this.data.slice(this.pos, this.pos + count);
+        this.pos += slice.length;
+        return slice.reduce((acc, curr) => acc + String.fromCharCode(curr), "");
+    }
+    nextByte() {
+        return this.data[this.pos++];
+    }
+    nextTwoBytes() {
+        this.pos += 2;
+        return this.data[this.pos - 2] + (this.data[this.pos - 1] << 8);
+    }
+    readSubBlocks() {
+        let blockString = "", size = 0;
+        do {
+            size = this.data[this.pos++];
+            for (let count = size; --count >= 0; blockString += String.fromCharCode(this.data[this.pos++])) {
+            }
+        } while (size !== 0);
+        return blockString;
+    }
+    readSubBlocksBin() {
+        let size = 0, len = 0;
+        for (let offset = 0; (size = this.data[this.pos + offset]) !== 0; offset += size + 1) {
+            len += size;
+        }
+        const blockData = new Uint8Array(len);
+        for (let i = 0; (size = this.data[this.pos++]) !== 0;) {
+            for (let count = size; --count >= 0; blockData[i++] = this.data[this.pos++]) {
+            }
+        }
+        return blockData;
+    }
+    skipSubBlocks() {
+        for (; this.data[this.pos] !== 0; this.pos += this.data[this.pos] + 1) {
+        }
+        this.pos++;
+    }
+}
+exports.ByteStream = ByteStream;

package/cjs/GifUtils/Constants.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InterlaceSteps = exports.InterlaceOffsets = void 0;
+exports.InterlaceOffsets = [0, 4, 2, 1];
+exports.InterlaceSteps = [8, 8, 4, 2];

package/cjs/GifUtils/Enums/DisposalMethod.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/GifUtils/Types/ApplicationExtension.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/GifUtils/Types/Frame.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/GifUtils/Types/GIF.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/GifUtils/Types/GIFDataHeaders.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/GifUtils/Types/GIFProgressCallbackFunction.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/GifUtils/Types/PlainTextData.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });