graph2D.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GHCIService } from '../../../shared/services/ghci.service';
import * as functionPlot from 'function-plot';
import { MateFunGraph2D } from './graph2D.util';
import { Animation, Setting, toJSON, triggerDownload } from './graph2D.helper';
import { TranslateService } from '@ngx-translate/core';



@Component({
    moduleId: module.id,
    selector: 'graph2D-component',
    templateUrl: './graph2D.component.html',
    styleUrls: ['./graph2D.component.scss'],
    host: {
        '(window:resize)': 'onResize($event)'
    }
})
export class Graph2DComponent {

    private target:string = '#graph2D-container';
    public mateFunGraph2D:MateFunGraph2D;
    // Ghci Service
    private ghciServiceSub: any;
    // Chart Container - DOM Element
    @ViewChild('graph2DContainer')
    private graph2DRef: ElementRef;

    public constructor(private ghciService: GHCIService, public translate: TranslateService) {
        this.mateFunGraph2D = new MateFunGraph2D(this.target, this.getBounding());
        this.ghciServiceSub = ghciService.messages.subscribe(
            this.mateFunGraph2D.render,
            error => {}
        )
    }

    public setZoom = () => {
        this.mateFunGraph2D.setZoom();  
    }

    public multiGraf = () => { 
        this.mateFunGraph2D.multiGraf();
    }

    /**
     * Angular lifecycle hook.
     * called after Angular has fully initialized a component's view.
     */
    ngAfterViewInit() {
        this.mateFunGraph2D.setBounding(this.getBounding());
        this.mateFunGraph2D.renderClean();
    }

    /**
     * Angular lifecycle hook.
     * called when a directive, pipe, or service is destroyed.
     */
    ngOnDestroy() {
        if (this.ghciServiceSub) {
          this.ghciServiceSub.unsubscribe();
        }
    }

    /**
     * On Resize Event.
     */
    onResize(event){
        this.mateFunGraph2D.setBounding(this.getBounding());
    }

    /**
     * @name getBounding
     * @desc get the measures of the container of the graph
     */
    private getBounding = function() {
        var {width, height} = this.graph2DRef.nativeElement.getBoundingClientRect();
        if (width === 0) {
            width = document.getElementById('graph2D-container').querySelector('svg').width.baseVal.value;
            height = document.getElementById('graph2D-container').querySelector('svg').height.baseVal.value;
        }
        return { width, height }
    }

    /**
     * @name runAnimation
     * @desc Run Shapes Animation
     */
    public runAnimation = function() {
        this.mateFunGraph2D.runAnimation();
    }

    /**
     * @name pauseAnimation
     * @desc Pause Shapes Animation
     */
    public pauseAnimation = function() {
        this.mateFunGraph2D.pauseAnimation();
    }

    /**
     * @name decreaseSpeed
     * @desc Decrease Speed Animation
     */
    public decreaseSpeed = function() {
        this.mateFunGraph2D.decreaseSpeed();
    }
    
    /**
     * @name restoreSpeed
     * @desc Increase Speed Animation
     */
    public restoreSpeed = function() {
      this.mateFunGraph2D.restoreSpeed();
    }

    /**
     * @name increaseSpeed
     * @desc Increase Speed Animation
     */
    public increaseSpeed = function() {
        this.mateFunGraph2D.increaseSpeed();
    }


    /**
     * @name toggleGrid
     * @desc Show and Hide Grid
     */
    public toggleGrid = function () {
        this.mateFunGraph2D.toggleGrid()
    }

    /**
     * @name toggleAxis
     * @desc Show and Hide Axis
     */
    public toggleAxis = function () {
        this.mateFunGraph2D.toggleAxis();
    }

    /**
     * @name toggleTip
     * @desc Show and Hide Tip
     */
    public toggleTip = function () {
        this.mateFunGraph2D.toggleTip();
    }

    /**
     * @name zoomOut
     * @desc Zoom Out Button Control
     */
    public zoomOut = function () {
        this.mateFunGraph2D.zoomOut();
    }

    /**
     * @name zoomIn
     * @desc Zoom In Button Control 
     */
    public zoomIn = function () {
        this.mateFunGraph2D.zoomIn();
    }

    /**
     * @name recenterPlot
     * @desc center the plot and it returns to the initial state.
     */
    public recenterPlot = function () {
        this.mateFunGraph2D.recenter();
    }

    /**
     * @name cleanPlot
     * @desc remove all the graph from the instance.
     */
    public cleanPlot = function () {
        this.mateFunGraph2D.cleanPlot();
    }

    /**
     * @name exportPlot
     * @desc Download Plot as an SVG image.
     */
    public exportPlot = function() {
       this.mateFunGraph2D.exportPlot();
    }
}