added scaled starting and ending points

src/app/app.component.html

@@ -10,7 +10,7 @@
 
 <app-graphs [config]="config"></app-graphs>
 
-<ul>
+<ul *ngIf="false">
   <li>
     <label>
       <div>Points</div>

src/app/app.component.scss

@@ -44,4 +44,5 @@ aside {
   justify-content: center;
   margin: 0;
   padding: 3rem;
+  background: rgba(251, 252, 253, 0.8);
 }

src/app/app.component.spec.ts

@@ -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!');
-  }));
-});

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 = {
+    this.config = env.formDefaults;
-      width: 10,
+    this.configForm = ConfigForm;
-      height: -20,
-      directionStart: 180,
-      directionEnd: 270,
-      nodes: 1
-    };
   }
 
   ngOnInit() {
-    this.configForm = ConfigForm;
+    this.configForm.reset({...this.config});
-    this.configForm.reset({...{
-      width: 10,
-      height: -20,
-      directionStart: 180,
-      directionEnd: 270,
-      nodes: 1
-    }});
   }
 
   public updateGraphs() {

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.init();
-    this.updateGraphs();
   }
 
+  /**
+   * @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: {
-      start: {coords: { x: 0, y: 0 }, direction: this.config.directionStart},
+        coords: { x: matrix.start.x, y: matrix.start.y },
-      end: { coords: { x: 0, y: -10 }, direction: this.config.directionEnd}
+        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: {
-      start: {coords: { x: 0, y: 0 }, direction: this.config.directionEnd },
+        coords: { x: matrix.end.x, y: matrix.end.y },
-      end: { coords: { x: 0, y: -10 }, direction: this.config.directionStart}
+        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
+      }
+    };
   }
 }

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.group.append('circle')
-    this.canvas = Selection.select(this.canvasService.get);
+      .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);
   }
 }

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
 }

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
   }
 };