From 0628190223530e8cc619eb939d1363dfe64e09b0 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Mon, 6 Aug 2018 19:11:36 +0200 Subject: [PATCH] prepared history --- src/app/app.component.html | 20 ++++++++++- src/app/app.component.scss | 26 ++------------ src/app/app.component.ts | 27 ++++++++++++-- src/app/app.module.ts | 4 ++- src/app/components/graphs.component.html | 2 +- src/app/components/graphs.component.ts | 7 +++- src/app/services/history.service.ts | 46 ++++++++++++++++++++++++ 7 files changed, 102 insertions(+), 30 deletions(-) create mode 100644 src/app/services/history.service.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 47d5a9e..a69b35d 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -90,15 +90,33 @@
+
+ + +
+ + + + diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8c56685..5965217 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -23,30 +23,8 @@ opacity: 0.2; } -ul { - display: flex; - flex-direction: column; - position: absolute; - top: 0; - right: auto; - bottom: 0; - left: 0; - justify-content: center; - margin: 0; - padding: 3rem; - background: rgba(0,0,0,0.3); - transition: all 360ms 120ms ease-out; +.list-group-item { cursor: pointer; - list-style-type: none; - - &:hover { - opacity: 1; - } - - li { - display: flex; - align-items: center; - } } aside { @@ -57,7 +35,7 @@ aside { right: 0; bottom: 0; left: auto; - justify-content: center; + // justify-content: center; padding: 0; margin: 0; background: rgba(251, 252, 253, 0.9); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d1d4be7..1863632 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -22,6 +22,8 @@ import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { environment as env } from '../environments/environment'; import { Param } from './models/param.model'; import { Config } from './models/config.model'; +import { CanvasService } from './services/canvas.service'; +import { HistoryService } from './services/history.service'; @Component({ selector: 'app-root', @@ -34,18 +36,27 @@ export class AppComponent implements OnInit { public config: any | null; public configForm: FormGroup; public url: any; + public list: any[]; + public showList: boolean; - constructor(private sanitizer: DomSanitizer) { + constructor( + private canvasService: CanvasService, + private historyService: HistoryService + ) { this.config = env.formDefaults; this.configForm = ConfigForm; + this.list = []; + this.showList = false; } ngOnInit() { this.configForm.reset({...this.config}); + this.list = this.historyService.list(); } public updateGraphs() { this.config = {...this.configForm.value}; + this.list = this.historyService.list(); } public prepareSvgExport(svg) { @@ -58,11 +69,23 @@ export class AppComponent implements OnInit { public exportSvg() { const link = document.createElement('a'); - + // const blob = new Blob( + // [this.canvasService.get], + // {type: 'image/svg+xml;charset=utf-8'} + // ); + // link.href = URL.createObjectURL(blob); link.href = this.url; link.download = 'guilloche.svg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } + + public toggleList() { + this.showList = !this.showList; + } + + public restoreGraph(item) { + console.log(item); + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 998c8a2..67e48f9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -22,6 +22,7 @@ import { AppComponent } from './app.component'; import { GraphsComponent } from './components/graphs.component'; import { GuillocheDirective } from './directives/guilloche.directive'; import { CanvasService } from './services/canvas.service'; +import { HistoryService } from './services/history.service'; @NgModule({ declarations: [ @@ -35,7 +36,8 @@ import { CanvasService } from './services/canvas.service'; FormsModule, ], providers: [ - CanvasService + CanvasService, + HistoryService ], bootstrap: [AppComponent] }) diff --git a/src/app/components/graphs.component.html b/src/app/components/graphs.component.html index f8ee281..37a7bbd 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 4b17c67..2aa5896 100644 --- a/src/app/components/graphs.component.ts +++ b/src/app/components/graphs.component.ts @@ -23,6 +23,7 @@ import * as Drag from 'd3-drag'; import { environment as env } from '../../environments/environment'; import { GuillocheDirective } from './../directives/guilloche.directive'; import { CanvasService } from './../services/canvas.service'; +import { HistoryService } from './../services/history.service'; import { Graph } from '../models/graph.model'; import { Point } from '../models/point.model'; @@ -42,10 +43,12 @@ export class GraphsComponent implements OnChanges { @Input() config: any; @Output() svgChange = new EventEmitter(); + @Output() graphChange = new EventEmitter(); @ViewChild('svg') svgElementRef; constructor( - private canvasService: CanvasService + private canvasService: CanvasService, + private historyService: HistoryService ) { this.genLoadedAllGraphs = this.countLoadedGraphs(); } @@ -58,6 +61,8 @@ export class GraphsComponent implements OnChanges { this.updateCanvas(); this.updateMatrix(); this.updateGraphs(); + + this.historyService.save(this.graphs, this.config); } public prepareGuillocheExport(guillocheElement) { diff --git a/src/app/services/history.service.ts b/src/app/services/history.service.ts new file mode 100644 index 0000000..adb4293 --- /dev/null +++ b/src/app/services/history.service.ts @@ -0,0 +1,46 @@ +/** + * Copyright (C) 2018 Michael Czechowski + * This program is free software; you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation; version 2. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. + * + * You should have received a copy of the GNU General Public License along with + * this program; if not, write to the Free Software Foundation, Inc., 51 + * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import { Inject, Injectable, Optional, ViewChild } from '@angular/core'; +import * as Selection from 'd3-selection'; + +import { Graph } from '../models/graph.model'; + +@Injectable() +export class HistoryService { + + public history: any[]; + + constructor() { + this.history = []; + } + + public save(graphs: Graph[], config) { + this.history.push({ + date: new Date(), + graphs: graphs, + config: config + }); + + console.log(config); + } + + public list() { + return this.history; + } + +} +