From 4e75854003788f8c8cc73a2fc18dca3abd2735a6 Mon Sep 17 00:00:00 2001 From: vbenoit Date: Wed, 16 Oct 2024 19:05:54 +0000 Subject: [PATCH] =?UTF-8?q?fin=20de=20redimensionnement=20des=20blocs=20et?= =?UTF-8?q?=20debut=20de=20l'indicateur=20de=20temps=20=C3=A0=20d=C3=A9pla?= =?UTF-8?q?cer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../football-field.component.css | 48 +++++++++++++--- .../football-field.component.html | 19 +++++-- .../football-field.component.ts | 57 +++++++++++++------ 3 files changed, 94 insertions(+), 30 deletions(-) diff --git a/src/app/football-field/football-field.component.css b/src/app/football-field/football-field.component.css index 1156d7c..e589a73 100644 --- a/src/app/football-field/football-field.component.css +++ b/src/app/football-field/football-field.component.css @@ -105,17 +105,20 @@ canvas { .timeline-container { width: 100%; margin-top: 20px; + position: relative; /* Position relative pour que les éléments enfants positionnés en absolute restent à l'intérieur */ + height: 100%; /* ou n'importe quelle hauteur de la timeline */ + background-color: #f5f5f5; } .player-timeline { display: flex; align-items: center; - margin-bottom: 10px; + margin-bottom: 5px; } .ball-timeline { display: flex; align-items: center; - margin-bottom: 10px; + margin-bottom: 5px; } .timeline { @@ -135,7 +138,7 @@ canvas { margin-right: 10px; } -.timeline-block { +.timeline-blk-player { position: absolute; height: 23px; background-color: hsla(240, 100%, 50%, 0.308); @@ -147,6 +150,18 @@ canvas { text-align: center; } +.timeline-blk-ball { + position: absolute; + height: 23px; + background-color: hsla(125, 100%, 50%, 0.308); + border: 2px solid black; + border-radius: 4px; + cursor: move; + font-family: Arial, Helvetica, sans-serif; + font-size: 12px; + text-align: center; +} + .time-indicator { position: absolute; top: 0; @@ -156,19 +171,38 @@ canvas { left: 0; /* Point de départ du trait */ } -.handle-left, .handle-right { +.handle-left-blk-player, .handle-right-blk-player { position: absolute; top: 0; - width: 15px; + width: 10px; height: 100%; background-color: hsla(240, 100%, 50%, 0.507);; cursor: ew-resize; } -.handle-left { +.handle-left-blk-ball, .handle-right-blk-ball { + position: absolute; + top: 0; + width: 10px; + height: 100%; + background-color: rgba(32, 70, 45, 0.507);; + cursor: ew-resize; +} + +.handle-left-blk-player, .handle-left-blk-ball { left: 0; } -.handle-right { +.handle-right-blk-player, .handle-right-blk-ball { right: 0; +} + +/* Ligne verticale traversant toutes les timelines */ +.vertical-line { + position: absolute; + width: 4px; + height: 100%; + background-color: red; + cursor: ew-resize; + top: 0; } \ No newline at end of file diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html index c113277..26f0d9b 100644 --- a/src/app/football-field/football-field.component.html +++ b/src/app/football-field/football-field.component.html @@ -49,18 +49,18 @@ (mousemove)="onTLBallMouseMove($event)" (mouseup)="onTLBallMouseUp()">
{{ i + 1 }} -
-
@@ -79,18 +79,18 @@ (mouseup)="onTimelineMouseUp()">
{{ i + 1 }} -
-
@@ -102,6 +102,13 @@
+
+
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts index 0b8318d..9aab644 100644 --- a/src/app/football-field/football-field.component.ts +++ b/src/app/football-field/football-field.component.ts @@ -111,10 +111,12 @@ export class FootballFieldComponent { private isResizingLeft: boolean = false; private isResizingRight: boolean = false; private initialMouseX:number = 0; - private resizedTLPlayer: TimelineStep[] | null = null; + private resizedTLElmt: TimelineStep[] | null = null; private resizedBlockIndex: number = 0; private curBlockEndTime: number = 0; private curBlockStartTime: number = 0; + private isDraggingLine:boolean = false; + public linePosition: number = 0; // Position de la ligne verticale public playerCount: number = 8; // Nombre de joueurs par défaut public plotCount: number = 2; // Nombre de plots par défaut @@ -301,7 +303,6 @@ export class FootballFieldComponent { // Mettre à jour la position du ballon if (this.isAnimating) { if (this.ball.steps.length > 0) { - console.log("PLUP"); this.updateBallPosition(); } } @@ -810,6 +811,7 @@ export class FootballFieldComponent { this.ball.isDragging = false; this.test = false; this.prevAngle = 0; + this.ball.steps = []; } if (this.draggingPlayer) { @@ -933,8 +935,6 @@ export class FootballFieldComponent { // Méthode pour changer le mode d'interaction (déplacer ou dessiner un vecteur) setInteractionMode(mode: 'move' | 'animate') { this.interactionMode = mode; - //this.isDrawingVector = false; - //this.selectedPlayer = null; // Réinitialiser la sélection de joueur pour éviter tout déplacement involontaire } // Méthode pour activer/désactiver la boucle de l'animation @@ -973,43 +973,44 @@ export class FootballFieldComponent { /* GESTION DE LA TIMELINE */ onHandleMouseMove(event: MouseEvent) { - if (!this.resizedTLPlayer) return; + if (!this.resizedTLElmt) return; const deltaX = event.clientX - this.initialMouseX; // On recupère le bloc courant - const curStep = this.resizedTLPlayer[this.resizedBlockIndex]; + const curStep = this.resizedTLElmt[this.resizedBlockIndex]; let nextStep:TimelineStep = null; let prevStep:TimelineStep = null; // On recupère le bloc suivant si il existe - if (this.resizedBlockIndex < (this.resizedTLPlayer.length - 1)) { - nextStep = this.resizedTLPlayer[this.resizedBlockIndex + 1]; + if (this.resizedBlockIndex < (this.resizedTLElmt.length - 1)) { + nextStep = this.resizedTLElmt[this.resizedBlockIndex + 1]; } // On recupère le bloc précédent si il existe if (this.resizedBlockIndex > 0) { - prevStep = this.resizedTLPlayer[this.resizedBlockIndex - 1]; + prevStep = this.resizedTLElmt[this.resizedBlockIndex - 1]; } if (this.isResizingLeft) { const newStartTime = Math.floor(this.curBlockStartTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth))); console.log("[onHandleMouseMove] Resizing Left (",this.curBlockStartTime, "-", curStep.startTime, "-", newStartTime, ")"); if (prevStep) { - curStep.startTime = Math.max(prevStep.endTime, newStartTime); + curStep.startTime = Math.max(prevStep.endTime + 1, newStartTime); } else { curStep.startTime = Math.max(0, newStartTime); } // On calcule la nouvelle durée du bloc - curStep.duration = curStep.endTime - newStartTime; + curStep.duration = curStep.endTime - curStep.startTime; } else if (this.isResizingRight) { const newEndTime = Math.floor(this.curBlockEndTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth))); console.log("[onHandleMouseMove] Resizing Right (",this.curBlockEndTime, "-", curStep.endTime, "-",newEndTime,")"); if (newEndTime < this.getTotalTimelineDuration()) { if (nextStep) { - curStep.endTime = Math.max(curStep.startTime, nextStep.startTime) + console.log("[onHandleMouseMove] nextStep:",newEndTime,"/",nextStep.startTime,")"); + curStep.endTime = Math.min(newEndTime, nextStep.startTime - 1) } else { curStep.endTime = Math.max(curStep.startTime, newEndTime); } // On calcule la nouvelle durée du bloc - curStep.duration = newEndTime - curStep.startTime; + curStep.duration = curStep.endTime - curStep.startTime; } } } @@ -1018,7 +1019,7 @@ export class FootballFieldComponent { console.log("[onHandleMouseUp]"); this.isResizingLeft = false; this.isResizingRight = false; - this.resizedTLPlayer = null; + this.resizedTLElmt = null; this.resizedBlockIndex = 0; this.curBlockEndTime = 0; } @@ -1030,10 +1031,10 @@ export class FootballFieldComponent { // Position initiale de la souris this.initialMouseX = event.clientX; - this.resizedTLPlayer = elmt.steps; + this.resizedTLElmt = elmt.steps; this.resizedBlockIndex = blockIndex; - this.curBlockEndTime = this.resizedTLPlayer[this.resizedBlockIndex].endTime; - this.curBlockStartTime = this.resizedTLPlayer[this.resizedBlockIndex].startTime; + this.curBlockEndTime = this.resizedTLElmt[this.resizedBlockIndex].endTime; + this.curBlockStartTime = this.resizedTLElmt[this.resizedBlockIndex].startTime; console.log("[onHandleMouseDown] Element:", elmt, "- Index:", blockIndex, "- EndTime:", this.curBlockEndTime, "- StartTime", this.curBlockStartTime); if (direction === 'left') { @@ -1315,4 +1316,26 @@ export class FootballFieldComponent { this.animationStartTime = performance.now(); // Obtenir le timestamp de départ this.animate(); } + + // Capture l'événement de mousedown pour commencer le déplacement de la ligne + onLineMouseDown(event: MouseEvent) { + event.preventDefault(); + + this.isDraggingLine = true; + this.initialMouseX = event.clientX; + } + + // Suivre le déplacement de la souris et ajuster la position de la ligne + onLineMouseMove(event: MouseEvent) { + if (!this.isDraggingLine) return; + + const deltaX = event.clientX - this.initialMouseX; + this.linePosition += deltaX; // Déplacer la ligne + this.initialMouseX = event.clientX; // Réinitialiser la position de départ + } + + // Terminer le déplacement de la ligne + onLineMouseUp() { + this.isDraggingLine = false; + } }