From fedd4a19538fceada9ad4ff7b1e99e6876ece25a Mon Sep 17 00:00:00 2001
From: vbenoit <vincent.benoit@benserv.fr>
Date: Wed, 16 Oct 2024 13:42:39 +0000
Subject: [PATCH] resize bloc pas encore fonctionnel

---
 .../football-field.component.html             |  4 +-
 .../football-field.component.ts               | 99 ++++++++++---------
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html
index 0e5bd02..9f82363 100644
--- a/src/app/football-field/football-field.component.html
+++ b/src/app/football-field/football-field.component.html
@@ -73,13 +73,13 @@
 				     	(mousedown)="onTimelineBlockMouseDown($event, player, i)">
 						{{ i + 1 }}
 						<div class="handle-left"
-							(mousedown)="onHandleMouseDown($event, 'left', stepPlayer)"
+							(mousedown)="onHandleMouseDown($event, 'left', player, i)"
 							(mousemove)="onHandleMouseMove($event)"
 							(mouseup)="onHandleMouseUp()">
 							<!-- poignée gauche -->
 						</div> 
 						<div class="handle-right"
-							(mousedown)="onHandleMouseDown($event, 'right', stepPlayer)"
+							(mousedown)="onHandleMouseDown($event, 'right', player, i)"
 							(mousemove)="onHandleMouseMove($event)"
 							(mouseup)="onHandleMouseUp()">
 							<!-- poignée droite -->	
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts
index ec7c91f..a37a116 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -114,6 +114,8 @@ export class FootballFieldComponent {
 	private initialMouseX:number = 0;
 	private initialBlockLeft:number = 0;
 	private initialBlockWidth:number = 0;
+	private resizedTLPlayer: TimelineStep[] | null = null;
+    private resizedBlockIndex: number = 0;
 
 	public playerCount: number = 8; // Nombre de joueurs par défaut
 	public plotCount: number = 2; // Nombre de plots par défaut
@@ -972,52 +974,61 @@ export class FootballFieldComponent {
 	/* GESTION DE LA TIMELINE */
 
 	onHandleMouseMove(event: MouseEvent) {
-		console.log("[onHandleMouseMove]");
-		if (!this.currentBlock) return;
-	
-		const deltaX = event.clientX - this.initialMouseX;
+        if (!this.resizedTLPlayer) return;
+    
+        const deltaX = event.clientX - this.initialMouseX;
 
-		if (this.isResizingLeft) {
-			// Redimensionnement depuis la gauche
-			const newStartTime = this.initialBlockLeft + deltaX;
-		  	const newWidth = this.initialBlockWidth - deltaX;
-	
-		  	if (newWidth > 10) {
-				this.currentBlock.startTime = newStartTime;
-		  	}
-		} else if (this.isResizingRight) {
-		  	// Redimensionnement depuis la droite
-		  	const newWidth = this.initialBlockWidth + deltaX;
-	
-		  	if (newWidth > 10) {
-				this.currentBlock.endTime = this.initialBlockLeft + newWidth;
-		  	}
-		}
-	}
-	
-	onHandleMouseUp() {
-		console.log("[onHandleMouseUp]");
-		this.isResizingLeft = false;
-		this.isResizingRight = false;
-		this.currentBlock = null;
-	}
+        if (this.isResizingLeft) {
+            console.log("[onHandleMouseMove] Resizing Left");
+            const newLeft = this.initialBlockLeft + deltaX;
+            const newWidth = this.initialBlockWidth - deltaX;
+            if (newWidth > 10) { // Empêcher une largeur trop petite
+                //this.currentBlock.style.left = `${newLeft}px`;
+                //this.currentBlock.style.width = `${newWidth}px`;
+                //this.updateTimelineData(); // Mettre à jour les données de la timeline
+            }
+        } else if (this.isResizingRight) {
+            const curStep = this.resizedTLPlayer[this.resizedBlockIndex];
+            const newEndTime = Math.floor(curStep.endTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)) / 10);
+            console.log("[onHandleMouseMove] Resizing Right (",curStep, "-",newEndTime,")");
+            curStep.endTime = Math.max(curStep.startTime, newEndTime);
+            curStep.duration = Math.max(curStep.startTime, newEndTime);
+            //curStep.endTime = Math.max(0, newWidth);
+                //this.currentBlock.style.width = `${newWidth}px`;
+                //this.updateTimelineData(); // Mettre à jour les données de la timeline
+        }
+    }
+    
+    onHandleMouseUp() {
+        console.log("[onHandleMouseUp]");
+        this.isResizingLeft = false;
+        this.isResizingRight = false;
+        this.currentBlock = null;
+        this.resizedTLPlayer = null;
+        this.resizedBlockIndex = 0;
+    }
+
+    onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', player: Player, blockIndex: number) {
+        console.log("[onHandleMouseDown] player:", player);
+        // Empêche le comportement par défaut (déplacement du bloc)
+        //event.preventDefault();
+        event.stopPropagation();
+        this.resizedTLPlayer = player.steps;
+        this.resizedBlockIndex = blockIndex;
+        // Position initiale de la souris
+        this.initialMouseX = event.clientX;
+        // Position initiale du bloc
+        //this.initialBlockLeft = this.calculateBlockPixelPosition(this.currentBlock.startTime);
+        // Largeur initiale du bloc
+        //this.initialBlockWidth = this.calculateBlockPixelPosition(this.currentBlock.endTime) - this.initialBlockLeft;
+        //console.log("[onResizeStart] (",this.initialMouseX, "px -", this.initialBlockLeft, "px -",this.initialBlockWidth,"px)");
+        if (direction === 'left') {
+            this.isResizingLeft = true;
+        } else if (direction === 'right') {
+            this.isResizingRight = true;
+        }
+    }
 
-	onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', block: TimelineStep) {
-		// Empêche le comportement par défaut (sélection de texte)
-		event.preventDefault();
-		this.currentBlock = block;
-		// Position initiale de la souris
-		this.initialMouseX = event.clientX;
-		this.initialBlockLeft = block.startTime;
-    	this.initialBlockWidth = block.endTime - block.startTime;
-		
-		console.log("[onHandleMouseDown] (",this.initialMouseX, "-", this.initialBlockLeft, "-", this.initialBlockWidth, ")");
-		if (direction === 'left') {
-			this.isResizingLeft = true;
-		} else if (direction === 'right') {
-			this.isResizingRight = true;
-		}
-	}
 /*
 	updateTimelineData() {
 		if (!this.currentBlock) return;