@tsparticles/plugin-canvas-mask 3.1.0 → 3.2.0

package/tsparticles.plugin.canvas-mask.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see tsparticles.plugin.canvas-mask.min.js.LICENSE.txt */
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],e);else{var i="object"==typeof exports?e(require("@tsparticles/engine")):e(t.window);for(var o in i)("object"==typeof exports?exports:t)[o]=i[o]}}(this,(t=>(()=>{"use strict";var e={533:e=>{e.exports=t}},i={};function o(t){var s=i[t];if(void 0!==s)return s.exports;var n=i[t]={exports:{}};return e[t](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var s={};return(()=>{o.r(s),o.d(s,{loadCanvasMaskPlugin:()=>x});class t{constructor(){this.color=!0,this.opacity=!1}load(t){t&&(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}var e=o(533);class i{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(t){if(void 0!==t.filter)if((0,e.isString)(t.filter)){if(Object.hasOwn(window,t.filter)){const i=window[t.filter];(0,e.isFunction)(i)&&(this.filter=i)}}else this.filter=t.filter;void 0!==t.offset&&(this.offset=t.offset)}}}class n{constructor(){this.src=""}load(t){t&&void 0!==t.src&&(this.src=t.src)}}class r{constructor(){this.family="sans-serif",this.size=100}load(t){t&&(void 0!==t.family&&(this.family=t.family),void 0!==t.size&&(this.size=t.size),void 0!==t.style&&(this.style=t.style),void 0!==t.variant&&(this.variant=t.variant),void 0!==t.weight&&(this.weight=t.weight))}}class a{constructor(){this.separator="\n",this.spacing=10}load(t){t&&(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class c{constructor(){this.color="#000000",this.font=new r,this.lines=new a,this.text=""}load(t){t&&(void 0!==t.color&&(this.color=t.color),this.font.load(t.font),this.lines.load(t.lines),void 0!==t.text&&(this.text=t.text))}}class l{constructor(){this.enable=!1,this.override=new t,this.pixels=new i,this.position={x:50,y:50},this.scale=1}load(t){t&&(void 0!==t.element&&t.element instanceof HTMLCanvasElement&&(this.element=t.element),void 0!==t.enable&&(this.enable=t.enable),t.image&&(this.image||(this.image=new n),this.image.load(t.image)),this.pixels.load(t.pixels),t.position&&(this.position={x:t.position.x??this.position.x,y:t.position.y??this.position.y}),this.override.load(t.override),void 0!==t.scale&&(this.scale=t.scale),void 0!==t.selector&&(this.selector=t.selector),t.text&&(this.text||(this.text=new c),this.text.load(t.text)))}}const h={x:0,y:0};function d(t,i,o,s,n,r){const{height:a,width:c}=i,l=a*c,h=function(t){const i=1,o=0;for(let s=t.length-i;s>=o;s--){const i=Math.floor((0,e.getRandom)()*s);[t[s],t[i]]=[t[i],t[s]]}return t}(u(l)),d=Math.min(l,t.actualOptions.particles.number.value),f=t.canvas.size;let p=0;const g=f.width*o.x/e.percentDenominator-c*s*.5,x=f.height*o.y/e.percentDenominator-a*s*.5;for(;p<d&&h.length;){const e=0,o=h.pop()??e,a={x:o%c,y:Math.floor(o/c)},l=i.pixels[a.y][a.x];if(!r(l))continue;const d={x:a.x*s+g,y:a.y*s+x},f={};n.color&&(f.color={value:l}),n.opacity&&(f.opacity={value:l.a}),t.particles.addParticle(d,f),p++}}function f(t,e,i,o=!0){const s=t.getImageData(h.x,h.y,e.width,e.height).data;o&&t.clearRect(h.x,h.y,e.width,e.height);const n=[];for(let t=0;t<s.length;t+=i){const o=t/i,r={x:o%e.width,y:Math.floor(o/e.width)};n[r.y]||(n[r.y]=[]);const a={r:0,g:1,b:2,a:3},c=255;n[r.y][r.x]={r:s[t+a.r],g:s[t+a.g],b:s[t+a.b],a:s[t+a.a]/c}}return{pixels:n,width:Math.min(...n.map((t=>t.length))),height:n.length}}const u=t=>[...Array(t).keys()];class p{constructor(t){this._container=t}async init(){const t=this._container,i=t.actualOptions.canvasMask;if(!i?.enable)return;let o={pixels:[],height:0,width:0};const s=i.pixels.offset;if(i.image){const t=i.image.src;if(!t)return;o=await function(t,i){const o=new Image;o.crossOrigin="Anonymous";const s=new Promise(((t,s)=>{o.onerror=s,o.onload=()=>{const n=document.createElement("canvas");n.width=o.width,n.height=o.height;const r=n.getContext("2d");if(!r)return s(new Error(`${e.errorPrefix} Could not get canvas context`));r.drawImage(o,h.x,h.y,o.width,o.height,h.x,h.y,n.width,n.height),t(f(r,n,i))}}));return o.src=t,s}(t,s)}else if(i.text){const t=function(t,i){const o=document.createElement("canvas"),s=o.getContext("2d"),{font:n,text:r,lines:a,color:c}=t;if(!r||!s)return;const l=r.split(a.separator),d=(0,e.isNumber)(n.size)?`${n.size}px`:n.size,u=[];let p=0,g=0;for(const t of l){s.font=`${n.style??""} ${n.variant??""} ${n.weight??""} ${d} ${n.family}`;const e=s.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};p=Math.max(p||0,i.width),g+=i.height+a.spacing,u.push(i)}o.width=p,o.height=g;let x=0;for(const t of u)s.font=`${n.style??""} ${n.variant??""} ${n.weight??""} ${d} ${n.family}`,s.fillStyle=c,s.fillText(t.text,h.x,x+t.measure.actualBoundingBoxAscent),x+=t.height+a.spacing;return f(s,o,i)}(i.text,s);if(!t)return;o=t}else if(i.element??i.selector){const t=i.element??(i.selector&&document.querySelector(i.selector));if(!t)return;const e=t.getContext("2d");if(!e)return;o=f(e,t,s)}d(t,o,i.position,i.scale,i.override,i.pixels.filter)}}class g{constructor(){this.id="canvasMask"}getPlugin(t){return new p(t)}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.canvasMask;void 0===i?.load&&(t.canvasMask=i=new l),i.load(e?.canvasMask)}needsPlugin(t){return t?.canvasMask?.enable??!1}}async function x(t,e=!0){await t.addPlugin(new g,e)}})(),s})()));
+!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 n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(this,(e=>(()=>{var t,r,n={533:t=>{t.exports=e}},o={};function i(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,i),r.exports}i.m=n,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-canvas-mask:",i.l=(e,n,o,a)=>{if(t[e])t[e].push(n);else{var s,l;if(void 0!==o)for(var c=document.getElementsByTagName("script"),u=0;u<c.length;u++){var p=c[u];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")==r+o){s=p;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,i.nc&&s.setAttribute("nonce",i.nc),s.setAttribute("data-webpack",r+o),s.src=e),t[e]=[n];var d=(r,n)=>{s.onerror=s.onload=null,clearTimeout(f);var o=t[e];if(delete t[e],s.parentNode&&s.parentNode.removeChild(s),o&&o.forEach((e=>e(n))),r)return r(n)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=d.bind(null,s.onerror),s.onload=d.bind(null,s.onload),l&&document.head.appendChild(s)}},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&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&!e;)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={592:0};i.f.j=(t,r)=>{var n=i.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else{var o=new Promise(((r,o)=>n=e[t]=[r,o]));r.push(n[2]=o);var a=i.p+i.u(t),s=new Error;i.l(a,(r=>{if(i.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var o=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+o+": "+a+")",s.name="ChunkLoadError",s.type=o,s.request=a,n[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,o,a=r[0],s=r[1],l=r[2],c=0;if(a.some((t=>0!==e[t]))){for(n in s)i.o(s,n)&&(i.m[n]=s[n]);if(l)l(i)}for(t&&t(r);c<a.length;c++)o=a[c],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0},r=this.webpackChunk_tsparticles_plugin_canvas_mask=this.webpackChunk_tsparticles_plugin_canvas_mask||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var a={};return(()=>{async function e(e,t=!0){const{CanvasMaskPlugin:r}=await i.e(262).then(i.bind(i,262));await e.addPlugin(new r,t)}i.r(a),i.d(a,{loadCanvasMaskPlugin:()=>e})})(),a})()));

package/tsparticles.plugin.canvas-mask.min.js.LICENSE.txt

@@ -1 +1 @@
-/*! tsParticles Canvas Mask Plugin v3.1.0 by Matteo Bruni */
+/*! tsParticles Canvas Mask Plugin v3.2.0 by Matteo Bruni */

package/types/CanvasMaskPlugin.d.ts

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

package/types/utils.d.ts

@@ -6,7 +6,7 @@ export interface CanvasPixelData {
     pixels: IRgba[][];
     width: number;
 }
-export declare function addParticlesFromCanvasPixels(container: Container, data: CanvasPixelData, position: ICoordinates, scale: number, override: ICanvasMaskOverride, filter: (pixel: IRgba) => boolean): void;
+export declare function addParticlesFromCanvasPixels(container: Container, data: CanvasPixelData, position: ICoordinates, scale: number, override: ICanvasMaskOverride, filter: (pixel: IRgba) => boolean): Promise<void>;
 export declare function getCanvasImageData(ctx: CanvasRenderingContext2D, size: IDimension, offset: number, clear?: boolean): CanvasPixelData;
 export declare function getImageData(src: string, offset: number): Promise<CanvasPixelData>;
 export declare function getTextData(textOptions: TextMask, offset: number): CanvasPixelData | undefined;

package/umd/CanvasMaskInstance.js

@@ -52,7 +52,7 @@
                 }
                 pixelData = (0, utils_js_1.getCanvasImageData)(context, canvas, offset);
             }
-            (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
+            await (0, utils_js_1.addParticlesFromCanvasPixels)(container, pixelData, options.position, options.scale, options.override, options.pixels.filter);
         }
     }
     exports.CanvasMaskInstance = CanvasMaskInstance;

package/umd/CanvasMaskPlugin.js

@@ -0,0 +1,61 @@
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+(function (factory) {
+    if (typeof module === "object" && typeof module.exports === "object") {
+        var v = factory(require, exports);
+        if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === "function" && define.amd) {
+        define(["require", "exports", "./Options/Classes/CanvasMask.js"], factory);
+    }
+})(function (require, exports) {
+    "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CanvasMaskPlugin = void 0;
+    const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
+    class CanvasMaskPlugin {
+        constructor() {
+            this.id = "canvasMask";
+        }
+        async getPlugin(container) {
+            const { CanvasMaskInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./CanvasMaskInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./CanvasMaskInstance.js"], resolve_1, reject_1); }).then(__importStar));
+            return new CanvasMaskInstance(container);
+        }
+        loadOptions(options, source) {
+            if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
+                return;
+            }
+            let canvasMaskOptions = options.canvasMask;
+            if (canvasMaskOptions?.load === undefined) {
+                options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
+            }
+            canvasMaskOptions.load(source?.canvasMask);
+        }
+        needsPlugin(options) {
+            return options?.canvasMask?.enable ?? false;
+        }
+    }
+    exports.CanvasMaskPlugin = CanvasMaskPlugin;
+});

package/umd/index.js

@@ -1,39 +1,41 @@
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 (function (factory) {
     if (typeof module === "object" && typeof module.exports === "object") {
         var v = factory(require, exports);
         if (v !== undefined) module.exports = v;
     }
     else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./Options/Classes/CanvasMask.js", "./CanvasMaskInstance.js"], factory);
+        define(["require", "exports"], factory);
     }
 })(function (require, exports) {
     "use strict";
+    var __syncRequire = typeof module === "object" && typeof module.exports === "object";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.loadCanvasMaskPlugin = void 0;
-    const CanvasMask_js_1 = require("./Options/Classes/CanvasMask.js");
-    const CanvasMaskInstance_js_1 = require("./CanvasMaskInstance.js");
-    class CanvasMaskPlugin {
-        constructor() {
-            this.id = "canvasMask";
-        }
-        getPlugin(container) {
-            return new CanvasMaskInstance_js_1.CanvasMaskInstance(container);
-        }
-        loadOptions(options, source) {
-            if (!this.needsPlugin(options) && !this.needsPlugin(source)) {
-                return;
-            }
-            let canvasMaskOptions = options.canvasMask;
-            if (canvasMaskOptions?.load === undefined) {
-                options.canvasMask = canvasMaskOptions = new CanvasMask_js_1.CanvasMask();
-            }
-            canvasMaskOptions.load(source?.canvasMask);
-        }
-        needsPlugin(options) {
-            return options?.canvasMask?.enable ?? false;
-        }
-    }
     async function loadCanvasMaskPlugin(engine, refresh = true) {
+        const { CanvasMaskPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./CanvasMaskPlugin.js"))) : new Promise((resolve_1, reject_1) => { require(["./CanvasMaskPlugin.js"], resolve_1, reject_1); }).then(__importStar));
         await engine.addPlugin(new CanvasMaskPlugin(), refresh);
     }
     exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;

package/umd/utils.js

@@ -15,7 +15,7 @@
         x: 0,
         y: 0,
     }, defaultWidth = 0;
-    function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
+    async function addParticlesFromCanvasPixels(container, data, position, scale, override, filter) {
         const { height, width } = data, numPixels = height * width, indexArray = shuffle(range(numPixels)), maxParticles = Math.min(numPixels, container.actualOptions.particles.number.value), canvasSize = container.canvas.size;
         let selectedPixels = 0;
         const positionOffset = {
@@ -44,7 +44,7 @@
                     value: pixel.a,
                 };
             }
-            container.particles.addParticle(pos, pOptions);
+            await container.particles.addParticle(pos, pOptions);
             selectedPixels++;
         }
     }