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

colision entre le bloc courant et le bloc suivant sur redimensionnement

Browse Source
This commit is contained in:
BENOIT Vincent
2024-10-16 14:48:27 +00:00
parent fedd4a1953
commit cdee6d4e51
2 changed files with 57 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,6 +54,18 @@
[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"
(mousedown)="onHandleMouseDown($event, 'left', ball, i)"
(mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()">
<!-- poignée gauche -->
</div>
<div class="handle-right"
(mousedown)="onHandleMouseDown($event, 'right', ball, i)"
(mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()">
<!-- poignée droite -->
</div>
</div> </div>
<div class="time-indicator" id="time-indicator"> <div class="time-indicator" id="time-indicator">
<!-- Trait de visualisation --> <!-- Trait de visualisation -->

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

@@ -110,12 +110,11 @@ export class FootballFieldComponent {
private animationStartTime: number = 0; private animationStartTime: number = 0;
private isResizingLeft: boolean = false; private isResizingLeft: boolean = false;
private isResizingRight: boolean = false; private isResizingRight: boolean = false;
private currentBlock: TimelineStep | null = null;
private initialMouseX:number = 0; private initialMouseX:number = 0;
private initialBlockLeft:number = 0;
private initialBlockWidth:number = 0;
private resizedTLPlayer: TimelineStep[] | null = null; private resizedTLPlayer: TimelineStep[] | null = null;
private resizedBlockIndex: number = 0; private resizedBlockIndex: number = 0;
private curBlockEndTime: number = 0;
private curBlockStartTime: number = 0;
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
@@ -977,25 +976,41 @@ export class FootballFieldComponent {
if (!this.resizedTLPlayer) return; if (!this.resizedTLPlayer) return;
const deltaX = event.clientX - this.initialMouseX; 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) { if (this.isResizingLeft) {
console.log("[onHandleMouseMove] Resizing Left"); const newStartTime = Math.floor(this.curBlockStartTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
const newLeft = this.initialBlockLeft + deltaX; console.log("[onHandleMouseMove] Resizing Left (",this.curBlockStartTime, "-", curStep.startTime, "-", newStartTime, ")");
const newWidth = this.initialBlockWidth - deltaX; if (prevStep) {
if (newWidth > 10) { // Empêcher une largeur trop petite curStep.startTime = Math.max(prevStep.endTime, newStartTime);
//this.currentBlock.style.left = `${newLeft}px`; } else {
//this.currentBlock.style.width = `${newWidth}px`; curStep.startTime = Math.max(0, newStartTime);
//this.updateTimelineData(); // Mettre à jour les données de la timeline }
} // On calcule la nouvelle durée du bloc
curStep.duration = curStep.endTime - newStartTime;
} else if (this.isResizingRight) { } else if (this.isResizingRight) {
const curStep = this.resizedTLPlayer[this.resizedBlockIndex]; const newEndTime = Math.floor(this.curBlockEndTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)));
const newEndTime = Math.floor(curStep.endTime + (deltaX * (this.getTotalTimelineDuration() / this.timelineWidth)) / 10); console.log("[onHandleMouseMove] Resizing Right (",this.curBlockEndTime, "-", curStep.endTime, "-",newEndTime,")");
console.log("[onHandleMouseMove] Resizing Right (",curStep, "-",newEndTime,")"); if (newEndTime < this.getTotalTimelineDuration()) {
curStep.endTime = Math.max(curStep.startTime, newEndTime); if (nextStep) {
curStep.duration = Math.max(curStep.startTime, newEndTime); curStep.endTime = Math.max(curStep.startTime, nextStep.startTime)
//curStep.endTime = Math.max(0, newWidth); } else {
//this.currentBlock.style.width = `${newWidth}px`; curStep.endTime = Math.max(curStep.startTime, newEndTime);
//this.updateTimelineData(); // Mettre à jour les données de la timeline }
// On calcule la nouvelle durée du bloc
curStep.duration = newEndTime - curStep.startTime;
}
} }
} }
@@ -1003,25 +1018,24 @@ export class FootballFieldComponent {
console.log("[onHandleMouseUp]"); console.log("[onHandleMouseUp]");
this.isResizingLeft = false; this.isResizingLeft = false;
this.isResizingRight = false; this.isResizingRight = false;
this.currentBlock = null;
this.resizedTLPlayer = null; this.resizedTLPlayer = null;
this.resizedBlockIndex = 0; this.resizedBlockIndex = 0;
this.curBlockEndTime = 0;
} }
onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', player: Player, blockIndex: number) { onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', elmt: Player | Ball, blockIndex: number) {
console.log("[onHandleMouseDown] player:", player);
// Empêche le comportement par défaut (déplacement du bloc) // Empêche le comportement par défaut (déplacement du bloc)
//event.preventDefault(); //event.preventDefault();
event.stopPropagation(); event.stopPropagation();
this.resizedTLPlayer = player.steps; // Position initiale de la souris
this.resizedBlockIndex = blockIndex;
// Position initiale de la souris
this.initialMouseX = event.clientX; this.initialMouseX = event.clientX;
// Position initiale du bloc
//this.initialBlockLeft = this.calculateBlockPixelPosition(this.currentBlock.startTime); this.resizedTLPlayer = elmt.steps;
// Largeur initiale du bloc this.resizedBlockIndex = blockIndex;
//this.initialBlockWidth = this.calculateBlockPixelPosition(this.currentBlock.endTime) - this.initialBlockLeft; this.curBlockEndTime = this.resizedTLPlayer[this.resizedBlockIndex].endTime;
//console.log("[onResizeStart] (",this.initialMouseX, "px -", this.initialBlockLeft, "px -",this.initialBlockWidth,"px)"); this.curBlockStartTime = this.resizedTLPlayer[this.resizedBlockIndex].startTime;
console.log("[onHandleMouseDown] Element:", elmt, "- Index:", blockIndex, "- EndTime:", this.curBlockEndTime, "- StartTime", this.curBlockStartTime);
if (direction === 'left') { if (direction === 'left') {
this.isResizingLeft = true; this.isResizingLeft = true;
} else if (direction === 'right') { } 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 { getTimelineStepById(blockId: string): TimelineStep | null {
// Trouver le bloc correspondant aux données // Trouver le bloc correspondant aux données
// Cette fonction est un exemple. Adapte-la selon la manière dont tu stockes tes données // Cette fonction est un exemple. Adapte-la selon la manière dont tu stockes tes données