@tsparticles/plugin-emitters 3.0.0-beta.3 → 3.0.0-beta.5
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/EmitterInstance.js +133 -80
- package/browser/EmitterShapeBase.js +12 -0
- package/browser/Emitters.js +7 -6
- package/browser/Options/Classes/Emitter.js +3 -4
- package/browser/Options/Classes/EmitterShape.js +21 -0
- package/browser/Options/Classes/EmitterShapeReplace.js +17 -0
- package/browser/Options/Interfaces/IEmitterShape.js +1 -0
- package/browser/Options/Interfaces/IEmitterShapeReplace.js +1 -0
- package/browser/ShapeManager.js +8 -8
- package/browser/index.js +7 -8
- package/cjs/EmitterInstance.js +133 -80
- package/cjs/EmitterShapeBase.js +16 -0
- package/cjs/Emitters.js +7 -6
- package/cjs/IRandomPositionData.js +2 -0
- package/cjs/Options/Classes/Emitter.js +3 -4
- package/cjs/Options/Classes/EmitterShape.js +25 -0
- package/cjs/Options/Classes/EmitterShapeReplace.js +21 -0
- package/cjs/Options/Interfaces/IEmitterShape.js +2 -0
- package/cjs/Options/Interfaces/IEmitterShapeReplace.js +2 -0
- package/cjs/ShapeManager.js +8 -8
- package/cjs/index.js +7 -8
- package/esm/EmitterInstance.js +133 -80
- package/esm/EmitterShapeBase.js +12 -0
- package/esm/Emitters.js +7 -6
- package/esm/IEmitterShapeGenerator.js +1 -0
- package/esm/IRandomPositionData.js +1 -0
- package/esm/Options/Classes/Emitter.js +3 -4
- package/esm/Options/Classes/EmitterShape.js +21 -0
- package/esm/Options/Classes/EmitterShapeReplace.js +17 -0
- package/esm/Options/Interfaces/IEmitterShape.js +1 -0
- package/esm/Options/Interfaces/IEmitterShapeReplace.js +1 -0
- package/esm/ShapeManager.js +8 -8
- package/esm/index.js +7 -8
- package/package.json +3 -3
- package/report.html +4 -22
- package/tsparticles.plugin.emitters.js +208 -176
- package/tsparticles.plugin.emitters.min.js +1 -1
- package/tsparticles.plugin.emitters.min.js.LICENSE.txt +1 -1
- package/types/EmitterContainer.d.ts +1 -1
- package/types/EmitterInstance.d.ts +11 -9
- package/types/EmitterShapeBase.d.ts +13 -0
- package/types/Emitters.d.ts +2 -2
- package/types/EmittersEngine.d.ts +2 -2
- package/types/IEmitterShape.d.ts +4 -1
- package/types/IEmitterShapeGenerator.d.ts +5 -0
- package/types/IRandomPositionData.d.ts +6 -0
- package/types/Options/Classes/Emitter.d.ts +2 -2
- package/types/Options/Classes/EmitterShape.d.ts +10 -0
- package/types/Options/Classes/EmitterShapeReplace.d.ts +8 -0
- package/types/Options/Interfaces/IEmitter.d.ts +2 -2
- package/types/Options/Interfaces/IEmitterShape.d.ts +6 -0
- package/types/Options/Interfaces/IEmitterShapeReplace.d.ts +4 -0
- package/types/ShapeManager.d.ts +4 -4
- package/types/index.d.ts +4 -1
- package/umd/EmitterInstance.js +133 -80
- package/umd/EmitterShapeBase.js +26 -0
- package/umd/Emitters.js +7 -6
- package/umd/IRandomPositionData.js +12 -0
- package/umd/Options/Classes/Emitter.js +4 -5
- package/umd/Options/Classes/EmitterShape.js +35 -0
- package/umd/Options/Classes/EmitterShapeReplace.js +31 -0
- package/umd/Options/Interfaces/IEmitterShape.js +12 -0
- package/umd/Options/Interfaces/IEmitterShapeReplace.js +12 -0
- package/umd/ShapeManager.js +8 -8
- package/umd/index.js +8 -9
- package/browser/Shapes/Circle/CircleShape.js +0 -24
- package/browser/Shapes/Square/SquareShape.js +0 -40
- package/cjs/Shapes/Circle/CircleShape.js +0 -28
- package/cjs/Shapes/Square/SquareShape.js +0 -44
- package/esm/Shapes/Circle/CircleShape.js +0 -24
- package/esm/Shapes/Square/SquareShape.js +0 -40
- package/types/Enums/EmitterShapeType.d.ts +0 -6
- package/types/Shapes/Circle/CircleShape.d.ts +0 -5
- package/types/Shapes/Square/SquareShape.d.ts +0 -5
- package/umd/Shapes/Circle/CircleShape.js +0 -38
- package/umd/Shapes/Square/SquareShape.js +0 -54
- /package/browser/{Enums/EmitterShapeType.js → IEmitterShapeGenerator.js} +0 -0
- /package/{esm/Enums/EmitterShapeType.js → browser/IRandomPositionData.js} +0 -0
- /package/cjs/{Enums/EmitterShapeType.js → IEmitterShapeGenerator.js} +0 -0
- /package/umd/{Enums/EmitterShapeType.js → IEmitterShapeGenerator.js} +0 -0
|
@@ -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.0.0-beta.
|
|
7
|
+
* v3.0.0-beta.5
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -91,40 +91,12 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
91
91
|
|
|
92
92
|
// EXPORTS
|
|
93
93
|
__webpack_require__.d(__webpack_exports__, {
|
|
94
|
+
EmitterShapeBase: () => (/* reexport */ EmitterShapeBase),
|
|
94
95
|
loadEmittersPlugin: () => (/* binding */ loadEmittersPlugin)
|
|
95
96
|
});
|
|
96
97
|
|
|
97
98
|
// EXTERNAL MODULE: external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"}
|
|
98
99
|
var engine_root_window_ = __webpack_require__(533);
|
|
99
|
-
;// CONCATENATED MODULE: ./dist/browser/Shapes/Circle/CircleShape.js
|
|
100
|
-
|
|
101
|
-
class CircleShape {
|
|
102
|
-
randomPosition(position, size, fill) {
|
|
103
|
-
const generateTheta = (x, y) => {
|
|
104
|
-
const u = (0,engine_root_window_.getRandom)() / 4.0,
|
|
105
|
-
theta = Math.atan(y / x * Math.tan(2 * Math.PI * u)),
|
|
106
|
-
v = (0,engine_root_window_.getRandom)();
|
|
107
|
-
if (v < 0.25) {
|
|
108
|
-
return theta;
|
|
109
|
-
} else if (v < 0.5) {
|
|
110
|
-
return Math.PI - theta;
|
|
111
|
-
} else if (v < 0.75) {
|
|
112
|
-
return Math.PI + theta;
|
|
113
|
-
} else {
|
|
114
|
-
return -theta;
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
radius = (x, y, theta) => x * y / Math.sqrt((y * Math.cos(theta)) ** 2 + (x * Math.sin(theta)) ** 2),
|
|
118
|
-
[a, b] = [size.width / 2, size.height / 2],
|
|
119
|
-
randomTheta = generateTheta(a, b),
|
|
120
|
-
maxRadius = radius(a, b, randomTheta),
|
|
121
|
-
randomRadius = fill ? maxRadius * Math.sqrt((0,engine_root_window_.getRandom)()) : maxRadius;
|
|
122
|
-
return {
|
|
123
|
-
x: position.x + randomRadius * Math.cos(randomTheta),
|
|
124
|
-
y: position.y + randomRadius * Math.sin(randomTheta)
|
|
125
|
-
};
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
100
|
;// CONCATENATED MODULE: ./dist/browser/Options/Classes/EmitterLife.js
|
|
129
101
|
|
|
130
102
|
class EmitterLife {
|
|
@@ -168,6 +140,46 @@ class EmitterRate {
|
|
|
168
140
|
}
|
|
169
141
|
}
|
|
170
142
|
}
|
|
143
|
+
;// CONCATENATED MODULE: ./dist/browser/Options/Classes/EmitterShapeReplace.js
|
|
144
|
+
class EmitterShapeReplace {
|
|
145
|
+
constructor() {
|
|
146
|
+
this.color = false;
|
|
147
|
+
this.opacity = false;
|
|
148
|
+
}
|
|
149
|
+
load(data) {
|
|
150
|
+
if (!data) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
if (data.color !== undefined) {
|
|
154
|
+
this.color = data.color;
|
|
155
|
+
}
|
|
156
|
+
if (data.opacity !== undefined) {
|
|
157
|
+
this.opacity = data.opacity;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
;// CONCATENATED MODULE: ./dist/browser/Options/Classes/EmitterShape.js
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
class EmitterShape {
|
|
165
|
+
constructor() {
|
|
166
|
+
this.options = {};
|
|
167
|
+
this.replace = new EmitterShapeReplace();
|
|
168
|
+
this.type = "square";
|
|
169
|
+
}
|
|
170
|
+
load(data) {
|
|
171
|
+
if (!data) {
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
if (data.options !== undefined) {
|
|
175
|
+
this.options = (0,engine_root_window_.deepExtend)({}, data.options ?? {});
|
|
176
|
+
}
|
|
177
|
+
this.replace.load(data.replace);
|
|
178
|
+
if (data.type !== undefined) {
|
|
179
|
+
this.type = data.type;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
171
183
|
;// CONCATENATED MODULE: ./dist/browser/Options/Classes/EmitterSize.js
|
|
172
184
|
class EmitterSize {
|
|
173
185
|
constructor() {
|
|
@@ -195,13 +207,14 @@ class EmitterSize {
|
|
|
195
207
|
|
|
196
208
|
|
|
197
209
|
|
|
210
|
+
|
|
198
211
|
class Emitter {
|
|
199
212
|
constructor() {
|
|
200
213
|
this.autoPlay = true;
|
|
201
214
|
this.fill = true;
|
|
202
215
|
this.life = new EmitterLife();
|
|
203
216
|
this.rate = new EmitterRate();
|
|
204
|
-
this.shape =
|
|
217
|
+
this.shape = new EmitterShape();
|
|
205
218
|
this.startCount = 0;
|
|
206
219
|
}
|
|
207
220
|
load(data) {
|
|
@@ -230,9 +243,7 @@ class Emitter {
|
|
|
230
243
|
return (0,engine_root_window_.deepExtend)({}, particles);
|
|
231
244
|
});
|
|
232
245
|
this.rate.load(data.rate);
|
|
233
|
-
|
|
234
|
-
this.shape = data.shape;
|
|
235
|
-
}
|
|
246
|
+
this.shape.load(data.shape);
|
|
236
247
|
if (data.position !== undefined) {
|
|
237
248
|
this.position = {};
|
|
238
249
|
if (data.position.x !== undefined) {
|
|
@@ -257,17 +268,24 @@ class Emitter {
|
|
|
257
268
|
|
|
258
269
|
|
|
259
270
|
|
|
271
|
+
function setParticlesOptionsColor(particlesOptions, color) {
|
|
272
|
+
if (particlesOptions.color) {
|
|
273
|
+
particlesOptions.color.value = color;
|
|
274
|
+
} else {
|
|
275
|
+
particlesOptions.color = {
|
|
276
|
+
value: color
|
|
277
|
+
};
|
|
278
|
+
}
|
|
279
|
+
}
|
|
260
280
|
class EmitterInstance {
|
|
261
281
|
constructor(engine, emitters, container, options, position) {
|
|
262
282
|
this.emitters = emitters;
|
|
263
283
|
this.container = container;
|
|
264
|
-
this._calcPosition = () => {
|
|
265
|
-
return (0,engine_root_window_.calcPositionOrRandomFromSizeRanged)({
|
|
266
|
-
size: this.container.canvas.size,
|
|
267
|
-
position: this.options.position
|
|
268
|
-
});
|
|
269
|
-
};
|
|
270
284
|
this._destroy = () => {
|
|
285
|
+
this._mutationObserver?.disconnect();
|
|
286
|
+
this._mutationObserver = undefined;
|
|
287
|
+
this._resizeObserver?.disconnect();
|
|
288
|
+
this._resizeObserver = undefined;
|
|
271
289
|
this.emitters.removeEmitter(this);
|
|
272
290
|
this._engine.dispatchEvent("emitterDestroyed", {
|
|
273
291
|
container: this.container,
|
|
@@ -276,41 +294,6 @@ class EmitterInstance {
|
|
|
276
294
|
}
|
|
277
295
|
});
|
|
278
296
|
};
|
|
279
|
-
this._emit = () => {
|
|
280
|
-
if (this._paused) {
|
|
281
|
-
return;
|
|
282
|
-
}
|
|
283
|
-
const quantity = (0,engine_root_window_.getRangeValue)(this.options.rate.quantity);
|
|
284
|
-
this._emitParticles(quantity);
|
|
285
|
-
};
|
|
286
|
-
this._emitParticles = quantity => {
|
|
287
|
-
const position = this.getPosition(),
|
|
288
|
-
size = this.getSize(),
|
|
289
|
-
singleParticlesOptions = (0,engine_root_window_.itemFromSingleOrMultiple)(this._particlesOptions);
|
|
290
|
-
for (let i = 0; i < quantity; i++) {
|
|
291
|
-
const particlesOptions = (0,engine_root_window_.deepExtend)({}, singleParticlesOptions);
|
|
292
|
-
if (this.spawnColor) {
|
|
293
|
-
const hslAnimation = this.options.spawnColor?.animation;
|
|
294
|
-
if (hslAnimation) {
|
|
295
|
-
this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
|
|
296
|
-
this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
|
|
297
|
-
this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
|
|
298
|
-
}
|
|
299
|
-
if (!particlesOptions.color) {
|
|
300
|
-
particlesOptions.color = {
|
|
301
|
-
value: this.spawnColor
|
|
302
|
-
};
|
|
303
|
-
} else {
|
|
304
|
-
particlesOptions.color.value = this.spawnColor;
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
if (!position) {
|
|
308
|
-
return;
|
|
309
|
-
}
|
|
310
|
-
const pPosition = this._shape?.randomPosition(position, size, this.fill) ?? position;
|
|
311
|
-
this.container.particles.addParticle(pPosition, particlesOptions);
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
297
|
this._prepareToDie = () => {
|
|
315
298
|
if (this._paused) {
|
|
316
299
|
return;
|
|
@@ -345,7 +328,6 @@ class EmitterInstance {
|
|
|
345
328
|
this._spawnDelay = (0,engine_root_window_.getRangeValue)(this.options.life.delay ?? 0) * 1000 / this.container.retina.reduceFactor;
|
|
346
329
|
this.position = this._initialPosition ?? this._calcPosition();
|
|
347
330
|
this.name = this.options.name;
|
|
348
|
-
this._shape = this._engine.emitterShapeManager?.getShape(this.options.shape);
|
|
349
331
|
this.fill = this.options.fill;
|
|
350
332
|
this._firstSpawn = !this.options.life.wait;
|
|
351
333
|
this._startParticlesAdded = false;
|
|
@@ -358,17 +340,31 @@ class EmitterInstance {
|
|
|
358
340
|
}
|
|
359
341
|
this._paused = !this.options.autoPlay;
|
|
360
342
|
this._particlesOptions = particlesOptions;
|
|
361
|
-
this.
|
|
362
|
-
|
|
363
|
-
size.load({
|
|
364
|
-
height: 0,
|
|
365
|
-
mode: "percent",
|
|
366
|
-
width: 0
|
|
367
|
-
});
|
|
368
|
-
return size;
|
|
369
|
-
})();
|
|
343
|
+
this._size = this._calcSize();
|
|
344
|
+
this.size = (0,engine_root_window_.getSize)(this._size, this.container.canvas.size);
|
|
370
345
|
this._lifeCount = this.options.life.count ?? -1;
|
|
371
346
|
this._immortal = this._lifeCount <= 0;
|
|
347
|
+
if (this.options.domId) {
|
|
348
|
+
const element = document.getElementById(this.options.domId);
|
|
349
|
+
if (element) {
|
|
350
|
+
this._mutationObserver = new MutationObserver(() => {
|
|
351
|
+
this.resize();
|
|
352
|
+
});
|
|
353
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
354
|
+
this.resize();
|
|
355
|
+
});
|
|
356
|
+
this._mutationObserver.observe(element, {
|
|
357
|
+
attributes: true,
|
|
358
|
+
attributeFilter: ["style", "width", "height"]
|
|
359
|
+
});
|
|
360
|
+
this._resizeObserver.observe(element);
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
const shapeOptions = this.options.shape,
|
|
364
|
+
shapeGenerator = this._engine.emitterShapeManager?.getShapeGenerator(shapeOptions.type);
|
|
365
|
+
if (shapeGenerator) {
|
|
366
|
+
this._shape = shapeGenerator.generate(this.position, this.size, this.fill, shapeOptions.options);
|
|
367
|
+
}
|
|
372
368
|
this._engine.dispatchEvent("emitterCreated", {
|
|
373
369
|
container,
|
|
374
370
|
data: {
|
|
@@ -385,33 +381,8 @@ class EmitterInstance {
|
|
|
385
381
|
this._paused = false;
|
|
386
382
|
this.play();
|
|
387
383
|
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
const container = this.container,
|
|
391
|
-
element = document.getElementById(this.options.domId);
|
|
392
|
-
if (element) {
|
|
393
|
-
const elRect = element.getBoundingClientRect();
|
|
394
|
-
return {
|
|
395
|
-
x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
|
|
396
|
-
y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio
|
|
397
|
-
};
|
|
398
|
-
}
|
|
399
|
-
}
|
|
400
|
-
return this.position;
|
|
401
|
-
}
|
|
402
|
-
getSize() {
|
|
403
|
-
const container = this.container;
|
|
404
|
-
if (this.options.domId) {
|
|
405
|
-
const element = document.getElementById(this.options.domId);
|
|
406
|
-
if (element) {
|
|
407
|
-
const elRect = element.getBoundingClientRect();
|
|
408
|
-
return {
|
|
409
|
-
width: elRect.width * container.retina.pixelRatio,
|
|
410
|
-
height: elRect.height * container.retina.pixelRatio
|
|
411
|
-
};
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
return (0,engine_root_window_.getSize)(this.size, container.canvas.size);
|
|
384
|
+
async init() {
|
|
385
|
+
await this._shape?.init();
|
|
415
386
|
}
|
|
416
387
|
pause() {
|
|
417
388
|
if (this._paused) {
|
|
@@ -437,8 +408,11 @@ class EmitterInstance {
|
|
|
437
408
|
resize() {
|
|
438
409
|
const initialPosition = this._initialPosition;
|
|
439
410
|
this.position = initialPosition && (0,engine_root_window_.isPointInside)(initialPosition, this.container.canvas.size, engine_root_window_.Vector.origin) ? initialPosition : this._calcPosition();
|
|
411
|
+
this._size = this._calcSize();
|
|
412
|
+
this.size = (0,engine_root_window_.getSize)(this._size, this.container.canvas.size);
|
|
413
|
+
this._shape?.resize(this.position, this.size);
|
|
440
414
|
}
|
|
441
|
-
update(delta) {
|
|
415
|
+
async update(delta) {
|
|
442
416
|
if (this._paused) {
|
|
443
417
|
return;
|
|
444
418
|
}
|
|
@@ -449,7 +423,7 @@ class EmitterInstance {
|
|
|
449
423
|
}
|
|
450
424
|
if (!this._startParticlesAdded) {
|
|
451
425
|
this._startParticlesAdded = true;
|
|
452
|
-
this._emitParticles(this.options.startCount);
|
|
426
|
+
await this._emitParticles(this.options.startCount);
|
|
453
427
|
}
|
|
454
428
|
if (this._duration !== undefined) {
|
|
455
429
|
this._currentDuration += delta.value;
|
|
@@ -490,6 +464,94 @@ class EmitterInstance {
|
|
|
490
464
|
}
|
|
491
465
|
}
|
|
492
466
|
}
|
|
467
|
+
_calcPosition() {
|
|
468
|
+
if (this.options.domId) {
|
|
469
|
+
const container = this.container,
|
|
470
|
+
element = document.getElementById(this.options.domId);
|
|
471
|
+
if (element) {
|
|
472
|
+
const elRect = element.getBoundingClientRect();
|
|
473
|
+
return {
|
|
474
|
+
x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
|
|
475
|
+
y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio
|
|
476
|
+
};
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
return (0,engine_root_window_.calcPositionOrRandomFromSizeRanged)({
|
|
480
|
+
size: this.container.canvas.size,
|
|
481
|
+
position: this.options.position
|
|
482
|
+
});
|
|
483
|
+
}
|
|
484
|
+
_calcSize() {
|
|
485
|
+
const container = this.container;
|
|
486
|
+
if (this.options.domId) {
|
|
487
|
+
const element = document.getElementById(this.options.domId);
|
|
488
|
+
if (element) {
|
|
489
|
+
const elRect = element.getBoundingClientRect();
|
|
490
|
+
return {
|
|
491
|
+
width: elRect.width * container.retina.pixelRatio,
|
|
492
|
+
height: elRect.height * container.retina.pixelRatio,
|
|
493
|
+
mode: "precise"
|
|
494
|
+
};
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
return this.options.size ?? (() => {
|
|
498
|
+
const size = new EmitterSize();
|
|
499
|
+
size.load({
|
|
500
|
+
height: 0,
|
|
501
|
+
mode: "percent",
|
|
502
|
+
width: 0
|
|
503
|
+
});
|
|
504
|
+
return size;
|
|
505
|
+
})();
|
|
506
|
+
}
|
|
507
|
+
async _emit() {
|
|
508
|
+
if (this._paused) {
|
|
509
|
+
return;
|
|
510
|
+
}
|
|
511
|
+
const quantity = (0,engine_root_window_.getRangeValue)(this.options.rate.quantity);
|
|
512
|
+
await this._emitParticles(quantity);
|
|
513
|
+
}
|
|
514
|
+
async _emitParticles(quantity) {
|
|
515
|
+
const singleParticlesOptions = (0,engine_root_window_.itemFromSingleOrMultiple)(this._particlesOptions);
|
|
516
|
+
for (let i = 0; i < quantity; i++) {
|
|
517
|
+
const particlesOptions = (0,engine_root_window_.deepExtend)({}, singleParticlesOptions);
|
|
518
|
+
if (this.spawnColor) {
|
|
519
|
+
const hslAnimation = this.options.spawnColor?.animation;
|
|
520
|
+
if (hslAnimation) {
|
|
521
|
+
this.spawnColor.h = this._setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
|
|
522
|
+
this.spawnColor.s = this._setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
|
|
523
|
+
this.spawnColor.l = this._setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
|
|
524
|
+
}
|
|
525
|
+
setParticlesOptionsColor(particlesOptions, this.spawnColor);
|
|
526
|
+
}
|
|
527
|
+
const shapeOptions = this.options.shape;
|
|
528
|
+
let position = this.position;
|
|
529
|
+
if (this._shape) {
|
|
530
|
+
const shapePosData = await this._shape.randomPosition();
|
|
531
|
+
if (shapePosData) {
|
|
532
|
+
position = shapePosData.position;
|
|
533
|
+
const replaceData = shapeOptions.replace;
|
|
534
|
+
if (replaceData.color && shapePosData.color) {
|
|
535
|
+
setParticlesOptionsColor(particlesOptions, shapePosData.color);
|
|
536
|
+
}
|
|
537
|
+
if (replaceData.opacity) {
|
|
538
|
+
if (particlesOptions.opacity) {
|
|
539
|
+
particlesOptions.opacity.value = shapePosData.opacity;
|
|
540
|
+
} else {
|
|
541
|
+
particlesOptions.opacity = {
|
|
542
|
+
value: shapePosData.opacity
|
|
543
|
+
};
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
} else {
|
|
547
|
+
position = null;
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
if (position) {
|
|
551
|
+
this.container.particles.addParticle(position, particlesOptions);
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
}
|
|
493
555
|
}
|
|
494
556
|
;// CONCATENATED MODULE: ./dist/browser/Emitters.js
|
|
495
557
|
|
|
@@ -509,7 +571,7 @@ class Emitters {
|
|
|
509
571
|
value: []
|
|
510
572
|
};
|
|
511
573
|
container.getEmitter = idxOrName => idxOrName === undefined || (0,engine_root_window_.isNumber)(idxOrName) ? this.array[idxOrName || 0] : this.array.find(t => t.name === idxOrName);
|
|
512
|
-
container.addEmitter = (options, position) => this.addEmitter(options, position);
|
|
574
|
+
container.addEmitter = async (options, position) => this.addEmitter(options, position);
|
|
513
575
|
container.removeEmitter = idxOrName => {
|
|
514
576
|
const emitter = container.getEmitter(idxOrName);
|
|
515
577
|
if (emitter) {
|
|
@@ -529,10 +591,11 @@ class Emitters {
|
|
|
529
591
|
}
|
|
530
592
|
};
|
|
531
593
|
}
|
|
532
|
-
addEmitter(options, position) {
|
|
594
|
+
async addEmitter(options, position) {
|
|
533
595
|
const emitterOptions = new Emitter();
|
|
534
596
|
emitterOptions.load(options);
|
|
535
597
|
const emitter = new EmitterInstance(this._engine, this, this.container, emitterOptions, position);
|
|
598
|
+
await emitter.init();
|
|
536
599
|
this.array.push(emitter);
|
|
537
600
|
return emitter;
|
|
538
601
|
}
|
|
@@ -576,10 +639,10 @@ class Emitters {
|
|
|
576
639
|
}
|
|
577
640
|
if ((0,engine_root_window_.isArray)(this.emitters)) {
|
|
578
641
|
for (const emitterOptions of this.emitters) {
|
|
579
|
-
this.addEmitter(emitterOptions);
|
|
642
|
+
await this.addEmitter(emitterOptions);
|
|
580
643
|
}
|
|
581
644
|
} else {
|
|
582
|
-
this.addEmitter(this.emitters);
|
|
645
|
+
await this.addEmitter(this.emitters);
|
|
583
646
|
}
|
|
584
647
|
}
|
|
585
648
|
pause() {
|
|
@@ -606,71 +669,41 @@ class Emitters {
|
|
|
606
669
|
stop() {
|
|
607
670
|
this.array = [];
|
|
608
671
|
}
|
|
609
|
-
update(delta) {
|
|
672
|
+
async update(delta) {
|
|
610
673
|
for (const emitter of this.array) {
|
|
611
|
-
emitter.update(delta);
|
|
674
|
+
await emitter.update(delta);
|
|
612
675
|
}
|
|
613
676
|
}
|
|
614
677
|
}
|
|
615
678
|
;// CONCATENATED MODULE: ./dist/browser/ShapeManager.js
|
|
616
|
-
const
|
|
679
|
+
const shapeGeneratorss = new Map();
|
|
617
680
|
class ShapeManager {
|
|
618
681
|
constructor(engine) {
|
|
619
682
|
this._engine = engine;
|
|
620
683
|
}
|
|
621
|
-
|
|
622
|
-
if (!this.
|
|
623
|
-
|
|
684
|
+
addShapeGenerator(name, generator) {
|
|
685
|
+
if (!this.getShapeGenerator(name)) {
|
|
686
|
+
shapeGeneratorss.set(name, generator);
|
|
624
687
|
}
|
|
625
688
|
}
|
|
626
|
-
|
|
627
|
-
return
|
|
689
|
+
getShapeGenerator(name) {
|
|
690
|
+
return shapeGeneratorss.get(name);
|
|
628
691
|
}
|
|
629
|
-
|
|
630
|
-
return
|
|
692
|
+
getSupportedShapeGenerators() {
|
|
693
|
+
return shapeGeneratorss.keys();
|
|
631
694
|
}
|
|
632
695
|
}
|
|
633
|
-
;// CONCATENATED MODULE: ./dist/browser/
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
};
|
|
645
|
-
} else {
|
|
646
|
-
const halfW = size.width / 2,
|
|
647
|
-
halfH = size.height / 2,
|
|
648
|
-
side = Math.floor((0,engine_root_window_.getRandom)() * 4),
|
|
649
|
-
v = ((0,engine_root_window_.getRandom)() - 0.5) * 2;
|
|
650
|
-
switch (side) {
|
|
651
|
-
case 0:
|
|
652
|
-
return {
|
|
653
|
-
x: position.x + v * halfW,
|
|
654
|
-
y: position.y - halfH
|
|
655
|
-
};
|
|
656
|
-
case 1:
|
|
657
|
-
return {
|
|
658
|
-
x: position.x - halfW,
|
|
659
|
-
y: position.y + v * halfH
|
|
660
|
-
};
|
|
661
|
-
case 2:
|
|
662
|
-
return {
|
|
663
|
-
x: position.x + v * halfW,
|
|
664
|
-
y: position.y + halfH
|
|
665
|
-
};
|
|
666
|
-
case 3:
|
|
667
|
-
default:
|
|
668
|
-
return {
|
|
669
|
-
x: position.x + halfW,
|
|
670
|
-
y: position.y + v * halfH
|
|
671
|
-
};
|
|
672
|
-
}
|
|
673
|
-
}
|
|
696
|
+
;// CONCATENATED MODULE: ./dist/browser/EmitterShapeBase.js
|
|
697
|
+
class EmitterShapeBase {
|
|
698
|
+
constructor(position, size, fill, options) {
|
|
699
|
+
this.position = position;
|
|
700
|
+
this.size = size;
|
|
701
|
+
this.fill = fill;
|
|
702
|
+
this.options = options;
|
|
703
|
+
}
|
|
704
|
+
resize(position, size) {
|
|
705
|
+
this.position = position;
|
|
706
|
+
this.size = size;
|
|
674
707
|
}
|
|
675
708
|
}
|
|
676
709
|
;// CONCATENATED MODULE: ./dist/browser/index.js
|
|
@@ -678,8 +711,6 @@ class SquareShape {
|
|
|
678
711
|
|
|
679
712
|
|
|
680
713
|
|
|
681
|
-
|
|
682
|
-
|
|
683
714
|
class EmittersPlugin {
|
|
684
715
|
constructor(engine) {
|
|
685
716
|
this._engine = engine;
|
|
@@ -764,20 +795,21 @@ async function loadEmittersPlugin(engine, refresh = true) {
|
|
|
764
795
|
if (!engine.emitterShapeManager) {
|
|
765
796
|
engine.emitterShapeManager = new ShapeManager(engine);
|
|
766
797
|
}
|
|
767
|
-
if (!engine.
|
|
768
|
-
engine.
|
|
769
|
-
engine.emitterShapeManager?.
|
|
798
|
+
if (!engine.addEmitterShapeGenerator) {
|
|
799
|
+
engine.addEmitterShapeGenerator = (name, generator) => {
|
|
800
|
+
engine.emitterShapeManager?.addShapeGenerator(name, generator);
|
|
770
801
|
};
|
|
771
802
|
}
|
|
772
803
|
const plugin = new EmittersPlugin(engine);
|
|
773
804
|
await engine.addPlugin(plugin, refresh);
|
|
774
|
-
engine.addEmitterShape("circle", new CircleShape());
|
|
775
|
-
engine.addEmitterShape("square", new SquareShape());
|
|
776
805
|
}
|
|
777
806
|
|
|
778
807
|
|
|
779
808
|
|
|
780
809
|
|
|
810
|
+
|
|
811
|
+
|
|
812
|
+
|
|
781
813
|
})();
|
|
782
814
|
|
|
783
815
|
/******/ return __webpack_exports__;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! For license information please see tsparticles.plugin.emitters.min.js.LICENSE.txt */
|
|
2
|
-
!function(t,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],i);else{var e="object"==typeof exports?i(require("@tsparticles/engine")):i(t.window);for(var s in e)("object"==typeof exports?exports:t)[s]=e[s]}}(this,(t=>(()=>{"use strict";var i={533:i=>{i.exports=t}},e={};function s(t){var n=e[t];if(void 0!==n)return n.exports;var o=e[t]={exports:{}};return i[t](o,o.exports,s),o.exports}s.d=(t,i)=>{for(var e in i)s.o(i,e)&&!s.o(t,e)&&Object.defineProperty(t,e,{enumerable:!0,get:i[e]})},s.o=(t,i)=>Object.prototype.hasOwnProperty.call(t,i),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{s.r(n),s.d(n,{loadEmittersPlugin:()=>y});var t=s(533);class i{randomPosition(i,e,s){const[n,o]=[e.width/2,e.height/2],a=((i,e)=>{const s=(0,t.getRandom)()/4,n=Math.atan(e/i*Math.tan(2*Math.PI*s)),o=(0,t.getRandom)();return o<.25?n:o<.5?Math.PI-n:o<.75?Math.PI+n:-n})(n,o),r=(c=a,(l=n)*(d=o)/Math.sqrt((d*Math.cos(c))**2+(l*Math.sin(c))**2)),h=s?r*Math.sqrt((0,t.getRandom)()):r;var l,d,c;return{x:i.x+h*Math.cos(a),y:i.y+h*Math.sin(a)}}}class e{constructor(){this.wait=!1}load(i){i&&(void 0!==i.count&&(this.count=i.count),void 0!==i.delay&&(this.delay=(0,t.setRangeValue)(i.delay)),void 0!==i.duration&&(this.duration=(0,t.setRangeValue)(i.duration)),void 0!==i.wait&&(this.wait=i.wait))}}class o{constructor(){this.quantity=1,this.delay=.1}load(i){void 0!==i&&(void 0!==i.quantity&&(this.quantity=(0,t.setRangeValue)(i.quantity)),void 0!==i.delay&&(this.delay=(0,t.setRangeValue)(i.delay)))}}class a{constructor(){this.mode="percent",this.height=0,this.width=0}load(t){void 0!==t&&(void 0!==t.mode&&(this.mode=t.mode),void 0!==t.height&&(this.height=t.height),void 0!==t.width&&(this.width=t.width))}}class r{constructor(){this.autoPlay=!0,this.fill=!0,this.life=new e,this.rate=new o,this.shape="square",this.startCount=0}load(i){i&&(void 0!==i.autoPlay&&(this.autoPlay=i.autoPlay),void 0!==i.size&&(this.size||(this.size=new a),this.size.load(i.size)),void 0!==i.direction&&(this.direction=i.direction),this.domId=i.domId,void 0!==i.fill&&(this.fill=i.fill),this.life.load(i.life),this.name=i.name,this.particles=(0,t.executeOnSingleOrMultiple)(i.particles,(i=>(0,t.deepExtend)({},i))),this.rate.load(i.rate),void 0!==i.shape&&(this.shape=i.shape),void 0!==i.position&&(this.position={},void 0!==i.position.x&&(this.position.x=(0,t.setRangeValue)(i.position.x)),void 0!==i.position.y&&(this.position.y=(0,t.setRangeValue)(i.position.y))),void 0!==i.spawnColor&&(void 0===this.spawnColor&&(this.spawnColor=new t.AnimatableColor),this.spawnColor.load(i.spawnColor)),void 0!==i.startCount&&(this.startCount=i.startCount))}}class h{constructor(i,e,s,n,o){this.emitters=e,this.container=s,this._calcPosition=()=>(0,t.calcPositionOrRandomFromSizeRanged)({size:this.container.canvas.size,position:this.options.position}),this._destroy=()=>{this.emitters.removeEmitter(this),this._engine.dispatchEvent("emitterDestroyed",{container:this.container,data:{emitter:this}})},this._emit=()=>{if(this._paused)return;const i=(0,t.getRangeValue)(this.options.rate.quantity);this._emitParticles(i)},this._emitParticles=i=>{const e=this.getPosition(),s=this.getSize(),n=(0,t.itemFromSingleOrMultiple)(this._particlesOptions);for(let o=0;o<i;o++){const i=(0,t.deepExtend)({},n);if(this.spawnColor){const t=this.options.spawnColor?.animation;t&&(this.spawnColor.h=this._setColorAnimation(t.h,this.spawnColor.h,360),this.spawnColor.s=this._setColorAnimation(t.s,this.spawnColor.s,100),this.spawnColor.l=this._setColorAnimation(t.l,this.spawnColor.l,100)),i.color?i.color.value=this.spawnColor:i.color={value:this.spawnColor}}if(!e)return;const o=this._shape?.randomPosition(e,s,this.fill)??e;this.container.particles.addParticle(o,i)}},this._prepareToDie=()=>{if(this._paused)return;const i=void 0!==this.options.life?.duration?(0,t.getRangeValue)(this.options.life.duration):void 0;this.container.retina.reduceFactor&&(this._lifeCount>0||this._immortal)&&void 0!==i&&i>0&&(this._duration=1e3*i)},this._setColorAnimation=(i,e,s)=>{const n=this.container;if(!i.enable)return e;const o=(0,t.randomInRange)(i.offset),a=1e3*(0,t.getRangeValue)(this.options.rate.delay)/n.retina.reduceFactor;return(e+(0,t.getRangeValue)(i.speed??0)*n.fpsLimit/a+3.6*o)%s},this._engine=i,this._currentDuration=0,this._currentEmitDelay=0,this._currentSpawnDelay=0,this._initialPosition=o,n instanceof r?this.options=n:(this.options=new r,this.options.load(n)),this._spawnDelay=1e3*(0,t.getRangeValue)(this.options.life.delay??0)/this.container.retina.reduceFactor,this.position=this._initialPosition??this._calcPosition(),this.name=this.options.name,this._shape=this._engine.emitterShapeManager?.getShape(this.options.shape),this.fill=this.options.fill,this._firstSpawn=!this.options.life.wait,this._startParticlesAdded=!1;let h=(0,t.deepExtend)({},this.options.particles);h??={},h.move??={},h.move.direction??=this.options.direction,this.options.spawnColor&&(this.spawnColor=(0,t.rangeColorToHsl)(this.options.spawnColor)),this._paused=!this.options.autoPlay,this._particlesOptions=h,this.size=this.options.size??(()=>{const t=new a;return t.load({height:0,mode:"percent",width:0}),t})(),this._lifeCount=this.options.life.count??-1,this._immortal=this._lifeCount<=0,this._engine.dispatchEvent("emitterCreated",{container:s,data:{emitter:this}}),this.play()}externalPause(){this._paused=!0,this.pause()}externalPlay(){this._paused=!1,this.play()}getPosition(){if(this.options.domId){const t=this.container,i=document.getElementById(this.options.domId);if(i){const e=i.getBoundingClientRect();return{x:(e.x+e.width/2)*t.retina.pixelRatio,y:(e.y+e.height/2)*t.retina.pixelRatio}}}return this.position}getSize(){const i=this.container;if(this.options.domId){const t=document.getElementById(this.options.domId);if(t){const e=t.getBoundingClientRect();return{width:e.width*i.retina.pixelRatio,height:e.height*i.retina.pixelRatio}}}return(0,t.getSize)(this.size,i.canvas.size)}pause(){this._paused||delete this._emitDelay}play(){if(!this._paused&&this.container.retina.reduceFactor&&(this._lifeCount>0||this._immortal||!this.options.life.count)&&(this._firstSpawn||this._currentSpawnDelay>=(this._spawnDelay??0))){if(void 0===this._emitDelay){const i=(0,t.getRangeValue)(this.options.rate.delay);this._emitDelay=1e3*i/this.container.retina.reduceFactor}(this._lifeCount>0||this._immortal)&&this._prepareToDie()}}resize(){const i=this._initialPosition;this.position=i&&(0,t.isPointInside)(i,this.container.canvas.size,t.Vector.origin)?i:this._calcPosition()}update(i){this._paused||(this._firstSpawn&&(this._firstSpawn=!1,this._currentSpawnDelay=this._spawnDelay??0,this._currentEmitDelay=this._emitDelay??0),this._startParticlesAdded||(this._startParticlesAdded=!0,this._emitParticles(this.options.startCount)),void 0!==this._duration&&(this._currentDuration+=i.value,this._currentDuration>=this._duration&&(this.pause(),void 0!==this._spawnDelay&&delete this._spawnDelay,this._immortal||this._lifeCount--,this._lifeCount>0||this._immortal?(this.position=this._calcPosition(),this._spawnDelay=1e3*(0,t.getRangeValue)(this.options.life.delay??0)/this.container.retina.reduceFactor):this._destroy(),this._currentDuration-=this._duration,delete this._duration)),void 0!==this._spawnDelay&&(this._currentSpawnDelay+=i.value,this._currentSpawnDelay>=this._spawnDelay&&(this._engine.dispatchEvent("emitterPlay",{container:this.container}),this.play(),this._currentSpawnDelay-=this._currentSpawnDelay,delete this._spawnDelay)),void 0!==this._emitDelay&&(this._currentEmitDelay+=i.value,this._currentEmitDelay>=this._emitDelay&&(this._emit(),this._currentEmitDelay-=this._emitDelay)))}}class l{constructor(i,e){this.container=e,this._engine=i,this.array=[],this.emitters=[],this.interactivityEmitters={random:{count:1,enable:!1},value:[]},e.getEmitter=i=>void 0===i||(0,t.isNumber)(i)?this.array[i||0]:this.array.find((t=>t.name===i)),e.addEmitter=(t,i)=>this.addEmitter(t,i),e.removeEmitter=t=>{const i=e.getEmitter(t);i&&this.removeEmitter(i)},e.playEmitter=t=>{const i=e.getEmitter(t);i&&i.externalPlay()},e.pauseEmitter=t=>{const i=e.getEmitter(t);i&&i.externalPause()}}addEmitter(t,i){const e=new r;e.load(t);const s=new h(this._engine,this,this.container,e,i);return this.array.push(s),s}handleClickMode(i){const e=this.emitters,s=this.interactivityEmitters;if("emitter"!==i)return;let n;if(s&&(0,t.isArray)(s.value))if(s.value.length>0&&s.random.enable){n=[];const i=[];for(let e=0;e<s.random.count;e++){const o=(0,t.arrayRandomIndex)(s.value);i.includes(o)&&i.length<s.value.length?e--:(i.push(o),n.push((0,t.itemFromArray)(s.value,o)))}}else n=s.value;else n=s?.value;const o=n??e,a=this.container.interactivity.mouse.clickPosition;(0,t.executeOnSingleOrMultiple)(o,(t=>{this.addEmitter(t,a)}))}async init(){if(this.emitters=this.container.actualOptions.emitters,this.interactivityEmitters=this.container.actualOptions.interactivity.modes.emitters,this.emitters)if((0,t.isArray)(this.emitters))for(const t of this.emitters)this.addEmitter(t);else this.addEmitter(this.emitters)}pause(){for(const t of this.array)t.pause()}play(){for(const t of this.array)t.play()}removeEmitter(t){const i=this.array.indexOf(t);i>=0&&this.array.splice(i,1)}resize(){for(const t of this.array)t.resize()}stop(){this.array=[]}update(t){for(const i of this.array)i.update(t)}}const d=new Map;class c{constructor(t){this._engine=t}addShape(t,i){this.getShape(t)||d.set(t,i)}getShape(t){return d.get(t)}getSupportedShapes(){return d.keys()}}function u(i,e){return i+e*((0,t.getRandom)()-.5)}class p{randomPosition(i,e,s){if(s)return{x:u(i.x,e.width),y:u(i.y,e.height)};{const s=e.width/2,n=e.height/2,o=Math.floor(4*(0,t.getRandom)()),a=2*((0,t.getRandom)()-.5);switch(o){case 0:return{x:i.x+a*s,y:i.y-n};case 1:return{x:i.x-s,y:i.y+a*n};case 2:return{x:i.x+a*s,y:i.y+n};default:return{x:i.x+s,y:i.y+a*n}}}}}class m{constructor(t){this._engine=t,this.id="emitters"}getPlugin(t){return new l(this._engine,t)}loadOptions(i,e){if(!this.needsPlugin(i)&&!this.needsPlugin(e))return;e?.emitters&&(i.emitters=(0,t.executeOnSingleOrMultiple)(e.emitters,(t=>{const i=new r;return i.load(t),i})));const s=e?.interactivity?.modes?.emitters;if(s)if((0,t.isArray)(s))i.interactivity.modes.emitters={random:{count:1,enable:!0},value:s.map((t=>{const i=new r;return i.load(t),i}))};else{const e=s;if(void 0!==e.value)if((0,t.isArray)(e.value))i.interactivity.modes.emitters={random:{count:e.random.count??1,enable:e.random.enable??!1},value:e.value.map((t=>{const i=new r;return i.load(t),i}))};else{const t=new r;t.load(e.value),i.interactivity.modes.emitters={random:{count:e.random.count??1,enable:e.random.enable??!1},value:t}}else{(i.interactivity.modes.emitters={random:{count:1,enable:!1},value:new r}).value.load(s)}}}needsPlugin(i){if(!i)return!1;const e=i.emitters;return(0,t.isArray)(e)&&!!e.length||void 0!==e||!!i.interactivity?.events?.onClick?.mode&&(0,t.isInArray)("emitter",i.interactivity.events.onClick.mode)}}async function y(t,e=!0){t.emitterShapeManager||(t.emitterShapeManager=new c(t)),t.addEmitterShape||(t.addEmitterShape=(i,e)=>{t.emitterShapeManager?.addShape(i,e)});const s=new m(t);await t.addPlugin(s,e),t.addEmitterShape("circle",new i),t.addEmitterShape("square",new p)}})(),n})()));
|
|
2
|
+
!function(t,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],i);else{var e="object"==typeof exports?i(require("@tsparticles/engine")):i(t.window);for(var s in e)("object"==typeof exports?exports:t)[s]=e[s]}}(this,(t=>(()=>{"use strict";var i={533:i=>{i.exports=t}},e={};function s(t){var o=e[t];if(void 0!==o)return o.exports;var n=e[t]={exports:{}};return i[t](n,n.exports,s),n.exports}s.d=(t,i)=>{for(var e in i)s.o(i,e)&&!s.o(t,e)&&Object.defineProperty(t,e,{enumerable:!0,get:i[e]})},s.o=(t,i)=>Object.prototype.hasOwnProperty.call(t,i),s.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{s.r(o),s.d(o,{EmitterShapeBase:()=>m,loadEmittersPlugin:()=>_});var t=s(533);class i{constructor(){this.wait=!1}load(i){i&&(void 0!==i.count&&(this.count=i.count),void 0!==i.delay&&(this.delay=(0,t.setRangeValue)(i.delay)),void 0!==i.duration&&(this.duration=(0,t.setRangeValue)(i.duration)),void 0!==i.wait&&(this.wait=i.wait))}}class e{constructor(){this.quantity=1,this.delay=.1}load(i){void 0!==i&&(void 0!==i.quantity&&(this.quantity=(0,t.setRangeValue)(i.quantity)),void 0!==i.delay&&(this.delay=(0,t.setRangeValue)(i.delay)))}}class n{constructor(){this.color=!1,this.opacity=!1}load(t){t&&(void 0!==t.color&&(this.color=t.color),void 0!==t.opacity&&(this.opacity=t.opacity))}}class a{constructor(){this.options={},this.replace=new n,this.type="square"}load(i){i&&(void 0!==i.options&&(this.options=(0,t.deepExtend)({},i.options??{})),this.replace.load(i.replace),void 0!==i.type&&(this.type=i.type))}}class r{constructor(){this.mode="percent",this.height=0,this.width=0}load(t){void 0!==t&&(void 0!==t.mode&&(this.mode=t.mode),void 0!==t.height&&(this.height=t.height),void 0!==t.width&&(this.width=t.width))}}class h{constructor(){this.autoPlay=!0,this.fill=!0,this.life=new i,this.rate=new e,this.shape=new a,this.startCount=0}load(i){i&&(void 0!==i.autoPlay&&(this.autoPlay=i.autoPlay),void 0!==i.size&&(this.size||(this.size=new r),this.size.load(i.size)),void 0!==i.direction&&(this.direction=i.direction),this.domId=i.domId,void 0!==i.fill&&(this.fill=i.fill),this.life.load(i.life),this.name=i.name,this.particles=(0,t.executeOnSingleOrMultiple)(i.particles,(i=>(0,t.deepExtend)({},i))),this.rate.load(i.rate),this.shape.load(i.shape),void 0!==i.position&&(this.position={},void 0!==i.position.x&&(this.position.x=(0,t.setRangeValue)(i.position.x)),void 0!==i.position.y&&(this.position.y=(0,t.setRangeValue)(i.position.y))),void 0!==i.spawnColor&&(void 0===this.spawnColor&&(this.spawnColor=new t.AnimatableColor),this.spawnColor.load(i.spawnColor)),void 0!==i.startCount&&(this.startCount=i.startCount))}}function l(t,i){t.color?t.color.value=i:t.color={value:i}}class c{constructor(i,e,s,o,n){this.emitters=e,this.container=s,this._destroy=()=>{this._mutationObserver?.disconnect(),this._mutationObserver=void 0,this._resizeObserver?.disconnect(),this._resizeObserver=void 0,this.emitters.removeEmitter(this),this._engine.dispatchEvent("emitterDestroyed",{container:this.container,data:{emitter:this}})},this._prepareToDie=()=>{if(this._paused)return;const i=void 0!==this.options.life?.duration?(0,t.getRangeValue)(this.options.life.duration):void 0;this.container.retina.reduceFactor&&(this._lifeCount>0||this._immortal)&&void 0!==i&&i>0&&(this._duration=1e3*i)},this._setColorAnimation=(i,e,s)=>{const o=this.container;if(!i.enable)return e;const n=(0,t.randomInRange)(i.offset),a=1e3*(0,t.getRangeValue)(this.options.rate.delay)/o.retina.reduceFactor;return(e+(0,t.getRangeValue)(i.speed??0)*o.fpsLimit/a+3.6*n)%s},this._engine=i,this._currentDuration=0,this._currentEmitDelay=0,this._currentSpawnDelay=0,this._initialPosition=n,o instanceof h?this.options=o:(this.options=new h,this.options.load(o)),this._spawnDelay=1e3*(0,t.getRangeValue)(this.options.life.delay??0)/this.container.retina.reduceFactor,this.position=this._initialPosition??this._calcPosition(),this.name=this.options.name,this.fill=this.options.fill,this._firstSpawn=!this.options.life.wait,this._startParticlesAdded=!1;let a=(0,t.deepExtend)({},this.options.particles);if(a??={},a.move??={},a.move.direction??=this.options.direction,this.options.spawnColor&&(this.spawnColor=(0,t.rangeColorToHsl)(this.options.spawnColor)),this._paused=!this.options.autoPlay,this._particlesOptions=a,this._size=this._calcSize(),this.size=(0,t.getSize)(this._size,this.container.canvas.size),this._lifeCount=this.options.life.count??-1,this._immortal=this._lifeCount<=0,this.options.domId){const t=document.getElementById(this.options.domId);t&&(this._mutationObserver=new MutationObserver((()=>{this.resize()})),this._resizeObserver=new ResizeObserver((()=>{this.resize()})),this._mutationObserver.observe(t,{attributes:!0,attributeFilter:["style","width","height"]}),this._resizeObserver.observe(t))}const r=this.options.shape,l=this._engine.emitterShapeManager?.getShapeGenerator(r.type);l&&(this._shape=l.generate(this.position,this.size,this.fill,r.options)),this._engine.dispatchEvent("emitterCreated",{container:s,data:{emitter:this}}),this.play()}externalPause(){this._paused=!0,this.pause()}externalPlay(){this._paused=!1,this.play()}async init(){await(this._shape?.init())}pause(){this._paused||delete this._emitDelay}play(){if(!this._paused&&this.container.retina.reduceFactor&&(this._lifeCount>0||this._immortal||!this.options.life.count)&&(this._firstSpawn||this._currentSpawnDelay>=(this._spawnDelay??0))){if(void 0===this._emitDelay){const i=(0,t.getRangeValue)(this.options.rate.delay);this._emitDelay=1e3*i/this.container.retina.reduceFactor}(this._lifeCount>0||this._immortal)&&this._prepareToDie()}}resize(){const i=this._initialPosition;this.position=i&&(0,t.isPointInside)(i,this.container.canvas.size,t.Vector.origin)?i:this._calcPosition(),this._size=this._calcSize(),this.size=(0,t.getSize)(this._size,this.container.canvas.size),this._shape?.resize(this.position,this.size)}async update(i){this._paused||(this._firstSpawn&&(this._firstSpawn=!1,this._currentSpawnDelay=this._spawnDelay??0,this._currentEmitDelay=this._emitDelay??0),this._startParticlesAdded||(this._startParticlesAdded=!0,await this._emitParticles(this.options.startCount)),void 0!==this._duration&&(this._currentDuration+=i.value,this._currentDuration>=this._duration&&(this.pause(),void 0!==this._spawnDelay&&delete this._spawnDelay,this._immortal||this._lifeCount--,this._lifeCount>0||this._immortal?(this.position=this._calcPosition(),this._spawnDelay=1e3*(0,t.getRangeValue)(this.options.life.delay??0)/this.container.retina.reduceFactor):this._destroy(),this._currentDuration-=this._duration,delete this._duration)),void 0!==this._spawnDelay&&(this._currentSpawnDelay+=i.value,this._currentSpawnDelay>=this._spawnDelay&&(this._engine.dispatchEvent("emitterPlay",{container:this.container}),this.play(),this._currentSpawnDelay-=this._currentSpawnDelay,delete this._spawnDelay)),void 0!==this._emitDelay&&(this._currentEmitDelay+=i.value,this._currentEmitDelay>=this._emitDelay&&(this._emit(),this._currentEmitDelay-=this._emitDelay)))}_calcPosition(){if(this.options.domId){const t=this.container,i=document.getElementById(this.options.domId);if(i){const e=i.getBoundingClientRect();return{x:(e.x+e.width/2)*t.retina.pixelRatio,y:(e.y+e.height/2)*t.retina.pixelRatio}}}return(0,t.calcPositionOrRandomFromSizeRanged)({size:this.container.canvas.size,position:this.options.position})}_calcSize(){const t=this.container;if(this.options.domId){const i=document.getElementById(this.options.domId);if(i){const e=i.getBoundingClientRect();return{width:e.width*t.retina.pixelRatio,height:e.height*t.retina.pixelRatio,mode:"precise"}}}return this.options.size??(()=>{const t=new r;return t.load({height:0,mode:"percent",width:0}),t})()}async _emit(){if(this._paused)return;const i=(0,t.getRangeValue)(this.options.rate.quantity);await this._emitParticles(i)}async _emitParticles(i){const e=(0,t.itemFromSingleOrMultiple)(this._particlesOptions);for(let s=0;s<i;s++){const i=(0,t.deepExtend)({},e);if(this.spawnColor){const t=this.options.spawnColor?.animation;t&&(this.spawnColor.h=this._setColorAnimation(t.h,this.spawnColor.h,360),this.spawnColor.s=this._setColorAnimation(t.s,this.spawnColor.s,100),this.spawnColor.l=this._setColorAnimation(t.l,this.spawnColor.l,100)),l(i,this.spawnColor)}const s=this.options.shape;let o=this.position;if(this._shape){const t=await this._shape.randomPosition();if(t){o=t.position;const e=s.replace;e.color&&t.color&&l(i,t.color),e.opacity&&(i.opacity?i.opacity.value=t.opacity:i.opacity={value:t.opacity})}else o=null}o&&this.container.particles.addParticle(o,i)}}}class d{constructor(i,e){this.container=e,this._engine=i,this.array=[],this.emitters=[],this.interactivityEmitters={random:{count:1,enable:!1},value:[]},e.getEmitter=i=>void 0===i||(0,t.isNumber)(i)?this.array[i||0]:this.array.find((t=>t.name===i)),e.addEmitter=async(t,i)=>this.addEmitter(t,i),e.removeEmitter=t=>{const i=e.getEmitter(t);i&&this.removeEmitter(i)},e.playEmitter=t=>{const i=e.getEmitter(t);i&&i.externalPlay()},e.pauseEmitter=t=>{const i=e.getEmitter(t);i&&i.externalPause()}}async addEmitter(t,i){const e=new h;e.load(t);const s=new c(this._engine,this,this.container,e,i);return await s.init(),this.array.push(s),s}handleClickMode(i){const e=this.emitters,s=this.interactivityEmitters;if("emitter"!==i)return;let o;if(s&&(0,t.isArray)(s.value))if(s.value.length>0&&s.random.enable){o=[];const i=[];for(let e=0;e<s.random.count;e++){const n=(0,t.arrayRandomIndex)(s.value);i.includes(n)&&i.length<s.value.length?e--:(i.push(n),o.push((0,t.itemFromArray)(s.value,n)))}}else o=s.value;else o=s?.value;const n=o??e,a=this.container.interactivity.mouse.clickPosition;(0,t.executeOnSingleOrMultiple)(n,(t=>{this.addEmitter(t,a)}))}async init(){if(this.emitters=this.container.actualOptions.emitters,this.interactivityEmitters=this.container.actualOptions.interactivity.modes.emitters,this.emitters)if((0,t.isArray)(this.emitters))for(const t of this.emitters)await this.addEmitter(t);else await this.addEmitter(this.emitters)}pause(){for(const t of this.array)t.pause()}play(){for(const t of this.array)t.play()}removeEmitter(t){const i=this.array.indexOf(t);i>=0&&this.array.splice(i,1)}resize(){for(const t of this.array)t.resize()}stop(){this.array=[]}async update(t){for(const i of this.array)await i.update(t)}}const p=new Map;class u{constructor(t){this._engine=t}addShapeGenerator(t,i){this.getShapeGenerator(t)||p.set(t,i)}getShapeGenerator(t){return p.get(t)}getSupportedShapeGenerators(){return p.keys()}}class m{constructor(t,i,e,s){this.position=t,this.size=i,this.fill=e,this.options=s}resize(t,i){this.position=t,this.size=i}}class y{constructor(t){this._engine=t,this.id="emitters"}getPlugin(t){return new d(this._engine,t)}loadOptions(i,e){if(!this.needsPlugin(i)&&!this.needsPlugin(e))return;e?.emitters&&(i.emitters=(0,t.executeOnSingleOrMultiple)(e.emitters,(t=>{const i=new h;return i.load(t),i})));const s=e?.interactivity?.modes?.emitters;if(s)if((0,t.isArray)(s))i.interactivity.modes.emitters={random:{count:1,enable:!0},value:s.map((t=>{const i=new h;return i.load(t),i}))};else{const e=s;if(void 0!==e.value)if((0,t.isArray)(e.value))i.interactivity.modes.emitters={random:{count:e.random.count??1,enable:e.random.enable??!1},value:e.value.map((t=>{const i=new h;return i.load(t),i}))};else{const t=new h;t.load(e.value),i.interactivity.modes.emitters={random:{count:e.random.count??1,enable:e.random.enable??!1},value:t}}else{(i.interactivity.modes.emitters={random:{count:1,enable:!1},value:new h}).value.load(s)}}}needsPlugin(i){if(!i)return!1;const e=i.emitters;return(0,t.isArray)(e)&&!!e.length||void 0!==e||!!i.interactivity?.events?.onClick?.mode&&(0,t.isInArray)("emitter",i.interactivity.events.onClick.mode)}}async function _(t,i=!0){t.emitterShapeManager||(t.emitterShapeManager=new u(t)),t.addEmitterShapeGenerator||(t.addEmitterShapeGenerator=(i,e)=>{t.emitterShapeManager?.addShapeGenerator(i,e)});const e=new y(t);await t.addPlugin(e,i)}})(),o})()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Emitters Plugin v3.0.0-beta.
|
|
1
|
+
/*! tsParticles Emitters Plugin v3.0.0-beta.5 by Matteo Bruni */
|
|
@@ -4,7 +4,7 @@ import type { EmitterOptions } from "./types.js";
|
|
|
4
4
|
import type { IEmitter } from "./Options/Interfaces/IEmitter.js";
|
|
5
5
|
export type EmitterContainer = Container & {
|
|
6
6
|
actualOptions: EmitterOptions;
|
|
7
|
-
addEmitter: (options: RecursivePartial<IEmitter>, position?: ICoordinates) => EmitterInstance
|
|
7
|
+
addEmitter: (options: RecursivePartial<IEmitter>, position?: ICoordinates) => Promise<EmitterInstance>;
|
|
8
8
|
getEmitter: (idxOrName?: number | string) => EmitterInstance | undefined;
|
|
9
9
|
pauseEmitter: (idxOrName?: number | string) => void;
|
|
10
10
|
playEmitter: (idxOrName?: number | string) => void;
|
|
@@ -3,15 +3,14 @@ import { Emitter } from "./Options/Classes/Emitter.js";
|
|
|
3
3
|
import type { Emitters } from "./Emitters.js";
|
|
4
4
|
import type { EmittersEngine } from "./EmittersEngine.js";
|
|
5
5
|
import type { IEmitter } from "./Options/Interfaces/IEmitter.js";
|
|
6
|
-
import type { IEmitterSize } from "./Options/Interfaces/IEmitterSize.js";
|
|
7
6
|
export declare class EmitterInstance {
|
|
8
7
|
private readonly emitters;
|
|
9
8
|
private readonly container;
|
|
10
9
|
fill: boolean;
|
|
11
10
|
readonly name?: string;
|
|
12
11
|
options: Emitter;
|
|
13
|
-
position
|
|
14
|
-
size:
|
|
12
|
+
position: ICoordinates;
|
|
13
|
+
size: IDimension;
|
|
15
14
|
spawnColor?: IHsl;
|
|
16
15
|
private _currentDuration;
|
|
17
16
|
private _currentEmitDelay;
|
|
@@ -23,24 +22,27 @@ export declare class EmitterInstance {
|
|
|
23
22
|
private readonly _immortal;
|
|
24
23
|
private readonly _initialPosition?;
|
|
25
24
|
private _lifeCount;
|
|
25
|
+
private _mutationObserver?;
|
|
26
26
|
private readonly _particlesOptions;
|
|
27
27
|
private _paused;
|
|
28
|
+
private _resizeObserver?;
|
|
28
29
|
private readonly _shape?;
|
|
30
|
+
private _size;
|
|
29
31
|
private _spawnDelay?;
|
|
30
32
|
private _startParticlesAdded;
|
|
31
33
|
constructor(engine: EmittersEngine, emitters: Emitters, container: Container, options: RecursivePartial<IEmitter>, position?: ICoordinates);
|
|
32
34
|
externalPause(): void;
|
|
33
35
|
externalPlay(): void;
|
|
34
|
-
|
|
35
|
-
getSize(): IDimension;
|
|
36
|
+
init(): Promise<void>;
|
|
36
37
|
pause(): void;
|
|
37
38
|
play(): void;
|
|
38
39
|
resize(): void;
|
|
39
|
-
update(delta: IDelta): void
|
|
40
|
-
private
|
|
40
|
+
update(delta: IDelta): Promise<void>;
|
|
41
|
+
private _calcPosition;
|
|
42
|
+
private _calcSize;
|
|
41
43
|
private readonly _destroy;
|
|
42
|
-
private
|
|
43
|
-
private
|
|
44
|
+
private _emit;
|
|
45
|
+
private _emitParticles;
|
|
44
46
|
private readonly _prepareToDie;
|
|
45
47
|
private readonly _setColorAnimation;
|
|
46
48
|
}
|