graph3D.component.ts 3.75 KB
Newer Older
1
2
3
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import * as graph3DLib from 'graph3d';
import { GHCIService } from '../../../shared/services/ghci.service';
4
import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps } from './graph3D.helper';
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@Component({
  selector: 'graph3d-component',
  templateUrl: './graph3D.component.html',
  styleUrls: ['./graph3D.component.scss'],
  host: {
    '(window:resize)': 'onResize($event)'
  }
})
export class Graph3DComponent implements OnInit {

  private ghciServiceSub: any;

  @ViewChild('graph3DElement') 
  private graph3DRef: ElementRef;

21
22
23
  private graphProps : GraphProps = Default_GraphProps;
  
  private animationProps : AnimationProps = {
24
25
26
27
28
    visible: false,
    playing: false,
    value: 0,
    speed: 1000
  };
29
  
30

31
  constructor(ghciService: GHCIService, private zone: NgZone) {
32
33
34
35
36
37
38
39
40
41
    this.ghciServiceSub = ghciService.messages.subscribe(
      message => {
        if (message.tipo == "canvas3D") {
          const figures = JSON.parse(formatJSON(message.resultado));
             
          graph3DLib.drawFigures(figures);
        } 
        else if (message.tipo == "animacion3D") {
          const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame)));

42
43
44
          this.animationProps.visible = true;
          this.animationProps.playing = true;
          this.animationProps.value = 0;
45

46
          graph3DLib.clear();
47
          graph3DLib.initializeAnimation(frames, 
48
            (value) => this.animationProps.value = value
49
50
51
52
53
54
55
56
57
          );

          graph3DLib.playAnimation();
        }
      }
    )
  }

  ngOnInit() {
58
  //  this.zone.runOutsideAngular(() => {
59
      graph3DLib.initialize(this.graph3DRef.nativeElement);
60
    //})
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
  }

  ngOnDestroy() {
    if (this.ghciServiceSub) {
      this.ghciServiceSub.unsubscribe();
    }
  }

  onResize(event){
    const {width, height} = this.graph3DRef.nativeElement.getBoundingClientRect();

    graph3DLib.changeSize({width, height});
  }

  onAnimationChangeSpeed = (value) => {
76
    this.animationProps.speed = parseInt(value);
77
78
79
80
    graph3DLib.changeSpeedAnimation(parseInt(value));
  }

  onAnimationTogglePlay = () => {
81
    if (this.animationProps.playing) {
82
83
84
85
86
87
      graph3DLib.pauseAnimation();
    }
    else {
      graph3DLib.playAnimation();
    }
    
88
    this.animationProps.playing = !this.animationProps.playing;
89
  }
90
91
92

  public changeZoomType = (type: Zoom3DType = null) => {
    if (type != null) {
93
      this.graphProps.zoomType = type;
94
95
    } 
    else {
96
      this.graphProps.zoomType = (this.graphProps.zoomType % 4) + 1;
97
98
    }

99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
    graph3DLib.changeZoomType(this.graphProps.zoomType);
  }

  public changeAxesVisibility = () => {
    this.graphProps.showAxes = !this.graphProps.showAxes;
    graph3DLib.showAxes(this.graphProps.showAxes);
  }

  public onChangeAxesSize = (v, event) => {
    let value = this.graphProps.range[v];

    const min = parseInt(event.target.min);
    const max = parseInt(event.target.max);

    if (value < min) {
      this.graphProps.range[v] = min;
    } 
    
    if (value > max) {
      this.graphProps.range[v] = max;
    }
    
    graph3DLib.changeAxesSize(this.graphProps.range)
122
123
124
125
126
127
128
129
130
131
  }

  public zoomIn = () => {
    graph3DLib.changeZoom(true);
  }

  public zoomOut = () => {
    graph3DLib.changeZoom(false);
  }
  
132
133
134
135
136
137
138
139
140
141
142
143
  public clear = () => {
    this.animationProps.visible = false;

    graph3DLib.clear();
  }
  
  public center = () => {
    this.graphProps = Default_GraphProps;

    graph3DLib.reset();
  }

144
145
146
147
148
149
150
151
152
153
154
155
  public getZoom3DTypeName = (type: Zoom3DType) => {
    switch (type) {
      case Zoom3DType.Normal:
        return 'Normal';
      case Zoom3DType.XAxis:
        return 'Eje x';
      case Zoom3DType.YAxis:
        return 'Eje y';
      case Zoom3DType.ZAxis:
        return 'Eje z';
    }
  }
156
}