@tsparticles/engine
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.
149 lines (148 loc) • 5.32 kB
JavaScript
import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils.js";
import { isArray, isNull } from "../../../Utils/TypeUtils.js";
import { AnimatableColor } from "../AnimatableColor.js";
import { Effect } from "./Effect/Effect.js";
import { Fill } from "./Fill.js";
import { Move } from "./Move/Move.js";
import { Paint } from "./Paint.js";
import { ParticlesBounce } from "./Bounce/ParticlesBounce.js";
import { ParticlesNumber } from "./Number/ParticlesNumber.js";
import { Shape } from "./Shape/Shape.js";
import { ZIndex } from "./ZIndex/ZIndex.js";
export class ParticlesOptions {
bounce;
effect;
groups;
move;
number;
paint;
palette;
reduceDuplicates;
shape;
zIndex;
#container;
#pluginManager;
constructor(pluginManager, container) {
this.#pluginManager = pluginManager;
this.#container = container;
this.bounce = new ParticlesBounce();
this.effect = new Effect();
this.groups = {};
this.move = new Move();
this.number = new ParticlesNumber();
this.paint = new Paint();
this.paint.color = new AnimatableColor();
this.paint.color.value = "#fff";
this.paint.fill = new Fill();
this.paint.fill.enable = true;
this.reduceDuplicates = false;
this.shape = new Shape();
this.zIndex = new ZIndex();
}
load(data) {
if (isNull(data)) {
return;
}
if (data.palette) {
this.palette = data.palette;
this.#importPalette(this.palette);
}
if (data.groups !== undefined) {
for (const group of Object.keys(data.groups)) {
if (!(group in data.groups)) {
continue;
}
const item = data.groups[group];
if (item !== undefined) {
this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
}
}
}
if (data.reduceDuplicates !== undefined) {
this.reduceDuplicates = data.reduceDuplicates;
}
this.bounce.load(data.bounce);
this.effect.load(data.effect);
this.move.load(data.move);
this.number.load(data.number);
const paintToLoad = data.paint;
if (paintToLoad) {
if (isArray(paintToLoad)) {
this.paint = executeOnSingleOrMultiple(paintToLoad, t => {
const tmp = new Paint();
tmp.load(t);
return tmp;
});
}
else if (isArray(this.paint)) {
this.paint = new Paint();
this.paint.load(paintToLoad);
}
else {
this.paint.load(paintToLoad);
}
}
this.shape.load(data.shape);
this.zIndex.load(data.zIndex);
if (this.#container) {
for (const plugin of this.#pluginManager.plugins) {
if (plugin.loadParticlesOptions) {
plugin.loadParticlesOptions(this.#container, this, data);
}
}
const updaters = this.#pluginManager.updaters.get(this.#container);
if (updaters) {
for (const updater of updaters) {
if (updater.loadOptions) {
updater.loadOptions(this, data);
}
}
}
}
}
#importPalette = (palette) => {
const paletteData = this.#pluginManager.getPalette(palette);
if (!paletteData) {
return;
}
const paletteColors = paletteData.colors, defaultPaintStrokeWidth = 0, defaultPaintVariantsLength = 1, firstPaintVariantIndex = 0, defaultPalettePaintVariant = {}, colorVariants = isArray(paletteColors) ? paletteColors : [paletteColors], palettePaintVariants = colorVariants.flatMap(variant => {
const paletteFill = variant.fill, paletteStroke = variant.stroke, fillPart = paletteFill
? {
color: {
value: paletteFill.value,
},
enable: paletteFill.enable,
opacity: paletteFill.opacity,
}
: undefined;
if (!paletteStroke) {
return [
{
fill: fillPart,
},
];
}
return [
{
fill: fillPart,
stroke: {
color: {
value: paletteStroke.value,
},
opacity: paletteStroke.opacity,
width: paletteStroke.width || defaultPaintStrokeWidth,
},
},
];
}), palettePaint = palettePaintVariants.length > defaultPaintVariantsLength
? palettePaintVariants
: (palettePaintVariants[firstPaintVariantIndex] ?? defaultPalettePaintVariant);
this.load({
paint: palettePaint,
blend: {
enable: true,
mode: paletteData.blendMode,
},
});
};
}