added line space parameter and adjusted colors

src/app/app.component.html

@@ -81,6 +81,12 @@
       </label>
       <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
     </div>
+    <div class="form-group mb-4">
+      <label class="form-control-label">
+        Linienabstand
+      </label>
+      <input type="number" class="form-control" formControlName="space" min="0" max="10" step="0.1">
+    </div>
     <div class="form-group mb-4">
       <label class="form-control-label">
         Aufspleißen
@@ -92,11 +98,5 @@
     <div class="dropdown-divider"></div>
     <!-- <button (click)="exportSvg()" class="btn btn-secondary btn-block" [disabled]="configForm.invalid">Download</button> -->
   </form>
-  <!-- <div class="form-group mt-4 text-center">
-    <div class="custom-control custom-checkbox">
-      <input type="checkbox" class="custom-control-input" id="scrollOnWheel" [value]="scrollOnWheel">
-      <label class="custom-control-label" for="scrollOnWheel">Beim Scrollen Skalieren</label>
-    </div>
-  </div> -->
 </aside>
 

src/app/components/graphs.component.ts

@@ -98,6 +98,7 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
         direction: this.config.vectors[to],
         color: env.guilloche.colors[to]
       },
+      space: this.config.space,
       stroke: this.config.stroke,
       nodes: [
         this.vectorPoint(startPoint, this.config.vectors[from]),

src/app/forms/config.form.ts

@@ -47,6 +47,10 @@ export let ConfigForm: FormGroup = fb.group({
     Validators.min(0.1),
     Validators.max(10)
   ])),
+  space: fb.control('', Validators.compose([
+    Validators.min(0),
+    Validators.max(10)
+  ])),
   overlap: fb.control('', Validators.min(0.1)),
   spread: fb.control('', Validators.min(0)),
 });

src/app/models/graph.model.ts

@@ -28,6 +28,7 @@ export interface Graph {
     direction: number; // degree between 0 and 360
     color: string; // can be set in enviroment
   };
+  space: number; // space between lines
   stroke: number; // stroke width
   nodes?: Point[]; // orientation points
 }

src/app/models/param.model.ts

@@ -25,6 +25,7 @@ export interface Param {
     y: number
   };
   spread: number;
+  space: number;
   stroke?: {
     width: number;
   };

src/environments/environment.prod.ts

@@ -18,8 +18,8 @@ export const environment = {
   production: true,
   guilloche: {
     colors: {
-      start: '#f16363',
+      start: '#F8485E',
-      end: '#5eb1bd'
+      end: '#5CC0C7'
     }
   },
   controls: {
@@ -37,6 +37,7 @@ export const environment = {
     stroke: 1,
     scale: 0.3,
     overlap: 3,
-    spread: 4
+    spread: 4,
+    space: 6
   }
 };

src/environments/environment.ts

@@ -37,14 +37,7 @@ export const environment = {
     stroke: 1,
     scale: 0.1,
     overlap: 1.4,
-    spread: 4
+    spread: 4,
+    space: 6
   }
 };
-
-/*
- * In development mode, to ignore zone related error stack frames such as
- * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
- * import the following file, but please comment it out in production mode
- * because it will have performance impact when throw error
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.