Minimap using minimap-js/limit zoom/start position/fix some traces

package-lock.json

@@ -18,6 +18,7 @@
         "@angular/platform-browser": "^14.0.0",
         "@angular/platform-browser-dynamic": "^14.0.0",
         "@angular/router": "^14.0.0",
+        "js-minimap": "^1.0.7",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.11.4"
@@ -7176,6 +7177,11 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/js-minimap": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/js-minimap/-/js-minimap-1.0.7.tgz",
+      "integrity": "sha512-UiTLhxq0oyoyYx3rt58UvrlFuy9njE6mh1kiYXH+lntq1LAnMXeSaCOYglVUOlTcIpZUXCXgPf9esWSpZBPsLQ=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -17491,6 +17497,11 @@
         }
       }
     },
+    "js-minimap": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/js-minimap/-/js-minimap-1.0.7.tgz",
+      "integrity": "sha512-UiTLhxq0oyoyYx3rt58UvrlFuy9njE6mh1kiYXH+lntq1LAnMXeSaCOYglVUOlTcIpZUXCXgPf9esWSpZBPsLQ=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^14.0.0",
     "@angular/platform-browser-dynamic": "^14.0.0",
     "@angular/router": "^14.0.0",
+    "js-minimap": "^1.0.7",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -37,4 +38,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.7.2"
   }
-}
\ No newline at end of file
+}

src/app/app.component.html

@@ -156,6 +156,7 @@
         matTooltip="Télécharger le manuel d'utilisation."
         matTooltipPosition="above" [matTooltipDisabled]="!tooltipService.activatedTooltips"><mat-icon fontIcon="menu_book"></mat-icon></button>
     </div>
+    <div class="container-minimap"></div>
     <div class="container-zoom">
         <button mat-mini-fab color="white" (click)="zoomIn()"
         matTooltip="Zoomer le scénario."

src/app/app.component.scss

@@ -205,7 +205,7 @@
     &-zoom {
         position: fixed;
         height: 110px;
-        right: 360px;
+        right: 580px;
         bottom: 25px;
         display: flex;
         flex-direction: column;
@@ -221,6 +221,20 @@
             }
         }
     }
+
+    &-minimap {
+        position: fixed;
+        height: 200px;
+        width: 200px;
+        z-index: 2;
+        background-color: white;
+        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+        padding: 5px;
+        border-radius: 10px;
+        bottom: 25px;
+        right: 360px;
+        overflow: scroll;
+    }
 }
 
 ::ng-deep .mat-tooltip {

src/app/app.component.ts

-import { ChangeDetectorRef, Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, HostListener, SimpleChanges, ViewChild } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Mission } from './class/mission/mission';
 import { Scenario } from './class/scenario/scenario';
@@ -33,6 +33,8 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { LoadingsucessSnackbarComponent } from './components/snackbars/loadingsucess-snackbar/loadingsucess-snackbar.component';
 import { LoadingfailSnackbarComponent } from './components/snackbars/loadingfail-snackbar/loadingfail-snackbar.component';
 import { Trace } from './class/trace/trace';
+import Minimap from 'js-minimap';
+import { MinimapService } from './services/minimap/minimap.service';
 
 @Component({
   selector: 'app-root',
@@ -47,7 +49,7 @@ export class AppComponent {
 
   constructor(private cdr: ChangeDetectorRef, private http: HttpClient, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService,
     private elementRef: ElementRef, private zoomService: ZoomService, private dialog: MatDialog, private titleService: Title,
-    private _snackBar: MatSnackBar) {
+    private _snackBar: MatSnackBar, protected minimapService: MinimapService) {
     pieceDetailsService.piece = this.scenario;
 
     this.scenario.missions.forEach(mission => {
@@ -55,6 +57,17 @@ export class AppComponent {
     });
   }
 
+  ngOnInit(): void {
+    const container = this.elementRef.nativeElement.querySelector('.container-appDragScroll');
+    const target = this.elementRef.nativeElement.querySelector('.container-minimap');
+    container.scrollTo(0,800);
+    this.minimapService.minimap = new Minimap({
+      container,
+      target,
+      observe: false
+    })
+  }
+
   @HostListener('window:beforeunload', ['$event'])
   beforeUnloadHandler(event: any) {
     const message = "Êtes vous sûr de vouloir quitter RLG Maker ?\nVous risquez de perdre les données non sauvegardées.";
@@ -261,29 +274,33 @@ export class AppComponent {
   }
 
   zoomIn(): void {
-    const element = this.elementRef.nativeElement.querySelector('.container-appMouseWheelZoom');
-    this.zoomService.zoom += 0.1;
-    element.style.transform = `scale(${this.zoomService.zoom})`;
+    if (this.zoomService.zoom < 1.5) {
+      const element = this.elementRef.nativeElement.querySelector('.container-appMouseWheelZoom');
+      this.zoomService.zoom += 0.1;
+      element.style.transform = `scale(${this.zoomService.zoom})`;
+      this.minimapService.reset();
+    }
   }
 
   zoomOut(): void {
     if (this.zoomService.zoom > 0.3) {
       const element = this.elementRef.nativeElement.querySelector('.container-appMouseWheelZoom');
       this.zoomService.zoom -= 0.1;
-      element.style.transform = `scale(${this.zoomService.zoom})`;      
+      element.style.transform = `scale(${this.zoomService.zoom})`;
+      this.minimapService.reset();  
     }
   }
 
   addMissionStep(mission: Mission, index: number, missionIndex: number): void {
     mission.addChronologieStep(index);
     mission.equalizeLengths();
-    this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',missionIndex,undefined,'all','Step_m_['+index+']','#ACC9FC'));
+    this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',missionIndex,undefined,'all','Step_m_['+index+']','#ACC9FC'));
   }
 
   addRoleStep(mission: Mission, role: Role, index: number, missionIndex: number, roleIndex: number): void {
     role.addChronologieStep(index);
     mission.equalizeLengths();
-    this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',missionIndex,roleIndex,'all','Step_r_['+index+']','#ACC9FC'));
+    this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',missionIndex,roleIndex,'all','Step_r_['+index+']','#ACC9FC'));
   }
 
   addTask(mission: Mission, role: Role, missionIndex: number, roleIndex: number, i: number, j: number, type: string) {

src/app/directives/mouse-wheel-zoom.directive.ts

 import { Directive, ElementRef, HostListener } from '@angular/core';
 import { ZoomService } from '../services/zoom/zoom.service';
+import { MinimapService } from '../services/minimap/minimap.service';
 
 @Directive({
   selector: '[appMouseWheelZoom]'
@@ -8,7 +9,7 @@ export class MouseWheelZoomDirective {
 
   private element: HTMLElement;
 
-  constructor(private elementRef: ElementRef, private zoomService: ZoomService) {
+  constructor(private elementRef: ElementRef, private zoomService: ZoomService, private minimapService: MinimapService) {
     this.element = elementRef.nativeElement;
   }
 
@@ -17,11 +18,14 @@ export class MouseWheelZoomDirective {
     event.preventDefault();
     let zoomLevel: number = 0;
     if (event.deltaY < 0) {
-      zoomLevel = 0.1
+      if (this.zoomService.zoom < 1.5) {
+        zoomLevel = 0.1
+      }
     } else if (this.zoomService.zoom > 0.3) {
       zoomLevel = -0.1
     }
     this.zoomService.zoom += zoomLevel;
     this.element.style.transform = `scale(${this.zoomService.zoom})`;
+    this.minimapService.reset();
   }
 }
\ No newline at end of file

src/app/pieces/game-characters/game-characters.component.ts

@@ -8,6 +8,7 @@ import { Character } from 'src/app/class/character/character';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
 import { Task } from 'src/app/class/task/task';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-game-characters',
@@ -20,7 +21,7 @@ export class GameCharactersComponent implements OnInit {
   @Input() scenario = new Scenario()
   newCharacter: Character = new Character();
 
-  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
   }
@@ -49,7 +50,8 @@ export class GameCharactersComponent implements OnInit {
             });
           });
         });  
-        this.scenario.traces.push(new Trace(this.scenario.traces.length,'erase',undefined,undefined,'all','Characters','#CE7B66'));                 
+        this.scenario.traces.push(new Trace(this.scenario.traces.length,'erase',undefined,undefined,'all','Characters','#CE7B66'));
+        this.minimapService.reset();                 
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_erase',undefined,undefined,'all','Characters','#CE7B66'));                 
       }
@@ -60,7 +62,8 @@ export class GameCharactersComponent implements OnInit {
     if (this.newCharacter.name != '') {
       this.scenario.characters.push(this.newCharacter);
       this.newCharacter = new Character();
-      this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',undefined,undefined,'all','Characters_['+(this.scenario.characters.length-1)+']','#CE7B66'));                     
+      this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',undefined,undefined,'all','Characters_['+(this.scenario.characters.length-1)+']','#CE7B66'));
+      this.minimapService.reset();                    
     }
   }
 
@@ -81,7 +84,8 @@ export class GameCharactersComponent implements OnInit {
             });
           });
           this.scenario.characters.splice(index, 1);
-          this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',undefined,undefined,'all','Characters_['+index+']','#CE7B66'));                 
+          this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',undefined,undefined,'all','Characters_['+index+']','#CE7B66'));
+          this.minimapService.reset();                
         } else {
           this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',undefined,undefined,'all','Characters_['+index+']','#CE7B66'));                 
         }

src/app/pieces/role/role.component.ts

@@ -18,6 +18,7 @@ import { SuppressDialogComponent } from 'src/app/components/dialogs/suppress-dia
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
 import { CreateDialogComponent } from 'src/app/components/dialogs/create-dialog/create-dialog.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-role',
@@ -32,7 +33,7 @@ export class RoleComponent implements OnInit {
   @Input() i: number = 0;
   @Input() missionIndex: number = 0;
 
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
     this.mission.equalizeLengths();
@@ -81,7 +82,10 @@ export class RoleComponent implements OnInit {
           });
         });
         this.role.ressources = [];
-        this.scenario.traces.push(new Trace(this.scenario.traces.length,'erase',this.missionIndex,this.i,'all','Role_['+(this.i)+']','#9AD5EC'));      
+        this.scenario.traces.push(new Trace(this.scenario.traces.length,'erase',this.missionIndex,this.i,'all','Role_['+(this.i)+']','#9AD5EC'));
+        this.minimapService.reset();      
+      } else {
+        this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_erase',this.missionIndex,this.i,'all','Role_['+(this.i)+']','#9AD5EC'));
       }
     });
   }
@@ -89,10 +93,13 @@ export class RoleComponent implements OnInit {
   onClickDelete(): void {
     const dialogRef = this.dialog.open(SuppressDialogComponent, { data: 'ce Rôle '+(this.role.intitule ? '<'+this.role.intitule+'>' : this.i+1) });
     dialogRef.afterClosed().subscribe(result => {
+      let missionIndex: number = this.scenario.missions.findIndex(mission => mission == this.mission);
       if (result == true) {
         this.mission.roles.splice(this.i, 1);
-        let missionIndex: number = this.scenario.missions.findIndex(mission => mission == this.mission);
-        this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',missionIndex,this.i,'all','Role_['+(this.i)+']','#9AD5EC'));     
+        this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',missionIndex,this.i,'all','Role_['+(this.i)+']','#9AD5EC'));
+        this.minimapService.reset();  
+      } else {
+        this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',missionIndex,this.i,'all','Role_['+(this.i)+']','#9AD5EC'));
       }
     });
   }
@@ -108,6 +115,7 @@ export class RoleComponent implements OnInit {
   addEducationnalObjective(): void {
     this.role.educationnalObjectives.push(new RoleEducationnalObjective());
     this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',this.missionIndex,this.i,'Obj_['+(this.role.educationnalObjectives.length-1)+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+    this.minimapService.reset();
   }
 
   removeEducationnalObjective(index: number): void {
@@ -116,6 +124,7 @@ export class RoleComponent implements OnInit {
       if (result == true) {
         this.role.educationnalObjectives.splice(index, 1);
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',this.missionIndex,this.i,'Obj_['+(index)+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+        this.minimapService.reset();
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',this.missionIndex,this.i,'Obj_['+(index)+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
       }
@@ -125,6 +134,7 @@ export class RoleComponent implements OnInit {
   addRessource(): void {
     this.role.ressources.push(new Ressource());
     this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',this.missionIndex,this.i,'skill/ressource_['+this.role.ressources.length+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+    this.minimapService.reset();
   }
 
   removeRessource(index: number): void {
@@ -141,7 +151,8 @@ export class RoleComponent implements OnInit {
           });
         });
         this.role.ressources.splice(index, 1);
-        this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',this.missionIndex,this.i,'Skill/Ressource_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));        
+        this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',this.missionIndex,this.i,'Skill/Ressource_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+        this.minimapService.reset();       
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',this.missionIndex,this.i,'Skill/Ressource_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
       }
@@ -151,6 +162,7 @@ export class RoleComponent implements OnInit {
   addSupplementaryRole(): void {
     this.role.supplementaryRoles.push(new SupplementaryRole());
     this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',this.missionIndex,this.i,'Secondary_role_['+this.role.supplementaryRoles.length+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+    this.minimapService.reset();
   }
 
   removeSupplementaryRole(index: number) {
@@ -159,6 +171,7 @@ export class RoleComponent implements OnInit {
       if (result == true) {
         this.role.supplementaryRoles.splice(index, 1);
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',this.missionIndex,this.i,'Secondary_role_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+        this.minimapService.reset();
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',this.missionIndex,this.i,'Secondary_role_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
       }
@@ -168,6 +181,7 @@ export class RoleComponent implements OnInit {
   addReward(): void {
     this.role.rewards.push(new QuestReward());
     this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',this.missionIndex,this.i,'Reward_['+this.role.rewards.length+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+    this.minimapService.reset();
   }
 
   changeRewardType(index: number, type: string): void {
@@ -192,7 +206,8 @@ export class RoleComponent implements OnInit {
     dialogRef.afterClosed().subscribe(result => {
       if (result == true) {
         this.role.rewards.splice(index, 1);
-        this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',this.missionIndex,this.i,'Reward_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));        
+        this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',this.missionIndex,this.i,'Reward_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+        this.minimapService.reset();      
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',this.missionIndex,this.i,'Reward_['+index+']', 'Role_['+this.i+']', '#9AD5EC', '*'));        
       }
@@ -226,6 +241,7 @@ export class RoleComponent implements OnInit {
   addObject(index: number): void {
     this.getObjectsReward(index).objects.push(new Ressource);
     this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',this.missionIndex,this.i,'Reward_['+index+']_object_['+this.getObjectsReward(index).objects.length+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+    this.minimapService.reset();
   }
 
   removeObject(i: number, j: number): void {
@@ -234,6 +250,7 @@ export class RoleComponent implements OnInit {
       if (result == true) {
         this.getObjectsReward(i).objects.splice(j, 1);
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',this.missionIndex,this.i,'Reward_['+i+']_object_['+j+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
+        this.minimapService.reset();
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',this.missionIndex,this.i,'Reward_['+i+']_object_['+j+']', 'Role_['+this.i+']', '#9AD5EC', '*'));
       }

src/app/pieces/rules/rules.component.ts

@@ -8,6 +8,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { PieceDetailsService } from 'src/app/services/piece-details/piece-details.service';
 import { Task } from 'src/app/class/task/task';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-rules',
@@ -19,7 +20,7 @@ export class RulesComponent implements OnInit {
   displayMenu: string = 'hide';
   @Input() scenario: Scenario = new Scenario();
 
-  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
   }
@@ -55,6 +56,7 @@ export class RulesComponent implements OnInit {
         });
         this.scenario.ressources = [];
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'erase',undefined,undefined,'all','Rules', '#C6C2BD'));
+        this.minimapService.reset();
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_erase',undefined,undefined,'all','Rules', '#C6C2BD'));
       }
@@ -64,6 +66,7 @@ export class RulesComponent implements OnInit {
   addRessource(): void {
     this.scenario.ressources.push(new Ressource());
     this.scenario.traces.push(new Trace(this.scenario.traces.length,'new',undefined,undefined,'Ressource_['+(this.scenario.traces.length-1)+']','Rules', '#C6C2BD'));
+    this.minimapService.reset();
   }
 
   removeRessource(index: number): void {
@@ -85,6 +88,7 @@ export class RulesComponent implements OnInit {
         });
         this.scenario.ressources.splice(index, 1);
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'delete',undefined,undefined,'Ressource_['+index+']','Rules', '#C6C2BD'));
+        this.minimapService.reset();
       } else {
         this.scenario.traces.push(new Trace(this.scenario.traces.length,'cancel_delete',undefined,undefined,'Ressource_['+index+']','Rules', '#C6C2BD'));
       }

src/app/pieces/step/step.component.ts

-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Mission } from 'src/app/class/mission/mission';
 import { Role } from 'src/app/class/role/role';
@@ -9,6 +9,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { TooltipService } from 'src/app/services/tooltip/tooltip.service';
 import { Trace } from 'src/app/class/trace/trace';
 import { Scenario } from 'src/app/class/scenario/scenario';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-step',
@@ -29,11 +30,12 @@ export class StepComponent implements OnInit {
   pieceWidth: number = 400;
   urlIcon: string = 'url("./assets/background-images/step.png")';
 
-  constructor(protected pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   getStepNumber(): number {
@@ -68,6 +70,7 @@ export class StepComponent implements OnInit {
       }
     }
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   setPieceWidth(): void {

src/app/pieces/tasks/annexe-task/annexe-task.component.ts

@@ -14,6 +14,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-annexe-task',
@@ -41,11 +42,12 @@ export class AnnexeTaskComponent implements OnInit {
   antecedent: boolean = false;
 
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
   
   durationChange(): void {
@@ -70,6 +72,7 @@ export class AnnexeTaskComponent implements OnInit {
       }
     }
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   setPieceWidth(): void {

src/app/pieces/tasks/final-task/final-task.component.ts

@@ -14,6 +14,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-final-task',
@@ -41,11 +42,12 @@ export class FinalTaskComponent implements OnInit {
   antecedent: boolean = false;
 
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
   
   durationChange(): void {
@@ -70,6 +72,7 @@ export class FinalTaskComponent implements OnInit {
       }
     }
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   setPieceWidth(): void {

src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts

@@ -14,6 +14,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-optionnal-task',
@@ -41,11 +42,12 @@ export class OptionnalTaskComponent implements OnInit {
   antecedent: boolean = false;
 
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
   
   durationChange(): void {
@@ -70,6 +72,7 @@ export class OptionnalTaskComponent implements OnInit {
       }
     }
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   setPieceWidth(): void {

src/app/pieces/tasks/random-event/random-event.component.ts

@@ -14,6 +14,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-random-event',
@@ -41,11 +42,12 @@ export class RandomEventComponent implements OnInit {
   antecedent: boolean = false;
 
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
   
   durationChange(): void {
@@ -70,6 +72,7 @@ export class RandomEventComponent implements OnInit {
       }
     }
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   setPieceWidth(): void {

src/app/pieces/tasks/repeat-task/repeat-task.component.ts

@@ -9,6 +9,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/clean-dialog.component';
 import { Scenario } from 'src/app/class/scenario/scenario';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-repeat-task',
@@ -31,9 +32,11 @@ export class RepeatTaskComponent implements OnInit {
   urlIcon: string = 'url("./assets/background-images/repeatTask.png")';
   
 
-  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
+    this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   onClickErase(): void {

src/app/pieces/tasks/task/task.component.ts

@@ -14,6 +14,7 @@ import { CleanDialogComponent } from 'src/app/components/dialogs/clean-dialog/cl
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { IdentifierSnackbarComponent } from 'src/app/components/snackbars/identifier-snackbar/identifier-snackbar.component';
 import { Trace } from 'src/app/class/trace/trace';
+import { MinimapService } from 'src/app/services/minimap/minimap.service';
 
 @Component({
   selector: 'app-task',
@@ -41,11 +42,12 @@ export class TaskComponent implements OnInit {
   antecedent: boolean = false;
 
   constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog,
-    private _snackBar: MatSnackBar) { }
+    private _snackBar: MatSnackBar, private minimapService: MinimapService) { }
 
   ngOnInit(): void {
     this.setPieceWidth();
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
   
   durationChange(): void {
@@ -70,6 +72,7 @@ export class TaskComponent implements OnInit {
       }
     }
     this.mission.equalizeLengths();
+    this.minimapService.reset();
   }
 
   setPieceWidth(): void {

src/app/services/minimap/minimap.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { MinimapService } from './minimap.service';
+
+describe('MinimapService', () => {
+  let service: MinimapService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MinimapService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/minimap/minimap.service.ts

+import { Injectable } from '@angular/core';
+import Minimap from 'js-minimap';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MinimapService {
+
+  constructor() { }
+
+  minimap!: Minimap;
+  private timer: any;
+
+  public reset() {
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.minimap.reset()
+    }, 2000);
+  }  
+}
\ No newline at end of file