add drag scroll

src/app/app.component.html

 <div class="container">
-    <div class="container-main" style="display: flex;">
-        
-        <div style="display: flex; flex-direction: column;" [style.z-index]="4">
-            <app-game-educationnal-objective></app-game-educationnal-objective>
-            <app-game-context [style.z-index]="2"></app-game-context>
-        </div>
-        
-        <div style="display: flex; flex-direction: column;" [style.z-index]="3">
-            <app-educational-objective></app-educational-objective>
-            
-            <app-mission-context [style.z-index]="2"></app-mission-context>
+    <div class="container-main" appDragScroll>
+        <div class="container-main-scenario" style="display: flex;">
+            <div style="display: flex; flex-direction: column;" [style.z-index]="4">
+                <app-game-educationnal-objective></app-game-educationnal-objective>
+                <app-game-context [style.z-index]="2"></app-game-context>
+            </div>
             
-        </div>
+            <div style="display: flex; flex-direction: column;" [style.z-index]="3">
+                <app-educational-objective></app-educational-objective>
+                
+                <app-mission-context [style.z-index]="2"></app-mission-context>
+                
+            </div>
 
-        <div [style.z-index]="2">
-            <div style="display: flex;">
-                <app-role [style.z-index]="10"></app-role>
-                <div [style.z-index]="1">
-                    <div style="display: flex;" [style.z-index]="2">
-                        <app-task [style.z-index]="2"></app-task >
-                        <app-task [style.z-index]="1"></app-task>  
+            <div [style.z-index]="2">
+                <div style="display: flex;">
+                    <app-role [style.z-index]="10"></app-role>
+                    <div [style.z-index]="1">
+                        <div style="display: flex;" [style.z-index]="2">
+                            <app-task [style.z-index]="2"></app-task>
+                            <app-task [style.z-index]="1"></app-task>  
+                        </div>
                     </div>
-                    
                 </div>
-            </div>
-            <div style="display: flex;">
-                <app-role [style.z-index]="10"></app-role>
-                <div [style.z-index]="1">
-                    <div style="display: flex;" [style.z-index]="2">
-                        <app-task [style.z-index]="2"></app-task >
-                        <app-task [style.z-index]="1"></app-task>  
+                <div style="display: flex;">
+                    <app-role [style.z-index]="10"></app-role>
+                    <div [style.z-index]="1">
+                        <div style="display: flex;" [style.z-index]="2">
+                            <app-task [style.z-index]="2"></app-task>
+                            <app-task [style.z-index]="1"></app-task>  
+                        </div>
                     </div>
                 </div>
             </div>

src/app/app.component.scss

@@ -4,16 +4,23 @@
     flex-direction: row;
 
     &-main {
-        margin-top: 60px;
-        margin-right: 20%;
+        position: absolute;
         height: 100%;
-        width: 100%;
-        //width: 80%;
-        //transform: scale(0.75);
-        //transform-origin: top left;
+        width: calc(80% - 5px);
+        left: 0;
+        right: 5px;
+        top: 0px;
         overflow: scroll;
-        //overflow-y: visible;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
 
+        &-scenario {
+            padding: 60px 5px 10px 5px;
+            margin-right: 7px;
+        }
+    }
+    &-main::-webkit-scrollbar {
+        display: none;
     }
 
     &-sider {

src/app/app.module.ts

@@ -13,7 +13,8 @@ import { AnnexeTaskComponent } from './pieces/annexe-task/annexe-task.component'
 
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatIconModule } from '@angular/material/icon'; 
+import { MatIconModule } from '@angular/material/icon';
+import { DragScrollDirective } from './directives/drag-scroll.directive'; 
 
 @NgModule({
   declarations: [
@@ -24,7 +25,8 @@ import { MatIconModule } from '@angular/material/icon';
     GameEducationnalObjectiveComponent,
     GameContextComponent,
     TaskComponent,
-    AnnexeTaskComponent
+    AnnexeTaskComponent,
+    DragScrollDirective
   ],
   imports: [
     BrowserModule,

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

+import { DragScrollDirective } from './drag-scroll.directive';
+
+describe('DragScrollDirective', () => {
+  it('should create an instance', () => {
+    const directive = new DragScrollDirective();
+    expect(directive).toBeTruthy();
+  });
+});

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

+import { Directive, HostListener, ElementRef } from '@angular/core';
+
+@Directive({
+  selector: '[appDragScroll]'
+})
+export class DragScrollDirective {
+  private isMouseDown: boolean = false;
+  private startX: number = 0;
+  private startY: number = 0;
+  private element: HTMLElement;
+
+  constructor(elementRef: ElementRef) {
+    this.element = elementRef.nativeElement;
+  }
+
+  @HostListener('mousedown', ['$event'])
+  onMouseDown(event: any) {
+    this.isMouseDown = true;
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+    this.element.style.cursor = 'grabbing';
+  }
+
+  @HostListener('mouseup', ['$event'])
+  onMouseUp(event: any) {
+    this.isMouseDown = false;
+    this.element.style.cursor = 'grab';
+  }
+
+  @HostListener('mousemove', ['$event'])
+  onMouseMove(event: any) {
+    if(this.isMouseDown) {
+      event.preventDefault();
+      const x = event.clientX - this.startX;
+      const y = event.clientY - this.startY;
+      this.element.scrollLeft -= x;
+      this.element.scrollTop -= y;
+      this.startX = event.clientX;
+      this.startY = event.clientY;
+    }
+  }
+}
\ No newline at end of file