From d8714d0606c3123e51a4c31542321acf2c49633e Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Wed, 8 Aug 2018 19:52:42 +0200 Subject: [PATCH] fundamental animations working --- .vscode/launch.json | 15 ++++++ src/app/components/graphs.component.ts | 27 +++++++---- src/app/directives/guilloche.directive.ts | 4 +- src/app/services/animation.service.ts | 57 +++++++++-------------- src/app/services/canvas.service.ts | 23 ++++++++- src/app/services/history.service.ts | 7 +-- 6 files changed, 80 insertions(+), 53 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..d8e5ed9 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Verwendet IntelliSense zum Ermitteln möglicher Attribute. + // Zeigen Sie auf vorhandene Attribute, um die zugehörigen Beschreibungen anzuzeigen. + // Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Chrome gegen localhost starten", + "url": "http://localhost:4200", + "webRoot": "${workspaceFolder}" + } + ] +} diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts index 033b2bc..59e6d26 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 { ViewChild, Component, Input, Output, SimpleChanges, OnChanges, EventEmitter, OnInit } from '@angular/core'; +import { ViewChild, Component, Input, Output, SimpleChanges, OnChanges, EventEmitter, OnInit, HostListener } from '@angular/core'; import { Observable, interval, Subscription } from 'rxjs'; import * as Selection from 'd3-selection'; import * as Shape from 'd3-shape'; @@ -40,13 +40,15 @@ export class GraphsComponent implements OnChanges, OnInit { public canvas: any | null; public matrix: any | null; public graphs: Graph[]; + public windowHeight: number | null; + public windowWidth: number | null; private genShiftPoint: any | null; private genLoadedAllGraphs: any | null; private hash: string; private animation: Observable; private timer: Observable; - private animationSteps: Subscription; + private animationSteps: any; @Input() config: any; @Input() restoredHistory: any; @@ -55,6 +57,11 @@ export class GraphsComponent implements OnChanges, OnInit { @Output() graphChange = new EventEmitter(); @ViewChild('svg') svgElementRef; + @HostListener('window:resize', ['$event']) + onResize(event) { + this.canvasService.adjustToWindow(); + } + constructor( private canvasService: CanvasService, private historyService: HistoryService, @@ -74,6 +81,7 @@ export class GraphsComponent implements OnChanges, OnInit { this.updateMatrix(); if (changes.config && !changes.config.firstChange) { + // Config changes must not trigger any other events this.updateGraphs(); return; } @@ -85,22 +93,20 @@ export class GraphsComponent implements OnChanges, OnInit { if (changes.animationActive) { if (this.animationActive) { - this.animationSteps = this.timer.subscribe(n => { - console.log('Animation step', n); - this.graphs = this.animationService.animate(this.graphs); - // this.graphs = this.graphs; - this.hash = this.historyService.hash(this.graphs); - this.saveHistory(); - }); + this.animationSteps = setInterval(() => this.animateGraph(), 50); } else { if (this.animationSteps) { - this.animationSteps.unsubscribe(); + clearInterval(this.animationSteps); } } } } + private animateGraph() { + this.graphs = this.animationService.animate(this.graphs); + } private saveHistory() { + this.hash = this.historyService.hash(this.graphs); this.historyService.save(this.graphs, this.config); } @@ -154,6 +160,7 @@ export class GraphsComponent implements OnChanges, OnInit { private updateCanvas(): void { this.canvas = this.svgElementRef.nativeElement; this.canvasService.set(this.canvas); + this.canvasService.adjustToWindow(); } private updateMatrix() { diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts index 922106c..af9cfed 100644 --- a/src/app/directives/guilloche.directive.ts +++ b/src/app/directives/guilloche.directive.ts @@ -14,7 +14,7 @@ * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnInit, OnChanges, SimpleChanges } from '@angular/core'; +import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnChanges, SimpleChanges } from '@angular/core'; import * as Selection from 'd3-selection'; import * as Shape from 'd3-shape'; import * as Random from 'd3-random'; @@ -52,6 +52,8 @@ export class GuillocheDirective implements OnChanges { } ngOnChanges(changes: SimpleChanges) { + // console.log(this.graph); + const points = [ this.graph.start.point, ...this.graph.nodes, diff --git a/src/app/services/animation.service.ts b/src/app/services/animation.service.ts index 0b245ca..2f37612 100644 --- a/src/app/services/animation.service.ts +++ b/src/app/services/animation.service.ts @@ -19,6 +19,8 @@ import { interval, Observable } from 'rxjs'; import * as Selection from 'd3-selection'; import { Graph } from '../models/graph.model'; +import { ArithmeticService } from './arithmetic.service'; +import { HistoryService } from './history.service'; @Injectable() export class AnimationService { @@ -26,45 +28,32 @@ export class AnimationService { public graphs: Graph[]; public speed: number; public range: number; - public genAnimation: any; - private timer: Observable; - private subscribtion: any; + // public genAnimation: any; + // private timer: Observable; + // private subscribtion: any; - constructor() { - this.timer = interval(500); - this.resetAnimation(); + constructor( + private arithmetics: ArithmeticService, + private historyService: HistoryService, + ) { } - private resetAnimation() { - this.genAnimation = this.animateNextStep(); - } - - private *animateNextStep() { - while (this.graphs) { - yield this.graphs = this.graphs.map(graph => { - console.log(graph); - return graph; - }); - } - } - - // public start(initialGraphs: Graph[]): Observable { - // // this.graphs = initialGraphs.map(graph => { - // // console.log(graph); - // // return graph; - // // }); - - // // return this.timer.subscribe(n => this.graphs); - // } - - // public animate(): Graph[] { - // return this.genAnimation.next().value; - // } - public animate(initialGraphs: Graph[]) { - this.graphs = initialGraphs; + const newGraphs = initialGraphs.slice(); - return this.genAnimation.next().value; + return newGraphs.map(graph => { + + const newGraph = Object.assign({}, graph); + const indexMiddle = Math.floor(newGraph.nodes.length * 0.5); + const pointMiddle = newGraph.nodes[indexMiddle]; + + newGraph.nodes.splice(indexMiddle, 1, { + x: pointMiddle.x - 1, + y: pointMiddle.y + 1, + }); + + return newGraph; + }); } } diff --git a/src/app/services/canvas.service.ts b/src/app/services/canvas.service.ts index ae3a21f..7c218f1 100644 --- a/src/app/services/canvas.service.ts +++ b/src/app/services/canvas.service.ts @@ -14,15 +14,19 @@ * Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import { Inject, Injectable, Optional, ViewChild } from '@angular/core'; +import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core'; import * as Selection from 'd3-selection'; @Injectable() export class CanvasService { + private renderer: Renderer2; public canvas: any; - constructor() { + constructor( + private rendererFactory: RendererFactory2 + ) { + this.renderer = rendererFactory.createRenderer(null, null); } public get get() { @@ -32,4 +36,19 @@ export class CanvasService { public set(el) { this.canvas = el; } + + public adjustToWindow() { + if (this.canvas) { + this.renderer.setStyle( + this.canvas, + 'width', + window.innerWidth + ); + this.renderer.setStyle( + this.canvas, + 'height', + window.innerHeight + ); + } + } } diff --git a/src/app/services/history.service.ts b/src/app/services/history.service.ts index 8a2a4e5..5693e91 100644 --- a/src/app/services/history.service.ts +++ b/src/app/services/history.service.ts @@ -38,16 +38,11 @@ export class HistoryService { } public hash(graphs) { - return btoa(JSON.stringify([graphs])); + return btoa(JSON.stringify(graphs)); } public list() { return this.history; } - - public restore(graphs: Graph[]) { - console.log(graphs); - } - }