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

update

Browse Source
This commit is contained in:
BENOIT Vincent
2024-10-15 22:28:54 +00:00
parent 98c6dff4bf
commit cd4e91eb59
3 changed files with 30 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/football-field/football-field.component.css
View File

@@ -159,7 +159,7 @@ canvas {
.handle-left, .handle-right {
position: absolute;
top: 0;
width: 20px;
width: 15px;
height: 100%;
background-color: hsla(240, 100%, 50%, 0.507);;
cursor: ew-resize;

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')"
(mousedown)="onHandleMouseDown($event, 'left', stepPlayer)"
(mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()">
<!-- poignée gauche -->
</div>
<div class="handle-right"
(mousedown)="onHandleMouseDown($event, 'right')"
(mousedown)="onHandleMouseDown($event, 'right', stepPlayer)"
(mousemove)="onHandleMouseMove($event)"
(mouseup)="onHandleMouseUp()">
<!-- poignée droite -->

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

@@ -110,7 +110,7 @@ export class FootballFieldComponent {
private animationStartTime: number = 0;
private isResizingLeft: boolean = false;
private isResizingRight: boolean = false;
private currentBlock: HTMLElement | null = null;
private currentBlock: TimelineStep | null = null;
private initialMouseX:number = 0;
private initialBlockLeft:number = 0;
private initialBlockWidth:number = 0;
@@ -978,18 +978,19 @@ export class FootballFieldComponent {
const deltaX = event.clientX - this.initialMouseX;
if (this.isResizingLeft) {
const newLeft = this.initialBlockLeft + deltaX;
// Redimensionnement depuis la gauche
const newStartTime = 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
if (newWidth > 10) {
this.currentBlock.startTime = newStartTime;
}
} else if (this.isResizingRight) {
// Redimensionnement depuis la droite
const newWidth = this.initialBlockWidth + deltaX;
if (newWidth > 10) { // Empêcher une largeur trop petite
this.currentBlock.style.width = `${newWidth}px`;
this.updateTimelineData(); // Mettre à jour les données de la timeline
if (newWidth > 10) {
this.currentBlock.endTime = this.initialBlockLeft + newWidth;
}
}
}
@@ -1001,25 +1002,23 @@ export class FootballFieldComponent {
this.currentBlock = null;
}
onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right') {
console.log("[onHandleMouseDown]");
onHandleMouseDown(event: MouseEvent, direction: 'left' | 'right', block: TimelineStep) {
// Empêche le comportement par défaut (sélection de texte)
event.preventDefault();
//this.currentBlock = block;
this.currentBlock = block;
// Position initiale de la souris
//this.initialMouseX = event.clientX;
// Position initiale du bloc
//this.initialBlockLeft = block.offsetLeft;
// Largeur initiale du bloc
//this.initialBlockWidth = block.offsetWidth;
//console.log("[onResizeStart] (",this.initialMouseX, " - ", this.currentBlock);
//if (direction === 'left') {
// this.isResizingLeft = true;
//} else if (direction === 'right') {
// this.isResizingRight = true;
//}
}
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;
@@ -1038,7 +1037,7 @@ export class FootballFieldComponent {
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