From d7672535d0919f56e94a06a762e763fad4609a61 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 23 May 2018 16:51:42 +0200
Subject: [PATCH] fix(graphsComponent): polishment

---
 src/app/app.component.html             |  6 ++++++
 src/app/components/graphs.component.ts | 28 +++++++++++---------------
 src/app/forms/config.form.ts           |  6 +++++-
 src/environments/environment.ts        |  8 ++++----
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4d3e053..046b819 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -85,6 +85,12 @@
         <option value="270">Links</option>
       </select>
     </div>
+    <div class="form-group">
+      <label class="form-control-label">
+        Skalierung
+      </label>
+      <input type="number" class="form-control" formControlName="scale" min="0" max="1" step="0.1">
+    </div>
     <div class="form-group">
       <label class="form-control-label">
         Knotenpunkte
diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts
index e39dd4c..13c31e3 100644
--- a/src/app/components/graphs.component.ts
+++ b/src/app/components/graphs.component.ts
@@ -9,6 +9,7 @@ import { GuillocheDirective } from './../directives/guilloche.directive';
 import { CanvasService } from './../services/canvas.service';
 import { Graph } from '../models/graph.model';
 import { Config } from './../models/config.model';
+import { Point } from '../models/point.model';
 
 @Component({
   selector: 'app-graphs',
@@ -86,24 +87,12 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   }
 
   private get matrix() {
-    const totalWidth = this.canvas.clientWidth;
-    const totalHeight = this.canvas.clientHeight;
-    const totalArea = Math.abs(totalWidth * totalHeight);
-    const totalCenter = {
-      x: totalWidth * 0.5,
-      y: totalHeight * 0.5
-    };
+    const totalArea = Math.abs(this.canvas.clientWidth * this.canvas.clientHeight);
+    const totalCenter = this.centerPoint(this.canvas.clientWidth, this.canvas.clientHeight);
 
-    const baseWidth = this.config.width;
-    const baseHeight = this.config.height;
     const baseArea = Math.abs(this.config.width * this.config.height);
-    const baseScale = Math.pow(totalArea / baseArea * env.guilloche.scale, 0.5);
-    const baseScaledWidth = baseScale * baseWidth;
-    const baseScaledHeight = baseScale * baseHeight;
-    const baseCenter = {
-      x: baseScaledWidth * 0.5,
-      y: baseScaledHeight * 0.5
-    };
+    const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5);
+    const baseCenter = this.centerPoint( baseScale * this.config.width, baseScale * this.config.height);
 
     return {
       start: {
@@ -116,4 +105,11 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
       }
     };
   }
+
+  private centerPoint(width, height): Point {
+    return {
+      x: width * 0.5,
+      y: height * 0.5
+    };
+  }
 }
diff --git a/src/app/forms/config.form.ts b/src/app/forms/config.form.ts
index 5481e07..27fb5de 100644
--- a/src/app/forms/config.form.ts
+++ b/src/app/forms/config.form.ts
@@ -16,5 +16,9 @@ export let ConfigForm: FormGroup = fb.group({
   nodes: fb.control('', Validators.compose([
     Validators.min(1),
     Validators.max(10)
-  ]))
+  ])),
+  scale: fb.control('', Validators.compose([
+    Validators.min(0),
+    Validators.max(1)
+  ])),
 });
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 4ea61e8..f91c313 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -8,15 +8,15 @@ export const environment = {
     colors: {
       start: '#cc0045',
       end: '#0067cc'
-    },
-    scale: 0.3
+    }
   },
   formDefaults: {
     width: 10,
-    height: -20,
+    height: 10,
     directionStart: 180,
     directionEnd: 270,
-    nodes: 1
+    nodes: 1,
+    scale: 0.3
   }
 };