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;
   };