diff --git a/Frontend Angular 4/package-lock.json b/Frontend Angular 4/package-lock.json
index fa7df2292a02f88d87b3406f097c6c2c8ad939cb..318c9c901735825cbedcc822e8893d2e0402cf4c 100644
--- a/Frontend Angular 4/package-lock.json
+++ b/Frontend Angular 4/package-lock.json
@@ -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",
diff --git a/Frontend Angular 4/package.json b/Frontend Angular 4/package.json
index e9814d97a29a9be0a3a5ce9f7785cb519af3f3a0..1b2e5fc9f05ab1e3178bd2045d85538935ccff78 100755
--- a/Frontend Angular 4/package.json
+++ b/Frontend Angular 4/package.json
@@ -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",
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 705acb8a48baccaf4c1345e53f402639ee28ed2c..9260662b1763797bbee152458383712624878540 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,7 +1,7 @@
<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>
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 25025926daf54b26edcd8700fe07f3d916c55dd4..7d480007515d5ec4a2b3493c70968454954c5983 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
@@ -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);
}