vincent/football-drawing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fin de redimensionnement des blocs et debut de l'indicateur de temps à déplacer

Browse Source
This commit is contained in:
BENOIT Vincent
2024-10-16 19:05:54 +00:00
parent cdee6d4e51
commit 4e75854003
3 changed files with 94 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/football-field/football-field.component.css
View File

@@ -105,17 +105,20 @@ canvas {
.timeline-container { .timeline-container {
width: 100%; width: 100%;
margin-top: 20px; 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 { .player-timeline {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 5px;
} }
.ball-timeline { .ball-timeline {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 5px;
} }
.timeline { .timeline {
@@ -135,7 +138,7 @@ canvas {
margin-right: 10px; margin-right: 10px;
} }
.timeline-block { .timeline-blk-player {
position: absolute; position: absolute;
height: 23px; height: 23px;
background-color: hsla(240, 100%, 50%, 0.308); background-color: hsla(240, 100%, 50%, 0.308);
@@ -147,6 +150,18 @@ canvas {
text-align: center; 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 { .time-indicator {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -156,19 +171,38 @@ canvas {
left: 0; /* Point de départ du trait */ left: 0; /* Point de départ du trait */
} }
.handle-left, .handle-right { .handle-left-blk-player, .handle-right-blk-player {
position: absolute; position: absolute;
top: 0; top: 0;
width: 15px; width: 10px;
height: 100%; height: 100%;
background-color: hsla(240, 100%, 50%, 0.507);; background-color: hsla(240, 100%, 50%, 0.507);;
cursor: ew-resize; 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; left: 0;
} }
.handle-right { .handle-right-blk-player, .handle-right-blk-ball {
right: 0; right: 0;
}
/* Ligne verticale traversant toutes les timelines */
.vertical-line {
position: absolute;
width: 4px;
height: 100%;
background-color: red;
cursor: ew-resize;
top: 0;
} }

19
src/app/football-field/football-field.component.html
View File

@@ -49,18 +49,18 @@
(mousemove)="onTLBallMouseMove($event)" (mousemove)="onTLBallMouseMove($event)"
(mouseup)="onTLBallMouseUp()"> (mouseup)="onTLBallMouseUp()">
<div *ngFor="let stepBall of ball.steps; let i = index" <div *ngFor="let stepBall of ball.steps; let i = index"
class="timeline-block" class="timeline-blk-ball"
[style.left]="calculateLeftPosition(stepBall)" [style.left]="calculateLeftPosition(stepBall)"
[style.width]="calculateBlockWidth(stepBall)" [style.width]="calculateBlockWidth(stepBall)"
(mousedown)="onTLBallBlockMouseDown($event, ball, i)"> (mousedown)="onTLBallBlockMouseDown($event, ball, i)">
{{ i + 1 }} {{ i + 1 }}
<div class="handle-left" <div class="handle-left-blk-ball"
(mousedown)="onHandleMouseDown($event, 'left', ball, i)" (mousedown)="onHandleMouseDown($event, 'left', ball, i)"
(mousemove)="onHandleMouseMove($event)" (mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()"> (mouseup)="onHandleMouseUp()">
<!-- poignée gauche --> <!-- poignée gauche -->
</div> </div>
<div class="handle-right" <div class="handle-right-blk-ball"
(mousedown)="onHandleMouseDown($event, 'right', ball, i)" (mousedown)="onHandleMouseDown($event, 'right', ball, i)"
(mousemove)="onHandleMouseMove($event)" (mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()"> (mouseup)="onHandleMouseUp()">
@@ -79,18 +79,18 @@
(mouseup)="onTimelineMouseUp()"> (mouseup)="onTimelineMouseUp()">
<div *ngFor="let stepPlayer of player.steps; let i = index" <div *ngFor="let stepPlayer of player.steps; let i = index"
class="timeline-block" class="timeline-blk-player"
[style.left]="calculateLeftPosition(stepPlayer)" [style.left]="calculateLeftPosition(stepPlayer)"
[style.width]="calculateBlockWidth(stepPlayer)" [style.width]="calculateBlockWidth(stepPlayer)"
(mousedown)="onTimelineBlockMouseDown($event, player, i)"> (mousedown)="onTimelineBlockMouseDown($event, player, i)">
{{ i + 1 }} {{ i + 1 }}
<div class="handle-left" <div class="handle-left-blk-player"
(mousedown)="onHandleMouseDown($event, 'left', player, i)" (mousedown)="onHandleMouseDown($event, 'left', player, i)"
(mousemove)="onHandleMouseMove($event)" (mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()"> (mouseup)="onHandleMouseUp()">
<!-- poignée gauche --> <!-- poignée gauche -->
</div> </div>
<div class="handle-right" <div class="handle-right-blk-player"
(mousedown)="onHandleMouseDown($event, 'right', player, i)" (mousedown)="onHandleMouseDown($event, 'right', player, i)"
(mousemove)="onHandleMouseMove($event)" (mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()"> (mouseup)="onHandleMouseUp()">
@@ -102,6 +102,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="vertical-line"
[style.left.px]="linePosition"
(mousedown)="onLineMouseDown($event)"
(mousemove)="onLineMouseMove($event)"
(mouseup)="onLineMouseUp()"
>
</div>
</div> </div>
</div> </div>
<div class="timeline-player"> <div class="timeline-player">

57
src/app/football-field/football-field.component.ts
View File

@@ -111,10 +111,12 @@ export class FootballFieldComponent {
private isResizingLeft: boolean = false; private isResizingLeft: boolean = false;
private isResizingRight: boolean = false; private isResizingRight: boolean = false;
private initialMouseX:number = 0; private initialMouseX:number = 0;
private resizedTLPlayer: TimelineStep[] | null = null; private resizedTLElmt: TimelineStep[] | null = null;
private resizedBlockIndex: number = 0; private resizedBlockIndex: number = 0;
private curBlockEndTime: number = 0; private curBlockEndTime: number = 0;
private curBlockStartTime: 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 playerCount: number = 8; // Nombre de joueurs par défaut
public plotCount: number = 2; // Nombre de plots 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 // Mettre à jour la position du ballon
if (this.isAnimating) { if (this.isAnimating) {
if (this.ball.steps.length > 0) { if (this.ball.steps.length > 0) {
console.log("PLUP");
this.updateBallPosition(); this.updateBallPosition();
} }
} }
@@ -810,6 +811,7 @@ export class FootballFieldComponent {
this.ball.isDragging = false; this.ball.isDragging = false;
this.test = false; this.test = false;
this.prevAngle = 0; this.prevAngle = 0;
this.ball.steps = [];
} }
if (this.draggingPlayer) { if (this.draggingPlayer) {
@@ -933,8 +935,6 @@ export class FootballFieldComponent {
// Méthode pour changer le mode d'interaction (déplacer ou dessiner un vecteur) // Méthode pour changer le mode d'interaction (déplacer ou dessiner un vecteur)
setInteractionMode(mode: 'move' | 'animate') { setInteractionMode(mode: 'move' | 'animate') {
this.interactionMode = mode; 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 // Méthode pour activer/désactiver la boucle de l'animation
@@ -973,43 +973,44 @@ export class FootballFieldComponent {
/* GESTION DE LA TIMELINE */ /* GESTION DE LA TIMELINE */
onHandleMouseMove(event: MouseEvent) { onHandleMouseMove(event: MouseEvent) {
if (!this.resizedTLPlayer) return; if (!this.resizedTLElmt) return;
const deltaX = event.clientX - this.initialMouseX; const deltaX = event.clientX - this.initialMouseX;
// On recupère le bloc courant // On recupère le bloc courant
const curStep = this.resizedTLPlayer[this.resizedBlockIndex]; const curStep = this.resizedTLElmt[this.resizedBlockIndex];
let nextStep:TimelineStep = null; let nextStep:TimelineStep = null;
let prevStep:TimelineStep = null; let prevStep:TimelineStep = null;
// On recupère le bloc suivant si il existe // On recupère le bloc suivant si il existe
if (this.resizedBlockIndex < (this.resizedTLPlayer.length - 1)) { if (this.resizedBlockIndex < (this.resizedTLElmt.length - 1)) {
nextStep = this.resizedTLPlayer[this.resizedBlockIndex + 1]; nextStep = this.resizedTLElmt[this.resizedBlockIndex + 1];
} }
// On recupère le bloc précédent si il existe // On recupère le bloc précédent si il existe
if (this.resizedBlockIndex > 0) { if (this.resizedBlockIndex > 0) {
prevStep = this.resizedTLPlayer[this.resizedBlockIndex - 1]; prevStep = this.resizedTLElmt[this.resizedBlockIndex - 1];
} }
if (this.isResizingLeft) { if (this.isResizingLeft) {
const newStartTime = Math.floor(this.curBlockStartTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth))); const newStartTime = Math.floor(this.curBlockStartTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
console.log("[onHandleMouseMove] Resizing Left (",this.curBlockStartTime, "-", curStep.startTime, "-", newStartTime, ")"); console.log("[onHandleMouseMove] Resizing Left (",this.curBlockStartTime, "-", curStep.startTime, "-", newStartTime, ")");
if (prevStep) { if (prevStep) {
curStep.startTime = Math.max(prevStep.endTime, newStartTime); curStep.startTime = Math.max(prevStep.endTime + 1, newStartTime);
} else { } else {
curStep.startTime = Math.max(0, newStartTime); curStep.startTime = Math.max(0, newStartTime);
} }
// On calcule la nouvelle durée du bloc // On calcule la nouvelle durée du bloc
curStep.duration = curStep.endTime - newStartTime; curStep.duration = curStep.endTime - curStep.startTime;
} else if (this.isResizingRight) { } else if (this.isResizingRight) {
const newEndTime = Math.floor(this.curBlockEndTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth))); const newEndTime = Math.floor(this.curBlockEndTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
console.log("[onHandleMouseMove] Resizing Right (",this.curBlockEndTime, "-", curStep.endTime, "-",newEndTime,")"); console.log("[onHandleMouseMove] Resizing Right (",this.curBlockEndTime, "-", curStep.endTime, "-",newEndTime,")");
if (newEndTime < this.getTotalTimelineDuration()) { if (newEndTime < this.getTotalTimelineDuration()) {
if (nextStep) { 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 { } else {
curStep.endTime = Math.max(curStep.startTime, newEndTime); curStep.endTime = Math.max(curStep.startTime, newEndTime);
} }
// On calcule la nouvelle durée du bloc // 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]"); console.log("[onHandleMouseUp]");
this.isResizingLeft = false; this.isResizingLeft = false;
this.isResizingRight = false; this.isResizingRight = false;
this.resizedTLPlayer = null; this.resizedTLElmt = null;
this.resizedBlockIndex = 0; this.resizedBlockIndex = 0;
this.curBlockEndTime = 0; this.curBlockEndTime = 0;
} }
@@ -1030,10 +1031,10 @@ export class FootballFieldComponent {
// Position initiale de la souris // Position initiale de la souris
this.initialMouseX = event.clientX; this.initialMouseX = event.clientX;
this.resizedTLPlayer = elmt.steps; this.resizedTLElmt = elmt.steps;
this.resizedBlockIndex = blockIndex; this.resizedBlockIndex = blockIndex;
this.curBlockEndTime = this.resizedTLPlayer[this.resizedBlockIndex].endTime; this.curBlockEndTime = this.resizedTLElmt[this.resizedBlockIndex].endTime;
this.curBlockStartTime = this.resizedTLPlayer[this.resizedBlockIndex].startTime; this.curBlockStartTime = this.resizedTLElmt[this.resizedBlockIndex].startTime;
console.log("[onHandleMouseDown] Element:", elmt, "- Index:", blockIndex, "- EndTime:", this.curBlockEndTime, "- StartTime", this.curBlockStartTime); console.log("[onHandleMouseDown] Element:", elmt, "- Index:", blockIndex, "- EndTime:", this.curBlockEndTime, "- StartTime", this.curBlockStartTime);
if (direction === 'left') { if (direction === 'left') {
@@ -1315,4 +1316,26 @@ export class FootballFieldComponent {
this.animationStartTime = performance.now(); // Obtenir le timestamp de départ this.animationStartTime = performance.now(); // Obtenir le timestamp de départ
this.animate(); 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;
}
} }