@tsparticles/interaction-external-grab
Version:
tsParticles grab external interaction
164 lines (155 loc) • 10.1 kB
JavaScript
(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
/* External Interaction v4.1.0 */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/plugin-interactivity'), require('@tsparticles/engine'), require('@tsparticles/canvas-utils')) :
typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/plugin-interactivity', '@tsparticles/engine', '@tsparticles/canvas-utils'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.interactions = global.__tsParticlesInternals.interactions || {}, global.__tsParticlesInternals.interactions.externalGrab = global.__tsParticlesInternals.interactions.externalGrab || {}), global.__tsParticlesInternals.plugins.interactivity, global.__tsParticlesInternals.engine, global.__tsParticlesInternals.canvas.utils));
})(this, (function (exports, pluginInteractivity, engine, canvasUtils) { 'use strict';
class GrabLinks {
blink;
color;
consent;
opacity;
constructor() {
this.blink = false;
this.consent = false;
this.opacity = 1;
}
load(data) {
if (engine.isNull(data)) {
return;
}
if (data.blink !== undefined) {
this.blink = data.blink;
}
if (data.color !== undefined) {
this.color = engine.OptionsColor.create(this.color, data.color);
}
if (data.consent !== undefined) {
this.consent = data.consent;
}
if (data.opacity !== undefined) {
this.opacity = data.opacity;
}
}
}
class Grab {
distance;
links;
constructor() {
this.distance = 100;
this.links = new GrabLinks();
}
load(data) {
if (engine.isNull(data)) {
return;
}
if (data.distance !== undefined) {
this.distance = data.distance;
}
this.links.load(data.links);
}
}
const defaultWidth = 0;
function drawGrabLine(context, width, begin, end, colorLine, opacity, hdr = false) {
canvasUtils.drawLine(context, begin, end);
context.strokeStyle = engine.getStyleFromRgb(colorLine, hdr, opacity);
context.lineWidth = width;
context.stroke();
}
function drawGrab(container, particle, lineColor, opacity, mousePos) {
container.canvas.render.draw(ctx => {
const beginPos = particle.getPosition();
drawGrabLine(ctx, particle.retina.linksWidth ?? defaultWidth, beginPos, mousePos, lineColor, opacity, container.hdr);
});
}
const grabMode = "grab", minDistance = 0, minOpacity = 0;
class Grabber extends pluginInteractivity.ExternalInteractorBase {
#maxDistance;
#pluginManager;
constructor(pluginManager, container) {
super(container);
this.#pluginManager = pluginManager;
this.#maxDistance = 0;
}
get maxDistance() {
return this.#maxDistance;
}
clear() {
}
init() {
const container = this.container, grab = container.actualOptions.interactivity?.modes.grab;
if (!grab) {
return;
}
this.#maxDistance = grab.distance;
container.retina.grabModeDistance = grab.distance * container.retina.pixelRatio;
}
interact(interactivityData) {
const container = this.container, options = container.actualOptions, interactivity = options.interactivity;
if (!interactivity?.modes.grab ||
!interactivity.events.onHover.enable ||
interactivityData.status !== pluginInteractivity.mouseMoveEvent) {
return;
}
const mousePos = interactivityData.mouse.position;
if (!mousePos) {
return;
}
const distance = container.retina.grabModeDistance;
if (!distance || distance < minDistance) {
return;
}
const query = container.particles.grid.queryCircle(mousePos, distance, p => this.isEnabled(interactivityData, p));
for (const particle of query) {
const pos = particle.getPosition(), pointDistance = engine.getDistance(pos, mousePos);
if (pointDistance > distance) {
continue;
}
const grabLineOptions = interactivity.modes.grab.links, lineOpacity = grabLineOptions.opacity, opacityLine = lineOpacity - (pointDistance * lineOpacity) / distance;
if (opacityLine <= minOpacity) {
continue;
}
const optColor = grabLineOptions.color ?? particle.options.links?.color;
if (!container.particles.grabLineColor && optColor) {
const linksOptions = interactivity.modes.grab.links;
container.particles.grabLineColor = engine.getLinkRandomColor(this.#pluginManager, optColor, linksOptions.blink, linksOptions.consent);
}
const colorLine = engine.getLinkColor(particle, undefined, container.particles.grabLineColor);
if (!colorLine) {
continue;
}
drawGrab(container, particle, colorLine, opacityLine, mousePos);
}
}
isEnabled(interactivityData, particle) {
const container = this.container, mouse = interactivityData.mouse, events = (particle?.interactivity ?? container.actualOptions.interactivity)?.events;
return !!events?.onHover.enable && !!mouse.position && engine.isInArray(grabMode, events.onHover.mode);
}
loadModeOptions(options, ...sources) {
options.grab ??= new Grab();
for (const source of sources) {
options.grab.load(source?.grab);
}
}
reset() {
}
}
async function loadExternalGrabInteraction(engine) {
engine.checkVersion("4.1.0");
await engine.pluginManager.register((e) => {
pluginInteractivity.ensureInteractivityPluginLoaded(e);
e.pluginManager.addInteractor?.("externalGrab", container => {
return Promise.resolve(new Grabber(e.pluginManager, container));
});
});
}
const globalObject = globalThis;
globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
globalObject.loadExternalGrabInteraction = loadExternalGrabInteraction;
exports.Grab = Grab;
exports.GrabLinks = GrabLinks;
exports.loadExternalGrabInteraction = loadExternalGrabInteraction;
}));
Object.assign(globalThis.window || globalThis, { loadExternalGrabInteraction: (globalThis.__tsParticlesInternals.interactions.externalGrab || {}).loadExternalGrabInteraction });
delete (globalThis.window || globalThis).tsparticlesInternalExports;