diff --git a/src/app/app.component.html b/src/app/app.component.html index 2eab80b..24e22db 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -49,3 +49,43 @@ + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 7255c60..c80b23f 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -32,3 +32,16 @@ ul { align-items: center; } } + +aside { + display: flex; + flex-direction: column; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: auto; + justify-content: center; + margin: 0; + padding: 3rem; +} diff --git a/src/app/app.component.ts b/src/app/app.component.ts index db82489..22a2b9e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,17 +1,20 @@ +import { ConfigForm } from './forms/config.form'; import { Component, OnInit } from '@angular/core'; import { Param } from './models/param.model'; import { Config } from './models/config.model'; +import { FormGroup } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) -export class AppComponent { +export class AppComponent implements OnInit { public canvasParam: Param; - public config: any; + public config: any | null; + public configForm: FormGroup; constructor() { this.canvasParam = { @@ -32,16 +35,24 @@ export class AppComponent { }; this.config = { - start: { - direction: 0 - }, - end: { - direction: 270, - position: { - x: 16, - y: -9 - } - } + width: 10, + height: -20, + directionStart: 180, + directionEnd: 270 }; } + + ngOnInit() { + this.configForm = ConfigForm; + this.configForm.reset({...{ + width: 10, + height: -20, + directionStart: 180, + directionEnd: 270 + }}); + } + + public updateGraphs() { + this.config = {...this.configForm.value}; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 11cfc26..0688afc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { CanvasDirective } from './directives/canvas.directive'; @@ -18,6 +18,7 @@ import { GuillocheDirective } from './directives/guilloche.directive'; ], imports: [ BrowserModule, + ReactiveFormsModule, FormsModule, ], providers: [], diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts index 1157bb6..1d3c9e2 100644 --- a/src/app/components/graphs.component.ts +++ b/src/app/components/graphs.component.ts @@ -1,10 +1,9 @@ -import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, OnInit } from '@angular/core'; +import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, OnInit, SimpleChanges, OnChanges } 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 { GuillocheComponent } from './../components/guilloche.component'; import { GuillocheDirective } from './../directives/guilloche.directive'; import { Graph } from '../models/graph.model'; @@ -13,10 +12,8 @@ import { Graph } from '../models/graph.model'; templateUrl: './graphs.component.html', styleUrls: ['./graphs.component.scss'] }) -export class GraphsComponent implements AfterViewInit, OnInit { +export class GraphsComponent implements AfterViewInit, OnInit, OnChanges { - // public width: number; - // public height: number; public graphs: Graph[]; public svg: any; @@ -27,22 +24,30 @@ export class GraphsComponent implements AfterViewInit, OnInit { @ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList; ngOnInit() { - // this.width = 0; - // this.height = 0; - this.graphs = [...[{ - id: 'first', - start: {coords: { x: 0, y: 0 }, direction: this.config.start.direction }, - end: { coords: { x: 0, y: -10 }, direction: this.config.end.direction} - }, { - id: 'second', - start: {coords: { x: 0, y: 0 }, direction: this.config.end.direction }, - end: { coords: { x: 0, y: -10 }, direction: this.config.start.direction} - }]]; + this.updateGraphs(); + } + + ngOnChanges(changes: SimpleChanges) { + console.log('graph component (changes)', changes.config); + + this.updateGraphs(); } ngAfterViewInit() { this.svg = Selection.select(this.svgElementRef.nativeElement); - console.log('graph component', this.guillocheViewChildren.toArray()); + console.log('graph component (after view)', this.guillocheViewChildren.toArray()); + } + + private updateGraphs(): void { + this.graphs = [...[{ + id: 'first', + start: {coords: { x: 0, y: 0 }, direction: this.config.directionStart }, + end: { coords: { x: 0, y: -10 }, direction: this.config.directionEnd} + }, { + id: 'second', + start: {coords: { x: 0, y: 0 }, direction: this.config.directionEnd }, + end: { coords: { x: 0, y: -10 }, direction: this.config.directionStart} + }]]; } } diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts index e3419be..50a225e 100644 --- a/src/app/directives/guilloche.directive.ts +++ b/src/app/directives/guilloche.directive.ts @@ -1,5 +1,5 @@ import { Graph } from './../models/graph.model'; -import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnInit } from '@angular/core'; +import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnInit, OnChanges, SimpleChanges } from '@angular/core'; import * as Selection from 'd3-selection'; import * as Shape from 'd3-shape'; import * as Random from 'd3-random'; @@ -12,14 +12,14 @@ import { Param } from './../models/param.model'; @Directive({ selector: '[guilloche]' }) -export class GuillocheDirective implements OnInit { +export class GuillocheDirective implements OnChanges { @Input() graph: Graph; constructor() { } - ngOnInit() { - console.log('guilloche directive', this.graph); + ngOnChanges(changes: SimpleChanges) { + console.log('guilloche directive (changes)', changes.graph); } } diff --git a/src/app/forms/config.form.ts b/src/app/forms/config.form.ts new file mode 100644 index 0000000..b9b5e28 --- /dev/null +++ b/src/app/forms/config.form.ts @@ -0,0 +1,17 @@ +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +const fb = new FormBuilder(); + +export let ConfigForm: FormGroup = fb.group({ + width: fb.control('', Validators.required), + height: fb.control('', Validators.required), + directionStart: fb.control('', Validators.compose([ + Validators.min(0), + Validators.max(360) + ])), + directionEnd: fb.control('', Validators.compose([ + Validators.min(0), + Validators.max(360) + ])), + nodes: fb.control('', Validators.min(1)) +}); diff --git a/src/index.html b/src/index.html index ce7c5f0..86ceb2b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,14 @@ - - - - NlsNg6D3jsGuilloche - + + + + NlsNg6D3jsGuilloche + - - - - - - + + + + + +