fundamental animations working

.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}"
+    }
+  ]
+}

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<Graph[]>;
   private timer: Observable<number>;
-  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() {

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,

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<number>;
-  private subscribtion: any;
+  // public genAnimation: any;
+  // private timer: Observable<number>;
+  // 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<Graph[]> {
-  //   // 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;
+    });
   }
 }
 

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
+      );
+    }
+  }
 }

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);
-  }
-
 }