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

tsParticles canvas mask plugin

/*! 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=>(()=>{var e={303: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={};o.r(s),o.d(s,{loadCanvasMaskPlugin:()=>w});var n=o(303);class r{constructor(){this.color=!0,this.opacity=!1}load(t){(0,n.isNull)(t)||(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}class a{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(!(0,n.isNull)(t)){if(void 0!==t.filter)if((0,n.isString)(t.filter)){if(Object.hasOwn(window,t.filter)){const e=window[t.filter];(0,n.isFunction)(e)&&(this.filter=e)}}else this.filter=t.filter;void 0!==t.offset&&(this.offset=t.offset)}}}class l{constructor(){this.src=""}load(t){(0,n.isNull)(t)||void 0!==t.src&&(this.src=t.src)}}class c{constructor(){this.family="sans-serif",this.size=100}load(t){(0,n.isNull)(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 h{constructor(){this.separator="\n",this.spacing=10}load(t){(0,n.isNull)(t)||(void 0!==t.separator&&(this.separator=t.separator),void 0!==t.spacing&&(this.spacing=t.spacing))}}class d{constructor(){this.color="#000000",this.font=new c,this.lines=new h,this.text=""}load(t){(0,n.isNull)(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 f{constructor(){this.enable=!1,this.override=new r,this.pixels=new a,this.position={x:50,y:50},this.scale=1}load(t){(0,n.isNull)(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 l),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 d),this.text.load(t.text)))}}const u=0,p=0;function g(t,e,i,o,s,r){const{height:a,width:l}=e,c=a*l,h=function(t){const e=1,i=0;for(let o=t.length-e;o>=i;o--){const e=Math.floor((0,n.getRandom)()*o);[t[o],t[e]]=[t[e],t[o]]}return t}(x(c)),d=Math.min(c,t.actualOptions.particles.number.value),f=t.canvas.size;let u=0;const p=f.width*i.x/n.percentDenominator-l*o*.5,g=f.height*i.y/n.percentDenominator-a*o*.5;for(;u<d&&h.length;){const i=0,n=h.pop()??i,a={x:n%l,y:Math.floor(n/l)},c=e.pixels[a.y][a.x];if(!r(c))continue;const d={x:a.x*o+p,y:a.y*o+g},f={};s.color&&(f.color={value:c}),s.opacity&&(f.opacity={value:c.a}),t.particles.addParticle(d,f),u++}}function v(t,e,i,o=!0){const s=t.getImageData(u,p,e.width,e.height).data;o&&t.clearRect(u,p,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},l=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]/l}}return{pixels:n,width:Math.min(...n.map((t=>t.length))),height:n.length}}const x=t=>[...Array(t).keys()];class y{constructor(t){this._container=t}async init(){const t=this._container,e=t.actualOptions.canvasMask;if(!e?.enable)return;let i={pixels:[],height:0,width:0};const o=e.pixels.offset;if(e.image){const t=e.image.src;if(!t)return;i=await function(t,e){const i=new Image;i.crossOrigin="Anonymous";const o=new Promise(((t,o)=>{i.onerror=o,i.onload=()=>{const s=document.createElement("canvas");s.width=i.width,s.height=i.height;const r=s.getContext("2d");if(!r)return o(new Error(`${n.errorPrefix} Could not get canvas context`));r.drawImage(i,u,p,i.width,i.height,u,p,s.width,s.height),t(v(r,s,e))}}));return i.src=t,o}(t,o)}else if(e.text){const t=function(t,e){const i=document.createElement("canvas"),o=i.getContext("2d"),{font:s,text:r,lines:a,color:l}=t;if(!r||!o)return;const c=r.split(a.separator),h=(0,n.isNumber)(s.size)?`${s.size}px`:s.size,d=[];let f=0,p=0;for(const t of c){o.font=`${s.style??""} ${s.variant??""} ${s.weight??""} ${h} ${s.family}`;const e=o.measureText(t),i={measure:e,text:t,height:e.actualBoundingBoxAscent+e.actualBoundingBoxDescent,width:e.width};f=Math.max(f||0,i.width),p+=i.height+a.spacing,d.push(i)}i.width=f,i.height=p;let g=0;for(const t of d)o.font=`${s.style??""} ${s.variant??""} ${s.weight??""} ${h} ${s.family}`,o.fillStyle=l,o.fillText(t.text,u,g+t.measure.actualBoundingBoxAscent),g+=t.height+a.spacing;return v(o,i,e)}(e.text,o);if((0,n.isNull)(t))return;i=t}else if(e.element??e.selector){const t=e.element??(e.selector&&document.querySelector(e.selector));if(!t)return;const s=t.getContext("2d");if(!s)return;i=v(s,t,o)}g(t,i,e.position,e.scale,e.override,e.pixels.filter)}}class m{constructor(){this.id="canvasMask"}getPlugin(t){return Promise.resolve(new y(t))}loadOptions(t,e){if(!this.needsPlugin(t)&&!this.needsPlugin(e))return;let i=t.canvasMask;void 0===i?.load&&(t.canvasMask=i=new f),i.load(e?.canvasMask)}needsPlugin(t){return t?.canvasMask?.enable??!1}}async function w(t,e=!0){t.checkVersion("3.9.1"),await t.addPlugin(new m,e)}return s})()));