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.
59 lines (58 loc) • 2.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Grabber = void 0;
const Utils_1 = require("../../Utils");
const Modes_1 = require("../../Enums/Modes");
class Grabber {
constructor(container) {
this.container = container;
}
isEnabled() {
const container = this.container;
const mouse = container.interactivity.mouse;
const events = container.actualOptions.interactivity.events;
if (!(events.onHover.enable && mouse.position)) {
return false;
}
const hoverMode = events.onHover.mode;
return Utils_1.Utils.isInArray(Modes_1.HoverMode.grab, hoverMode);
}
reset() {
}
interact() {
var _a;
const container = this.container;
const options = container.actualOptions;
const interactivity = options.interactivity;
if (interactivity.events.onHover.enable && container.interactivity.status === Utils_1.Constants.mouseMoveEvent) {
const mousePos = container.interactivity.mouse.position;
if (mousePos === undefined) {
return;
}
const distance = container.retina.grabModeDistance;
const query = container.particles.quadTree.queryCircle(mousePos, distance);
for (const particle of query) {
const pos = particle.getPosition();
const pointDistance = Utils_1.NumberUtils.getDistance(pos, mousePos);
if (pointDistance <= distance) {
const grabLineOptions = interactivity.modes.grab.links;
const lineOpacity = grabLineOptions.opacity;
const opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
if (opacityLine > 0) {
const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : particle.options.links.color;
if (!container.particles.grabLineColor) {
const linksOptions = container.actualOptions.interactivity.modes.grab.links;
container.particles.grabLineColor = Utils_1.ColorUtils.getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
}
const colorLine = Utils_1.ColorUtils.getLinkColor(particle, undefined, container.particles.grabLineColor);
if (colorLine === undefined) {
return;
}
container.canvas.drawGrabLine(particle, colorLine, opacityLine, mousePos);
}
}
}
}
}
}
exports.Grabber = Grabber;