Commit dc98f9e9 authored by Diego Rey's avatar Diego Rey
Browse files

Added zoom controls for Graph 2D

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