removed width and height params and added instead manually margins for graph

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

@@ -109,16 +109,34 @@ export class NlsGraphsComponent implements OnChanges {
     const genShiftStart = this.shiftPoint(this.matrix.start, this.config.vectors.start);
     const genShiftEnd = this.shiftPoint(this.matrix.end, this.config.vectors.end, false);
 
+    console.log(this.matrix);
+
     const curveList = [
       {
         color: this.config.colors.primary,
         start: genShiftStart.next().value,
         end: genShiftEnd.next().value
+        // start: {
+        //   point: this.matrix.start,
+        //   vector: this.config.vectors.start
+        // },
+        // end: {
+        //   point: this.matrix.end,
+        //   vector: this.config.vectors.end
+        // }
       },
       {
         color: this.config.colors.secondary,
         start: genShiftEnd.next().value,
         end: genShiftStart.next().value
+        // end: {
+        //   point: this.matrix.start,
+        //   vector: this.config.vectors.start
+        // },
+        // start: {
+        //   point: this.matrix.end,
+        //   vector: this.config.vectors.end
+        // }
       }
     ];
 
@@ -173,46 +191,20 @@ export class NlsGraphsComponent implements OnChanges {
     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
-    );
 
-    if (this.config.autoHeight) {
+    return {
-      // Snap bottom and top to window limits
+      start: {
-      return {
+        x: 0,
-        start: {
+        y: canvasHeight - this.config.vectors.spacing - this.config.margin.y
-          x: totalCenter.x - baseCenter.x,
+      },
-          y: canvasHeight
+      end: {
-        },
+        x: canvasWidth - this.config.vectors.spacing - this.config.margin.x,
-        end: {
+        y: 0
-          x: totalCenter.x + baseCenter.x,
+      },
-          y: 0
+      width: canvasWidth,
-        },
+      height: canvasHeight,
-        width: canvasWidth,
+      center: totalCenter
-        height: canvasHeight,
+    };
-        center: totalCenter
-      };
-    } else {
-      // Adjust matrix relatively to window size
-      return {
-        start: {
-          x: totalCenter.x - baseCenter.x,
-          y: totalCenter.y + baseCenter.y
-        },
-        end: {
-          x: totalCenter.x + baseCenter.x,
-          y: totalCenter.y - baseCenter.y
-        },
-        width: baseWidthScaled,
-        height: baseHeightScaled,
-        center: totalCenter
-      };
-    }
   }
 
   private genVectorPoint(point: Point, vector: number) {

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

@@ -15,8 +15,6 @@
  */
 
 export interface Config {
-  width: number;
-  height: number;
   margin: {
     x: number;
     y: number;
@@ -49,5 +47,4 @@ export interface Config {
   scale: any;
   interval: number;
   date?: Date;
-  autoHeight?: boolean;
 }

src/app/app.component.html

@@ -20,18 +20,6 @@
             <input type="number" class="form-control" formControlName="y">
           </div>
         </ng-container>
-        <div class="form-group">
-          <label class="form-control-label">
-            Breite
-          </label>
-          <input type="number" class="form-control" formControlName="width">
-        </div>
-        <div class="form-group">
-          <label class="form-control-label">
-            Höhe
-          </label>
-          <input type="number" class="form-control" formControlName="height">
-        </div>
         <div class="form-group">
           <label class="form-control-label">
             Skalierung

src/app/forms/config.form.ts

@@ -23,8 +23,6 @@ export let ConfigForm: FormGroup = fb.group({
     x: fb.control('', Validators.min(0)),
     y: fb.control('', Validators.min(0))
   }),
-  width: fb.control('', Validators.required),
-  height: fb.control('', Validators.required),
   vectors: fb.group({
     start: fb.control('', Validators.compose([
       Validators.min(0),

src/environments/environment.ts

@@ -23,28 +23,25 @@ export const environment = {
     colors: {
       primary: '#129490',
       secondary: '#CE1483'
-    },
+    }
-    autoHeight: true
   },
   formDefaults: {
     margin: {
       x: 0,
       y: 0
     },
-    width: 1e-10,
-    height: 1,
     scale: 0.4,
-    overlap: 0.3,
+    overlap: 0.5,
     vectors: {
-      start: 1,
+      start: 0.5,
       end: 0,
-      range: 0.6,
+      range: 0.2,
       spacing: 7
     },
-    nodes: 3,
+    nodes: 4,
     stroke: 0.7,
     spread: {
-      amount: 30,
+      amount: 60,
       spacing: 20
     },
     interval: 30