Merge branch 'zoomable' into 'develop'

add mouse-wheel-zoom

See merge request romain.deleau/rlg-tool!2

src/app/app.component.html

 <div class="container">
     <div class="container-main" appDragScroll>
-        <div class="container-main-scenario" style="display: flex;">
+        <div class="container-main-scenario" style="display: flex;" appMouseWheelZoom>
             <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>
@@ -47,8 +47,6 @@
 
         </div>
         <div class="container-sider-element" style="width: 400px; height: 400px; background-color: green;">
-
-        </div>
     </div>
 
 

src/app/app.component.scss

@@ -15,6 +15,8 @@
         scrollbar-width: none;
 
         &-scenario {
+            position: relative;
+            transform-origin: top left;
             padding: 60px 5px 10px 5px;
             margin-right: 7px;
         }

src/app/app.module.ts

@@ -14,7 +14,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 { DragScrollDirective } from './directives/drag-scroll.directive'; 
+import { DragScrollDirective } from './directives/drag-scroll.directive';
+import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive'; 
 
 @NgModule({
   declarations: [
@@ -26,7 +27,8 @@ import { DragScrollDirective } from './directives/drag-scroll.directive';
     GameContextComponent,
     TaskComponent,
     AnnexeTaskComponent,
-    DragScrollDirective
+    DragScrollDirective,
+    MouseWheelZoomDirective
   ],
   imports: [
     BrowserModule,

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

@@ -9,12 +9,12 @@ export class DragScrollDirective {
   private startY: number = 0;
   private element: HTMLElement;
 
-  constructor(elementRef: ElementRef) {
+  constructor(private elementRef: ElementRef) {
     this.element = elementRef.nativeElement;
   }
 
   @HostListener('mousedown', ['$event'])
-  onMouseDown(event: any) {
+  onMouseDown(event: MouseEvent) {
     this.isMouseDown = true;
     this.startX = event.clientX;
     this.startY = event.clientY;
@@ -22,13 +22,13 @@ export class DragScrollDirective {
   }
 
   @HostListener('mouseup', ['$event'])
-  onMouseUp(event: any) {
+  onMouseUp(event: MouseEvent) {
     this.isMouseDown = false;
     this.element.style.cursor = 'grab';
   }
 
   @HostListener('mousemove', ['$event'])
-  onMouseMove(event: any) {
+  onMouseMove(event: MouseEvent) {
     if(this.isMouseDown) {
       event.preventDefault();
       const x = event.clientX - this.startX;

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

+import { MouseWheelZoomDirective } from './mouse-wheel-zoom.directive';
+
+describe('MouseWheelZoomDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MouseWheelZoomDirective();
+    expect(directive).toBeTruthy();
+  });
+});

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

+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appMouseWheelZoom]'
+})
+export class MouseWheelZoomDirective {
+
+  private zoom: number = 1;
+  private element: HTMLElement;
+
+  constructor(private elementRef: ElementRef) {
+    this.element = elementRef.nativeElement;
+  }
+
+  @HostListener('wheel', ['$event'])
+  onMouseWheel(event: WheelEvent) {
+    event.preventDefault();
+    const zoomLevel = event.deltaY < 0 ? 0.1 : -0.1;
+    this.zoom += zoomLevel;
+    this.element.style.transform = `scale(${this.zoom})`;
+  }
+}
\ No newline at end of file