Commit 9f27f1aa authored by Diego Rey's avatar Diego Rey
Browse files

Added Shapes handler for 2D component

parent 1408b11e
......@@ -3632,14 +3632,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -3654,20 +3652,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -3784,8 +3779,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -3797,7 +3791,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -3812,7 +3805,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -3820,14 +3812,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
......@@ -3846,7 +3836,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -3927,8 +3916,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -3940,7 +3928,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -4062,7 +4049,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -4153,7 +4139,7 @@
"dev": true
},
"function-plot": {
"version": "git+https://github.com/diego-rey/function-plot.git#9aeb9257649497939ba3c89cf69f1c338e91d436",
"version": "git+https://github.com/diego-rey/function-plot.git#e81bedcbbdfe8cdd7c356a1bca4664ad7db5a371",
"from": "git+https://github.com/diego-rey/function-plot.git#feature/integration-domain-shape",
"requires": {
"array-range": "^1.0.1",
......
......@@ -25,6 +25,7 @@
"d3": "^4.12.2",
"font-awesome": "^4.7.0",
"function-plot": "git+https://github.com/diego-rey/function-plot.git#feature/integration-domain-shape",
"graph3D": "git://github.com/ifagian/graph3D#master",
"ionicons": "^3.0.0",
"jq-console": "^2.13.2",
"jquery": "^3.2.1",
......@@ -34,8 +35,7 @@
"ng2-slider-component": "^1.0.9",
"rxjs": "^5.1.0",
"tippy.js": "^1.2.0",
"zone.js": "^0.8.4",
"graph3D": "git://github.com/ifagian/graph3D#master"
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.6",
......
<div class="card">
<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>
<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 -" data-placement="bottom" triggers="mouseenter:mouseleave" class="btn btn-sm btn-secondary" style="float:right; margin-right: 132px; margin-top: -55px" (click)=zoomOut() ><i class="fa fa-minus"></i></button>
<div id="graph2D-container" style="height: 100%; width: 100%;">
</div>
......
......@@ -114,6 +114,30 @@ export class Graph2DComponent {
// functionPlot.plugins.zoomBox()
// ]
// })
} else if (canvas.tipo == 'canvas') {
var shapesData = JSON.parse(canvas.resultado);
console.log('Shapes Data:', shapesData);
var shapesDataNormalized = this.normalizeShapesData(shapesData);
console.log('Shapes Normalized', shapesDataNormalized);
this.instance = functionPlot({
target: '#graph2D-container',
width: 800,
height: 700,
xAxis: {
label: 'x - axis',
scale: 'linear',
domain: {
initial: [-10, 10],
type: 'discrete'
}
},
data: shapesDataNormalized,
plugins: [
functionPlot.plugins.zoomBox()
]
})
}
},
error => {
......@@ -121,14 +145,116 @@ export class Graph2DComponent {
})
}
public zoomMenos = function () {
/**
* @name zoomOut
* @desc Zoom Out Button Control
*/
public zoomOut = function () {
this.instance.zoomOut();
}
public zoomMas = function () {
/**
* @name zoomIn
* @desc Zoom In Button Control
*/
public zoomIn = function () {
this.instance.zoomIn();
}
/**
* @name normalizeRectData
* @desc Normalize Rectangle data for Function Plot Library
* @param {Object} rectData Data of Rectangle to be normalized
* @returns {Object}
*/
public normalizeRectData = function ($rectData) {
var $rectNormalized:any = {};
var $shape:any = {};
$shape.w = $rectData.w;
$shape.h = $rectData.h;
$shape.x = $rectData.x;
$shape.y = $rectData.y;
$rectData.color && ($shape.fill = $rectData.color);
$rectData.rot !== 'undefined' && ($shape.rotation = $rectData.rot);
$rectNormalized.shape = $shape;
$rectNormalized.graphType = 'shape';
$rectNormalized.shapeType = 'rect';
return $rectNormalized;
}
/**
* @name normalizeCircleData
* @desc Normalize Circle data for Function Plot Library
* @param {Object} circleData Data of Circle to be normalized
* @returns {Object}
*/
public normalizeCircleData = function ($circleData) {
var $circleNormalized:any = {};
var $shape:any = {};
$shape.r = $circleData.r;
$shape.x = $circleData.x;
$shape.y = $circleData.y;
$circleData.color && ($shape.fill = $circleData.color);
$circleData.rot !== 'undefined' && ($shape.rotation = $circleData.rot);
$circleNormalized.shape = $shape;
$circleNormalized.graphType = 'shape';
$circleNormalized.shapeType = 'circle';
return $circleNormalized;
}
/**
* @name normalizeTextData
* @desc Normalize Text data for Function Plot Library
* @param {Object} textData Data of Text to be normalized
* @returns {Object}
*/
public normalizeTextData = function ($textData) {
var $textNormalized:any = {};
var $shape:any = {};
$shape.text = $textData.text;
$shape.size = $textData.size;
$shape.x = $textData.x;
$shape.y = $textData.y;
$textData.color && ($shape.fill = $textData.color);
$textData.rot !== 'undefined' && ($shape.rotation = $textData.rot);
$textNormalized.shape = $shape;
$textNormalized.graphType = 'shape';
$textNormalized.shapeType = 'text';
return $textNormalized;
}
/**
* @name normalizeShapesData
* @desc Normalize Shapes data for Function Plot Library
* @param {Array} shapesData Data of Shapes to be normalized
* @returns {Array}
*/
public normalizeShapesData = function (shapesData) {
var normalized:Array<Object> = [];
for (var shape of shapesData) {
switch(shape.kind) {
case 'rect': {
normalized.push(this.normalizeRectData(shape));
break;
}
case 'circle': {
normalized.push(this.normalizeCircleData(shape));
break;
}
case 'text': {
normalized.push(this.normalizeTextData(shape));
break;
}
}
}
return normalized;
}
getRandomArbitrary = function (min, max) {
return Math.round(Math.random() * (max - min) + min);
}
......
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