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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/603.min.js +1 -0
  2. package/607.min.js +1 -0
  3. package/browser/BackgroundMaskPlugin.js +9 -8
  4. package/browser/BackgroundMaskPluginInstance.js +79 -0
  5. package/browser/Options/Classes/BackgroundMask.js +3 -0
  6. package/browser/Options/Classes/BackgroundMaskCover.js +3 -0
  7. package/browser/index.js +3 -3
  8. package/cjs/BackgroundMaskPlugin.js +9 -8
  9. package/cjs/BackgroundMaskPluginInstance.js +79 -0
  10. package/cjs/Options/Classes/BackgroundMask.js +3 -0
  11. package/cjs/Options/Classes/BackgroundMaskCover.js +3 -0
  12. package/cjs/index.js +3 -3
  13. package/dist_browser_BackgroundMaskPluginInstance_js.js +30 -0
  14. package/dist_browser_BackgroundMaskPlugin_js.js +4 -14
  15. package/esm/BackgroundMaskPlugin.js +9 -8
  16. package/esm/BackgroundMaskPluginInstance.js +79 -0
  17. package/esm/Options/Classes/BackgroundMask.js +3 -0
  18. package/esm/Options/Classes/BackgroundMaskCover.js +3 -0
  19. package/esm/index.js +3 -3
  20. package/package.json +2 -2
  21. package/report.html +3 -3
  22. package/tsparticles.plugin.background-mask.js +11 -11
  23. package/tsparticles.plugin.background-mask.min.js +2 -2
  24. package/types/BackgroundMaskPlugin.d.ts +5 -6
  25. package/types/{BackgroundMaskInstance.d.ts → BackgroundMaskPluginInstance.d.ts} +3 -3
  26. package/types/index.d.ts +1 -1
  27. package/umd/BackgroundMaskPlugin.js +44 -9
  28. package/umd/{BackgroundMaskInstance.js → BackgroundMaskPluginInstance.js} +42 -38
  29. package/umd/Options/Classes/BackgroundMask.js +3 -0
  30. package/umd/Options/Classes/BackgroundMaskCover.js +3 -0
  31. package/umd/index.js +3 -3
  32. package/224.min.js +0 -2
  33. package/224.min.js.LICENSE.txt +0 -1
  34. package/browser/BackgroundMaskInstance.js +0 -75
  35. package/cjs/BackgroundMaskInstance.js +0 -75
  36. package/esm/BackgroundMaskInstance.js +0 -75
  37. package/tsparticles.plugin.background-mask.min.js.LICENSE.txt +0 -1
@@ -4,7 +4,7 @@
4
4
  * Demo / Generator : https://particles.js.org/
5
5
  * GitHub : https://www.github.com/matteobruni/tsparticles
6
6
  * How to use? : Check the GitHub README
7
- * v4.0.0-alpha.2
7
+ * v4.0.0-alpha.21
8
8
  */
9
9
  /*
10
10
  * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
@@ -28,16 +28,6 @@ return /******/ (() => { // webpackBootstrap
28
28
  /******/ "use strict";
29
29
  /******/ var __webpack_modules__ = ({
30
30
 
31
- /***/ "./dist/browser/index.js"
32
- /*!*******************************!*\
33
- !*** ./dist/browser/index.js ***!
34
- \*******************************/
35
- (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
36
-
37
- eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ loadBackgroundMaskPlugin: () => (/* binding */ loadBackgroundMaskPlugin)\n/* harmony export */ });\nfunction loadBackgroundMaskPlugin(engine) {\n engine.checkVersion(\"4.0.0-alpha.2\");\n engine.register(async e => {\n const {\n BackgroundMaskPlugin\n } = await __webpack_require__.e(/*! import() */ \"dist_browser_BackgroundMaskPlugin_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./BackgroundMaskPlugin.js */ \"./dist/browser/BackgroundMaskPlugin.js\"));\n e.addPlugin(new BackgroundMaskPlugin(e));\n });\n}\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/index.js?\n}");
38
-
39
- /***/ },
40
-
41
31
  /***/ "@tsparticles/engine"
42
32
  /*!*********************************************************************************************************************************!*\
43
33
  !*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
@@ -46,6 +36,16 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
46
36
 
47
37
  module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
48
38
 
39
+ /***/ },
40
+
41
+ /***/ "./dist/browser/index.js"
42
+ /*!*******************************!*\
43
+ !*** ./dist/browser/index.js ***!
44
+ \*******************************/
45
+ (__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
46
+
47
+ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ loadBackgroundMaskPlugin: () => (/* binding */ loadBackgroundMaskPlugin)\n/* harmony export */ });\nasync function loadBackgroundMaskPlugin(engine) {\n engine.checkVersion(\"4.0.0-alpha.21\");\n await engine.register(async (e)=>{\n const { BackgroundMaskPlugin } = await __webpack_require__.e(/*! import() */ \"dist_browser_BackgroundMaskPlugin_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./BackgroundMaskPlugin.js */ \"./dist/browser/BackgroundMaskPlugin.js\"));\n e.addPlugin(new BackgroundMaskPlugin(e));\n });\n}\n\n\n//# sourceURL=webpack://@tsparticles/plugin-background-mask/./dist/browser/index.js?\n}");
48
+
49
49
  /***/ }
50
50
 
51
51
  /******/ });
@@ -1,2 +1,2 @@
1
- /*! For license information please see tsparticles.plugin.background-mask.min.js.LICENSE.txt */
2
- !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(e=>(()=>{var t,r,o={303(t){t.exports=e}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return o[e](r,r.exports,i),r.exports}i.m=o,i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,r)=>(i.f[r](e,t),t)),[])),i.u=e=>e+".min.js",i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},r="@tsparticles/plugin-background-mask:",i.l=(e,o,n,a)=>{if(t[e])t[e].push(o);else{var s,c;if(void 0!==n)for(var l=document.getElementsByTagName("script"),u=0;u<l.length;u++){var p=l[u];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")==r+n){s=p;break}}s||(c=!0,(s=document.createElement("script")).charset="utf-8",i.nc&&s.setAttribute("nonce",i.nc),s.setAttribute("data-webpack",r+n),s.src=e),t[e]=[o];var d=(r,o)=>{s.onerror=s.onload=null,clearTimeout(f);var n=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),n&&n.forEach((e=>e(o))),r)return r(o)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=d.bind(null,s.onerror),s.onload=d.bind(null,s.onload),c&&document.head.appendChild(s)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var t=i.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var o=r.length-1;o>-1&&(!e||!/^http(s?):/.test(e));)e=r[o--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={585:0};i.f.j=(t,r)=>{var o=i.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else{var n=new Promise(((r,n)=>o=e[t]=[r,n]));r.push(o[2]=n);var a=i.p+i.u(t),s=new Error;i.l(a,(r=>{if(i.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+n+": "+a+")",s.name="ChunkLoadError",s.type=n,s.request=a,o[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var o,n,[a,s,c]=r,l=0;if(a.some((t=>0!==e[t]))){for(o in s)i.o(s,o)&&(i.m[o]=s[o]);if(c)c(i)}for(t&&t(r);l<a.length;l++)n=a[l],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0},r=this.webpackChunk_tsparticles_plugin_background_mask=this.webpackChunk_tsparticles_plugin_background_mask||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var a={};function s(e){e.checkVersion("4.0.0-alpha.2"),e.register((async e=>{const{BackgroundMaskPlugin:t}=await i.e(224).then(i.bind(i,224));e.addPlugin(new t(e))}))}return i.r(a),i.d(a,{loadBackgroundMaskPlugin:()=>s}),a})()));
1
+ !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],t);else{var r="object"==typeof exports?t(require("@tsparticles/engine")):t(e.window);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,e=>(()=>{"use strict";var t,r,o,n={303(t){t.exports=e}},i={};function a(e){var t=i[e];if(void 0!==t)return t.exports;var r=i[e]={exports:{}};return n[e](r,r.exports,a),r.exports}a.m=n,a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.f={},a.e=e=>Promise.all(Object.keys(a.f).reduce((t,r)=>(a.f[r](e,t),t),[])),a.u=e=>""+e+".min.js",a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s={},a.l=(e,t,r,o)=>{if(s[e])return void s[e].push(t);if(void 0!==r)for(var n,i,c=document.getElementsByTagName("script"),u=0;u<c.length;u++){var l=c[u];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")=="@tsparticles/plugin-background-mask:"+r){n=l;break}}n||(i=!0,(n=document.createElement("script")).charset="utf-8",a.nc&&n.setAttribute("nonce",a.nc),n.setAttribute("data-webpack","@tsparticles/plugin-background-mask:"+r),n.src=e),s[e]=[t];var p=(t,r)=>{n.onerror=n.onload=null,clearTimeout(d);var o=s[e];if(delete s[e],n.parentNode&&n.parentNode.removeChild(n),o&&o.forEach(e=>e(r)),t)return t(r)},d=setTimeout(p.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=p.bind(null,n.onerror),n.onload=p.bind(null,n.onload),i&&document.head.appendChild(n)},a.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.g.importScripts&&(c=a.g.location+"");var s,c,u=a.g.document;if(!c&&u&&(u.currentScript&&"SCRIPT"===u.currentScript.tagName.toUpperCase()&&(c=u.currentScript.src),!c)){var l=u.getElementsByTagName("script");if(l.length)for(var p=l.length-1;p>-1&&(!c||!/^http(s?):/.test(c));)c=l[p--].src}if(!c)throw Error("Automatic publicPath is not supported in this browser");a.p=c=c.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),t={585:0},a.f.j=(e,r)=>{var o=a.o(t,e)?t[e]:void 0;if(0!==o)if(o)r.push(o[2]);else{var n=new Promise((r,n)=>o=t[e]=[r,n]);r.push(o[2]=n);var i=a.p+a.u(e),s=Error();a.l(i,r=>{if(a.o(t,e)&&(0!==(o=t[e])&&(t[e]=void 0),o)){var n=r&&("load"===r.type?"missing":r.type),i=r&&r.target&&r.target.src;s.message="Loading chunk "+e+` failed.
2
+ (`+n+": "+i+")",s.name="ChunkLoadError",s.type=n,s.request=i,o[1](s)}},"chunk-"+e,e)}},r=(e,r)=>{var o,n,[i,s,c]=r,u=0;if(i.some(e=>0!==t[e])){for(o in s)a.o(s,o)&&(a.m[o]=s[o]);c&&c(a)}for(e&&e(r);u<i.length;u++)n=i[u],a.o(t,n)&&t[n]&&t[n][0](),t[n]=0},(o=this.webpackChunk_tsparticles_plugin_background_mask=this.webpackChunk_tsparticles_plugin_background_mask||[]).forEach(r.bind(null,0)),o.push=r.bind(null,o.push.bind(o));var d={};async function f(e){e.checkVersion("4.0.0-alpha.21"),await e.register(async e=>{let{BackgroundMaskPlugin:t}=await a.e(603).then(a.bind(a,603));e.addPlugin(new t(e))})}return a.r(d),a.d(d,{loadBackgroundMaskPlugin:()=>f}),d})());
@@ -1,11 +1,10 @@
1
1
  import type { BackgroundMaskOptions, IBackgroundMaskOptions } from "./types.js";
2
- import type { Container, Engine, IPlugin, RecursivePartial } from "@tsparticles/engine";
3
- import { BackgroundMaskInstance } from "./BackgroundMaskInstance.js";
2
+ import type { Container, Engine, IContainerPlugin, IPlugin, RecursivePartial } from "@tsparticles/engine";
4
3
  export declare class BackgroundMaskPlugin implements IPlugin {
5
- readonly id: string;
4
+ readonly id = "background-mask";
6
5
  private readonly _engine;
7
6
  constructor(engine: Engine);
8
- getPlugin(container: Container): Promise<BackgroundMaskInstance>;
9
- loadOptions(options: BackgroundMaskOptions, source?: RecursivePartial<IBackgroundMaskOptions>): void;
10
- needsPlugin(): boolean;
7
+ getPlugin(container: Container): Promise<IContainerPlugin>;
8
+ loadOptions(_container: Container, options: BackgroundMaskOptions, source?: RecursivePartial<IBackgroundMaskOptions>): void;
9
+ needsPlugin(options?: RecursivePartial<IBackgroundMaskOptions>): boolean;
11
10
  }
@@ -1,6 +1,6 @@
1
1
  import { type Engine, type IContainerPlugin } from "@tsparticles/engine";
2
2
  import type { BackgroundMaskContainer } from "./types.js";
3
- export declare class BackgroundMaskInstance implements IContainerPlugin {
3
+ export declare class BackgroundMaskPluginInstance implements IContainerPlugin {
4
4
  private readonly _container;
5
5
  private _coverColorStyle?;
6
6
  private _coverImage?;
@@ -9,8 +9,8 @@ export declare class BackgroundMaskInstance implements IContainerPlugin {
9
9
  constructor(container: BackgroundMaskContainer, engine: Engine);
10
10
  canvasClear(): boolean;
11
11
  canvasPaint(): boolean;
12
- clearDraw(context: CanvasRenderingContext2D): void;
13
- draw(context: CanvasRenderingContext2D): void;
12
+ drawSettingsCleanup(context: CanvasRenderingContext2D): void;
13
+ drawSettingsSetup(context: CanvasRenderingContext2D): void;
14
14
  init(): Promise<void>;
15
15
  private readonly _initCover;
16
16
  }
package/types/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { type Engine } from "@tsparticles/engine";
2
- export declare function loadBackgroundMaskPlugin(engine: Engine): void;
2
+ export declare function loadBackgroundMaskPlugin(engine: Engine): Promise<void>;
@@ -1,27 +1,62 @@
1
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
2
+ if (k2 === undefined) k2 = k;
3
+ var desc = Object.getOwnPropertyDescriptor(m, k);
4
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
5
+ desc = { enumerable: true, get: function() { return m[k]; } };
6
+ }
7
+ Object.defineProperty(o, k2, desc);
8
+ }) : (function(o, m, k, k2) {
9
+ if (k2 === undefined) k2 = k;
10
+ o[k2] = m[k];
11
+ }));
12
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
13
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
14
+ }) : function(o, v) {
15
+ o["default"] = v;
16
+ });
17
+ var __importStar = (this && this.__importStar) || (function () {
18
+ var ownKeys = function(o) {
19
+ ownKeys = Object.getOwnPropertyNames || function (o) {
20
+ var ar = [];
21
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
22
+ return ar;
23
+ };
24
+ return ownKeys(o);
25
+ };
26
+ return function (mod) {
27
+ if (mod && mod.__esModule) return mod;
28
+ var result = {};
29
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
30
+ __setModuleDefault(result, mod);
31
+ return result;
32
+ };
33
+ })();
1
34
  (function (factory) {
2
35
  if (typeof module === "object" && typeof module.exports === "object") {
3
36
  var v = factory(require, exports);
4
37
  if (v !== undefined) module.exports = v;
5
38
  }
6
39
  else if (typeof define === "function" && define.amd) {
7
- define(["require", "exports", "./Options/Classes/BackgroundMask.js", "./BackgroundMaskInstance.js"], factory);
40
+ define(["require", "exports", "./Options/Classes/BackgroundMask.js"], factory);
8
41
  }
9
42
  })(function (require, exports) {
10
43
  "use strict";
44
+ var __syncRequire = typeof module === "object" && typeof module.exports === "object";
11
45
  Object.defineProperty(exports, "__esModule", { value: true });
12
46
  exports.BackgroundMaskPlugin = void 0;
13
47
  const BackgroundMask_js_1 = require("./Options/Classes/BackgroundMask.js");
14
- const BackgroundMaskInstance_js_1 = require("./BackgroundMaskInstance.js");
15
48
  class BackgroundMaskPlugin {
49
+ id = "background-mask";
50
+ _engine;
16
51
  constructor(engine) {
17
- this.id = "background-mask";
18
52
  this._engine = engine;
19
53
  }
20
- getPlugin(container) {
21
- return Promise.resolve(new BackgroundMaskInstance_js_1.BackgroundMaskInstance(container, this._engine));
54
+ async getPlugin(container) {
55
+ const { BackgroundMaskPluginInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./BackgroundMaskPluginInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./BackgroundMaskPluginInstance.js"], resolve_1, reject_1); }).then(__importStar));
56
+ return new BackgroundMaskPluginInstance(container, this._engine);
22
57
  }
23
- loadOptions(options, source) {
24
- if (!this.needsPlugin()) {
58
+ loadOptions(_container, options, source) {
59
+ if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
25
60
  return;
26
61
  }
27
62
  let backgroundMaskOptions = options.backgroundMask;
@@ -30,8 +65,8 @@
30
65
  }
31
66
  backgroundMaskOptions.load(source?.backgroundMask);
32
67
  }
33
- needsPlugin() {
34
- return true;
68
+ needsPlugin(options) {
69
+ return !!options?.backgroundMask?.enable;
35
70
  }
36
71
  }
37
72
  exports.BackgroundMaskPlugin = BackgroundMaskPlugin;
@@ -9,43 +9,15 @@
9
9
  })(function (require, exports) {
10
10
  "use strict";
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
- exports.BackgroundMaskInstance = void 0;
12
+ exports.BackgroundMaskPluginInstance = void 0;
13
13
  const engine_1 = require("@tsparticles/engine");
14
- class BackgroundMaskInstance {
14
+ class BackgroundMaskPluginInstance {
15
+ _container;
16
+ _coverColorStyle;
17
+ _coverImage;
18
+ _defaultCompositeValue;
19
+ _engine;
15
20
  constructor(container, engine) {
16
- this._initCover = async () => {
17
- const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
18
- if (color) {
19
- const coverRgb = (0, engine_1.rangeColorToRgb)(this._engine, color);
20
- if (coverRgb) {
21
- const coverColor = {
22
- ...coverRgb,
23
- a: cover.opacity,
24
- };
25
- this._coverColorStyle = (0, engine_1.getStyleFromRgb)(coverColor, this._container.hdr, coverColor.a);
26
- }
27
- }
28
- else {
29
- await new Promise((resolve, reject) => {
30
- if (!cover?.image) {
31
- return;
32
- }
33
- const img = (0, engine_1.safeDocument)().createElement("img");
34
- img.addEventListener("load", () => {
35
- this._coverImage = {
36
- image: img,
37
- opacity: cover.opacity,
38
- };
39
- resolve();
40
- });
41
- img.addEventListener("error", evt => {
42
- (0, engine_1.getLogger)().error(evt);
43
- reject(new Error("Error loading image"));
44
- });
45
- img.src = cover.image;
46
- });
47
- }
48
- };
49
21
  this._container = container;
50
22
  this._engine = engine;
51
23
  }
@@ -70,13 +42,13 @@
70
42
  }
71
43
  return true;
72
44
  }
73
- clearDraw(context) {
45
+ drawSettingsCleanup(context) {
74
46
  if (!this._defaultCompositeValue) {
75
47
  return;
76
48
  }
77
49
  context.globalCompositeOperation = this._defaultCompositeValue;
78
50
  }
79
- draw(context) {
51
+ drawSettingsSetup(context) {
80
52
  const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;
81
53
  this._defaultCompositeValue = previousComposite;
82
54
  context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
@@ -84,6 +56,38 @@
84
56
  async init() {
85
57
  await this._initCover();
86
58
  }
59
+ _initCover = async () => {
60
+ const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
61
+ if (color) {
62
+ const coverRgb = (0, engine_1.rangeColorToRgb)(this._engine, color);
63
+ if (coverRgb) {
64
+ const coverColor = {
65
+ ...coverRgb,
66
+ a: cover.opacity,
67
+ };
68
+ this._coverColorStyle = (0, engine_1.getStyleFromRgb)(coverColor, this._container.hdr, coverColor.a);
69
+ }
70
+ }
71
+ else {
72
+ await new Promise((resolve, reject) => {
73
+ if (!cover?.image) {
74
+ return;
75
+ }
76
+ const img = (0, engine_1.safeDocument)().createElement("img");
77
+ img.addEventListener("load", () => {
78
+ this._coverImage = {
79
+ image: img,
80
+ opacity: cover.opacity,
81
+ };
82
+ resolve();
83
+ });
84
+ img.addEventListener("error", () => {
85
+ reject(new Error("Error loading image"));
86
+ });
87
+ img.src = cover.image;
88
+ });
89
+ }
90
+ };
87
91
  }
88
- exports.BackgroundMaskInstance = BackgroundMaskInstance;
92
+ exports.BackgroundMaskPluginInstance = BackgroundMaskPluginInstance;
89
93
  });
@@ -13,6 +13,9 @@
13
13
  const engine_1 = require("@tsparticles/engine");
14
14
  const BackgroundMaskCover_js_1 = require("./BackgroundMaskCover.js");
15
15
  class BackgroundMask {
16
+ composite;
17
+ cover;
18
+ enable;
16
19
  constructor() {
17
20
  this.composite = "destination-out";
18
21
  this.cover = new BackgroundMaskCover_js_1.BackgroundMaskCover();
@@ -12,6 +12,9 @@
12
12
  exports.BackgroundMaskCover = void 0;
13
13
  const engine_1 = require("@tsparticles/engine");
14
14
  class BackgroundMaskCover {
15
+ color;
16
+ image;
17
+ opacity;
15
18
  constructor() {
16
19
  this.opacity = 1;
17
20
  }
package/umd/index.js CHANGED
@@ -44,9 +44,9 @@ var __importStar = (this && this.__importStar) || (function () {
44
44
  var __syncRequire = typeof module === "object" && typeof module.exports === "object";
45
45
  Object.defineProperty(exports, "__esModule", { value: true });
46
46
  exports.loadBackgroundMaskPlugin = loadBackgroundMaskPlugin;
47
- function loadBackgroundMaskPlugin(engine) {
48
- engine.checkVersion("4.0.0-alpha.2");
49
- engine.register(async (e) => {
47
+ async function loadBackgroundMaskPlugin(engine) {
48
+ engine.checkVersion("4.0.0-alpha.21");
49
+ await engine.register(async (e) => {
50
50
  const { BackgroundMaskPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./BackgroundMaskPlugin.js"))) : new Promise((resolve_1, reject_1) => { require(["./BackgroundMaskPlugin.js"], resolve_1, reject_1); }).then(__importStar));
51
51
  e.addPlugin(new BackgroundMaskPlugin(e));
52
52
  });
package/224.min.js DELETED
@@ -1,2 +0,0 @@
1
- /*! For license information please see 224.min.js.LICENSE.txt */
2
- (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}}}}]);
@@ -1 +0,0 @@
1
- /*! tsParticles Background Mask Plugin v4.0.0-alpha.2 by Matteo Bruni */
@@ -1,75 +0,0 @@
1
- import { getLogger, getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
2
- export class BackgroundMaskInstance {
3
- constructor(container, engine) {
4
- this._initCover = async () => {
5
- const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
6
- if (color) {
7
- const coverRgb = rangeColorToRgb(this._engine, color);
8
- if (coverRgb) {
9
- const coverColor = {
10
- ...coverRgb,
11
- a: cover.opacity,
12
- };
13
- this._coverColorStyle = getStyleFromRgb(coverColor, this._container.hdr, coverColor.a);
14
- }
15
- }
16
- else {
17
- await new Promise((resolve, reject) => {
18
- if (!cover?.image) {
19
- return;
20
- }
21
- const img = safeDocument().createElement("img");
22
- img.addEventListener("load", () => {
23
- this._coverImage = {
24
- image: img,
25
- opacity: cover.opacity,
26
- };
27
- resolve();
28
- });
29
- img.addEventListener("error", evt => {
30
- getLogger().error(evt);
31
- reject(new Error("Error loading image"));
32
- });
33
- img.src = cover.image;
34
- });
35
- }
36
- };
37
- this._container = container;
38
- this._engine = engine;
39
- }
40
- canvasClear() {
41
- const backgroundMask = this._container.actualOptions.backgroundMask;
42
- if (!backgroundMask?.enable) {
43
- return false;
44
- }
45
- return this.canvasPaint();
46
- }
47
- canvasPaint() {
48
- if (!this._container.actualOptions.backgroundMask?.enable) {
49
- return false;
50
- }
51
- const canvas = this._container.canvas;
52
- canvas.canvasClear();
53
- if (this._coverImage) {
54
- canvas.paintImage(this._coverImage.image, this._coverImage.opacity);
55
- }
56
- else {
57
- canvas.paintBase(this._coverColorStyle);
58
- }
59
- return true;
60
- }
61
- clearDraw(context) {
62
- if (!this._defaultCompositeValue) {
63
- return;
64
- }
65
- context.globalCompositeOperation = this._defaultCompositeValue;
66
- }
67
- draw(context) {
68
- const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;
69
- this._defaultCompositeValue = previousComposite;
70
- context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
71
- }
72
- async init() {
73
- await this._initCover();
74
- }
75
- }
@@ -1,75 +0,0 @@
1
- import { getLogger, getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
2
- export class BackgroundMaskInstance {
3
- constructor(container, engine) {
4
- this._initCover = async () => {
5
- const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
6
- if (color) {
7
- const coverRgb = rangeColorToRgb(this._engine, color);
8
- if (coverRgb) {
9
- const coverColor = {
10
- ...coverRgb,
11
- a: cover.opacity,
12
- };
13
- this._coverColorStyle = getStyleFromRgb(coverColor, this._container.hdr, coverColor.a);
14
- }
15
- }
16
- else {
17
- await new Promise((resolve, reject) => {
18
- if (!cover?.image) {
19
- return;
20
- }
21
- const img = safeDocument().createElement("img");
22
- img.addEventListener("load", () => {
23
- this._coverImage = {
24
- image: img,
25
- opacity: cover.opacity,
26
- };
27
- resolve();
28
- });
29
- img.addEventListener("error", evt => {
30
- getLogger().error(evt);
31
- reject(new Error("Error loading image"));
32
- });
33
- img.src = cover.image;
34
- });
35
- }
36
- };
37
- this._container = container;
38
- this._engine = engine;
39
- }
40
- canvasClear() {
41
- const backgroundMask = this._container.actualOptions.backgroundMask;
42
- if (!backgroundMask?.enable) {
43
- return false;
44
- }
45
- return this.canvasPaint();
46
- }
47
- canvasPaint() {
48
- if (!this._container.actualOptions.backgroundMask?.enable) {
49
- return false;
50
- }
51
- const canvas = this._container.canvas;
52
- canvas.canvasClear();
53
- if (this._coverImage) {
54
- canvas.paintImage(this._coverImage.image, this._coverImage.opacity);
55
- }
56
- else {
57
- canvas.paintBase(this._coverColorStyle);
58
- }
59
- return true;
60
- }
61
- clearDraw(context) {
62
- if (!this._defaultCompositeValue) {
63
- return;
64
- }
65
- context.globalCompositeOperation = this._defaultCompositeValue;
66
- }
67
- draw(context) {
68
- const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;
69
- this._defaultCompositeValue = previousComposite;
70
- context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
71
- }
72
- async init() {
73
- await this._initCover();
74
- }
75
- }
@@ -1,75 +0,0 @@
1
- import { getLogger, getStyleFromRgb, rangeColorToRgb, safeDocument, } from "@tsparticles/engine";
2
- export class BackgroundMaskInstance {
3
- constructor(container, engine) {
4
- this._initCover = async () => {
5
- const options = this._container.actualOptions, cover = options.backgroundMask?.cover, color = cover?.color;
6
- if (color) {
7
- const coverRgb = rangeColorToRgb(this._engine, color);
8
- if (coverRgb) {
9
- const coverColor = {
10
- ...coverRgb,
11
- a: cover.opacity,
12
- };
13
- this._coverColorStyle = getStyleFromRgb(coverColor, this._container.hdr, coverColor.a);
14
- }
15
- }
16
- else {
17
- await new Promise((resolve, reject) => {
18
- if (!cover?.image) {
19
- return;
20
- }
21
- const img = safeDocument().createElement("img");
22
- img.addEventListener("load", () => {
23
- this._coverImage = {
24
- image: img,
25
- opacity: cover.opacity,
26
- };
27
- resolve();
28
- });
29
- img.addEventListener("error", evt => {
30
- getLogger().error(evt);
31
- reject(new Error("Error loading image"));
32
- });
33
- img.src = cover.image;
34
- });
35
- }
36
- };
37
- this._container = container;
38
- this._engine = engine;
39
- }
40
- canvasClear() {
41
- const backgroundMask = this._container.actualOptions.backgroundMask;
42
- if (!backgroundMask?.enable) {
43
- return false;
44
- }
45
- return this.canvasPaint();
46
- }
47
- canvasPaint() {
48
- if (!this._container.actualOptions.backgroundMask?.enable) {
49
- return false;
50
- }
51
- const canvas = this._container.canvas;
52
- canvas.canvasClear();
53
- if (this._coverImage) {
54
- canvas.paintImage(this._coverImage.image, this._coverImage.opacity);
55
- }
56
- else {
57
- canvas.paintBase(this._coverColorStyle);
58
- }
59
- return true;
60
- }
61
- clearDraw(context) {
62
- if (!this._defaultCompositeValue) {
63
- return;
64
- }
65
- context.globalCompositeOperation = this._defaultCompositeValue;
66
- }
67
- draw(context) {
68
- const previousComposite = context.globalCompositeOperation, backgroundMask = this._container.actualOptions.backgroundMask;
69
- this._defaultCompositeValue = previousComposite;
70
- context.globalCompositeOperation = backgroundMask?.enable ? backgroundMask.composite : previousComposite;
71
- }
72
- async init() {
73
- await this._initCover();
74
- }
75
- }
@@ -1 +0,0 @@
1
- /*! tsParticles Background Mask Plugin v4.0.0-alpha.2 by Matteo Bruni */