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.
228 lines (227 loc) • 11.1 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());
});
};
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 _ImageDrawer_images;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageDrawer = void 0;
const Utils_1 = require("../../Utils");
const Enums_1 = require("../../Enums");
const Utils_2 = require("./Utils");
class ImageDrawer {
constructor() {
_ImageDrawer_images.set(this, void 0);
__classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
}
getSidesCount() {
return 12;
}
getImages(container) {
const containerImages = __classPrivateFieldGet(this, _ImageDrawer_images, "f").find((t) => t.id === container.id);
if (!containerImages) {
__classPrivateFieldGet(this, _ImageDrawer_images, "f").push({
id: container.id,
images: [],
});
return this.getImages(container);
}
else {
return containerImages;
}
}
addImage(container, image) {
const containerImages = this.getImages(container);
containerImages === null || containerImages === void 0 ? void 0 : containerImages.images.push(image);
}
init(container) {
return __awaiter(this, void 0, void 0, function* () {
yield this.loadImagesFromParticlesOptions(container, container.actualOptions.particles);
yield this.loadImagesFromParticlesOptions(container, container.actualOptions.interactivity.modes.trail.particles);
for (const manualParticle of container.actualOptions.manualParticles) {
yield this.loadImagesFromParticlesOptions(container, manualParticle.options);
}
const emitterOptions = container.actualOptions;
if (emitterOptions.emitters) {
if (emitterOptions.emitters instanceof Array) {
for (const emitter of emitterOptions.emitters) {
yield this.loadImagesFromParticlesOptions(container, emitter.particles);
}
}
else {
yield this.loadImagesFromParticlesOptions(container, emitterOptions.emitters.particles);
}
}
const interactiveEmitters = emitterOptions.interactivity.modes.emitters;
if (interactiveEmitters) {
if (interactiveEmitters instanceof Array) {
for (const emitter of interactiveEmitters) {
yield this.loadImagesFromParticlesOptions(container, emitter.particles);
}
}
else {
yield this.loadImagesFromParticlesOptions(container, interactiveEmitters.particles);
}
}
});
}
destroy() {
__classPrivateFieldSet(this, _ImageDrawer_images, [], "f");
}
loadImagesFromParticlesOptions(container, options) {
var _a, _b, _c;
return __awaiter(this, void 0, void 0, function* () {
const shapeOptions = options === null || options === void 0 ? void 0 : options.shape;
if (!(shapeOptions === null || shapeOptions === void 0 ? void 0 : shapeOptions.type) ||
!shapeOptions.options ||
(!Utils_1.isInArray(Enums_1.ShapeType.image, shapeOptions.type) && !Utils_1.isInArray(Enums_1.ShapeType.images, shapeOptions.type))) {
return;
}
const idx = __classPrivateFieldGet(this, _ImageDrawer_images, "f").findIndex((t) => t.id === container.id);
if (idx >= 0) {
__classPrivateFieldGet(this, _ImageDrawer_images, "f").splice(idx, 1);
}
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);
}
if (options === null || options === void 0 ? void 0 : options.groups) {
for (const groupName in options.groups) {
const group = options.groups[groupName];
yield this.loadImagesFromParticlesOptions(container, group);
}
}
if ((_c = (_b = options === null || options === void 0 ? void 0 : options.destroy) === null || _b === void 0 ? void 0 : _b.split) === null || _c === void 0 ? void 0 : _c.particles) {
yield this.loadImagesFromParticlesOptions(container, options === null || options === void 0 ? void 0 : options.destroy.split.particles);
}
});
}
loadImageShape(container, imageShape) {
return __awaiter(this, void 0, void 0, function* () {
try {
const imageFunc = imageShape.replaceColor ? Utils_2.downloadSvgImage : Utils_2.loadImage;
const image = yield imageFunc(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;
}
}
loadShape(particle) {
var _a, _b, _c, _d, _e;
if (particle.shape !== "image" && particle.shape !== "images") {
return;
}
const images = this.getImages(particle.container).images;
const imageData = particle.shapeData;
const image = (_a = images.find((t) => t.source === imageData.src)) !== null && _a !== void 0 ? _a : images[0];
const color = particle.getFillColor();
let imageRes;
if (!image) {
return;
}
if (image.svgData !== undefined && imageData.replaceColor && color) {
const svgColoredData = Utils_2.replaceColorSvg(image, color, particle.opacity.value);
const svg = new Blob([svgColoredData], { type: "image/svg+xml" });
const domUrl = URL || window.URL || window.webkitURL || window;
const url = domUrl.createObjectURL(svg);
const img = new Image();
imageRes = {
data: Object.assign(Object.assign({}, image), { svgData: svgColoredData }),
ratio: imageData.width / imageData.height,
replaceColor: (_b = imageData.replaceColor) !== null && _b !== void 0 ? _b : imageData.replace_color,
source: imageData.src,
};
img.addEventListener("load", () => {
const pImage = particle.image;
if (pImage) {
pImage.loaded = true;
image.element = img;
}
domUrl.revokeObjectURL(url);
});
img.addEventListener("error", () => {
domUrl.revokeObjectURL(url);
Utils_2.loadImage(imageData.src).then((img2) => {
const pImage = particle.image;
if (pImage) {
image.element = img2 === null || img2 === void 0 ? void 0 : img2.element;
pImage.loaded = true;
}
});
});
img.src = url;
}
else {
imageRes = {
data: image,
loaded: true,
ratio: imageData.width / imageData.height,
replaceColor: (_c = imageData.replaceColor) !== null && _c !== void 0 ? _c : imageData.replace_color,
source: imageData.src,
};
}
if (!imageRes.ratio) {
imageRes.ratio = 1;
}
const fill = (_d = imageData.fill) !== null && _d !== void 0 ? _d : particle.fill;
const close = (_e = imageData.close) !== null && _e !== void 0 ? _e : particle.close;
const imageShape = {
image: imageRes,
fill,
close,
};
particle.image = imageShape.image;
particle.fill = imageShape.fill;
particle.close = imageShape.close;
}
}
exports.ImageDrawer = ImageDrawer;
_ImageDrawer_images = new WeakMap();