@tsparticles/plugin-polygon-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 (57) hide show
  1. package/185.min.js +1 -0
  2. package/459.min.js +2 -0
  3. package/browser/Options/Classes/PolygonMask.js +9 -0
  4. package/browser/Options/Classes/PolygonMaskDraw.js +2 -0
  5. package/browser/Options/Classes/PolygonMaskDrawStroke.js +4 -0
  6. package/browser/Options/Classes/PolygonMaskInline.js +1 -0
  7. package/browser/Options/Classes/PolygonMaskLocalSvg.js +2 -0
  8. package/browser/Options/Classes/PolygonMaskMove.js +2 -0
  9. package/browser/PolygonMaskInstance.js +313 -308
  10. package/browser/PolygonMaskPlugin.js +6 -5
  11. package/browser/index.js +3 -3
  12. package/browser/pathseg.js +5 -15
  13. package/browser/utils.js +4 -2
  14. package/cjs/Options/Classes/PolygonMask.js +9 -0
  15. package/cjs/Options/Classes/PolygonMaskDraw.js +2 -0
  16. package/cjs/Options/Classes/PolygonMaskDrawStroke.js +4 -0
  17. package/cjs/Options/Classes/PolygonMaskInline.js +1 -0
  18. package/cjs/Options/Classes/PolygonMaskLocalSvg.js +2 -0
  19. package/cjs/Options/Classes/PolygonMaskMove.js +2 -0
  20. package/cjs/PolygonMaskInstance.js +313 -308
  21. package/cjs/PolygonMaskPlugin.js +6 -5
  22. package/cjs/index.js +3 -3
  23. package/cjs/pathseg.js +5 -15
  24. package/cjs/utils.js +4 -2
  25. package/dist_browser_PolygonMaskInstance_js.js +50 -0
  26. package/dist_browser_PolygonMaskPlugin_js.js +8 -38
  27. package/esm/Options/Classes/PolygonMask.js +9 -0
  28. package/esm/Options/Classes/PolygonMaskDraw.js +2 -0
  29. package/esm/Options/Classes/PolygonMaskDrawStroke.js +4 -0
  30. package/esm/Options/Classes/PolygonMaskInline.js +1 -0
  31. package/esm/Options/Classes/PolygonMaskLocalSvg.js +2 -0
  32. package/esm/Options/Classes/PolygonMaskMove.js +2 -0
  33. package/esm/PolygonMaskInstance.js +313 -308
  34. package/esm/PolygonMaskPlugin.js +6 -5
  35. package/esm/index.js +3 -3
  36. package/esm/pathseg.js +5 -15
  37. package/esm/utils.js +4 -2
  38. package/package.json +2 -2
  39. package/report.html +3 -3
  40. package/tsparticles.plugin.polygon-mask.js +15 -15
  41. package/tsparticles.plugin.polygon-mask.min.js +2 -2
  42. package/types/PolygonMaskPlugin.d.ts +4 -5
  43. package/types/index.d.ts +1 -1
  44. package/umd/Options/Classes/PolygonMask.js +9 -0
  45. package/umd/Options/Classes/PolygonMaskDraw.js +2 -0
  46. package/umd/Options/Classes/PolygonMaskDrawStroke.js +4 -0
  47. package/umd/Options/Classes/PolygonMaskInline.js +1 -0
  48. package/umd/Options/Classes/PolygonMaskLocalSvg.js +2 -0
  49. package/umd/Options/Classes/PolygonMaskMove.js +2 -0
  50. package/umd/PolygonMaskInstance.js +312 -307
  51. package/umd/PolygonMaskPlugin.js +41 -6
  52. package/umd/index.js +3 -3
  53. package/umd/pathseg.js +5 -15
  54. package/umd/utils.js +4 -2
  55. package/409.min.js +0 -2
  56. package/409.min.js.LICENSE.txt +0 -1
  57. package/tsparticles.plugin.polygon-mask.min.js.LICENSE.txt +0 -1
@@ -15,315 +15,18 @@
15
15
  const utils_js_1 = require("./utils.js");
16
16
  const PolygonMaskInlineArrangement_js_1 = require("./Enums/PolygonMaskInlineArrangement.js");
17
17
  const PolygonMaskType_js_1 = require("./Enums/PolygonMaskType.js");
18
- const noPolygonDataLoaded = `No polygon data loaded.`, noPolygonFound = `No polygon found, you need to specify SVG url in config.`, origin = {
19
- x: 0,
20
- y: 0,
21
- }, half = 0.5, double = 2;
18
+ const noPolygonDataLoaded = `No polygon data loaded.`, noPolygonFound = `No polygon found, you need to specify SVG url in config.`;
22
19
  class PolygonMaskInstance {
20
+ dimension;
21
+ offset;
22
+ paths;
23
+ raw;
24
+ redrawTimeout;
25
+ _container;
26
+ _engine;
27
+ _moveRadius;
28
+ _scale;
23
29
  constructor(container, engine) {
24
- this._checkInsidePolygon = position => {
25
- const container = this._container, options = container.actualOptions.polygon;
26
- if (!options?.enable || options.type === PolygonMaskType_js_1.PolygonMaskType.none || options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
27
- return true;
28
- }
29
- if (!this.raw) {
30
- throw new Error(noPolygonFound);
31
- }
32
- const canvasSize = container.canvas.size, x = position?.x ?? (0, engine_1.getRandom)() * canvasSize.width, y = position?.y ?? (0, engine_1.getRandom)() * canvasSize.height, indexOffset = 1;
33
- let inside = false;
34
- for (let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++) {
35
- const pi = this.raw[i], pj = this.raw[j];
36
- if (!pi || !pj) {
37
- continue;
38
- }
39
- const intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
40
- if (intersect) {
41
- inside = !inside;
42
- }
43
- }
44
- if (options.type === PolygonMaskType_js_1.PolygonMaskType.inside) {
45
- return inside;
46
- }
47
- else {
48
- return !inside;
49
- }
50
- };
51
- this._createPath2D = () => {
52
- const container = this._container, options = container.actualOptions.polygon;
53
- if (!options || !this.paths?.length) {
54
- return;
55
- }
56
- for (const path of this.paths) {
57
- const pathData = path.element.getAttribute("d");
58
- if (pathData) {
59
- const path2d = new Path2D(pathData), matrix = (0, engine_1.safeDocument)().createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(this._scale);
60
- finalPath.addPath(path2d, transform);
61
- path.path2d = finalPath;
62
- }
63
- else {
64
- delete path.path2d;
65
- }
66
- if (path.path2d ?? !this.raw) {
67
- continue;
68
- }
69
- path.path2d = new Path2D();
70
- const firstIndex = 0, firstPoint = this.raw[firstIndex];
71
- if (!firstPoint) {
72
- continue;
73
- }
74
- path.path2d.moveTo(firstPoint.x, firstPoint.y);
75
- this.raw.forEach((pos, i) => {
76
- if (i > firstIndex) {
77
- path.path2d?.lineTo(pos.x, pos.y);
78
- }
79
- });
80
- path.path2d.closePath();
81
- }
82
- };
83
- this._downloadSvgPath = async (svgUrl, force) => {
84
- const options = this._container.actualOptions.polygon;
85
- if (!options) {
86
- return;
87
- }
88
- const url = svgUrl ?? options.url, forceDownload = force ?? false;
89
- if (!url || (this.paths !== undefined && !forceDownload)) {
90
- return this.raw;
91
- }
92
- const req = await fetch(url);
93
- if (!req.ok) {
94
- throw new Error(`Error occurred during polygon mask download`);
95
- }
96
- return this._parseSvgPath(await req.text(), force);
97
- };
98
- this._drawPoints = () => {
99
- if (!this.raw) {
100
- return;
101
- }
102
- for (const item of this.raw) {
103
- void this._container.particles.addParticle({
104
- x: item.x,
105
- y: item.y,
106
- });
107
- }
108
- };
109
- this._getEquidistantPointByIndex = index => {
110
- const container = this._container, options = container.actualOptions, polygonMaskOptions = options.polygon;
111
- if (!polygonMaskOptions) {
112
- return;
113
- }
114
- if (!this.raw?.length || !this.paths?.length) {
115
- throw new Error(noPolygonDataLoaded);
116
- }
117
- let offset = 0, point;
118
- const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator), distance = totalLength / options.particles.number.value;
119
- for (const path of this.paths) {
120
- const pathDistance = distance * index - offset;
121
- if (pathDistance <= path.length) {
122
- point = path.element.getPointAtLength(pathDistance);
123
- break;
124
- }
125
- else {
126
- offset += path.length;
127
- }
128
- }
129
- const scale = this._scale;
130
- return {
131
- x: (point?.x ?? origin.x) * scale + (this.offset?.x ?? origin.x),
132
- y: (point?.y ?? origin.y) * scale + (this.offset?.y ?? origin.y),
133
- };
134
- };
135
- this._getPointByIndex = index => {
136
- if (!this.raw?.length) {
137
- throw new Error(noPolygonDataLoaded);
138
- }
139
- const coords = this.raw[index % this.raw.length];
140
- if (!coords) {
141
- return;
142
- }
143
- return {
144
- x: coords.x,
145
- y: coords.y,
146
- };
147
- };
148
- this._getRandomPoint = () => {
149
- if (!this.raw?.length) {
150
- throw new Error(noPolygonDataLoaded);
151
- }
152
- const coords = (0, engine_1.itemFromArray)(this.raw);
153
- if (!coords) {
154
- return;
155
- }
156
- return {
157
- x: coords.x,
158
- y: coords.y,
159
- };
160
- };
161
- this._getRandomPointByLength = () => {
162
- const container = this._container, options = container.actualOptions.polygon;
163
- if (!options) {
164
- return;
165
- }
166
- if (!this.raw?.length || !this.paths?.length) {
167
- throw new Error(noPolygonDataLoaded);
168
- }
169
- const path = (0, engine_1.itemFromArray)(this.paths);
170
- if (!path) {
171
- return;
172
- }
173
- const offset = 1, distance = Math.floor((0, engine_1.getRandom)() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
174
- return {
175
- x: point.x * scale + (this.offset?.x ?? origin.x),
176
- y: point.y * scale + (this.offset?.y ?? origin.y),
177
- };
178
- };
179
- this._initRawData = async (force) => {
180
- const options = this._container.actualOptions.polygon;
181
- if (!options) {
182
- return;
183
- }
184
- if (options.url) {
185
- this.raw = await this._downloadSvgPath(options.url, force);
186
- }
187
- else if (options.data) {
188
- const data = options.data;
189
- let svg;
190
- if ((0, engine_1.isString)(data)) {
191
- svg = data;
192
- }
193
- else {
194
- const getPath = (p) => `<path d="${p}" />`, path = (0, engine_1.isArray)(data.path) ? data.path.map(getPath).join("") : getPath(data.path);
195
- const namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
196
- svg = `<svg ${namespaces} width="${data.size.width.toString()}" height="${data.size.height.toString()}">${path}</svg>`;
197
- }
198
- this.raw = this._parseSvgPath(svg, force);
199
- }
200
- this._createPath2D();
201
- this._engine.dispatchEvent("polygonMaskLoaded", {
202
- container: this._container,
203
- });
204
- };
205
- this._parseSvgPath = (xml, force) => {
206
- const forceDownload = force ?? false;
207
- if (this.paths !== undefined && !forceDownload) {
208
- return this.raw;
209
- }
210
- const container = this._container, options = container.actualOptions.polygon;
211
- if (!options) {
212
- return;
213
- }
214
- const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
215
- if (!svg) {
216
- return;
217
- }
218
- let svgPaths = svg.getElementsByTagName("path");
219
- if (!svgPaths.length) {
220
- svgPaths = doc.getElementsByTagName("path");
221
- }
222
- this.paths = [];
223
- for (let i = 0; i < svgPaths.length; i++) {
224
- const path = svgPaths.item(i);
225
- if (path) {
226
- this.paths.push({
227
- element: path,
228
- length: path.getTotalLength(),
229
- });
230
- }
231
- }
232
- const scale = this._scale;
233
- this.dimension.width = parseFloat(svg.getAttribute("width") ?? "0") * scale;
234
- this.dimension.height = parseFloat(svg.getAttribute("height") ?? "0") * scale;
235
- const position = options.position ?? {
236
- x: 50,
237
- y: 50,
238
- }, canvasSize = container.canvas.size;
239
- this.offset = {
240
- x: (canvasSize.width * position.x) / engine_1.percentDenominator - this.dimension.width * half,
241
- y: (canvasSize.height * position.y) / engine_1.percentDenominator - this.dimension.height * half,
242
- };
243
- return (0, utils_js_1.parsePaths)(this.paths, scale, this.offset);
244
- };
245
- this._polygonBounce = (particle, _delta, direction) => {
246
- const options = this._container.actualOptions.polygon;
247
- if (!this.raw || !options?.enable || direction !== engine_1.OutModeDirection.top) {
248
- return false;
249
- }
250
- if (options.type === PolygonMaskType_js_1.PolygonMaskType.inside || options.type === PolygonMaskType_js_1.PolygonMaskType.outside) {
251
- let closest, dx, dy;
252
- const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
253
- for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
254
- const pi = this.raw[i], pj = this.raw[j];
255
- if (!pi || !pj) {
256
- continue;
257
- }
258
- closest = (0, utils_js_1.calcClosestPointOnSegment)(pi, pj, pos);
259
- const dist = (0, engine_1.getDistances)(pos, closest);
260
- [dx, dy] = [dist.dx, dist.dy];
261
- if (dist.distance < radius) {
262
- (0, utils_js_1.segmentBounce)(pi, pj, particle.velocity);
263
- return true;
264
- }
265
- }
266
- if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {
267
- const factor = { x: 1, y: 1 }, diameter = radius * double, inverse = -1;
268
- if (pos.x >= closest.x) {
269
- factor.x = -1;
270
- }
271
- if (pos.y >= closest.y) {
272
- factor.y = -1;
273
- }
274
- particle.position.x = closest.x + diameter * factor.x;
275
- particle.position.y = closest.y + diameter * factor.y;
276
- particle.velocity.mult(inverse);
277
- return true;
278
- }
279
- }
280
- else if (options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
281
- const dist = (0, engine_1.getDistance)(particle.initialPosition, particle.getPosition()), { velocity } = particle;
282
- if (dist > this._moveRadius) {
283
- velocity.x = velocity.y * half - velocity.x;
284
- velocity.y = velocity.x * half - velocity.y;
285
- return true;
286
- }
287
- }
288
- return false;
289
- };
290
- this._randomPoint = () => {
291
- const container = this._container, options = container.actualOptions.polygon;
292
- if (!options) {
293
- return;
294
- }
295
- let position;
296
- if (options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
297
- switch (options.inline.arrangement) {
298
- case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.randomPoint:
299
- position = this._getRandomPoint();
300
- break;
301
- case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.randomLength:
302
- position = this._getRandomPointByLength();
303
- break;
304
- case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.equidistant:
305
- position = this._getEquidistantPointByIndex(container.particles.count);
306
- break;
307
- case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.onePerPoint:
308
- case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.perPoint:
309
- default:
310
- position = this._getPointByIndex(container.particles.count);
311
- }
312
- }
313
- else {
314
- const canvasSize = container.canvas.size;
315
- position = {
316
- x: (0, engine_1.getRandom)() * canvasSize.width,
317
- y: (0, engine_1.getRandom)() * canvasSize.height,
318
- };
319
- }
320
- if (this._checkInsidePolygon(position)) {
321
- return position;
322
- }
323
- else {
324
- return this._randomPoint();
325
- }
326
- };
327
30
  this._container = container;
328
31
  this._engine = engine;
329
32
  this.dimension = {
@@ -415,6 +118,308 @@
415
118
  delete this.raw;
416
119
  delete this.paths;
417
120
  }
121
+ _checkInsidePolygon = position => {
122
+ const container = this._container, options = container.actualOptions.polygon;
123
+ if (!options?.enable || options.type === PolygonMaskType_js_1.PolygonMaskType.none || options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
124
+ return true;
125
+ }
126
+ if (!this.raw) {
127
+ throw new Error(noPolygonFound);
128
+ }
129
+ const canvasSize = container.canvas.size, x = position?.x ?? (0, engine_1.getRandom)() * canvasSize.width, y = position?.y ?? (0, engine_1.getRandom)() * canvasSize.height, indexOffset = 1;
130
+ let inside = false;
131
+ for (let i = 0, j = this.raw.length - indexOffset; i < this.raw.length; j = i++) {
132
+ const pi = this.raw[i], pj = this.raw[j];
133
+ if (!pi || !pj) {
134
+ continue;
135
+ }
136
+ const intersect = pi.y > y !== pj.y > y && x < ((pj.x - pi.x) * (y - pi.y)) / (pj.y - pi.y) + pi.x;
137
+ if (intersect) {
138
+ inside = !inside;
139
+ }
140
+ }
141
+ if (options.type === PolygonMaskType_js_1.PolygonMaskType.inside) {
142
+ return inside;
143
+ }
144
+ else {
145
+ return !inside;
146
+ }
147
+ };
148
+ _createPath2D = () => {
149
+ const container = this._container, options = container.actualOptions.polygon;
150
+ if (!options || !this.paths?.length) {
151
+ return;
152
+ }
153
+ for (const path of this.paths) {
154
+ const pathData = path.element.getAttribute("d");
155
+ if (pathData) {
156
+ const path2d = new Path2D(pathData), matrix = (0, engine_1.safeDocument)().createElementNS("http://www.w3.org/2000/svg", "svg").createSVGMatrix(), finalPath = new Path2D(), transform = matrix.scale(this._scale);
157
+ finalPath.addPath(path2d, transform);
158
+ path.path2d = finalPath;
159
+ }
160
+ else {
161
+ delete path.path2d;
162
+ }
163
+ if (path.path2d ?? !this.raw) {
164
+ continue;
165
+ }
166
+ path.path2d = new Path2D();
167
+ const firstIndex = 0, firstPoint = this.raw[firstIndex];
168
+ if (!firstPoint) {
169
+ continue;
170
+ }
171
+ path.path2d.moveTo(firstPoint.x, firstPoint.y);
172
+ this.raw.forEach((pos, i) => {
173
+ if (i > firstIndex) {
174
+ path.path2d?.lineTo(pos.x, pos.y);
175
+ }
176
+ });
177
+ path.path2d.closePath();
178
+ }
179
+ };
180
+ _downloadSvgPath = async (svgUrl, force) => {
181
+ const options = this._container.actualOptions.polygon;
182
+ if (!options) {
183
+ return;
184
+ }
185
+ const url = svgUrl ?? options.url, forceDownload = force ?? false;
186
+ if (!url || (this.paths !== undefined && !forceDownload)) {
187
+ return this.raw;
188
+ }
189
+ const req = await fetch(url);
190
+ if (!req.ok) {
191
+ throw new Error(`Error occurred during polygon mask download`);
192
+ }
193
+ return this._parseSvgPath(await req.text(), force);
194
+ };
195
+ _drawPoints = () => {
196
+ if (!this.raw) {
197
+ return;
198
+ }
199
+ for (const item of this.raw) {
200
+ this._container.particles.addParticle({
201
+ x: item.x,
202
+ y: item.y,
203
+ });
204
+ }
205
+ };
206
+ _getEquidistantPointByIndex = index => {
207
+ const container = this._container, options = container.actualOptions, polygonMaskOptions = options.polygon;
208
+ if (!polygonMaskOptions) {
209
+ return;
210
+ }
211
+ if (!this.raw?.length || !this.paths?.length) {
212
+ throw new Error(noPolygonDataLoaded);
213
+ }
214
+ let offset = 0, point;
215
+ const baseAccumulator = 0, totalLength = this.paths.reduce((tot, path) => tot + path.length, baseAccumulator), distance = totalLength / options.particles.number.value;
216
+ for (const path of this.paths) {
217
+ const pathDistance = distance * index - offset;
218
+ if (pathDistance <= path.length) {
219
+ point = path.element.getPointAtLength(pathDistance);
220
+ break;
221
+ }
222
+ else {
223
+ offset += path.length;
224
+ }
225
+ }
226
+ const scale = this._scale;
227
+ return {
228
+ x: (point?.x ?? engine_1.originPoint.x) * scale + (this.offset?.x ?? engine_1.originPoint.x),
229
+ y: (point?.y ?? engine_1.originPoint.y) * scale + (this.offset?.y ?? engine_1.originPoint.y),
230
+ };
231
+ };
232
+ _getPointByIndex = index => {
233
+ if (!this.raw?.length) {
234
+ throw new Error(noPolygonDataLoaded);
235
+ }
236
+ const coords = this.raw[index % this.raw.length];
237
+ if (!coords) {
238
+ return;
239
+ }
240
+ return {
241
+ x: coords.x,
242
+ y: coords.y,
243
+ };
244
+ };
245
+ _getRandomPoint = () => {
246
+ if (!this.raw?.length) {
247
+ throw new Error(noPolygonDataLoaded);
248
+ }
249
+ const coords = (0, engine_1.itemFromArray)(this.raw);
250
+ if (!coords) {
251
+ return;
252
+ }
253
+ return {
254
+ x: coords.x,
255
+ y: coords.y,
256
+ };
257
+ };
258
+ _getRandomPointByLength = () => {
259
+ const container = this._container, options = container.actualOptions.polygon;
260
+ if (!options) {
261
+ return;
262
+ }
263
+ if (!this.raw?.length || !this.paths?.length) {
264
+ throw new Error(noPolygonDataLoaded);
265
+ }
266
+ const path = (0, engine_1.itemFromArray)(this.paths);
267
+ if (!path) {
268
+ return;
269
+ }
270
+ const offset = 1, distance = Math.floor((0, engine_1.getRandom)() * path.length) + offset, point = path.element.getPointAtLength(distance), scale = this._scale;
271
+ return {
272
+ x: point.x * scale + (this.offset?.x ?? engine_1.originPoint.x),
273
+ y: point.y * scale + (this.offset?.y ?? engine_1.originPoint.y),
274
+ };
275
+ };
276
+ _initRawData = async (force) => {
277
+ const options = this._container.actualOptions.polygon;
278
+ if (!options) {
279
+ return;
280
+ }
281
+ if (options.url) {
282
+ this.raw = await this._downloadSvgPath(options.url, force);
283
+ }
284
+ else if (options.data) {
285
+ const data = options.data;
286
+ let svg;
287
+ if ((0, engine_1.isString)(data)) {
288
+ svg = data;
289
+ }
290
+ else {
291
+ const getPath = (p) => `<path d="${p}" />`, path = (0, engine_1.isArray)(data.path) ? data.path.map(getPath).join("") : getPath(data.path), namespaces = 'xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"';
292
+ svg = `<svg ${namespaces} width="${data.size.width.toString()}" height="${data.size.height.toString()}">${path}</svg>`;
293
+ }
294
+ this.raw = this._parseSvgPath(svg, force);
295
+ }
296
+ this._createPath2D();
297
+ this._engine.dispatchEvent("polygonMaskLoaded", {
298
+ container: this._container,
299
+ });
300
+ };
301
+ _parseSvgPath = (xml, force) => {
302
+ const forceDownload = force ?? false;
303
+ if (this.paths !== undefined && !forceDownload) {
304
+ return this.raw;
305
+ }
306
+ const container = this._container, options = container.actualOptions.polygon;
307
+ if (!options) {
308
+ return;
309
+ }
310
+ const parser = new DOMParser(), doc = parser.parseFromString(xml, "image/svg+xml"), firstIndex = 0, svg = doc.getElementsByTagName("svg")[firstIndex];
311
+ if (!svg) {
312
+ return;
313
+ }
314
+ let svgPaths = svg.getElementsByTagName("path");
315
+ if (!svgPaths.length) {
316
+ svgPaths = doc.getElementsByTagName("path");
317
+ }
318
+ this.paths = [];
319
+ for (let i = 0; i < svgPaths.length; i++) {
320
+ const path = svgPaths.item(i);
321
+ if (path) {
322
+ this.paths.push({
323
+ element: path,
324
+ length: path.getTotalLength(),
325
+ });
326
+ }
327
+ }
328
+ const scale = this._scale;
329
+ this.dimension.width = parseFloat(svg.getAttribute("width") ?? "0") * scale;
330
+ this.dimension.height = parseFloat(svg.getAttribute("height") ?? "0") * scale;
331
+ const position = options.position ?? {
332
+ x: 50,
333
+ y: 50,
334
+ }, canvasSize = container.canvas.size;
335
+ this.offset = {
336
+ x: (canvasSize.width * position.x) / engine_1.percentDenominator - this.dimension.width * engine_1.half,
337
+ y: (canvasSize.height * position.y) / engine_1.percentDenominator - this.dimension.height * engine_1.half,
338
+ };
339
+ return (0, utils_js_1.parsePaths)(this.paths, scale, this.offset);
340
+ };
341
+ _polygonBounce = (particle, _delta, direction) => {
342
+ const options = this._container.actualOptions.polygon;
343
+ if (!this.raw || !options?.enable || direction !== engine_1.OutModeDirection.top) {
344
+ return false;
345
+ }
346
+ if (options.type === PolygonMaskType_js_1.PolygonMaskType.inside || options.type === PolygonMaskType_js_1.PolygonMaskType.outside) {
347
+ let closest, dx, dy;
348
+ const pos = particle.getPosition(), radius = particle.getRadius(), offset = 1;
349
+ for (let i = 0, j = this.raw.length - offset; i < this.raw.length; j = i++) {
350
+ const pi = this.raw[i], pj = this.raw[j];
351
+ if (!pi || !pj) {
352
+ continue;
353
+ }
354
+ closest = (0, utils_js_1.calcClosestPointOnSegment)(pi, pj, pos);
355
+ const dist = (0, engine_1.getDistances)(pos, closest);
356
+ [dx, dy] = [dist.dx, dist.dy];
357
+ if (dist.distance < radius) {
358
+ (0, utils_js_1.segmentBounce)(pi, pj, particle.velocity);
359
+ return true;
360
+ }
361
+ }
362
+ if (closest && dx !== undefined && dy !== undefined && !this._checkInsidePolygon(pos)) {
363
+ const factor = { x: 1, y: 1 }, diameter = radius * engine_1.double, inverse = -1;
364
+ if (pos.x >= closest.x) {
365
+ factor.x = -1;
366
+ }
367
+ if (pos.y >= closest.y) {
368
+ factor.y = -1;
369
+ }
370
+ particle.position.x = closest.x + diameter * factor.x;
371
+ particle.position.y = closest.y + diameter * factor.y;
372
+ particle.velocity.mult(inverse);
373
+ return true;
374
+ }
375
+ }
376
+ else if (options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
377
+ const dist = (0, engine_1.getDistance)(particle.initialPosition, particle.getPosition()), { velocity } = particle;
378
+ if (dist > this._moveRadius) {
379
+ velocity.x = velocity.y * engine_1.half - velocity.x;
380
+ velocity.y = velocity.x * engine_1.half - velocity.y;
381
+ return true;
382
+ }
383
+ }
384
+ return false;
385
+ };
386
+ _randomPoint = () => {
387
+ const container = this._container, options = container.actualOptions.polygon;
388
+ if (!options) {
389
+ return;
390
+ }
391
+ let position;
392
+ if (options.type === PolygonMaskType_js_1.PolygonMaskType.inline) {
393
+ switch (options.inline.arrangement) {
394
+ case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.randomPoint:
395
+ position = this._getRandomPoint();
396
+ break;
397
+ case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.randomLength:
398
+ position = this._getRandomPointByLength();
399
+ break;
400
+ case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.equidistant:
401
+ position = this._getEquidistantPointByIndex(container.particles.count);
402
+ break;
403
+ case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.onePerPoint:
404
+ case PolygonMaskInlineArrangement_js_1.PolygonMaskInlineArrangement.perPoint:
405
+ default:
406
+ position = this._getPointByIndex(container.particles.count);
407
+ }
408
+ }
409
+ else {
410
+ const canvasSize = container.canvas.size;
411
+ position = {
412
+ x: (0, engine_1.getRandom)() * canvasSize.width,
413
+ y: (0, engine_1.getRandom)() * canvasSize.height,
414
+ };
415
+ }
416
+ if (this._checkInsidePolygon(position)) {
417
+ return position;
418
+ }
419
+ else {
420
+ return this._randomPoint();
421
+ }
422
+ };
418
423
  }
419
424
  exports.PolygonMaskInstance = PolygonMaskInstance;
420
425
  });