added new interval parameter

projects/nls-guilloche/src/nls/components/graphs.component.ts

@@ -15,7 +15,7 @@
  */
 
 import { ViewChild, Component, Input, Output, SimpleChanges, OnChanges, EventEmitter, HostListener } from '@angular/core';
-import { Observable, interval, Subscription } from 'rxjs';
+import { Observable, interval } from 'rxjs';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
 import * as Random from 'd3-random';
@@ -125,7 +125,8 @@ export class NlsGraphsComponent implements OnChanges {
     this.graphs = curveList.map(curve => {
       return {
         ...this.adjustGraph(curve),
-        spread: this.config.spread
+        spread: this.config.spread,
+        interval: this.config.interval
       };
     });
     this.hash = this.historyService.hash(this.graphs);

projects/nls-guilloche/src/nls/directives/guilloche.directive.ts

@@ -28,8 +28,6 @@ import { NlsCanvasService } from './../services/canvas.service';
 import { NlsMathService } from './../services/math.service';
 import { NlsGraphService } from '../services/graph.service';
 
-const ANIMATION_INTERVAL = 30;
-
 @Directive({
   selector: '[nlsGuilloche]'
 })
@@ -91,14 +89,12 @@ export class NlsGuillocheDirective implements OnChanges, OnDestroy {
       });
       let i = 0;
       this.animationInterval = setInterval(() => {
-        // this.animateGraph();
         this.animateGraph(i++ % 1000 / 10000);
-      }, ANIMATION_INTERVAL);
+      }, this.graph.interval);
     } else {
       if (this.animationInterval) {
         this.bounce = null;
         clearInterval(this.animationInterval);
-        // return;
       }
     }
 

projects/nls-guilloche/src/nls/models/config.model.ts

@@ -43,6 +43,7 @@ export interface Config {
   stroke: any;
   overlap: any;
   scale: any;
+  interval: number;
   date?: Date;
   autoHeight?: boolean;
 }

projects/nls-guilloche/src/nls/models/graph.model.ts

@@ -1,3 +1,4 @@
+import { interval } from 'rxjs';
 /**
  * Copyright (C) 2018 Michael Czechowski <mail@dailysh.it>
  * This program is free software; you can redistribute it and/or modify it
@@ -34,6 +35,7 @@ export interface Graph {
     amount: number;
     spacing: number
   };
+  interval: number;
   stroke: number; // stroke width
   nodes?: Point[]; // orientation points
 }

src/app/app.component.html

@@ -106,6 +106,14 @@
           <input type="number" class="form-control" formControlName="spacing">
         </div>
       </ng-container>
+
+      <div class="form-group">
+        <label class="form-control-label">
+          Animationsinterval
+        </label>
+        <input type="number" class="form-control" formControlName="interval" min="0" max="1000" step="1">
+      </div>
+
       <div class="form-group d-flex flex-colmn justify-content-between align-items-center mb-4">
         <label class="form-control-label">
           Animation

src/app/forms/config.form.ts

@@ -58,5 +58,9 @@ export let ConfigForm: FormGroup = fb.group({
       Validators.min(0),
       Validators.max(50)
     ])),
-  })
+  }),
+  interval: fb.control('', Validators.compose([
+    Validators.min(0),
+    Validators.max(1000)
+  ])),
 });

src/environments/environment.prod.ts

@@ -41,6 +41,7 @@ export const environment = {
     spread: {
       amount: 28,
       spacing: 16
-    }
+    },
+    interval: 30
   }
 };

src/environments/environment.ts

@@ -18,6 +18,7 @@ export const environment = {
   production: false,
   debug: false,
   animation: false,
+  animationInterval: 30,
   config: {
     colors: {
       primary: '#129490',
@@ -41,6 +42,7 @@ export const environment = {
     spread: {
       amount: 30,
       spacing: 20
-    }
+    },
+    interval: 30
   }
 };