tsparticles
Version:
Easily create highly customizable particle 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.
100 lines (99 loc) • 4.18 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageDrawer = void 0;
const Utils_1 = require("../Utils");
const Enums_1 = require("../Enums");
class ImageDrawer {
constructor() {
this.images = [];
}
getSidesCount() {
return 12;
}
getImages(container) {
const containerImages = this.images.filter((t) => t.id === container.id);
if (!containerImages.length) {
this.images.push({
id: container.id,
images: [],
});
return this.getImages(container);
}
return containerImages[0];
}
addImage(container, image) {
const containerImages = this.getImages(container);
containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
}
init(container) {
var _a;
return __awaiter(this, void 0, void 0, function* () {
const options = container.actualOptions;
const shapeOptions = options.particles.shape;
if (!Utils_1.Utils.isInArray(Enums_1.ShapeType.image, shapeOptions.type) &&
!Utils_1.Utils.isInArray(Enums_1.ShapeType.images, shapeOptions.type)) {
return;
}
const imageOptions = (_a = shapeOptions.options[Enums_1.ShapeType.images]) !== null && _a !== void 0 ? _a : shapeOptions.options[Enums_1.ShapeType.image];
if (imageOptions instanceof Array) {
for (const optionsImage of imageOptions) {
yield this.loadImageShape(container, optionsImage);
}
}
else {
yield this.loadImageShape(container, imageOptions);
}
});
}
destroy() {
this.images = [];
}
loadImageShape(container, imageShape) {
return __awaiter(this, void 0, void 0, function* () {
try {
const image = imageShape.replaceColor
? yield Utils_1.Utils.downloadSvgImage(imageShape.src)
: yield Utils_1.Utils.loadImage(imageShape.src);
if (image) {
this.addImage(container, image);
}
}
catch (_a) {
console.warn(`tsParticles error - ${imageShape.src} not found`);
}
});
}
draw(context, particle, radius, opacity) {
var _a, _b;
if (!context) {
return;
}
const image = particle.image;
const element = (_a = image === null || image === void 0 ? void 0 : image.data) === null || _a === void 0 ? void 0 : _a.element;
if (!element) {
return;
}
const ratio = (_b = image === null || image === void 0 ? void 0 : image.ratio) !== null && _b !== void 0 ? _b : 1;
const pos = {
x: -radius,
y: -radius,
};
if (!(image === null || image === void 0 ? void 0 : image.data.svgData) || !(image === null || image === void 0 ? void 0 : image.replaceColor)) {
context.globalAlpha = opacity;
}
context.drawImage(element, pos.x, pos.y, radius * 2, (radius * 2) / ratio);
if (!(image === null || image === void 0 ? void 0 : image.data.svgData) || !(image === null || image === void 0 ? void 0 : image.replaceColor)) {
context.globalAlpha = 1;
}
}
}
exports.ImageDrawer = ImageDrawer;