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 {
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;
}

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

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