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

added download button

Browse Source
This commit is contained in:
Michael Czechowski
2018-08-06 17:11:23 +02:00
parent b4e915d1ea
commit 40df45ae0e
7 changed files with 145 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -30,7 +30,7 @@
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build --prod",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"

178
src/app/app.component.html
View File

@@ -1,102 +1,104 @@
<app-graphs [config]="config"></app-graphs> <app-graphs [config]="config" (svgChange)="prepareSvgExport($event)"></app-graphs>
<aside class="col-sm-4 col-lg-3 col-xl-3"> <aside class="col-sm-4 col-lg-3 col-xl-3">
<form [formGroup]="configForm" (ngSubmit)="updateGraphs()" novalidate> <div class="aside-inner">
<div class="pb-5"> <form [formGroup]="configForm" (ngSubmit)="updateGraphs()" novalidate>
<h5>Grundfläche</h5> <div class="pb-5">
<hr> <h5>Grundfläche</h5>
<div class="form-group"> <hr>
<label class="form-control-label">
Breite
</label>
<input type="number" class="form-control" formControlName="width">
</div>
<div class="form-group">
<label class="form-control-label">
Höhe
</label>
<input type="number" class="form-control" formControlName="height">
</div>
<div class="form-group">
<label class="form-control-label">
Skalierung
</label>
<input type="number" class="form-control" formControlName="scale" min="0" max="1" step="0.01">
</div>
</div>
<div class="pb-5">
<h5>Vektorfläche</h5>
<hr/>
<div class="form-group">
<label class="form-control-label">
Skalierung
</label>
<input type="number" class="form-control" formControlName="overlap" min="0" max="30" step="0.1">
</div>
<ng-container formGroupName="vectors">
<div class="form-group"> <div class="form-group">
<label class="form-control-label"> <label class="form-control-label">
Anfangsvektor Breite
</label> </label>
<select class="form-control" formControlName="start"> <input type="number" class="form-control" formControlName="width">
<option value="1">Oben</option>
<option value="0.5">Rechts</option>
<option value="0">Unten</option>
<option value="1.5">Links</option>
</select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-control-label"> <label class="form-control-label">
Endvektor Höhe
</label> </label>
<select class="form-control" formControlName="end"> <input type="number" class="form-control" formControlName="height">
<option value="1">Oben</option>
<option value="0.5">Rechts</option>
<option value="0">Unten</option>
<option value="1.5">Links</option>
</select>
</div> </div>
<div class="form-group">
<label class="form-control-label">
Skalierung
</label>
<input type="number" class="form-control" formControlName="scale" min="0" max="1" step="0.01">
</div>
</div>
<div class="pb-5">
<h5>Vektorfläche</h5>
<hr/>
<div class="form-group">
<label class="form-control-label">
Skalierung
</label>
<input type="number" class="form-control" formControlName="overlap" min="0" max="30" step="0.1">
</div>
<ng-container formGroupName="vectors">
<div class="form-group">
<label class="form-control-label">
Anfangsvektor
</label>
<select class="form-control" formControlName="start">
<option value="1">Oben</option>
<option value="0.5">Rechts</option>
<option value="0">Unten</option>
<option value="1.5">Links</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label">
Endvektor
</label>
<select class="form-control" formControlName="end">
<option value="1">Oben</option>
<option value="0.5">Rechts</option>
<option value="0">Unten</option>
<option value="1.5">Links</option>
</select>
</div>
<div class="form-group"> <div class="form-group">
<label class="form-control-label"> <label class="form-control-label">
Dehnung Dehnung
</label> </label>
<input type="number" class="form-control" formControlName="range" min="0" max="1" step="0.1"> <input type="number" class="form-control" formControlName="range" min="0" max="1" step="0.1">
</div> </div>
</ng-container> </ng-container>
</div> </div>
<h5 class="mt-2">Graph</h5> <h5 class="mt-2">Graph</h5>
<!-- <hr> <!-- <hr>
<small>Anzahl der Schwingungen mittels Knotenpunkten bestimmen und die Skalierung auf der Leinwand einstellen.</small> --> <small>Anzahl der Schwingungen mittels Knotenpunkten bestimmen und die Skalierung auf der Leinwand einstellen.</small> -->
<hr> <hr>
<div class="form-group mb-4"> <div class="form-group mb-4">
<label class="form-control-label"> <label class="form-control-label">
Knotenpunkte Knotenpunkte
</label> </label>
<input type="number" class="form-control" formControlName="nodes" min="1" max="10"> <input type="number" class="form-control" formControlName="nodes" min="1" max="10">
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="form-control-label"> <label class="form-control-label">
Linienstärke Linienstärke
</label> </label>
<input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1"> <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
</div> </div>
<div class="form-group mb-4"> <div class="form-group mb-4">
<label class="form-control-label"> <label class="form-control-label">
Linienabstand Linienabstand
</label> </label>
<input type="number" class="form-control" formControlName="space" min="0" max="10" step="0.1"> <input type="number" class="form-control" formControlName="space" min="0" max="10" step="0.1">
</div> </div>
<div class="form-group mb-4"> <div class="form-group mb-4">
<label class="form-control-label"> <label class="form-control-label">
Aufspleißen Aufspleißen
</label> </label>
<input type="number" class="form-control" formControlName="spread" min="0" max="40"> <input type="number" class="form-control" formControlName="spread" min="0" max="40">
</div> </div>
<div class="dropdown-divider mb-4"></div> <div class="dropdown-divider mb-4"></div>
<button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button> <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
</form>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<!-- <button (click)="exportSvg()" class="btn btn-secondary btn-block" [disabled]="configForm.invalid">Download</button> --> <button class="btn btn-secondary btn-block" (click)="exportSvg()">Download</button>
</form> </div>
</aside> </aside>

2
src/app/app.component.scss
View File

@@ -62,7 +62,7 @@ aside {
margin: 0; margin: 0;
background: rgba(251, 252, 253, 0.9); background: rgba(251, 252, 253, 0.9);
form { .aside-inner {
overflow: auto; overflow: auto;
padding: 3rem; padding: 3rem;
} }

21
src/app/app.component.ts
View File

@@ -17,6 +17,7 @@
import { ConfigForm } from './forms/config.form'; import { ConfigForm } from './forms/config.form';
import { Component, OnInit, HostListener } from '@angular/core'; import { Component, OnInit, HostListener } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { environment as env } from '../environments/environment'; import { environment as env } from '../environments/environment';
import { Param } from './models/param.model'; import { Param } from './models/param.model';
@@ -32,9 +33,9 @@ export class AppComponent implements OnInit {
public canvasParam: Param; public canvasParam: Param;
public config: any | null; public config: any | null;
public configForm: FormGroup; public configForm: FormGroup;
public scaleOnWheel: boolean; public url: any;
constructor() { constructor(private sanitizer: DomSanitizer) {
this.config = env.formDefaults; this.config = env.formDefaults;
this.configForm = ConfigForm; this.configForm = ConfigForm;
} }
@@ -47,7 +48,21 @@ export class AppComponent implements OnInit {
this.config = {...this.configForm.value}; 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() { 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);
} }
} }

2
src/app/components/graphs.component.html
View File

@@ -1,3 +1,3 @@
<svg #svg width="100%" height="100%"> <svg #svg width="100%" height="100%">
<g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config"></g> <g guilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" (guillocheChange)="prepareGuillocheExport($event)"></g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 147 B

After

Width:  |  Height:  |  Size: 198 B

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

@@ -14,7 +14,7 @@
* Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. * 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 Selection from 'd3-selection';
import * as Shape from 'd3-shape'; import * as Shape from 'd3-shape';
import * as Random from 'd3-random'; import * as Random from 'd3-random';
@@ -38,12 +38,13 @@ export class GraphsComponent implements OnChanges {
public matrix: any | null; public matrix: any | null;
private genShiftPoint: any | null; private genShiftPoint: any | null;
private genLoadedAllGraphs: any | null;
@Input() config: any; @Input() config: any;
@ViewChild('svg') svgElementRef; @ViewChild('svg') svgElementRef;
@ViewChild(GuillocheDirective) guillocheViewChild: GuillocheDirective;
@ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList<GuillocheDirective>; @Output() svgChange = new EventEmitter();
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
private onResize(event) { private onResize(event) {
@@ -53,6 +54,7 @@ export class GraphsComponent implements OnChanges {
constructor( constructor(
private canvasService: CanvasService private canvasService: CanvasService
) { ) {
this.genLoadedAllGraphs = this.countLoadedGraphs();
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
@@ -65,6 +67,28 @@ export class GraphsComponent implements OnChanges {
this.updateGraphs(); 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 { private updateGraphs(): void {
const genShiftStart = this.shiftPoint(this.matrix.start, this.config.vectors.start); const genShiftStart = this.shiftPoint(this.matrix.start, this.config.vectors.start);
const genShiftEnd = this.shiftPoint(this.matrix.end, this.config.vectors.end); const genShiftEnd = this.shiftPoint(this.matrix.end, this.config.vectors.end);

9
src/app/directives/guilloche.directive.ts
View File

@@ -39,6 +39,8 @@ export class GuillocheDirective implements OnChanges {
@Input() matrix: any; @Input() matrix: any;
@Input() config: any; @Input() config: any;
@Output() guillocheChange = new EventEmitter();
constructor( constructor(
private canvasService: CanvasService, private canvasService: CanvasService,
private el: ElementRef private el: ElementRef
@@ -54,6 +56,11 @@ export class GuillocheDirective implements OnChanges {
this.graph.end.point this.graph.end.point
]; ];
this.spreadLines(points); this.spreadLines(points);
this.guillocheChanged();
}
public guillocheChanged() {
this.guillocheChange.emit(this.el.nativeElement);
} }
private drawGraph(points: Point[]): void { private drawGraph(points: Point[]): void {
@@ -77,7 +84,6 @@ export class GuillocheDirective implements OnChanges {
const closestCenter = this.getClosestCenter(pointMiddle); const closestCenter = this.getClosestCenter(pointMiddle);
const radius = this.Δ(pointMiddle, closestCenter); const radius = this.Δ(pointMiddle, closestCenter);
const spreadPoints = []; const spreadPoints = [];
const group = this.canvas.append('g').attr('id', 'spread-points');
const pies = 80; const pies = 80;
for (let i = 0; i < pies; i++) { for (let i = 0; i < pies; i++) {
@@ -100,7 +106,6 @@ export class GuillocheDirective implements OnChanges {
return index === this.config.spread - 1; return index === this.config.spread - 1;
}); });
group.lower();
} }
private getClosestCenter(point: Point) { private getClosestCenter(point: Point) {