graph3D.component.ts

import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import * as graph3DLib from 'graph3D';
import { GHCIService } from '../../../shared/services/ghci.service';
import { formatJSON, AnimationProps, Zoom3DType, GraphProps, Default_GraphProps, debounce } from './graph3D.helper';

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

  private ghciServiceSub: any;

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

  private graphProps : GraphProps = Default_GraphProps;
  
  private animationProps : AnimationProps = {
    visible: false,
    playing: false,
    value: 0,
    speed: 1000
  };
  
  constructor(ghciService: GHCIService, private zone: NgZone) {
    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)));

          this.animationProps.visible = true;
          this.animationProps.playing = true;
          this.animationProps.value = 0;

          graph3DLib.clear();
          graph3DLib.initializeAnimation(frames, 
            (value) => this.animationProps.value = value
          );

          graph3DLib.playAnimation();
        }
      }
    )
  }

  ngAfterViewInit() {
  //  this.zone.runOutsideAngular(() => {
      graph3DLib.initialize(this.graph3DRef.nativeElement);
    //})
  }

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

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