From a58e1d0ed6166bc0cd155fd222ae13d72c092be5 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 23 May 2018 17:29:23 +0200
Subject: [PATCH] feat(appComponent): added mouse wheel scaling

---
 src/app/app.component.html |  2 +-
 src/app/app.component.ts   | 26 +++++++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 046b819..20bd5cb 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -89,7 +89,7 @@
       <label class="form-control-label">
         Skalierung
       </label>
-      <input type="number" class="form-control" formControlName="scale" min="0" max="1" step="0.1">
+      <input type="number" class="form-control" formControlName="scale" min="0" max="1" step="0.01">
     </div>
     <div class="form-group">
       <label class="form-control-label">
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1131d25..3170134 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { ConfigForm } from './forms/config.form';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostListener } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import { environment as env } from '../environments/environment';
@@ -17,6 +17,30 @@ export class AppComponent implements OnInit {
   public config: any | null;
   public configForm: FormGroup;
 
+  @HostListener('mousewheel', ['$event'])
+  private onWheelUp(event) {
+    const delta = Math.sign(event.deltaY);
+    const step = 0.01;
+
+    if (delta > 0) {
+      if (this.config.scale === 1 - step) {
+        return;
+      }
+      this.config.scale += step;
+    } else {
+      if (this.config.scale === step) {
+        return;
+      }
+      this.config.scale -= step;
+    }
+
+    this.config.scale = Math.round(this.config.scale * 100) / 100;
+
+    this.configForm.reset({...this.config});
+    this.updateGraphs();
+  }
+
+
   constructor() {
     this.canvasParam = {
       colors: {