From 161bf7d02c28d36c869103b49e189aa6d95ba56d Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 23 May 2018 16:46:19 +0200
Subject: [PATCH] added scaled starting and ending points

---
 src/app/app.component.html                |  2 +-
 src/app/app.component.scss                |  1 +
 src/app/app.component.spec.ts             | 27 --------
 src/app/app.component.ts                  | 21 ++----
 src/app/components/graphs.component.ts    | 81 ++++++++++++++++++++---
 src/app/directives/guilloche.directive.ts | 27 ++++++--
 src/app/models/graph.model.ts             |  5 +-
 src/environments/environment.ts           | 13 +++-
 8 files changed, 114 insertions(+), 63 deletions(-)
 delete mode 100644 src/app/app.component.spec.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 45eb1f0..4d3e053 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -10,7 +10,7 @@
 
 <app-graphs [config]="config"></app-graphs>
 
-<ul>
+<ul *ngIf="false">
   <li>
     <label>
       <div>Points</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c80b23f..ba05ea0 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -44,4 +44,5 @@ aside {
   justify-content: center;
   margin: 0;
   padding: 3rem;
+  background: rgba(251, 252, 253, 0.8);
 }
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index bcbdf36..0000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
-  }));
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c684707..1131d25 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import { ConfigForm } from './forms/config.form';
 import { Component, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 
+import { environment as env } from '../environments/environment';
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';
-import { FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
@@ -34,24 +35,12 @@ export class AppComponent implements OnInit {
       showGrid: false
     };
 
-    this.config = {
-      width: 10,
-      height: -20,
-      directionStart: 180,
-      directionEnd: 270,
-      nodes: 1
-    };
+    this.config = env.formDefaults;
+    this.configForm = ConfigForm;
   }
 
   ngOnInit() {
-    this.configForm = ConfigForm;
-    this.configForm.reset({...{
-      width: 10,
-      height: -20,
-      directionStart: 180,
-      directionEnd: 270,
-      nodes: 1
-    }});
+    this.configForm.reset({...this.config});
   }
 
   public updateGraphs() {
diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts
index 0940ecf..e39dd4c 100644
--- a/src/app/components/graphs.component.ts
+++ b/src/app/components/graphs.component.ts
@@ -1,9 +1,10 @@
-import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, SimpleChanges, OnChanges } from '@angular/core';
+import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, SimpleChanges, OnChanges, HostListener } from '@angular/core';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
 import * as Random from 'd3-random';
 import * as Drag from 'd3-drag';
 
+import { environment as env } from '../../environments/environment';
 import { GuillocheDirective } from './../directives/guilloche.directive';
 import { CanvasService } from './../services/canvas.service';
 import { Graph } from '../models/graph.model';
@@ -25,6 +26,11 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   @ViewChild(GuillocheDirective) guillocheViewChild: GuillocheDirective;
   @ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList<GuillocheDirective>;
 
+  @HostListener('window:resize', ['$event'])
+  private onResize(event) {
+    this.init();
+  }
+
   constructor(
     private canvasService: CanvasService
   ) {
@@ -32,27 +38,82 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     console.log('graph component (changes:config)', changes.config.currentValue);
-    this.updateCanvas();
-    this.updateGraphs();
+    this.init();
   }
 
+  /**
+   * @todo Will deprecate if there won't be any use for this
+   */
   ngAfterViewInit() {
     console.log('graph component (afterView:children)', this.guillocheViewChildren.toArray());
   }
 
+  private init() {
+    this.updateCanvas();
+    this.updateGraphs();
+  }
+
   private updateGraphs(): void {
+    const matrix = this.matrix;
+    console.log(matrix);
+
     this.graphs = [...[{
-      id: 'first',
-      start: {coords: { x: 0, y: 0 }, direction: this.config.directionStart},
-      end: { coords: { x: 0, y: -10 }, direction: this.config.directionEnd}
+      start: {
+        coords: { x: matrix.start.x, y: matrix.start.y },
+        direction: this.config.directionStart,
+        color: env.guilloche.colors.start
+      }, end: {
+        coords: { x: matrix.end.x, y: matrix.end.y },
+        direction: this.config.directionEnd,
+        color: env.guilloche.colors.end
+      }
     }, {
-      id: 'second',
-      start: {coords: { x: 0, y: 0 }, direction: this.config.directionEnd },
-      end: { coords: { x: 0, y: -10 }, direction: this.config.directionStart}
+      start: {
+        coords: { x: matrix.end.x, y: matrix.end.y },
+        direction: this.config.directionEnd,
+        color: env.guilloche.colors.start
+      }, end: {
+        coords: { x: matrix.start.x, y: matrix.start.y },
+        direction: this.config.directionStart,
+        color: env.guilloche.colors.end
+      }
     }]];
   }
 
   private updateCanvas(): void {
-    this.canvasService.set(this.svgElementRef.nativeElement);
+    this.canvas = this.svgElementRef.nativeElement;
+    this.canvasService.set(this.canvas);
+  }
+
+  private get matrix() {
+    const totalWidth = this.canvas.clientWidth;
+    const totalHeight = this.canvas.clientHeight;
+    const totalArea = Math.abs(totalWidth * totalHeight);
+    const totalCenter = {
+      x: totalWidth * 0.5,
+      y: totalHeight * 0.5
+    };
+
+    const baseWidth = this.config.width;
+    const baseHeight = this.config.height;
+    const baseArea = Math.abs(this.config.width * this.config.height);
+    const baseScale = Math.pow(totalArea / baseArea * env.guilloche.scale, 0.5);
+    const baseScaledWidth = baseScale * baseWidth;
+    const baseScaledHeight = baseScale * baseHeight;
+    const baseCenter = {
+      x: baseScaledWidth * 0.5,
+      y: baseScaledHeight * 0.5
+    };
+
+    return {
+      start: {
+        x: totalCenter.x - baseCenter.x,
+        y: totalCenter.y + baseCenter.y
+      },
+      end: {
+        x: totalCenter.x + baseCenter.x,
+        y: totalCenter.y - baseCenter.y
+      }
+    };
   }
 }
diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts
index aef6c25..c879aeb 100644
--- a/src/app/directives/guilloche.directive.ts
+++ b/src/app/directives/guilloche.directive.ts
@@ -16,25 +16,40 @@ import { CanvasService } from './../services/canvas.service';
 export class GuillocheDirective implements OnChanges {
 
   private canvas: any;
+  private group: any;
 
   @Input() graph: Graph;
 
   constructor(
-    private canvasService: CanvasService
+    private canvasService: CanvasService,
+    private el: ElementRef
   ) {
+    this.group = Selection.select(el.nativeElement);
+    this.canvas = Selection.select(this.canvasService.get);
   }
 
   ngOnChanges(changes: SimpleChanges) {
     console.log('guilloche directive (changes)', changes.graph.currentValue);
-    this.selectCanvas();
     this.drawGraph();
   }
 
   private drawGraph(): void {
-    console.log('guilloche directive(drawGraph)', this.graph, this.canvas);
-  }
+    console.log('guilloche directive(drawGraph)', this.graph);
 
-  private selectCanvas(): void {
-    this.canvas = Selection.select(this.canvasService.get);
+    this.group.append('circle')
+      .attr('cx', this.graph.start.coords.x)
+      .attr('cy', this.graph.start.coords.y)
+      .attr('r', 20)
+      .attr('stroke-width', 1)
+      .attr('fill-opacity', 0)
+      .attr('stroke', this.graph.start.color);
+
+    this.group.append('circle')
+      .attr('cx', this.graph.end.coords.x)
+      .attr('cy', this.graph.end.coords.y)
+      .attr('r', 10)
+      .attr('stroke-width', 1)
+      .attr('fill-opacity', 0)
+      .attr('stroke', this.graph.end.color);
   }
 }
diff --git a/src/app/models/graph.model.ts b/src/app/models/graph.model.ts
index e8f75d8..3dd7014 100644
--- a/src/app/models/graph.model.ts
+++ b/src/app/models/graph.model.ts
@@ -1,14 +1,15 @@
 import { Point } from './point.model';
 
 export interface Graph {
-  id: string; // ID of SVG group
   start: {
     coords: Point;
     direction: number; // degree between 0 and 360
+    color: string // can be set in enviroment
   };
   end: {
     coords: Point;
     direction: number; // degree between 0 and 360
+    color: string; // can be set in enviroment
   };
-  landmarks?: Point[]; // orientation points
+  nodes?: Point[]; // orientation points
 }
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 0788eb3..4ea61e8 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -5,7 +5,18 @@
 export const environment = {
   production: false,
   guilloche: {
-    colors: ['#cc0045', '#0067cc']
+    colors: {
+      start: '#cc0045',
+      end: '#0067cc'
+    },
+    scale: 0.3
+  },
+  formDefaults: {
+    width: 10,
+    height: -20,
+    directionStart: 180,
+    directionEnd: 270,
+    nodes: 1
   }
 };