diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
index fc9a2b5b3800faa7479227368e0a653fade8496e..705acb8a48baccaf4c1345e53f402639ee28ed2c 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
+++ b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
@@ -1,5 +1,8 @@
<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>
diff --git a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
index 57118bf4f06255b79f257e381a0df067b1b06326..25025926daf54b26edcd8700fe07f3d916c55dd4 100755
--- a/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
+++ b/Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
@@ -1,63 +1,64 @@
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];
var tipoGraf;
@@ -66,192 +67,235 @@ export class Graph2DComponent {
}else{
tipoGraf = 'polyline';
}
- functionPlot({
- target: '#graph2D-container',
- width: 620,
- height: 450,
- conj:obj.conj,
- data: [{
- sampler: 'builtIn',
- fn: function(scope) {
- return fun(scope.x)
- },
- graphType: tipoGraf,
- color: color
- }]
- })
+ this.instance = functionPlot({
+ target: '#graph2D-container',
+ width: 620,
+ height: 450,
+ conj:obj.conj,
+ data: [{
+ sampler: 'builtIn',
+ fn: function(scope) {
+ return fun(scope.x)
+ },
+ 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=>{
-
- })
+ },
+ 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 == 'sin') {
- exp.fun = 'Math.sin'
- } else if (exp.fun == 'round') {
- 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 == 'sin') {
+ exp.fun = 'Math.sin'
+ } else if (exp.fun == 'round') {
+ 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 ';
@@ -278,15 +322,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) {
@@ -297,10 +341,10 @@ export class Graph2DComponent {
grafica = fun;
}
}
- funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';
+ funcionString = '(' + grafica.args.join() + ')=>{\n' + funcionString + '}';
return funcionString;
}
-
+
}