From cd4e91eb59a97076013384d6a138aaaefd487b20 Mon Sep 17 00:00:00 2001
From: vbenoit <vincent.benoit@benserv.fr>
Date: Tue, 15 Oct 2024 22:28:54 +0000
Subject: [PATCH] update

---
 .../football-field.component.css              |  2 +-
 .../football-field.component.html             |  4 +-
 .../football-field.component.ts               | 55 +++++++++----------
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/app/football-field/football-field.component.css b/src/app/football-field/football-field.component.css
index 796e51c..1156d7c 100644
--- a/src/app/football-field/football-field.component.css
+++ b/src/app/football-field/football-field.component.css
@@ -159,7 +159,7 @@ canvas {
 .handle-left, .handle-right {
   position: absolute;
   top: 0;
-  width: 20px;
+  width: 15px;
   height: 100%;
   background-color: hsla(240, 100%, 50%, 0.507);;
   cursor: ew-resize;
diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html
index 4a7d94e..0e5bd02 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')"
+							(mousedown)="onHandleMouseDown($event, 'left', stepPlayer)"
 							(mousemove)="onHandleMouseMove($event)"
 							(mouseup)="onHandleMouseUp()">
 							<!-- poignée gauche -->
 						</div> 
 						<div class="handle-right"
-							(mousedown)="onHandleMouseDown($event, 'right')"
+							(mousedown)="onHandleMouseDown($event, 'right', stepPlayer)"
 							(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 1dfd6f8..ec7c91f 100644
--- a/src/app/football-field/football-field.component.ts
+++ b/src/app/football-field/football-field.component.ts
@@ -110,7 +110,7 @@ export class FootballFieldComponent {
 	private animationStartTime: number = 0;
 	private isResizingLeft: boolean = false;
 	private isResizingRight: boolean = false;
-	private currentBlock: HTMLElement | null = null;
+	private currentBlock: TimelineStep | null = null;
 	private initialMouseX:number = 0;
 	private initialBlockLeft:number = 0;
 	private initialBlockWidth:number = 0;
@@ -976,21 +976,22 @@ export class FootballFieldComponent {
 		if (!this.currentBlock) return;
 	
 		const deltaX = event.clientX - this.initialMouseX;
-	
+
 		if (this.isResizingLeft) {
-			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
+			// 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) { // Empêcher une largeur trop petite
-				this.currentBlock.style.width = `${newWidth}px`;
-				this.updateTimelineData(); // Mettre à jour les données de la timeline
-		  }
+	
+		  	if (newWidth > 10) {
+				this.currentBlock.endTime = this.initialBlockLeft + newWidth;
+		  	}
 		}
 	}
 	
@@ -1001,25 +1002,23 @@ export class FootballFieldComponent {
 		this.currentBlock = null;
 	}
 
-	onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right') {
-		console.log("[onHandleMouseDown]");
+	onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', block: TimelineStep) {
 		// Empêche le comportement par défaut (sélection de texte)
 		event.preventDefault();
-		//this.currentBlock = block;
+		this.currentBlock = block;
 		// Position initiale de la souris
-		//this.initialMouseX = event.clientX;
-		// Position initiale du bloc
-		//this.initialBlockLeft = block.offsetLeft;
-		// Largeur initiale du bloc
-		//this.initialBlockWidth = block.offsetWidth;
-		//console.log("[onResizeStart] (",this.initialMouseX, " - ", this.currentBlock);
-		//if (direction === 'left') {
-		//	this.isResizingLeft = true;
-		//} else if (direction === 'right') {
-		//	this.isResizingRight = true;
-		//}
+		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;
 	
@@ -1038,7 +1037,7 @@ export class FootballFieldComponent {
 			timelineStep.endTime = endTime;
 		}
 	}
-	
+*/
 	getTimelineStepById(blockId: string): TimelineStep | null {
 		// Trouver le bloc correspondant aux données
 		// Cette fonction est un exemple. Adapte-la selon la manière dont tu stockes tes données