Реакция-форс-граф-2d: onNodeClick не срабатывает при быстром нажатии узлов, если определен onBackgroundClick ⇐ Javascript

[Anonymous]

Я использую response-force-graph-2d
в приложении React и заметил странное поведение щелчков, когда определены как onNodeClick, так и onBackgroundClick.
Вот минимальный воспроизводимый пример:
StackBlitz

Код: Выделить всё

'use client';
import { useState } from 'react';
import ForceGraph2D from 'react-force-graph-2d';

type Node = {
id: number;
name: string;
x: number;
y: number;
};

const createNodes = (): Node[] => [
{ id: 1, name: 'Node 1', x: 50, y: 50 },
{ id: 2, name: 'Node 2', x: -50, y: 50 },
{ id: 3, name: 'Node 3', x: 50, y: -50 },
{ id: 4, name: 'Node 4', x: -50, y: -50 },
];

export default function App() {
const [nodes] = useState(createNodes);
const [selectedNodeId, setSelectedNodeId] = useState(null);

const handleNodeClick = (node: Node) => {
console.log('Node clicked:', node);
setSelectedNodeId((prev) => (prev === node.id ? null : node.id));
};

const handleBackgroundClick = () => {
console.log('Background clicked');
setSelectedNodeId(null);
};

const renderNode = (node: Node, ctx: CanvasRenderingContext2D) => {
const width = 50;
const height = 50;
const isSelected = selectedNodeId === node.id;

ctx.fillStyle = '#aaaaaaff';
ctx.fillRect(node.x - width / 2, node.y - height / 2, width, height);

if (isSelected) {
ctx.strokeStyle = '#000000';
ctx.lineWidth = 2;
ctx.strokeRect(node.x - width / 2, node.y - height / 2, width, height);
}
};

return (

);
}

Проблема
Когда я быстро нажимаю на узел (сразу после наведения на него курсора мыши), ничего не происходит — ни onNodeClick, ни onBackgroundClick не срабатывает.
Если я приостанавливаю курсор на некоторое время перед щелчком, onNodeClick работает правильно.
Если я удалю onBackgroundClick, быстрые клики будут работать отлично, а onNodeClick всегда сработает.
Похоже, что простое определение onBackgroundClick каким-то образом меняет время обработки событий или обнаружение попаданий, хотя на самом деле в этих случаях оно не срабатывает.
Что я сделал Соблюдается

• Код: Выделить всё

  onBackgroundClick

  сам по себе не срабатывает сразу — он срабатывает только после небольшой задержки, когда мышь останавливается.
• Когда определены оба обратных вызова, быстрые щелчки не запускают ни один из них.
• Проблема полностью исчезает после удаления onBackgroundClick.

Вопрос
Почему определение onBackgroundClick приводит к тому, что onNodeClick не срабатывает при быстрых щелчках?
Как обеспечить надежную работу onNodeClick, даже если onBackgroundClick также подарок?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ckly-if-on