@tsparticles/plugin-canvas-mask 4.0.0-alpha.8 → 4.0.0-beta.0

package/types/Options/Interfaces/ITextMask.d.ts

@@ -1,8 +1,8 @@
 import type { IFontTextMask } from "./IFontTextMask.js";
+import type { ITextDataOptions } from "@tsparticles/canvas-utils";
 import type { ITextMaskLine } from "./ITextMaskLine.js";
-export interface ITextMask {
-    color: string;
+export interface ITextMask extends ITextDataOptions {
+    fill: boolean;
     font: IFontTextMask;
     lines: ITextMaskLine;
-    text: string;
 }

package/types/Options/Interfaces/ITextMaskLine.d.ts

@@ -1,4 +1,2 @@
-export interface ITextMaskLine {
-    separator: string;
-    spacing: number;
-}
+import type { ITextDataLinesOptions } from "@tsparticles/canvas-utils";
+export type ITextMaskLine = ITextDataLinesOptions;

package/types/utils.d.ts

@@ -1,12 +1,4 @@
-import { type Container, type ICoordinates, type IDimension, type IRgba } from "@tsparticles/engine";
+import { type Container, type ICoordinates, type IRgba } from "@tsparticles/engine";
+import type { CanvasPixelData } from "@tsparticles/canvas-utils";
 import type { ICanvasMaskOverride } from "./Options/Interfaces/ICanvasMaskOverride.js";
-import type { TextMask } from "./Options/Classes/TextMask.js";
-export interface CanvasPixelData {
-    height: number;
-    pixels: IRgba[][];
-    width: number;
-}
 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;

package/umd/CanvasMaskPlugin.js

@@ -46,9 +46,7 @@ var __importStar = (this && this.__importStar) || (function () {
     exports.CanvasMaskPlugin = void 0;
     const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
     class CanvasMaskPlugin {
-        constructor() {
-            this.id = "canvasMask";
-        }
+        id = "canvas-mask";
         async getPlugin(container) {
             const { CanvasMaskPluginInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./CanvasMaskPluginInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./CanvasMaskPluginInstance.js"], resolve_1, reject_1); }).then(__importStar));
             return new CanvasMaskPluginInstance(container);

package/umd/CanvasMaskPluginInstance.js

@@ -4,15 +4,17 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./utils.js", "@tsparticles/engine"], factory);
+        define(["require", "exports", "@tsparticles/canvas-utils", "@tsparticles/engine", "./utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CanvasMaskPluginInstance = void 0;
-    const utils_js_1 = require("./utils.js");
+    const canvas_utils_1 = require("@tsparticles/canvas-utils");
     const engine_1 = require("@tsparticles/engine");
+    const utils_js_1 = require("./utils.js");
     class CanvasMaskPluginInstance {
+        _container;
         constructor(container) {
             this._container = container;
         }
@@ -32,11 +34,10 @@
                 if (!url) {
                     return;
                 }
-                pixelData = await (0, utils_js_1.getImageData)(url, offset);
+                pixelData = await (0, canvas_utils_1.getImageData)(url, offset, container.canvas.settings);
             }
             else if (options.text) {
-                const textOptions = options.text;
-                const data = (0, utils_js_1.getTextData)(textOptions, offset);
+                const textOptions = options.text, data = (0, canvas_utils_1.getTextData)(textOptions, offset, textOptions.fill, container.canvas.settings);
                 if ((0, engine_1.isNull)(data)) {
                     return;
                 }
@@ -47,11 +48,11 @@
                 if (!canvas) {
                     return;
                 }
-                const context = canvas.getContext("2d");
+                const context = canvas.getContext("2d", container.canvas.settings);
                 if (!context) {
                     return;
                 }
-                pixelData = (0, utils_js_1.getCanvasImageData)(context, canvas, offset);
+                pixelData = (0, canvas_utils_1.getCanvasImageData)(context, canvas, offset);
             }
             (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
         }

package/umd/Options/Classes/CanvasMask.js

@@ -16,6 +16,15 @@
     const ImageMask_js_1 = require("./ImageMask.js");
     const TextMask_js_1 = require("./TextMask.js");
     class CanvasMask {
+        element;
+        enable;
+        image;
+        override;
+        pixels;
+        position;
+        scale;
+        selector;
+        text;
         constructor() {
             this.enable = false;
             this.override = new CanvasMaskOverride_js_1.CanvasMaskOverride();

package/umd/Options/Classes/CanvasMaskOverride.js

@@ -12,6 +12,8 @@
     exports.CanvasMaskOverride = void 0;
     const engine_1 = require("@tsparticles/engine");
     class CanvasMaskOverride {
+        color;
+        opacity;
         constructor() {
             this.color = true;
             this.opacity = false;

package/umd/Options/Classes/CanvasMaskPixels.js

@@ -13,6 +13,8 @@
     const engine_1 = require("@tsparticles/engine");
     const minAlpha = 0;
     class CanvasMaskPixels {
+        filter;
+        offset;
         constructor() {
             this.filter = (pixel) => pixel.a > minAlpha;
             this.offset = 4;
@@ -23,7 +25,7 @@
             }
             if (data.filter !== undefined) {
                 if ((0, engine_1.isString)(data.filter)) {
-                    if (Object.hasOwn(globalThis, data.filter)) {
+                    if (data.filter in globalThis) {
                         const filter = globalThis[data.filter];
                         if ((0, engine_1.isFunction)(filter)) {
                             this.filter = filter;

package/umd/Options/Classes/FontTextMask.js

@@ -12,9 +12,17 @@
     exports.FontTextMask = void 0;
     const engine_1 = require("@tsparticles/engine");
     class FontTextMask {
+        family;
+        size;
+        style;
+        variant;
+        weight;
         constructor() {
             this.family = "sans-serif";
             this.size = 100;
+            this.style = "";
+            this.variant = "";
+            this.weight = "";
         }
         load(data) {
             if ((0, engine_1.isNull)(data)) {

package/umd/Options/Classes/ImageMask.js

@@ -12,6 +12,7 @@
     exports.ImageMask = void 0;
     const engine_1 = require("@tsparticles/engine");
     class ImageMask {
+        src;
         constructor() {
             this.src = "";
         }

package/umd/Options/Classes/TextMask.js

@@ -14,8 +14,14 @@
     const FontTextMask_js_1 = require("./FontTextMask.js");
     const TextMaskLine_js_1 = require("./TextMaskLine.js");
     class TextMask {
+        color;
+        fill;
+        font;
+        lines;
+        text;
         constructor() {
             this.color = "#000000";
+            this.fill = true;
             this.font = new FontTextMask_js_1.FontTextMask();
             this.lines = new TextMaskLine_js_1.TextMaskLine();
             this.text = "";
@@ -27,6 +33,9 @@
             if (data.color !== undefined) {
                 this.color = data.color;
             }
+            if (data.fill !== undefined) {
+                this.fill = data.fill;
+            }
             this.font.load(data.font);
             this.lines.load(data.lines);
             if (data.text !== undefined) {

package/umd/Options/Classes/TextMaskLine.js

@@ -12,6 +12,8 @@
     exports.TextMaskLine = void 0;
     const engine_1 = require("@tsparticles/engine");
     class TextMaskLine {
+        separator;
+        spacing;
         constructor() {
             this.separator = "\n";
             this.spacing = 10;

package/umd/index.js

@@ -45,7 +45,7 @@ var __importStar = (this && this.__importStar) || (function () {
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
     async function loadCanvasMaskPlugin(engine) {
-        engine.checkVersion("4.0.0-alpha.8");
+        engine.checkVersion("4.0.0-beta.0");
         await engine.register(async (e) => {
             const { CanvasMaskPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./CanvasMaskPlugin.js"))) : new Promise((resolve_1, reject_1) => { require(["./CanvasMaskPlugin.js"], resolve_1, reject_1); }).then(__importStar));
             e.addPlugin(new CanvasMaskPlugin());

package/umd/utils.js

@@ -10,11 +10,7 @@
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
-    exports.getCanvasImageData = getCanvasImageData;
-    exports.getImageData = getImageData;
-    exports.getTextData = getTextData;
     const engine_1 = require("@tsparticles/engine");
-    const defaultWidth = 0, defaultRgb = 0;
     function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
         const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
         let selectedPixels = 0;
@@ -43,8 +39,11 @@
                 y: pixelPos.y * scale + positionOffset.y,
             }, pOptions = {};
             if (override.color) {
-                pOptions.color = {
-                    value: pixel,
+                pOptions.fill = {
+                    color: {
+                        value: pixel,
+                    },
+                    enable: true,
                 };
             }
             if (override.opacity) {
@@ -56,91 +55,6 @@
             selectedPixels++;
         }
     }
-    function getCanvasImageData(ctx, size, offset, clear = true) {
-        const imageData = ctx.getImageData(engine_1.originPoint.x, engine_1.originPoint.y, size.width, size.height).data;
-        if (clear) {
-            ctx.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, 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),
-            };
-            pixels[pos.y] ??= [];
-            const indexesOffset = {
-                r: 0,
-                g: 1,
-                b: 2,
-                a: 3,
-            }, alphaFactor = 255, row = pixels[pos.y];
-            if (!row) {
-                continue;
-            }
-            row[pos.x] = {
-                r: imageData[i + indexesOffset.r] ?? defaultRgb,
-                g: imageData[i + indexesOffset.g] ?? defaultRgb,
-                b: imageData[i + indexesOffset.b] ?? defaultRgb,
-                a: (imageData[i + indexesOffset.a] ?? engine_1.defaultAlpha) / alphaFactor,
-            };
-        }
-        return {
-            pixels,
-            width: Math.min(...pixels.map(row => row.length)),
-            height: pixels.length,
-        };
-    }
-    function getImageData(src, offset) {
-        const image = new Image();
-        image.crossOrigin = "Anonymous";
-        const p = new Promise((resolve, reject) => {
-            image.onerror = reject;
-            image.onload = () => {
-                const canvas = (0, engine_1.safeDocument)().createElement("canvas");
-                canvas.width = image.width;
-                canvas.height = image.height;
-                const context = canvas.getContext("2d");
-                if (!context) {
-                    reject(new Error("Could not get canvas context"));
-                    return;
-                }
-                context.drawImage(image, engine_1.originPoint.x, engine_1.originPoint.y, image.width, image.height, engine_1.originPoint.x, engine_1.originPoint.y, canvas.width, canvas.height);
-                resolve(getCanvasImageData(context, canvas, offset));
-            };
-        });
-        image.src = src;
-        return p;
-    }
-    function getTextData(textOptions, offset) {
-        const canvas = (0, engine_1.safeDocument)().createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
-        if (!text || !context) {
-            return;
-        }
-        const lines = text.split(linesOptions.separator), fontSize = (0, engine_1.isNumber)(font.size) ? `${font.size.toString()}px` : font.size, linesData = [];
-        let maxWidth = 0, totalHeight = 0;
-        for (const line of lines) {
-            context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
-            const measure = context.measureText(line), lineData = {
-                measure,
-                text: line,
-                height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
-                width: measure.width,
-            };
-            maxWidth = Math.max(maxWidth || defaultWidth, 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?.toString() ?? ""} ${fontSize} ${font.family}`;
-            context.fillStyle = color;
-            context.fillText(line.text, engine_1.originPoint.x, currentHeight + line.measure.actualBoundingBoxAscent);
-            currentHeight += line.height + linesOptions.spacing;
-        }
-        return getCanvasImageData(context, canvas, offset);
-    }
     function shuffle(array) {
         const lengthOffset = 1, minIndex = 0;
         for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {

package/722.min.js

@@ -1,2 +0,0 @@
-/*! For license information please see 722.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[722],{722(t,e,n){n.d(e,{CanvasMaskPluginInstance:()=>r});var i=n(303);function o(t,e,n,o,a,r){const{height:c,width:l}=e,h=c*l,g=function(t){const e=1,n=0;for(let o=t.length-e;o>=n;o--){const e=Math.floor((0,i.getRandom)()*o),n=t[o],a=t[e];a!==n&&(void 0!==a&&void 0!==n&&(t[o]=a,t[e]=n))}return t}(s(h)),u=Math.min(h,t.actualOptions.particles.number.value),f=t.canvas.size;let d=0;const x=f.width*n.x/i.percentDenominator-l*o*i.half,p=f.height*n.y/i.percentDenominator-c*o*i.half;for(;d<u&&g.length;){const n=0,i=g.pop()??n,s={x:i%l,y:Math.floor(i/l)},c=e.pixels[s.y];if(!c)continue;const h=c[s.x];if(!h)continue;if(!r(h))continue;const u={x:s.x*o+x,y:s.y*o+p},f={};a.color&&(f.color={value:h}),a.opacity&&(f.opacity={value:h.a}),t.particles.addParticle(u,f),d++}}function a(t,e,n,o=!0){const a=t.getImageData(i.originPoint.x,i.originPoint.y,e.width,e.height).data;o&&t.clearRect(i.originPoint.x,i.originPoint.y,e.width,e.height);const s=[];for(let t=0;t<a.length;t+=n){const o=t/n,r={x:o%e.width,y:Math.floor(o/e.width)};s[r.y]??=[];const c={r:0,g:1,b:2,a:3},l=255,h=s[r.y];h&&(h[r.x]={r:a[t+c.r]??0,g:a[t+c.g]??0,b:a[t+c.b]??0,a:(a[t+c.a]??i.defaultAlpha)/l})}return{pixels:s,width:Math.min(...s.map((t=>t.length))),height:s.length}}const s=t=>[...Array(t).keys()];class r{constructor(t){this._container=t}async init(){const t=this._container,e=t.actualOptions.canvasMask;if(!e?.enable)return;let n={pixels:[],height:0,width:0};const s=e.pixels.offset;if(e.image){const t=e.image.src;if(!t)return;n=await function(t,e){const n=new Image;n.crossOrigin="Anonymous";const o=new Promise(((t,o)=>{n.onerror=o,n.onload=()=>{const s=(0,i.safeDocument)().createElement("canvas");s.width=n.width,s.height=n.height;const r=s.getContext("2d");r?(r.drawImage(n,i.originPoint.x,i.originPoint.y,n.width,n.height,i.originPoint.x,i.originPoint.y,s.width,s.height),t(a(r,s,e))):o(new Error("Could not get canvas context"))}}));return n.src=t,o}(t,s)}else if(e.text){const t=function(t,e){const n=(0,i.safeDocument)().createElement("canvas"),o=n.getContext("2d"),{font:s,text:r,lines:c,color:l}=t;if(!r||!o)return;const h=r.split(c.separator),g=(0,i.isNumber)(s.size)?`${s.size.toString()}px`:s.size,u=[];let f=0,d=0;for(const t of h){o.font=`${s.style??""} ${s.variant??""} ${s.weight?.toString()??""} ${g} ${s.family}`;const e=o.measureText(t),n={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};f=Math.max(f||0,n.width),d+=n.height+c.spacing,u.push(n)}n.width=f,n.height=d;let x=0;for(const t of u)o.font=`${s.style??""} ${s.variant??""} ${s.weight?.toString()??""} ${g} ${s.family}`,o.fillStyle=l,o.fillText(t.text,i.originPoint.x,x+t.measure.actualBoundingBoxAscent),x+=t.height+c.spacing;return a(o,n,e)}(e.text,s);if((0,i.isNull)(t))return;n=t}else if(e.element??e.selector){const t=e.element??(e.selector&&(0,i.safeDocument)().querySelector(e.selector));if(!t)return;const o=t.getContext("2d");if(!o)return;n=a(o,t,s)}o(t,n,e.position,e.scale,e.override,e.pixels.filter)}}}}]);

package/722.min.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! tsParticles Canvas Mask Plugin v4.0.0-alpha.8 by Matteo Bruni */

package/775.min.js

@@ -1,2 +0,0 @@
-/*! For license information please see 775.min.js.LICENSE.txt */
-(this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).push([[775],{775(s,i,t){t.d(i,{CanvasMaskPlugin:()=>d});var e=t(303);class o{constructor(){this.color=!0,this.opacity=!1}load(s){(0,e.isNull)(s)||(void 0!==s.color&&(this.color=s.color),void 0!==s.opacity&&(this.opacity=s.opacity))}}class a{constructor(){this.filter=s=>s.a>0,this.offset=4}load(s){if(!(0,e.isNull)(s)){if(void 0!==s.filter)if((0,e.isString)(s.filter)){if(Object.hasOwn(globalThis,s.filter)){const i=globalThis[s.filter];(0,e.isFunction)(i)&&(this.filter=i)}}else this.filter=s.filter;void 0!==s.offset&&(this.offset=s.offset)}}}class l{constructor(){this.src=""}load(s){(0,e.isNull)(s)||void 0!==s.src&&(this.src=s.src)}}class n{constructor(){this.family="sans-serif",this.size=100}load(s){(0,e.isNull)(s)||(void 0!==s.family&&(this.family=s.family),void 0!==s.size&&(this.size=s.size),void 0!==s.style&&(this.style=s.style),void 0!==s.variant&&(this.variant=s.variant),void 0!==s.weight&&(this.weight=s.weight))}}class c{constructor(){this.separator="\n",this.spacing=10}load(s){(0,e.isNull)(s)||(void 0!==s.separator&&(this.separator=s.separator),void 0!==s.spacing&&(this.spacing=s.spacing))}}class r{constructor(){this.color="#000000",this.font=new n,this.lines=new c,this.text=""}load(s){(0,e.isNull)(s)||(void 0!==s.color&&(this.color=s.color),this.font.load(s.font),this.lines.load(s.lines),void 0!==s.text&&(this.text=s.text))}}class h{constructor(){this.enable=!1,this.override=new o,this.pixels=new a,this.position={x:50,y:50},this.scale=1}load(s){(0,e.isNull)(s)||(void 0!==s.element&&s.element instanceof HTMLCanvasElement&&(this.element=s.element),void 0!==s.enable&&(this.enable=s.enable),s.image&&(this.image??=new l,this.image.load(s.image)),this.pixels.load(s.pixels),s.position&&(this.position={x:s.position.x??this.position.x,y:s.position.y??this.position.y}),this.override.load(s.override),void 0!==s.scale&&(this.scale=s.scale),void 0!==s.selector&&(this.selector=s.selector),s.text&&(this.text??=new r,this.text.load(s.text)))}}class d{constructor(){this.id="canvasMask"}async getPlugin(s){const{CanvasMaskPluginInstance:i}=await t.e(722).then(t.bind(t,722));return new i(s)}loadOptions(s,i,t){if(!this.needsPlugin(i)&&!this.needsPlugin(t))return;let e=i.canvasMask;void 0===e?.load&&(i.canvasMask=e=new h),e.load(t?.canvasMask)}needsPlugin(s){return s?.canvasMask?.enable??!1}}}}]);

package/775.min.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! tsParticles Canvas Mask Plugin v4.0.0-alpha.8 by Matteo Bruni */

package/tsparticles.plugin.canvas-mask.min.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! tsParticles Canvas Mask Plugin v4.0.0-alpha.8 by Matteo Bruni */