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

package/cjs/Utils.js

@@ -1,16 +1,8 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 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_js_1 = require("./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;
@@ -24,55 +16,73 @@ function replaceColorSvg(imageShape, color, opacity) {
     const preFillIndex = svgData.indexOf(">");
     return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
 }
-function loadImage(image) {
-    return __awaiter(this, void 0, void 0, function* () {
-        return new Promise((resolve) => {
-            image.loading = true;
-            const img = new Image();
-            image.element = img;
-            img.addEventListener("load", () => {
-                image.loading = false;
-                resolve();
-            });
-            img.addEventListener("error", () => {
-                image.element = undefined;
-                image.error = true;
-                image.loading = false;
-                console.error(`Error tsParticles - loading image: ${image.source}`);
-                resolve();
-            });
-            img.src = image.source;
+async function loadImage(image) {
+    return new Promise((resolve) => {
+        image.loading = true;
+        const img = new Image();
+        image.element = img;
+        img.addEventListener("load", () => {
+            image.loading = false;
+            resolve();
+        });
+        img.addEventListener("error", () => {
+            image.element = undefined;
+            image.error = true;
+            image.loading = false;
+            (0, engine_1.getLogger)().error(`${engine_1.errorPrefix} loading image: ${image.source}`);
+            resolve();
         });
+        img.src = image.source;
     });
 }
 exports.loadImage = loadImage;
-function downloadSvgImage(image) {
-    return __awaiter(this, void 0, void 0, function* () {
-        if (image.type !== "svg") {
-            yield loadImage(image);
-            return;
-        }
-        image.loading = true;
-        const response = yield fetch(image.source);
-        if (!response.ok) {
-            console.error("Error tsParticles - Image not found");
-            image.error = true;
-        }
-        if (!image.error) {
-            image.svgData = yield response.text();
+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;
         }
-        image.loading = false;
-    });
+    }
+    catch {
+        image.error = true;
+    }
+    image.loading = false;
+}
+exports.loadGifImage = loadGifImage;
+async function downloadSvgImage(image) {
+    if (image.type !== "svg") {
+        await loadImage(image);
+        return;
+    }
+    image.loading = true;
+    const response = await fetch(image.source);
+    if (!response.ok) {
+        (0, engine_1.getLogger)().error(`${engine_1.errorPrefix} Image not found`);
+        image.error = true;
+    }
+    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) => {
@@ -83,14 +93,18 @@ function replaceImageColor(image, imageData, color, particle) {
             resolve(imageRes);
             domUrl.revokeObjectURL(url);
         });
-        img.addEventListener("error", () => __awaiter(this, void 0, void 0, function* () {
+        img.addEventListener("error", async () => {
             domUrl.revokeObjectURL(url);
-            const img2 = Object.assign(Object.assign({}, image), { error: false, loading: true });
-            yield loadImage(img2);
+            const img2 = {
+                ...image,
+                error: false,
+                loading: true,
+            };
+            await loadImage(img2);
             imageRes.loaded = true;
             imageRes.element = img2.element;
             resolve(imageRes);
-        }));
+        });
         img.src = url;
     });
 }

package/cjs/index.js

@@ -1,19 +1,48 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadImageShape = void 0;
-const ImageDrawer_1 = require("./ImageDrawer");
-function loadImageShape(engine) {
-    return __awaiter(this, void 0, void 0, function* () {
-        yield engine.addShape(["image", "images"], new ImageDrawer_1.ImageDrawer());
-    });
+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");
+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_js_1.loadGifImage : data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_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_js_1.ImagePreloaderPlugin(engine);
+    await engine.addPlugin(preloader, refresh);
+    await engine.addShape(["image", "images"], new ImageDrawer_js_1.ImageDrawer(engine), refresh);
 }
 exports.loadImageShape = loadImageShape;

package/cjs/package.json

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

package/cjs/types.js

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

package/esm/GifUtils/ByteStream.js

@@ -0,0 +1,44 @@
+export 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++;
+    }
+}

package/esm/GifUtils/Constants.js

@@ -0,0 +1,2 @@
+export const InterlaceOffsets = [0, 4, 2, 1];
+export const InterlaceSteps = [8, 8, 4, 2];

package/esm/GifUtils/Enums/DisposalMethod.js

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

package/esm/GifUtils/Types/ApplicationExtension.js

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

package/esm/GifUtils/Types/Frame.js

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

package/esm/GifUtils/Types/GIF.js

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

package/esm/GifUtils/Types/GIFDataHeaders.js

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

package/esm/GifUtils/Types/GIFProgressCallbackFunction.js

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

package/esm/GifUtils/Types/PlainTextData.js

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

package/esm/GifUtils/Utils.js

@@ -0,0 +1,324 @@
+import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
+import { ByteStream } from "./ByteStream.js";
+function parseColorTable(byteStream, count) {
+    const colors = [];
+    for (let i = 0; i < count; i++) {
+        colors.push({
+            r: byteStream.data[byteStream.pos],
+            g: byteStream.data[byteStream.pos + 1],
+            b: byteStream.data[byteStream.pos + 2],
+        });
+        byteStream.pos += 3;
+    }
+    return colors;
+}
+async function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
+    switch (byteStream.nextByte()) {
+        case 249: {
+            const frame = gif.frames[getFrameIndex(false)];
+            byteStream.pos++;
+            const packedByte = byteStream.nextByte();
+            frame.GCreserved = (packedByte & 0xe0) >>> 5;
+            frame.disposalMethod = (packedByte & 0x1c) >>> 2;
+            frame.userInputDelayFlag = (packedByte & 2) === 2;
+            const transparencyFlag = (packedByte & 1) === 1;
+            frame.delayTime = byteStream.nextTwoBytes() * 0xa;
+            const transparencyIndex = byteStream.nextByte();
+            if (transparencyFlag) {
+                getTransparencyIndex(transparencyIndex);
+            }
+            byteStream.pos++;
+            break;
+        }
+        case 255: {
+            byteStream.pos++;
+            const applicationExtension = {
+                identifier: byteStream.getString(8),
+                authenticationCode: byteStream.getString(3),
+                data: byteStream.readSubBlocksBin(),
+            };
+            gif.applicationExtensions.push(applicationExtension);
+            break;
+        }
+        case 254: {
+            gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
+            break;
+        }
+        case 1: {
+            if (gif.globalColorTable.length === 0) {
+                throw new EvalError("plain text extension without global color table");
+            }
+            byteStream.pos++;
+            gif.frames[getFrameIndex(false)].plainTextData = {
+                left: byteStream.nextTwoBytes(),
+                top: byteStream.nextTwoBytes(),
+                width: byteStream.nextTwoBytes(),
+                height: byteStream.nextTwoBytes(),
+                charSize: {
+                    width: byteStream.nextTwoBytes(),
+                    height: byteStream.nextTwoBytes(),
+                },
+                foregroundColor: byteStream.nextByte(),
+                backgroundColor: byteStream.nextByte(),
+                text: byteStream.readSubBlocks(),
+            };
+            break;
+        }
+        default:
+            byteStream.skipSubBlocks();
+            break;
+    }
+}
+async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
+    const frame = gif.frames[getFrameIndex(true)];
+    frame.left = byteStream.nextTwoBytes();
+    frame.top = byteStream.nextTwoBytes();
+    frame.width = byteStream.nextTwoBytes();
+    frame.height = byteStream.nextTwoBytes();
+    const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;
+    frame.sortFlag = (packedByte & 0x20) === 0x20;
+    frame.reserved = (packedByte & 0x18) >>> 3;
+    const localColorCount = 1 << ((packedByte & 7) + 1);
+    if (localColorTableFlag) {
+        frame.localColorTable = parseColorTable(byteStream, localColorCount);
+    }
+    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 };
+    };
+    const image = (() => {
+        try {
+            return new ImageData(frame.width, frame.height, { colorSpace: "srgb" });
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === "IndexSizeError") {
+                return null;
+            }
+            throw error;
+        }
+    })();
+    if (image == null) {
+        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 (InterlaceOffsets[pass] < frame.height) {
+                for (let pixelPos = 0, lineIndex = 0;;) {
+                    const last = code;
+                    code = readBits(pos, size);
+                    pos += size + 1;
+                    if (code === clearCode) {
+                        size = minCodeSize + 1;
+                        dic.length = clearCode + 2;
+                        for (let i = 0; i < dic.length; i++) {
+                            dic[i] = i < clearCode ? [i] : [];
+                        }
+                    }
+                    else {
+                        if (code >= dic.length) {
+                            dic.push(dic[last].concat(dic[last][0]));
+                        }
+                        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]);
+                            image.data.set([r, g, b, a], InterlaceOffsets[pass] * frame.width +
+                                InterlaceSteps[pass] * lineIndex +
+                                (pixelPos % (frame.width * 4)));
+                            pixelPos += 4;
+                        }
+                        if (dic.length === 1 << size && size < 0xc) {
+                            size++;
+                        }
+                    }
+                    if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
+                        lineIndex++;
+                        if (InterlaceOffsets[pass] + InterlaceSteps[pass] * lineIndex >= frame.height) {
+                            break;
+                        }
+                    }
+                }
+            }
+            progressCallback?.(byteStream.pos / (byteStream.data.length - 1), getFrameIndex(false) + 1, image, { x: frame.left, y: frame.top }, { width: gif.width, height: gif.height });
+        }
+        frame.image = image;
+        frame.bitmap = await createImageBitmap(image);
+    }
+    else {
+        for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pixelPos = -4;;) {
+            const last = code;
+            code = readBits(pos, size);
+            pos += size;
+            if (code === clearCode) {
+                size = minCodeSize + 1;
+                dic.length = clearCode + 2;
+                for (let i = 0; i < dic.length; i++) {
+                    dic[i] = i < clearCode ? [i] : [];
+                }
+            }
+            else {
+                if (code === clearCode + 1) {
+                    break;
+                }
+                if (code >= dic.length) {
+                    dic.push(dic[last].concat(dic[last][0]));
+                }
+                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]);
+                    image.data.set([r, g, b, a], (pixelPos += 4));
+                }
+                if (dic.length >= 1 << size && size < 0xc) {
+                    size++;
+                }
+            }
+        }
+        frame.image = image;
+        frame.bitmap = await createImageBitmap(image);
+        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) {
+    switch (byteStream.nextByte()) {
+        case 59:
+            return true;
+        case 44:
+            await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
+            break;
+        case 33:
+            await parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
+            break;
+        default:
+            throw new EvalError("undefined block found");
+    }
+    return false;
+}
+export function getGIFLoopAmount(gif) {
+    for (const extension of gif.applicationExtensions) {
+        if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
+            continue;
+        }
+        return extension.data[1] + (extension.data[2] << 8);
+    }
+    return NaN;
+}
+export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
+    if (!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 = {
+        width: 0,
+        height: 0,
+        totalTime: 0,
+        colorRes: 0,
+        pixelAspectRatio: 0,
+        frames: [],
+        sortFlag: false,
+        globalColorTable: [],
+        backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
+        comments: [],
+        applicationExtensions: [],
+    }, byteStream = new ByteStream(new Uint8ClampedArray(buffer));
+    if (byteStream.getString(6) !== "GIF89a") {
+        throw new Error("not a supported GIF file");
+    }
+    gif.width = byteStream.nextTwoBytes();
+    gif.height = byteStream.nextTwoBytes();
+    const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;
+    gif.colorRes = (packedByte & 0x70) >>> 4;
+    gif.sortFlag = (packedByte & 8) === 8;
+    const globalColorCount = 1 << ((packedByte & 7) + 1), backgroundColorIndex = byteStream.nextByte();
+    gif.pixelAspectRatio = byteStream.nextByte();
+    if (gif.pixelAspectRatio !== 0) {
+        gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;
+    }
+    if (globalColorTableFlag) {
+        gif.globalColorTable = parseColorTable(byteStream, globalColorCount);
+    }
+    const backgroundImage = (() => {
+        try {
+            return new ImageData(gif.width, gif.height, { colorSpace: "srgb" });
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === "IndexSizeError") {
+                return null;
+            }
+            throw error;
+        }
+    })();
+    if (backgroundImage == null) {
+        throw new Error("GIF frame size is to large");
+    }
+    const { r, g, b } = gif.globalColorTable[backgroundColorIndex];
+    backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);
+    for (let i = 4; i < backgroundImage.data.length; i *= 2) {
+        backgroundImage.data.copyWithin(i, 0, i);
+    }
+    gif.backgroundImage = backgroundImage;
+    let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;
+    const getframeIndex = (increment) => {
+        if (increment) {
+            incrementFrameIndex = true;
+        }
+        return frameIndex;
+    };
+    const getTransparencyIndex = (newValue) => {
+        if (newValue != null) {
+            transparencyIndex = newValue;
+        }
+        return transparencyIndex;
+    };
+    try {
+        do {
+            if (incrementFrameIndex) {
+                gif.frames.push({
+                    left: 0,
+                    top: 0,
+                    width: 0,
+                    height: 0,
+                    disposalMethod: 0,
+                    image: new ImageData(1, 1, { colorSpace: "srgb" }),
+                    plainTextData: null,
+                    userInputDelayFlag: false,
+                    delayTime: 0,
+                    sortFlag: false,
+                    localColorTable: [],
+                    reserved: 0,
+                    GCreserved: 0,
+                });
+                frameIndex++;
+                transparencyIndex = -1;
+                incrementFrameIndex = false;
+            }
+        } while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, progressCallback)));
+        gif.frames.length--;
+        for (const frame of gif.frames) {
+            if (frame.userInputDelayFlag && frame.delayTime === 0) {
+                gif.totalTime = Infinity;
+                break;
+            }
+            gif.totalTime += frame.delayTime;
+        }
+        return gif;
+    }
+    catch (error) {
+        if (error instanceof EvalError) {
+            throw new Error(`error while parsing frame ${frameIndex} "${error.message}"`);
+        }
+        throw error;
+    }
+}