Commit 975e919d authored by Diego Rey's avatar Diego Rey
Browse files

Added export and center graph functionalities for graph2D Component

parent 8943edee
...@@ -4139,7 +4139,7 @@ ...@@ -4139,7 +4139,7 @@
"dev": true "dev": true
}, },
"function-plot": { "function-plot": {
"version": "git://github.com/diego-rey/function-plot.git#d8b7147168ab7a595f8323d28ffc944735117606", "version": "git://github.com/diego-rey/function-plot.git#1543ff3b723285e0119c53a9bd3d37ab7e671ca9",
"from": "git://github.com/diego-rey/function-plot.git#feature/integration-domain-shape", "from": "git://github.com/diego-rey/function-plot.git#feature/integration-domain-shape",
"requires": { "requires": {
"array-range": "^1.0.1", "array-range": "^1.0.1",
......
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<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)=zoomIn() ><i class="fa fa-plus"></i></button> <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)=zoomIn() ><i class="fa fa-plus"></i></button>
<button ngbPopover="Zoom -" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 132px; margin-top: -55px" (click)=zoomOut() ><i class="fa fa-minus"></i></button> <button ngbPopover="Zoom -" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 132px; margin-top: -55px" (click)=zoomOut() ><i class="fa fa-minus"></i></button>
<button ngbPopover="Centrar" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style=" float:right; margin-right: 99px; margin-top: -55px" (click)="recenterPlot()" ><i class="fa fa-arrows"></i></button>
<button ngbPopover="Borrar" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style=" float:right; margin-right: 66px; margin-top: -55px" (click)="cleanPlot()" ><i class="fa fa-trash"></i></button>
<button ngbPopover="Descargar PNG" triggers="mouseenter:mouseleave" data-placement="bottom" class="btn btn-sm btn-secondary" style="float:right; margin-right: 33px; margin-top: -55px" (click)=exportPlot() ><i class="fa fa-download"></i></button>
<a id="download-plot" class="download-plot" href="#" download="Plot.svg" style="display: none">Download Canvas</a>
<button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="!animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="runAnimation()" ><i class="fa fa-play"></i></button> <button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="!animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="runAnimation()" ><i class="fa fa-play"></i></button>
<button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="pauseAnimation()" ><i class="fa fa-pause"></i></button> <button class="btn btn-sm btn-secondary" data-placement="bottom" *ngIf="animation.playing && animation.data.length>0" style=" float:left; margin-top: -5px; margin-right: 5px" (click)="pauseAnimation()" ><i class="fa fa-pause"></i></button>
......
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';
import { Animation } from './graph2D.helper'; import { Animation, toJSON, triggerDownload } from './graph2D.helper';
@Component({ @Component({
moduleId: module.id, moduleId: module.id,
...@@ -99,10 +99,9 @@ export class Graph2DComponent { ...@@ -99,10 +99,9 @@ export class Graph2DComponent {
break; break;
} }
case 'canvas': { case 'canvas': {
console.log('TIPO', canvas.tipo); var shapesData = JSON.parse(toJSON(canvas.resultado));
var shapesData = JSON.parse(canvas.resultado);
var shapesDataNormalized = this.normalizeShapesData(shapesData); var shapesDataNormalized = this.normalizeShapesData(shapesData);
this.instance = null;
this.instance = functionPlot({ this.instance = functionPlot({
target: '#graph2D-container', target: '#graph2D-container',
width: 800, width: 800,
...@@ -122,9 +121,7 @@ export class Graph2DComponent { ...@@ -122,9 +121,7 @@ export class Graph2DComponent {
}) })
break; break;
} }
case 'animacion': { case 'animacion': {
console.log('TIPO', canvas.tipo);
if(!this.animation.init) { if(!this.animation.init) {
this.animation.init = true; this.animation.init = true;
var animationData = canvas.resultado.map(res => JSON.parse(res)); var animationData = canvas.resultado.map(res => JSON.parse(res));
...@@ -142,6 +139,42 @@ export class Graph2DComponent { ...@@ -142,6 +139,42 @@ export class Graph2DComponent {
) )
} }
/**
* Angular lifecycle hook.
* called after Angular has fully initialized a component's view.
*/
ngAfterViewInit() {
if (!this.instance) {
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
xAxis: {
label: 'x - axis',
scale: 'linear',
domain: {
initial: [-10, 10],
type: 'discrete'
}
},
data: [],
plugins: [
functionPlot.plugins.zoomBox()
]
})
}
}
/**
* Angular lifecycle hook.
* called when a directive, pipe, or service is destroyed.
*/
ngOnDestroy() {
if (this.ghciServiceSub) {
this.ghciServiceSub.unsubscribe();
}
}
/** /**
* @name updateFrame * @name updateFrame
* @desc update data for Function Plot and redraw the graph * @desc update data for Function Plot and redraw the graph
...@@ -170,7 +203,6 @@ export class Graph2DComponent { ...@@ -170,7 +203,6 @@ export class Graph2DComponent {
}) })
} }
} }
/** /**
* @name runAnimation * @name runAnimation
* @desc Run Shapes Animation * @desc Run Shapes Animation
...@@ -209,6 +241,58 @@ export class Graph2DComponent { ...@@ -209,6 +241,58 @@ export class Graph2DComponent {
public zoomIn = function () { public zoomIn = function () {
this.instance.zoomIn(); this.instance.zoomIn();
} }
/**
* @name recenterPlot
* @desc center the plot and it returns to the initial state.
*/
public recenterPlot = function () {
this.instance.recenter();
}
/**
* @name cleanPlot
* @desc remove all the graph from the instance.
*/
public cleanPlot = function () {
}
/**
* @name exportPlot
* @desc Download Plot as an SVG image.
*/
public exportPlot = function() {
// Objects
var svg = document.querySelector('svg');
var canvas = document.createElement("canvas");
// Set dimensions of the image
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;
// Convert SVG DOM structure to xml
var ctx = canvas.getContext('2d');
var data = new XMLSerializer().serializeToString(svg);
// URL Object used to parse, construct, normalise, and encode URLs.
var DOMURL = window.URL || (<any>window).webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
}
/** /**
* @name normalizeRectData * @name normalizeRectData
...@@ -275,10 +359,10 @@ export class Graph2DComponent { ...@@ -275,10 +359,10 @@ export class Graph2DComponent {
return $textNormalized; return $textNormalized;
} }
/** /**
* @name normalizeTextData * @name normalizeLineData
* @desc Normalize Text data for Function Plot Library * @desc Normalize Line data for Function Plot Library
* @param {Object} textData Data of Text to be normalized * @param {Object} lineData Data of Line to be normalized
* @returns {Object} * @returns {Object}
*/ */
// public normalizeLineData = function ($lineData) { // public normalizeLineData = function ($lineData) {
...@@ -296,10 +380,10 @@ export class Graph2DComponent { ...@@ -296,10 +380,10 @@ export class Graph2DComponent {
// return $lineNormalized; // return $lineNormalized;
// } // }
/** /**
* @name normalizeTextData * @name normalizePolygonData
* @desc Normalize Text data for Function Plot Library * @desc Normalize Polygon data for Function Plot Library
* @param {Object} textData Data of Text to be normalized * @param {Object} textData Data of Polygon to be normalized
* @returns {Object} * @returns {Object}
*/ */
// public normalizePolygonData = function ($textData) { // public normalizePolygonData = function ($textData) {
...@@ -354,6 +438,8 @@ export class Graph2DComponent { ...@@ -354,6 +438,8 @@ export class Graph2DComponent {
return normalized; return normalized;
} }
getRandomArbitrary = function (min, max) { getRandomArbitrary = function (min, max) {
return Math.round(Math.random() * (max - min) + min); return Math.round(Math.random() * (max - min) + min);
} }
...@@ -571,11 +657,7 @@ export class Graph2DComponent { ...@@ -571,11 +657,7 @@ export class Graph2DComponent {
return funcionString; return funcionString;
} }
ngOnDestroy() {
if (this.ghciServiceSub) {
this.ghciServiceSub.unsubscribe();
}
}
} }
...@@ -7,27 +7,27 @@ export interface Animation { ...@@ -7,27 +7,27 @@ export interface Animation {
init: boolean init: boolean
} }
export function toJSON(data: string) : string {
console.log('data',data);
const regexPts = /(?:\"pts\"\:\[(?:\((x),(y)\))+,?\])/g;
var dataJSON = data.replace(regexPts, (match, x, y) => {
return `"points": [[${x},${y}]]`
})
console.log('dataJSON', dataJSON);
return dataJSON;
}
export function triggerDownload(imgURI: string) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
// export function toJSON(data: any) : string { var a = document.createElement('a');
// var $points = data.pts; a.setAttribute('download', 'Matefun_2D_plot.png');
// var $pointsJson = []; a.setAttribute('href', imgURI);
// for (var p of $points) { a.setAttribute('target', '_blank');
// $pointsJson.push([p[0],p[1]]);
// }
// var dataJson = data;
// dataJson.pts
// }
// return jsonString a.dispatchEvent(evt);
// .replace( }
// regexRot, (match, x, y, z) => { \ No newline at end of file
// return `"rot": { "x": ${x}, "y": ${y}, "z": ${z} }`
// }
// )
// .replace(
// regexPts, (match, x1, y1, z1, x2, y2, z2) => {
// return `"pts": [{ "x": ${x1}, "y": ${y1}, "z": ${z1} },{ "x": ${x2}, "y": ${y2}, "z": ${z2} }]`
// }
// )
// }
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment