update du code

src/app/football-field/football-field.component.ts

@@ -389,24 +389,38 @@ export class FootballFieldComponent {
 	onCanvasMouseDown(event: MouseEvent) {
 		const { x, y } = this.getMousePos(event);
 		if (this.interactionMode === 'animate') {
-			console.log("plop");
+			console.log("[Mouse Down] animate elements");
+			this.startDrawingVector(x, y);
 		} else if (this.interactionMode === 'move') {
-			console.log("move elements");
-			this.startDragging(event);
+			console.log("[Mouse Down] move elements");
+			this.startDragging(x, y);
 		}
 	}
 
 	onCanvasMouseMove(event: MouseEvent) {
 		const { x, y } = this.getMousePos(event);
+		if (this.interactionMode === 'animate') {
+			console.log("[Mouse Move] animate elements");
+		} else if (this.interactionMode === 'move') {
+			this.drag(x, y);
+		}
 	}
 
 	onCanvasMouseUp(event: MouseEvent) {
 		const { x, y } = this.getMousePos(event);
+		if (this.interactionMode === 'animate') {
+			console.log("[Mouse Up] Stop animating elements");
+			this.finishDrawingVector(x,y);
+		} else if (this.interactionMode === 'move') {
+			console.log("[Mouse Up] Stop moving elements");
+			this.stopDragging();
+		}
 	}
 
 	// Commencer a déplacer un élément du canvas 
-	startDragging(event: MouseEvent) {
-		const { x, y } = this.getMousePos(event);
+	//startDragging(event: MouseEvent) {
+	startDragging(x:number, y:number) {
+		//const { x, y } = this.getMousePos(event);
 
 		if (this.isInsideCircle(this.ball, x, y)) {
 			console.log("inside ball");
@@ -445,10 +459,12 @@ export class FootballFieldComponent {
 	}
 
 	// Déplacer le cercle sélectionné
-	drag(event: MouseEvent) {
-		const { x, y } = this.getMousePos(event);
+	//drag(event: MouseEvent) {
+	drag(x:number, y:number) {
+		//const { x, y } = this.getMousePos(event);
 
 		if (this.ball.isDragging) {
+			console.log("dragging ball");
 			this.ball.x = x - this.offsetX;
 			this.ball.y = y - this.offsetY;
 			this.drawField();
@@ -456,6 +472,7 @@ export class FootballFieldComponent {
 		}
 
 		if (this.draggingPlayer && this.draggingPlayer.isDragging) {
+			console.log("dragging player");
 			this.draggingPlayer.x = x - this.offsetX;
 			this.draggingPlayer.y = y - this.offsetY;
 
@@ -476,6 +493,7 @@ export class FootballFieldComponent {
 		}
 
 		if (this.draggingElement && this.draggingElement.isDragging) {
+			console.log("dragging element");
 			this.draggingElement.x = x - this.offsetX;
 			this.draggingElement.y = y - this.offsetY;
 			this.drawField();
@@ -589,6 +607,21 @@ export class FootballFieldComponent {
 		return nearestPlayer;
 	}
 
+	private getNearestPlayer(x: number, y: number): Circle | null {
+		let nearestPlayer: Circle | null = null;
+		let minDistance = Infinity;
+
+		this.players.forEach(player => {
+			const distance = Math.sqrt((player.x - x) ** 2 + (player.y - y) ** 2);
+			if (distance < minDistance && distance <= player.radius) {
+				minDistance = distance;
+				nearestPlayer = player;
+			}
+		});
+
+		return nearestPlayer;
+	}
+
 	private getDistance(circle1: Circle, circle2: Circle): number {
 		return Math.sqrt((circle1.x - circle2.x) ** 2 + (circle1.y - circle2.y) ** 2);
 	}
@@ -624,6 +657,33 @@ export class FootballFieldComponent {
 		this.lastX = x;
 		this.lastY = y;
 	}
+	
+	private startDrawingVector(x:number, y:number) {
+		this.startX = x;
+		this.startY = y;
+		this.isDrawingVector = true;
+	}
+	
+	private finishDrawingVector(endX: number, endY: number) {
+		if (!this.isDrawingVector) return;
+		this.isDrawingVector = false;
+
+		const nearestPlayer = this.getNearestPlayer(this.startX, this.startY);
+		if (nearestPlayer) {
+			nearestPlayer.destinationX = endX;
+			nearestPlayer.destinationY = endY;
+			nearestPlayer.isMoving = true;
+			nearestPlayer.progress = 0;
+
+			if (this.vectorType === 'curved') {
+				nearestPlayer.controlPointX = (this.startX + endX) / 2 + 50;
+				nearestPlayer.controlPointY = (this.startY + endY) / 2 - 50;
+			} else {
+				nearestPlayer.controlPointX = null;
+				nearestPlayer.controlPointY = null;
+			}
+		}
+	}
 
 	// Dessiner en fonction de la forme sélectionnée
 	draw(event: MouseEvent) {