Merge branch 'feature/3DComponentInitialization' into feature/integration-graph-2d-3d

# Conflicts:
#	Frontend Angular 4/src/app/app.module.ts
#	Frontend Angular 4/src/app/shared/config.ts

Frontend Angular 4/src/app/app.module.ts

@@ -7,11 +7,11 @@ import { AppComponent } from './app.component';
 import { AuthGuard } from './shared/guards/auth.guard';
 import { SessionService } from './shared/services/session.service';
 import { NotificacionService } from './shared/services/notificacion.service';
-import {NotificacionModule} from './notificacion/notificacion.module'
+import {NotificacionModule} from './notificacion/notificacion.module';
 
 @NgModule({
     declarations: [
-        AppComponent,
+        AppComponent
     ],
     imports: [
         NotificacionModule,

Frontend Angular 4/src/app/layout/layout.module.ts

@@ -23,7 +23,7 @@ import { NotificacionModule } from '../notificacion/notificacion.module';
     declarations: [
         LayoutComponent,
         HeaderComponent,
-        SidebarComponent
+        SidebarComponent        
     ],
     providers: [AuthenticationService, HaskellService]
 })

Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-EN.js

+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("codemirror/lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["codemirror/lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  "use strict";
+
+  CodeMirror.defineMode("matefun-EN", function(_config, modeConfig) {
+
+    function switchState(source, setState, f) {
+      setState(f);
+      return f(source, setState);
+    }
+
+    var smallRE = /[a-z_]/;
+    var largeRE = /[A-Z]/;
+    var digitRE = /\d/;
+    var hexitRE = /[0-9A-Fa-f]/;
+    var octitRE = /[0-7]/;
+    var idRE = /[a-z_A-Z0-9'\xa1-\uffff]/;
+    var symbolRE = /[-!#$%&*+.\/<=>?@\\^|~:]/;
+    var specialRE = /[(),;[\]`{}]/;
+  var whiteCharRE = /[ \t\v\f]/; // newlines are handled in tokenizer
+
+  function normal(source, setState) {
+    if (source.eatWhile(whiteCharRE)) {
+      return null;
+    }
+
+    var ch = source.next();
+    if (specialRE.test(ch)) {
+      if (ch == '{' && source.eat('-')) {
+        var t = "comment";
+        if (source.eat('#')) {
+          t = "meta";
+        }
+        return switchState(source, setState, ncomment(t, 1));
+      }
+      return null;
+    }
+
+    if (ch == '\'') {
+      if (source.eat('\\')) {
+        source.next();  // should handle other escapes here
+      }
+      else {
+        source.next();
+      }
+      if (source.eat('\'')) {
+        return "string";
+      }
+      return "string error";
+    }
+
+    if (ch == '"') {
+      return switchState(source, setState, stringLiteral);
+    }
+
+    if (largeRE.test(ch)) {
+      source.eatWhile(idRE);
+      if (source.eat('.')) {
+        return "qualifier";
+      }
+      return "variable-2";
+    }
+
+    if (smallRE.test(ch)) {
+      source.eatWhile(idRE);
+      return "variable";
+    }
+
+    if (digitRE.test(ch)) {
+      if (ch == '0') {
+        if (source.eat(/[xX]/)) {
+          source.eatWhile(hexitRE); // should require at least 1
+          return "integer";
+        }
+        if (source.eat(/[oO]/)) {
+          source.eatWhile(octitRE); // should require at least 1
+          return "number";
+        }
+      }
+      source.eatWhile(digitRE);
+      var t = "number";
+      if (source.match(/^\.\d+/)) {
+        t = "number";
+      }
+      if (source.eat(/[eE]/)) {
+        t = "number";
+        source.eat(/[-+]/);
+        source.eatWhile(digitRE); // should require at least 1
+      }
+      return t;
+    }
+
+    if (ch == "." && source.eat("."))
+      return "keyword";
+
+    if (symbolRE.test(ch)) {
+      if (ch == '-' && source.eat(/-/)) {
+        source.eatWhile(/-/);
+        if (!source.eat(symbolRE)) {
+          source.skipToEnd();
+          return "comment";
+        }
+      }
+      var t = "variable";
+      if (ch == ':') {
+        t = "variable-2";
+      }
+      source.eatWhile(symbolRE);
+      return t;
+    }
+
+    return "error";
+  }
+
+  function ncomment(type, nest) {
+    if (nest == 0) {
+      return normal;
+    }
+    return function(source, setState) {
+      var currNest = nest;
+      while (!source.eol()) {
+        var ch = source.next();
+        if (ch == '{' && source.eat('-')) {
+          ++currNest;
+        }
+        else if (ch == '-' && source.eat('}')) {
+          --currNest;
+          if (currNest == 0) {
+            setState(normal);
+            return type;
+          }
+        }
+      }
+      setState(ncomment(type, currNest));
+      return type;
+    };
+  }
+
+  function stringLiteral(source, setState) {
+    while (!source.eol()) {
+      var ch = source.next();
+      if (ch == '"') {
+        setState(normal);
+        return "string";
+      }
+      if (ch == '\\') {
+        if (source.eol() || source.eat(whiteCharRE)) {
+          setState(stringGap);
+          return "string";
+        }
+        if (source.eat('&')) {
+        }
+        else {
+          source.next(); // should handle other escapes here
+        }
+      }
+    }
+    setState(normal);
+    return "string error";
+  }
+
+  function stringGap(source, setState) {
+    if (source.eat('\\')) {
+      return switchState(source, setState, stringLiteral);
+    }
+    source.next();
+    setState(normal);
+    return "error";
+  }
+
+
+  var wellKnownWords = (function() {
+    var wkw = {};
+    function setType(t) {
+      return function () {
+        for (var i = 0; i < arguments.length; i++)
+          wkw[arguments[i]] = t;
+      };
+    }
+
+    setType("keyword")(
+     "include"
+     ,"set","in"
+     ,"if", "or" 
+     ,"isEmpty");
+
+    setType("keyword")("<-", "->");
+
+    setType("builtin")("-", "+", "*", "/","^","!",":","==","/=","<",">","<=",">=","::","->","X","|");
+
+    //tipos predefinidos
+    setType("builtin")("Red", "Green", "Blue", "Black","White","Gray","Yellow","FigEmpty", "[]"
+      ,"R", "Fig", "Fig3D", "Color", "color3D", "join3D", "rotate3D", "move3D"
+      );
+
+    setType("builtin")(
+      "abs", "acos", "acosh", "all", "and", "any", "appendFile", "asTypeOf",
+      "asin", "asinh", "atan", "atan2", "atanh", "break", "catch", "ceiling",
+      "compare", "concat", "concatMap", "const", "cos", "cosh", "curry",
+      "cycle", "decodeFloat", "div", "divMod", "drop", "dropWhile", "either",
+      "elem", "encodeFloat", "enumFrom", "enumFromThen", "enumFromThenTo",
+      "enumFromTo", "error", "even", "exp", "exponent", "fail", "filter",
+      "flip", "floatDigits", "floatRadix", "floatRange", "floor", "fmap",
+      "foldl", "foldl1", "foldr", "foldr1", "fromEnum", "fromInteger",
+      "fromIntegral", "fromRational", "fst", "gcd", "getChar", "getContents",
+      "getLine", "head", "id", "init", "interact", "ioError", "isDenormalized",
+      "isIEEE", "isInfinite", "isNaN", "isNegativeZero", "iterate", "last",
+      "lcm", "length", "lex", "lines", "log", "logBase", "lookup", "map",
+      "mapM", "mapM_", "max", "maxBound", "maximum", "maybe", "min", "minBound",
+      "minimum", "mod", "negate", "not", "notElem", "null", "odd", "or",
+      "otherwise", "pi", "pred", "print", "product", "properFraction",
+      "putChar", "putStr", "putStrLn", "quot", "quotRem", "read", "readFile",
+      "readIO", "readList", "readLn", "readParen", "reads", "readsPrec",
+      "realToFrac", "recip", "rem", "repeat", "replicate", "return", "reverse",
+      "round", "scaleFloat", "scanl", "scanl1", "scanr", "scanr1", "seq",
+      "sequence", "sequence_", "show", "showChar", "showList", "showParen",
+      "showString", "shows", "showsPrec", "significand", "signum", "sin",
+      "sinh", "snd", "span", "splitAt", "sqrt", "subtract", "succ", "sum",
+      "tail", "take", "takeWhile", "tan", "tanh", "toEnum", "toInteger",
+      "toRational", "truncate", "uncurry", "undefined", "unlines", "until",
+      "unwords", "unzip", "unzip3", "userError", "words", "writeFile", "zip",
+      "zip3", "zipWith", "zipWith3");
+
+    var override = modeConfig.overrideKeywords;
+    if (override) for (var word in override) if (override.hasOwnProperty(word))
+      wkw[word] = override[word];
+
+    return wkw;
+  })();
+
+
+
+  return {
+    startState: function ()  { return { f: normal }; },
+    copyState:  function (s) { return { f: s.f }; },
+
+    token: function(stream, state) {
+      var t = state.f(stream, function(s) { state.f = s; });
+      var w = stream.current();
+      return wellKnownWords.hasOwnProperty(w) ? wellKnownWords[w] : t;
+    },
+
+    blockCommentStart: "{-",
+    blockCommentEnd: "-}",
+    lineComment: "--"
+  };
+
+});
+
+CodeMirror.defineMIME("text/x-matefun", "matefun-EN");
+
+});
\ No newline at end of file

Frontend Angular 4/src/app/layout/matefun/codemirror-matefun-mode.js → Frontend Angular 4/src/app/layout/matefun/codemirror/matefun-mode-ES.js

@@ -8,7 +8,7 @@
 })(function(CodeMirror) {
   "use strict";
 
-  CodeMirror.defineMode("matefun", function(_config, modeConfig) {
+  CodeMirror.defineMode("matefun-ES", function(_config, modeConfig) {
 
     function switchState(source, setState, f) {
       setState(f);
@@ -256,6 +256,6 @@
 
 });
 
-CodeMirror.defineMIME("text/x-matefun", "matefun");
+CodeMirror.defineMIME("text/x-matefun", "matefun-ES");
 
 });
\ No newline at end of file

Frontend Angular 4/src/app/layout/matefun/matefun.component.ts

@@ -40,7 +40,8 @@ import 'codemirror/addon/search/matchesonscrollbar';
 import 'codemirror/addon/search/jump-to-line';
 import 'codemirror/addon/edit/matchbrackets';
 
-import './codemirror-matefun-mode.js'
+import './codemirror/matefun-mode-ES.js'
+import './codemirror/matefun-mode-EN.js'
 
 var codeMirrorRef:any;
 var componentRef : any;
@@ -80,7 +81,7 @@ export class MateFunComponent {
         matchBrackets: true,
         extraKeys: {"Ctrl-Space": "autocomplete"},
         mode: {
-            name: "matefun", 
+            name: "matefun-EN", 
             globalVars: true
         },
         gutters: ["CodeMirror-linenumbers", "breakpoints"],

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html

 <div class="card">
-    <div class="controls">
-			<div class="btn-group ddown">
-				<button 
-					type="button" 
-					class="btn btn-secondary"
-					style="min-width: 70px;"
-					(click)=changeZoomType()
-				>
-					{{getZoom3DTypeName(zoomType)}}
-				</button>
-				<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-					<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
-					<div class="dropdown-menu" ngbDropdownMenu>
-						<button 
-							*ngFor="let type of [1,2,3,4]" 
-							class="dropdown-item"
-							[disabled]="type === zoomType"
-							(click)=changeZoomType(type)
-						>
-							{{getZoom3DTypeName(type)}}
-						</button>
-					</div>
-				</div>
-			</div> 
-
+	<div class="controls">
+		<div class="btn-group ddown">
 			<button 
-				ngbPopover="Zoom +"  
-				triggers="mouseenter:mouseleave" 
-				data-placement="bottom" 
-				class="btn btn-sm btn-secondary" 
-				(click)=zoomIn() 
+				type="button" 
+				class="btn btn-secondary"
+				style="min-width: 70px;"
+				(click)=changeZoomType()
 			>
-				<i class="fa fa-plus"></i>
+				{{getZoom3DTypeName(graphProps.zoomType)}}
 			</button>
+			<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
+				<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
+				<div class="dropdown-menu" ngbDropdownMenu>
+					<button 
+						*ngFor="let type of [1,2,3,4]" 
+						class="dropdown-item"
+						[disabled]="type === graphProps.zoomType"
+						(click)=changeZoomType(type)
+					>
+						{{getZoom3DTypeName(type)}}
+					</button>
+				</div>
+			</div>
+		</div> 
 
-			<button 
-				ngbPopover="Zoom -"  
-				triggers="mouseenter:mouseleave" 
-				data-placement="bottom" 
-				class="btn btn-sm btn-secondary" 
-				(click)=zoomOut() 
-			>
-				<i class="fa fa-minus"></i>
-			</button>
+		<button 
+			ngbPopover="Zoom +"  
+			triggers="mouseenter:mouseleave" 
+			data-placement="bottom" 
+			class="btn btn-sm btn-secondary" 
+			(click)=zoomIn() 
+		>
+			<i class="fa fa-plus"></i>
+		</button>
 
-			<button 
-				ngbPopover="Centrar"  
-				triggers="mouseenter:mouseleave" 
-				data-placement="bottom" 
-				class="btn btn-sm btn-secondary" 
-				(click)=zoomMas() 
-			>
-				<i class="fa fa-arrows"></i>
-			</button>
+		<button 
+			ngbPopover="Zoom -"  
+			triggers="mouseenter:mouseleave" 
+			data-placement="bottom" 
+			class="btn btn-sm btn-secondary" 
+			(click)=zoomOut() 
+		>
+			<i class="fa fa-minus"></i>
+		</button>
 
-			<button 
-				ngbPopover="Borrar"  
-				triggers="mouseenter:mouseleave" 
-				data-placement="bottom" 
-				class="btn btn-sm btn-secondary" 
-				(click)=zoomMas() 
-			>
-				<i class="fa fa-trash"></i>
-			</button>
+		<button 
+			ngbPopover="Centrar"  
+			triggers="mouseenter:mouseleave" 
+			data-placement="bottom" 
+			class="btn btn-sm btn-secondary" 
+			(click)=center() 
+		>
+			<i class="fa fa-arrows"></i>
+		</button>
 
-			<button 
-			ngbPopover="Configuración"  
+		<button 
+			closePopoverOnOutsideClick
+			class="btn btn-sm btn-secondary" 
+			placement="bottom" 
+			[ngbPopover]=popoverAxesSize
+			popoverTitle="Rango de ejes"
+			#popover="ngbPopover"
+			tiggers="click"
+		>
+			<i class="fa fa-arrows-h"></i>
+		</button>
+		<ng-template #popoverAxesSize>
+			<div class="axes-size">
+				<div class="axe">
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.xMin"
+						[max]="graphProps.range.xMax-1"
+						[min]="-99" 
+						(change)="onChangeAxesSize('xMin', $event)"
+					/>
+					<div class="less-than">
+						<span>&#8804;</span>x<span>&#8804;</span>
+					</div>
+					
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.xMax"
+						[max]="99"
+						[min]="graphProps.range.xMin+1" 
+						(change)="onChangeAxesSize('xMax', $event)"
+					/>
+				</div>
+
+				<div class="axe">
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.yMin"
+						[max]="graphProps.range.yMax-1"
+						[min]="-99" 
+						(change)="onChangeAxesSize('yMin', $event)"
+					/>
+					<div class="less-than">
+						<span>&#8804;</span>y<span>&#8804;</span>
+					</div>
+					
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.yMax"
+						[max]="99"
+						[min]="graphProps.range.yMin+1" 
+						(change)="onChangeAxesSize('yMax', $event)"
+					/>
+				</div>
+
+				<div class="axe">
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.zMin"
+						[max]="graphProps.range.zMax-1"
+						[min]="-99" 
+						(change)="onChangeAxesSize('zMin', $event)"
+					/>
+					<div class="less-than">
+						<span>&#8804;</span>z<span>&#8804;</span>
+					</div>
+					
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.range.zMax"
+						[max]="99"
+						[min]="graphProps.range.zMin+1" 
+						(change)="onChangeAxesSize('zMax', $event)"
+					/>
+				</div>
+			</div>
+		</ng-template>
+		
+
+		<button 
+			ngbPopover="Borrar"  
 			triggers="mouseenter:mouseleave" 
 			data-placement="bottom" 
 			class="btn btn-sm btn-secondary" 
-			(click)=zoomMas() 
+			(click)=clear() 
+		>
+			<i class="fa fa-trash"></i>
+		</button>
+
+		<button 
+		[ngbPopover]=popoverConfig
+			closePopoverOnOutsideClick
+			placement="bottom" 
+		
+			tiggers="click"
+			class="btn btn-sm btn-secondary" 
+			popoverTitle="Configuración"
 		>
 			<i class="fa fa-gear"></i>
 		</button>
- 		
+
+		<ng-template #popoverConfig>
+			<div style="width: 140px;">
+				<label class="d-block">
+					<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()">
+					Mostrar grilla
+				</label>
+
+				<div style="display: flex;">
+					<span style="margin-right: 8px; align-self: center;">
+						Quality:
+					</span>
+
+					<input 
+						type="number" 
+						class="form-control form-control-sm" 
+						[(ngModel)]="graphProps.quality"
+						[max]="99"
+						[min]="2" 
+						(change)="onChangeQuality()"
+						style="width: 55px;"
+					/>
+				</div>
+			</div>
+		</ng-template>
+
+	
 	</div>
 		
 	<div class=