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

added scaled starting and ending points

Browse Source
This commit is contained in:
Michael Czechowski
2018-05-23 16:46:19 +02:00
parent 040782f18a
commit 161bf7d02c
8 changed files with 114 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

27
src/app/app.component.spec.ts
View File

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

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

@@ -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() {

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

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

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

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

5
src/app/models/graph.model.ts
View File

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

13
src/environments/environment.ts
View File

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