83 lines
3.6 KiB
JavaScript
83 lines
3.6 KiB
JavaScript
import { ExternalInteractorBase, drawLine, getDistance, getLinkColor, getLinkRandomColor, getStyleFromRgb, isInArray, mouseMoveEvent, } from "tsparticles-engine";
|
|
import { Grab } from "./Options/Classes/Grab";
|
|
export function drawGrabLine(context, width, begin, end, colorLine, opacity) {
|
|
drawLine(context, begin, end);
|
|
context.strokeStyle = getStyleFromRgb(colorLine, opacity);
|
|
context.lineWidth = width;
|
|
context.stroke();
|
|
}
|
|
function drawGrab(container, particle, lineColor, opacity, mousePos) {
|
|
container.canvas.draw((ctx) => {
|
|
var _a;
|
|
const beginPos = particle.getPosition();
|
|
drawGrabLine(ctx, (_a = particle.retina.linksWidth) !== null && _a !== void 0 ? _a : 0, beginPos, mousePos, lineColor, opacity);
|
|
});
|
|
}
|
|
export class Grabber extends ExternalInteractorBase {
|
|
constructor(container) {
|
|
super(container);
|
|
}
|
|
clear() {
|
|
}
|
|
init() {
|
|
const container = this.container, grab = container.actualOptions.interactivity.modes.grab;
|
|
if (!grab) {
|
|
return;
|
|
}
|
|
container.retina.grabModeDistance = grab.distance * container.retina.pixelRatio;
|
|
}
|
|
async interact() {
|
|
var _a, _b;
|
|
const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
|
|
if (!interactivity.modes.grab ||
|
|
!interactivity.events.onHover.enable ||
|
|
container.interactivity.status !== mouseMoveEvent) {
|
|
return;
|
|
}
|
|
const mousePos = container.interactivity.mouse.position;
|
|
if (!mousePos) {
|
|
return;
|
|
}
|
|
const distance = container.retina.grabModeDistance;
|
|
if (!distance || distance < 0) {
|
|
return;
|
|
}
|
|
const query = container.particles.quadTree.queryCircle(mousePos, distance, (p) => this.isEnabled(p));
|
|
for (const particle of query) {
|
|
const pos = particle.getPosition(), pointDistance = getDistance(pos, mousePos);
|
|
if (pointDistance > distance) {
|
|
continue;
|
|
}
|
|
const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
|
|
if (opacityLine <= 0) {
|
|
continue;
|
|
}
|
|
const optColor = (_a = grabLineOptions.color) !== null && _a !== void 0 ? _a : (_b = particle.options.links) === null || _b === void 0 ? void 0 : _b.color;
|
|
if (!container.particles.grabLineColor && optColor) {
|
|
const linksOptions = interactivity.modes.grab.links;
|
|
container.particles.grabLineColor = getLinkRandomColor(optColor, linksOptions.blink, linksOptions.consent);
|
|
}
|
|
const colorLine = getLinkColor(particle, undefined, container.particles.grabLineColor);
|
|
if (!colorLine) {
|
|
return;
|
|
}
|
|
drawGrab(container, particle, colorLine, opacityLine, mousePos);
|
|
}
|
|
}
|
|
isEnabled(particle) {
|
|
var _a;
|
|
const container = this.container, mouse = container.interactivity.mouse, events = ((_a = particle === null || particle === void 0 ? void 0 : particle.interactivity) !== null && _a !== void 0 ? _a : container.actualOptions.interactivity).events;
|
|
return events.onHover.enable && !!mouse.position && isInArray("grab", events.onHover.mode);
|
|
}
|
|
loadModeOptions(options, ...sources) {
|
|
if (!options.grab) {
|
|
options.grab = new Grab();
|
|
}
|
|
for (const source of sources) {
|
|
options.grab.load(source === null || source === void 0 ? void 0 : source.grab);
|
|
}
|
|
}
|
|
reset() {
|
|
}
|
|
}
|