Configuré una flecha con fabric.js usando una línea y un triángulo girado 90 grados. Los he configurado en un grupo para que se muevan juntos.

Cuando hago doble clic en la flecha, se coloca un círculo en cada extremo de la línea de la flecha. Cuando muevo estos círculos, quiero que el extremo correspondiente de la flecha se mueva hacia donde mi puntero se mueva mientras el otro extremo permanece en su lugar.

Actualmente, cuando muevo uno de los círculos, la línea de la flecha se aleja de su posición actual y luego, cuando muevo el círculo, la línea actualiza su posición desde el lugar al que se desplaza. Supongo que este cambio está ocurriendo porque me falta algo con el grupo.

Aquí está mi función que maneja cuando se mueve un círculo:

 handleDrag: function(obj) { const pointer = obj.pointer const target = obj.transform.target const line = target.line line.set({ x1: line.x1, y1: line.y1, x2: pointer.x, y2: pointer.y, }) line.setCoords() },

El target sería el círculo que se está moviendo y cuando agrego el círculo le doy la línea que se supone que debe moverse para poder usar target.line para obtener la línea y actualizar sus coordenadas.

Aquí hay un codepen para que pueda ver lo que está sucediendo ahora:
https://codepen.io/jrabes/pen/ExoJZgJ