Estoy escribiendo un proyecto de aplicación de reacción js que incluirá un componente que debería verse como las siguientes imágenes:

Los requisitos son:

1. El usuario debe poder mover los círculos dentro de la cuadrícula con el mouse
2. Ajuste de cuadrícula: los círculos solo se pueden colocar en cruces de línea de cuadrícula
3. Los círculos no se pueden colocar uno encima del otro; se colocará automáticamente en el cruce de línea de cuadrícula más cercano.
4. La línea se dibuja automáticamente.
5. La línea debe comenzar en una posición fija y debe cruzar los círculos.
6. La línea debe ser curva.
7. Tendré que guardar las coordenadas X e Y de los círculos en un estado de reacción

No estoy seguro de si escribir algo desde cero con javascript simple o usar algunos paquetes npm existentes.

Intenté buscar algunas bibliotecas existentes, hasta ahora intenté hacerlo con Konva js. Todavía no estoy seguro de si puede cumplir con todos los requisitos.

Esta es la muestra de código que hice en code sandbox , crea círculos, pero no estoy seguro de cómo implementar todos los requisitos anteriores.

¿Algunas ideas?