diff --git a/package.json b/package.json index 2d67ea9..c3e7e06 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "scripts": { "ng": "ng", "start": "ng serve", - "build": "ng build", + "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" diff --git a/src/app/app.component.html b/src/app/app.component.html index b3264d3..47d5a9e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,102 +1,104 @@ - + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 4a738c1..8c56685 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -62,7 +62,7 @@ aside { margin: 0; background: rgba(251, 252, 253, 0.9); - form { + .aside-inner { overflow: auto; padding: 3rem; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5362c7d..d1d4be7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -17,6 +17,7 @@ import { ConfigForm } from './forms/config.form'; import { Component, OnInit, HostListener } from '@angular/core'; import { FormGroup } from '@angular/forms'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { environment as env } from '../environments/environment'; import { Param } from './models/param.model'; @@ -32,9 +33,9 @@ export class AppComponent implements OnInit { public canvasParam: Param; public config: any | null; public configForm: FormGroup; - public scaleOnWheel: boolean; + public url: any; - constructor() { + constructor(private sanitizer: DomSanitizer) { this.config = env.formDefaults; this.configForm = ConfigForm; } @@ -47,7 +48,21 @@ export class AppComponent implements OnInit { this.config = {...this.configForm.value}; } + public prepareSvgExport(svg) { + const blob = new Blob( + [svg.nativeElement.outerHTML], + {type: 'image/svg+xml;charset=utf-8'} + ); + this.url = URL.createObjectURL(blob); + } + public exportSvg() { - alert('Feature coming'); + const link = document.createElement('a'); + + link.href = this.url; + link.download = 'guilloche.svg'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); } } diff --git a/src/app/components/graphs.component.html b/src/app/components/graphs.component.html index 685554f..f8ee281 100644 --- a/src/app/components/graphs.component.html +++ b/src/app/components/graphs.component.html @@ -1,3 +1,3 @@ - + diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts index 1b60f54..cb1e057 100644 --- a/src/app/components/graphs.component.ts +++ b/src/app/components/graphs.component.ts @@ -14,7 +14,7 @@ * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ViewChildren, QueryList, Component, ViewChild, Input, SimpleChanges, OnChanges, HostListener } from '@angular/core'; +import { ViewChild, QueryList, Component, Input, Output, SimpleChanges, OnChanges, HostListener, EventEmitter } from '@angular/core'; import * as Selection from 'd3-selection'; import * as Shape from 'd3-shape'; import * as Random from 'd3-random'; @@ -38,12 +38,13 @@ export class GraphsComponent implements OnChanges { public matrix: any | null; private genShiftPoint: any | null; + private genLoadedAllGraphs: any | null; @Input() config: any; @ViewChild('svg') svgElementRef; - @ViewChild(GuillocheDirective) guillocheViewChild: GuillocheDirective; - @ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList; + + @Output() svgChange = new EventEmitter(); @HostListener('window:resize', ['$event']) private onResize(event) { @@ -53,6 +54,7 @@ export class GraphsComponent implements OnChanges { constructor( private canvasService: CanvasService ) { + this.genLoadedAllGraphs = this.countLoadedGraphs(); } ngOnChanges(changes: SimpleChanges) { @@ -65,6 +67,28 @@ export class GraphsComponent implements OnChanges { this.updateGraphs(); } + public prepareGuillocheExport(guillocheElement) { + const item = this.genLoadedAllGraphs.next().value; + console.log(item); + if (item) { + this.svgChange.emit(this.svgElementRef); + } + } + + private *countLoadedGraphs() { + let cycles = 1; + + while (true) { + if (cycles < this.graphs.length) { + yield false; + cycles++; + } else { + yield true; + cycles = 1; + } + } + } + private updateGraphs(): void { const genShiftStart = this.shiftPoint(this.matrix.start, this.config.vectors.start); const genShiftEnd = this.shiftPoint(this.matrix.end, this.config.vectors.end); diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts index 014d1a1..c23476e 100644 --- a/src/app/directives/guilloche.directive.ts +++ b/src/app/directives/guilloche.directive.ts @@ -39,6 +39,8 @@ export class GuillocheDirective implements OnChanges { @Input() matrix: any; @Input() config: any; + @Output() guillocheChange = new EventEmitter(); + constructor( private canvasService: CanvasService, private el: ElementRef @@ -54,6 +56,11 @@ export class GuillocheDirective implements OnChanges { this.graph.end.point ]; this.spreadLines(points); + this.guillocheChanged(); + } + + public guillocheChanged() { + this.guillocheChange.emit(this.el.nativeElement); } private drawGraph(points: Point[]): void { @@ -77,7 +84,6 @@ export class GuillocheDirective implements OnChanges { const closestCenter = this.getClosestCenter(pointMiddle); const radius = this.Δ(pointMiddle, closestCenter); const spreadPoints = []; - const group = this.canvas.append('g').attr('id', 'spread-points'); const pies = 80; for (let i = 0; i < pies; i++) { @@ -100,7 +106,6 @@ export class GuillocheDirective implements OnChanges { return index === this.config.spread - 1; }); - group.lower(); } private getClosestCenter(point: Point) {