@tsparticles/plugin-canvas-mask 3.0.0-alpha.0

package/types/types.d.ts

@@ -0,0 +1,12 @@
+import type { Container, IOptions, Options } from "@tsparticles/engine";
+import type { CanvasMask } from "./Options/Classes/CanvasMask";
+import type { ICanvasMask } from "./Options/Interfaces/ICanvasMask";
+export type ICanvasMaskOptions = IOptions & {
+    canvasMask?: ICanvasMask;
+};
+export type CanvasMaskOptions = Options & {
+    canvasMask?: CanvasMask;
+};
+export type CanvasMaskContainer = Container & {
+    actualOptions: CanvasMaskOptions;
+};

package/types/utils.d.ts

@@ -0,0 +1,14 @@
+import type { Container, ICoordinates, IDimension, IRgba } from "@tsparticles/engine";
+import type { ICanvasMaskOverride } from "./Options/Interfaces/ICanvasMaskOverride";
+import type { TextMask } from "./Options/Classes/TextMask";
+export type CanvasPixelData = {
+    height: number;
+    pixels: IRgba[][];
+    width: number;
+};
+export declare function shuffle<T>(array: T[]): T[];
+export declare function addParticlesFromCanvasPixels(container: Container, data: CanvasPixelData, position: ICoordinates, scale: number, override: ICanvasMaskOverride, filter: (pixel: IRgba) => boolean): void;
+export declare function getCanvasImageData(ctx: CanvasRenderingContext2D, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
+export declare function getImageData(src: string, offset: number): Promise<CanvasPixelData>;
+export declare function getTextData(textOptions: TextMask, offset: number): CanvasPixelData | undefined;
+export declare const range: (n: number) => Array<number>;

package/umd/CanvasMaskInstance.js

@@ -0,0 +1,60 @@
+(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"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CanvasMaskInstance = void 0;
+    const utils_1 = require("./utils");
+    class CanvasMaskInstance {
+        constructor(container, engine) {
+            this._container = container;
+            this._engine = engine;
+        }
+        async init() {
+            const container = this._container, options = container.actualOptions.canvasMask;
+            if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+                return;
+            }
+            let pixelData = {
+                pixels: [],
+                height: 0,
+                width: 0,
+            };
+            const offset = options.pixels.offset;
+            if (options.image) {
+                const url = options.image.src;
+                if (!url) {
+                    return;
+                }
+                pixelData = await (0, utils_1.getImageData)(url, offset);
+            }
+            else if (options.text) {
+                const textOptions = options.text;
+                const data = (0, utils_1.getTextData)(textOptions, offset);
+                if (!data) {
+                    return;
+                }
+                pixelData = data;
+            }
+            else if (options.element || options.selector) {
+                const canvas = options.element || (options.selector && document.querySelector(options.selector));
+                if (!canvas) {
+                    return;
+                }
+                const context = canvas.getContext("2d");
+                if (!context) {
+                    return;
+                }
+                pixelData = (0, utils_1.getCanvasImageData)(context, canvas, offset);
+            }
+            (0, utils_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+        }
+    }
+    exports.CanvasMaskInstance = CanvasMaskInstance;
+});

package/umd/Options/Classes/CanvasMask.js

@@ -0,0 +1,68 @@
+(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", "./CanvasMaskOverride", "./CanvasMaskPixels", "./ImageMask", "./TextMask"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CanvasMask = void 0;
+    const CanvasMaskOverride_1 = require("./CanvasMaskOverride");
+    const CanvasMaskPixels_1 = require("./CanvasMaskPixels");
+    const ImageMask_1 = require("./ImageMask");
+    const TextMask_1 = require("./TextMask");
+    class CanvasMask {
+        constructor() {
+            this.enable = false;
+            this.override = new CanvasMaskOverride_1.CanvasMaskOverride();
+            this.pixels = new CanvasMaskPixels_1.CanvasMaskPixels();
+            this.position = {
+                x: 50,
+                y: 50,
+            };
+            this.scale = 1;
+        }
+        load(data) {
+            var _a, _b;
+            if (!data) {
+                return;
+            }
+            if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {
+                this.element = data.element;
+            }
+            if (data.enable !== undefined) {
+                this.enable = data.enable;
+            }
+            if (data.image) {
+                if (!this.image) {
+                    this.image = new ImageMask_1.ImageMask();
+                }
+                this.image.load(data.image);
+            }
+            this.pixels.load(data.pixels);
+            if (data.position) {
+                this.position = {
+                    x: (_a = data.position.x) !== null && _a !== void 0 ? _a : this.position.x,
+                    y: (_b = data.position.y) !== null && _b !== void 0 ? _b : this.position.y,
+                };
+            }
+            this.override.load(data.override);
+            if (data.scale !== undefined) {
+                this.scale = data.scale;
+            }
+            if (data.selector !== undefined) {
+                this.selector = data.selector;
+            }
+            if (data.text) {
+                if (!this.text) {
+                    this.text = new TextMask_1.TextMask();
+                }
+                this.text.load(data.text);
+            }
+        }
+    }
+    exports.CanvasMask = CanvasMask;
+});

package/umd/Options/Classes/CanvasMaskOverride.js

@@ -0,0 +1,31 @@
+(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.CanvasMaskOverride = void 0;
+    class CanvasMaskOverride {
+        constructor() {
+            this.color = true;
+            this.opacity = false;
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.color !== undefined) {
+                this.color = data.color;
+            }
+            if (data.opacity !== undefined) {
+                this.opacity = data.opacity;
+            }
+        }
+    }
+    exports.CanvasMaskOverride = CanvasMaskOverride;
+});

package/umd/Options/Classes/CanvasMaskPixels.js

@@ -0,0 +1,41 @@
+(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.CanvasMaskPixels = void 0;
+    class CanvasMaskPixels {
+        constructor() {
+            this.filter = (pixel) => pixel.a > 0;
+            this.offset = 4;
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.filter !== undefined) {
+                if (typeof data.filter === "string") {
+                    if (Object.hasOwn(window, data.filter)) {
+                        const filter = window[data.filter];
+                        if (typeof filter === "function") {
+                            this.filter = filter;
+                        }
+                    }
+                }
+                else {
+                    this.filter = data.filter;
+                }
+            }
+            if (data.offset !== undefined) {
+                this.offset = data.offset;
+            }
+        }
+    }
+    exports.CanvasMaskPixels = CanvasMaskPixels;
+});

package/umd/Options/Classes/FontTextMask.js

@@ -0,0 +1,40 @@
+(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.FontTextMask = void 0;
+    class FontTextMask {
+        constructor() {
+            this.family = "sans-serif";
+            this.size = 100;
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.family !== undefined) {
+                this.family = data.family;
+            }
+            if (data.size !== undefined) {
+                this.size = data.size;
+            }
+            if (data.style !== undefined) {
+                this.style = data.style;
+            }
+            if (data.variant !== undefined) {
+                this.variant = data.variant;
+            }
+            if (data.weight !== undefined) {
+                this.weight = data.weight;
+            }
+        }
+    }
+    exports.FontTextMask = FontTextMask;
+});

package/umd/Options/Classes/ImageMask.js

@@ -0,0 +1,27 @@
+(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.ImageMask = void 0;
+    class ImageMask {
+        constructor() {
+            this.src = "";
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.src !== undefined) {
+                this.src = data.src;
+            }
+        }
+    }
+    exports.ImageMask = ImageMask;
+});

package/umd/Options/Classes/TextMask.js

@@ -0,0 +1,37 @@
+(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", "./FontTextMask", "./TextMaskLine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.TextMask = void 0;
+    const FontTextMask_1 = require("./FontTextMask");
+    const TextMaskLine_1 = require("./TextMaskLine");
+    class TextMask {
+        constructor() {
+            this.color = "#000000";
+            this.font = new FontTextMask_1.FontTextMask();
+            this.lines = new TextMaskLine_1.TextMaskLine();
+            this.text = "";
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.color !== undefined) {
+                this.color = data.color;
+            }
+            this.font.load(data.font);
+            this.lines.load(data.lines);
+            if (data.text !== undefined) {
+                this.text = data.text;
+            }
+        }
+    }
+    exports.TextMask = TextMask;
+});

package/umd/Options/Classes/TextMaskLine.js

@@ -0,0 +1,31 @@
+(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.TextMaskLine = void 0;
+    class TextMaskLine {
+        constructor() {
+            this.separator = "\n";
+            this.spacing = 10;
+        }
+        load(data) {
+            if (!data) {
+                return;
+            }
+            if (data.separator !== undefined) {
+                this.separator = data.separator;
+            }
+            if (data.spacing !== undefined) {
+                this.spacing = data.spacing;
+            }
+        }
+    }
+    exports.TextMaskLine = TextMaskLine;
+});

package/umd/Options/Interfaces/ICanvasMask.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/Options/Interfaces/ICanvasMaskOverride.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/Options/Interfaces/ICanvasMaskPixels.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/Options/Interfaces/IFontTextMask.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/Options/Interfaces/IImageMask.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/Options/Interfaces/ITextMask.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/Options/Interfaces/ITextMaskLine.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/index.js

@@ -0,0 +1,43 @@
+(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", "./Options/Classes/CanvasMask", "./CanvasMaskInstance"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.loadCanvasMaskPlugin = void 0;
+    const CanvasMask_1 = require("./Options/Classes/CanvasMask");
+    const CanvasMaskInstance_1 = require("./CanvasMaskInstance");
+    class CanvasMaskPlugin {
+        constructor(engine) {
+            this.id = "canvasMask";
+            this._engine = engine;
+        }
+        getPlugin(container) {
+            return new CanvasMaskInstance_1.CanvasMaskInstance(container, this._engine);
+        }
+        loadOptions(options, source) {
+            if (!this.needsPlugin(source)) {
+                return;
+            }
+            let canvasMaskOptions = options.canvasMask;
+            if ((canvasMaskOptions === null || canvasMaskOptions === void 0 ? void 0 : canvasMaskOptions.load) === undefined) {
+                options.canvasMask = canvasMaskOptions = new CanvasMask_1.CanvasMask();
+            }
+            canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+        }
+        needsPlugin(options) {
+            var _a, _b;
+            return (_b = (_a = options === null || options === void 0 ? void 0 : options.canvasMask) === null || _a === void 0 ? void 0 : _a.enable) !== null && _b !== void 0 ? _b : false;
+        }
+    }
+    async function loadCanvasMaskPlugin(engine) {
+        const plugin = new CanvasMaskPlugin(engine);
+        await engine.addPlugin(plugin);
+    }
+    exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
+});

package/umd/types.js

@@ -0,0 +1,12 @@
+(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 });
+});

package/umd/utils.js

@@ -0,0 +1,138 @@
+(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", "@tsparticles/engine"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.range = exports.getTextData = exports.getImageData = exports.getCanvasImageData = exports.addParticlesFromCanvasPixels = exports.shuffle = void 0;
+    const engine_1 = require("@tsparticles/engine");
+    function shuffle(array) {
+        for (let currentIndex = array.length - 1; currentIndex >= 0; currentIndex--) {
+            const randomIndex = Math.floor((0, engine_1.getRandom)() * currentIndex);
+            [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+        }
+        return array;
+    }
+    exports.shuffle = shuffle;
+    function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+        const { height, width } = data, numPixels = height * width, indexArray = shuffle((0, exports.range)(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
+        let selectedPixels = 0;
+        const positionOffset = {
+            x: (canvasSize.width * position.x) / 100 - (width * scale) / 2,
+            y: (canvasSize.height * position.y) / 100 - (height * scale) / 2,
+        };
+        while (selectedPixels < maxParticles && indexArray.length) {
+            const nextIndex = indexArray.pop() || 0, pixelPos = {
+                x: nextIndex % width,
+                y: Math.floor(nextIndex / width),
+            }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
+            if (shouldCreateParticle) {
+                const pos = {
+                    x: pixelPos.x * scale + positionOffset.x,
+                    y: pixelPos.y * scale + positionOffset.y,
+                };
+                const pOptions = {};
+                if (override.color) {
+                    pOptions.color = {
+                        value: pixel,
+                    };
+                }
+                if (override.opacity) {
+                    pOptions.opacity = {
+                        value: pixel.a,
+                    };
+                }
+                container.particles.addParticle(pos, pOptions);
+                selectedPixels++;
+            }
+        }
+    }
+    exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
+    function getCanvasImageData(ctx, size, offset, clear = true) {
+        const imageData = ctx.getImageData(0, 0, size.width, size.height).data;
+        if (clear) {
+            ctx.clearRect(0, 0, size.width, size.height);
+        }
+        const pixels = [];
+        for (let i = 0; i < imageData.length; i += offset) {
+            const idx = i / offset, pos = {
+                x: idx % size.width,
+                y: Math.floor(idx / size.width),
+            };
+            if (!pixels[pos.y]) {
+                pixels[pos.y] = [];
+            }
+            pixels[pos.y][pos.x] = {
+                r: imageData[i],
+                g: imageData[i + 1],
+                b: imageData[i + 2],
+                a: imageData[i + 3] / 255,
+            };
+        }
+        return {
+            pixels,
+            width: Math.min(...pixels.map((row) => row.length)),
+            height: pixels.length,
+        };
+    }
+    exports.getCanvasImageData = getCanvasImageData;
+    function getImageData(src, offset) {
+        const image = new Image();
+        image.crossOrigin = "Anonymous";
+        const p = new Promise((resolve, reject) => {
+            image.onerror = reject;
+            image.onload = () => {
+                const canvas = document.createElement("canvas");
+                canvas.width = image.width;
+                canvas.height = image.height;
+                const context = canvas.getContext("2d");
+                if (!context) {
+                    return reject(new Error("Could not get canvas context"));
+                }
+                context.drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
+                resolve(getCanvasImageData(context, canvas, offset));
+            };
+        });
+        image.src = src;
+        return p;
+    }
+    exports.getImageData = getImageData;
+    function getTextData(textOptions, offset) {
+        const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
+        if (!text || !context) {
+            return;
+        }
+        const lines = text.split(linesOptions.separator), fontSize = typeof font.size === "number" ? `${font.size}px` : font.size, linesData = [];
+        let maxWidth = 0, totalHeight = 0;
+        for (const line of lines) {
+            context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+            const measure = context.measureText(line), lineData = {
+                measure,
+                text: line,
+                height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
+                width: measure.width,
+            };
+            maxWidth = Math.max(maxWidth || 0, lineData.width);
+            totalHeight += lineData.height + linesOptions.spacing;
+            linesData.push(lineData);
+        }
+        canvas.width = maxWidth;
+        canvas.height = totalHeight;
+        let currentHeight = 0;
+        for (const line of linesData) {
+            context.font = `${font.style || ""} ${font.variant || ""} ${font.weight || ""} ${fontSize} ${font.family}`;
+            context.fillStyle = color;
+            context.fillText(line.text, 0, currentHeight + line.measure.actualBoundingBoxAscent);
+            currentHeight += line.height + linesOptions.spacing;
+        }
+        return getCanvasImageData(context, canvas, offset);
+    }
+    exports.getTextData = getTextData;
+    const range = (n) => [...Array(n).keys()];
+    exports.range = range;
+});