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

package/76.min.js

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

package/76.min.js.LICENSE.txt

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

package/browser/CanvasMaskInstance.js

@@ -1,5 +1,5 @@
 import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData, } from "./utils.js";
-import { isNull } from "@tsparticles/engine";
+import { isNull, safeDocument } from "@tsparticles/engine";
 export class CanvasMaskInstance {
     constructor(container) {
         this._container = container;
@@ -31,7 +31,8 @@ export class CanvasMaskInstance {
             pixelData = data;
         }
         else if (options.element ?? options.selector) {
-            const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
+            const canvas = options.element ??
+                (options.selector && safeDocument().querySelector(options.selector));
             if (!canvas) {
                 return;
             }

package/browser/Options/Classes/CanvasMask.js

@@ -25,9 +25,7 @@ export class CanvasMask {
             this.enable = data.enable;
         }
         if (data.image) {
-            if (!this.image) {
-                this.image = new ImageMask();
-            }
+            this.image ??= new ImageMask();
             this.image.load(data.image);
         }
         this.pixels.load(data.pixels);
@@ -45,9 +43,7 @@ export class CanvasMask {
             this.selector = data.selector;
         }
         if (data.text) {
-            if (!this.text) {
-                this.text = new TextMask();
-            }
+            this.text ??= new TextMask();
             this.text.load(data.text);
         }
     }

package/browser/Options/Classes/CanvasMaskPixels.js

@@ -11,8 +11,8 @@ export class CanvasMaskPixels {
         }
         if (data.filter !== undefined) {
             if (isString(data.filter)) {
-                if (Object.hasOwn(window, data.filter)) {
-                    const filter = window[data.filter];
+                if (Object.hasOwn(globalThis, data.filter)) {
+                    const filter = globalThis[data.filter];
                     if (isFunction(filter)) {
                         this.filter = filter;
                     }

package/browser/index.js

@@ -1,5 +1,7 @@
-import { CanvasMaskPlugin } from "./CanvasMaskPlugin.js";
-export async function loadCanvasMaskPlugin(engine, refresh = true) {
-    engine.checkVersion("3.9.0");
-    await engine.addPlugin(new CanvasMaskPlugin(), refresh);
+export function loadCanvasMaskPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(async (e) => {
+        const { CanvasMaskPlugin } = await import("./CanvasMaskPlugin.js");
+        e.addPlugin(new CanvasMaskPlugin());
+    });
 }

package/browser/utils.js

@@ -1,8 +1,8 @@
-import { errorPrefix, getRandom, isNumber, percentDenominator, } from "@tsparticles/engine";
+import { getRandom, isNumber, percentDenominator, safeDocument, } from "@tsparticles/engine";
 const half = 0.5, origin = {
     x: 0,
     y: 0,
-}, defaultWidth = 0;
+}, defaultWidth = 0, defaultRgb = 0, defaultAlpha = 1;
 export 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;
@@ -14,7 +14,15 @@ export function addParticlesFromCanvasPixels(container, data, position, scale, o
         const defaultIndex = 0, nextIndex = indexArray.pop() ?? defaultIndex, pixelPos = {
             x: nextIndex % width,
             y: Math.floor(nextIndex / width),
-        }, pixel = data.pixels[pixelPos.y][pixelPos.x], shouldCreateParticle = filter(pixel);
+        }, row = data.pixels[pixelPos.y];
+        if (!row) {
+            continue;
+        }
+        const pixel = row[pixelPos.x];
+        if (!pixel) {
+            continue;
+        }
+        const shouldCreateParticle = filter(pixel);
         if (!shouldCreateParticle) {
             continue;
         }
@@ -47,20 +55,21 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             x: idx % size.width,
             y: Math.floor(idx / size.width),
         };
-        if (!pixels[pos.y]) {
-            pixels[pos.y] = [];
-        }
+        pixels[pos.y] ??= [];
         const indexesOffset = {
             r: 0,
             g: 1,
             b: 2,
             a: 3,
-        }, alphaFactor = 255;
-        pixels[pos.y][pos.x] = {
-            r: imageData[i + indexesOffset.r],
-            g: imageData[i + indexesOffset.g],
-            b: imageData[i + indexesOffset.b],
-            a: imageData[i + indexesOffset.a] / alphaFactor,
+        }, 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] ?? defaultAlpha) / alphaFactor,
         };
     }
     return {
@@ -75,12 +84,13 @@ export function getImageData(src, offset) {
     const p = new Promise((resolve, reject) => {
         image.onerror = reject;
         image.onload = () => {
-            const canvas = document.createElement("canvas");
+            const canvas = safeDocument().createElement("canvas");
             canvas.width = image.width;
             canvas.height = image.height;
             const context = canvas.getContext("2d");
             if (!context) {
-                return reject(new Error(`${errorPrefix} Could not get canvas context`));
+                reject(new Error("Could not get canvas context"));
+                return;
             }
             context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);
             resolve(getCanvasImageData(context, canvas, offset));
@@ -90,14 +100,14 @@ export function getImageData(src, offset) {
     return p;
 }
 export function getTextData(textOptions, offset) {
-    const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
+    const canvas = safeDocument().createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
     if (!text || !context) {
         return;
     }
-    const lines = text.split(linesOptions.separator), fontSize = isNumber(font.size) ? `${font.size}px` : font.size, linesData = [];
+    const lines = text.split(linesOptions.separator), fontSize = 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 ?? ""} ${fontSize} ${font.family}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
         const measure = context.measureText(line), lineData = {
             measure,
             text: line,
@@ -112,7 +122,7 @@ export function getTextData(textOptions, offset) {
     canvas.height = totalHeight;
     let currentHeight = 0;
     for (const line of linesData) {
-        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight ?? ""} ${fontSize} ${font.family}`;
+        context.font = `${font.style ?? ""} ${font.variant ?? ""} ${font.weight?.toString() ?? ""} ${fontSize} ${font.family}`;
         context.fillStyle = color;
         context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);
         currentHeight += line.height + linesOptions.spacing;
@@ -122,8 +132,15 @@ export function getTextData(textOptions, offset) {
 function shuffle(array) {
     const lengthOffset = 1, minIndex = 0;
     for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
-        const randomIndex = Math.floor(getRandom() * currentIndex);
-        [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
+        const randomIndex = Math.floor(getRandom() * currentIndex), currentItem = array[currentIndex], randomItem = array[randomIndex];
+        if (randomItem === currentItem) {
+            continue;
+        }
+        if (randomItem === undefined || currentItem === undefined) {
+            continue;
+        }
+        array[currentIndex] = randomItem;
+        array[randomIndex] = currentItem;
     }
     return array;
 }

package/cjs/CanvasMaskInstance.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasMaskInstance = void 0;
-const utils_js_1 = require("./utils.js");
-const engine_1 = require("@tsparticles/engine");
-class CanvasMaskInstance {
+import { addParticlesFromCanvasPixels, getCanvasImageData, getImageData, getTextData, } from "./utils.js";
+import { isNull, safeDocument } from "@tsparticles/engine";
+export class CanvasMaskInstance {
     constructor(container) {
         this._container = container;
     }
@@ -23,18 +20,19 @@ class CanvasMaskInstance {
             if (!url) {
                 return;
             }
-            pixelData = await (0, utils_js_1.getImageData)(url, offset);
+            pixelData = await getImageData(url, offset);
         }
         else if (options.text) {
             const textOptions = options.text;
-            const data = (0, utils_js_1.getTextData)(textOptions, offset);
-            if ((0, engine_1.isNull)(data)) {
+            const data = getTextData(textOptions, offset);
+            if (isNull(data)) {
                 return;
             }
             pixelData = data;
         }
         else if (options.element ?? options.selector) {
-            const canvas = options.element ?? (options.selector && document.querySelector(options.selector));
+            const canvas = options.element ??
+                (options.selector && safeDocument().querySelector(options.selector));
             if (!canvas) {
                 return;
             }
@@ -42,9 +40,8 @@ class CanvasMaskInstance {
             if (!context) {
                 return;
             }
-            pixelData = (0, utils_js_1.getCanvasImageData)(context, canvas, offset);
+            pixelData = getCanvasImageData(context, canvas, offset);
         }
-        (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+        addParticlesFromCanvasPixels(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
     }
 }
-exports.CanvasMaskInstance = CanvasMaskInstance;

package/cjs/CanvasMaskPlugin.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasMaskPlugin = void 0;
-const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
-const CanvasMaskInstance_js_1 = require("./CanvasMaskInstance.js");
-class CanvasMaskPlugin {
+import { CanvasMask } from "./Options/Classes/CanvasMask.js";
+import { CanvasMaskInstance } from "./CanvasMaskInstance.js";
+export class CanvasMaskPlugin {
     constructor() {
         this.id = "canvasMask";
     }
     getPlugin(container) {
-        return Promise.resolve(new CanvasMaskInstance_js_1.CanvasMaskInstance(container));
+        return Promise.resolve(new CanvasMaskInstance(container));
     }
     loadOptions(options, source) {
         if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
@@ -16,7 +13,7 @@ class CanvasMaskPlugin {
         }
         let canvasMaskOptions = options.canvasMask;
         if (canvasMaskOptions?.load === undefined) {
-            options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
+            options.canvasMask = canvasMaskOptions = new CanvasMask();
         }
         canvasMaskOptions.load(source?.canvasMask);
     }
@@ -24,4 +21,3 @@ class CanvasMaskPlugin {
         return options?.canvasMask?.enable ?? false;
     }
 }
-exports.CanvasMaskPlugin = CanvasMaskPlugin;

package/cjs/Options/Classes/CanvasMask.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasMask = void 0;
-const engine_1 = require("@tsparticles/engine");
-const CanvasMaskOverride_js_1 = require("./CanvasMaskOverride.js");
-const CanvasMaskPixels_js_1 = require("./CanvasMaskPixels.js");
-const ImageMask_js_1 = require("./ImageMask.js");
-const TextMask_js_1 = require("./TextMask.js");
-class CanvasMask {
+import { isNull } from "@tsparticles/engine";
+import { CanvasMaskOverride } from "./CanvasMaskOverride.js";
+import { CanvasMaskPixels } from "./CanvasMaskPixels.js";
+import { ImageMask } from "./ImageMask.js";
+import { TextMask } from "./TextMask.js";
+export class CanvasMask {
     constructor() {
         this.enable = false;
-        this.override = new CanvasMaskOverride_js_1.CanvasMaskOverride();
-        this.pixels = new CanvasMaskPixels_js_1.CanvasMaskPixels();
+        this.override = new CanvasMaskOverride();
+        this.pixels = new CanvasMaskPixels();
         this.position = {
             x: 50,
             y: 50,
@@ -18,7 +15,7 @@ class CanvasMask {
         this.scale = 1;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {
@@ -28,9 +25,7 @@ class CanvasMask {
             this.enable = data.enable;
         }
         if (data.image) {
-            if (!this.image) {
-                this.image = new ImageMask_js_1.ImageMask();
-            }
+            this.image ??= new ImageMask();
             this.image.load(data.image);
         }
         this.pixels.load(data.pixels);
@@ -48,11 +43,8 @@ class CanvasMask {
             this.selector = data.selector;
         }
         if (data.text) {
-            if (!this.text) {
-                this.text = new TextMask_js_1.TextMask();
-            }
+            this.text ??= new TextMask();
             this.text.load(data.text);
         }
     }
 }
-exports.CanvasMask = CanvasMask;

package/cjs/Options/Classes/CanvasMaskOverride.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasMaskOverride = void 0;
-const engine_1 = require("@tsparticles/engine");
-class CanvasMaskOverride {
+import { isNull } from "@tsparticles/engine";
+export class CanvasMaskOverride {
     constructor() {
         this.color = true;
         this.opacity = false;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.color !== undefined) {
@@ -19,4 +16,3 @@ class CanvasMaskOverride {
         }
     }
 }
-exports.CanvasMaskOverride = CanvasMaskOverride;

package/cjs/Options/Classes/CanvasMaskPixels.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasMaskPixels = void 0;
-const engine_1 = require("@tsparticles/engine");
+import { isFunction, isNull, isString, } from "@tsparticles/engine";
 const minAlpha = 0;
-class CanvasMaskPixels {
+export class CanvasMaskPixels {
     constructor() {
         this.filter = (pixel) => pixel.a > minAlpha;
         this.offset = 4;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.filter !== undefined) {
-            if ((0, engine_1.isString)(data.filter)) {
-                if (Object.hasOwn(window, data.filter)) {
-                    const filter = window[data.filter];
-                    if ((0, engine_1.isFunction)(filter)) {
+            if (isString(data.filter)) {
+                if (Object.hasOwn(globalThis, data.filter)) {
+                    const filter = globalThis[data.filter];
+                    if (isFunction(filter)) {
                         this.filter = filter;
                     }
                 }
@@ -30,4 +27,3 @@ class CanvasMaskPixels {
         }
     }
 }
-exports.CanvasMaskPixels = CanvasMaskPixels;

package/cjs/Options/Classes/FontTextMask.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FontTextMask = void 0;
-const engine_1 = require("@tsparticles/engine");
-class FontTextMask {
+import { isNull } from "@tsparticles/engine";
+export class FontTextMask {
     constructor() {
         this.family = "sans-serif";
         this.size = 100;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.family !== undefined) {
@@ -28,4 +25,3 @@ class FontTextMask {
         }
     }
 }
-exports.FontTextMask = FontTextMask;

package/cjs/Options/Classes/ImageMask.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageMask = void 0;
-const engine_1 = require("@tsparticles/engine");
-class ImageMask {
+import { isNull } from "@tsparticles/engine";
+export class ImageMask {
     constructor() {
         this.src = "";
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.src !== undefined) {
@@ -15,4 +12,3 @@ class ImageMask {
         }
     }
 }
-exports.ImageMask = ImageMask;

package/cjs/Options/Classes/TextMask.js

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextMask = void 0;
-const engine_1 = require("@tsparticles/engine");
-const FontTextMask_js_1 = require("./FontTextMask.js");
-const TextMaskLine_js_1 = require("./TextMaskLine.js");
-class TextMask {
+import { isNull } from "@tsparticles/engine";
+import { FontTextMask } from "./FontTextMask.js";
+import { TextMaskLine } from "./TextMaskLine.js";
+export class TextMask {
     constructor() {
         this.color = "#000000";
-        this.font = new FontTextMask_js_1.FontTextMask();
-        this.lines = new TextMaskLine_js_1.TextMaskLine();
+        this.font = new FontTextMask();
+        this.lines = new TextMaskLine();
         this.text = "";
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.color !== undefined) {
@@ -25,4 +22,3 @@ class TextMask {
         }
     }
 }
-exports.TextMask = TextMask;

package/cjs/Options/Classes/TextMaskLine.js

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextMaskLine = void 0;
-const engine_1 = require("@tsparticles/engine");
-class TextMaskLine {
+import { isNull } from "@tsparticles/engine";
+export class TextMaskLine {
     constructor() {
         this.separator = "\n";
         this.spacing = 10;
     }
     load(data) {
-        if ((0, engine_1.isNull)(data)) {
+        if (isNull(data)) {
             return;
         }
         if (data.separator !== undefined) {
@@ -19,4 +16,3 @@ class TextMaskLine {
         }
     }
 }
-exports.TextMaskLine = TextMaskLine;

package/cjs/Options/Interfaces/ICanvasMask.js

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

package/cjs/Options/Interfaces/ICanvasMaskOverride.js

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

package/cjs/Options/Interfaces/ICanvasMaskPixels.js

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

package/cjs/Options/Interfaces/IFontTextMask.js

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

package/cjs/Options/Interfaces/IImageMask.js

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

package/cjs/Options/Interfaces/ITextMask.js

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

package/cjs/Options/Interfaces/ITextMaskLine.js

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

package/cjs/index.js

@@ -1,8 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
-const CanvasMaskPlugin_js_1 = require("./CanvasMaskPlugin.js");
-async function loadCanvasMaskPlugin(engine, refresh = true) {
-    engine.checkVersion("3.9.0");
-    await engine.addPlugin(new CanvasMaskPlugin_js_1.CanvasMaskPlugin(), refresh);
+export function loadCanvasMaskPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.0");
+    engine.register(async (e) => {
+        const { CanvasMaskPlugin } = await import("./CanvasMaskPlugin.js");
+        e.addPlugin(new CanvasMaskPlugin());
+    });
 }

package/cjs/types.js

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