Added zoom controls for Graph 2D

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

 <div class="card">
-    <div class="card-block contenedor-canvas" >  
+    <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

 import { Component } from '@angular/core';
-import { GHCIService } from '../../../shared/services/ghci.service'; 
-import  functionPlot from 'function-plot';
- 
+import { GHCIService } from '../../../shared/services/ghci.service';
+import functionPlot from 'function-plot';
+
 @Component({
     moduleId: module.id,
     selector: 'graph2D-component',
     templateUrl: './graph2D.component.html',
     host: {
-        
+
     }
 })
 export class Graph2DComponent {
+
+    private instance: {};
+
     public constructor(private ghciService: GHCIService) {
         ghciService.messages.subscribe(
-            canvas=>{
-                
-                if (canvas.tipo == 'graph'){
+            canvas => {
+
+                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+"}";
-                    
+                    var d = conjs + "}";
+
                     var obj = JSON.parse(d);
                     //Para las funciones 
-                    if (obj.conj.sets.fdom == "function(x)"){
+                    if (obj.conj.sets.fdom == "function(x)") {
                         var nom = jsonCanvas.funs[0].dom;
-                        var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets,nom);
-                        obj.conj.sets.fdom = function (x) { return eval(elemento)} 
+                        var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
+                        obj.conj.sets.fdom = function (x) { return eval(elemento) }
                     }
-                    if (obj.conj.sets.fcod == "function(x)"){
+                    if (obj.conj.sets.fcod == "function(x)") {
                         var nom = jsonCanvas.funs[0].cod;
-                        var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets,nom);
-                        obj.conj.sets.fcod = function (x) { return (eval(elemento))}  
+                        var elemento = this.recursionfuncion(jsonCanvas.funs[0].sets, nom);
+                        obj.conj.sets.fcod = function (x) { return (eval(elemento)) }
                     }
                     //para Enumerados
-                    if(obj.conj.dom == 'Numer'){
+                    if (obj.conj.dom == 'Numer') {
                         var cantElementos = obj.conj.sets.fdom.length;
                         var j = 0;
-                        for (var fun of obj.conj.sets.fdom) {                     
+                        for (var fun of obj.conj.sets.fdom) {
                             //var newstr = nuevo2.replace(fun, j); 
                             j = j + 1;
                         }
 
                     }
-                    if(obj.conj.cod == 'Numer'){
+                    if (obj.conj.cod == 'Numer') {
                         var cantElementos = obj.conj.sets.fcod.length;
                         var j = 0;
-                        for (var fun of obj.conj.sets.fcod) {                     
+                        for (var fun of obj.conj.sets.fcod) {
                             //var newstr = nuevo2.replace(fun, j); 
                             j = j + 1;
                         }
 
                     }
 
-                    var colores = ['pink','red','blue','orange','green']
-                    var num = this.getRandomArbitrary(0,4);
+                    var colores = ['pink', 'red', 'blue', 'orange', 'green']
+                    var num = this.getRandomArbitrary(0, 4);
                     var color = colores[num];
 
-                     functionPlot({
-                         target: '#graph2D-container',
-                         width: 620,
-                         height: 450,
-                         conj:obj.conj,
-                         data: [{
-                             sampler: 'builtIn',
-                             fn: function(scope) {
-                               return fun(scope.x)
-                             },
-                             graphType: 'scatter',
-                             color: color
-                         }]
-                       })
+                    this.instance = functionPlot({
+                        target: '#graph2D-container',
+                        width: 620,
+                        height: 700,
+                        conj: obj.conj,
+                        data: [{
+                            sampler: 'builtIn',
+                            fn: function (scope) {
+                                return fun(scope.x)
+                            },
+                            graphType: 'scatter',
+                            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=>{
-            
-        })
+            },
+            error => {
+
+            })
+    }
+
+    public zoomMenos = function () {
+        this.instance.zoomOut();
     }
 
+    public zoomMas = function () {
+        this.instance.zoomIn();
+    }
 
-    getRandomArbitrary= function (min, max) {
+    getRandomArbitrary = function (min, max) {
         return Math.round(Math.random() * (max - min) + min);
     }
-    generarFuncion = function(graph) {
-            var funcionString = '';
-            var grafica;
-            for (var fun of graph.funs) {
-                funcionString = 'var ' + fun.fun + ' = function(' + fun.args.join() + '){\n return ' + this.generarExpresion(fun.bdy) + '}\n' + funcionString;
-
-                if (fun.fun == graph.graph) {
-                    funcionString += 'return ' + fun.fun + '(' + fun.args.join() + ');\n'
-                    grafica = fun;
-                }
+
+    generarFuncion = function (graph) {
+        var funcionString = '';
+        var grafica;
+        for (var fun of graph.funs) {
+            funcionString = 'var ' + fun.fun + ' = function(' + fun.args.join() + '){\n return ' + this.generarExpresion(fun.bdy) + '}\n' + funcionString;
+
+            if (fun.fun == graph.graph) {
+                funcionString += 'return ' + fun.fun + '(' + fun.args.join() + ');\n'
+                grafica = fun;
             }
-            funcionString = '(' + grafica.args.join() + ',delta,hayPunto)=>{\n' + funcionString + '}';
-            
-            return funcionString;
         }
+        funcionString = '(' + grafica.args.join() + ',delta,hayPunto)=>{\n' + funcionString + '}';
+
+        return funcionString;
+    }
 
-    generarExpresion = function(exp) {
+    generarExpresion = function (exp) {
         var expresion = '';
         if (exp.kind == 'cnd') {
-        expresion = ' (' + this.generarExpresion(exp.cond) + '?' + this.generarExpresion(exp.exp1) + ':' + this.generarExpresion(exp.exp2) + ') ';
+            expresion = ' (' + this.generarExpresion(exp.cond) + '?' + this.generarExpresion(exp.exp1) + ':' + this.generarExpresion(exp.exp2) + ') ';
         } else if (exp.kind == 'bop') {
-        if (exp.op == '==') {
-            expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && hayPunto() ';
-        } else if (exp.op == '/=') {
-            expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) > delta ||  Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && !hayPunto()  ';
-        } else if (exp.op == '^') {
-            expresion = ' Math.pow(' + this.generarExpresion(exp.exp1) + ',' + this.generarExpresion(exp.exp2) + ') ';
-        } else {
-            expresion = ' (' + this.generarExpresion(exp.exp1) + ')' + exp.op + '(' + this.generarExpresion(exp.exp2) + ') ';
-        }
+            if (exp.op == '==') {
+                expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && hayPunto() ';
+            } else if (exp.op == '/=') {
+                expresion = ' Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) > delta ||  Math.abs((' + this.generarExpresion(exp.exp1) + ') - (' + this.generarExpresion(exp.exp2) + ')) < delta && !hayPunto()  ';
+            } else if (exp.op == '^') {
+                expresion = ' Math.pow(' + this.generarExpresion(exp.exp1) + ',' + this.generarExpresion(exp.exp2) + ') ';
+            } else {
+                expresion = ' (' + this.generarExpresion(exp.exp1) + ')' + exp.op + '(' + this.generarExpresion(exp.exp2) + ') ';
+            }
         } else if (exp.kind == 'uop') {
-        expresion = ' ' + exp.op + ' ' + this.generarExpresion(exp.exp) + ' ';
+            expresion = ' ' + exp.op + ' ' + this.generarExpresion(exp.exp) + ' ';
         } else if (exp.kind == 'app') {
-        if (exp.fun == 'cos') {
-            exp.fun = 'Math.cos'
-        } else if (exp.fun == 'sen') {
-            exp.fun = 'Math.sin'
-        } else if (exp.fun == 'red') {
-            exp.fun = 'Math.round'
-        }
-        expresion = ' ' + exp.fun + '(' + exp.args.map(e => this.generarExpresion(e)).join() + ') ';
+            if (exp.fun == 'cos') {
+                exp.fun = 'Math.cos'
+            } else if (exp.fun == 'sen') {
+                exp.fun = 'Math.sin'
+            } else if (exp.fun == 'red') {
+                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() + ') ';
+            expresion = ' (' + exp.exps.map(e => this.generarExpresion(e)).join() + ') ';
         } else if (exp.kind == 'lit') {
-        expresion = ' ' + exp.val + ' ';
+            expresion = ' ' + exp.val + ' ';
         } else if (exp.kind == 'var') {
-        expresion = ' ' + exp.var+' ';
+            expresion = ' ' + exp.var + ' ';
         } else {
-        expresion = ' undefined ';
+            expresion = ' undefined ';
         }
-    
+
         return expresion;
     }
-    
-     //Nuevo 20-07-2018
 
+    //Nuevo 20-07-2018
 
-     obtenerConjunto= function(grf){
+
+    obtenerConjunto = function (grf) {
 
         var setf = '\"sets\": {';
-        var dominio = '{\"conj\": {'; 
-        if (grf.dom == 'R'){
+        var dominio = '{\"conj\": {';
+        if (grf.dom == 'R') {
             dominio += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"R\"";
             setf += "\"fdom\": \"R\",";
-        }else if(grf.dom == 'Z'){
+        } else if (grf.dom == 'Z') {
             dominio += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Z\"";
             setf += "\"fdom\": \"Z\",";
-        }else if(grf.dom == 'N'){
+        } else if (grf.dom == 'N') {
             dominio += "\"radio\":2, \"baseDom\": \"N\", \"dom\": \"N\"";
             setf += "\"fdom\": \"N\",";
-        }else{
+        } else {
             var nom = grf.dom;
-            if (Array.isArray(grf.sets[0][nom])){
+            if (Array.isArray(grf.sets[0][nom])) {
                 var arreglo = grf.sets[0][nom];
                 var arreglo2 = [];
-                for (var item of arreglo){
-                    arreglo2.push("\""+item+"\"");
+                for (var item of arreglo) {
+                    arreglo2.push("\"" + item + "\"");
                 }
                 dominio += "\"radio\":2, \"baseDom\": \"N\", \"dom\": \"Numer\"";
                 setf += "\"fdom\": [" + arreglo2 + "], ";
-            }else{
-                
-                dominio += this.recursivoDom(grf.sets,nom);
+            } else {
+
+                dominio += this.recursivoDom(grf.sets, nom);
                 setf += "\"fdom\":\"function(x)\",";
-            }     
+            }
         }
-        dominio += ", "; 
-        if (grf.cod == 'R'){
+        dominio += ", ";
+        if (grf.cod == 'R') {
             dominio += "\"baseCod\": \"R\", \"cod\": \"R\" ,";
             setf += "\"fcod\": \"R\"";
-        }else if(grf.cod == 'Z'){
+        } else if (grf.cod == 'Z') {
             dominio += "\"baseCod\": \"Z\", \"cod\": \"Z\" ,";
             setf += "\"fcod\": \"Z\"";
-        }else if(grf.cod == 'N'){
+        } else if (grf.cod == 'N') {
             dominio += "\"baseCod\": \"N\", \"cod\": \"N\" ,";
             setf += "\"fcod\": \"N\"";
-        }else{
+        } else {
             var nom = grf.cod;
-            if (Array.isArray(grf.sets[0][nom])){
+            if (Array.isArray(grf.sets[0][nom])) {
                 var arreglo = grf.sets[0][nom];
                 var arreglo2 = [];
-                for (var item of arreglo){
-                    arreglo2.push("\""+item+"\"");
+                for (var item of arreglo) {
+                    arreglo2.push("\"" + item + "\"");
                 }
                 dominio += "\"baseCod\": \"N\", \"cod\": \"Numer\" ,";
-                setf += '\"fcod\":[' + arreglo2+']';
-            }else{
-                dominio += this.recursivoCod(grf.sets,nom);
+                setf += '\"fcod\":[' + arreglo2 + ']';
+            } else {
+                dominio += this.recursivoCod(grf.sets, nom);
                 setf += "\"fcod\": \"function(x)\"";
-            }     
+            }
         }
         return dominio + setf + "}}";
     }
 
-    recursionfuncion = function(func,nombre){
+    recursionfuncion = function (func, nombre) {
         var fun = func[0][nombre].set;
         var resul = "";
-        if (fun == 'R' || fun == 'Z' || fun == 'N'){
-             resul += this.generarF(func[0][nombre].cond);
-        }else {
-             resul += this.generarF(func[0][nombre].cond) + " && " + this.recursionfuncion(func,fun);
-             
+        if (fun == 'R' || fun == 'Z' || fun == 'N') {
+            resul += this.generarF(func[0][nombre].cond);
+        } else {
+            resul += this.generarF(func[0][nombre].cond) + " && " + this.recursionfuncion(func, fun);
+
         }
         return resul;
     }
 
-    recursivoDom = function (sets,nom){
+    recursivoDom = function (sets, nom) {
         var domin = "";
-        if (sets[0][nom].set == 'R'){
+        if (sets[0][nom].set == 'R') {
             domin += "\"radio\": 0.3, \"baseDom\": \"R\", \"dom\": \"Func\"";
-        }else if(sets[0][nom].set == 'Z'){
+        } else if (sets[0][nom].set == 'Z') {
             domin += "\"radio\": 2, \"baseDom\": \"Z\", \"dom\": \"Func\"";
-        }else if(sets[0][nom].set == 'N'){
+        } else if (sets[0][nom].set == 'N') {
             domin += "\"radio\": 2, \"baseDom\": \"N\", \"dom\": \"Func\"";
-        }else{
+        } else {
             var nombre = sets[0][nom].set;
-            domin = this.recursivoDom(sets,nombre);
+            domin = this.recursivoDom(sets, nombre);
         }
         return domin;
     }
 
- 
-    recursivoCod = function (sets,nom){
+
+    recursivoCod = function (sets, nom) {
         var coodo = "";
-        if (sets[0][nom].set == 'R'){
+        if (sets[0][nom].set == 'R') {
             coodo += "\"baseCod\": \"R\", \"cod\": \"Func\",";
-        }else if(sets[0][nom].set == 'Z'){
+        } else if (sets[0][nom].set == 'Z') {
             coodo += "\"baseCod\": \"Z\", \"cod\": \"Func\",";
-        }else if(sets[0][nom].set == 'N'){
+        } else if (sets[0][nom].set == 'N') {
             coodo += "\"baseCod\": \"N\", \"cod\": \"Func\",";
-        }else{
+        } else {
             var nombre = sets[0][nom].set;
-            coodo += this.recursivoDom(sets,nombre);
+            coodo += this.recursivoDom(sets, nombre);
         }
         return coodo;
     }
-    
-    generarF = function(exp) {
+
+    generarF = function (exp) {
         var expresion = '';
         if (exp.kind == 'cond') {
-           expresion = ' (' + this.generarF(exp.cond) + '?' + this.generarF(exp.exp1) + ':' + this.generarF(exp.exp2) + ') ';
+            expresion = ' (' + this.generarF(exp.cond) + '?' + this.generarF(exp.exp1) + ':' + this.generarF(exp.exp2) + ') ';
         } else if (exp.kind == 'bop') {
             if (exp.op == '==') {
                 expresion = ' Math.abs((' + this.generarF(exp.exp1) + ') - (' + this.generarF(exp.exp2) + ')) == 0 ';
@@ -272,15 +313,15 @@ export class Graph2DComponent {
         } else if (exp.kind == 'lit') {
             expresion = ' ' + exp.val + ' ';
         } else if (exp.kind == 'var') {
-            expresion = ' ' + exp.var+' ';
+            expresion = ' ' + exp.var + ' ';
         } else {
-           expresion = ' undefined ';
+            expresion = ' undefined ';
         }
-    
+
         return expresion;
     }
 
-    generarFun = function(graph) {
+    generarFun = function (graph) {
         var funcionString = '';
         var grafica;
         for (var fun of graph.funs) {
@@ -291,10 +332,10 @@ export class Graph2DComponent {
                 grafica = fun;
             }
         }
-        funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';            
+        funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';
 
         return funcionString;
     }
-  
+
 }