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

fix(canvasDirective): flattend the code and fix grid rendering

Browse Source
This commit is contained in:
Michael Czechowski
2018-05-21 01:28:17 +02:00
parent 005474ae95
commit d12353813e
1 changed files with 19 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/app/canvas/canvas.directive.ts
View File

@@ -95,41 +95,28 @@ export class CanvasDirective implements OnChanges {
private render() { private render() {
this.drawPoints(this.getExpandedPoints); this.drawPoints(this.getExpandedPoints);
if (this.param.showGrid) { this.resetGrid();
this.resetGrid(); this.renderGrid(this.getExpandedPoints);
this.renderGrid(this.getExpandedPoints);
}
this.spreadLines(this.getExpandedPoints); this.spreadLines(this.getExpandedPoints);
} }
private resetPoints(): void { private resetPoints(): void {
Selection.selectAll('g#spread-points').remove(); Selection.selectAll('g#spread-points').remove();
Selection.selectAll('g.points').remove(); Selection.selectAll('g#points').remove();
} }
private drawPoints(points: Point[]) { private drawPoints(points: Point[]) {
const that = this; const that = this;
const group = this.svg.append('g').attr('class', 'points'); const group = this.svg.append('g').attr('id', 'points');
points.forEach(point => { points.forEach(point => {
const fill = !this.param.showGrid ? 'none' : point.color ? point.color : 'lightgray';
group.append('circle') group.append('circle')
.attr('r', point.color ? 20 : 10) .attr('r', 10)
.attr('cx', point.x) .attr('cx', point.x)
.attr('cy', point.y) .attr('cy', point.y)
.attr('fill', () => { .attr('fill', fill);
if (!this.param.showGrid) {
return 'none';
}
return point.color ? point.color : 'lightgray';
})
.attr('stroke-width', () => {
if (!this.param.showGrid) {
return 0;
}
return !point.color ? 2 : 0;
})
.attr('stroke', !point.color && !this.param.showGrid ? 'gray' : 'none')
.style('cursor', 'pointer');
}); });
} }
@@ -164,13 +151,11 @@ export class CanvasDirective implements OnChanges {
} }
private get getExpandedPoints() { private get getExpandedPoints() {
const group = Selection.select('g.points'); const group = Selection.select('g#points');
const points = []; const points = [];
const that = this; const that = this;
let point = null; if (!group.selectAll('circle').size()) {
if (group.size() <= 1) {
return this.expandPoints([ return this.expandPoints([
this.config.start, this.config.start,
this.config.end this.config.end
@@ -178,7 +163,7 @@ export class CanvasDirective implements OnChanges {
} }
group.selectAll('circle').each(function() { group.selectAll('circle').each(function() {
point = Selection.select(this); const point = Selection.select(this);
points.push({ points.push({
x: point.attr('cx'), x: point.attr('cx'),
@@ -279,6 +264,10 @@ export class CanvasDirective implements OnChanges {
* @param points * @param points
*/ */
private renderGrid(points: Point[]) { private renderGrid(points: Point[]) {
if (!this.param.showGrid) {
return;
}
const startingPoints = [points.shift(), points.pop()]; const startingPoints = [points.shift(), points.pop()];
const group = this.svg.append('g').attr('id', 'grid'); const group = this.svg.append('g').attr('id', 'grid');
@@ -287,7 +276,7 @@ export class CanvasDirective implements OnChanges {
group.append('circle') group.append('circle')
.attr('cx', s.x) .attr('cx', s.x)
.attr('cy', s.y) .attr('cy', s.y)
.attr('r', this.Δ(p, s)) .attr('r', this.Δ(s, p))
.attr('stroke-width', 1) .attr('stroke-width', 1)
.attr('fill-opacity', 0) .attr('fill-opacity', 0)
.attr('stroke', 'gainsboro'); .attr('stroke', 'gainsboro');
@@ -298,7 +287,9 @@ export class CanvasDirective implements OnChanges {
} }
private resetGrid() { private resetGrid() {
if (Selection.select('g#grid').size() >= 1) { const group = Selection.select('g#grid');
if (!group.size() && this.param.showGrid) {
Selection.selectAll('g#grid').remove(); Selection.selectAll('g#grid').remove();
} }
} }