@tsparticles/plugin-background-mask 4.0.0-alpha.0

package/224.min.js

@@ -0,0 +1,2 @@
+/*! For license information please see 224.min.js.LICENSE.txt */
+(this.webpackChunk_tsparticles_plugin_background_mask=this.webpackChunk_tsparticles_plugin_background_mask||[]).push([[224],{224(o,e,t){t.d(e,{BackgroundMaskPlugin:()=>r});var i=t(303);class a{constructor(){this.opacity=1}load(o){(0,i.isNull)(o)||(void 0!==o.color&&(this.color=i.OptionsColor.create(this.color,o.color)),void 0!==o.image&&(this.image=o.image),void 0!==o.opacity&&(this.opacity=o.opacity))}}class s{constructor(){this.composite="destination-out",this.cover=new a,this.enable=!1}load(o){if(!(0,i.isNull)(o)){if(void 0!==o.composite&&(this.composite=o.composite),void 0!==o.cover){const e=o.cover,t=(0,i.isString)(o.cover)?{color:o.cover}:o.cover;this.cover.load(void 0!==e.color||void 0!==e.image?e:{color:t})}void 0!==o.enable&&(this.enable=o.enable)}}}class n{constructor(o,e){this._initCover=async()=>{const o=this._container.actualOptions,e=o.backgroundMask?.cover,t=e?.color;if(t){const o=(0,i.rangeColorToRgb)(this._engine,t);if(o){const t={...o,a:e.opacity};this._coverColorStyle=(0,i.getStyleFromRgb)(t,this._container.hdr,t.a)}}else await new Promise(((o,t)=>{if(!e?.image)return;const a=(0,i.safeDocument)().createElement("img");a.addEventListener("load",(()=>{this._coverImage={image:a,opacity:e.opacity},o()})),a.addEventListener("error",(o=>{(0,i.getLogger)().error(o),t(new Error("Error loading image"))})),a.src=e.image}))},this._container=o,this._engine=e}canvasClear(){const o=this._container.actualOptions.backgroundMask;return!!o?.enable&&this.canvasPaint()}canvasPaint(){if(!this._container.actualOptions.backgroundMask?.enable)return!1;const o=this._container.canvas;return o.canvasClear(),this._coverImage?o.paintImage(this._coverImage.image,this._coverImage.opacity):o.paintBase(this._coverColorStyle),!0}clearDraw(o){this._defaultCompositeValue&&(o.globalCompositeOperation=this._defaultCompositeValue)}draw(o){const e=o.globalCompositeOperation,t=this._container.actualOptions.backgroundMask;this._defaultCompositeValue=e,o.globalCompositeOperation=t?.enable?t.composite:e}async init(){await this._initCover()}}class r{constructor(o){this.id="background-mask",this._engine=o}getPlugin(o){return Promise.resolve(new n(o,this._engine))}loadOptions(o,e){if(!this.needsPlugin())return;let t=o.backgroundMask;t?.load||(o.backgroundMask=t=new s),t.load(e?.backgroundMask)}needsPlugin(){return!0}}}}]);

package/224.min.js.LICENSE.txt

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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Matteo Bruni
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+[![banner](https://particles.js.org/images/banner2.png)](https://particles.js.org)
+
+# tsParticles Background Mask Plugin
+
+[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/plugin-background-mask/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/plugin-background-mask)
+[![npmjs](https://badge.fury.io/js/@tsparticles/plugin-background-mask.svg)](https://www.npmjs.com/package/@tsparticles/plugin-background-mask)
+[![npmjs](https://img.shields.io/npm/dt/@tsparticles/plugin-background-mask)](https://www.npmjs.com/package/@tsparticles/plugin-background-mask) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
+
+[tsParticles](https://github.com/tsparticles/tsparticles) plugin for handling background mask feature.
+
+## How to use it
+
+### CDN / Vanilla JS / jQuery
+
+The CDN/Vanilla version JS has one required file in vanilla configuration:
+
+Including the `tsparticles.plugin.backgroundMask.min.js` file will export the function to load the plugin:
+
+```javascript
+loadBackgroundMaskPlugin;
+```
+
+### Usage
+
+Once the scripts are loaded you can set up `tsParticles` and the plugin like this:
+
+```javascript
+(async () => {
+  await loadBackgroundMaskPlugin(tsParticles);
+
+  await tsParticles.load({
+    id: "tsparticles",
+    options: {
+      /* options */
+    },
+  });
+})();
+```
+
+### ESM / CommonJS
+
+This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
+
+```shell
+$ npm install @tsparticles/plugin-background-mask
+```
+
+or
+
+```shell
+$ yarn add @tsparticles/plugin-background-mask
+```
+
+Then you need to import it in the app, like this:
+
+```javascript
+const { tsParticles } = require("@tsparticles/engine");
+const { loadBackgroundMaskPlugin } = require("@tsparticles/plugin-background-mask");
+
+(async () => {
+  await loadBackgroundMaskPlugin(tsParticles);
+})();
+```
+
+or
+
+```javascript
+import { tsParticles } from "@tsparticles/engine";
+import { loadBackgroundMaskPlugin } from "@tsparticles/plugin-background-mask";
+
+(async () => {
+  await loadBackgroundMaskPlugin(tsParticles);
+})();
+```

package/browser/BackgroundMaskInstance.js

@@ -0,0 +1,75 @@
+import { getLogger, getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
+export class BackgroundMaskInstance {
+    constructor(container, engine) {
+        this._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", evt => {
+                        getLogger().error(evt);
+                        reject(new Error("Error loading image"));
+                    });
+                    img.src = cover.image;
+                });
+            }
+        };
+        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;
+    }
+    clearDraw(context) {
+        if (!this._defaultCompositeValue) {
+            return;
+        }
+        context.globalCompositeOperation = this._defaultCompositeValue;
+    }
+    draw(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();
+    }
+}

package/browser/BackgroundMaskPlugin.js

@@ -0,0 +1,24 @@
+import { BackgroundMask } from "./Options/Classes/BackgroundMask.js";
+import { BackgroundMaskInstance } from "./BackgroundMaskInstance.js";
+export class BackgroundMaskPlugin {
+    constructor(engine) {
+        this.id = "background-mask";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return Promise.resolve(new BackgroundMaskInstance(container, this._engine));
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin()) {
+            return;
+        }
+        let backgroundMaskOptions = options.backgroundMask;
+        if (!backgroundMaskOptions?.load) {
+            options.backgroundMask = backgroundMaskOptions = new BackgroundMask();
+        }
+        backgroundMaskOptions.load(source?.backgroundMask);
+    }
+    needsPlugin() {
+        return true;
+    }
+}

package/browser/Options/Classes/BackgroundMask.js

@@ -0,0 +1,24 @@
+import { isNull, isString } from "@tsparticles/engine";
+import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
+export class BackgroundMask {
+    constructor() {
+        this.composite = "destination-out";
+        this.cover = new BackgroundMaskCover();
+        this.enable = false;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.composite !== undefined) {
+            this.composite = data.composite;
+        }
+        if (data.cover !== undefined) {
+            const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
+            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+    }
+}

package/browser/Options/Classes/BackgroundMaskCover.js

@@ -0,0 +1,20 @@
+import { OptionsColor, isNull } from "@tsparticles/engine";
+export class BackgroundMaskCover {
+    constructor() {
+        this.opacity = 1;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = OptionsColor.create(this.color, data.color);
+        }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+    }
+}

package/browser/Options/Interfaces/IBackgroundMask.js

@@ -0,0 +1 @@
+export {};

package/browser/Options/Interfaces/IBackgroundMaskCover.js

@@ -0,0 +1 @@
+export {};

package/browser/index.js

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

package/browser/package.json

@@ -0,0 +1 @@
+{ "type": "module" }

package/browser/types.js

@@ -0,0 +1 @@
+export {};

package/cjs/BackgroundMaskInstance.js

@@ -0,0 +1,75 @@
+import { getLogger, getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
+export class BackgroundMaskInstance {
+    constructor(container, engine) {
+        this._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", evt => {
+                        getLogger().error(evt);
+                        reject(new Error("Error loading image"));
+                    });
+                    img.src = cover.image;
+                });
+            }
+        };
+        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;
+    }
+    clearDraw(context) {
+        if (!this._defaultCompositeValue) {
+            return;
+        }
+        context.globalCompositeOperation = this._defaultCompositeValue;
+    }
+    draw(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();
+    }
+}

package/cjs/BackgroundMaskPlugin.js

@@ -0,0 +1,24 @@
+import { BackgroundMask } from "./Options/Classes/BackgroundMask.js";
+import { BackgroundMaskInstance } from "./BackgroundMaskInstance.js";
+export class BackgroundMaskPlugin {
+    constructor(engine) {
+        this.id = "background-mask";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return Promise.resolve(new BackgroundMaskInstance(container, this._engine));
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin()) {
+            return;
+        }
+        let backgroundMaskOptions = options.backgroundMask;
+        if (!backgroundMaskOptions?.load) {
+            options.backgroundMask = backgroundMaskOptions = new BackgroundMask();
+        }
+        backgroundMaskOptions.load(source?.backgroundMask);
+    }
+    needsPlugin() {
+        return true;
+    }
+}

package/cjs/Options/Classes/BackgroundMask.js

@@ -0,0 +1,24 @@
+import { isNull, isString } from "@tsparticles/engine";
+import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
+export class BackgroundMask {
+    constructor() {
+        this.composite = "destination-out";
+        this.cover = new BackgroundMaskCover();
+        this.enable = false;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.composite !== undefined) {
+            this.composite = data.composite;
+        }
+        if (data.cover !== undefined) {
+            const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
+            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+    }
+}

package/cjs/Options/Classes/BackgroundMaskCover.js

@@ -0,0 +1,20 @@
+import { OptionsColor, isNull } from "@tsparticles/engine";
+export class BackgroundMaskCover {
+    constructor() {
+        this.opacity = 1;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.color !== undefined) {
+            this.color = OptionsColor.create(this.color, data.color);
+        }
+        if (data.image !== undefined) {
+            this.image = data.image;
+        }
+        if (data.opacity !== undefined) {
+            this.opacity = data.opacity;
+        }
+    }
+}

package/cjs/Options/Interfaces/IBackgroundMask.js

@@ -0,0 +1 @@
+export {};

package/cjs/Options/Interfaces/IBackgroundMaskCover.js

@@ -0,0 +1 @@
+export {};

package/cjs/index.js

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

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/cjs/types.js

@@ -0,0 +1 @@
+export {};

package/dist_browser_BackgroundMaskPlugin_js.js

@@ -0,0 +1,60 @@
+/*!
+ * 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.0
+ */
+"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_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}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/BackgroundMask.js"
+/*!********************************************************!*\
+  !*** ./dist/browser/Options/Classes/BackgroundMask.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 */   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}");
+
+/***/ },
+
+/***/ "./dist/browser/Options/Classes/BackgroundMaskCover.js"
+/*!*************************************************************!*\
+  !*** ./dist/browser/Options/Classes/BackgroundMaskCover.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 */   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}");
+
+/***/ }
+
+}]);

package/esm/BackgroundMaskInstance.js

@@ -0,0 +1,75 @@
+import { getLogger, getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
+export class BackgroundMaskInstance {
+    constructor(container, engine) {
+        this._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", evt => {
+                        getLogger().error(evt);
+                        reject(new Error("Error loading image"));
+                    });
+                    img.src = cover.image;
+                });
+            }
+        };
+        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;
+    }
+    clearDraw(context) {
+        if (!this._defaultCompositeValue) {
+            return;
+        }
+        context.globalCompositeOperation = this._defaultCompositeValue;
+    }
+    draw(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();
+    }
+}

package/esm/BackgroundMaskPlugin.js

@@ -0,0 +1,24 @@
+import { BackgroundMask } from "./Options/Classes/BackgroundMask.js";
+import { BackgroundMaskInstance } from "./BackgroundMaskInstance.js";
+export class BackgroundMaskPlugin {
+    constructor(engine) {
+        this.id = "background-mask";
+        this._engine = engine;
+    }
+    getPlugin(container) {
+        return Promise.resolve(new BackgroundMaskInstance(container, this._engine));
+    }
+    loadOptions(options, source) {
+        if (!this.needsPlugin()) {
+            return;
+        }
+        let backgroundMaskOptions = options.backgroundMask;
+        if (!backgroundMaskOptions?.load) {
+            options.backgroundMask = backgroundMaskOptions = new BackgroundMask();
+        }
+        backgroundMaskOptions.load(source?.backgroundMask);
+    }
+    needsPlugin() {
+        return true;
+    }
+}

package/esm/Options/Classes/BackgroundMask.js

@@ -0,0 +1,24 @@
+import { isNull, isString } from "@tsparticles/engine";
+import { BackgroundMaskCover } from "./BackgroundMaskCover.js";
+export class BackgroundMask {
+    constructor() {
+        this.composite = "destination-out";
+        this.cover = new BackgroundMaskCover();
+        this.enable = false;
+    }
+    load(data) {
+        if (isNull(data)) {
+            return;
+        }
+        if (data.composite !== undefined) {
+            this.composite = data.composite;
+        }
+        if (data.cover !== undefined) {
+            const cover = data.cover, color = (isString(data.cover) ? { color: data.cover } : data.cover);
+            this.cover.load(cover.color !== undefined || cover.image !== undefined ? cover : { color: color });
+        }
+        if (data.enable !== undefined) {
+            this.enable = data.enable;
+        }
+    }
+}