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

resize bloc pas encore fonctionnel

Browse Source
This commit is contained in:
BENOIT Vincent
2024-10-16 13:42:39 +00:00
parent cd4e91eb59
commit fedd4a1953
2 changed files with 57 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -73,13 +73,13 @@
(mousedown)="onTimelineBlockMouseDown($event, player, i)">
{{ i + 1 }}
<div class="handle-left"
(mousedown)="onHandleMouseDown($event, 'left', stepPlayer)"
(mousedown)="onHandleMouseDown($event, 'left', player, i)"
(mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()">
<!-- poignée gauche -->
</div>
<div class="handle-right"
(mousedown)="onHandleMouseDown($event, 'right', stepPlayer)"
(mousedown)="onHandleMouseDown($event, 'right', player, i)"
(mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()">
<!-- poignée droite -->

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

@@ -114,6 +114,8 @@ export class FootballFieldComponent {
private initialMouseX:number = 0;
private initialBlockLeft:number = 0;
private initialBlockWidth:number = 0;
private resizedTLPlayer: TimelineStep[] | null = null;
private resizedBlockIndex: number = 0;
public playerCount: number = 8; // Nombre de joueurs par défaut
public plotCount: number = 2; // Nombre de plots par défaut
@@ -972,52 +974,61 @@ export class FootballFieldComponent {
/* GESTION DE LA TIMELINE */
onHandleMouseMove(event: MouseEvent) {
console.log("[onHandleMouseMove]");
if (!this.currentBlock) return;
if (!this.resizedTLPlayer) return;
const deltaX = event.clientX - this.initialMouseX;
const deltaX = event.clientX - this.initialMouseX;
if (this.isResizingLeft) {
// Redimensionnement depuis la gauche
const newStartTime = this.initialBlockLeft + deltaX;
const newWidth = this.initialBlockWidth - deltaX;
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
}
} 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
}
}
if (newWidth > 10) {
this.currentBlock.startTime = newStartTime;
}
} else if (this.isResizingRight) {
// Redimensionnement depuis la droite
const newWidth = this.initialBlockWidth + deltaX;
onHandleMouseUp() {
console.log("[onHandleMouseUp]");
this.isResizingLeft = false;
this.isResizingRight = false;
this.currentBlock = null;
this.resizedTLPlayer = null;
this.resizedBlockIndex = 0;
}
if (newWidth > 10) {
this.currentBlock.endTime = this.initialBlockLeft + newWidth;
}
}
}
onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', player: Player, blockIndex: number) {
console.log("[onHandleMouseDown] player:", player);
// 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
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)");
if (direction === 'left') {
this.isResizingLeft = true;
} else if (direction === 'right') {
this.isResizingRight = true;
}
}
onHandleMouseUp() {
console.log("[onHandleMouseUp]");
this.isResizingLeft = false;
this.isResizingRight = false;
this.currentBlock = null;
}
onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', block: TimelineStep) {
// Empêche le comportement par défaut (sélection de texte)
event.preventDefault();
this.currentBlock = block;
// Position initiale de la souris
this.initialMouseX = event.clientX;
this.initialBlockLeft = block.startTime;
this.initialBlockWidth = block.endTime - block.startTime;
console.log("[onHandleMouseDown] (",this.initialMouseX, "-", this.initialBlockLeft, "-", this.initialBlockWidth, ")");
if (direction === 'left') {
this.isResizingLeft = true;
} else if (direction === 'right') {
this.isResizingRight = true;
}
}
/*
updateTimelineData() {
if (!this.currentBlock) return;