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

package/cjs/Options/Classes/FontTextMask.js

@@ -0,0 +1,30 @@
+"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/cjs/Options/Classes/ImageMask.js

@@ -0,0 +1,17 @@
+"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/cjs/Options/Classes/TextMask.js

@@ -0,0 +1,27 @@
+"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/cjs/Options/Classes/TextMaskLine.js

@@ -0,0 +1,21 @@
+"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/cjs/Options/Interfaces/ICanvasMask.js

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

package/cjs/Options/Interfaces/ICanvasMaskOverride.js

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

package/cjs/Options/Interfaces/ICanvasMaskPixels.js

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

package/cjs/Options/Interfaces/IFontTextMask.js

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

package/cjs/Options/Interfaces/IImageMask.js

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

package/cjs/Options/Interfaces/ITextMask.js

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

package/cjs/Options/Interfaces/ITextMaskLine.js

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

package/cjs/index.js

@@ -0,0 +1,44 @@
+"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.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;
+    }
+}
+function loadCanvasMaskPlugin(engine) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const plugin = new CanvasMaskPlugin(engine);
+        yield engine.addPlugin(plugin);
+    });
+}
+exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;

package/cjs/types.js

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

package/cjs/utils.js

@@ -0,0 +1,128 @@
+"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;

package/esm/CanvasMaskInstance.js

@@ -0,0 +1,46 @@
+import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData } from "./utils";
+export 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 getImageData(url, offset);
+        }
+        else if (options.text) {
+            const textOptions = options.text;
+            const data = 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 = getCanvasImageData(context, canvas, offset);
+        }
+        addParticlesFromCanvasPixels(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+    }
+}

package/esm/Options/Classes/CanvasMask.js

@@ -0,0 +1,54 @@
+import { CanvasMaskOverride } from "./CanvasMaskOverride";
+import { CanvasMaskPixels } from "./CanvasMaskPixels";
+import { ImageMask } from "./ImageMask";
+import { TextMask } from "./TextMask";
+export class CanvasMask {
+    constructor() {
+        this.enable = false;
+        this.override = new CanvasMaskOverride();
+        this.pixels = new 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();
+            }
+            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();
+            }
+            this.text.load(data.text);
+        }
+    }
+}

package/esm/Options/Classes/CanvasMaskOverride.js

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

package/esm/Options/Classes/CanvasMaskPixels.js

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

package/esm/Options/Classes/FontTextMask.js

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

package/esm/Options/Classes/ImageMask.js

@@ -0,0 +1,13 @@
+export class ImageMask {
+    constructor() {
+        this.src = "";
+    }
+    load(data) {
+        if (!data) {
+            return;
+        }
+        if (data.src !== undefined) {
+            this.src = data.src;
+        }
+    }
+}

package/esm/Options/Classes/TextMask.js

@@ -0,0 +1,23 @@
+import { FontTextMask } from "./FontTextMask";
+import { TextMaskLine } from "./TextMaskLine";
+export class TextMask {
+    constructor() {
+        this.color = "#000000";
+        this.font = new FontTextMask();
+        this.lines = new 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;
+        }
+    }
+}

package/esm/Options/Classes/TextMaskLine.js

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

package/esm/Options/Interfaces/ICanvasMask.js

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

package/esm/Options/Interfaces/ICanvasMaskOverride.js

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

package/esm/Options/Interfaces/ICanvasMaskPixels.js

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

package/esm/Options/Interfaces/IFontTextMask.js

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

package/esm/Options/Interfaces/IImageMask.js

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

package/esm/Options/Interfaces/ITextMask.js

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

package/esm/Options/Interfaces/ITextMaskLine.js

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

package/esm/index.js

@@ -0,0 +1,29 @@
+import { CanvasMask } from "./Options/Classes/CanvasMask";
+import { CanvasMaskInstance } from "./CanvasMaskInstance";
+class CanvasMaskPlugin {
+    constructor(engine) {
+        this.id = "canvasMask";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return new 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();
+        }
+        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;
+    }
+}
+export async function loadCanvasMaskPlugin(engine) {
+    const plugin = new CanvasMaskPlugin(engine);
+    await engine.addPlugin(plugin);
+}

package/esm/types.js

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