Socket
Socket
Sign inDemoInstall

tsparticles-engine

Package Overview
Dependencies
0
Maintainers
2
Versions
47
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 2.4.0 to 2.5.0

56

esm/Core/Canvas.js

@@ -6,22 +6,9 @@ import { clear, drawParticle, drawParticlePlugin, drawPlugin, paintBase } from "../Utils/CanvasUtils";

function setTransformValue(factor, newFactor, key) {
var _a;
const newValue = newFactor[key];
if (newValue !== undefined) {
factor[key] = (factor[key] ?? 1) * newValue;
factor[key] = ((_a = factor[key]) !== null && _a !== void 0 ? _a : 1) * newValue;
}
}
export class Canvas {
container;
element;
resizeFactor;
size;
_colorPlugins;
_context;
_coverColorStyle;
_generated;
_mutationObserver;
_originalStyle;
_postDrawUpdaters;
_preDrawUpdaters;
_resizePlugins;
_trailFillColor;
constructor(container) {

@@ -68,5 +55,6 @@ this.container = container;

destroy() {
this._mutationObserver?.disconnect();
var _a, _b;
(_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
if (this._generated) {
this.element?.remove();
(_b = this.element) === null || _b === void 0 ? void 0 : _b.remove();
}

@@ -91,2 +79,3 @@ else {

drawParticle(particle, delta) {
var _a;
if (particle.spawning || particle.destroyed) {

@@ -99,3 +88,3 @@ return;

}
const pfColor = particle.getFillColor(), psColor = particle.getStrokeColor() ?? pfColor;
const pfColor = particle.getFillColor(), psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
let [fColor, sColor] = this._getPluginParticleColors(particle);

@@ -112,3 +101,4 @@ if (!fColor) {

this.draw((ctx) => {
const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = particle.bubble.opacity ?? particle.opacity?.value ?? 1, strokeOpacity = particle.stroke?.opacity ?? opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
var _a, _b, _c, _d, _e;
const options = this.container.actualOptions, zIndexOptions = particle.options.zIndex, zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate, opacity = (_c = (_a = particle.bubble.opacity) !== null && _a !== void 0 ? _a : (_b = particle.opacity) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 1, strokeOpacity = (_e = (_d = particle.stroke) === null || _d === void 0 ? void 0 : _d.opacity) !== null && _e !== void 0 ? _e : opacity, zOpacity = opacity * zOpacityFactor, zStrokeOpacity = strokeOpacity * zOpacityFactor, transform = {}, colorStyles = {
fill: fColor ? getStyleFromHsl(fColor, zOpacity) : undefined,

@@ -145,2 +135,3 @@ };

init() {
var _a;
this.resize();

@@ -152,3 +143,3 @@ this._initStyle();

if (this.element) {
this._mutationObserver?.observe(this.element, { attributes: true });
(_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.element, { attributes: true });
}

@@ -160,3 +151,3 @@ this.initUpdaters();

initBackground() {
const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element?.style;
const options = this.container.actualOptions, background = options.background, element = this.element, elementStyle = element === null || element === void 0 ? void 0 : element.style;
if (!elementStyle) {

@@ -201,4 +192,5 @@ return;

loadCanvas(canvas) {
var _a, _b;
if (this._generated) {
this.element?.remove();
(_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
}

@@ -215,3 +207,3 @@ this._generated =

this._context = this.element.getContext("2d");
this._mutationObserver?.observe(this.element, { attributes: true });
(_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(this.element, { attributes: true });
this.container.retina.init();

@@ -246,3 +238,3 @@ this.initBackground();

}
const oldSize = { ...size };
const oldSize = Object.assign({}, size);
this.element.width = size.width = this.element.offsetWidth * pxRatio;

@@ -270,7 +262,9 @@ this.element.height = size.height = this.element.offsetHeight * pxRatio;

_applyPostDrawUpdaters(particle) {
var _a;
for (const updater of this._postDrawUpdaters) {
updater.afterDraw?.(particle);
(_a = updater.afterDraw) === null || _a === void 0 ? void 0 : _a.call(updater, particle);
}
}
_applyPreDrawUpdaters(ctx, particle, radius, zOpacity, colorStyles, transform) {
var _a;
for (const updater of this._preDrawUpdaters) {

@@ -292,3 +286,3 @@ if (updater.getColorStyles) {

}
updater.beforeDraw?.(particle);
(_a = updater.beforeDraw) === null || _a === void 0 ? void 0 : _a.call(updater, particle);
}

@@ -357,6 +351,3 @@ }

const trail = options.particles.move.trail;
this._trailFillColor = {
...fillColor,
a: 1 / trail.length,
};
this._trailFillColor = Object.assign(Object.assign({}, fillColor), { a: 1 / trail.length });
}

@@ -370,2 +361,3 @@ }

_repairStyle() {
var _a, _b;
const element = this.element;

@@ -375,6 +367,6 @@ if (!element) {

}
this._mutationObserver?.disconnect();
(_a = this._mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
this._initStyle();
this.initBackground();
this._mutationObserver?.observe(element, { attributes: true });
(_b = this._mutationObserver) === null || _b === void 0 ? void 0 : _b.observe(element, { attributes: true });
}

@@ -381,0 +373,0 @@ _resetOriginalStyle() {

38

esm/Core/Container.js

@@ -30,34 +30,2 @@ import { animate, cancelAnimation } from "../Utils/Utils";

export class Container {
id;
actualOptions;
canvas;
destroyed;
drawers;
duration;
fpsLimit;
frameManager;
interactivity;
lastFrameTime;
lifeTime;
pageHidden;
particles;
pathGenerators;
plugins;
responsiveMaxWidth;
retina;
smooth;
started;
zLayers;
_currentTheme;
_delay;
_delayTimeout;
_drawAnimationFrame;
_engine;
_eventListeners;
_firstStart;
_initialSourceOptions;
_intersectionObserver;
_options;
_paused;
_sourceOptions;
constructor(engine, id, sourceOptions) {

@@ -188,3 +156,3 @@ this.id = id;

}
this.pathGenerators.set(key, generator ?? defaultPathGenerator);
this.pathGenerators.set(key, generator !== null && generator !== void 0 ? generator : defaultPathGenerator);
return true;

@@ -239,3 +207,3 @@ }

if (element) {
element.toBlob(callback, type ?? "image/png", quality);
element.toBlob(callback, type !== null && type !== void 0 ? type : "image/png", quality);
}

@@ -382,3 +350,3 @@ }

}
const pathGenerator = { ...defaultPathGenerator };
const pathGenerator = Object.assign({}, defaultPathGenerator);
if (typeof pathOrGenerator === "function") {

@@ -385,0 +353,0 @@ pathGenerator.generate = pathOrGenerator;

12

esm/Core/Loader.js

@@ -20,3 +20,2 @@ import { Container } from "./Container";

export class Loader {
_engine;
constructor(engine) {

@@ -37,3 +36,3 @@ this._engine = engine;

else {
params.options = options ?? params.options;
params.options = options !== null && options !== void 0 ? options : params.options;
}

@@ -54,8 +53,9 @@ return this.loadOptions(params);

async loadOptions(params) {
const tagId = params.tagId ?? `tsparticles${Math.floor(getRandom() * 10000)}`, { index, url: jsonUrl, remote } = params, options = remote ? await getDataFromUrl(jsonUrl, index) : params.options;
let domContainer = params.element ?? document.getElementById(tagId);
var _a, _b, _c;
const tagId = (_a = params.tagId) !== null && _a !== void 0 ? _a : `tsparticles${Math.floor(getRandom() * 10000)}`, { index, url: jsonUrl, remote } = params, options = remote ? await getDataFromUrl(jsonUrl, index) : params.options;
let domContainer = (_b = params.element) !== null && _b !== void 0 ? _b : document.getElementById(tagId);
if (!domContainer) {
domContainer = document.createElement("div");
domContainer.id = tagId;
document.querySelector("body")?.append(domContainer);
(_c = document.querySelector("body")) === null || _c === void 0 ? void 0 : _c.append(domContainer);
}

@@ -125,3 +125,3 @@ const currentOptions = itemFromSingleOrMultiple(options, index), dom = this._engine.dom(), oldIndex = dom.findIndex((v) => v.id === tagId);

else {
params.options = options ?? params.options;
params.options = options !== null && options !== void 0 ? options : params.options;
}

@@ -128,0 +128,0 @@ return this.loadOptions(params);

93

esm/Core/Particle.js

@@ -21,47 +21,2 @@ import { calcExactPositionOrRandomFromSize, clamp, getDistance, getParticleBaseVelocity, getParticleDirectionAngle, getRandom, getRangeMax, getRangeMin, getRangeValue, getValue, randomInRange, setRangeValue, } from "../Utils/NumberUtils";

export class Particle {
container;
backColor;
bubble;
close;
color;
destroyed;
direction;
fill;
group;
id;
ignoresResizeRatio;
initialPosition;
initialVelocity;
interactivity;
lastPathTime;
misplaced;
moveCenter;
moveDecay;
offset;
opacity;
options;
outType;
pathDelay;
pathGenerator;
pathRotation;
position;
randomIndexData;
retina;
roll;
rotation;
shadowColor;
shape;
shapeData;
sides;
size;
slow;
spawning;
stroke;
strokeColor;
strokeWidth;
unbreakable;
velocity;
wobble;
zIndexFactor;
_engine;
constructor(engine, id, container, position, overrideOptions, group) {

@@ -98,5 +53,6 @@ this.container = container;

getFillColor() {
const color = this.bubble.color ?? getHslFromAnimation(this.color);
var _a, _b;
const color = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.color);
if (color && this.roll && (this.backColor || this.roll.alter)) {
const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI / 2 : 0, rolled = Math.floor(((this.roll.angle ?? 0) + backSum) / (Math.PI / backFactor)) % 2;
const backFactor = this.roll.horizontal && this.roll.vertical ? 2 : 1, backSum = this.roll.horizontal ? Math.PI / 2 : 0, rolled = Math.floor((((_b = this.roll.angle) !== null && _b !== void 0 ? _b : 0) + backSum) / (Math.PI / backFactor)) % 2;
if (rolled) {

@@ -124,8 +80,11 @@ if (this.backColor) {

getRadius() {
return this.bubble.radius ?? this.size.value;
var _a;
return (_a = this.bubble.radius) !== null && _a !== void 0 ? _a : this.size.value;
}
getStrokeColor() {
return this.bubble.color ?? getHslFromAnimation(this.strokeColor) ?? this.getFillColor();
var _a, _b;
return (_b = (_a = this.bubble.color) !== null && _a !== void 0 ? _a : getHslFromAnimation(this.strokeColor)) !== null && _b !== void 0 ? _b : this.getFillColor();
}
init(id, position, overrideOptions, group) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
const container = this.container, engine = this._engine;

@@ -158,8 +117,8 @@ this.group = group;

particlesOptions.load(overrideOptions);
particlesOptions.load(this.shapeData?.particles);
particlesOptions.load((_a = this.shapeData) === null || _a === void 0 ? void 0 : _a.particles);
this.interactivity = new Interactivity(engine, container);
this.interactivity.load(container.actualOptions.interactivity);
this.interactivity.load(particlesOptions.interactivity);
this.fill = this.shapeData?.fill ?? this.fill;
this.close = this.shapeData?.close ?? this.close;
this.fill = (_c = (_b = this.shapeData) === null || _b === void 0 ? void 0 : _b.fill) !== null && _c !== void 0 ? _c : this.fill;
this.close = (_e = (_d = this.shapeData) === null || _d === void 0 ? void 0 : _d.close) !== null && _e !== void 0 ? _e : this.close;
this.options = particlesOptions;

@@ -213,8 +172,8 @@ const pathOptions = this.options.move.path;

this.initialPosition = this.position.copy();
const canvasSize = container.canvas.size, moveCenter = { ...this.options.move.center }, isCenterPercent = moveCenter.mode === "percent";
const canvasSize = container.canvas.size, moveCenter = Object.assign({}, this.options.move.center), isCenterPercent = moveCenter.mode === "percent";
this.moveCenter = {
x: moveCenter.x * (isCenterPercent ? canvasSize.width / 100 : 1),
y: moveCenter.y * (isCenterPercent ? canvasSize.height / 100 : 1),
radius: this.options.move.center.radius ?? 0,
mode: this.options.move.center.mode ?? "percent",
radius: (_f = this.options.move.center.radius) !== null && _f !== void 0 ? _f : 0,
mode: (_g = this.options.move.center.mode) !== null && _g !== void 0 ? _g : "percent",
};

@@ -246,6 +205,6 @@ this.direction = getParticleDirectionAngle(this.options.move.direction, this.position, this.moveCenter);

}
if (drawer?.loadShape) {
drawer?.loadShape(this);
if (drawer === null || drawer === void 0 ? void 0 : drawer.loadShape) {
drawer === null || drawer === void 0 ? void 0 : drawer.loadShape(this);
}
const sideCountFunc = drawer?.getSidesCount;
const sideCountFunc = drawer === null || drawer === void 0 ? void 0 : drawer.getSidesCount;
if (sideCountFunc) {

@@ -260,9 +219,9 @@ this.sides = sideCountFunc(this);

for (const mover of container.particles.movers) {
mover.init?.(this);
(_h = mover.init) === null || _h === void 0 ? void 0 : _h.call(mover, this);
}
if (drawer?.particleInit) {
if (drawer === null || drawer === void 0 ? void 0 : drawer.particleInit) {
drawer.particleInit(container, this);
}
for (const [, plugin] of container.plugins) {
plugin.particleCreated?.(this);
(_j = plugin.particleCreated) === null || _j === void 0 ? void 0 : _j.call(plugin, this);
}

@@ -281,7 +240,9 @@ }

reset() {
var _a;
for (const updater of this.container.particles.updaters) {
updater.reset?.(this);
(_a = updater.reset) === null || _a === void 0 ? void 0 : _a.call(updater, this);
}
}
_calcPosition(container, position, zIndex, tryCount = 0) {
var _a, _b, _c, _d;
for (const [, plugin] of container.plugins) {

@@ -315,6 +276,6 @@ const pluginPos = plugin.particlePosition !== undefined ? plugin.particlePosition(position, this) : undefined;

};
fixHorizontal(outModes.left ?? outModes.default);
fixHorizontal(outModes.right ?? outModes.default);
fixVertical(outModes.top ?? outModes.default);
fixVertical(outModes.bottom ?? outModes.default);
fixHorizontal((_a = outModes.left) !== null && _a !== void 0 ? _a : outModes.default);
fixHorizontal((_b = outModes.right) !== null && _b !== void 0 ? _b : outModes.default);
fixVertical((_c = outModes.top) !== null && _c !== void 0 ? _c : outModes.default);
fixVertical((_d = outModes.bottom) !== null && _d !== void 0 ? _d : outModes.default);
if (this._checkOverlap(pos, tryCount)) {

@@ -321,0 +282,0 @@ return this._calcPosition(container, undefined, zIndex, tryCount + 1);

27

esm/Core/Particles.js

@@ -8,16 +8,2 @@ import { InteractionManager } from "./Utils/InteractionManager";

export class Particles {
container;
array;
lastZIndex;
limit;
movers;
needsSort;
pool;
pushing;
quadTree;
updaters;
zArray;
_engine;
interactionManager;
nextId;
constructor(engine, container) {

@@ -92,2 +78,3 @@ this.container = container;

init() {
var _a;
const container = this.container, options = container.actualOptions;

@@ -115,3 +102,3 @@ this.lastZIndex = 0;

const groupOptions = options.particles.groups[group];
for (let i = this.count, j = 0; j < groupOptions.number?.value && i < options.particles.number.value; i++, j++) {
for (let i = this.count, j = 0; j < ((_a = groupOptions.number) === null || _a === void 0 ? void 0 : _a.value) && i < options.particles.number.value; i++, j++) {
this.addParticle(undefined, groupOptions, group);

@@ -128,3 +115,3 @@ }

for (let i = 0; i < nb; i++) {
this.addParticle(mouse?.position, overrideOptions, group);
this.addParticle(mouse === null || mouse === void 0 ? void 0 : mouse.position, overrideOptions, group);
}

@@ -176,2 +163,3 @@ this.pushing = false;

async update(delta) {
var _a, _b;
const container = this.container, particlesToDelete = [];

@@ -182,3 +170,3 @@ for (const [, pathGenerator] of container.pathGenerators) {

for (const [, plugin] of container.plugins) {
plugin.update?.(delta);
(_a = plugin.update) === null || _a === void 0 ? void 0 : _a.call(plugin, delta);
}

@@ -199,3 +187,3 @@ for (const particle of this.array) {

}
plugin.particleUpdate?.(particle, delta);
(_b = plugin.particleUpdate) === null || _b === void 0 ? void 0 : _b.call(plugin, particle, delta);
}

@@ -228,3 +216,4 @@ for (const mover of this.movers) {

_applyDensity(options, manualCount, group) {
if (!options.number.density?.enable) {
var _a;
if (!((_a = options.number.density) === null || _a === void 0 ? void 0 : _a.enable)) {
return;

@@ -231,0 +220,0 @@ }

6

esm/Core/Retina.js
import { getRangeValue } from "../Utils/NumberUtils";
import { isSsr } from "../Utils/Utils";
export class Retina {
container;
attractDistance;
maxSpeed;
pixelRatio;
reduceFactor;
sizeAnimationSpeed;
constructor(container) {

@@ -11,0 +5,0 @@ this.container = container;

1

esm/Core/Utils/Circle.js
import { Range } from "./Range";
import { getDistance } from "../../Utils/NumberUtils";
export class Circle extends Range {
radius;
constructor(x, y, radius) {

@@ -6,0 +5,0 @@ super(x, y);

43

esm/Core/Utils/EventListeners.js

@@ -20,19 +20,2 @@ import { executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils";

export class EventListeners {
container;
canPush;
mouseDownHandler;
mouseLeaveHandler;
mouseMoveHandler;
mouseUpHandler;
oldThemeChangeHandler;
resizeHandler;
resizeObserver;
resizeTimeout;
themeChangeHandler;
touchCancelHandler;
touchEndClickHandler;
touchEndHandler;
touchMoveHandler;
touchStartHandler;
visibilityChangeHandler;
constructor(container) {

@@ -68,3 +51,3 @@ this.container = container;

}
container.interactivity.mouse.clickPosition = { ...mousePos };
container.interactivity.mouse.clickPosition = Object.assign({}, mousePos);
container.interactivity.mouse.clickTime = new Date().getTime();

@@ -95,3 +78,3 @@ const onClick = options.interactivity.events.onClick;

}
if (document?.hidden) {
if (document === null || document === void 0 ? void 0 : document.hidden) {
container.pageHidden = true;

@@ -115,5 +98,6 @@ container.pause();

}
this.resizeTimeout = setTimeout(async () => this.container.canvas?.windowResize(), 500);
this.resizeTimeout = setTimeout(async () => { var _a; return (_a = this.container.canvas) === null || _a === void 0 ? void 0 : _a.windowResize(); }, 500);
}
manageListeners(add) {
var _a;
const container = this.container, options = container.actualOptions, detectType = options.interactivity.detectsOn;

@@ -127,3 +111,3 @@ let mouseLeaveTmpEvent = mouseLeaveEvent;

const canvasEl = container.canvas.element;
container.interactivity.element = canvasEl.parentElement ?? canvasEl.parentNode;
container.interactivity.element = (_a = canvasEl.parentElement) !== null && _a !== void 0 ? _a : canvasEl.parentNode;
}

@@ -242,4 +226,5 @@ else {

mouseTouchMove(e) {
var _a, _b, _c, _d, _e, _f, _g;
const container = this.container, options = container.actualOptions;
if (!container.interactivity?.element) {
if (!((_a = container.interactivity) === null || _a === void 0 ? void 0 : _a.element)) {
return;

@@ -273,4 +258,4 @@ }

pos = {
x: mouseEvent.offsetX ?? mouseEvent.clientX,
y: mouseEvent.offsetY ?? mouseEvent.clientY,
x: (_b = mouseEvent.offsetX) !== null && _b !== void 0 ? _b : mouseEvent.clientX,
y: (_c = mouseEvent.offsetY) !== null && _c !== void 0 ? _c : mouseEvent.clientY,
};

@@ -281,4 +266,4 @@ }

pos = {
x: mouseEvent.offsetX ?? mouseEvent.clientX,
y: mouseEvent.offsetY ?? mouseEvent.clientY,
x: (_d = mouseEvent.offsetX) !== null && _d !== void 0 ? _d : mouseEvent.clientX,
y: (_e = mouseEvent.offsetY) !== null && _e !== void 0 ? _e : mouseEvent.clientY,
};

@@ -289,6 +274,6 @@ }

this.canPush = e.type !== "touchmove";
const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvas?.getBoundingClientRect();
const touchEvent = e, lastTouch = touchEvent.touches[touchEvent.touches.length - 1], canvasRect = canvas === null || canvas === void 0 ? void 0 : canvas.getBoundingClientRect();
pos = {
x: lastTouch.clientX - (canvasRect?.left ?? 0),
y: lastTouch.clientY - (canvasRect?.top ?? 0),
x: lastTouch.clientX - ((_f = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _f !== void 0 ? _f : 0),
y: lastTouch.clientY - ((_g = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _g !== void 0 ? _g : 0),
};

@@ -295,0 +280,0 @@ }

3

esm/Core/Utils/ExternalInteractorBase.js
export class ExternalInteractorBase {
container;
type = 0;
constructor(container) {
this.container = container;
this.type = 0;
}
}

4

esm/Core/Utils/FrameManager.js

@@ -8,3 +8,2 @@ function initDelta(value, fpsLimit = 60, smooth = false) {

export class FrameManager {
container;
constructor(container) {

@@ -14,2 +13,3 @@ this.container = container;

async nextFrame(timestamp) {
var _a;
try {

@@ -23,3 +23,3 @@ const container = this.container;

}
container.lastFrameTime ??= timestamp;
(_a = container.lastFrameTime) !== null && _a !== void 0 ? _a : (container.lastFrameTime = timestamp);
const delta = initDelta(timestamp - container.lastFrameTime, container.fpsLimit, container.smooth);

@@ -26,0 +26,0 @@ container.lifeTime += delta.value;

5

esm/Core/Utils/InteractionManager.js
export class InteractionManager {
container;
_engine;
_externalInteractors;
_interactors;
_particleInteractors;
constructor(engine, container) {

@@ -8,0 +3,0 @@ this.container = container;

3

esm/Core/Utils/ParticlesInteractorBase.js
export class ParticlesInteractorBase {
container;
type = 1;
constructor(container) {
this.container = container;
this.type = 1;
}
}

9

esm/Core/Utils/Plugins.js

@@ -10,11 +10,2 @@ function getItemsFromInitializer(container, map, initializers, force = false) {

export class Plugins {
drawers;
interactors;
movers;
pathGenerators;
plugins;
presets;
updaters;
_engine;
_initializers;
constructor(engine) {

@@ -21,0 +12,0 @@ this._engine = engine;

2

esm/Core/Utils/Point.js
export class Point {
position;
particle;
constructor(position, particle) {

@@ -5,0 +3,0 @@ this.position = position;

29

esm/Core/Utils/QuadTree.js

@@ -5,10 +5,2 @@ import { Circle } from "./Circle";

export class QuadTree {
rectangle;
capacity;
_NE;
_NW;
_SE;
_SW;
_divided;
_points;
constructor(rectangle, capacity) {

@@ -21,2 +13,3 @@ this.rectangle = rectangle;

insert(point) {
var _a, _b, _c, _d, _e;
if (!this.rectangle.contains(point.position)) {

@@ -32,10 +25,10 @@ return false;

}
return ((this._NE?.insert(point) ||
this._NW?.insert(point) ||
this._SE?.insert(point) ||
this._SW?.insert(point)) ??
false);
return ((_e = (((_a = this._NE) === null || _a === void 0 ? void 0 : _a.insert(point)) ||
((_b = this._NW) === null || _b === void 0 ? void 0 : _b.insert(point)) ||
((_c = this._SE) === null || _c === void 0 ? void 0 : _c.insert(point)) ||
((_d = this._SW) === null || _d === void 0 ? void 0 : _d.insert(point)))) !== null && _e !== void 0 ? _e : false);
}
query(range, check, found) {
const res = found ?? [];
var _a, _b, _c, _d;
const res = found !== null && found !== void 0 ? found : [];
if (!range.intersects(this.rectangle)) {

@@ -53,6 +46,6 @@ return [];

if (this._divided) {
this._NE?.query(range, check, res);
this._NW?.query(range, check, res);
this._SE?.query(range, check, res);
this._SW?.query(range, check, res);
(_a = this._NE) === null || _a === void 0 ? void 0 : _a.query(range, check, res);
(_b = this._NW) === null || _b === void 0 ? void 0 : _b.query(range, check, res);
(_c = this._SE) === null || _c === void 0 ? void 0 : _c.query(range, check, res);
(_d = this._SW) === null || _d === void 0 ? void 0 : _d.query(range, check, res);
}

@@ -59,0 +52,0 @@ return res;

1

esm/Core/Utils/Range.js
export class Range {
position;
constructor(x, y) {

@@ -4,0 +3,0 @@ this.position = {

1

esm/Core/Utils/Rectangle.js
import { Circle } from "./Circle";
import { Range } from "./Range";
export class Rectangle extends Range {
size;
constructor(x, y, width, height) {

@@ -6,0 +5,0 @@ super(x, y);

5

esm/Core/Utils/Vector3d.js
export class Vector3d {
x;
y;
z;
constructor(xOrCoords, y, z) {

@@ -15,3 +12,3 @@ if (typeof xOrCoords !== "number" && xOrCoords) {

this.y = y;
this.z = z ?? 0;
this.z = z !== null && z !== void 0 ? z : 0;
}

@@ -18,0 +15,0 @@ else {

5

esm/engine.js

@@ -5,7 +5,2 @@ import { EventDispatcher } from "./Utils/EventDispatcher";

export class Engine {
plugins;
_domArray;
_eventDispatcher;
_initialized;
_loader;
constructor() {

@@ -12,0 +7,0 @@ this._domArray = [];

1

esm/Options/Classes/AnimatableColor.js
import { HslAnimation } from "./HslAnimation";
import { OptionsColor } from "./OptionsColor";
export class AnimatableColor extends OptionsColor {
animation;
constructor() {

@@ -6,0 +5,0 @@ super();

5

esm/Options/Classes/AnimationOptions.js
import { setRangeValue } from "../../Utils/NumberUtils";
export class AnimationOptions {
count;
decay;
enable;
speed;
sync;
constructor() {

@@ -9,0 +4,0 @@ this.count = 0;

6

esm/Options/Classes/Background/Background.js
import { OptionsColor } from "../OptionsColor";
export class Background {
color;
image;
opacity;
position;
repeat;
size;
constructor() {

@@ -10,0 +4,0 @@ this.color = new OptionsColor();

3

esm/Options/Classes/BackgroundMask/BackgroundMask.js
import { BackgroundMaskCover } from "./BackgroundMaskCover";
export class BackgroundMask {
composite;
cover;
enable;
constructor() {

@@ -7,0 +4,0 @@ this.composite = "destination-out";

2

esm/Options/Classes/BackgroundMask/BackgroundMaskCover.js
import { OptionsColor } from "../OptionsColor";
export class BackgroundMaskCover {
color;
opacity;
constructor() {

@@ -6,0 +4,0 @@ this.color = new OptionsColor();

6

esm/Options/Classes/ColorAnimation.js
import { setRangeValue } from "../../Utils/NumberUtils";
export class ColorAnimation {
count;
decay;
enable;
offset;
speed;
sync;
constructor() {

@@ -10,0 +4,0 @@ this.count = 0;

2

esm/Options/Classes/FullScreen/FullScreen.js
export class FullScreen {
enable;
zIndex;
constructor() {

@@ -5,0 +3,0 @@ this.enable = true;

3

esm/Options/Classes/HslAnimation.js
import { ColorAnimation } from "./ColorAnimation";
export class HslAnimation {
h;
l;
s;
constructor() {

@@ -7,0 +4,0 @@ this.h = new ColorAnimation();

2

esm/Options/Classes/Interactivity/Events/ClickEvent.js
export class ClickEvent {
enable;
mode;
constructor() {

@@ -5,0 +3,0 @@ this.enable = false;

7

esm/Options/Classes/Interactivity/Events/DivEvent.js
import { executeOnSingleOrMultiple } from "../../../../Utils/Utils";
export class DivEvent {
enable;
mode;
selectors;
type;
constructor() {

@@ -32,6 +28,7 @@ this.selectors = [];

load(data) {
var _a, _b;
if (!data) {
return;
}
const ids = data.ids ?? data.elementId ?? data.el;
const ids = (_b = (_a = data.ids) !== null && _a !== void 0 ? _a : data.elementId) !== null && _b !== void 0 ? _b : data.el;
if (ids !== undefined) {

@@ -38,0 +35,0 @@ this.ids = ids;

11

esm/Options/Classes/Interactivity/Events/Events.js

@@ -6,6 +6,2 @@ import { ClickEvent } from "./ClickEvent";

export class Events {
onClick;
onDiv;
onHover;
resize;
constructor() {

@@ -36,7 +32,8 @@ this.onClick = new ClickEvent();

load(data) {
var _a, _b, _c;
if (!data) {
return;
}
this.onClick.load(data.onClick ?? data.onclick);
const onDiv = data.onDiv ?? data.ondiv;
this.onClick.load((_a = data.onClick) !== null && _a !== void 0 ? _a : data.onclick);
const onDiv = (_b = data.onDiv) !== null && _b !== void 0 ? _b : data.ondiv;
if (onDiv !== undefined) {

@@ -49,3 +46,3 @@ this.onDiv = executeOnSingleOrMultiple(onDiv, (t) => {

}
this.onHover.load(data.onHover ?? data.onhover);
this.onHover.load((_c = data.onHover) !== null && _c !== void 0 ? _c : data.onhover);
if (data.resize !== undefined) {

@@ -52,0 +49,0 @@ this.resize = data.resize;

3

esm/Options/Classes/Interactivity/Events/HoverEvent.js
import { Parallax } from "./Parallax";
export class HoverEvent {
enable;
mode;
parallax;
constructor() {

@@ -7,0 +4,0 @@ this.enable = false;

3

esm/Options/Classes/Interactivity/Events/Parallax.js
export class Parallax {
enable;
force;
smooth;
constructor() {

@@ -6,0 +3,0 @@ this.enable = false;

6

esm/Options/Classes/Interactivity/Interactivity.js
import { Events } from "./Events/Events";
import { Modes } from "./Modes/Modes";
export class Interactivity {
detectsOn;
events;
modes;
constructor(engine, container) {

@@ -19,6 +16,7 @@ this.detectsOn = "window";

load(data) {
var _a;
if (!data) {
return;
}
const detectsOn = data.detectsOn ?? data.detect_on;
const detectsOn = (_a = data.detectsOn) !== null && _a !== void 0 ? _a : data.detect_on;
if (detectsOn !== undefined) {

@@ -25,0 +23,0 @@ this.detectsOn = detectsOn;

2

esm/Options/Classes/Interactivity/Modes/Modes.js
export class Modes {
_container;
_engine;
constructor(engine, container) {

@@ -5,0 +3,0 @@ this._engine = engine;

7

esm/Options/Classes/ManualParticle.js
import { deepExtend } from "../../Utils/Utils";
export class ManualParticle {
options;
position;
load(data) {
var _a, _b;
if (!data) {

@@ -11,4 +10,4 @@ return;

this.position = {
x: data.position.x ?? 50,
y: data.position.y ?? 50,
x: (_a = data.position.x) !== null && _a !== void 0 ? _a : 50,
y: (_b = data.position.y) !== null && _b !== void 0 ? _b : 50,
};

@@ -15,0 +14,0 @@ }

41

esm/Options/Classes/Options.js

@@ -12,24 +12,2 @@ import { deepExtend, executeOnSingleOrMultiple, safeMatchMedia } from "../../Utils/Utils";

export class Options {
autoPlay;
background;
backgroundMask;
defaultThemes;
delay;
detectRetina;
duration;
fpsLimit;
fullScreen;
interactivity;
manualParticles;
particles;
pauseOnBlur;
pauseOnOutsideViewport;
preset;
responsive;
smooth;
style;
themes;
zLayers;
_container;
_engine;
constructor(engine, container) {

@@ -77,2 +55,3 @@ this._engine = engine;

load(data) {
var _a, _b, _c, _d, _e;
if (!data) {

@@ -90,3 +69,3 @@ return;

}
const detectRetina = data.detectRetina ?? data.retina_detect;
const detectRetina = (_a = data.detectRetina) !== null && _a !== void 0 ? _a : data.retina_detect;
if (detectRetina !== undefined) {

@@ -98,3 +77,3 @@ this.detectRetina = detectRetina;

}
const fpsLimit = data.fpsLimit ?? data.fps_limit;
const fpsLimit = (_b = data.fpsLimit) !== null && _b !== void 0 ? _b : data.fps_limit;
if (fpsLimit !== undefined) {

@@ -113,3 +92,3 @@ this.fpsLimit = fpsLimit;

this.background.load(data.background);
const fullScreen = data.fullScreen ?? data.backgroundMode;
const fullScreen = (_c = data.fullScreen) !== null && _c !== void 0 ? _c : data.backgroundMode;
if (typeof fullScreen === "boolean") {

@@ -159,4 +138,4 @@ this.fullScreen.enable = fullScreen;

}
this.defaultThemes.dark = this._findDefaultTheme("dark")?.name;
this.defaultThemes.light = this._findDefaultTheme("light")?.name;
this.defaultThemes.dark = (_d = this._findDefaultTheme("dark")) === null || _d === void 0 ? void 0 : _d.name;
this.defaultThemes.light = (_e = this._findDefaultTheme("light")) === null || _e === void 0 ? void 0 : _e.name;
}

@@ -166,4 +145,4 @@ setResponsive(width, pxRatio, defaultOptions) {

const responsiveOptions = this.responsive.find((t) => t.mode === "screen" && screen ? t.maxWidth > screen.availWidth : t.maxWidth * pxRatio > width);
this.load(responsiveOptions?.options);
return responsiveOptions?.maxWidth;
this.load(responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.options);
return responsiveOptions === null || responsiveOptions === void 0 ? void 0 : responsiveOptions.maxWidth;
}

@@ -185,4 +164,4 @@ setTheme(name) {

_findDefaultTheme(mode) {
return (this.themes.find((theme) => theme.default.value && theme.default.mode === mode) ??
this.themes.find((theme) => theme.default.value && theme.default.mode === "any"));
var _a;
return ((_a = this.themes.find((theme) => theme.default.value && theme.default.mode === mode)) !== null && _a !== void 0 ? _a : this.themes.find((theme) => theme.default.value && theme.default.mode === "any"));
}

@@ -189,0 +168,0 @@ _importPreset(preset) {

3

esm/Options/Classes/OptionsColor.js
export class OptionsColor {
value;
constructor() {

@@ -20,3 +19,3 @@ this.value = "";

load(data) {
if (data?.value === undefined) {
if ((data === null || data === void 0 ? void 0 : data.value) === undefined) {
return;

@@ -23,0 +22,0 @@ }

2

esm/Options/Classes/Particles/Bounce/ParticlesBounce.js
import { ParticlesBounceFactor } from "./ParticlesBounceFactor";
export class ParticlesBounce {
horizontal;
vertical;
constructor() {

@@ -6,0 +4,0 @@ this.horizontal = new ParticlesBounceFactor();

5

esm/Options/Classes/Particles/Collisions/Collisions.js

@@ -5,7 +5,2 @@ import { CollisionsAbsorb } from "./CollisionsAbsorb";

export class Collisions {
absorb;
bounce;
enable;
mode;
overlap;
constructor() {

@@ -12,0 +7,0 @@ this.absorb = new CollisionsAbsorb();

1

esm/Options/Classes/Particles/Collisions/CollisionsAbsorb.js
export class CollisionsAbsorb {
speed;
constructor() {

@@ -4,0 +3,0 @@ this.speed = 2;

2

esm/Options/Classes/Particles/Collisions/CollisionsOverlap.js
export class CollisionsOverlap {
enable;
retries;
constructor() {

@@ -5,0 +3,0 @@ this.enable = true;

26

esm/Options/Classes/Particles/Move/Move.js

@@ -11,21 +11,2 @@ import { MoveAngle } from "./MoveAngle";

export class Move {
angle;
attract;
center;
decay;
direction;
distance;
drift;
enable;
gravity;
outModes;
path;
random;
size;
speed;
spin;
straight;
trail;
vibrate;
warp;
constructor() {

@@ -82,2 +63,3 @@ this.angle = new MoveAngle();

load(data) {
var _a, _b, _c;
if (!data) {

@@ -102,3 +84,3 @@ return;

}
: { ...data.distance };
: Object.assign({}, data.distance);
}

@@ -112,3 +94,3 @@ if (data.drift !== undefined) {

this.gravity.load(data.gravity);
const outModes = data.outModes ?? data.outMode ?? data.out_mode;
const outModes = (_b = (_a = data.outModes) !== null && _a !== void 0 ? _a : data.outMode) !== null && _b !== void 0 ? _b : data.out_mode;
if (outModes !== undefined) {

@@ -124,3 +106,3 @@ if (typeof outModes === "object") {

}
this.path.load(data.path ?? data.noise);
this.path.load((_c = data.path) !== null && _c !== void 0 ? _c : data.noise);
if (data.random !== undefined) {

@@ -127,0 +109,0 @@ this.random = data.random;

2

esm/Options/Classes/Particles/Move/MoveAngle.js
import { setRangeValue } from "../../../../Utils/NumberUtils";
export class MoveAngle {
offset;
value;
constructor() {

@@ -6,0 +4,0 @@ this.offset = 0;

8

esm/Options/Classes/Particles/Move/MoveAttract.js
import { setRangeValue } from "../../../../Utils/NumberUtils";
export class MoveAttract {
distance;
enable;
rotate;
constructor() {

@@ -27,2 +24,3 @@ this.distance = 200;

load(data) {
var _a, _b, _c, _d;
if (!data) {

@@ -37,7 +35,7 @@ return;

}
const rotateX = data.rotate?.x ?? data.rotateX;
const rotateX = (_b = (_a = data.rotate) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : data.rotateX;
if (rotateX !== undefined) {
this.rotate.x = rotateX;
}
const rotateY = data.rotate?.y ?? data.rotateY;
const rotateY = (_d = (_c = data.rotate) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : data.rotateY;
if (rotateY !== undefined) {

@@ -44,0 +42,0 @@ this.rotate.y = rotateY;

4

esm/Options/Classes/Particles/Move/MoveCenter.js
export class MoveCenter {
mode;
radius;
x;
y;
constructor() {

@@ -7,0 +3,0 @@ this.x = 50;

4

esm/Options/Classes/Particles/Move/MoveGravity.js
import { setRangeValue } from "../../../../Utils/NumberUtils";
export class MoveGravity {
acceleration;
enable;
inverse;
maxSpeed;
constructor() {

@@ -8,0 +4,0 @@ this.acceleration = 9.81;

3

esm/Options/Classes/Particles/Move/MoveTrail.js
import { OptionsColor } from "../../OptionsColor";
export class MoveTrail {
enable;
fillColor;
length;
constructor() {

@@ -7,0 +4,0 @@ this.enable = false;

14

esm/Options/Classes/Particles/Move/OutModes.js
export class OutModes {
bottom;
default;
left;
right;
top;
constructor() {

@@ -11,2 +6,3 @@ this.default = "out";

load(data) {
var _a, _b, _c, _d;
if (!data) {

@@ -18,7 +14,7 @@ return;

}
this.bottom = data.bottom ?? data.default;
this.left = data.left ?? data.default;
this.right = data.right ?? data.default;
this.top = data.top ?? data.default;
this.bottom = (_a = data.bottom) !== null && _a !== void 0 ? _a : data.default;
this.left = (_b = data.left) !== null && _b !== void 0 ? _b : data.default;
this.right = (_c = data.right) !== null && _c !== void 0 ? _c : data.default;
this.top = (_d = data.top) !== null && _d !== void 0 ? _d : data.default;
}
}

5

esm/Options/Classes/Particles/Move/Path/MovePath.js
import { ValueWithRandom } from "../../../ValueWithRandom";
import { deepExtend } from "../../../../../Utils/Utils";
export class MovePath {
clamp;
delay;
enable;
generator;
options;
constructor() {

@@ -10,0 +5,0 @@ this.clamp = true;

3

esm/Options/Classes/Particles/Move/Spin.js
import { deepExtend } from "../../../../Utils/Utils";
import { setRangeValue } from "../../../../Utils/NumberUtils";
export class Spin {
acceleration;
enable;
position;
constructor() {

@@ -8,0 +5,0 @@ this.acceleration = 0;

6

esm/Options/Classes/Particles/Number/ParticlesDensity.js
export class ParticlesDensity {
area;
enable;
factor;
constructor() {

@@ -17,2 +14,3 @@ this.enable = false;

load(data) {
var _a;
if (!data) {

@@ -24,3 +22,3 @@ return;

}
const area = data.area ?? data.value_area;
const area = (_a = data.area) !== null && _a !== void 0 ? _a : data.value_area;
if (area !== undefined) {

@@ -27,0 +25,0 @@ this.area = area;

6

esm/Options/Classes/Particles/Number/ParticlesNumber.js
import { ParticlesDensity } from "./ParticlesDensity";
export class ParticlesNumber {
density;
limit;
value;
constructor() {

@@ -18,2 +15,3 @@ this.density = new ParticlesDensity();

load(data) {
var _a;
if (!data) {

@@ -23,3 +21,3 @@ return;

this.density.load(data.density);
const limit = data.limit ?? data.max;
const limit = (_a = data.limit) !== null && _a !== void 0 ? _a : data.max;
if (limit !== undefined) {

@@ -26,0 +24,0 @@ this.limit = limit;

4

esm/Options/Classes/Particles/Opacity/Opacity.js

@@ -5,3 +5,2 @@ import { OpacityAnimation } from "./OpacityAnimation";

export class Opacity extends ValueWithRandom {
animation;
constructor() {

@@ -20,2 +19,3 @@ super();

load(data) {
var _a;
if (!data) {

@@ -25,3 +25,3 @@ return;

super.load(data);
const animation = data.animation ?? data.anim;
const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
if (animation !== undefined) {

@@ -28,0 +28,0 @@ this.animation.load(animation);

6

esm/Options/Classes/Particles/Opacity/OpacityAnimation.js
import { AnimationOptions } from "../../AnimationOptions";
export class OpacityAnimation extends AnimationOptions {
destroy;
minimumValue;
startValue;
constructor() {

@@ -21,2 +18,3 @@ super();

load(data) {
var _a;
if (!data) {

@@ -32,3 +30,3 @@ return;

}
this.minimumValue = data.minimumValue ?? data.opacity_min;
this.minimumValue = (_a = data.minimumValue) !== null && _a !== void 0 ? _a : data.opacity_min;
if (data.speed !== undefined) {

@@ -35,0 +33,0 @@ this.speed = data.speed;

23

esm/Options/Classes/Particles/ParticlesOptions.js

@@ -14,18 +14,2 @@ import { deepExtend, executeOnSingleOrMultiple } from "../../../Utils/Utils";

export class ParticlesOptions {
bounce;
collisions;
color;
groups;
interactivity;
move;
number;
opacity;
reduceDuplicates;
shadow;
shape;
size;
stroke;
zIndex;
_container;
_engine;
constructor(engine, container) {

@@ -50,2 +34,3 @@ this._engine = engine;

load(data) {
var _a, _b, _c, _d, _e, _f;
if (!data) {

@@ -60,3 +45,3 @@ return;

if (item !== undefined) {
this.groups[group] = deepExtend(this.groups[group] ?? {}, item);
this.groups[group] = deepExtend((_a = this.groups[group]) !== null && _a !== void 0 ? _a : {}, item);
}

@@ -75,3 +60,3 @@ }

this.zIndex.load(data.zIndex);
const collisions = data.move?.collisions ?? data.move?.bounce;
const collisions = (_c = (_b = data.move) === null || _b === void 0 ? void 0 : _b.collisions) !== null && _c !== void 0 ? _c : (_d = data.move) === null || _d === void 0 ? void 0 : _d.bounce;
if (collisions !== undefined) {

@@ -84,3 +69,3 @@ this.collisions.enable = collisions;

}
const strokeToLoad = data.stroke ?? data.shape?.stroke;
const strokeToLoad = (_e = data.stroke) !== null && _e !== void 0 ? _e : (_f = data.shape) === null || _f === void 0 ? void 0 : _f.stroke;
if (strokeToLoad) {

@@ -87,0 +72,0 @@ this.stroke = executeOnSingleOrMultiple(strokeToLoad, (t) => {

4

esm/Options/Classes/Particles/Shadow.js
import { OptionsColor } from "../OptionsColor";
export class Shadow {
blur;
color;
enable;
offset;
constructor() {

@@ -8,0 +4,0 @@ this.blur = 0;

23

esm/Options/Classes/Particles/Shape/Shape.js
import { deepExtend } from "../../../../Utils/Utils";
const charKey = "character", charAltKey = "char", imageKey = "image", imageAltKey = "images", polygonKey = "polygon", polygonAltKey = "star";
export class Shape {
options;
type;
constructor() {

@@ -11,3 +9,4 @@ this.options = {};

get character() {
return (this.options[charKey] ?? this.options[charAltKey]);
var _a;
return ((_a = this.options[charKey]) !== null && _a !== void 0 ? _a : this.options[charAltKey]);
}

@@ -24,3 +23,4 @@ set character(value) {

get image() {
return (this.options[imageKey] ?? this.options[imageAltKey]);
var _a;
return ((_a = this.options[imageKey]) !== null && _a !== void 0 ? _a : this.options[imageAltKey]);
}

@@ -37,3 +37,4 @@ set image(value) {

get polygon() {
return (this.options[polygonKey] ?? this.options[polygonAltKey]);
var _a;
return ((_a = this.options[polygonKey]) !== null && _a !== void 0 ? _a : this.options[polygonAltKey]);
}

@@ -49,6 +50,7 @@ set polygon(value) {

load(data) {
var _a, _b, _c;
if (!data) {
return;
}
const options = data.options ?? data.custom;
const options = (_a = data.options) !== null && _a !== void 0 ? _a : data.custom;
if (options !== undefined) {

@@ -58,3 +60,3 @@ for (const shape in options) {

if (item) {
this.options[shape] = deepExtend(this.options[shape] ?? {}, item);
this.options[shape] = deepExtend((_b = this.options[shape]) !== null && _b !== void 0 ? _b : {}, item);
}

@@ -65,3 +67,3 @@ }

this.loadShape(data.polygon, polygonKey, polygonAltKey, false);
this.loadShape(data.image ?? data.images, imageKey, imageAltKey, true);
this.loadShape((_c = data.image) !== null && _c !== void 0 ? _c : data.images, imageKey, imageAltKey, true);
if (data.type !== undefined) {

@@ -72,2 +74,3 @@ this.type = data.type;

loadShape(item, mainKey, altKey, altOverride) {
var _a, _b;
if (!item) {

@@ -84,7 +87,7 @@ return;

}
this.options[mainKey] = deepExtend(this.options[mainKey] ?? emptyValue, item);
this.options[mainKey] = deepExtend((_a = this.options[mainKey]) !== null && _a !== void 0 ? _a : emptyValue, item);
if (!this.options[altKey] || altOverride) {
this.options[altKey] = deepExtend(this.options[altKey] ?? emptyValue, item);
this.options[altKey] = deepExtend((_b = this.options[altKey]) !== null && _b !== void 0 ? _b : emptyValue, item);
}
}
}

4

esm/Options/Classes/Particles/Size/Size.js

@@ -5,3 +5,2 @@ import { SizeAnimation } from "./SizeAnimation";

export class Size extends ValueWithRandom {
animation;
constructor() {

@@ -20,2 +19,3 @@ super();

load(data) {
var _a;
super.load(data);

@@ -25,3 +25,3 @@ if (!data) {

}
const animation = data.animation ?? data.anim;
const animation = (_a = data.animation) !== null && _a !== void 0 ? _a : data.anim;
if (animation !== undefined) {

@@ -28,0 +28,0 @@ this.animation.load(animation);

6

esm/Options/Classes/Particles/Size/SizeAnimation.js
import { AnimationOptions } from "../../AnimationOptions";
export class SizeAnimation extends AnimationOptions {
destroy;
minimumValue;
startValue;
constructor() {

@@ -21,2 +18,3 @@ super();

load(data) {
var _a;
super.load(data);

@@ -32,3 +30,3 @@ if (!data) {

}
this.minimumValue = data.minimumValue ?? data.size_min;
this.minimumValue = (_a = data.minimumValue) !== null && _a !== void 0 ? _a : data.size_min;
if (data.speed !== undefined) {

@@ -35,0 +33,0 @@ this.speed = data.speed;

3

esm/Options/Classes/Particles/Stroke.js
import { AnimatableColor } from "../AnimatableColor";
export class Stroke {
color;
opacity;
width;
constructor() {

@@ -7,0 +4,0 @@ this.width = 0;

3

esm/Options/Classes/Particles/ZIndex/ZIndex.js
import { ValueWithRandom } from "../../ValueWithRandom";
export class ZIndex extends ValueWithRandom {
opacityRate;
sizeRate;
velocityRate;
constructor() {

@@ -7,0 +4,0 @@ super();

2

esm/Options/Classes/Random.js
export class Random {
enable;
minimumValue;
constructor() {

@@ -5,0 +3,0 @@ this.enable = false;

3

esm/Options/Classes/Responsive.js
import { deepExtend } from "../../Utils/Utils";
export class Responsive {
maxWidth;
mode;
options;
constructor() {

@@ -7,0 +4,0 @@ this.maxWidth = Infinity;

3

esm/Options/Classes/Theme/Theme.js
import { ThemeDefault } from "./ThemeDefault";
import { deepExtend } from "../../../Utils/Utils";
export class Theme {
default;
name;
options;
constructor() {

@@ -8,0 +5,0 @@ this.name = "";

3

esm/Options/Classes/Theme/ThemeDefault.js
export class ThemeDefault {
auto;
mode;
value;
constructor() {

@@ -6,0 +3,0 @@ this.auto = false;

2

esm/Options/Classes/ValueWithRandom.js
import { Random } from "./Random";
import { setRangeValue } from "../../Utils/NumberUtils";
export class ValueWithRandom {
random;
value;
constructor() {

@@ -7,0 +5,0 @@ this.random = new Random();

17

esm/Utils/CanvasUtils.js

@@ -16,3 +16,3 @@ import { getStyleFromRgb } from "./ColorUtils";

export function paintBase(context, dimension, baseColor) {
context.fillStyle = baseColor ?? "rgba(0,0,0,0)";
context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
context.fillRect(0, 0, dimension.width, dimension.height);

@@ -24,2 +24,3 @@ }

export function drawParticle(data) {
var _a, _b, _c, _d, _e, _f;
const { container, context, particle, delta, colorStyles, backgroundMask, composite, radius, opacity, shadow, transform, } = data;

@@ -30,6 +31,6 @@ const pos = particle.getPosition(), angle = particle.rotation + (particle.pathRotation ? particle.velocity.angle : 0), rotateData = {

}, transformData = {
a: rotateData.cos * (transform.a ?? 1),
b: rotateData.sin * (transform.b ?? 1),
c: -rotateData.sin * (transform.c ?? 1),
d: rotateData.cos * (transform.d ?? 1),
a: rotateData.cos * ((_a = transform.a) !== null && _a !== void 0 ? _a : 1),
b: rotateData.sin * ((_b = transform.b) !== null && _b !== void 0 ? _b : 1),
c: -rotateData.sin * ((_c = transform.c) !== null && _c !== void 0 ? _c : 1),
d: rotateData.cos * ((_d = transform.d) !== null && _d !== void 0 ? _d : 1),
};

@@ -52,3 +53,3 @@ context.setTransform(transformData.a, transformData.b, transformData.c, transformData.d, pos.x, pos.y);

const stroke = particle.stroke;
context.lineWidth = particle.strokeWidth ?? 0;
context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
if (colorStyles.stroke) {

@@ -58,3 +59,3 @@ context.strokeStyle = colorStyles.stroke;

drawShape(container, context, particle, radius, opacity, delta);
if ((stroke?.width ?? 0) > 0) {
if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
context.stroke();

@@ -87,3 +88,3 @@ }

const drawer = container.drawers.get(particle.shape);
if (!drawer?.afterEffect) {
if (!(drawer === null || drawer === void 0 ? void 0 : drawer.afterEffect)) {
return;

@@ -90,0 +91,0 @@ }

14

esm/Utils/ColorUtils.js

@@ -116,3 +116,4 @@ import { getRandom, getRangeValue, mix, randomInRange, setRangeValue } from "./NumberUtils";

export function stringToAlpha(input) {
return stringToRgba(input)?.a;
var _a;
return (_a = stringToRgba(input)) === null || _a === void 0 ? void 0 : _a.a;
}

@@ -156,3 +157,3 @@ export function stringToRgb(input) {

export function getRandomRgbColor(min) {
const fixedMin = min ?? 0;
const fixedMin = min !== null && min !== void 0 ? min : 0;
return {

@@ -165,6 +166,6 @@ b: Math.floor(randomInRange(setRangeValue(fixedMin, 256))),

export function getStyleFromRgb(color, opacity) {
return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity ?? 1})`;
return `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
}
export function getStyleFromHsl(color, opacity) {
return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity ?? 1})`;
return `hsla(${color.h}, ${color.s}%, ${color.l}%, ${opacity !== null && opacity !== void 0 ? opacity : 1})`;
}

@@ -186,2 +187,3 @@ export function colorMix(color1, color2, size1, size2) {

export function getLinkColor(p1, p2, linkColor) {
var _a, _b;
if (linkColor === randomColorValue) {

@@ -191,3 +193,3 @@ return getRandomRgbColor();

else if (linkColor === midColorValue) {
const sourceColor = p1.getFillColor() ?? p1.getStrokeColor(), destColor = p2?.getFillColor() ?? p2?.getStrokeColor();
const sourceColor = (_a = p1.getFillColor()) !== null && _a !== void 0 ? _a : p1.getStrokeColor(), destColor = (_b = p2 === null || p2 === void 0 ? void 0 : p2.getFillColor()) !== null && _b !== void 0 ? _b : p2 === null || p2 === void 0 ? void 0 : p2.getStrokeColor();
if (sourceColor && destColor && p2) {

@@ -197,3 +199,3 @@ return colorMix(sourceColor, destColor, p1.getRadius(), p2.getRadius());

else {
const hslColor = sourceColor ?? destColor;
const hslColor = sourceColor !== null && sourceColor !== void 0 ? sourceColor : destColor;
if (hslColor) {

@@ -200,0 +202,0 @@ return hslToRgb(hslColor);

7

esm/Utils/EventDispatcher.js
export class EventDispatcher {
_listeners;
constructor() {

@@ -7,2 +6,3 @@ this._listeners = new Map();

addEventListener(type, listener) {
var _a;
this.removeEventListener(type, listener);

@@ -12,6 +12,7 @@ if (!this._listeners.get(type)) {

}
this._listeners.get(type)?.push(listener);
(_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.push(listener);
}
dispatchEvent(type, args) {
this._listeners.get(type)?.forEach((handler) => handler(args));
var _a;
(_a = this._listeners.get(type)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => handler(args));
}

@@ -18,0 +19,0 @@ hasEventListener(type) {

8

esm/Utils/HslColorManager.js
import { getRangeValue, parseAlpha } from "./NumberUtils";
import { hslToRgb, hslaToRgba } from "./ColorUtils";
export class HslColorManager {
key;
stringPrefix;
constructor() {

@@ -11,3 +9,4 @@ this.key = "hsl";

handleColor(color) {
const colorValue = color.value, hslColor = colorValue.hsl ?? color.value;
var _a;
const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
if (hslColor.h !== undefined && hslColor.l !== undefined) {

@@ -18,3 +17,4 @@ return hslToRgb(hslColor);

handleRangeColor(color) {
const colorValue = color.value, hslColor = colorValue.hsl ?? color.value;
var _a;
const colorValue = color.value, hslColor = (_a = colorValue.hsl) !== null && _a !== void 0 ? _a : color.value;
if (hslColor.h !== undefined && hslColor.l !== undefined) {

@@ -21,0 +21,0 @@ return hslToRgb({

23

esm/Utils/NumberUtils.js

@@ -10,4 +10,5 @@ import { Vector } from "../Core/Utils/Vector";

export function getEasing(name) {
var _a;
const noEasing = (value) => value;
return easings.get(name) ?? noEasing;
return (_a = easings.get(name)) !== null && _a !== void 0 ? _a : noEasing;
}

@@ -120,11 +121,13 @@ export function setRandom(rnd = Math.random) {

export function calcPositionOrRandomFromSize(data) {
var _a, _b, _c, _d;
return {
x: ((data.position?.x ?? getRandom() * 100) * data.size.width) / 100,
y: ((data.position?.y ?? getRandom() * 100) * data.size.height) / 100,
x: (((_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * 100) * data.size.width) / 100,
y: (((_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * 100) * data.size.height) / 100,
};
}
export function calcPositionOrRandomFromSizeRanged(data) {
var _a, _b;
const position = {
x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined,
};

@@ -134,11 +137,13 @@ return calcPositionOrRandomFromSize({ size: data.size, position });

export function calcExactPositionOrRandomFromSize(data) {
var _a, _b, _c, _d;
return {
x: data.position?.x ?? getRandom() * data.size.width,
y: data.position?.y ?? getRandom() * data.size.height,
x: (_b = (_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : getRandom() * data.size.width,
y: (_d = (_c = data.position) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : getRandom() * data.size.height,
};
}
export function calcExactPositionOrRandomFromSizeRanged(data) {
var _a, _b;
const position = {
x: data.position?.x !== undefined ? getRangeValue(data.position.x) : undefined,
y: data.position?.y !== undefined ? getRangeValue(data.position.y) : undefined,
x: ((_a = data.position) === null || _a === void 0 ? void 0 : _a.x) !== undefined ? getRangeValue(data.position.x) : undefined,
y: ((_b = data.position) === null || _b === void 0 ? void 0 : _b.y) !== undefined ? getRangeValue(data.position.y) : undefined,
};

@@ -145,0 +150,0 @@ return calcExactPositionOrRandomFromSize({ size: data.size, position });

8

esm/Utils/RgbColorManager.js
import { getRangeValue, parseAlpha } from "./NumberUtils";
export class RgbColorManager {
key;
stringPrefix;
constructor() {

@@ -10,3 +8,4 @@ this.key = "rgb";

handleColor(color) {
const colorValue = color.value, rgbColor = colorValue.rgb ?? color.value;
var _a;
const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
if (rgbColor.r !== undefined) {

@@ -17,3 +16,4 @@ return rgbColor;

handleRangeColor(color) {
const colorValue = color.value, rgbColor = colorValue.rgb ?? color.value;
var _a;
const colorValue = color.value, rgbColor = (_a = colorValue.rgb) !== null && _a !== void 0 ? _a : color.value;
if (rgbColor.r !== undefined) {

@@ -20,0 +20,0 @@ return {

6

esm/Utils/Utils.js

@@ -51,5 +51,5 @@ import { collisionVelocity, getDistances, getRandom, getValue } from "./NumberUtils";

try {
await document.fonts.load(`${weight ?? "400"} 36px '${font ?? "Verdana"}'`);
await document.fonts.load(`${weight !== null && weight !== void 0 ? weight : "400"} 36px '${font !== null && font !== void 0 ? font : "Verdana"}'`);
}
catch {
catch (_a) {
}

@@ -64,3 +64,3 @@ }

export function isPointInside(point, size, offset, radius, direction) {
return areBoundsInside(calculateBounds(point, radius ?? 0), size, offset, direction);
return areBoundsInside(calculateBounds(point, radius !== null && radius !== void 0 ? radius : 0), size, offset, direction);
}

@@ -67,0 +67,0 @@ export function areBoundsInside(bounds, size, offset, direction) {

2

package.json
{
"name": "tsparticles-engine",
"version": "2.4.0",
"version": "2.5.0",
"description": "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.",

@@ -5,0 +5,0 @@ "homepage": "https://particles.js.org",

2

tsparticles.engine.min.js.LICENSE.txt
/*!
* tsParticles Engine v2.4.0
* tsParticles Engine v2.5.0
* Author: Matteo Bruni

@@ -4,0 +4,0 @@ * MIT license: https://opensource.org/licenses/MIT

report.html

Sorry, the diff of this file is not supported yet

tsparticles.engine.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc