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

feat(graphsComponent): modularized graph parametrization

Browse Source
This commit is contained in:
Michael Czechowski
2018-05-23 18:39:26 +02:00
parent d42b6160e6
commit b1e6faab99
2 changed files with 53 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,29 +57,44 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
private updateGraphs(): void {
const matrix = this.matrix;
this.graphs = [...[{
this.graphs = [...[this.adjustGraph('start'), this.adjustGraph('end')]];
}
private adjustGraph(from: string) {
const matrix = this.matrix;
const to = this.flipflop(from);
return {
start: {
coords: { x: matrix.start.x, y: matrix.start.y },
coords: { x: matrix[from].x, y: matrix[from].y },
direction: this.config.directionStart,
color: env.guilloche.colors.start
color: env.guilloche.colors[from]
}, end: {
coords: { x: matrix.end.x, y: matrix.end.y },
coords: { x: matrix[to].x, y: matrix[to].y },
direction: this.config.directionEnd,
color: env.guilloche.colors.end
color: env.guilloche.colors[to]
},
stroke: this.config.stroke
}, {
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
},
stroke: this.config.stroke
}]];
stroke: this.config.stroke,
nodes: []
};
// {
// 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
// },
// stroke: this.config.stroke,
// nodes: []
// }
}
private flipflop(direction: string) {
return (direction === 'start') ? 'end' : 'start';
}
private updateCanvas(): void {
@@ -87,6 +102,13 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
this.canvasService.set(this.canvas);
}
private centerPoint(width, height): Point {
return {
x: width * 0.5,
y: height * 0.5
};
}
private get matrix() {
const totalArea = Math.abs(this.canvas.clientWidth * this.canvas.clientHeight);
const totalCenter = this.centerPoint(this.canvas.clientWidth, this.canvas.clientHeight);
@@ -106,11 +128,4 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
}
};
}
private centerPoint(width, height): Point {
return {
x: width * 0.5,
y: height * 0.5
};
}
}