@tsparticles/plugin-canvas-mask 3.4.0 → 3.5.0
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.
- package/cjs/index.js +1 -2
- package/cjs/utils.js +4 -5
- package/package.json +2 -2
- package/report.html +1 -1
- package/tsparticles.plugin.canvas-mask.js +1 -1
- package/tsparticles.plugin.canvas-mask.min.js +1 -1
- package/tsparticles.plugin.canvas-mask.min.js.LICENSE.txt +1 -1
- package/umd/index.js +1 -2
- package/umd/utils.js +4 -5
package/cjs/index.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.loadCanvasMaskPlugin =
|
|
3
|
+
exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
|
|
4
4
|
const CanvasMaskPlugin_js_1 = require("./CanvasMaskPlugin.js");
|
|
5
5
|
async function loadCanvasMaskPlugin(engine, refresh = true) {
|
|
6
6
|
await engine.addPlugin(new CanvasMaskPlugin_js_1.CanvasMaskPlugin(), refresh);
|
|
7
7
|
}
|
|
8
|
-
exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
|
package/cjs/utils.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
|
|
4
|
+
exports.getCanvasImageData = getCanvasImageData;
|
|
5
|
+
exports.getImageData = getImageData;
|
|
6
|
+
exports.getTextData = getTextData;
|
|
4
7
|
const engine_1 = require("@tsparticles/engine");
|
|
5
8
|
const half = 0.5, origin = {
|
|
6
9
|
x: 0,
|
|
@@ -39,7 +42,6 @@ function addParticlesFromCanvasPixels(container, data, position, scale, override
|
|
|
39
42
|
selectedPixels++;
|
|
40
43
|
}
|
|
41
44
|
}
|
|
42
|
-
exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
|
|
43
45
|
function getCanvasImageData(ctx, size, offset, clear = true) {
|
|
44
46
|
const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
|
|
45
47
|
if (clear) {
|
|
@@ -73,7 +75,6 @@ function getCanvasImageData(ctx, size, offset, clear = true) {
|
|
|
73
75
|
height: pixels.length,
|
|
74
76
|
};
|
|
75
77
|
}
|
|
76
|
-
exports.getCanvasImageData = getCanvasImageData;
|
|
77
78
|
function getImageData(src, offset) {
|
|
78
79
|
const image = new Image();
|
|
79
80
|
image.crossOrigin = "Anonymous";
|
|
@@ -94,7 +95,6 @@ function getImageData(src, offset) {
|
|
|
94
95
|
image.src = src;
|
|
95
96
|
return p;
|
|
96
97
|
}
|
|
97
|
-
exports.getImageData = getImageData;
|
|
98
98
|
function getTextData(textOptions, offset) {
|
|
99
99
|
const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
|
|
100
100
|
if (!text || !context) {
|
|
@@ -125,7 +125,6 @@ function getTextData(textOptions, offset) {
|
|
|
125
125
|
}
|
|
126
126
|
return getCanvasImageData(context, canvas, offset);
|
|
127
127
|
}
|
|
128
|
-
exports.getTextData = getTextData;
|
|
129
128
|
function shuffle(array) {
|
|
130
129
|
const lengthOffset = 1, minIndex = 0;
|
|
131
130
|
for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/plugin-canvas-mask",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "tsParticles canvas mask plugin",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"./package.json": "./package.json"
|
|
87
87
|
},
|
|
88
88
|
"dependencies": {
|
|
89
|
-
"@tsparticles/engine": "^3.
|
|
89
|
+
"@tsparticles/engine": "^3.5.0"
|
|
90
90
|
},
|
|
91
91
|
"publishConfig": {
|
|
92
92
|
"access": "public"
|
package/report.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8"/>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
6
|
-
<title>@tsparticles/plugin-canvas-mask [
|
|
6
|
+
<title>@tsparticles/plugin-canvas-mask [1 Jul 2024 at 09:18]</title>
|
|
7
7
|
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
|
|
8
8
|
|
|
9
9
|
<script>
|
|
@@ -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
|
-
* v3.
|
|
7
|
+
* v3.5.0
|
|
8
8
|
*/
|
|
9
9
|
/*
|
|
10
10
|
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.plugin.canvas-mask.min.js.LICENSE.txt */
|
|
2
|
-
!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={};
|
|
2
|
+
!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:()=>m});class n{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 r=o(303);class a{constructor(){this.filter=t=>t.a>0,this.offset=4}load(t){if(t){if(void 0!==t.filter)if((0,r.isString)(t.filter)){if(Object.hasOwn(window,t.filter)){const e=window[t.filter];(0,r.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){t&&void 0!==t.src&&(this.src=t.src)}}class c{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 h{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 d{constructor(){this.color="#000000",this.font=new c,this.lines=new h,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 f{constructor(){this.enable=!1,this.override=new n,this.pixels=new a,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 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={x:0,y:0};function p(t,e,i,o,s,n){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,r.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/r.percentDenominator-l*o*.5,g=f.height*i.y/r.percentDenominator-a*o*.5;for(;u<d&&h.length;){const i=0,r=h.pop()??i,a={x:r%l,y:Math.floor(r/l)},c=e.pixels[a.y][a.x];if(!n(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 g(t,e,i,o=!0){const s=t.getImageData(u.x,u.y,e.width,e.height).data;o&&t.clearRect(u.x,u.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},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 n=s.getContext("2d");if(!n)return o(new Error(`${r.errorPrefix} Could not get canvas context`));n.drawImage(i,u.x,u.y,i.width,i.height,u.x,u.y,s.width,s.height),t(g(n,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:n,lines:a,color:l}=t;if(!n||!o)return;const c=n.split(a.separator),h=(0,r.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 x=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.x,x+t.measure.actualBoundingBoxAscent),x+=t.height+a.spacing;return g(o,i,e)}(e.text,o);if(!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=g(s,t,o)}p(t,i,e.position,e.scale,e.override,e.pixels.filter)}}class v{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 m(t,e=!0){await t.addPlugin(new v,e)}return s})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Canvas Mask Plugin v3.
|
|
1
|
+
/*! tsParticles Canvas Mask Plugin v3.5.0 by Matteo Bruni */
|
package/umd/index.js
CHANGED
|
@@ -9,10 +9,9 @@
|
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.loadCanvasMaskPlugin =
|
|
12
|
+
exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
|
|
13
13
|
const CanvasMaskPlugin_js_1 = require("./CanvasMaskPlugin.js");
|
|
14
14
|
async function loadCanvasMaskPlugin(engine, refresh = true) {
|
|
15
15
|
await engine.addPlugin(new CanvasMaskPlugin_js_1.CanvasMaskPlugin(), refresh);
|
|
16
16
|
}
|
|
17
|
-
exports.loadCanvasMaskPlugin = loadCanvasMaskPlugin;
|
|
18
17
|
});
|
package/umd/utils.js
CHANGED
|
@@ -9,7 +9,10 @@
|
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.
|
|
12
|
+
exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
|
|
13
|
+
exports.getCanvasImageData = getCanvasImageData;
|
|
14
|
+
exports.getImageData = getImageData;
|
|
15
|
+
exports.getTextData = getTextData;
|
|
13
16
|
const engine_1 = require("@tsparticles/engine");
|
|
14
17
|
const half = 0.5, origin = {
|
|
15
18
|
x: 0,
|
|
@@ -48,7 +51,6 @@
|
|
|
48
51
|
selectedPixels++;
|
|
49
52
|
}
|
|
50
53
|
}
|
|
51
|
-
exports.addParticlesFromCanvasPixels = addParticlesFromCanvasPixels;
|
|
52
54
|
function getCanvasImageData(ctx, size, offset, clear = true) {
|
|
53
55
|
const imageData = ctx.getImageData(origin.x, origin.y, size.width, size.height).data;
|
|
54
56
|
if (clear) {
|
|
@@ -82,7 +84,6 @@
|
|
|
82
84
|
height: pixels.length,
|
|
83
85
|
};
|
|
84
86
|
}
|
|
85
|
-
exports.getCanvasImageData = getCanvasImageData;
|
|
86
87
|
function getImageData(src, offset) {
|
|
87
88
|
const image = new Image();
|
|
88
89
|
image.crossOrigin = "Anonymous";
|
|
@@ -103,7 +104,6 @@
|
|
|
103
104
|
image.src = src;
|
|
104
105
|
return p;
|
|
105
106
|
}
|
|
106
|
-
exports.getImageData = getImageData;
|
|
107
107
|
function getTextData(textOptions, offset) {
|
|
108
108
|
const canvas = document.createElement("canvas"), context = canvas.getContext("2d"), { font, text, lines: linesOptions, color } = textOptions;
|
|
109
109
|
if (!text || !context) {
|
|
@@ -134,7 +134,6 @@
|
|
|
134
134
|
}
|
|
135
135
|
return getCanvasImageData(context, canvas, offset);
|
|
136
136
|
}
|
|
137
|
-
exports.getTextData = getTextData;
|
|
138
137
|
function shuffle(array) {
|
|
139
138
|
const lengthOffset = 1, minIndex = 0;
|
|
140
139
|
for (let currentIndex = array.length - lengthOffset; currentIndex >= minIndex; currentIndex--) {
|