@tsparticles/plugin-polygon-mask 3.0.3 → 3.1.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/browser/PolygonMaskInstance.js +46 -38
- package/browser/utils.js +21 -10
- package/cjs/PolygonMaskInstance.js +45 -37
- package/cjs/utils.js +21 -10
- package/esm/PolygonMaskInstance.js +46 -38
- package/esm/utils.js +21 -10
- package/package.json +2 -2
- package/report.html +2 -2
- package/tsparticles.plugin.polygon-mask.js +83 -46
- package/tsparticles.plugin.polygon-mask.min.js +1 -1
- package/tsparticles.plugin.polygon-mask.min.js.LICENSE.txt +1 -1
- package/types/Options/Classes/PolygonMaskInline.d.ts +1 -2
- package/umd/PolygonMaskInstance.js +45 -37
- package/umd/utils.js +21 -10
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
import { deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, } from "@tsparticles/engine";
|
|
1
|
+
import { deepExtend, errorPrefix, getDistance, getDistances, getRandom, isArray, isString, itemFromArray, percentDenominator, } from "@tsparticles/engine";
|
|
2
2
|
import { calcClosestPtOnSegment, drawPolygonMask, drawPolygonMaskPath, parsePaths, segmentBounce } from "./utils.js";
|
|
3
|
-
const noPolygonDataLoaded = `${errorPrefix} No polygon data loaded.`, noPolygonFound = `${errorPrefix} No polygon found, you need to specify SVG url in config
|
|
3
|
+
const noPolygonDataLoaded = `${errorPrefix} No polygon data loaded.`, noPolygonFound = `${errorPrefix} No polygon found, you need to specify SVG url in config.`, origin = {
|
|
4
|
+
x: 0,
|
|
5
|
+
y: 0,
|
|
6
|
+
}, half = 0.5, double = 2;
|
|
4
7
|
export class PolygonMaskInstance {
|
|
5
8
|
constructor(container, engine) {
|
|
6
9
|
this._checkInsidePolygon = (position) => {
|
|
@@ -11,19 +14,20 @@ export class PolygonMaskInstance {
|
|
|
11
14
|
if (!this.raw) {
|
|
12
15
|
throw new Error(noPolygonFound);
|
|
13
16
|
}
|
|
14
|
-
const canvasSize = container.canvas.size, x = position?.x ?? getRandom() * canvasSize.width, y = position?.y ?? getRandom() * canvasSize.height;
|
|
17
|
+
const canvasSize = container.canvas.size, x = position?.x ?? getRandom() * canvasSize.width, y = position?.y ?? getRandom() * canvasSize.height, indexOffset = 1;
|
|
15
18
|
let inside = false;
|
|
16
|
-
for (let i = 0, j = this.raw.length -
|
|
19
|
+
for (let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++) {
|
|
17
20
|
const pi = this.raw[i], pj = this.raw[j], intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
|
|
18
21
|
if (intersect) {
|
|
19
22
|
inside = !inside;
|
|
20
23
|
}
|
|
21
24
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
if (options.type === "inside") {
|
|
26
|
+
return inside;
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
return options.type === "outside" ? !inside : false;
|
|
30
|
+
}
|
|
27
31
|
};
|
|
28
32
|
this._createPath2D = () => {
|
|
29
33
|
const container = this._container, options = container.actualOptions.polygon;
|
|
@@ -45,13 +49,14 @@ export class PolygonMaskInstance {
|
|
|
45
49
|
else {
|
|
46
50
|
delete path.path2d;
|
|
47
51
|
}
|
|
48
|
-
if (path.path2d
|
|
52
|
+
if (path.path2d ?? !this.raw) {
|
|
49
53
|
continue;
|
|
50
54
|
}
|
|
51
55
|
path.path2d = new Path2D();
|
|
52
|
-
|
|
56
|
+
const firstIndex = 0, firstPoint = this.raw[firstIndex];
|
|
57
|
+
path.path2d.moveTo(firstPoint.x, firstPoint.y);
|
|
53
58
|
this.raw.forEach((pos, i) => {
|
|
54
|
-
if (i >
|
|
59
|
+
if (i > firstIndex) {
|
|
55
60
|
path.path2d?.lineTo(pos.x, pos.y);
|
|
56
61
|
}
|
|
57
62
|
});
|
|
@@ -63,7 +68,7 @@ export class PolygonMaskInstance {
|
|
|
63
68
|
if (!options) {
|
|
64
69
|
return;
|
|
65
70
|
}
|
|
66
|
-
const url = svgUrl
|
|
71
|
+
const url = svgUrl ?? options.url, forceDownload = force ?? false;
|
|
67
72
|
if (!url || (this.paths !== undefined && !forceDownload)) {
|
|
68
73
|
return this.raw;
|
|
69
74
|
}
|
|
@@ -89,11 +94,11 @@ export class PolygonMaskInstance {
|
|
|
89
94
|
if (!polygonMaskOptions) {
|
|
90
95
|
return;
|
|
91
96
|
}
|
|
92
|
-
if (!this.raw
|
|
97
|
+
if (!this.raw?.length || !this.paths?.length) {
|
|
93
98
|
throw new Error(noPolygonDataLoaded);
|
|
94
99
|
}
|
|
95
100
|
let offset = 0, point;
|
|
96
|
-
const totalLength = this.paths.reduce((tot, path) => tot + path.length,
|
|
101
|
+
const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator), distance = totalLength / options.particles.number.value;
|
|
97
102
|
for (const path of this.paths) {
|
|
98
103
|
const pathDistance = distance * index - offset;
|
|
99
104
|
if (pathDistance <= path.length) {
|
|
@@ -106,12 +111,12 @@ export class PolygonMaskInstance {
|
|
|
106
111
|
}
|
|
107
112
|
const scale = this._scale;
|
|
108
113
|
return {
|
|
109
|
-
x: (point?.x ??
|
|
110
|
-
y: (point?.y ??
|
|
114
|
+
x: (point?.x ?? origin.x) * scale + (this.offset?.x ?? origin.x),
|
|
115
|
+
y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y),
|
|
111
116
|
};
|
|
112
117
|
};
|
|
113
118
|
this._getPointByIndex = (index) => {
|
|
114
|
-
if (!this.raw
|
|
119
|
+
if (!this.raw?.length) {
|
|
115
120
|
throw new Error(noPolygonDataLoaded);
|
|
116
121
|
}
|
|
117
122
|
const coords = this.raw[index % this.raw.length];
|
|
@@ -121,7 +126,7 @@ export class PolygonMaskInstance {
|
|
|
121
126
|
};
|
|
122
127
|
};
|
|
123
128
|
this._getRandomPoint = () => {
|
|
124
|
-
if (!this.raw
|
|
129
|
+
if (!this.raw?.length) {
|
|
125
130
|
throw new Error(noPolygonDataLoaded);
|
|
126
131
|
}
|
|
127
132
|
const coords = itemFromArray(this.raw);
|
|
@@ -135,13 +140,13 @@ export class PolygonMaskInstance {
|
|
|
135
140
|
if (!options) {
|
|
136
141
|
return;
|
|
137
142
|
}
|
|
138
|
-
if (!this.raw
|
|
143
|
+
if (!this.raw?.length || !this.paths?.length) {
|
|
139
144
|
throw new Error(noPolygonDataLoaded);
|
|
140
145
|
}
|
|
141
|
-
const path = itemFromArray(this.paths), distance = Math.floor(getRandom() * path.length) +
|
|
146
|
+
const path = itemFromArray(this.paths), offset = 1, distance = Math.floor(getRandom() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
|
|
142
147
|
return {
|
|
143
|
-
x: point.x * scale + (this.offset?.x
|
|
144
|
-
y: point.y * scale + (this.offset?.y
|
|
148
|
+
x: point.x * scale + (this.offset?.x ?? origin.x),
|
|
149
|
+
y: point.y * scale + (this.offset?.y ?? origin.y),
|
|
145
150
|
};
|
|
146
151
|
};
|
|
147
152
|
this._initRawData = async (force) => {
|
|
@@ -179,7 +184,7 @@ export class PolygonMaskInstance {
|
|
|
179
184
|
if (!options) {
|
|
180
185
|
return;
|
|
181
186
|
}
|
|
182
|
-
const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), svg = doc.getElementsByTagName("svg")[
|
|
187
|
+
const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
|
|
183
188
|
let svgPaths = svg.getElementsByTagName("path");
|
|
184
189
|
if (!svgPaths.length) {
|
|
185
190
|
svgPaths = doc.getElementsByTagName("path");
|
|
@@ -202,8 +207,8 @@ export class PolygonMaskInstance {
|
|
|
202
207
|
y: 50,
|
|
203
208
|
}, canvasSize = container.canvas.size;
|
|
204
209
|
this.offset = {
|
|
205
|
-
x: (canvasSize.width * position.x) /
|
|
206
|
-
y: (canvasSize.height * position.y) /
|
|
210
|
+
x: (canvasSize.width * position.x) / percentDenominator - this.dimension.width * half,
|
|
211
|
+
y: (canvasSize.height * position.y) / percentDenominator - this.dimension.height * half,
|
|
207
212
|
};
|
|
208
213
|
return parsePaths(this.paths, scale, this.offset);
|
|
209
214
|
};
|
|
@@ -214,8 +219,8 @@ export class PolygonMaskInstance {
|
|
|
214
219
|
}
|
|
215
220
|
if (options.type === "inside" || options.type === "outside") {
|
|
216
221
|
let closest, dx, dy;
|
|
217
|
-
const pos = particle.getPosition(), radius = particle.getRadius();
|
|
218
|
-
for (let i = 0, j = this.raw.length -
|
|
222
|
+
const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
|
|
223
|
+
for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
|
|
219
224
|
const pi = this.raw[i], pj = this.raw[j];
|
|
220
225
|
closest = calcClosestPtOnSegment(pi, pj, pos);
|
|
221
226
|
const dist = getDistances(pos, closest);
|
|
@@ -226,7 +231,7 @@ export class PolygonMaskInstance {
|
|
|
226
231
|
}
|
|
227
232
|
}
|
|
228
233
|
if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {
|
|
229
|
-
const factor = { x: 1, y: 1 }, diameter = radius *
|
|
234
|
+
const factor = { x: 1, y: 1 }, diameter = radius * double, inverse = -1;
|
|
230
235
|
if (pos.x >= closest.x) {
|
|
231
236
|
factor.x = -1;
|
|
232
237
|
}
|
|
@@ -235,15 +240,15 @@ export class PolygonMaskInstance {
|
|
|
235
240
|
}
|
|
236
241
|
particle.position.x = closest.x + diameter * factor.x;
|
|
237
242
|
particle.position.y = closest.y + diameter * factor.y;
|
|
238
|
-
particle.velocity.mult(
|
|
243
|
+
particle.velocity.mult(inverse);
|
|
239
244
|
return true;
|
|
240
245
|
}
|
|
241
246
|
}
|
|
242
247
|
else if (options.type === "inline" && particle.initialPosition) {
|
|
243
248
|
const dist = getDistance(particle.initialPosition, particle.getPosition()), { velocity } = particle;
|
|
244
249
|
if (dist > this._moveRadius) {
|
|
245
|
-
velocity.x = velocity.y
|
|
246
|
-
velocity.y = velocity.x
|
|
250
|
+
velocity.x = velocity.y * half - velocity.x;
|
|
251
|
+
velocity.y = velocity.x * half - velocity.y;
|
|
247
252
|
return true;
|
|
248
253
|
}
|
|
249
254
|
}
|
|
@@ -343,8 +348,8 @@ export class PolygonMaskInstance {
|
|
|
343
348
|
return this._polygonBounce(particle, delta, direction);
|
|
344
349
|
}
|
|
345
350
|
particlePosition(position) {
|
|
346
|
-
const options = this._container.actualOptions.polygon;
|
|
347
|
-
if (!(options?.enable && (this.raw?.length ??
|
|
351
|
+
const options = this._container.actualOptions.polygon, defaultLength = 0;
|
|
352
|
+
if (!(options?.enable && (this.raw?.length ?? defaultLength) > defaultLength)) {
|
|
348
353
|
return;
|
|
349
354
|
}
|
|
350
355
|
return deepExtend({}, position ? position : this._randomPoint());
|
|
@@ -368,10 +373,13 @@ export class PolygonMaskInstance {
|
|
|
368
373
|
if (this.redrawTimeout) {
|
|
369
374
|
clearTimeout(this.redrawTimeout);
|
|
370
375
|
}
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
376
|
+
const timeout = 250;
|
|
377
|
+
this.redrawTimeout = window.setTimeout(() => {
|
|
378
|
+
void (async () => {
|
|
379
|
+
await this._initRawData(true);
|
|
380
|
+
await container.particles.redraw();
|
|
381
|
+
})();
|
|
382
|
+
}, timeout);
|
|
375
383
|
}
|
|
376
384
|
stop() {
|
|
377
385
|
delete this.raw;
|
package/esm/utils.js
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { Vector, getDistances, getStyleFromRgb, rangeColorToRgb } from "@tsparticles/engine";
|
|
2
|
+
const squareExp = 2, inSegmentRange = {
|
|
3
|
+
min: 0,
|
|
4
|
+
max: 1,
|
|
5
|
+
}, double = 2;
|
|
2
6
|
export function drawPolygonMask(context, rawData, stroke) {
|
|
3
7
|
const color = rangeColorToRgb(stroke.color);
|
|
4
8
|
if (!color) {
|
|
5
9
|
return;
|
|
6
10
|
}
|
|
11
|
+
const firstIndex = 0, firstItem = rawData[firstIndex];
|
|
7
12
|
context.beginPath();
|
|
8
|
-
context.moveTo(
|
|
13
|
+
context.moveTo(firstItem.x, firstItem.y);
|
|
9
14
|
for (const item of rawData) {
|
|
10
15
|
context.lineTo(item.x, item.y);
|
|
11
16
|
}
|
|
@@ -15,7 +20,13 @@ export function drawPolygonMask(context, rawData, stroke) {
|
|
|
15
20
|
context.stroke();
|
|
16
21
|
}
|
|
17
22
|
export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
18
|
-
|
|
23
|
+
const defaultTransform = {
|
|
24
|
+
a: 1,
|
|
25
|
+
b: 0,
|
|
26
|
+
c: 0,
|
|
27
|
+
d: 1,
|
|
28
|
+
};
|
|
29
|
+
context.setTransform(defaultTransform.a, defaultTransform.b, defaultTransform.c, defaultTransform.d, position.x, position.y);
|
|
19
30
|
const color = rangeColorToRgb(stroke.color);
|
|
20
31
|
if (!color) {
|
|
21
32
|
return;
|
|
@@ -23,12 +34,12 @@ export function drawPolygonMaskPath(context, path, stroke, position) {
|
|
|
23
34
|
context.strokeStyle = getStyleFromRgb(color, stroke.opacity);
|
|
24
35
|
context.lineWidth = stroke.width;
|
|
25
36
|
context.stroke(path);
|
|
26
|
-
context.
|
|
37
|
+
context.resetTransform();
|
|
27
38
|
}
|
|
28
39
|
export function parsePaths(paths, scale, offset) {
|
|
29
|
-
const res = [];
|
|
40
|
+
const res = [], defaultCount = 0;
|
|
30
41
|
for (const path of paths) {
|
|
31
|
-
const segments = path.element.pathSegList, len = segments?.numberOfItems ??
|
|
42
|
+
const segments = path.element.pathSegList, len = segments?.numberOfItems ?? defaultCount, p = {
|
|
32
43
|
x: 0,
|
|
33
44
|
y: 0,
|
|
34
45
|
};
|
|
@@ -84,23 +95,23 @@ export function parsePaths(paths, scale, offset) {
|
|
|
84
95
|
return res;
|
|
85
96
|
}
|
|
86
97
|
export function calcClosestPtOnSegment(s1, s2, pos) {
|
|
87
|
-
const { dx: dx1, dy: dy1 } = getDistances(pos, s1), { dx: dx2, dy: dy2 } = getDistances(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 **
|
|
98
|
+
const { dx: dx1, dy: dy1 } = getDistances(pos, s1), { dx: dx2, dy: dy2 } = getDistances(s2, s1), t = (dx1 * dx2 + dy1 * dy2) / (dx2 ** squareExp + dy2 ** squareExp), res = {
|
|
88
99
|
x: s1.x + dx2 * t,
|
|
89
100
|
y: s1.y + dy2 * t,
|
|
90
|
-
isOnSegment: t >=
|
|
101
|
+
isOnSegment: t >= inSegmentRange.min && t <= inSegmentRange.max,
|
|
91
102
|
};
|
|
92
|
-
if (t <
|
|
103
|
+
if (t < inSegmentRange.min) {
|
|
93
104
|
res.x = s1.x;
|
|
94
105
|
res.y = s1.y;
|
|
95
106
|
}
|
|
96
|
-
else if (t >
|
|
107
|
+
else if (t > inSegmentRange.max) {
|
|
97
108
|
res.x = s2.x;
|
|
98
109
|
res.y = s2.y;
|
|
99
110
|
}
|
|
100
111
|
return res;
|
|
101
112
|
}
|
|
102
113
|
export function segmentBounce(start, stop, velocity) {
|
|
103
|
-
const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d =
|
|
114
|
+
const { dx, dy } = getDistances(start, stop), wallAngle = Math.atan2(dy, dx), wallNormal = Vector.create(Math.sin(wallAngle), -Math.cos(wallAngle)), d = double * (velocity.x * wallNormal.x + velocity.y * wallNormal.y);
|
|
104
115
|
wallNormal.multTo(d);
|
|
105
116
|
velocity.subFrom(wallNormal);
|
|
106
117
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/plugin-polygon-mask",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "tsParticles polygon mask plugin",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"./package.json": "./package.json"
|
|
89
89
|
},
|
|
90
90
|
"dependencies": {
|
|
91
|
-
"@tsparticles/engine": "^3.0
|
|
91
|
+
"@tsparticles/engine": "^3.1.0"
|
|
92
92
|
},
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"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-polygon-mask [
|
|
6
|
+
<title>@tsparticles/plugin-polygon-mask [13 Jan 2024 at 23:05]</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>
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<body>
|
|
32
32
|
<div id="app"></div>
|
|
33
33
|
<script>
|
|
34
|
-
window.chartData = [{"label":"tsparticles.plugin.polygon-mask.js","isAsset":true,"statSize":
|
|
34
|
+
window.chartData = [{"label":"tsparticles.plugin.polygon-mask.js","isAsset":true,"statSize":82287,"parsedSize":86402,"gzipSize":11350,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":82245,"groups":[{"id":153,"label":"index.js + 8 modules (concatenated)","path":"./dist/browser/index.js + 8 modules (concatenated)","statSize":22567,"parsedSize":86402,"gzipSize":11350,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser","statSize":22567,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/index.js","statSize":1102,"parsedSize":4219,"gzipSize":554,"inaccurateSizes":true},{"id":null,"label":"PolygonMaskInstance.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/PolygonMaskInstance.js","statSize":13986,"parsedSize":53548,"gzipSize":7034,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes","statSize":3366,"groups":[{"id":null,"label":"PolygonMask.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PolygonMask.js","statSize":1338,"parsedSize":5122,"gzipSize":672,"inaccurateSizes":true},{"id":null,"label":"PolygonMaskDraw.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PolygonMaskDraw.js","statSize":388,"parsedSize":1485,"gzipSize":195,"inaccurateSizes":true},{"id":null,"label":"PolygonMaskInline.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PolygonMaskInline.js","statSize":243,"parsedSize":930,"gzipSize":122,"inaccurateSizes":true},{"id":null,"label":"PolygonMaskMove.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PolygonMaskMove.js","statSize":302,"parsedSize":1156,"gzipSize":151,"inaccurateSizes":true},{"id":null,"label":"PolygonMaskLocalSvg.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PolygonMaskLocalSvg.js","statSize":493,"parsedSize":1887,"gzipSize":247,"inaccurateSizes":true},{"id":null,"label":"PolygonMaskDrawStroke.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/Options/Classes/PolygonMaskDrawStroke.js","statSize":602,"parsedSize":2304,"gzipSize":302,"inaccurateSizes":true}],"parsedSize":12887,"gzipSize":1692,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./dist/browser/index.js + 8 modules (concatenated)/dist/browser/utils.js","statSize":4113,"parsedSize":15747,"gzipSize":2068,"inaccurateSizes":true}],"parsedSize":86402,"gzipSize":11350,"inaccurateSizes":true}]},{"id":331,"label":"pathseg.js","path":"./dist/browser/pathseg.js","statSize":59678}],"parsedSize":86402,"gzipSize":11350},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.plugin.polygon-mask":true}}];
|
|
35
35
|
window.entrypoints = ["tsparticles.plugin.polygon-mask","tsparticles.plugin.polygon-mask.min"];
|
|
36
36
|
window.defaultSizes = "parsed";
|
|
37
37
|
</script>
|