fix zoom problem / add scroll with directionnal arrow and quick save

src/app/app.component.html

 <div class="container">
-    <div class="container-appDragScroll" appDragScroll>
-        <div class="container-appMouseWheelZoom" appMouseWheelZoom>
+    <div class="container-appDragScroll" appDragScroll appMouseWheelZoom>
+        <div class="container-appMouseWheelZoom">
 
             <div class="container-scenario-main">
                 <div class="container-scenario-main-gamePieces" [style.z-index]="4">

src/app/app.component.scss

@@ -13,6 +13,7 @@
         overflow: scroll;
         -ms-overflow-style: none;
         scrollbar-width: none;
+        user-select: none;
     }
 
     &-appDragScroll::-webkit-scrollbar {
@@ -20,7 +21,6 @@
     }
 
     &-appMouseWheelZoom {
-        position: relative;
         transform-origin: top left;
         padding: 60px 5px 10px 5px;
         margin-right: 7px;

src/app/app.component.ts

@@ -75,6 +75,31 @@ export class AppComponent {
     return message;
   }
 
+  @HostListener('document:keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    if (event.ctrlKey && event.key === 's') {
+      event.preventDefault();
+      let fileName: string = this.scenario.projectName;
+      if (this.scenario.projectName == '') {
+        fileName = "Scénario - RLG Maker";
+        this.titleService.setTitle('RLG Maker'); 
+      } else {
+        fileName = this.scenario.projectName+' - RLG Maker';
+        this.titleService.setTitle('RLG Maker - '+this.scenario.projectName);
+      }
+      this.scenario.tooltips = this.tooltipService.activatedTooltips;
+      this.scenario.traces.push(new Trace(this.scenario.traces.length, 'quick_save', undefined, undefined, 'all', 'Scenario'));
+      const jsonString = JSON.stringify(this.scenario,undefined,2);
+      const blob = new Blob([jsonString], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.download = fileName;
+      link.href = url;
+      link.click();
+      URL.revokeObjectURL(url);
+    }
+  }
+
   downloadManual(): void {
     const manualUrl = './assets/GuideMakerWeb_v2.0.pdf';
     this.http.get(manualUrl, { responseType: 'blob' }).subscribe((blob: Blob) => {

src/app/directives/drag-scroll.directive.ts

@@ -39,4 +39,24 @@ export class DragScrollDirective {
       this.startY = event.clientY;
     }
   }
+
+  @HostListener('window:keydown', ['$event'])
+  handleKeyDown(event: KeyboardEvent) {
+    if (document.activeElement!.tagName.toLowerCase() !== 'input' && document.activeElement!.tagName.toLowerCase() !== 'textarea') {
+      const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+      if (arrowKeys.includes(event.key)) {
+        event.preventDefault();
+        const distance = 50;
+        if (event.key === 'ArrowUp') {
+          this.element.scrollBy(0, -distance);
+        } else if (event.key === 'ArrowDown') {
+          this.element.scrollBy(0, distance);
+        } else if (event.key === 'ArrowLeft') {
+          this.element.scrollBy(-distance, 0);
+        } else if (event.key === 'ArrowRight') {
+          this.element.scrollBy(distance, 0);
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

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

@@ -7,11 +7,7 @@ import { MinimapService } from '../services/minimap/minimap.service';
 })
 export class MouseWheelZoomDirective {
 
-  private element: HTMLElement;
-
-  constructor(private elementRef: ElementRef, private zoomService: ZoomService, private minimapService: MinimapService) {
-    this.element = elementRef.nativeElement;
-  }
+  constructor(private elementRef: ElementRef, private zoomService: ZoomService, private minimapService: MinimapService) { }
 
   @HostListener('wheel', ['$event'])
   onMouseWheel(event: WheelEvent) {
@@ -19,13 +15,13 @@ export class MouseWheelZoomDirective {
     let zoomLevel: number = 0;
     if (event.deltaY < 0) {
       if (this.zoomService.zoom < 1.5) {
-        zoomLevel = 0.1
+        zoomLevel = 0.025;
       }
     } else if (this.zoomService.zoom > 0.3) {
-      zoomLevel = -0.1
+      zoomLevel = -0.025;
     }
     this.zoomService.zoom += zoomLevel;
-    this.element.style.transform = `scale(${this.zoomService.zoom})`;
+    this.elementRef.nativeElement.querySelector('.container-appMouseWheelZoom').style.transform = `scale(${this.zoomService.zoom})`;
     this.minimapService.reset();
   }
 }
\ No newline at end of file