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.
320 lines (319 loc) • 12.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Canvas = void 0;
const Utils_1 = require("../Utils");
const Utils_2 = require("./Utils");
class Canvas {
constructor(container) {
this.container = container;
this.size = {
height: 0,
width: 0,
};
this.context = null;
this.generatedCanvas = false;
}
init() {
this.resize();
this.initStyle();
this.initCover();
this.initTrail();
this.initBackground();
this.paint();
}
loadCanvas(canvas) {
var _a;
if (this.generatedCanvas) {
(_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
}
this.generatedCanvas =
canvas.dataset && Utils_2.Constants.generatedAttribute in canvas.dataset
? canvas.dataset[Utils_2.Constants.generatedAttribute] === "true"
: this.generatedCanvas;
this.element = canvas;
this.originalStyle = (0, Utils_1.deepExtend)({}, this.element.style);
this.size.height = canvas.offsetHeight;
this.size.width = canvas.offsetWidth;
this.context = this.element.getContext("2d");
this.container.retina.init();
this.initBackground();
}
destroy() {
var _a;
if (this.generatedCanvas) {
(_a = this.element) === null || _a === void 0 ? void 0 : _a.remove();
}
this.draw((ctx) => {
(0, Utils_1.clear)(ctx, this.size);
});
}
paint() {
const options = this.container.actualOptions;
this.draw((ctx) => {
if (options.backgroundMask.enable && options.backgroundMask.cover) {
(0, Utils_1.clear)(ctx, this.size);
this.paintBase(this.coverColorStyle);
}
else {
this.paintBase();
}
});
}
clear() {
const options = this.container.actualOptions;
const trail = options.particles.move.trail;
if (options.backgroundMask.enable) {
this.paint();
}
else if (trail.enable && trail.length > 0 && this.trailFillColor) {
this.paintBase((0, Utils_1.getStyleFromRgb)(this.trailFillColor, 1 / trail.length));
}
else {
this.draw((ctx) => {
(0, Utils_1.clear)(ctx, this.size);
});
}
}
async windowResize() {
if (!this.element) {
return;
}
const container = this.container;
this.resize();
const needsRefresh = container.updateActualOptions();
container.particles.setDensity();
for (const [, plugin] of container.plugins) {
if (plugin.resize !== undefined) {
plugin.resize();
}
}
if (needsRefresh) {
await container.refresh();
}
}
resize() {
if (!this.element) {
return;
}
const container = this.container;
const pxRatio = container.retina.pixelRatio;
const size = container.canvas.size;
const oldSize = Object.assign({}, size);
size.width = this.element.offsetWidth * pxRatio;
size.height = this.element.offsetHeight * pxRatio;
this.element.width = size.width;
this.element.height = size.height;
if (this.container.started) {
this.resizeFactor = {
width: size.width / oldSize.width,
height: size.height / oldSize.height,
};
}
}
drawConnectLine(p1, p2) {
this.draw((ctx) => {
var _a;
const lineStyle = this.lineStyle(p1, p2);
if (!lineStyle) {
return;
}
const pos1 = p1.getPosition();
const pos2 = p2.getPosition();
(0, Utils_1.drawConnectLine)(ctx, (_a = p1.retina.linksWidth) !== null && _a !== void 0 ? _a : this.container.retina.linksWidth, lineStyle, pos1, pos2);
});
}
drawGrabLine(particle, lineColor, opacity, mousePos) {
const container = this.container;
this.draw((ctx) => {
var _a;
const beginPos = particle.getPosition();
(0, Utils_1.drawGrabLine)(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : container.retina.linksWidth, beginPos, mousePos, lineColor, opacity);
});
}
drawParticle(particle, delta) {
var _a, _b, _c, _d, _e, _f;
if (particle.spawning || particle.destroyed) {
return;
}
const pfColor = particle.getFillColor();
const psColor = (_a = particle.getStrokeColor()) !== null && _a !== void 0 ? _a : pfColor;
if (!pfColor && !psColor) {
return;
}
let [fColor, sColor] = this.getPluginParticleColors(particle);
const pOptions = particle.options;
const twinkle = pOptions.twinkle.particles;
const twinkling = twinkle.enable && Math.random() < twinkle.frequency;
if (!fColor || !sColor) {
const twinkleRgb = (0, Utils_1.colorToHsl)(twinkle.color);
if (!fColor) {
fColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : pfColor ? pfColor : undefined;
}
if (!sColor) {
sColor = twinkling && twinkleRgb !== undefined ? twinkleRgb : psColor ? psColor : undefined;
}
}
const options = this.container.actualOptions;
const zIndexOptions = particle.options.zIndex;
const zOpacityFactor = (1 - particle.zIndexFactor) ** zIndexOptions.opacityRate;
const radius = particle.getRadius();
const opacity = twinkling
? (0, Utils_1.getRangeValue)(twinkle.opacity)
: (_d = (_b = particle.bubble.opacity) !== null && _b !== void 0 ? _b : (_c = particle.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 1;
const strokeOpacity = (_f = (_e = particle.stroke) === null || _e === void 0 ? void 0 : _e.opacity) !== null && _f !== void 0 ? _f : opacity;
const zOpacity = opacity * zOpacityFactor;
const fillColorValue = fColor ? (0, Utils_1.getStyleFromHsl)(fColor, zOpacity) : undefined;
if (!fillColorValue && !sColor) {
return;
}
this.draw((ctx) => {
const zSizeFactor = (1 - particle.zIndexFactor) ** zIndexOptions.sizeRate;
const zStrokeOpacity = strokeOpacity * zOpacityFactor;
const strokeColorValue = sColor ? (0, Utils_1.getStyleFromHsl)(sColor, zStrokeOpacity) : fillColorValue;
if (radius <= 0) {
return;
}
const container = this.container;
for (const updater of container.particles.updaters) {
if (updater.beforeDraw) {
updater.beforeDraw(particle);
}
}
(0, Utils_1.drawParticle)(this.container, ctx, particle, delta, fillColorValue, strokeColorValue, options.backgroundMask.enable, options.backgroundMask.composite, radius * zSizeFactor, zOpacity, particle.options.shadow, particle.gradient);
for (const updater of container.particles.updaters) {
if (updater.afterDraw) {
updater.afterDraw(particle);
}
}
});
}
drawPlugin(plugin, delta) {
this.draw((ctx) => {
(0, Utils_1.drawPlugin)(ctx, plugin, delta);
});
}
drawParticlePlugin(plugin, particle, delta) {
this.draw((ctx) => {
(0, Utils_1.drawParticlePlugin)(ctx, plugin, particle, delta);
});
}
initBackground() {
const options = this.container.actualOptions;
const background = options.background;
const element = this.element;
const elementStyle = element === null || element === void 0 ? void 0 : element.style;
if (!elementStyle) {
return;
}
if (background.color) {
const color = (0, Utils_1.colorToRgb)(background.color);
elementStyle.backgroundColor = color ? (0, Utils_1.getStyleFromRgb)(color, background.opacity) : "";
}
else {
elementStyle.backgroundColor = "";
}
elementStyle.backgroundImage = background.image || "";
elementStyle.backgroundPosition = background.position || "";
elementStyle.backgroundRepeat = background.repeat || "";
elementStyle.backgroundSize = background.size || "";
}
draw(cb) {
if (!this.context) {
return;
}
return cb(this.context);
}
initCover() {
const options = this.container.actualOptions;
const cover = options.backgroundMask.cover;
const color = cover.color;
const coverRgb = (0, Utils_1.colorToRgb)(color);
if (coverRgb) {
const coverColor = {
r: coverRgb.r,
g: coverRgb.g,
b: coverRgb.b,
a: cover.opacity,
};
this.coverColorStyle = (0, Utils_1.getStyleFromRgb)(coverColor, coverColor.a);
console.log(this.coverColorStyle);
}
}
initTrail() {
const options = this.container.actualOptions;
const trail = options.particles.move.trail;
const fillColor = (0, Utils_1.colorToRgb)(trail.fillColor);
if (fillColor) {
const trail = options.particles.move.trail;
this.trailFillColor = {
r: fillColor.r,
g: fillColor.g,
b: fillColor.b,
a: 1 / trail.length,
};
}
}
getPluginParticleColors(particle) {
let fColor;
let sColor;
for (const [, plugin] of this.container.plugins) {
if (!fColor && plugin.particleFillColor) {
fColor = (0, Utils_1.colorToHsl)(plugin.particleFillColor(particle));
}
if (!sColor && plugin.particleStrokeColor) {
sColor = (0, Utils_1.colorToHsl)(plugin.particleStrokeColor(particle));
}
if (fColor && sColor) {
break;
}
}
return [fColor, sColor];
}
initStyle() {
const element = this.element, options = this.container.actualOptions;
if (!element) {
return;
}
const originalStyle = this.originalStyle;
if (options.fullScreen.enable) {
this.originalStyle = (0, Utils_1.deepExtend)({}, element.style);
element.style.setProperty("position", "fixed", "important");
element.style.setProperty("z-index", options.fullScreen.zIndex.toString(10), "important");
element.style.setProperty("top", "0", "important");
element.style.setProperty("left", "0", "important");
element.style.setProperty("width", "100%", "important");
element.style.setProperty("height", "100%", "important");
}
else if (originalStyle) {
element.style.position = originalStyle.position;
element.style.zIndex = originalStyle.zIndex;
element.style.top = originalStyle.top;
element.style.left = originalStyle.left;
element.style.width = originalStyle.width;
element.style.height = originalStyle.height;
}
for (const key in options.style) {
if (!key || !options.style) {
continue;
}
const value = options.style[key];
if (!value) {
continue;
}
element.style.setProperty(key, value, "important");
}
}
paintBase(baseColor) {
this.draw((ctx) => {
(0, Utils_1.paintBase)(ctx, this.size, baseColor);
});
}
lineStyle(p1, p2) {
return this.draw((ctx) => {
const options = this.container.actualOptions;
const connectOptions = options.interactivity.modes.connect;
return (0, Utils_1.gradient)(ctx, p1, p2, connectOptions.links.opacity);
});
}
}
exports.Canvas = Canvas;