@tsparticles/plugin-canvas-mask 3.9.1 → 4.0.0-alpha.1

package/cjs/utils.js

@@ -1,26 +1,28 @@
-"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");
+import { getRandom, isNumber, percentDenominator, safeDocument, } from "@tsparticles/engine";
 const half = 0.5, origin = {
     x: 0,
     y: 0,
-}, defaultWidth = 0;
-function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+}, 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;
     const positionOffset = {
-        x: (canvasSize.width * position.x) / engine_1.percentDenominator - width * scale * half,
-        y: (canvasSize.height * position.y) / engine_1.percentDenominator - height * scale * half,
+        x: (canvasSize.width * position.x) / percentDenominator - width * scale * half,
+        y: (canvasSize.height * position.y) / percentDenominator - height * scale * half,
     };
     while (selectedPixels < maxParticles && indexArray.length) {
         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;
         }
@@ -42,7 +44,7 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
         selectedPixels++;
     }
 }
-function getCanvasImageData(ctx, size, offset, clear = true) {
+export function getCanvasImageData(ctx, size, offset, clear = true) {
     const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
     if (clear) {
         ctx.clearRect(origin.x, origin.y, size.width, size.height);
@@ -53,20 +55,21 @@ 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,18 +78,19 @@ function getCanvasImageData(ctx, size, offset, clear = true) {
         height: pixels.length,
     };
 }
-function getImageData(src, offset) {
+export function getImageData(src, offset) {
     const image = new Image();
     image.crossOrigin = "Anonymous";
     const p = new Promise((resolve, reject) => {
         image.onerror = reject;
         image.onload = () => {
-            const canvas = document.createElement("canvas");
+            const canvas = safeDocument().createElement("canvas");
             canvas.width = image.width;
             canvas.height = image.height;
             const context = canvas.getContext("2d");
             if (!context) {
-                return reject(new Error(`${engine_1.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));
@@ -95,15 +99,15 @@ function getImageData(src, offset) {
     image.src = src;
     return p;
 }
-function getTextData(textOptions, offset) {
-    const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
+export function getTextData(textOptions, offset) {
+    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 = (0, engine_1.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,
@@ -118,7 +122,7 @@ 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;
@@ -128,8 +132,15 @@ 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((0, engine_1.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/dist_browser_CanvasMaskPlugin_js.js

@@ -0,0 +1,120 @@
+/*!
+ * 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
+ * v4.0.0-alpha.1
+ */
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+(this["webpackChunk_tsparticles_plugin_canvas_mask"] = this["webpackChunk_tsparticles_plugin_canvas_mask"] || []).push([["dist_browser_CanvasMaskPlugin_js"],{
+
+/***/ "./dist/browser/CanvasMaskInstance.js"
+/*!********************************************!*\
+  !*** ./dist/browser/CanvasMaskInstance.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 */   CanvasMaskInstance: () => (/* binding */ CanvasMaskInstance)\n/* harmony export */ });\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./utils.js */ \"./dist/browser/utils.js\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\n\nclass CanvasMaskInstance {\n  constructor(container) {\n    this._container = container;\n  }\n  async init() {\n    const container = this._container,\n      options = container.actualOptions.canvasMask;\n    if (!options?.enable) {\n      return;\n    }\n    let pixelData = {\n      pixels: [],\n      height: 0,\n      width: 0\n    };\n    const offset = options.pixels.offset;\n    if (options.image) {\n      const url = options.image.src;\n      if (!url) {\n        return;\n      }\n      pixelData = await (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getImageData)(url, offset);\n    } else if (options.text) {\n      const textOptions = options.text;\n      const data = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getTextData)(textOptions, offset);\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.isNull)(data)) {\n        return;\n      }\n      pixelData = data;\n    } else if (options.element ?? options.selector) {\n      const canvas = options.element ?? (options.selector && (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.safeDocument)().querySelector(options.selector));\n      if (!canvas) {\n        return;\n      }\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        return;\n      }\n      pixelData = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getCanvasImageData)(context, canvas, offset);\n    }\n    (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskInstance.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/CanvasMaskPlugin.js"
+/*!******************************************!*\
+  !*** ./dist/browser/CanvasMaskPlugin.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 */   CanvasMaskPlugin: () => (/* binding */ CanvasMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/CanvasMask.js */ \"./dist/browser/Options/Classes/CanvasMask.js\");\n/* harmony import */ var _CanvasMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CanvasMaskInstance.js */ \"./dist/browser/CanvasMaskInstance.js\");\n\n\nclass CanvasMaskPlugin {\n  constructor() {\n    this.id = \"canvasMask\";\n  }\n  getPlugin(container) {\n    return Promise.resolve(new _CanvasMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__.CanvasMaskInstance(container));\n  }\n  loadOptions(options, source) {\n    if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n      return;\n    }\n    let canvasMaskOptions = options.canvasMask;\n    if (canvasMaskOptions?.load === undefined) {\n      options.canvasMask = canvasMaskOptions = new _Options_Classes_CanvasMask_js__WEBPACK_IMPORTED_MODULE_0__.CanvasMask();\n    }\n    canvasMaskOptions.load(source?.canvasMask);\n  }\n  needsPlugin(options) {\n    return options?.canvasMask?.enable ?? false;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/CanvasMaskPlugin.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/CanvasMask.js"
+/*!****************************************************!*\
+  !*** ./dist/browser/Options/Classes/CanvasMask.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 */   CanvasMask: () => (/* binding */ CanvasMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CanvasMaskOverride.js */ \"./dist/browser/Options/Classes/CanvasMaskOverride.js\");\n/* harmony import */ var _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CanvasMaskPixels.js */ \"./dist/browser/Options/Classes/CanvasMaskPixels.js\");\n/* harmony import */ var _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ImageMask.js */ \"./dist/browser/Options/Classes/ImageMask.js\");\n/* harmony import */ var _TextMask_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./TextMask.js */ \"./dist/browser/Options/Classes/TextMask.js\");\n\n\n\n\n\nclass CanvasMask {\n  constructor() {\n    this.enable = false;\n    this.override = new _CanvasMaskOverride_js__WEBPACK_IMPORTED_MODULE_1__.CanvasMaskOverride();\n    this.pixels = new _CanvasMaskPixels_js__WEBPACK_IMPORTED_MODULE_2__.CanvasMaskPixels();\n    this.position = {\n      x: 50,\n      y: 50\n    };\n    this.scale = 1;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.element !== undefined && data.element instanceof HTMLCanvasElement) {\n      this.element = data.element;\n    }\n    if (data.enable !== undefined) {\n      this.enable = data.enable;\n    }\n    if (data.image) {\n      this.image ??= new _ImageMask_js__WEBPACK_IMPORTED_MODULE_3__.ImageMask();\n      this.image.load(data.image);\n    }\n    this.pixels.load(data.pixels);\n    if (data.position) {\n      this.position = {\n        x: data.position.x ?? this.position.x,\n        y: data.position.y ?? this.position.y\n      };\n    }\n    this.override.load(data.override);\n    if (data.scale !== undefined) {\n      this.scale = data.scale;\n    }\n    if (data.selector !== undefined) {\n      this.selector = data.selector;\n    }\n    if (data.text) {\n      this.text ??= new _TextMask_js__WEBPACK_IMPORTED_MODULE_4__.TextMask();\n      this.text.load(data.text);\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMask.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/CanvasMaskOverride.js"
+/*!************************************************************!*\
+  !*** ./dist/browser/Options/Classes/CanvasMaskOverride.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 */   CanvasMaskOverride: () => (/* binding */ CanvasMaskOverride)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass CanvasMaskOverride {\n  constructor() {\n    this.color = true;\n    this.opacity = false;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.color !== undefined) {\n      this.color = data.color;\n    }\n    if (data.opacity !== undefined) {\n      this.opacity = data.opacity;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskOverride.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/CanvasMaskPixels.js"
+/*!**********************************************************!*\
+  !*** ./dist/browser/Options/Classes/CanvasMaskPixels.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 */   CanvasMaskPixels: () => (/* binding */ CanvasMaskPixels)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst minAlpha = 0;\nclass CanvasMaskPixels {\n  constructor() {\n    this.filter = pixel => pixel.a > minAlpha;\n    this.offset = 4;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.filter !== undefined) {\n      if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.filter)) {\n        if (Object.hasOwn(globalThis, data.filter)) {\n          const filter = globalThis[data.filter];\n          if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isFunction)(filter)) {\n            this.filter = filter;\n          }\n        }\n      } else {\n        this.filter = data.filter;\n      }\n    }\n    if (data.offset !== undefined) {\n      this.offset = data.offset;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/CanvasMaskPixels.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/FontTextMask.js"
+/*!******************************************************!*\
+  !*** ./dist/browser/Options/Classes/FontTextMask.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 */   FontTextMask: () => (/* binding */ FontTextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass FontTextMask {\n  constructor() {\n    this.family = \"sans-serif\";\n    this.size = 100;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.family !== undefined) {\n      this.family = data.family;\n    }\n    if (data.size !== undefined) {\n      this.size = data.size;\n    }\n    if (data.style !== undefined) {\n      this.style = data.style;\n    }\n    if (data.variant !== undefined) {\n      this.variant = data.variant;\n    }\n    if (data.weight !== undefined) {\n      this.weight = data.weight;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/FontTextMask.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/ImageMask.js"
+/*!***************************************************!*\
+  !*** ./dist/browser/Options/Classes/ImageMask.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 */   ImageMask: () => (/* binding */ ImageMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass ImageMask {\n  constructor() {\n    this.src = \"\";\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.src !== undefined) {\n      this.src = data.src;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/ImageMask.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/TextMask.js"
+/*!**************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextMask.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 */   TextMask: () => (/* binding */ TextMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./FontTextMask.js */ \"./dist/browser/Options/Classes/FontTextMask.js\");\n/* harmony import */ var _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TextMaskLine.js */ \"./dist/browser/Options/Classes/TextMaskLine.js\");\n\n\n\nclass TextMask {\n  constructor() {\n    this.color = \"#000000\";\n    this.font = new _FontTextMask_js__WEBPACK_IMPORTED_MODULE_1__.FontTextMask();\n    this.lines = new _TextMaskLine_js__WEBPACK_IMPORTED_MODULE_2__.TextMaskLine();\n    this.text = \"\";\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.color !== undefined) {\n      this.color = data.color;\n    }\n    this.font.load(data.font);\n    this.lines.load(data.lines);\n    if (data.text !== undefined) {\n      this.text = data.text;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/TextMask.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/TextMaskLine.js"
+/*!******************************************************!*\
+  !*** ./dist/browser/Options/Classes/TextMaskLine.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 */   TextMaskLine: () => (/* binding */ TextMaskLine)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass TextMaskLine {\n  constructor() {\n    this.separator = \"\\n\";\n    this.spacing = 10;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.separator !== undefined) {\n      this.separator = data.separator;\n    }\n    if (data.spacing !== undefined) {\n      this.spacing = data.spacing;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/Options/Classes/TextMaskLine.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/utils.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 */   addParticlesFromCanvasPixels: () => (/* binding */ addParticlesFromCanvasPixels),\n/* harmony export */   getCanvasImageData: () => (/* binding */ getCanvasImageData),\n/* harmony export */   getImageData: () => (/* binding */ getImageData),\n/* harmony export */   getTextData: () => (/* binding */ getTextData)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nconst half = 0.5,\n  origin = {\n    x: 0,\n    y: 0\n  },\n  defaultWidth = 0,\n  defaultRgb = 0,\n  defaultAlpha = 1;\nfunction addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {\n  const {\n      height,\n      width\n    } = data,\n    numPixels = height * width,\n    indexArray = shuffle(range(numPixels)),\n    maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value),\n    canvasSize = container.canvas.size;\n  let selectedPixels = 0;\n  const positionOffset = {\n    x: canvasSize.width * position.x / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - width * scale * half,\n    y: canvasSize.height * position.y / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.percentDenominator - height * scale * half\n  };\n  while (selectedPixels < maxParticles && indexArray.length) {\n    const defaultIndex = 0,\n      nextIndex = indexArray.pop() ?? defaultIndex,\n      pixelPos = {\n        x: nextIndex % width,\n        y: Math.floor(nextIndex / width)\n      },\n      row = data.pixels[pixelPos.y];\n    if (!row) {\n      continue;\n    }\n    const pixel = row[pixelPos.x];\n    if (!pixel) {\n      continue;\n    }\n    const shouldCreateParticle = filter(pixel);\n    if (!shouldCreateParticle) {\n      continue;\n    }\n    const pos = {\n        x: pixelPos.x * scale + positionOffset.x,\n        y: pixelPos.y * scale + positionOffset.y\n      },\n      pOptions = {};\n    if (override.color) {\n      pOptions.color = {\n        value: pixel\n      };\n    }\n    if (override.opacity) {\n      pOptions.opacity = {\n        value: pixel.a\n      };\n    }\n    container.particles.addParticle(pos, pOptions);\n    selectedPixels++;\n  }\n}\nfunction getCanvasImageData(ctx, size, offset, clear = true) {\n  const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;\n  if (clear) {\n    ctx.clearRect(origin.x, origin.y, size.width, size.height);\n  }\n  const pixels = [];\n  for (let i = 0; i < imageData.length; i += offset) {\n    const idx = i / offset,\n      pos = {\n        x: idx % size.width,\n        y: Math.floor(idx / size.width)\n      };\n    pixels[pos.y] ??= [];\n    const indexesOffset = {\n        r: 0,\n        g: 1,\n        b: 2,\n        a: 3\n      },\n      alphaFactor = 255,\n      row = pixels[pos.y];\n    if (!row) {\n      continue;\n    }\n    row[pos.x] = {\n      r: imageData[i + indexesOffset.r] ?? defaultRgb,\n      g: imageData[i + indexesOffset.g] ?? defaultRgb,\n      b: imageData[i + indexesOffset.b] ?? defaultRgb,\n      a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor\n    };\n  }\n  return {\n    pixels,\n    width: Math.min(...pixels.map(row => row.length)),\n    height: pixels.length\n  };\n}\nfunction getImageData(src, offset) {\n  const image = new Image();\n  image.crossOrigin = \"Anonymous\";\n  const p = new Promise((resolve, reject) => {\n    image.onerror = reject;\n    image.onload = () => {\n      const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\");\n      canvas.width = image.width;\n      canvas.height = image.height;\n      const context = canvas.getContext(\"2d\");\n      if (!context) {\n        reject(new Error(\"Could not get canvas context\"));\n        return;\n      }\n      context.drawImage(image, origin.x, origin.y, image.width, image.height, origin.x, origin.y, canvas.width, canvas.height);\n      resolve(getCanvasImageData(context, canvas, offset));\n    };\n  });\n  image.src = src;\n  return p;\n}\nfunction getTextData(textOptions, offset) {\n  const canvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\"),\n    context = canvas.getContext(\"2d\"),\n    {\n      font,\n      text,\n      lines: linesOptions,\n      color\n    } = textOptions;\n  if (!text || !context) {\n    return;\n  }\n  const lines = text.split(linesOptions.separator),\n    fontSize = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNumber)(font.size) ? `${font.size.toString()}px` : font.size,\n    linesData = [];\n  let maxWidth = 0,\n    totalHeight = 0;\n  for (const line of lines) {\n    context.font = `${font.style ?? \"\"} ${font.variant ?? \"\"} ${font.weight?.toString() ?? \"\"} ${fontSize} ${font.family}`;\n    const measure = context.measureText(line),\n      lineData = {\n        measure,\n        text: line,\n        height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,\n        width: measure.width\n      };\n    maxWidth = Math.max(maxWidth || defaultWidth, lineData.width);\n    totalHeight += lineData.height + linesOptions.spacing;\n    linesData.push(lineData);\n  }\n  canvas.width = maxWidth;\n  canvas.height = totalHeight;\n  let currentHeight = 0;\n  for (const line of linesData) {\n    context.font = `${font.style ?? \"\"} ${font.variant ?? \"\"} ${font.weight?.toString() ?? \"\"} ${fontSize} ${font.family}`;\n    context.fillStyle = color;\n    context.fillText(line.text, origin.x, currentHeight + line.measure.actualBoundingBoxAscent);\n    currentHeight += line.height + linesOptions.spacing;\n  }\n  return getCanvasImageData(context, canvas, offset);\n}\nfunction shuffle(array) {\n  const lengthOffset = 1,\n    minIndex = 0;\n  for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {\n    const randomIndex = Math.floor((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getRandom)() * currentIndex),\n      currentItem = array[currentIndex],\n      randomItem = array[randomIndex];\n    if (randomItem === currentItem) {\n      continue;\n    }\n    if (randomItem === undefined || currentItem === undefined) {\n      continue;\n    }\n    array[currentIndex] = randomItem;\n    array[randomIndex] = currentItem;\n  }\n  return array;\n}\nconst range = n => [...Array(n).keys()];\n\n//# sourceURL=webpack://@tsparticles/plugin-canvas-mask/./dist/browser/utils.js?\n}");
+
+/***/ }
+
+}]);

package/esm/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/esm/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/esm/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/esm/index.js

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

package/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-canvas-mask",
-  "version": "3.9.1",
+  "version": "4.0.0-alpha.1",
   "description": "tsParticles canvas mask plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -86,9 +86,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "3.9.1"
+    "@tsparticles/engine": "4.0.0-alpha.1"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "type": "module"
 }