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.
55 lines (54 loc) • 2.6 kB
JavaScript
import { Constants, Utils, ColorUtils, NumberUtils } from "../../Utils";
import { HoverMode } from "../../Enums/Modes";
export 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.isInArray(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 === 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 = 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 = ColorUtils.getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
}
const colorLine = ColorUtils.getLinkColor(particle, undefined, container.particles.grabLineColor);
if (colorLine === undefined) {
return;
}
container.canvas.drawGrabLine(particle, colorLine, opacityLine, mousePos);
}
}
}
}
}
}