@tsparticles/plugin-canvas-mask 4.0.0-alpha.8 → 4.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
- * v4.0.0-alpha.8
+ * v4.0.0-beta.1
  */
 /*
  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
@@ -16,25 +16,25 @@
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@tsparticles/engine"));
+		module.exports = factory(require("@tsparticles/canvas-utils"), require("@tsparticles/engine"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@tsparticles/engine"], factory);
+		define(["@tsparticles/canvas-utils", "@tsparticles/engine"], factory);
 	else {
-		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine")) : factory(root["window"]);
+		var a = typeof exports === 'object' ? factory(require("@tsparticles/canvas-utils"), require("@tsparticles/engine")) : factory(root["window"], root["window"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(this, (__WEBPACK_EXTERNAL_MODULE__tsparticles_engine__) => {
+})(this, (__WEBPACK_EXTERNAL_MODULE__tsparticles_canvas_utils__, __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__) => {
 return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ "./dist/browser/index.js"
-/*!*******************************!*\
-  !*** ./dist/browser/index.js ***!
-  \*******************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+/***/ "@tsparticles/canvas-utils"
+/*!***************************************************************************************************************************************************!*\
+  !*** external {"commonjs":"@tsparticles/canvas-utils","commonjs2":"@tsparticles/canvas-utils","amd":"@tsparticles/canvas-utils","root":"window"} ***!
+  \***************************************************************************************************************************************************/
+(module) {
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadCanvasMaskPlugin: () => (/* binding */ loadCanvasMaskPlugin)\n/* harmony export */ });\nasync function loadCanvasMaskPlugin(engine) {\n  engine.checkVersion(\"4.0.0-alpha.8\");\n  await engine.register(async e => {\n    const {\n      CanvasMaskPlugin\n    } = await __webpack_require__.e(/*! import() */ \"dist_browser_CanvasMaskPlugin_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./CanvasMaskPlugin.js */ \"./dist/browser/CanvasMaskPlugin.js\"));\n    e.addPlugin(new CanvasMaskPlugin());\n  });\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/index.js?\n}");
+module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_canvas_utils__;
 
 /***/ },
 
@@ -46,6 +46,16 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
 
 module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 
+/***/ },
+
+/***/ "./dist/browser/index.js"
+/*!*******************************!*\
+  !*** ./dist/browser/index.js ***!
+  \*******************************/
+(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadCanvasMaskPlugin: () => (/* binding */ loadCanvasMaskPlugin)\n/* harmony export */ });\nasync function loadCanvasMaskPlugin(engine) {\n    engine.checkVersion(\"4.0.0-beta.1\");\n    await engine.pluginManager.register(async (e)=>{\n        const { CanvasMaskPlugin } = await __webpack_require__.e(/*! import() */ \"dist_browser_CanvasMaskPlugin_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./CanvasMaskPlugin.js */ \"./dist/browser/CanvasMaskPlugin.js\"));\n        e.pluginManager.addPlugin(new CanvasMaskPlugin());\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/index.js?\n}");
+
 /***/ }
 
 /******/ 	});
@@ -60,12 +70,6 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 		if (cachedModule !== undefined) {
 /******/ 			return cachedModule.exports;
 /******/ 		}
-/******/ 		// Check if module exists (development only)
-/******/ 		if (__webpack_modules__[moduleId] === undefined) {
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
-/******/ 			e.code = 'MODULE_NOT_FOUND';
-/******/ 			throw e;
-/******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = __webpack_module_cache__[moduleId] = {
 /******/ 			// no module.id needed
@@ -74,6 +78,12 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
+/******/ 		if (!(moduleId in __webpack_modules__)) {
+/******/ 			delete __webpack_module_cache__[moduleId];
+/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
+/******/ 			e.code = 'MODULE_NOT_FOUND';
+/******/ 			throw e;
+/******/ 		}
 /******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 /******/ 	
 /******/ 		// Return the exports of the module
@@ -118,6 +128,18 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 		};
 /******/ 	})();
 /******/ 	
+/******/ 	/* webpack/runtime/global */
+/******/ 	(() => {
+/******/ 		__webpack_require__.g = (function() {
+/******/ 			if (typeof globalThis === 'object') return globalThis;
+/******/ 			try {
+/******/ 				return this || new Function('return this')();
+/******/ 			} catch (e) {
+/******/ 				if (typeof window === 'object') return window;
+/******/ 			}
+/******/ 		})();
+/******/ 	})();
+/******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */
 /******/ 	(() => {
 /******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
@@ -182,8 +204,8 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
 /******/ 	/* webpack/runtime/publicPath */
 /******/ 	(() => {
 /******/ 		var scriptUrl;
-/******/ 		if (globalThis.importScripts) scriptUrl = globalThis.location + "";
-/******/ 		var document = globalThis.document;
+/******/ 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
+/******/ 		var document = __webpack_require__.g.document;
 /******/ 		if (!scriptUrl && document) {
 /******/ 			if (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT')
 /******/ 				scriptUrl = document.currentScript.src;

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(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var a in r)("object"==typeof exports?exports:e)[a]=r[a]}}(this,(e=>(()=>{var t,r,a={303(t){t.exports=e}},o={};function n(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return a[e](r,r.exports,n),r.exports}n.m=a,n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>e+".min.js",n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},r="@tsparticles/plugin-canvas-mask:",n.l=(e,a,o,i)=>{if(t[e])t[e].push(a);else{var s,l;if(void 0!==o)for(var c=document.getElementsByTagName("script"),p=0;p<c.length;p++){var u=c[p];if(u.getAttribute("src")==e||u.getAttribute("data-webpack")==r+o){s=u;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",n.nc&&s.setAttribute("nonce",n.nc),s.setAttribute("data-webpack",r+o),s.src=e),t[e]=[a];var d=(r,a)=>{s.onerror=s.onload=null,clearTimeout(f);var o=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),o&&o.forEach((e=>e(a))),r)return r(a)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=d.bind(null,s.onerror),s.onload=d.bind(null,s.onload),l&&document.head.appendChild(s)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;globalThis.importScripts&&(e=globalThis.location+"");var t=globalThis.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var a=r.length-1;a>-1&&(!e||!/^http(s?):/.test(e));)e=r[a--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{var e={837:0};n.f.j=(t,r)=>{var a=n.o(e,t)?e[t]:void 0;if(0!==a)if(a)r.push(a[2]);else{var o=new Promise(((r,o)=>a=e[t]=[r,o]));r.push(a[2]=o);var i=n.p+n.u(t),s=new Error;n.l(i,(r=>{if(n.o(e,t)&&(0!==(a=e[t])&&(e[t]=void 0),a)){var o=r&&("load"===r.type?"missing":r.type),i=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+o+": "+i+")",s.name="ChunkLoadError",s.type=o,s.request=i,a[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var a,o,[i,s,l]=r,c=0;if(i.some((t=>0!==e[t]))){for(a in s)n.o(s,a)&&(n.m[a]=s[a]);if(l)l(n)}for(t&&t(r);c<i.length;c++)o=i[c],n.o(e,o)&&e[o]&&e[o][0](),e[o]=0},r=this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var i={};async function s(e){e.checkVersion("4.0.0-alpha.8"),await e.register((async e=>{const{CanvasMaskPlugin:t}=await n.e(775).then(n.bind(n,775));e.addPlugin(new t)}))}return n.r(i),n.d(i,{loadCanvasMaskPlugin:()=>s}),i})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/canvas-utils"),require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/canvas-utils","@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/canvas-utils"),require("@tsparticles/engine")):t(e.window,e.window);for(var i in r)("object"==typeof exports?exports:e)[i]=r[i]}}(this,(e,t)=>(()=>{"use strict";var r,i,n,a={425(t){t.exports=e},303(e){e.exports=t}},o={};function s(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return a[e](r,r.exports,s),r.exports}s.m=a,s.d=(e,t)=>{for(var r in t)s.o(t,r)&&!s.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce((t,r)=>(s.f[r](e,t),t),[])),s.u=e=>""+e+".min.js",s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c={},s.l=(e,t,r,i)=>{if(c[e])return void c[e].push(t);if(void 0!==r)for(var n,a,o=document.getElementsByTagName("script"),l=0;l<o.length;l++){var p=o[l];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")=="@tsparticles/plugin-canvas-mask:"+r){n=p;break}}n||(a=!0,(n=document.createElement("script")).charset="utf-8",s.nc&&n.setAttribute("nonce",s.nc),n.setAttribute("data-webpack","@tsparticles/plugin-canvas-mask:"+r),n.src=e),c[e]=[t];var u=(t,r)=>{n.onerror=n.onload=null,clearTimeout(d);var i=c[e];if(delete c[e],n.parentNode&&n.parentNode.removeChild(n),i&&i.forEach(e=>e(r)),t)return t(r)},d=setTimeout(u.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=u.bind(null,n.onerror),n.onload=u.bind(null,n.onload),a&&document.head.appendChild(n)},s.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.g.importScripts&&(l=s.g.location+"");var c,l,p=s.g.document;if(!l&&p&&(p.currentScript&&"SCRIPT"===p.currentScript.tagName.toUpperCase()&&(l=p.currentScript.src),!l)){var u=p.getElementsByTagName("script");if(u.length)for(var d=u.length-1;d>-1&&(!l||!/^http(s?):/.test(l));)l=u[d--].src}if(!l)throw Error("Automatic publicPath is not supported in this browser");s.p=l=l.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),r={837:0},s.f.j=(e,t)=>{var i=s.o(r,e)?r[e]:void 0;if(0!==i)if(i)t.push(i[2]);else{var n=new Promise((t,n)=>i=r[e]=[t,n]);t.push(i[2]=n);var a=s.p+s.u(e),o=Error();s.l(a,t=>{if(s.o(r,e)&&(0!==(i=r[e])&&(r[e]=void 0),i)){var n=t&&("load"===t.type?"missing":t.type),a=t&&t.target&&t.target.src;o.message="Loading chunk "+e+` failed.
+(`+n+": "+a+")",o.name="ChunkLoadError",o.type=n,o.request=a,i[1](o)}},"chunk-"+e,e)}},i=(e,t)=>{var i,n,[a,o,c]=t,l=0;if(a.some(e=>0!==r[e])){for(i in o)s.o(o,i)&&(s.m[i]=o[i]);c&&c(s)}for(e&&e(t);l<a.length;l++)n=a[l],s.o(r,n)&&r[n]&&r[n][0](),r[n]=0},(n=this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[]).forEach(i.bind(null,0)),n.push=i.bind(null,n.push.bind(n));var f={};async function g(e){e.checkVersion("4.0.0-beta.1"),await e.pluginManager.register(async e=>{let{CanvasMaskPlugin:t}=await s.e(556).then(s.bind(s,556));e.pluginManager.addPlugin(new t)})}return s.r(f),s.d(f,{loadCanvasMaskPlugin:()=>g}),f})());

package/types/CanvasMaskPlugin.d.ts

@@ -1,8 +1,7 @@
 import type { CanvasMaskOptions, ICanvasMaskOptions } from "./types.js";
 import { type Container, type IContainerPlugin, type IPlugin, type RecursivePartial } from "@tsparticles/engine";
 export declare class CanvasMaskPlugin implements IPlugin {
-    readonly id: string;
-    constructor();
+    readonly id = "canvas-mask";
     getPlugin(container: Container): Promise<IContainerPlugin>;
     loadOptions(_container: Container, options: CanvasMaskOptions, source?: RecursivePartial<ICanvasMaskOptions>): void;
     needsPlugin(options?: RecursivePartial<ICanvasMaskOptions>): boolean;

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

@@ -3,9 +3,9 @@ import type { IFontTextMask } from "../Interfaces/IFontTextMask.js";
 export declare class FontTextMask implements IFontTextMask, IOptionLoader<IFontTextMask> {
     family: string;
     size: string | number;
-    style?: string;
-    variant?: string;
-    weight?: string | number;
+    style: string;
+    variant: string;
+    weight: string;
     constructor();
     load(data?: RecursivePartial<IFontTextMask>): void;
 }

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

@@ -4,6 +4,7 @@ import type { ITextMask } from "../Interfaces/ITextMask.js";
 import { TextMaskLine } from "./TextMaskLine.js";
 export declare class TextMask implements ITextMask, IOptionLoader<ITextMask> {
     color: string;
+    fill: boolean;
     font: FontTextMask;
     lines: TextMaskLine;
     text: string;

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

@@ -1,7 +1,2 @@
-export interface IFontTextMask {
-    family: string;
-    size: number | string;
-    style?: string;
-    variant?: string;
-    weight?: number | string;
-}
+import type { ITextDataFontOptions } from "@tsparticles/canvas-utils";
+export type IFontTextMask = ITextDataFontOptions;

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.render.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.render.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.render.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,10 +45,10 @@ 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");
-        await engine.register(async (e) => {
+        engine.checkVersion("4.0.0-beta.1");
+        await engine.pluginManager.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());
+            e.pluginManager.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 */