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 { .handle-left, .handle-right {
position: absolute; position: absolute;
top: 0; top: 0;
width: 20px; width: 15px;
height: 100%; height: 100%;
background-color: hsla(240, 100%, 50%, 0.507);; background-color: hsla(240, 100%, 50%, 0.507);;
cursor: ew-resize; cursor: ew-resize;

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

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

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

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