@tsparticles/plugin-canvas-mask 3.0.0-alpha.1 → 3.0.0-beta.1

package/tsparticles.plugin.canvas-mask.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
+ * v3.0.0-beta.1
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -91,7 +91,7 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "loadCanvasMaskPlugin": () => (/* binding */ loadCanvasMaskPlugin)
+  loadCanvasMaskPlugin: () => (/* binding */ loadCanvasMaskPlugin)
 });
 
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/CanvasMaskOverride.js
@@ -112,7 +112,10 @@ class CanvasMaskOverride {
     }
   }
 }
+// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
+var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/Options/Classes/CanvasMaskPixels.js
+
 class CanvasMaskPixels {
   constructor() {
     this.filter = pixel => pixel.a > 0;
@@ -123,10 +126,10 @@ class CanvasMaskPixels {
       return;
     }
     if (data.filter !== undefined) {
-      if (typeof data.filter === "string") {
+      if ((0,engine_root_window_.isString)(data.filter)) {
         if (Object.hasOwn(window, data.filter)) {
           const filter = window[data.filter];
-          if (typeof filter === "function") {
+          if ((0,engine_root_window_.isFunction)(filter)) {
             this.filter = filter;
           }
         }
@@ -239,7 +242,6 @@ class CanvasMask {
     this.scale = 1;
   }
   load(data) {
-    var _a, _b;
     if (!data) {
       return;
     }
@@ -258,8 +260,8 @@ class CanvasMask {
     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
+        x: data.position.x ?? this.position.x,
+        y: data.position.y ?? this.position.y
       };
     }
     this.override.load(data.override);
@@ -277,8 +279,6 @@ class CanvasMask {
     }
   }
 }
-// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
-var engine_root_window_ = __webpack_require__(533);
 ;// CONCATENATED MODULE: ./dist/browser/utils.js
 
 function shuffle(array) {
@@ -310,25 +310,26 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
       },
       pixel = data.pixels[pixelPos.y][pixelPos.x],
       shouldCreateParticle = filter(pixel);
-    if (shouldCreateParticle) {
-      const pos = {
+    if (!shouldCreateParticle) {
+      continue;
+    }
+    const pos = {
         x: pixelPos.x * scale + positionOffset.x,
         y: pixelPos.y * scale + positionOffset.y
+      },
+      pOptions = {};
+    if (override.color) {
+      pOptions.color = {
+        value: pixel
+      };
+    }
+    if (override.opacity) {
+      pOptions.opacity = {
+        value: pixel.a
       };
-      const pOptions = {};
-      if (override.color) {
-        pOptions.color = {
-          value: pixel
-        };
-      }
-      if (override.opacity) {
-        pOptions.opacity = {
-          value: pixel.a
-        };
-      }
-      container.particles.addParticle(pos, pOptions);
-      selectedPixels++;
     }
+    container.particles.addParticle(pos, pOptions);
+    selectedPixels++;
   }
 }
 function getCanvasImageData(ctx, size, offset, clear = true) {
@@ -370,7 +371,7 @@ function getImageData(src, offset) {
       canvas.height = image.height;
       const context = canvas.getContext("2d");
       if (!context) {
-        return reject(new Error("Could not get canvas context"));
+        return reject(new Error(`${engine_root_window_.errorPrefix} 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));
@@ -392,7 +393,7 @@ function getTextData(textOptions, offset) {
     return;
   }
   const lines = text.split(linesOptions.separator),
-    fontSize = typeof font.size === "number" ? `${font.size}px` : font.size,
+    fontSize = (0,engine_root_window_.isNumber)(font.size) ? `${font.size}px` : font.size,
     linesData = [];
   let maxWidth = 0,
     totalHeight = 0;
@@ -431,7 +432,7 @@ class CanvasMaskInstance {
   async init() {
     const container = this._container,
       options = container.actualOptions.canvasMask;
-    if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+    if (!options?.enable) {
       return;
     }
     let pixelData = {
@@ -479,23 +480,21 @@ class CanvasMaskPlugin {
     return new CanvasMaskInstance(container, this._engine);
   }
   loadOptions(options, source) {
-    if (!this.needsPlugin(source)) {
+    if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
       return;
     }
     let canvasMaskOptions = options.canvasMask;
-    if ((canvasMaskOptions === null || canvasMaskOptions === void 0 ? void 0 : canvasMaskOptions.load) === undefined) {
+    if (canvasMaskOptions?.load === undefined) {
       options.canvasMask = canvasMaskOptions = new CanvasMask();
     }
-    canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+    canvasMaskOptions.load(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;
+    return options?.canvasMask?.enable ?? false;
   }
 }
-async function loadCanvasMaskPlugin(engine) {
-  const plugin = new CanvasMaskPlugin(engine);
-  await engine.addPlugin(plugin);
+async function loadCanvasMaskPlugin(engine, refresh = true) {
+  await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
 }
 })();
 

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

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.plugin.canvas-mask.min.js.LICENSE.txt */
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var o in i)("object"==typeof exports?exports:t)[o]=i[o]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function o(t){var s=i[t];if(void 0!==s)return s.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var s={};return(()=>{o.r(s),o.d(s,{loadCanvasMaskPlugin:()=>g});class t{constructor(){this.color=!0,this.opacity=!1}load(t){t&&(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}class e{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(t){if(void 0!==t.filter)if("string"==typeof t.filter){if(Object.hasOwn(window,t.filter)){const e=window[t.filter];"function"==typeof e&&(this.filter=e)}}else this.filter=t.filter;void 0!==t.offset&&(this.offset=t.offset)}}}class i{constructor(){this.src=""}load(t){t&&void 0!==t.src&&(this.src=t.src)}}class n{constructor(){this.family="sans-serif",this.size=100}load(t){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 a{constructor(){this.separator="\n",this.spacing=10}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class r{constructor(){this.color="#000000",this.font=new n,this.lines=new a,this.text=""}load(t){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 l{constructor(){this.enable=!1,this.override=new t,this.pixels=new e,this.position={x:50,y:50},this.scale=1}load(t){var e,o;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||(this.image=new i),this.image.load(t.image)),this.pixels.load(t.pixels),t.position&&(this.position={x:null!==(e=t.position.x)&&void 0!==e?e:this.position.x,y:null!==(o=t.position.y)&&void 0!==o?o: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||(this.text=new r),this.text.load(t.text)))}}var c=o(533);function h(t,e,i,o,s,n){const{height:a,width:r}=e,l=a*r,h=function(t){for(let e=t.length-1;e>=0;e--){const i=Math.floor((0,c.getRandom)()*e);[t[e],t[i]]=[t[i],t[e]]}return t}(f(l)),d=Math.min(l,t.actualOptions.particles.number.value),u=t.canvas.size;let p=0;const g=u.width*i.x/100-r*o/2,v=u.height*i.y/100-a*o/2;for(;p<d&&h.length;){const i=h.pop()||0,a={x:i%r,y:Math.floor(i/r)},l=e.pixels[a.y][a.x];if(n(l)){const e={x:a.x*o+g,y:a.y*o+v},i={};s.color&&(i.color={value:l}),s.opacity&&(i.opacity={value:l.a}),t.particles.addParticle(e,i),p++}}}function d(t,e,i,o=!0){const s=t.getImageData(0,0,e.width,e.height).data;o&&t.clearRect(0,0,e.width,e.height);const n=[];for(let t=0;t<s.length;t+=i){const o=t/i,a={x:o%e.width,y:Math.floor(o/e.width)};n[a.y]||(n[a.y]=[]),n[a.y][a.x]={r:s[t],g:s[t+1],b:s[t+2],a:s[t+3]/255}}return{pixels:n,width:Math.min(...n.map((t=>t.length))),height:n.length}}const f=t=>[...Array(t).keys()];class u{constructor(t,e){this._container=t,this._engine=e}async init(){const t=this._container,e=t.actualOptions.canvasMask;if(!(null==e?void 0:e.enable))return;let i={pixels:[],height:0,width:0};const o=e.pixels.offset;if(e.image){const t=e.image.src;if(!t)return;i=await function(t,e){const i=new Image;i.crossOrigin="Anonymous";const o=new Promise(((t,o)=>{i.onerror=o,i.onload=()=>{const s=document.createElement("canvas");s.width=i.width,s.height=i.height;const n=s.getContext("2d");if(!n)return o(new Error("Could not get canvas context"));n.drawImage(i,0,0,i.width,i.height,0,0,s.width,s.height),t(d(n,s,e))}}));return i.src=t,o}(t,o)}else if(e.text){const t=function(t,e){const i=document.createElement("canvas"),o=i.getContext("2d"),{font:s,text:n,lines:a,color:r}=t;if(!n||!o)return;const l=n.split(a.separator),c="number"==typeof s.size?`${s.size}px`:s.size,h=[];let f=0,u=0;for(const t of l){o.font=`${s.style||""} ${s.variant||""} ${s.weight||""} ${c} ${s.family}`;const e=o.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};f=Math.max(f||0,i.width),u+=i.height+a.spacing,h.push(i)}i.width=f,i.height=u;let p=0;for(const t of h)o.font=`${s.style||""} ${s.variant||""} ${s.weight||""} ${c} ${s.family}`,o.fillStyle=r,o.fillText(t.text,0,p+t.measure.actualBoundingBoxAscent),p+=t.height+a.spacing;return d(o,i,e)}(e.text,o);if(!t)return;i=t}else if(e.element||e.selector){const t=e.element||e.selector&&document.querySelector(e.selector);if(!t)return;const s=t.getContext("2d");if(!s)return;i=d(s,t,o)}h(t,i,e.position,e.scale,e.override,e.pixels.filter)}}class p{constructor(t){this.id="canvasMask",this._engine=t}getPlugin(t){return new u(t,this._engine)}loadOptions(t,e){if(!this.needsPlugin(e))return;let i=t.canvasMask;void 0===(null==i?void 0:i.load)&&(t.canvasMask=i=new l),i.load(null==e?void 0:e.canvasMask)}needsPlugin(t){var e,i;return null!==(i=null===(e=null==t?void 0:t.canvasMask)||void 0===e?void 0:e.enable)&&void 0!==i&&i}}async function g(t){const e=new p(t);await t.addPlugin(e)}})(),s})()));
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var s in i)("object"==typeof exports?exports:t)[s]=i[s]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function s(t){var o=i[t];if(void 0!==o)return o.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,s),n.exports}s.d=(t,e)=>{for(var i in e)s.o(e,i)&&!s.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},s.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{s.r(o),s.d(o,{loadCanvasMaskPlugin:()=>p});class t{constructor(){this.color=!0,this.opacity=!1}load(t){t&&(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}var e=s(533);class i{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(t){if(void 0!==t.filter)if((0,e.isString)(t.filter)){if(Object.hasOwn(window,t.filter)){const i=window[t.filter];(0,e.isFunction)(i)&&(this.filter=i)}}else this.filter=t.filter;void 0!==t.offset&&(this.offset=t.offset)}}}class n{constructor(){this.src=""}load(t){t&&void 0!==t.src&&(this.src=t.src)}}class r{constructor(){this.family="sans-serif",this.size=100}load(t){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 a{constructor(){this.separator="\n",this.spacing=10}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class l{constructor(){this.color="#000000",this.font=new r,this.lines=new a,this.text=""}load(t){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 c{constructor(){this.enable=!1,this.override=new t,this.pixels=new i,this.position={x:50,y:50},this.scale=1}load(t){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||(this.image=new n),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||(this.text=new l),this.text.load(t.text)))}}function h(t,i,s,o,n,r){const{height:a,width:l}=i,c=a*l,h=function(t){for(let i=t.length-1;i>=0;i--){const s=Math.floor((0,e.getRandom)()*i);[t[i],t[s]]=[t[s],t[i]]}return t}(f(c)),d=Math.min(c,t.actualOptions.particles.number.value),u=t.canvas.size;let g=0;const p=u.width*s.x/100-l*o/2,x=u.height*s.y/100-a*o/2;for(;g<d&&h.length;){const e=h.pop()||0,s={x:e%l,y:Math.floor(e/l)},a=i.pixels[s.y][s.x];if(!r(a))continue;const c={x:s.x*o+p,y:s.y*o+x},d={};n.color&&(d.color={value:a}),n.opacity&&(d.opacity={value:a.a}),t.particles.addParticle(c,d),g++}}function d(t,e,i,s=!0){const o=t.getImageData(0,0,e.width,e.height).data;s&&t.clearRect(0,0,e.width,e.height);const n=[];for(let t=0;t<o.length;t+=i){const s=t/i,r={x:s%e.width,y:Math.floor(s/e.width)};n[r.y]||(n[r.y]=[]),n[r.y][r.x]={r:o[t],g:o[t+1],b:o[t+2],a:o[t+3]/255}}return{pixels:n,width:Math.min(...n.map((t=>t.length))),height:n.length}}const f=t=>[...Array(t).keys()];class u{constructor(t,e){this._container=t,this._engine=e}async init(){const t=this._container,i=t.actualOptions.canvasMask;if(!i?.enable)return;let s={pixels:[],height:0,width:0};const o=i.pixels.offset;if(i.image){const t=i.image.src;if(!t)return;s=await function(t,i){const s=new Image;s.crossOrigin="Anonymous";const o=new Promise(((t,o)=>{s.onerror=o,s.onload=()=>{const n=document.createElement("canvas");n.width=s.width,n.height=s.height;const r=n.getContext("2d");if(!r)return o(new Error(`${e.errorPrefix} Could not get canvas context`));r.drawImage(s,0,0,s.width,s.height,0,0,n.width,n.height),t(d(r,n,i))}}));return s.src=t,o}(t,o)}else if(i.text){const t=function(t,i){const s=document.createElement("canvas"),o=s.getContext("2d"),{font:n,text:r,lines:a,color:l}=t;if(!r||!o)return;const c=r.split(a.separator),h=(0,e.isNumber)(n.size)?`${n.size}px`:n.size,f=[];let u=0,g=0;for(const t of c){o.font=`${n.style||""} ${n.variant||""} ${n.weight||""} ${h} ${n.family}`;const e=o.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};u=Math.max(u||0,i.width),g+=i.height+a.spacing,f.push(i)}s.width=u,s.height=g;let p=0;for(const t of f)o.font=`${n.style||""} ${n.variant||""} ${n.weight||""} ${h} ${n.family}`,o.fillStyle=l,o.fillText(t.text,0,p+t.measure.actualBoundingBoxAscent),p+=t.height+a.spacing;return d(o,s,i)}(i.text,o);if(!t)return;s=t}else if(i.element||i.selector){const t=i.element||i.selector&&document.querySelector(i.selector);if(!t)return;const e=t.getContext("2d");if(!e)return;s=d(e,t,o)}h(t,s,i.position,i.scale,i.override,i.pixels.filter)}}class g{constructor(t){this.id="canvasMask",this._engine=t}getPlugin(t){return new u(t,this._engine)}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.canvasMask;void 0===i?.load&&(t.canvasMask=i=new c),i.load(e?.canvasMask)}needsPlugin(t){return t?.canvasMask?.enable??!1}}async function p(t,e=!0){await t.addPlugin(new g(t),e)}})(),o})()));

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

@@ -1,8 +1 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v3.0.0-alpha.1
- */
+/*! tsParticles Canvas Mask Plugin v3.0.0-beta.1 by Matteo Bruni */

package/types/CanvasMaskInstance.d.ts

@@ -1,5 +1,5 @@
 import type { Engine, IContainerPlugin } from "@tsparticles/engine";
-import type { CanvasMaskContainer } from "./types";
+import type { CanvasMaskContainer } from "./types.js";
 export declare class CanvasMaskInstance implements IContainerPlugin {
     private readonly _container;
     private readonly _engine;

package/types/Options/Classes/CanvasMask.d.ts

@@ -1,9 +1,9 @@
 import type { ICoordinates, IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import { CanvasMaskOverride } from "./CanvasMaskOverride";
-import { CanvasMaskPixels } from "./CanvasMaskPixels";
-import type { ICanvasMask } from "../Interfaces/ICanvasMask";
-import { ImageMask } from "./ImageMask";
-import { TextMask } from "./TextMask";
+import { CanvasMaskOverride } from "./CanvasMaskOverride.js";
+import { CanvasMaskPixels } from "./CanvasMaskPixels.js";
+import type { ICanvasMask } from "../Interfaces/ICanvasMask.js";
+import { ImageMask } from "./ImageMask.js";
+import { TextMask } from "./TextMask.js";
 export declare class CanvasMask implements ICanvasMask, IOptionLoader<ICanvasMask> {
     element?: HTMLCanvasElement;
     enable: boolean;

package/types/Options/Classes/CanvasMaskOverride.d.ts

@@ -1,5 +1,5 @@
 import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import type { ICanvasMaskOverride } from "../Interfaces/ICanvasMaskOverride";
+import type { ICanvasMaskOverride } from "../Interfaces/ICanvasMaskOverride.js";
 export declare class CanvasMaskOverride implements ICanvasMaskOverride, IOptionLoader<ICanvasMaskOverride> {
     color: boolean;
     opacity: boolean;

package/types/Options/Classes/CanvasMaskPixels.d.ts

@@ -1,5 +1,5 @@
 import type { IOptionLoader, IRgba, RecursivePartial } from "@tsparticles/engine";
-import type { ICanvasMaskPixels } from "../Interfaces/ICanvasMaskPixels";
+import type { ICanvasMaskPixels } from "../Interfaces/ICanvasMaskPixels.js";
 export declare class CanvasMaskPixels implements ICanvasMaskPixels, IOptionLoader<ICanvasMaskPixels> {
     filter: (pixel: IRgba) => boolean;
     offset: number;

package/types/Options/Classes/FontTextMask.d.ts

@@ -1,5 +1,5 @@
 import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import type { IFontTextMask } from "../Interfaces/IFontTextMask";
+import type { IFontTextMask } from "../Interfaces/IFontTextMask.js";
 export declare class FontTextMask implements IFontTextMask, IOptionLoader<IFontTextMask> {
     family: string;
     size: string | number;

package/types/Options/Classes/ImageMask.d.ts

@@ -1,5 +1,5 @@
 import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import type { IImageMask } from "../Interfaces/IImageMask";
+import type { IImageMask } from "../Interfaces/IImageMask.js";
 export declare class ImageMask implements IImageMask, IOptionLoader<IImageMask> {
     src: string;
     constructor();

package/types/Options/Classes/TextMask.d.ts

@@ -1,7 +1,7 @@
 import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import { FontTextMask } from "./FontTextMask";
-import type { ITextMask } from "../Interfaces/ITextMask";
-import { TextMaskLine } from "./TextMaskLine";
+import { FontTextMask } from "./FontTextMask.js";
+import type { ITextMask } from "../Interfaces/ITextMask.js";
+import { TextMaskLine } from "./TextMaskLine.js";
 export declare class TextMask implements ITextMask, IOptionLoader<ITextMask> {
     color: string;
     font: FontTextMask;

package/types/Options/Classes/TextMaskLine.d.ts

@@ -1,5 +1,5 @@
 import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
-import type { ITextMaskLine } from "../Interfaces/ITextMaskLine";
+import type { ITextMaskLine } from "../Interfaces/ITextMaskLine.js";
 export declare class TextMaskLine implements ITextMaskLine, IOptionLoader<ITextMaskLine> {
     separator: string;
     spacing: number;

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

@@ -1,8 +1,8 @@
-import type { ICanvasMaskOverride } from "./ICanvasMaskOverride";
-import type { ICanvasMaskPixels } from "./ICanvasMaskPixels";
+import type { ICanvasMaskOverride } from "./ICanvasMaskOverride.js";
+import type { ICanvasMaskPixels } from "./ICanvasMaskPixels.js";
 import type { ICoordinates } from "@tsparticles/engine";
-import type { IImageMask } from "./IImageMask";
-import type { ITextMask } from "./ITextMask";
+import type { IImageMask } from "./IImageMask.js";
+import type { ITextMask } from "./ITextMask.js";
 export interface ICanvasMask {
     element?: HTMLCanvasElement;
     enable: boolean;

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

@@ -1,5 +1,5 @@
-import type { IFontTextMask } from "./IFontTextMask";
-import type { ITextMaskLine } from "./ITextMaskLine";
+import type { IFontTextMask } from "./IFontTextMask.js";
+import type { ITextMaskLine } from "./ITextMaskLine.js";
 export interface ITextMask {
     color: string;
     font: IFontTextMask;

package/types/index.d.ts

@@ -1,2 +1,2 @@
 import type { Engine } from "@tsparticles/engine";
-export declare function loadCanvasMaskPlugin(engine: Engine): Promise<void>;
+export declare function loadCanvasMaskPlugin(engine: Engine, refresh?: boolean): Promise<void>;

package/types/types.d.ts

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

package/types/utils.d.ts

@@ -1,6 +1,6 @@
-import type { Container, ICoordinates, IDimension, IRgba } from "@tsparticles/engine";
-import type { ICanvasMaskOverride } from "./Options/Interfaces/ICanvasMaskOverride";
-import type { TextMask } from "./Options/Classes/TextMask";
+import { type Container, type ICoordinates, type IDimension, type IRgba } from "@tsparticles/engine";
+import type { ICanvasMaskOverride } from "./Options/Interfaces/ICanvasMaskOverride.js";
+import type { TextMask } from "./Options/Classes/TextMask.js";
 export type CanvasPixelData = {
     height: number;
     pixels: IRgba[][];

package/umd/CanvasMaskInstance.js

@@ -4,13 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./utils"], factory);
+        define(["require", "exports", "./utils.js"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CanvasMaskInstance = void 0;
-    const utils_1 = require("./utils");
+    const utils_js_1 = require("./utils.js");
     class CanvasMaskInstance {
         constructor(container, engine) {
             this._container = container;
@@ -18,7 +18,7 @@
         }
         async init() {
             const container = this._container, options = container.actualOptions.canvasMask;
-            if (!(options === null || options === void 0 ? void 0 : options.enable)) {
+            if (!options?.enable) {
                 return;
             }
             let pixelData = {
@@ -32,11 +32,11 @@
                 if (!url) {
                     return;
                 }
-                pixelData = await (0, utils_1.getImageData)(url, offset);
+                pixelData = await (0, utils_js_1.getImageData)(url, offset);
             }
             else if (options.text) {
                 const textOptions = options.text;
-                const data = (0, utils_1.getTextData)(textOptions, offset);
+                const data = (0, utils_js_1.getTextData)(textOptions, offset);
                 if (!data) {
                     return;
                 }
@@ -51,9 +51,9 @@
                 if (!context) {
                     return;
                 }
-                pixelData = (0, utils_1.getCanvasImageData)(context, canvas, offset);
+                pixelData = (0, utils_js_1.getCanvasImageData)(context, canvas, offset);
             }
-            (0, utils_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+            (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
         }
     }
     exports.CanvasMaskInstance = CanvasMaskInstance;

package/umd/Options/Classes/CanvasMask.js

@@ -4,21 +4,21 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./CanvasMaskOverride", "./CanvasMaskPixels", "./ImageMask", "./TextMask"], factory);
+        define(["require", "exports", "./CanvasMaskOverride.js", "./CanvasMaskPixels.js", "./ImageMask.js", "./TextMask.js"], 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");
+    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 {
         constructor() {
             this.enable = false;
-            this.override = new CanvasMaskOverride_1.CanvasMaskOverride();
-            this.pixels = new CanvasMaskPixels_1.CanvasMaskPixels();
+            this.override = new CanvasMaskOverride_js_1.CanvasMaskOverride();
+            this.pixels = new CanvasMaskPixels_js_1.CanvasMaskPixels();
             this.position = {
                 x: 50,
                 y: 50,
@@ -26,7 +26,6 @@
             this.scale = 1;
         }
         load(data) {
-            var _a, _b;
             if (!data) {
                 return;
             }
@@ -38,15 +37,15 @@
             }
             if (data.image) {
                 if (!this.image) {
-                    this.image = new ImageMask_1.ImageMask();
+                    this.image = new ImageMask_js_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,
+                    x: data.position.x ?? this.position.x,
+                    y: data.position.y ?? this.position.y,
                 };
             }
             this.override.load(data.override);
@@ -58,7 +57,7 @@
             }
             if (data.text) {
                 if (!this.text) {
-                    this.text = new TextMask_1.TextMask();
+                    this.text = new TextMask_js_1.TextMask();
                 }
                 this.text.load(data.text);
             }

package/umd/Options/Classes/CanvasMaskPixels.js

@@ -4,12 +4,13 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports"], factory);
+        define(["require", "exports", "@tsparticles/engine"], factory);
     }
 })(function (require, exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.CanvasMaskPixels = void 0;
+    const engine_1 = require("@tsparticles/engine");
     class CanvasMaskPixels {
         constructor() {
             this.filter = (pixel) => pixel.a > 0;
@@ -20,10 +21,10 @@
                 return;
             }
             if (data.filter !== undefined) {
-                if (typeof data.filter === "string") {
+                if ((0, engine_1.isString)(data.filter)) {
                     if (Object.hasOwn(window, data.filter)) {
                         const filter = window[data.filter];
-                        if (typeof filter === "function") {
+                        if ((0, engine_1.isFunction)(filter)) {
                             this.filter = filter;
                         }
                     }

package/umd/Options/Classes/TextMask.js

@@ -4,19 +4,19 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./FontTextMask", "./TextMaskLine"], factory);
+        define(["require", "exports", "./FontTextMask.js", "./TextMaskLine.js"], 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");
+    const FontTextMask_js_1 = require("./FontTextMask.js");
+    const TextMaskLine_js_1 = require("./TextMaskLine.js");
     class TextMask {
         constructor() {
             this.color = "#000000";
-            this.font = new FontTextMask_1.FontTextMask();
-            this.lines = new TextMaskLine_1.TextMaskLine();
+            this.font = new FontTextMask_js_1.FontTextMask();
+            this.lines = new TextMaskLine_js_1.TextMaskLine();
             this.text = "";
         }
         load(data) {

package/umd/index.js

@@ -4,40 +4,38 @@
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Options/Classes/CanvasMask", "./CanvasMaskInstance"], factory);
+        define(["require", "exports", "./Options/Classes/CanvasMask.js", "./CanvasMaskInstance.js"], 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");
+    const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
+    const CanvasMaskInstance_js_1 = require("./CanvasMaskInstance.js");
     class CanvasMaskPlugin {
         constructor(engine) {
             this.id = "canvasMask";
             this._engine = engine;
         }
         getPlugin(container) {
-            return new CanvasMaskInstance_1.CanvasMaskInstance(container, this._engine);
+            return new CanvasMaskInstance_js_1.CanvasMaskInstance(container, this._engine);
         }
         loadOptions(options, source) {
-            if (!this.needsPlugin(source)) {
+            if (!this.needsPlugin(options) && !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();
+            if (canvasMaskOptions?.load === undefined) {
+                options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
             }
-            canvasMaskOptions.load(source === null || source === void 0 ? void 0 : source.canvasMask);
+            canvasMaskOptions.load(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;
+            return options?.canvasMask?.enable ?? false;
         }
     }
-    async function loadCanvasMaskPlugin(engine) {
-        const plugin = new CanvasMaskPlugin(engine);
-        await engine.addPlugin(plugin);
+    async function loadCanvasMaskPlugin(engine, refresh = true) {
+        await engine.addPlugin(new CanvasMaskPlugin(engine), refresh);
     }
     exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
 });

package/umd/utils.js

@@ -31,25 +31,25 @@
                 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,
+            if (!shouldCreateParticle) {
+                continue;
+            }
+            const pos = {
+                x: pixelPos.x * scale + positionOffset.x,
+                y: pixelPos.y * scale + positionOffset.y,
+            }, pOptions = {};
+            if (override.color) {
+                pOptions.color = {
+                    value: pixel,
+                };
+            }
+            if (override.opacity) {
+                pOptions.opacity = {
+                    value: pixel.a,
                 };
-                const pOptions = {};
-                if (override.color) {
-                    pOptions.color = {
-                        value: pixel,
-                    };
-                }
-                if (override.opacity) {
-                    pOptions.opacity = {
-                        value: pixel.a,
-                    };
-                }
-                container.particles.addParticle(pos, pOptions);
-                selectedPixels++;
             }
+            container.particles.addParticle(pos, pOptions);
+            selectedPixels++;
         }
     }
     exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
@@ -92,7 +92,7 @@
                 canvas.height = image.height;
                 const context = canvas.getContext("2d");
                 if (!context) {
-                    return reject(new Error("Could not get canvas context"));
+                    return reject(new Error(`${engine_1.errorPrefix} 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));
@@ -107,7 +107,7 @@
         if (!text || !context) {
             return;
         }
-        const lines = text.split(linesOptions.separator), fontSize = typeof font.size === "number" ? `${font.size}px` : font.size, linesData = [];
+        const lines = text.split(linesOptions.separator), fontSize = (0, engine_1.isNumber)(font.size) ? `${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}`;