correccion direccion
This commit is contained in:
Fernando Escobar Robles
parent
2e0e57d606
commit
db12eda039
|
|
@ -308,35 +308,47 @@ tipoPiscinaSelect.addEventListener('change', async () => {
|
|||
showPopover(circle.x(), circle.y(), html);
|
||||
});
|
||||
|
||||
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;
|
||||
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
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
const nuevosMetros = convertirAMetros(newX, newY);
|
||||
coordText.text(`${nuevosMetros.metrosX}m, ${nuevosMetros.metrosY}m`);
|
||||
coordText.x(newX - 35);
|
||||
coordText.y(newY + 30);
|
||||
// Actualiza visualmente los textos
|
||||
const nuevosMetros = convertirAMetros(newX, newY);
|
||||
coordText.text(`${nuevosMetros.metrosX}m, ${nuevosMetros.metrosY}m`);
|
||||
coordText.x(newX - 35);
|
||||
coordText.y(newY + 30);
|
||||
|
||||
text.x(newX - 10);
|
||||
text.y(newY - 7);
|
||||
text.x(newX - 10);
|
||||
text.y(newY - 7);
|
||||
|
||||
figuraText.x(newX - 25);
|
||||
figuraText.y(newY + 18);
|
||||
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.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', () => {
|
||||
if (!modoDireccion || indexAtletaDireccion === null) return;
|
||||
stage.on('mousedown', () => {
|
||||
if (!modoDireccion || indexAtletaDireccion === null) return;
|
||||
|
||||
const start = stage.getPointerPosition();
|
||||
const atleta = formacionActual[indexAtletaDireccion];
|
||||
const linea = new Konva.Arrow({
|
||||
points: [start.x, start.y, start.x, start.y],
|
||||
stroke: 'black',
|
||||
fill: 'black',
|
||||
strokeWidth: 2,
|
||||
pointerLength: 10,
|
||||
pointerWidth: 10,
|
||||
dash: [4, 4]
|
||||
const start = stage.getPointerPosition();
|
||||
const atleta = formacionActual[indexAtletaDireccion];
|
||||
|
||||
const linea = new Konva.Arrow({
|
||||
points: [start.x, start.y, start.x, start.y],
|
||||
stroke: 'black',
|
||||
fill: 'black',
|
||||
strokeWidth: 2,
|
||||
pointerLength: 10,
|
||||
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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue