correccion direccion

public/js/piscina.js

@@ -308,15 +308,33 @@ tipoPiscinaSelect.addEventListener('change', async () => {
     showPopover(circle.x(), circle.y(), html);
   });
 
-  circle.on('dragend', () => {
+circle.on('dragend', () => {
   const newX = circle.x();
   const newY = circle.y();
   const i = formacionActual.findIndex(a => a.idPersonalizado === atleta.idPersonalizado);
   if (i !== -1) {
     formacionActual[i].x = newX;
     formacionActual[i].y = newY;
+
+    // Si hay dirección, recalcular puntos
+    if (formacionActual[i].direccion && atletasKonva[atleta.idPersonalizado].flecha) {
+      const dir = formacionActual[i].direccion;
+      const dx = dir.x2 - dir.x1;
+      const dy = dir.y2 - dir.y1;
+
+      // Actualizar punto de partida y final relativo a nueva posición
+      dir.x1 = newX;
+      dir.y1 = newY;
+      dir.x2 = newX + dx;
+      dir.y2 = newY + dy;
+
+      atletasKonva[atleta.idPersonalizado].flecha.points([
+        dir.x1, dir.y1, dir.x2, dir.y2
+      ]);
+    }
   }
 
+  // Actualiza visualmente los textos
   const nuevosMetros = convertirAMetros(newX, newY);
   coordText.text(`${nuevosMetros.metrosX}m, ${nuevosMetros.metrosY}m`);
   coordText.x(newX - 35);
@@ -328,15 +346,9 @@ tipoPiscinaSelect.addEventListener('change', async () => {
   figuraText.x(newX - 25);
   figuraText.y(newY + 18);
 
-    if (flecha) {
-      // Actualiza flecha si existe
-      const dx = atleta.direccion.x2 - atleta.direccion.x1;
-      const dy = atleta.direccion.y2 - atleta.direccion.y1;
-      flecha.points([newX, newY, newX + dx, newY + dy]);
-    }
-
   layer.batchDraw();
-  });
+});
+
 
   layer.add(circle);
   layer.add(text);
@@ -363,12 +375,13 @@ tipoPiscinaSelect.addEventListener('change', async () => {
     alert('Haz clic para trazar dirección.');
   }
 
-  stage.on('mousedown', () => {
+stage.on('mousedown', () => {
   if (!modoDireccion || indexAtletaDireccion === null) return;
 
   const start = stage.getPointerPosition();
   const atleta = formacionActual[indexAtletaDireccion];
-const linea = new Konva.Arrow({
+
+  const linea = new Konva.Arrow({
     points: [start.x, start.y, start.x, start.y],
     stroke: 'black',
     fill: 'black',
@@ -376,7 +389,7 @@ const linea = new Konva.Arrow({
     pointerLength: 10,
     pointerWidth: 10,
     dash: [4, 4]
-});
+  });
 
   layer.add(linea);
 
@@ -394,12 +407,22 @@ const linea = new Konva.Arrow({
       x2: end.x,
       y2: end.y
     };
+
+    // Asignar la flecha al atleta visual
+    if (atletasKonva[atleta.idPersonalizado]) {
+      atletasKonva[atleta.idPersonalizado].flecha = linea;
+    }
+
     modoDireccion = false;
     indexAtletaDireccion = null;
     stage.off('mousemove.direccion');
     stage.off('mouseup.direccion');
   });
-  });
+});
+
+
+
+ 
 
   function showPopover(x, y, contentHTML) {
     document.getElementById('popoverAtleta')?.remove();
@@ -456,6 +479,30 @@ function animarTransicion(nuevaFormacion) {
       alert('Agrega nombre de formación y al menos un atleta');
       return;
     }
+    formacionActual = formacionActual.map(a => {
+  const obj = atletasKonva[a.idPersonalizado];
+  if (!obj) return a;
+
+  const x = obj.circle.x();
+  const y = obj.circle.y();
+
+  // Actualizar posición
+  a.x = x;
+  a.y = y;
+
+  // Si hay flecha, actualiza dirección
+  if (a.direccion && obj.flecha) {
+    const points = obj.flecha.points();
+    a.direccion = {
+      x1: points[0],
+      y1: points[1],
+      x2: points[2],
+      y2: points[3]
+    };
+  }
+
+  return a;
+});
 
     const body = {
       nombreColoquial: nombre,