From 4d0de92b3b37014a4d0bd0b16002ae1f71d35df4 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Sat, 4 Aug 2018 18:01:19 +0200 Subject: [PATCH] replacements --- src/app/components/graphs.component.ts | 87 ++++++++++++++++++----- src/app/directives/guilloche.directive.ts | 55 +++++++------- src/app/models/config.model.ts | 1 + src/app/models/graph.model.ts | 1 - 4 files changed, 101 insertions(+), 43 deletions(-) diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts index d827b3a..eea4a8a 100644 --- a/src/app/components/graphs.component.ts +++ b/src/app/components/graphs.component.ts @@ -24,7 +24,6 @@ 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({ @@ -38,6 +37,8 @@ export class GraphsComponent implements AfterViewInit, OnChanges { public canvas: any | null; public matrix: any | null; + private genShiftPoint: any | null; + @Input() config: any; @ViewChild('svg') svgElementRef; @@ -73,14 +74,38 @@ export class GraphsComponent implements AfterViewInit, OnChanges { } private updateGraphs(): void { - this.graphs = [this.adjustGraph('start'), this.adjustGraph('end')]; + const curves = [ + { + start: { + point: this.matrix['start'], + vector: this.config.vectors.start, + color: env.guilloche.colors.start + }, + end: { + point: this.matrix['end'], + vector: this.config.vectors.end, + color: env.guilloche.colors.end + } + }, + { + start: { + point: this.matrix['end'], + vector: this.config.vectors.start, + color: env.guilloche.colors.end + }, + end: { + point: this.matrix['start'], + vector: this.config.vectors.end, + color: env.guilloche.colors.start + } + } + ]; + + this.graphs = [this.adjustGraph(curves[0]), this.adjustGraph(curves[1])]; console.log('graphs component (updateGraphs):', this.graphs); } - private adjustGraph(from: string) { - const to = this.flipflop(from); - const startPoint = { x: this.matrix[from].x, y: this.matrix[from].y }; - const endPoint = { x: this.matrix[to].x, y: this.matrix[to].y }; + private adjustGraph(curve) { const expandedPoints = []; for (let i = 0; i < this.config.nodes; i++) { @@ -88,22 +113,21 @@ export class GraphsComponent implements AfterViewInit, OnChanges { } return { - id: `${from}-to-${to}`, + id: `start-to-end`, start: { - coords: startPoint, - direction: this.config.vectors[from], - color: env.guilloche.colors[from] + coords: curve.start.point, + direction: curve.start.vector, + color: curve.start.color }, end: { - coords: endPoint, - direction: this.config.vectors[to], - color: env.guilloche.colors[to] + coords: curve.end.point, + direction: curve.end.vector, + color: curve.end.color }, - space: this.config.space, stroke: this.config.stroke, nodes: [ - this.vectorPoint(startPoint, this.config.vectors[from]), + this.vectorPoint(curve.start.point, curve.start.vector), ...expandedPoints, - this.vectorPoint(endPoint, this.config.vectors[to]) + this.vectorPoint(curve.end.point, curve.end.vector) ] }; } @@ -185,4 +209,35 @@ export class GraphsComponent implements AfterViewInit, OnChanges { private Δ(a: Point, b: Point) { return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5); } + + + + private *shiftPoint(point: Point, direction) { + const genShiftX = this.shiftNumber(this.config.space, point.x); + const genShiftY = this.shiftNumber(this.config.space, point.y); + + return { + x: 0, + y: 0 + }; + } + + private *shiftNumber(num: number, space: number) { + let current = num; + let index = 0; + const sign = this.flipSign(); + + while (true) { + yield current = sign.next().value * index * space + current; + index++; + } + } + + private *flipSign() { + let sign = 1; + + while (true) { + yield sign = sign * (-1); + } + } } diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts index 32e5566..dd5406e 100644 --- a/src/app/directives/guilloche.directive.ts +++ b/src/app/directives/guilloche.directive.ts @@ -52,7 +52,6 @@ export class GuillocheDirective implements OnChanges { const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords]; this.defineGradient(); - // this.drawGraph(points); this.spreadLines(points); console.log('guilloche directive (changes)', changes.graph.currentValue); @@ -83,31 +82,7 @@ export class GuillocheDirective implements OnChanges { .attr('fill', 'none'); if (!env.production) { - 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); - - this.graph.nodes.forEach(point => { - this.group.append('circle') - .attr('cx', point.x) - .attr('cy', point.y) - .attr('r', 5) - .attr('stroke-width', 1) - .attr('fill-opacity', 0) - .attr('stroke', 'darkgray'); - }); + this.showGrid(); } console.log('guilloche directive(drawGraph)', this.graph); @@ -171,4 +146,32 @@ export class GuillocheDirective implements OnChanges { private Δ(a: Point, b: Point) { return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5); } + + private showGrid() { + 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); + + this.graph.nodes.forEach(point => { + this.group.append('circle') + .attr('cx', point.x) + .attr('cy', point.y) + .attr('r', 5) + .attr('stroke-width', 1) + .attr('fill-opacity', 0) + .attr('stroke', 'darkgray'); + }); + } } diff --git a/src/app/models/config.model.ts b/src/app/models/config.model.ts index 90ed9ba..62a4c4d 100644 --- a/src/app/models/config.model.ts +++ b/src/app/models/config.model.ts @@ -27,4 +27,5 @@ export interface Config { y: number; color: string; }; + space: number; } diff --git a/src/app/models/graph.model.ts b/src/app/models/graph.model.ts index 18c1e7f..e897d4e 100644 --- a/src/app/models/graph.model.ts +++ b/src/app/models/graph.model.ts @@ -28,7 +28,6 @@ export interface Graph { direction: number; // degree between 0 and 360 color: string; // can be set in enviroment }; - space: number; // space between lines stroke: number; // stroke width nodes?: Point[]; // orientation points }