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

added history

Browse Source
This commit is contained in:
Michael Czechowski
2018-08-07 13:21:22 +02:00
parent 0628190223
commit a799e8e9e8
4 changed files with 82 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
<app-graphs [config]="config" (svgChange)="prepareSvgExport($event)"></app-graphs> <app-graphs [config]="config" [restoredHistory]="restoredHistory" (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">
<div class="aside-inner"> <div class="aside-inner">
@@ -98,25 +98,35 @@
<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> </form>
<div class="dropdown-divider"></div> <div class="row mt-4">
<div class="col-sm">
<button class="btn btn-secondary btn-block" (click)="exportSvg()">Download</button>
</div>
<div class="col-sm mt-xs-2 mt-sm-2 mt-md-0">
<button class="btn btn-secondary btn-block" (click)="toggleList()">
Chronik <span class="badge badge-light badge-pill">{{ list.length }}</span>
</button>
</div>
</div>
<button class="btn btn-secondary btn-block" (click)="exportSvg()">Download</button> <div *ngIf="showList" class="list-group mt-4">
<a href="#" *ngFor="let item of list.reverse(); let i = index" class="list-group-item d-flex flex-row " (click)="restoreGraph(item)">
<div class="dropdown-divider"></div> <span class="text-muted pr-3">#{{ list.length - i }}</span>
<div class="d-flex flex-column">
<button class="btn btn-secondary btn-block" (click)="toggleList()">Chronik <span class="badge badge-light">{{ list.length }}</span></button> <div>
{{ item.date | date:'HH:mm:ss' }} Uhr
<ul *ngIf="showList" class="list-group list-group-flush mt-4"> </div>
<li *ngFor="let item of list" class="list-group-item d-flex justify-content-between align-items-center" (click)="restoreGraph(item)"> <div class="">
{{ item.date | date:'dd.MM.y · HH:mm:ss' }} Uhr <span class="badge badge-primary mr-2">
<span class="badge badge-primary badge-pill"> {{ item.config.nodes }} Knoten
{{ item.config.nodes }} Knoten </span>
</span> <span class="badge badge-primary">
<span class="badge badge-primary badge-pill"> {{ item.config.spread }} Linien
{{ item.config.spread }} Linien </span>
</span> </div>
</li> </div>
</ul> </a>
</div>
</div> </div>
</aside> </aside>

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

@@ -24,6 +24,7 @@ import { Param } from './models/param.model';
import { Config } from './models/config.model'; import { Config } from './models/config.model';
import { CanvasService } from './services/canvas.service'; import { CanvasService } from './services/canvas.service';
import { HistoryService } from './services/history.service'; import { HistoryService } from './services/history.service';
import { Graph } from './models/graph.model';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@@ -38,6 +39,7 @@ export class AppComponent implements OnInit {
public url: any; public url: any;
public list: any[]; public list: any[];
public showList: boolean; public showList: boolean;
public restoredHistory: any;
constructor( constructor(
private canvasService: CanvasService, private canvasService: CanvasService,
@@ -46,12 +48,13 @@ export class AppComponent implements OnInit {
this.config = env.formDefaults; this.config = env.formDefaults;
this.configForm = ConfigForm; this.configForm = ConfigForm;
this.list = []; this.list = [];
this.showList = false; this.showList = true;
} }
ngOnInit() { ngOnInit() {
this.configForm.reset({...this.config}); this.configForm.reset({...this.config});
this.list = this.historyService.list(); this.list = this.historyService.list();
// console.log(this.graphs);
} }
public updateGraphs() { public updateGraphs() {
@@ -85,7 +88,8 @@ export class AppComponent implements OnInit {
this.showList = !this.showList; this.showList = !this.showList;
} }
public restoreGraph(item) { public restoreGraph(history) {
console.log(item); this.configForm.reset({...history.config});
this.restoredHistory = history;
} }
} }

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

@@ -34,14 +34,16 @@ import { Point } from '../models/point.model';
}) })
export class GraphsComponent implements OnChanges { export class GraphsComponent implements OnChanges {
public graphs: Graph[];
public canvas: any | null; public canvas: any | null;
public matrix: any | null; public matrix: any | null;
public graphs: Graph[];
private genShiftPoint: any | null; private genShiftPoint: any | null;
private genLoadedAllGraphs: any | null; private genLoadedAllGraphs: any | null;
private hash: string;
@Input() config: any; @Input() config: any;
@Input() restoredHistory: any;
@Output() svgChange = new EventEmitter(); @Output() svgChange = new EventEmitter();
@Output() graphChange = new EventEmitter(); @Output() graphChange = new EventEmitter();
@ViewChild('svg') svgElementRef; @ViewChild('svg') svgElementRef;
@@ -54,35 +56,23 @@ export class GraphsComponent implements OnChanges {
} }
ngOnChanges(changes: SimpleChanges) { ngOnChanges(changes: SimpleChanges) {
this.init();
}
private init() {
this.updateCanvas(); this.updateCanvas();
this.updateMatrix(); this.updateMatrix();
this.updateGraphs();
this.historyService.save(this.graphs, this.config); if (changes.restoredHistory) {
} if (changes.restoredHistory.currentValue) {
if (this.restoredHistory.hash !== this.hash) {
public prepareGuillocheExport(guillocheElement) { this.graphs = this.restoredHistory.graphs;
if (this.genLoadedAllGraphs.next().value) { this.hash = this.restoredHistory.hash;
this.svgChange.emit(this.svgElementRef); }
} return;
}
private *countLoadedGraphs() {
let cycles = 1;
while (true) {
if (cycles < this.graphs.length) {
yield false;
cycles++;
} else {
yield true;
cycles = 1;
} }
} }
this.updateGraphs();
}
private saveHistory() {
this.historyService.save(this.graphs, this.config);
} }
private updateGraphs(): void { private updateGraphs(): void {
@@ -103,6 +93,8 @@ export class GraphsComponent implements OnChanges {
]; ];
this.graphs = curveList.map(curve => this.adjustGraph(curve)); this.graphs = curveList.map(curve => this.adjustGraph(curve));
this.hash = this.historyService.hash(this.graphs);
this.saveHistory();
} }
private adjustGraph(curve) { private adjustGraph(curve) {
@@ -235,4 +227,24 @@ export class GraphsComponent implements OnChanges {
yield sign = sign * (-1); yield sign = sign * (-1);
} }
} }
public prepareGuillocheExport(guillocheElement) {
if (this.genLoadedAllGraphs.next().value) {
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;
}
}
}
} }

11
src/app/services/history.service.ts
View File

@@ -32,15 +32,22 @@ export class HistoryService {
this.history.push({ this.history.push({
date: new Date(), date: new Date(),
graphs: graphs, graphs: graphs,
config: config config: config,
hash: this.hash(graphs)
}); });
}
console.log(config); public hash(graphs) {
return btoa(JSON.stringify([graphs]));
} }
public list() { public list() {
return this.history; return this.history;
} }
public restore(graphs: Graph[]) {
console.log(graphs);
}
} }