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)"
(mousedown)="onTLBallBlockMouseDown($event, ball, i)">
{{ 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 class="time-indicator" id="time-indicator">
<!-- 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 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