From cdee6d4e516796fc670a4923fa070c2fa28e1ca3 Mon Sep 17 00:00:00 2001 From: vbenoit Date: Wed, 16 Oct 2024 14:48:27 +0000 Subject: [PATCH] colision entre le bloc courant et le bloc suivant sur redimensionnement --- .../football-field.component.html | 12 +++ .../football-field.component.ts | 96 +++++++++---------- 2 files changed, 57 insertions(+), 51 deletions(-) diff --git a/src/app/football-field/football-field.component.html b/src/app/football-field/football-field.component.html index 9f82363..c113277 100644 --- a/src/app/football-field/football-field.component.html +++ b/src/app/football-field/football-field.component.html @@ -54,6 +54,18 @@ [style.width]="calculateBlockWidth(stepBall)" (mousedown)="onTLBallBlockMouseDown($event, ball, i)"> {{ i + 1 }} +
+ +
+
+ +
diff --git a/src/app/football-field/football-field.component.ts b/src/app/football-field/football-field.component.ts index a37a116..0b8318d 100644 --- a/src/app/football-field/football-field.component.ts +++ b/src/app/football-field/football-field.component.ts @@ -110,12 +110,11 @@ export class FootballFieldComponent { private animationStartTime: number = 0; private isResizingLeft: boolean = false; private isResizingRight: boolean = false; - private currentBlock: TimelineStep | null = null; private initialMouseX:number = 0; - private initialBlockLeft:number = 0; - private initialBlockWidth:number = 0; private resizedTLPlayer: TimelineStep[] | null = null; private resizedBlockIndex: number = 0; + private curBlockEndTime: number = 0; + private curBlockStartTime: number = 0; public playerCount: number = 8; // Nombre de joueurs par défaut public plotCount: number = 2; // Nombre de plots par défaut @@ -977,25 +976,41 @@ export class FootballFieldComponent { if (!this.resizedTLPlayer) return; const deltaX = event.clientX - this.initialMouseX; - + // On recupère le bloc courant + const curStep = this.resizedTLPlayer[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]; + } + // On recupère le bloc précédent si il existe + if (this.resizedBlockIndex > 0) { + prevStep = this.resizedTLPlayer[this.resizedBlockIndex - 1]; + } 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 - } + 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); + } else { + curStep.startTime = Math.max(0, newStartTime); + } + // On calcule la nouvelle durée du bloc + curStep.duration = curStep.endTime - newStartTime; } 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 + 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) + } else { + curStep.endTime = Math.max(curStep.startTime, newEndTime); + } + + // On calcule la nouvelle durée du bloc + curStep.duration = newEndTime - curStep.startTime; + } } } @@ -1003,25 +1018,24 @@ export class FootballFieldComponent { console.log("[onHandleMouseUp]"); this.isResizingLeft = false; this.isResizingRight = false; - this.currentBlock = null; this.resizedTLPlayer = null; this.resizedBlockIndex = 0; + this.curBlockEndTime = 0; } - onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', player: Player, blockIndex: number) { - console.log("[onHandleMouseDown] player:", player); + onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', elmt: Player | Ball, blockIndex: number) { // 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 + // 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)"); + + this.resizedTLPlayer = elmt.steps; + this.resizedBlockIndex = blockIndex; + this.curBlockEndTime = this.resizedTLPlayer[this.resizedBlockIndex].endTime; + this.curBlockStartTime = this.resizedTLPlayer[this.resizedBlockIndex].startTime; + + console.log("[onHandleMouseDown] Element:", elmt, "- Index:", blockIndex, "- EndTime:", this.curBlockEndTime, "- StartTime", this.curBlockStartTime); if (direction === 'left') { this.isResizingLeft = true; } else if (direction === 'right') { @@ -1029,26 +1043,6 @@ export class FootballFieldComponent { } } -/* - updateTimelineData() { - if (!this.currentBlock) return; - - const blockId = this.currentBlock.id; - const blockLeft = this.currentBlock.offsetLeft; - const blockWidth = this.currentBlock.offsetWidth; - - // Conversion des positions en temps sur la timeline (ex: 1px = 10ms) - const startTime = blockLeft * 10; - const endTime = (blockLeft + blockWidth) * 10; - - // Mettre à jour les données du bloc (par exemple pour un joueur) - const timelineStep = this.getTimelineStepById(blockId); - if (timelineStep) { - timelineStep.startTime = startTime; - 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