added new config param for snapping graphs to top and bottom line

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

@@ -72,8 +72,9 @@ export class NlsGraphsComponent implements OnChanges, OnInit {
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    this.config.autoHeight = true;
     this.updateCanvas();
-    this.updateMatrix();
+    this.matrix = this.calcMatrix();
 
     if (changes.config) {
       // Config changes must not trigger any other events
@@ -157,17 +158,37 @@ export class NlsGraphsComponent implements OnChanges, OnInit {
     this.canvasService.adjustToWindow();
   }
 
-  private updateMatrix() {
-    const totalArea = Math.abs(this.canvas.getBoundingClientRect().width * this.canvas.getBoundingClientRect().height);
-    const totalCenter = this.math.centerOfArea(this.canvas.getBoundingClientRect().width, this.canvas.getBoundingClientRect().height);
-
+  private calcMatrix() {
+    const canvasWidth = this.canvas.getBoundingClientRect().width;
+    const canvasHeight = this.canvas.getBoundingClientRect().height;
+    const totalArea = Math.abs(canvasWidth * canvasHeight);
+    const totalCenter = this.math.centerOfArea(canvasWidth, canvasHeight);
     const baseArea = Math.abs(this.config.width * this.config.height);
     const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5);
     const baseWidthScaled = baseScale * this.config.width;
     const baseHeightScaled = baseScale * this.config.height;
-    const baseCenter = this.math.centerOfArea(baseWidthScaled, baseHeightScaled);
+    const baseCenter = this.math.centerOfArea(
+      baseWidthScaled,
+      baseHeightScaled
+    );
 
-    this.matrix = {
+    if (this.config.autoHeight) {
+      return {
+        start: {
+          x: totalCenter.x - baseCenter.x,
+          y: canvasHeight
+        },
+        end: {
+          x: totalCenter.x + baseCenter.x,
+          y: 0
+        },
+        width: canvasWidth,
+        height: canvasHeight,
+        center: totalCenter
+      };
+    } else {
+
+      return {
         start: {
           x: totalCenter.x - baseCenter.x,
           y: totalCenter.y + baseCenter.y
@@ -181,6 +202,7 @@ export class NlsGraphsComponent implements OnChanges, OnInit {
         center: totalCenter
       };
     }
+  }
 
   private genVectorPoint(point: Point, vector: number) {
     const range = this.math.Δ(this.matrix.start, this.matrix.end) * this.config.vectors.range;

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

@@ -39,9 +39,10 @@ export interface Config {
     amount: number;
     spacing: number
   };
-  date?: Date;
   nodes: any;
   stroke: any;
   overlap: any;
   scale: any;
+  date?: Date;
+  autoHeight?: boolean;
 }