Merge branch 'feature/integration-graph-2d-3d' of...

Merge branch 'feature/integration-graph-2d-3d' of https://gitlab.fing.edu.uy/matefun/Frontend into feature/integration-graph-2d-3d

# Conflicts:
#	Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html

 <div class="card">
     <div class="card-block contenedor-canvas" >
+        <button ngbPopover="Zoom +"  triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 165px; margin-top: -55px" (click)=zoomMas() ><i class="fa fa-plus"></i></button>
+        <button ngbPopover="Zoom -"  data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary" style="float:right; margin-right: 132px; margin-top: -55px" (click)=zoomMenos() ><i class="fa fa-minus"></i></button>
+              
         <div id="graph2D-container" style="height: 100%; width: 100%;">
         </div>
     </div>

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts

@@ -11,6 +11,9 @@ import  functionPlot from 'function-plot';
     }
 })
 export class Graph2DComponent {
+
+    private instance: {};
+
     public constructor(private ghciService: GHCIService) {
         ghciService.messages.subscribe(
             canvas => {
@@ -18,8 +21,6 @@ export class Graph2DComponent {
                 if (canvas.tipo == 'graph') {
                     var jsonCanvas = JSON.parse(canvas.resultado);
                     let fun = eval(this.generarFuncion(jsonCanvas));
-                    
-
                     var conjs = this.obtenerConjunto(jsonCanvas.funs[0]);
 
                     var d = conjs + "}";
@@ -66,7 +67,7 @@ export class Graph2DComponent {
                     }else{
                         tipoGraf = 'polyline';
                     }
-                     functionPlot({
+                    this.instance = functionPlot({
 						target: '#graph2D-container',
 						width: 620,
 						height: 450,
@@ -78,8 +79,41 @@ export class Graph2DComponent {
 							},
 							graphType: tipoGraf,
 							color: color
-                         }]
+						}],
+						plugins: [
+							functionPlot.plugins.zoomBox()
+						]
 					})
+
+                    // EXAMPLE - SHAPE
+                    // this.instance = functionPlot({
+                    //     target: '#graph2D-container',
+                    //     width: 700,
+                    //     height: 700,
+                    //     xAxis: {
+                    //       label: 'x - axis',
+                    //       scale: 'linear',
+                    //       domain: {
+                    //         initial: [-10, 10],
+                    //         type: 'discrete'
+                    //       }
+                    //     },
+                    //     data: [{
+                    //       shape: {
+                    //         w : 6.0,
+                    //         h : 3.0,
+                    //         x : 0,
+                    //         y : 0,
+                    //         color :"red",
+                    //         rotation : 0.125
+                    //       },
+                    //       graphType: 'shape',
+                    //       shapeType: 'rect'
+                    //     }],
+                    //     plugins: [
+                    //         functionPlot.plugins.zoomBox()
+                    //     ]
+                    // })
                 }
             },
             error => {
@@ -87,10 +121,18 @@ export class Graph2DComponent {
             })
     }
 
+    public zoomMenos = function () {
+        this.instance.zoomOut();
+    }
+
+    public zoomMas = function () {
+        this.instance.zoomIn();
+    }
 
     getRandomArbitrary = function (min, max) {
         return Math.round(Math.random() * (max - min) + min);
     }
+
     generarFuncion = function (graph) {
         var funcionString = '';
         var grafica;
@@ -124,6 +166,7 @@ export class Graph2DComponent {
         } else if (exp.kind == 'uop') {
             expresion = ' ' + exp.op + ' ' + this.generarExpresion(exp.exp) + ' ';
         } else if (exp.kind == 'app') {
+			
 			if (exp.fun == 'cos') {
 				exp.fun = 'Math.cos'
 			} else if (exp.fun == 'sin') {
@@ -132,6 +175,7 @@ export class Graph2DComponent {
 				exp.fun = 'Math.round'
 			}
 			expresion = ' ' + exp.fun + '(' + exp.args.map(e => this.generarExpresion(e)).join() + ') ';
+
         } else if (exp.kind == 'tup') {
             expresion = ' (' + exp.exps.map(e => this.generarExpresion(e)).join() + ') ';
         } else if (exp.kind == 'lit') {