From a238574aaf909dd02ad70d521e3409886a7e6e4f Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Mon, 3 Sep 2018 09:21:39 +0200
Subject: [PATCH] adjusted resizing and env's

---
 .../src/nls/components/graphs.component.ts    | 30 +++++++++++++------
 src/app/app.component.ts                      |  5 +---
 src/environments/environment.prod.ts          |  2 +-
 src/environments/environment.ts               |  5 ++--
 4 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/projects/nls-guilloche/src/nls/components/graphs.component.ts b/projects/nls-guilloche/src/nls/components/graphs.component.ts
index 156c17e..f24b85e 100644
--- a/projects/nls-guilloche/src/nls/components/graphs.component.ts
+++ b/projects/nls-guilloche/src/nls/components/graphs.component.ts
@@ -30,6 +30,8 @@ import { NlsMathService } from './../services/math.service';
 import { NlsGuillocheDirective } from './../directives/guilloche.directive';
 import { NlsGraphService } from './../services/graph.service';
 
+const RESIZING_TIMEOUT = 800;
+
 @Component({
   selector: 'nls-graphs',
   templateUrl: './graphs.component.html',
@@ -46,6 +48,7 @@ export class NlsGraphsComponent implements OnChanges {
   private genShiftPoint: any | null;
   private genLoadedAllGraphs: any | null;
   private hash: string;
+  private resizingWindow: any;
 
   @Input() config: Config;
   @Input() restoredHistory: any;
@@ -56,7 +59,13 @@ export class NlsGraphsComponent implements OnChanges {
 
   @HostListener('window:resize', ['$event'])
   onResize(event) {
-    this.canvasService.adjustToWindow();
+    clearTimeout(this.resizingWindow);
+
+    this.resizingWindow = setTimeout(() => {
+      this.canvas = this.adjustCanvas();
+      this.matrix = this.calcMatrix();
+      this.updateGraphs();
+    }, RESIZING_TIMEOUT);
   }
 
   constructor(
@@ -66,25 +75,27 @@ export class NlsGraphsComponent implements OnChanges {
     private graphService: NlsGraphService
   ) {
     this.genLoadedAllGraphs = this.countLoadedGraphs();
+    this.resizingWindow = false;
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    this.config.autoHeight = true;
-    this.updateCanvas();
+    this.canvas = this.adjustCanvas();
     this.matrix = this.calcMatrix();
 
     if (changes.config) {
-      // Config changes must not trigger any other events
       this.updateGraphs();
-      return;
     }
 
     if (this.restoredHistory && this.restoredHistory.hash !== this.hash) {
-      this.graphs = this.restoredHistory.graphs;
-      this.hash = this.restoredHistory.hash;
+      this.restoreGraph();
     }
   }
 
+  private restoreGraph() {
+    this.graphs = this.restoredHistory.graphs;
+    this.hash = this.restoredHistory.hash;
+  }
+
   private saveHistory() {
     this.hash = this.historyService.hash(this.graphs);
     this.historyService.save(this.graphs, this.config);
@@ -149,10 +160,11 @@ export class NlsGraphsComponent implements OnChanges {
     return (x === 'start') ? 'end' : 'start';
   }
 
-  private updateCanvas(): void {
-    this.canvas = this.svgElementRef.nativeElement;
+  private adjustCanvas(): void {
     this.canvasService.set(this.canvas);
     this.canvasService.adjustToWindow();
+
+    return this.svgElementRef.nativeElement;
   }
 
   private calcMatrix() {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 106015f..94eab5a 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -46,10 +46,7 @@ export class AppComponent implements OnInit {
     moment.locale('de');
 
     this.config = {
-      colors: {
-        primary: env.guilloche.colors.primary,
-        secondary: env.guilloche.colors.secondary,
-      },
+      ...env.config,
       ...env.formDefaults
     };
     this.configForm = ConfigForm;
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 4360935..8f0cd88 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -18,7 +18,7 @@ export const environment = {
   production: true,
   debug: false,
   animation: false,
-  guilloche: {
+  config: {
     colors: {
       secondary: '#F8485E',
       primary: '#5CC0C7'
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index a4d3b90..a8ddbcf 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -18,11 +18,12 @@ export const environment = {
   production: false,
   debug: false,
   animation: false,
-  guilloche: {
+  config: {
     colors: {
       primary: '#129490',
       secondary: '#CE1483'
-    }
+    },
+    autoSize: true
   },
   formDefaults: {
     width: 1,