tsparticles
Version:
Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.
270 lines (269 loc) • 12.5 kB
JavaScript
"use strict";
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
if (kind === "m") throw new TypeError("Private method is not writable");
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _EmitterInstance_firstSpawn, _EmitterInstance_startParticlesAdded, _EmitterInstance_engine;
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmitterInstance = void 0;
const Utils_1 = require("../../Utils");
const Emitter_1 = require("./Options/Classes/Emitter");
const EmitterSize_1 = require("./Options/Classes/EmitterSize");
class EmitterInstance {
constructor(engine, emitters, container, options, position) {
var _a, _b, _c, _d, _e, _f, _g;
var _h;
this.emitters = emitters;
this.container = container;
_EmitterInstance_firstSpawn.set(this, void 0);
_EmitterInstance_startParticlesAdded.set(this, void 0);
_EmitterInstance_engine.set(this, void 0);
__classPrivateFieldSet(this, _EmitterInstance_engine, engine, "f");
this.currentDuration = 0;
this.currentEmitDelay = 0;
this.currentSpawnDelay = 0;
this.initialPosition = position;
if (options instanceof Emitter_1.Emitter) {
this.options = options;
}
else {
this.options = new Emitter_1.Emitter();
this.options.load(options);
}
this.spawnDelay = (((_a = this.options.life.delay) !== null && _a !== void 0 ? _a : 0) * 1000) / this.container.retina.reduceFactor;
this.position = (_b = this.initialPosition) !== null && _b !== void 0 ? _b : this.calcPosition();
this.name = this.options.name;
this.shape = (_c = __classPrivateFieldGet(this, _EmitterInstance_engine, "f").emitterShapeManager) === null || _c === void 0 ? void 0 : _c.getShape(this.options.shape);
this.fill = this.options.fill;
__classPrivateFieldSet(this, _EmitterInstance_firstSpawn, !this.options.life.wait, "f");
__classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, false, "f");
let particlesOptions = (0, Utils_1.deepExtend)({}, this.options.particles);
particlesOptions !== null && particlesOptions !== void 0 ? particlesOptions : (particlesOptions = {});
(_d = particlesOptions.move) !== null && _d !== void 0 ? _d : (particlesOptions.move = {});
(_e = (_h = particlesOptions.move).direction) !== null && _e !== void 0 ? _e : (_h.direction = this.options.direction);
if (this.options.spawnColor) {
this.spawnColor = (0, Utils_1.colorToHsl)(this.options.spawnColor);
}
this.paused = !this.options.autoPlay;
this.particlesOptions = particlesOptions;
this.size =
(_f = this.options.size) !== null && _f !== void 0 ? _f : (() => {
const size = new EmitterSize_1.EmitterSize();
size.load({
height: 0,
mode: "percent",
width: 0,
});
return size;
})();
this.lifeCount = (_g = this.options.life.count) !== null && _g !== void 0 ? _g : -1;
this.immortal = this.lifeCount <= 0;
this.play();
}
externalPlay() {
this.paused = false;
this.play();
}
externalPause() {
this.paused = true;
this.pause();
}
play() {
var _a;
if (this.paused) {
return;
}
if (this.container.retina.reduceFactor &&
(this.lifeCount > 0 || this.immortal || !this.options.life.count) &&
(__classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f") || this.currentSpawnDelay >= ((_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0))) {
if (this.emitDelay === undefined) {
const delay = (0, Utils_1.getRangeValue)(this.options.rate.delay);
this.emitDelay = (1000 * delay) / this.container.retina.reduceFactor;
}
if (this.lifeCount > 0 || this.immortal) {
this.prepareToDie();
}
}
}
pause() {
if (this.paused) {
return;
}
delete this.emitDelay;
}
resize() {
const initialPosition = this.initialPosition;
this.position =
initialPosition && (0, Utils_1.isPointInside)(initialPosition, this.container.canvas.size)
? initialPosition
: this.calcPosition();
}
update(delta) {
var _a, _b, _c;
if (this.paused) {
return;
}
if (__classPrivateFieldGet(this, _EmitterInstance_firstSpawn, "f")) {
__classPrivateFieldSet(this, _EmitterInstance_firstSpawn, false, "f");
this.currentSpawnDelay = (_a = this.spawnDelay) !== null && _a !== void 0 ? _a : 0;
this.currentEmitDelay = (_b = this.emitDelay) !== null && _b !== void 0 ? _b : 0;
}
if (!__classPrivateFieldGet(this, _EmitterInstance_startParticlesAdded, "f")) {
__classPrivateFieldSet(this, _EmitterInstance_startParticlesAdded, true, "f");
this.emitParticles(this.options.startCount);
}
if (this.duration !== undefined) {
this.currentDuration += delta.value;
if (this.currentDuration >= this.duration) {
this.pause();
if (this.spawnDelay !== undefined) {
delete this.spawnDelay;
}
if (!this.immortal) {
this.lifeCount--;
}
if (this.lifeCount > 0 || this.immortal) {
this.position = this.calcPosition();
this.spawnDelay = (((_c = this.options.life.delay) !== null && _c !== void 0 ? _c : 0) * 1000) / this.container.retina.reduceFactor;
}
else {
this.destroy();
}
this.currentDuration -= this.duration;
delete this.duration;
}
}
if (this.spawnDelay !== undefined) {
this.currentSpawnDelay += delta.value;
if (this.currentSpawnDelay >= this.spawnDelay) {
this.play();
this.currentSpawnDelay -= this.currentSpawnDelay;
delete this.spawnDelay;
}
}
if (this.emitDelay !== undefined) {
this.currentEmitDelay += delta.value;
if (this.currentEmitDelay >= this.emitDelay) {
this.emit();
this.currentEmitDelay -= this.emitDelay;
}
}
}
getPosition() {
if (this.options.domId) {
const container = this.container, element = document.getElementById(this.options.domId);
if (element) {
const elRect = element.getBoundingClientRect();
return {
x: (elRect.x + elRect.width / 2) * container.retina.pixelRatio,
y: (elRect.y + elRect.height / 2) * container.retina.pixelRatio,
};
}
}
return this.position;
}
getSize() {
const container = this.container;
if (this.options.domId) {
const element = document.getElementById(this.options.domId);
if (element) {
const elRect = element.getBoundingClientRect();
return {
width: elRect.width * container.retina.pixelRatio,
height: elRect.height * container.retina.pixelRatio,
};
}
}
return {
width: this.size.mode === "percent"
? (container.canvas.size.width * this.size.width) / 100
: this.size.width,
height: this.size.mode === "percent"
? (container.canvas.size.height * this.size.height) / 100
: this.size.height,
};
}
prepareToDie() {
var _a;
if (this.paused) {
return;
}
const duration = (_a = this.options.life) === null || _a === void 0 ? void 0 : _a.duration;
if (this.container.retina.reduceFactor &&
(this.lifeCount > 0 || this.immortal) &&
duration !== undefined &&
duration > 0) {
this.duration = duration * 1000;
}
}
destroy() {
this.emitters.removeEmitter(this);
}
calcPosition() {
var _a, _b;
const container = this.container;
const percentPosition = this.options.position;
return {
x: ((0, Utils_1.getRangeValue)((_a = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.x) !== null && _a !== void 0 ? _a : Math.random() * 100) / 100) * container.canvas.size.width,
y: ((0, Utils_1.getRangeValue)((_b = percentPosition === null || percentPosition === void 0 ? void 0 : percentPosition.y) !== null && _b !== void 0 ? _b : Math.random() * 100) / 100) * container.canvas.size.height,
};
}
emit() {
if (this.paused) {
return;
}
const quantity = (0, Utils_1.getRangeValue)(this.options.rate.quantity);
this.emitParticles(quantity);
}
emitParticles(quantity) {
var _a, _b, _c;
const container = this.container;
const position = this.getPosition();
const size = this.getSize();
for (let i = 0; i < quantity; i++) {
const particlesOptions = (0, Utils_1.deepExtend)({}, this.particlesOptions);
if (this.spawnColor) {
const hslAnimation = (_a = this.options.spawnColor) === null || _a === void 0 ? void 0 : _a.animation;
if (hslAnimation) {
this.spawnColor.h = this.setColorAnimation(hslAnimation.h, this.spawnColor.h, 360);
this.spawnColor.s = this.setColorAnimation(hslAnimation.s, this.spawnColor.s, 100);
this.spawnColor.l = this.setColorAnimation(hslAnimation.l, this.spawnColor.l, 100);
}
if (!particlesOptions.color) {
particlesOptions.color = {
value: this.spawnColor,
};
}
else {
particlesOptions.color.value = this.spawnColor;
}
}
if (!position) {
return;
}
const pPosition = (_c = (_b = this.shape) === null || _b === void 0 ? void 0 : _b.randomPosition(position, size, this.fill)) !== null && _c !== void 0 ? _c : position;
container.particles.addParticle(pPosition, particlesOptions);
}
}
setColorAnimation(animation, initValue, maxValue) {
var _a;
const container = this.container;
if (!animation.enable) {
return initValue;
}
const colorOffset = (0, Utils_1.randomInRange)(animation.offset);
const delay = (0, Utils_1.getRangeValue)(this.options.rate.delay);
const emitFactor = (1000 * delay) / container.retina.reduceFactor;
const colorSpeed = (0, Utils_1.getRangeValue)((_a = animation.speed) !== null && _a !== void 0 ? _a : 0);
return (initValue + (colorSpeed * container.fpsLimit) / emitFactor + colorOffset * 3.6) % maxValue;
}
}
exports.EmitterInstance = EmitterInstance;
_EmitterInstance_firstSpawn = new WeakMap(), _EmitterInstance_startParticlesAdded = new WeakMap(), _EmitterInstance_engine = new WeakMap();