feat(graphsComponent): added expanded nodes function

src/app/app.component.html

@@ -87,7 +87,13 @@
     <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>
+    <!-- <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/app.component.ts

@@ -16,14 +16,16 @@ export class AppComponent implements OnInit {
   public canvasParam: Param;
   public config: any | null;
   public configForm: FormGroup;
+  public scaleOnWheel: boolean;
 
   @HostListener('mousewheel', ['$event'])
   private onMousewheel(event) {
+    this.config = {...this.configForm.value};
+
+    if (this.scaleOnWheel) {
       const delta = Math.sign(event.deltaY);
       const step = env.controls.wheelStep;
 
-    this.config = {...this.configForm.value};
-
       if (delta > 0) {
         if (this.config.scale === 1 - step) {
           return;
@@ -35,8 +37,8 @@ export class AppComponent implements OnInit {
         }
         this.config.scale -= step;
       }
-
       this.config.scale = Math.round(this.config.scale / step) * step;
+    }
     this.configForm.reset({...this.config});
     this.updateGraphs();
   }

src/app/components/graphs.component.ts

@@ -65,23 +65,27 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
     const to = this.flipflop(from);
     const startPoint = { x: this.matrix[from].x, y: this.matrix[from].y };
     const endPoint = { x: this.matrix[to].x, y: this.matrix[to].y };
+    const expandedPoints = [];
 
-    console.error(from, '->', to);
+    for (let i = 0; i < this.config.nodes; i++) {
+      expandedPoints.push(this.randomPoint);
+    }
 
     return {
       id: `${from}-to-${to}`,
       start: {
         coords: startPoint,
         direction: this.config.vectors[from],
-        color: env.guilloche.colors.start
+        color: env.guilloche.colors[from]
       }, end: {
         coords: endPoint,
         direction: this.config.vectors[to],
-        color: env.guilloche.colors.end
+        color: env.guilloche.colors[to]
       },
       stroke: this.config.stroke,
       nodes: [
         this.vectorPoint(startPoint, this.config.vectors[from]),
+        ...expandedPoints,
         this.vectorPoint(endPoint, this.config.vectors[to])
       ]
     };
@@ -123,21 +127,39 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
         y: totalCenter.y - baseCenter.y
       },
       width: baseWidthScaled,
-      height: baseHeightScaled
+      height: baseHeightScaled,
+      center: totalCenter
     };
   }
 
   private vectorPoint(point: Point, direction: number) {
     const range = this.Δ(this.matrix.start, this.matrix.end) * this.config.vectors.range;
 
-    console.log('graphs component(vectorPoint)', point, direction);
-
     return {
       x: range * Math.sin(Math.PI * direction) + point.x,
       y: range * Math.cos(Math.PI * direction) + point.y
     };
   }
 
+  private get randomPoint() {
+    const overlap = env.guilloche.overlap;
+    const x = {
+      min: this.matrix.center.x - this.matrix.width * overlap,
+      max: this.matrix.center.x + this.matrix.width * overlap
+    };
+    const y = {
+      min: this.matrix.center.y - this.matrix.height * overlap,
+      max: this.matrix.center.y + this.matrix.height * overlap
+    };
+
+    console.log(this.matrix.center);
+
+    return {
+      x: Random.randomUniform(x.min, x.max)(),
+      y: Random.randomUniform(y.min, y.max)()
+    };
+  }
+
   /**
    * Calculate distance between to points with coordinates.
    * @param a

src/environments/environment.prod.ts

@@ -4,7 +4,8 @@ export const environment = {
     colors: {
       start: '#f16363',
       end: '#5eb1bd'
-    }
+    },
+    overlap: 3
   },
   controls: {
     wheelStep: 0.01

src/environments/environment.ts

@@ -8,7 +8,8 @@ export const environment = {
     colors: {
       start: '#cc0045',
       end: '#0067cc'
-    }
+    },
+    overlap: 1.4
   },
   controls: {
     wheelStep: 0.01

src/index.html

@@ -2,7 +2,7 @@
 <html lang="de-DE">
   <head>
     <meta charset="utf-8">
-    <title>NlsNg6D3jsGuilloche</title>
+    <title>Random Guilloche Generator</title>
     <base href="/">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">