@tsparticles/shape-emoji/browser/EmojiDrawer.js

tsParticles emoji shape

import { double, executeOnSingleOrMultiple, getRangeMax, isInArray, itemFromSingleOrMultiple, } from "@tsparticles/engine";
import { drawEmoji, validTypes } from "./Utils.js";
import { loadFont } from "@tsparticles/canvas-utils";
const defaultFont = '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif', noPadding = 0, firstItem = 0;
export class EmojiDrawer {
    #emojiShapeDict = new Map();
    destroy() {
        for (const [key, data] of this.#emojiShapeDict) {
            if (data instanceof ImageBitmap) {
                data.close();
            }
            this.#emojiShapeDict.delete(key);
        }
    }
    draw(data) {
        const key = data.particle.emojiDataKey;
        if (!key) {
            return;
        }
        const image = this.#emojiShapeDict.get(key);
        if (!image) {
            return;
        }
        drawEmoji(data, image);
    }
    async init(container) {
        const options = container.actualOptions, shapeData = options.particles.shape;
        if (!validTypes.some(t => isInArray(t, shapeData.type))) {
            return;
        }
        const promises = [loadFont(defaultFont)], shapeOptions = validTypes.map(t => shapeData.options[t])[firstItem];
        executeOnSingleOrMultiple(shapeOptions, shape => {
            if (shape.font) {
                promises.push(loadFont(shape.font));
            }
        });
        await Promise.all(promises);
    }
    particleDestroy(particle) {
        particle.emojiDataKey = undefined;
    }
    particleInit(container, particle) {
        const shapeData = particle.shapeData;
        if (!shapeData.value) {
            return;
        }
        const emoji = itemFromSingleOrMultiple(shapeData.value, particle.randomIndexData);
        if (!emoji) {
            return;
        }
        const emojiOptions = typeof emoji === "string"
            ? {
                font: shapeData.font ?? defaultFont,
                padding: shapeData.padding ?? noPadding,
                value: emoji,
            }
            : {
                font: defaultFont,
                padding: noPadding,
                ...shapeData,
                ...emoji,
            }, font = emojiOptions.font, value = emojiOptions.value, cacheKey = `${value}_${font}`;
        if (this.#emojiShapeDict.has(cacheKey)) {
            particle.emojiDataKey = cacheKey;
            return;
        }
        const padding = emojiOptions.padding * double, maxSize = getRangeMax(particle.size.value), fullSize = maxSize + padding, canvasSize = fullSize * double, cacheCanvas = new OffscreenCanvas(canvasSize, canvasSize), context = cacheCanvas.getContext("2d", container.canvas.render.settings);
        if (!context) {
            return;
        }
        context.font = `400 ${(maxSize * double).toString()}px ${font}`;
        context.textBaseline = "middle";
        context.textAlign = "center";
        context.fillText(value, fullSize, fullSize);
        const image = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
        this.#emojiShapeDict.set(cacheKey, image);
        particle.emojiDataKey = cacheKey;
    }
}