132 lines
3.7 KiB
TypeScript
132 lines
3.7 KiB
TypeScript
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';
|
|
import { Config } from './../models/config.model';
|
|
import { Point } from '../models/point.model';
|
|
|
|
@Component({
|
|
selector: 'app-graphs',
|
|
templateUrl: './graphs.component.html',
|
|
styleUrls: ['./graphs.component.scss']
|
|
})
|
|
export class GraphsComponent implements AfterViewInit, OnChanges {
|
|
|
|
public graphs: Graph[];
|
|
public canvas: any | null;
|
|
|
|
@Input() config: any;
|
|
|
|
@ViewChild('svg') svgElementRef;
|
|
@ViewChild(GuillocheDirective) guillocheViewChild: GuillocheDirective;
|
|
@ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList<GuillocheDirective>;
|
|
|
|
@HostListener('window:resize', ['$event'])
|
|
private onResize(event) {
|
|
this.init();
|
|
}
|
|
|
|
constructor(
|
|
private canvasService: CanvasService
|
|
) {
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
console.log('graph component (changes:config)', changes.config.currentValue);
|
|
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;
|
|
|
|
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[from].x, y: matrix[from].y },
|
|
direction: this.config.directionStart,
|
|
color: env.guilloche.colors[from]
|
|
}, end: {
|
|
coords: { x: matrix[to].x, y: matrix[to].y },
|
|
direction: this.config.directionEnd,
|
|
color: env.guilloche.colors[to]
|
|
},
|
|
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 {
|
|
this.canvas = this.svgElementRef.nativeElement;
|
|
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);
|
|
|
|
const baseArea = Math.abs(this.config.width * this.config.height);
|
|
const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5);
|
|
const baseCenter = this.centerPoint( baseScale * this.config.width, baseScale * this.config.height);
|
|
|
|
return {
|
|
start: {
|
|
x: totalCenter.x - baseCenter.x,
|
|
y: totalCenter.y + baseCenter.y
|
|
},
|
|
end: {
|
|
x: totalCenter.x + baseCenter.x,
|
|
y: totalCenter.y - baseCenter.y
|
|
}
|
|
};
|
|
}
|
|
}
|