correccion direccion

public/js/piscina.js

@@ -308,35 +308,47 @@ tipoPiscinaSelect.addEventListener('change', async () => {
     showPopover(circle.x(), circle.y(), html);
   });
 
-  circle.on('dragend', () => {
+circle.on('dragend', () => {
-    const newX = circle.x();
+  const newX = circle.x();
-    const newY = circle.y();
+  const newY = circle.y();
-    const i = formacionActual.findIndex(a => a.idPersonalizado === atleta.idPersonalizado);
+  const i = formacionActual.findIndex(a => a.idPersonalizado === atleta.idPersonalizado);
-    if (i !== -1) {
+  if (i !== -1) {
-      formacionActual[i].x = newX;
+    formacionActual[i].x = newX;
-      formacionActual[i].y = newY;
+    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
+      ]);
     }
+  }
 
-    const nuevosMetros = convertirAMetros(newX, newY);
+  // Actualiza visualmente los textos
-    coordText.text(`${nuevosMetros.metrosX}m, ${nuevosMetros.metrosY}m`);
+  const nuevosMetros = convertirAMetros(newX, newY);
-    coordText.x(newX - 35);
+  coordText.text(`${nuevosMetros.metrosX}m, ${nuevosMetros.metrosY}m`);
-    coordText.y(newY + 30);
+  coordText.x(newX - 35);
+  coordText.y(newY + 30);
 
-    text.x(newX - 10);
+  text.x(newX - 10);
-    text.y(newY - 7);
+  text.y(newY - 7);
 
-    figuraText.x(newX - 25);
+  figuraText.x(newX - 25);
-    figuraText.y(newY + 18);
+  figuraText.y(newY + 18);
 
-    if (flecha) {
+  layer.batchDraw();
-      // 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,43 +375,54 @@ tipoPiscinaSelect.addEventListener('change', async () => {
     alert('Haz clic para trazar dirección.');
   }
 
-  stage.on('mousedown', () => {
+stage.on('mousedown', () => {
-    if (!modoDireccion || indexAtletaDireccion === null) return;
+  if (!modoDireccion || indexAtletaDireccion === null) return;
 
-    const start = stage.getPointerPosition();
+  const start = stage.getPointerPosition();
-    const atleta = formacionActual[indexAtletaDireccion];
+  const atleta = formacionActual[indexAtletaDireccion];
-const linea = new Konva.Arrow({
+
-  points: [start.x, start.y, start.x, start.y],
+  const linea = new Konva.Arrow({
-  stroke: 'black',
+    points: [start.x, start.y, start.x, start.y],
-  fill: 'black',
+    stroke: 'black',
-  strokeWidth: 2,
+    fill: 'black',
-  pointerLength: 10,
+    strokeWidth: 2,
-  pointerWidth: 10,
+    pointerLength: 10,
-  dash: [4, 4]
+    pointerWidth: 10,
+    dash: [4, 4]
+  });
+
+  layer.add(linea);
+
+  stage.on('mousemove.direccion', () => {
+    const pos = stage.getPointerPosition();
+    linea.points([start.x, start.y, pos.x, pos.y]);
+    layer.batchDraw();
+  });
+
+  stage.on('mouseup.direccion', () => {
+    const end = stage.getPointerPosition();
+    atleta.direccion = {
+      x1: start.x,
+      y1: start.y,
+      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');
+  });
 });
 
-    layer.add(linea);
 
-    stage.on('mousemove.direccion', () => {
-      const pos = stage.getPointerPosition();
-      linea.points([start.x, start.y, pos.x, pos.y]);
-      layer.batchDraw();
-    });
 
-    stage.on('mouseup.direccion', () => {
+ 
-      const end = stage.getPointerPosition();
-      atleta.direccion = {
-        x1: start.x,
-        y1: start.y,
-        x2: end.x,
-        y2: end.y
-      };
-      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,