graph3D.component.ts 5.11 KB
Newer Older
jose.ignacio.fagian's avatar
jose.ignacio.fagian committed
1
import { Component, OnInit, ViewChild, ElementRef, NgZone, AfterViewInit } from '@angular/core';
2
import * as graph3DLib from 'graph3D';
3
import { GHCIService } from '../../../shared/services/ghci.service';
4
import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps, debounce } from './graph3D.helper';
5
6
import { TranslateService } from '@ngx-translate/core';
import { TitleCasePipe } from '../../../shared/pipes/titlecase.pipe';
7
8
9
10
11
12
13
14
15

@Component({
  selector: 'graph3d-component',
  templateUrl: './graph3D.component.html',
  styleUrls: ['./graph3D.component.scss'],
  host: {
    '(window:resize)': 'onResize($event)'
  }
})
jose.ignacio.fagian's avatar
jose.ignacio.fagian committed
16
export class Graph3DComponent implements AfterViewInit {
17
18
19

  private ghciServiceSub: any;

20
21
22
  private translateService: any;
  private titlecasePipe: any;

23
24
25
  @ViewChild('graph3DElement') 
  private graph3DRef: ElementRef;

26
  graphProps : GraphProps = Default_GraphProps;
27
  
28
  animationProps : AnimationProps = {
29
30
31
32
33
    visible: false,
    playing: false,
    value: 0,
    speed: 1000
  };
34
  
35
  constructor(ghciService: GHCIService, private zone: NgZone, public translate: TranslateService) {
36
37
    const self = this;

38
39
40
41
    // i18n
    this.translateService = translate;
    this.titlecasePipe = new TitleCasePipe();

42
43
44
45
    this.ghciServiceSub = ghciService.messages.subscribe(
      message => {
        if (message.tipo == "canvas3D") {
          const figures = JSON.parse(formatJSON(message.resultado));
46
          self.clear();
47
48
49
50
51
          graph3DLib.drawFigures(figures);
        } 
        else if (message.tipo == "animacion3D") {
          const frames = message.resultado.map((frame) => JSON.parse(formatJSON(frame)));

52
53
          self.clear();

54
55
56
          this.animationProps.visible = true;
          this.animationProps.playing = true;
          this.animationProps.value = 0;
57
58

          graph3DLib.initializeAnimation(frames, 
59
            (value) => this.animationProps.value = value
60
61
62
63
64
65
66
67
          );

          graph3DLib.playAnimation();
        }
      }
    )
  }

68
  ngAfterViewInit() {
69
70
    //this.zone.runOutsideAngular(() => {
      graph3DLib.initialize(this.graph3DRef.nativeElement);
71
    //})
72
73
74
75
76
77
78
79
  }

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

80
81
82
83
84
  onActivate() {
    setTimeout(() => {
      this.onResize(null);
    })
  }
85

86
  onResize(event){
87
88
89
90
91
    const {width, height} = this.graph3DRef.nativeElement.getBoundingClientRect();
      
    if (width > 0 && height > 0) {
      graph3DLib.changeSize({width, height});
    }
92
93
94
  }

  onAnimationChangeSpeed = (value) => {
95
    this.animationProps.speed = parseInt(value);
96
97
98
99
    graph3DLib.changeSpeedAnimation(parseInt(value));
  }

  onAnimationTogglePlay = () => {
100
    if (this.animationProps.playing) {
101
102
103
104
105
106
      graph3DLib.pauseAnimation();
    }
    else {
      graph3DLib.playAnimation();
    }
    
107
    this.animationProps.playing = !this.animationProps.playing;
108
  }
109
110
111

  public changeZoomType = (type: Zoom3DType = null) => {
    if (type != null) {
112
      this.graphProps.zoomType = type;
113
114
    } 
    else {
115
      this.graphProps.zoomType = (this.graphProps.zoomType % 4) + 1;
116
117
    }

118
119
120
121
122
123
124
125
    graph3DLib.changeZoomType(this.graphProps.zoomType);
  }

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

126
127
128
129
130
131
  handleAxesRangeDebounced = debounce(function () {
    setTimeout(() =>
      graph3DLib.changeAxesSize(this.graphProps.range)
    );
  }, 500);
  
132
133
134
135
136
137
  public onChangeAxesSize = (v, event) => {
    let value = this.graphProps.range[v];

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

138
139
140
141
142
    if (value == null) {
      value = v.search('Min') ? min : max;
      this.graphProps.range[v] = value;
    }

143
144
145
146
147
148
149
    if (value < min) {
      this.graphProps.range[v] = min;
    } 
    
    if (value > max) {
      this.graphProps.range[v] = max;
    }
150
151
152
153
154
155
    this.handleAxesRangeDebounced();
    //graph3DLib.changeAxesSize(this.graphProps.range)
  }

  public onChangeQuality = () => {
    const value = this.graphProps.quality;
156

157
158
159
160
161
162
163
164
    if (value == null || value <= 1) {
      this.graphProps.quality = 30;
    } 
    else {
      this.graphProps.quality = value;
    }

    graph3DLib.changeOptions({quality: value});
165
166
167
168
169
170
171
172
173
174
  }

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

  public zoomOut = () => {
    graph3DLib.changeZoom(false);
  }
  
175
176
177
178
179
180
181
182
183
184
185
186
  public clear = () => {
    this.animationProps.visible = false;

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

    graph3DLib.reset();
  }

187
188
189
  public getZoom3DTypeName = (type: Zoom3DType) => {
    switch (type) {
      case Zoom3DType.Normal:
190
        return this.titlecasePipe.transform(this.translateService.get('i18n.object.normal').value);
191
      case Zoom3DType.XAxis:
192
        return this.titlecasePipe.transform(this.translateService.get('i18n.object.axis').value) + ' x';
193
      case Zoom3DType.YAxis:
194
        return this.titlecasePipe.transform(this.translateService.get('i18n.object.axis').value) + ' y';
195
      case Zoom3DType.ZAxis:
196
        return this.titlecasePipe.transform(this.translateService.get('i18n.object.axis').value) + ' z';
197
198
    }
  }
199
}