public/guilloche-generator
2
0
Fork 0
Code Pull Requests Activity

added form and update functions

Browse Source
This commit is contained in:
Michael Czechowski
2018-05-23 12:30:28 +02:00
parent b18c196610
commit 1231b2de9c
8 changed files with 132 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/app.component.html
View File

@@ -49,3 +49,43 @@
</li>
</ul>
<aside>
<form [formGroup]="configForm" (ngSubmit)="updateGraphs()" novalidate>
<div class="form-group">
<label class="form-control-label">
Breite <small>(bspw. 42, -12, 3.2)</small>
</label>
<input type="number" class="form-control" formControlName="width">
</div>
<div class="form-group">
<label class="form-control-label">
Höhe <small>(bspw. 42, -12, 3.2)</small>
</label>
<input type="number" class="form-control" formControlName="height">
</div>
<div class="form-group">
<label class="form-control-label">
Anfangsvektor
</label>
<select class="form-control" formControlName="directionStart">
<option value="0">Oben</option>
<option value="90">Rechts</option>
<option value="180">Unten</option>
<option value="270">Links</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label">
Endvektor
</label>
<select class="form-control" formControlName="directionEnd">
<option value="0">Oben</option>
<option value="90">Rechts</option>
<option value="180">Unten</option>
<option value="270">Links</option>
</select>
</div>
<button type="submit" class="btn btn-primary" [disabled]="configForm.invalid">Aktualisieren</button>
</form>
</aside>

13
src/app/app.component.scss
View File

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

35
src/app/app.component.ts
View File

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

3
src/app/app.module.ts
View File

@@ -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: [],

39
src/app/components/graphs.component.ts
View File

@@ -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<GuillocheDirective>;
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}
}]];
}
}

8
src/app/directives/guilloche.directive.ts
View File

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

17
src/app/forms/config.form.ts Normal file
View File

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

22
src/index.html
View File

@@ -1,14 +1,14 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NlsNg6D3jsGuilloche</title>
<base href="/">
<html lang="de-DE">
<head>
<meta charset="utf-8">
<title>NlsNg6D3jsGuilloche</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
</body>
</html>