Skip to content

GitLab

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

Added export and center graph functionalities for graph2D Component

parent 8943edee
Hide whitespace changes
Inline Side-by-side
Frontend Angular 4/package-lock.json
View file @ 975e919d
......@@ -4139,7 +4139,7 @@
"dev": true
},
"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",
"requires": {
"array-range": "^1.0.1",
......
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html
View file @ 975e919d
......@@ -2,7 +2,12 @@
<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: 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)="pauseAnimation()" ><i class="fa fa-pause"></i></button>
......
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts
View file @ 975e919d
import { Component } from '@angular/core';
import { GHCIService } from '../../../shared/services/ghci.service';
import functionPlot from 'function-plot';
import { Animation } from './graph2D.helper';
import { Animation, toJSON, triggerDownload } from './graph2D.helper';
@Component({
moduleId: module.id,
......@@ -99,10 +99,9 @@ export class Graph2DComponent {
break;
}
case 'canvas': {
console.log('TIPO', canvas.tipo);
var shapesData = JSON.parse(canvas.resultado);
var shapesData = JSON.parse(toJSON(canvas.resultado));
var shapesDataNormalized = this.normalizeShapesData(shapesData);
this.instance = null;
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
......@@ -122,9 +121,7 @@ export class Graph2DComponent {
})
break;
}
case 'animacion': {
console.log('TIPO', canvas.tipo);
case 'animacion': {
if(!this.animation.init) {
this.animation.init = true;
var animationData = canvas.resultado.map(res => JSON.parse(res));
......@@ -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
* @desc update data for Function Plot and redraw the graph
......@@ -170,7 +203,6 @@ export class Graph2DComponent {
})
}
}
/**
* @name runAnimation
* @desc Run Shapes Animation
......@@ -209,6 +241,58 @@ export class Graph2DComponent {
public zoomIn = function () {
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
......@@ -275,10 +359,10 @@ export class Graph2DComponent {
return $textNormalized;
}
/**
* @name normalizeTextData
* @desc Normalize Text data for Function Plot Library
* @param {Object} textData Data of Text to be normalized
/**
* @name normalizeLineData
* @desc Normalize Line data for Function Plot Library
* @param {Object} lineData Data of Line to be normalized
* @returns {Object}
*/
// public normalizeLineData = function ($lineData) {
......@@ -296,10 +380,10 @@ export class Graph2DComponent {
// return $lineNormalized;
// }
/**
* @name normalizeTextData
* @desc Normalize Text data for Function Plot Library
* @param {Object} textData Data of Text to be normalized
/**
* @name normalizePolygonData
* @desc Normalize Polygon data for Function Plot Library
* @param {Object} textData Data of Polygon to be normalized
* @returns {Object}
*/
// public normalizePolygonData = function ($textData) {
......@@ -354,6 +438,8 @@ export class Graph2DComponent {
return normalized;
}
getRandomArbitrary = function (min, max) {
return Math.round(Math.random() * (max - min) + min);
}
......@@ -571,11 +657,7 @@ export class Graph2DComponent {
return funcionString;
}
ngOnDestroy() {
if (this.ghciServiceSub) {
this.ghciServiceSub.unsubscribe();
}
}
}
Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.helper.ts
View file @ 975e919d
......@@ -7,27 +7,27 @@ export interface Animation {
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 $points = data.pts;
// var $pointsJson = [];
// for (var p of $points) {
// $pointsJson.push([p[0],p[1]]);
// }
// var dataJson = data;
// dataJson.pts
// }
var a = document.createElement('a');
a.setAttribute('download', 'Matefun_2D_plot.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
// return jsonString
// .replace(
// regexRot, (match, x, y, z) => {
// 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
a.dispatchEvent(evt);
}
\ 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