fix(form): added mocked functionality and adjusted env vars

src/app/app.component.html

@@ -63,6 +63,12 @@
       </label>
       <input type="number" class="form-control" formControlName="height">
     </div>
+    <div class="form-group">
+      <label class="form-control-label">
+        Duktus <small>(Strichstärke)</small>
+      </label>
+      <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
+    </div>
     <div class="form-group">
       <label class="form-control-label">
         Anfangsvektor
@@ -91,13 +97,16 @@
       </label>
       <input type="number" class="form-control" formControlName="scale" min="0" max="1" step="0.01">
     </div>
-    <div class="form-group">
+    <div class="form-group mb-4">
       <label class="form-control-label">
         Knotenpunkte
       </label>
       <input type="number" class="form-control" formControlName="nodes" min="1" max="10">
     </div>
-    <button type="submit" class="btn btn-primary" [disabled]="configForm.invalid">Aktualisieren</button>
+    <div class="dropdown-divider mb-4"></div>
+    <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
+    <div class="dropdown-divider"></div>
+    <button (click)="exportSvg()" class="btn btn-secondary btn-block" [disabled]="configForm.invalid">Download</button>
   </form>
 </aside>
 

src/app/app.component.ts

@@ -72,4 +72,8 @@ export class AppComponent implements OnInit {
   public updateGraphs() {
     this.config = {...this.configForm.value};
   }
+
+  public exportSvg() {
+    alert('Feature coming');
+  }
 }

src/app/components/graphs.component.ts

@@ -56,7 +56,6 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
 
   private updateGraphs(): void {
     const matrix = this.matrix;
-    console.log(matrix);
 
     this.graphs = [...[{
       start: {
@@ -67,7 +66,8 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
         coords: { x: matrix.end.x, y: matrix.end.y },
         direction: this.config.directionEnd,
         color: env.guilloche.colors.end
-      }
+      },
+      stroke: this.config.stroke
     }, {
       start: {
         coords: { x: matrix.end.x, y: matrix.end.y },
@@ -77,7 +77,8 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
         coords: { x: matrix.start.x, y: matrix.start.y },
         direction: this.config.directionStart,
         color: env.guilloche.colors.end
-      }
+      },
+      stroke: this.config.stroke
     }]];
   }
 

src/app/directives/guilloche.directive.ts

@@ -36,6 +36,18 @@ export class GuillocheDirective implements OnChanges {
   private drawGraph(): void {
     console.log('guilloche directive(drawGraph)', this.graph);
 
+    this.group.append('path')
+      .attr('d', Shape.line()
+        .x(p => p.x)
+        .y(p => p.y)
+        .curve(Shape.curveBasis)([
+          this.graph.start.coords,
+          this.graph.end.coords
+        ]))
+      .attr('stroke', 'url(#gradient)')
+      .attr('stroke-width', this.graph.stroke)
+      .attr('fill', 'none');
+
     this.group.append('circle')
       .attr('cx', this.graph.start.coords.x)
       .attr('cy', this.graph.start.coords.y)

src/app/forms/config.form.ts

@@ -21,4 +21,8 @@ export let ConfigForm: FormGroup = fb.group({
     Validators.min(0),
     Validators.max(1)
   ])),
+  stroke: fb.control('', Validators.compose([
+    Validators.min(0.1),
+    Validators.max(10)
+  ])),
 });

src/app/models/graph.model.ts

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

src/environments/environment.prod.ts

@@ -12,6 +12,7 @@ export const environment = {
     directionStart: 0,
     directionEnd: 180,
     nodes: 3,
+    stroke: 1,
     scale: 0.3
   }
 };

src/environments/environment.ts

@@ -16,6 +16,7 @@ export const environment = {
     directionStart: 0,
     directionEnd: 180,
     nodes: 3,
+    stroke: 1,
     scale: 0.3
   }
 };