@tsparticles/plugin-background-mask 4.0.0-alpha.2 → 4.0.0-alpha.21

package/603.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_background_mask=this.webpackChunk_tsparticles_plugin_background_mask||[]).push([[603],{603(o,i,e){e.d(i,{BackgroundMaskPlugin:()=>c});var s=e(303);class t{color;image;opacity;constructor(){this.opacity=1}load(o){(0,s.isNull)(o)||(void 0!==o.color&&(this.color=s.OptionsColor.create(this.color,o.color)),void 0!==o.image&&(this.image=o.image),void 0!==o.opacity&&(this.opacity=o.opacity))}}class a{composite;cover;enable;constructor(){this.composite="destination-out",this.cover=new t,this.enable=!1}load(o){if(!(0,s.isNull)(o)){if(void 0!==o.composite&&(this.composite=o.composite),void 0!==o.cover){let i=o.cover,e=(0,s.isString)(o.cover)?{color:o.cover}:o.cover;this.cover.load(void 0!==i.color||void 0!==i.image?i:{color:e})}void 0!==o.enable&&(this.enable=o.enable)}}}class c{id="background-mask";_engine;constructor(o){this._engine=o}async getPlugin(o){let{BackgroundMaskPluginInstance:i}=await e.e(607).then(e.bind(e,607));return new i(o,this._engine)}loadOptions(o,i,e){if(!this.needsPlugin(i)&&!this.needsPlugin(e))return;let s=i.backgroundMask;s?.load||(i.backgroundMask=s=new a),s.load(e?.backgroundMask)}needsPlugin(o){return!!o?.backgroundMask?.enable}}}}]);

package/607.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_plugin_background_mask=this.webpackChunk_tsparticles_plugin_background_mask||[]).push([[607],{607(e,a,t){t.d(a,{BackgroundMaskPluginInstance:()=>n});var i=t(303);class n{_container;_coverColorStyle;_coverImage;_defaultCompositeValue;_engine;constructor(e,a){this._container=e,this._engine=a}canvasClear(){let e=this._container.actualOptions.backgroundMask;return!!e?.enable&&this.canvasPaint()}canvasPaint(){if(!this._container.actualOptions.backgroundMask?.enable)return!1;let e=this._container.canvas;return e.canvasClear(),this._coverImage?e.paintImage(this._coverImage.image,this._coverImage.opacity):e.paintBase(this._coverColorStyle),!0}drawSettingsCleanup(e){this._defaultCompositeValue&&(e.globalCompositeOperation=this._defaultCompositeValue)}drawSettingsSetup(e){let a=e.globalCompositeOperation,t=this._container.actualOptions.backgroundMask;this._defaultCompositeValue=a,e.globalCompositeOperation=t?.enable?t.composite:a}async init(){await this._initCover()}_initCover=async()=>{let e=this._container.actualOptions,a=e.backgroundMask?.cover,t=a?.color;if(t){let e=(0,i.rangeColorToRgb)(this._engine,t);if(e){let t={...e,a:a.opacity};this._coverColorStyle=(0,i.getStyleFromRgb)(t,this._container.hdr,t.a)}}else await new Promise((e,t)=>{if(!a?.image)return;let n=(0,i.safeDocument)().createElement("img");n.addEventListener("load",()=>{this._coverImage={image:n,opacity:a.opacity},e()}),n.addEventListener("error",()=>{t(Error("Error loading image"))}),n.src=a.image})}}}}]);

package/browser/BackgroundMaskPlugin.js

@@ -1,15 +1,16 @@
 import { BackgroundMask } from "./Options/Classes/BackgroundMask.js";
-import { BackgroundMaskInstance } from "./BackgroundMaskInstance.js";
 export class BackgroundMaskPlugin {
+    id = "background-mask";
+    _engine;
     constructor(engine) {
-        this.id = "background-mask";
         this._engine = engine;
     }
-    getPlugin(container) {
-        return Promise.resolve(new BackgroundMaskInstance(container, this._engine));
+    async getPlugin(container) {
+        const { BackgroundMaskPluginInstance } = await import("./BackgroundMaskPluginInstance.js");
+        return new BackgroundMaskPluginInstance(container, this._engine);
     }
-    loadOptions(options, source) {
-        if (!this.needsPlugin()) {
+    loadOptions(_container, options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
         let backgroundMaskOptions = options.backgroundMask;
@@ -18,7 +19,7 @@ export class BackgroundMaskPlugin {
         }
         backgroundMaskOptions.load(source?.backgroundMask);
     }
-    needsPlugin() {
-        return true;
+    needsPlugin(options) {
+        return !!options?.backgroundMask?.enable;
     }
 }

package/browser/BackgroundMaskPluginInstance.js

@@ -0,0 +1,79 @@
+import { getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
+export class BackgroundMaskPluginInstance {
+    _container;
+    _coverColorStyle;
+    _coverImage;
+    _defaultCompositeValue;
+    _engine;
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+    }
+    canvasClear() {
+        const backgroundMask = this._container.actualOptions.backgroundMask;
+        if (!backgroundMask?.enable) {
+            return false;
+        }
+        return this.canvasPaint();
+    }
+    canvasPaint() {
+        if (!this._container.actualOptions.backgroundMask?.enable) {
+            return false;
+        }
+        const canvas = this._container.canvas;
+        canvas.canvasClear();
+        if (this._coverImage) {
+            canvas.paintImage(this._coverImage.image, this._coverImage.opacity);
+        }
+        else {
+            canvas.paintBase(this._coverColorStyle);
+        }
+        return true;
+    }
+    drawSettingsCleanup(context) {
+        if (!this._defaultCompositeValue) {
+            return;
+        }
+        context.globalCompositeOperation = this._defaultCompositeValue;
+    }
+    drawSettingsSetup(context) {
+        const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;
+        this._defaultCompositeValue = previousComposite;
+        context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
+    }
+    async init() {
+        await this._initCover();
+    }
+    _initCover = async () => {
+        const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
+        if (color) {
+            const coverRgb = rangeColorToRgb(this._engine, color);
+            if (coverRgb) {
+                const coverColor = {
+                    ...coverRgb,
+                    a: cover.opacity,
+                };
+                this._coverColorStyle = getStyleFromRgb(coverColor, this._container.hdr, coverColor.a);
+            }
+        }
+        else {
+            await new Promise((resolve, reject) => {
+                if (!cover?.image) {
+                    return;
+                }
+                const img = safeDocument().createElement("img");
+                img.addEventListener("load", () => {
+                    this._coverImage = {
+                        image: img,
+                        opacity: cover.opacity,
+                    };
+                    resolve();
+                });
+                img.addEventListener("error", () => {
+                    reject(new Error("Error loading image"));
+                });
+                img.src = cover.image;
+            });
+        }
+    };
+}

package/browser/Options/Classes/BackgroundMask.js

@@ -1,6 +1,9 @@
 import { isNull, isString } from "@tsparticles/engine";
 import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
 export class BackgroundMask {
+    composite;
+    cover;
+    enable;
     constructor() {
         this.composite = "destination-out";
         this.cover = new BackgroundMaskCover();

package/browser/Options/Classes/BackgroundMaskCover.js

@@ -1,5 +1,8 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class BackgroundMaskCover {
+    color;
+    image;
+    opacity;
     constructor() {
         this.opacity = 1;
     }

package/browser/index.js

@@ -1,6 +1,6 @@
-export function loadBackgroundMaskPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
+export async function loadBackgroundMaskPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.21");
+    await engine.register(async (e) => {
         const { BackgroundMaskPlugin } = await import("./BackgroundMaskPlugin.js");
         e.addPlugin(new BackgroundMaskPlugin(e));
     });

package/cjs/BackgroundMaskPlugin.js

@@ -1,15 +1,16 @@
 import { BackgroundMask } from "./Options/Classes/BackgroundMask.js";
-import { BackgroundMaskInstance } from "./BackgroundMaskInstance.js";
 export class BackgroundMaskPlugin {
+    id = "background-mask";
+    _engine;
     constructor(engine) {
-        this.id = "background-mask";
         this._engine = engine;
     }
-    getPlugin(container) {
-        return Promise.resolve(new BackgroundMaskInstance(container, this._engine));
+    async getPlugin(container) {
+        const { BackgroundMaskPluginInstance } = await import("./BackgroundMaskPluginInstance.js");
+        return new BackgroundMaskPluginInstance(container, this._engine);
     }
-    loadOptions(options, source) {
-        if (!this.needsPlugin()) {
+    loadOptions(_container, options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
         let backgroundMaskOptions = options.backgroundMask;
@@ -18,7 +19,7 @@ export class BackgroundMaskPlugin {
         }
         backgroundMaskOptions.load(source?.backgroundMask);
     }
-    needsPlugin() {
-        return true;
+    needsPlugin(options) {
+        return !!options?.backgroundMask?.enable;
     }
 }

package/cjs/BackgroundMaskPluginInstance.js

@@ -0,0 +1,79 @@
+import { getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
+export class BackgroundMaskPluginInstance {
+    _container;
+    _coverColorStyle;
+    _coverImage;
+    _defaultCompositeValue;
+    _engine;
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+    }
+    canvasClear() {
+        const backgroundMask = this._container.actualOptions.backgroundMask;
+        if (!backgroundMask?.enable) {
+            return false;
+        }
+        return this.canvasPaint();
+    }
+    canvasPaint() {
+        if (!this._container.actualOptions.backgroundMask?.enable) {
+            return false;
+        }
+        const canvas = this._container.canvas;
+        canvas.canvasClear();
+        if (this._coverImage) {
+            canvas.paintImage(this._coverImage.image, this._coverImage.opacity);
+        }
+        else {
+            canvas.paintBase(this._coverColorStyle);
+        }
+        return true;
+    }
+    drawSettingsCleanup(context) {
+        if (!this._defaultCompositeValue) {
+            return;
+        }
+        context.globalCompositeOperation = this._defaultCompositeValue;
+    }
+    drawSettingsSetup(context) {
+        const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;
+        this._defaultCompositeValue = previousComposite;
+        context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
+    }
+    async init() {
+        await this._initCover();
+    }
+    _initCover = async () => {
+        const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
+        if (color) {
+            const coverRgb = rangeColorToRgb(this._engine, color);
+            if (coverRgb) {
+                const coverColor = {
+                    ...coverRgb,
+                    a: cover.opacity,
+                };
+                this._coverColorStyle = getStyleFromRgb(coverColor, this._container.hdr, coverColor.a);
+            }
+        }
+        else {
+            await new Promise((resolve, reject) => {
+                if (!cover?.image) {
+                    return;
+                }
+                const img = safeDocument().createElement("img");
+                img.addEventListener("load", () => {
+                    this._coverImage = {
+                        image: img,
+                        opacity: cover.opacity,
+                    };
+                    resolve();
+                });
+                img.addEventListener("error", () => {
+                    reject(new Error("Error loading image"));
+                });
+                img.src = cover.image;
+            });
+        }
+    };
+}

package/cjs/Options/Classes/BackgroundMask.js

@@ -1,6 +1,9 @@
 import { isNull, isString } from "@tsparticles/engine";
 import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
 export class BackgroundMask {
+    composite;
+    cover;
+    enable;
     constructor() {
         this.composite = "destination-out";
         this.cover = new BackgroundMaskCover();

package/cjs/Options/Classes/BackgroundMaskCover.js

@@ -1,5 +1,8 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class BackgroundMaskCover {
+    color;
+    image;
+    opacity;
     constructor() {
         this.opacity = 1;
     }

package/cjs/index.js

@@ -1,6 +1,6 @@
-export function loadBackgroundMaskPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
+export async function loadBackgroundMaskPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.21");
+    await engine.register(async (e) => {
         const { BackgroundMaskPlugin } = await import("./BackgroundMaskPlugin.js");
         e.addPlugin(new BackgroundMaskPlugin(e));
     });

package/dist_browser_BackgroundMaskPluginInstance_js.js

@@ -0,0 +1,30 @@
+/*!
+ * 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.21
+ */
+"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_background_mask"] = this["webpackChunk_tsparticles_plugin_background_mask"] || []).push([["dist_browser_BackgroundMaskPluginInstance_js"],{
+
+/***/ "./dist/browser/BackgroundMaskPluginInstance.js"
+/*!******************************************************!*\
+  !*** ./dist/browser/BackgroundMaskPluginInstance.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 */   BackgroundMaskPluginInstance: () => (/* binding */ BackgroundMaskPluginInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass BackgroundMaskPluginInstance {\n    _container;\n    _coverColorStyle;\n    _coverImage;\n    _defaultCompositeValue;\n    _engine;\n    constructor(container, engine){\n        this._container = container;\n        this._engine = engine;\n    }\n    canvasClear() {\n        const backgroundMask = this._container.actualOptions.backgroundMask;\n        if (!backgroundMask?.enable) {\n            return false;\n        }\n        return this.canvasPaint();\n    }\n    canvasPaint() {\n        if (!this._container.actualOptions.backgroundMask?.enable) {\n            return false;\n        }\n        const canvas = this._container.canvas;\n        canvas.canvasClear();\n        if (this._coverImage) {\n            canvas.paintImage(this._coverImage.image, this._coverImage.opacity);\n        } else {\n            canvas.paintBase(this._coverColorStyle);\n        }\n        return true;\n    }\n    drawSettingsCleanup(context) {\n        if (!this._defaultCompositeValue) {\n            return;\n        }\n        context.globalCompositeOperation = this._defaultCompositeValue;\n    }\n    drawSettingsSetup(context) {\n        const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;\n        this._defaultCompositeValue = previousComposite;\n        context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;\n    }\n    async init() {\n        await this._initCover();\n    }\n    _initCover = async ()=>{\n        const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;\n        if (color) {\n            const coverRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, color);\n            if (coverRgb) {\n                const coverColor = {\n                    ...coverRgb,\n                    a: cover.opacity\n                };\n                this._coverColorStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(coverColor, this._container.hdr, coverColor.a);\n            }\n        } else {\n            await new Promise((resolve, reject)=>{\n                if (!cover?.image) {\n                    return;\n                }\n                const img = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"img\");\n                img.addEventListener(\"load\", ()=>{\n                    this._coverImage = {\n                        image: img,\n                        opacity: cover.opacity\n                    };\n                    resolve();\n                });\n                img.addEventListener(\"error\", ()=>{\n                    reject(new Error(\"Error loading image\"));\n                });\n                img.src = cover.image;\n            });\n        }\n    };\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/BackgroundMaskPluginInstance.js?\n}");
+
+/***/ }
+
+}]);

package/dist_browser_BackgroundMaskPlugin_js.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.2
+ * v4.0.0-alpha.21
  */
 "use strict";
 /*
@@ -17,23 +17,13 @@
  */
 (this["webpackChunk_tsparticles_plugin_background_mask"] = this["webpackChunk_tsparticles_plugin_background_mask"] || []).push([["dist_browser_BackgroundMaskPlugin_js"],{
 
-/***/ "./dist/browser/BackgroundMaskInstance.js"
-/*!************************************************!*\
-  !*** ./dist/browser/BackgroundMaskInstance.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 */   BackgroundMaskInstance: () => (/* binding */ BackgroundMaskInstance)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass BackgroundMaskInstance {\n  constructor(container, engine) {\n    this._initCover = async () => {\n      const options = this._container.actualOptions,\n        cover = options.backgroundMask?.cover,\n        color = cover?.color;\n      if (color) {\n        const coverRgb = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.rangeColorToRgb)(this._engine, color);\n        if (coverRgb) {\n          const coverColor = {\n            ...coverRgb,\n            a: cover.opacity\n          };\n          this._coverColorStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(coverColor, this._container.hdr, coverColor.a);\n        }\n      } else {\n        await new Promise((resolve, reject) => {\n          if (!cover?.image) {\n            return;\n          }\n          const img = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"img\");\n          img.addEventListener(\"load\", () => {\n            this._coverImage = {\n              image: img,\n              opacity: cover.opacity\n            };\n            resolve();\n          });\n          img.addEventListener(\"error\", evt => {\n            (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getLogger)().error(evt);\n            reject(new Error(\"Error loading image\"));\n          });\n          img.src = cover.image;\n        });\n      }\n    };\n    this._container = container;\n    this._engine = engine;\n  }\n  canvasClear() {\n    const backgroundMask = this._container.actualOptions.backgroundMask;\n    if (!backgroundMask?.enable) {\n      return false;\n    }\n    return this.canvasPaint();\n  }\n  canvasPaint() {\n    if (!this._container.actualOptions.backgroundMask?.enable) {\n      return false;\n    }\n    const canvas = this._container.canvas;\n    canvas.canvasClear();\n    if (this._coverImage) {\n      canvas.paintImage(this._coverImage.image, this._coverImage.opacity);\n    } else {\n      canvas.paintBase(this._coverColorStyle);\n    }\n    return true;\n  }\n  clearDraw(context) {\n    if (!this._defaultCompositeValue) {\n      return;\n    }\n    context.globalCompositeOperation = this._defaultCompositeValue;\n  }\n  draw(context) {\n    const previousComposite = context.globalCompositeOperation,\n      backgroundMask = this._container.actualOptions.backgroundMask;\n    this._defaultCompositeValue = previousComposite;\n    context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;\n  }\n  async init() {\n    await this._initCover();\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/BackgroundMaskInstance.js?\n}");
-
-/***/ },
-
 /***/ "./dist/browser/BackgroundMaskPlugin.js"
 /*!**********************************************!*\
   !*** ./dist/browser/BackgroundMaskPlugin.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 */   BackgroundMaskPlugin: () => (/* binding */ BackgroundMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_BackgroundMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/BackgroundMask.js */ \"./dist/browser/Options/Classes/BackgroundMask.js\");\n/* harmony import */ var _BackgroundMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BackgroundMaskInstance.js */ \"./dist/browser/BackgroundMaskInstance.js\");\n\n\nclass BackgroundMaskPlugin {\n  constructor(engine) {\n    this.id = \"background-mask\";\n    this._engine = engine;\n  }\n  getPlugin(container) {\n    return Promise.resolve(new _BackgroundMaskInstance_js__WEBPACK_IMPORTED_MODULE_1__.BackgroundMaskInstance(container, this._engine));\n  }\n  loadOptions(options, source) {\n    if (!this.needsPlugin()) {\n      return;\n    }\n    let backgroundMaskOptions = options.backgroundMask;\n    if (!backgroundMaskOptions?.load) {\n      options.backgroundMask = backgroundMaskOptions = new _Options_Classes_BackgroundMask_js__WEBPACK_IMPORTED_MODULE_0__.BackgroundMask();\n    }\n    backgroundMaskOptions.load(source?.backgroundMask);\n  }\n  needsPlugin() {\n    return true;\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/BackgroundMaskPlugin.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BackgroundMaskPlugin: () => (/* binding */ BackgroundMaskPlugin)\n/* harmony export */ });\n/* harmony import */ var _Options_Classes_BackgroundMask_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Options/Classes/BackgroundMask.js */ \"./dist/browser/Options/Classes/BackgroundMask.js\");\n\nclass BackgroundMaskPlugin {\n    id = \"background-mask\";\n    _engine;\n    constructor(engine){\n        this._engine = engine;\n    }\n    async getPlugin(container) {\n        const { BackgroundMaskPluginInstance } = await __webpack_require__.e(/*! import() */ \"dist_browser_BackgroundMaskPluginInstance_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./BackgroundMaskPluginInstance.js */ \"./dist/browser/BackgroundMaskPluginInstance.js\"));\n        return new BackgroundMaskPluginInstance(container, this._engine);\n    }\n    loadOptions(_container, options, source) {\n        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {\n            return;\n        }\n        let backgroundMaskOptions = options.backgroundMask;\n        if (!backgroundMaskOptions?.load) {\n            options.backgroundMask = backgroundMaskOptions = new _Options_Classes_BackgroundMask_js__WEBPACK_IMPORTED_MODULE_0__.BackgroundMask();\n        }\n        backgroundMaskOptions.load(source?.backgroundMask);\n    }\n    needsPlugin(options) {\n        return !!options?.backgroundMask?.enable;\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/BackgroundMaskPlugin.js?\n}");
 
 /***/ },
 
@@ -43,7 +33,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \********************************************************/
 (__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 */   BackgroundMask: () => (/* binding */ BackgroundMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _BackgroundMaskCover_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BackgroundMaskCover.js */ \"./dist/browser/Options/Classes/BackgroundMaskCover.js\");\n\n\nclass BackgroundMask {\n  constructor() {\n    this.composite = \"destination-out\";\n    this.cover = new _BackgroundMaskCover_js__WEBPACK_IMPORTED_MODULE_1__.BackgroundMaskCover();\n    this.enable = false;\n  }\n  load(data) {\n    if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n      return;\n    }\n    if (data.composite !== undefined) {\n      this.composite = data.composite;\n    }\n    if (data.cover !== undefined) {\n      const cover = data.cover,\n        color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.cover) ? {\n          color: data.cover\n        } : data.cover;\n      this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : {\n        color: color\n      });\n    }\n    if (data.enable !== undefined) {\n      this.enable = data.enable;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/Options/Classes/BackgroundMask.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BackgroundMask: () => (/* binding */ BackgroundMask)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _BackgroundMaskCover_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BackgroundMaskCover.js */ \"./dist/browser/Options/Classes/BackgroundMaskCover.js\");\n\n\nclass BackgroundMask {\n    composite;\n    cover;\n    enable;\n    constructor(){\n        this.composite = \"destination-out\";\n        this.cover = new _BackgroundMaskCover_js__WEBPACK_IMPORTED_MODULE_1__.BackgroundMaskCover();\n        this.enable = false;\n    }\n    load(data) {\n        if ((0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isNull)(data)) {\n            return;\n        }\n        if (data.composite !== undefined) {\n            this.composite = data.composite;\n        }\n        if (data.cover !== undefined) {\n            const cover = data.cover, color = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.isString)(data.cover) ? {\n                color: data.cover\n            } : data.cover;\n            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : {\n                color: color\n            });\n        }\n        if (data.enable !== undefined) {\n            this.enable = data.enable;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/Options/Classes/BackgroundMask.js?\n}");
 
 /***/ },
 
@@ -53,7 +43,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \*************************************************************/
 (__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 */   BackgroundMaskCover: () => (/* binding */ BackgroundMaskCover)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass BackgroundMaskCover {\n  constructor() {\n    this.opacity = 1;\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 = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.color, data.color);\n    }\n    if (data.image !== undefined) {\n      this.image = data.image;\n    }\n    if (data.opacity !== undefined) {\n      this.opacity = data.opacity;\n    }\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/Options/Classes/BackgroundMaskCover.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   BackgroundMaskCover: () => (/* binding */ BackgroundMaskCover)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n\nclass BackgroundMaskCover {\n    color;\n    image;\n    opacity;\n    constructor(){\n        this.opacity = 1;\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 = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.OptionsColor.create(this.color, data.color);\n        }\n        if (data.image !== undefined) {\n            this.image = data.image;\n        }\n        if (data.opacity !== undefined) {\n            this.opacity = data.opacity;\n        }\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/Options/Classes/BackgroundMaskCover.js?\n}");
 
 /***/ }
 

package/esm/BackgroundMaskPlugin.js

@@ -1,15 +1,16 @@
 import { BackgroundMask } from "./Options/Classes/BackgroundMask.js";
-import { BackgroundMaskInstance } from "./BackgroundMaskInstance.js";
 export class BackgroundMaskPlugin {
+    id = "background-mask";
+    _engine;
     constructor(engine) {
-        this.id = "background-mask";
         this._engine = engine;
     }
-    getPlugin(container) {
-        return Promise.resolve(new BackgroundMaskInstance(container, this._engine));
+    async getPlugin(container) {
+        const { BackgroundMaskPluginInstance } = await import("./BackgroundMaskPluginInstance.js");
+        return new BackgroundMaskPluginInstance(container, this._engine);
     }
-    loadOptions(options, source) {
-        if (!this.needsPlugin()) {
+    loadOptions(_container, options, source) {
+        if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
             return;
         }
         let backgroundMaskOptions = options.backgroundMask;
@@ -18,7 +19,7 @@ export class BackgroundMaskPlugin {
         }
         backgroundMaskOptions.load(source?.backgroundMask);
     }
-    needsPlugin() {
-        return true;
+    needsPlugin(options) {
+        return !!options?.backgroundMask?.enable;
     }
 }

package/esm/BackgroundMaskPluginInstance.js

@@ -0,0 +1,79 @@
+import { getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
+export class BackgroundMaskPluginInstance {
+    _container;
+    _coverColorStyle;
+    _coverImage;
+    _defaultCompositeValue;
+    _engine;
+    constructor(container, engine) {
+        this._container = container;
+        this._engine = engine;
+    }
+    canvasClear() {
+        const backgroundMask = this._container.actualOptions.backgroundMask;
+        if (!backgroundMask?.enable) {
+            return false;
+        }
+        return this.canvasPaint();
+    }
+    canvasPaint() {
+        if (!this._container.actualOptions.backgroundMask?.enable) {
+            return false;
+        }
+        const canvas = this._container.canvas;
+        canvas.canvasClear();
+        if (this._coverImage) {
+            canvas.paintImage(this._coverImage.image, this._coverImage.opacity);
+        }
+        else {
+            canvas.paintBase(this._coverColorStyle);
+        }
+        return true;
+    }
+    drawSettingsCleanup(context) {
+        if (!this._defaultCompositeValue) {
+            return;
+        }
+        context.globalCompositeOperation = this._defaultCompositeValue;
+    }
+    drawSettingsSetup(context) {
+        const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;
+        this._defaultCompositeValue = previousComposite;
+        context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
+    }
+    async init() {
+        await this._initCover();
+    }
+    _initCover = async () => {
+        const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
+        if (color) {
+            const coverRgb = rangeColorToRgb(this._engine, color);
+            if (coverRgb) {
+                const coverColor = {
+                    ...coverRgb,
+                    a: cover.opacity,
+                };
+                this._coverColorStyle = getStyleFromRgb(coverColor, this._container.hdr, coverColor.a);
+            }
+        }
+        else {
+            await new Promise((resolve, reject) => {
+                if (!cover?.image) {
+                    return;
+                }
+                const img = safeDocument().createElement("img");
+                img.addEventListener("load", () => {
+                    this._coverImage = {
+                        image: img,
+                        opacity: cover.opacity,
+                    };
+                    resolve();
+                });
+                img.addEventListener("error", () => {
+                    reject(new Error("Error loading image"));
+                });
+                img.src = cover.image;
+            });
+        }
+    };
+}

package/esm/Options/Classes/BackgroundMask.js

@@ -1,6 +1,9 @@
 import { isNull, isString } from "@tsparticles/engine";
 import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
 export class BackgroundMask {
+    composite;
+    cover;
+    enable;
     constructor() {
         this.composite = "destination-out";
         this.cover = new BackgroundMaskCover();

package/esm/Options/Classes/BackgroundMaskCover.js

@@ -1,5 +1,8 @@
 import { OptionsColor, isNull } from "@tsparticles/engine";
 export class BackgroundMaskCover {
+    color;
+    image;
+    opacity;
     constructor() {
         this.opacity = 1;
     }

package/esm/index.js

@@ -1,6 +1,6 @@
-export function loadBackgroundMaskPlugin(engine) {
-    engine.checkVersion("4.0.0-alpha.2");
-    engine.register(async (e) => {
+export async function loadBackgroundMaskPlugin(engine) {
+    engine.checkVersion("4.0.0-alpha.21");
+    await engine.register(async (e) => {
         const { BackgroundMaskPlugin } = await import("./BackgroundMaskPlugin.js");
         e.addPlugin(new BackgroundMaskPlugin(e));
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/plugin-background-mask",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.21",
   "description": "tsParticles background mask plugin",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -86,7 +86,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@tsparticles/engine": "4.0.0-alpha.2"
+    "@tsparticles/engine": "4.0.0-alpha.21"
   },
   "publishConfig": {
     "access": "public"