Organizando o código em arquivos

css/ivprog-visual-1.0.css

@@ -111,11 +111,11 @@ body {
 	min-width: 50px;
 }
 
-.function_name_div, .function_return_div, .function_name_parameter {
+.function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return {
 	display: inline;
 }
 
-.enable_edit_name_function, .enable_edit_name_parameter, .add_parameter, .remove_parameter {
+.enable_edit_name_function, .enable_edit_name_parameter, .add_parameter, .remove_parameter, .add_parameter_button, .remove_variable {
 	cursor: pointer;
 }
 
@@ -223,7 +223,7 @@ div.buttons_manage_columns {
 .ui.comment span {
 	font-style: italic;
 }
-.ui.comment {
+.ui.comment, .ui.reader, .ui.writer, .ui.attribution, .ui.iftrue, .ui.repeatNtimes, .ui.whiletrue, .ui.dowhiletrue, .ui.switch, .ui.functioncall {
 	border: 1px solid gray;
 	padding: 5px;
 	border-radius: 5px;

i18n/en/ui.json

@@ -7,6 +7,7 @@
   "real": "real",
   "program": "program",
   "text": "text",
+  "text_start": "text",
   "boolean": "boolean",
   "true": "true",
   "false": "false",
@@ -21,5 +22,14 @@
   "text_comment_main": "This is the main function...",
   "text_read_var": "Reading data",
   "text_write_var": "Writing data",
-  "text_comment": "Comment"
+  "text_command_read":"read",
+  "text_command_write":"write",
+  "text_comment": "Comment",
+  "text_attribution": "Attribution",
+  "text_iftrue": "If true then",
+  "text_repeatNtimes": "Repeat N times",
+  "text_whiletrue": "While true",
+  "text_dowhiletrue": "Do while true",
+  "text_switch": "Switch",
+  "text_functioncall": "Function call"
 }

i18n/es/ui.json

@@ -7,6 +7,7 @@
   "real": "real",
   "program": "program",
   "text": "text",
+  "text_start": "text",
   "boolean": "boolean",
   "true": "true",
   "false": "false",
@@ -21,5 +22,14 @@
   "text_comment_main": "This is the main function...",
   "text_read_var": "Reading data",
   "text_write_var": "Writing data",
-  "text_comment": "Comment"
+  "text_command_read":"read",
+  "text_command_write":"write",
+  "text_comment": "Comment",
+  "text_attribution": "Attribution",
+  "text_iftrue": "If true then",
+  "text_repeatNtimes": "Repeat N times",
+  "text_whiletrue": "While true",
+  "text_dowhiletrue": "Do while true",
+  "text_switch": "Switch",
+  "text_functioncall": "Function call"
 }

i18n/pt/ui.json

@@ -7,6 +7,7 @@
   "real": "real",
   "program": "programa",
   "text": "cadeia",
+  "text_start": "texto",
   "boolean": "logico",
   "true": "verdadeiro",
   "false": "fals0",
@@ -21,6 +22,15 @@
   "text_comment_main": "Esta é a função principal...",
   "text_read_var": "Leitura de dados",
   "text_write_var": "Escrita de dados",
+  "text_command_read":"leia",
+  "text_command_write":"escreva",
   "text_comment": "Comentário",
-  "join_or": "ou"
+  "join_or": "ou",
+  "text_attribution": "Atribuição",
+  "text_iftrue": "Se verdadeiro então",
+  "text_repeatNtimes": "Repita N vezes",
+  "text_whiletrue": "Enquanto verdadeiro",
+  "text_dowhiletrue": "Faça enquanto verdadeiro",
+  "text_switch": "Escolha",
+  "text_functioncall": "Chamada de função"
 }

index.html

@@ -4,16 +4,13 @@
     <title></title>
     <link rel="stylesheet" type="text/css" href="js/semantic/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="css/ivprog-visual-1.0.css">
-    <script src="build/vendors~main.ivprog.bundle.js"></script>
     <script src="js/jquery-3.3.1.min.js"></script>
+
     <script src="build/ivprog.bundle.js"></script>
 
     <script src="js/iassign-integration-functions.js"></script>
     <script src="i18n/i18n-engine.js"></script>
 
-    <script src="js/semantic/semantic.min.js"></script>
-    <script src="js/semantic/semantic-buttons.js"></script>
-
     <script src="js/jquery-ui.js"></script>
     <script src="js/Sortable.js"></script>
     
@@ -88,11 +85,14 @@
       </div>
 
       <div class="ui one column container segment ivprog_visual_panel loading">
-        <div class="program_signature"><span class="program_signature_text">programa</span> { </div>
+        <div class="program_signature"><data class="i18n" value="ui:program">program</data> { </div>
 
         <div class="global_var">
-          <div class="ui icon button add-globalVar-button"><i class="icon superscript"></i></div>
+          
+          <div class="ui icon button add-globalVar-button add_global_button"><i class="icon superscript"></i></div>
+
           <div class="list_globals"></div>
+
         </div>
 
         <div class="all_functions list-group" id="listWithHandle">
@@ -101,7 +101,7 @@
 
 
         <div class="ui teal small labeled icon button add_function_button">
-          <data class="i18n" value="Function">Function</data>
+          <data class="i18n" value="ui:btn_function">Function</data>
           <i class="add icon"></i>
         </div>
         <div class="program_final">}</div>
@@ -110,8 +110,6 @@
       
     </div>
 
-    <i class="icon trash alternate outline huge" onmouseover="console.log('oi');" ></i>
-
     <script>
       $(document).ready(() => {
         ivprogCore.initVisualUI();
@@ -119,5 +117,8 @@
     </script>
 
 
+    <script src="js/semantic/semantic.min.js"></script>
+    <script src="js/semantic/semantic-buttons.js"></script>
+
   </body>
 </html>

js/visualUI/commands.js

@@ -0,0 +1,551 @@
+import $ from 'jquery';
+import { Types } from './types';
+import * as Models from './ivprog_elements';
+import { LocalizedStrings } from './../services/localizedStringsService';
+import * as GlobalsManagement from './globals';
+import * as VariablesManagement from './variables';
+import * as CommentsManagement from './commands/comment';
+import * as ReadersManagement from './commands/reader';
+import * as WritersManagement from './commands/writer';
+import * as AttributionsManagement from './commands/attribution';
+import * as IftruesManagement from './commands/iftrue';
+import * as RepeatNtimesManagement from './commands/repeatNtimes';
+import * as WhiletruesManagement from './commands/whiletrue';
+import * as DowhiletruesManagement from './commands/dowhiletrue';
+import * as SwitchesManagement from './commands/switch';
+import * as FunctioncallsManagement from './commands/functioncall';
+
+var has_element_created_draged = false;
+var which_element_is_draged = null;
+
+export function createFloatingCommand (function_obj, function_container, command_type, mouse_event) {
+	var floatingObject;
+
+	switch (command_type) {
+		case Models.COMMAND_TYPES.comment:
+			floatingObject = CommentsManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.reader:
+			floatingObject = ReadersManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.writer:
+			floatingObject = WritersManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.attribution:
+			floatingObject = AttributionsManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.iftrue:
+			floatingObject = IftruesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.repeatNtimes:
+			floatingObject = RepeatNtimesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.whiletrue:
+			floatingObject = WhiletruesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.dowhiletrue:
+			floatingObject = DowhiletruesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.switch:
+			floatingObject = SwitchesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.functioncall:
+			floatingObject = FunctioncallsManagement.createFloatingCommand();
+			break;
+	}
+
+	$(floatingObject).draggable().appendTo("body");
+
+	$( floatingObject ).mouseup(function(evt) {
+	  manageCommand(function_obj, function_container, evt, command_type);
+	});
+	
+	floatingObject.css("position", "absolute");
+	mouse_event.type = "mousedown.draggable";
+	mouse_event.target = floatingObject[0];
+	floatingObject.css("left", mouse_event.pageX - 15);
+	floatingObject.css("top", mouse_event.pageY - 15);
+	floatingObject.trigger(mouse_event);
+}
+
+// before_after_inside: 1 -> before, 2 -> after, 3 -> inside
+function renderCommand (command, element_reference, before_after_inside) {
+	var createdElement;
+	switch (command.type) {
+		case Models.COMMAND_TYPES.comment:
+			createdElement = CommentsManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.reader:
+			createdElement = ReadersManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.writer:
+			createdElement = WritersManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.attribution:
+			createdElement = AttributionsManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.iftrue:
+			createdElement = IftruesManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.repeatNtimes:
+			createdElement = RepeatNtimesManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.whiletrue:
+			createdElement = WhiletruesManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.dowhiletrue:
+			createdElement = DowhiletruesManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.switch:
+			createdElement = SwitchesManagement.renderCommand(command);
+			break;
+
+		case Models.COMMAND_TYPES.functioncall:
+			createdElement = FunctioncallsManagement.renderCommand(command);
+			break;
+	}
+
+	switch (before_after_inside) {
+		case 1:
+			$( createdElement ).insertBefore(element_reference);
+			break;
+
+		case 2:
+			$( createdElement ).insertAfter(element_reference);
+			break;
+
+		case 3: 
+			$( element_reference ).append(createdElement);
+			break;
+	}
+
+}
+
+function genericCreateCommand (command_type) {
+
+	switch (command_type) {
+		case Models.COMMAND_TYPES.comment:
+			return new Models.Comment(null);
+
+		case Models.COMMAND_TYPES.reader:
+			return new Models.Reader(null, null, null);
+
+		case Models.COMMAND_TYPES.writer:
+			return new Models.Writer(null);
+
+		case Models.COMMAND_TYPES.attribution:
+			return new Models.Attribution(null, null);
+
+		case Models.COMMAND_TYPES.iftrue:
+			return new Models.IfTrue(null, null, null);
+
+		case Models.COMMAND_TYPES.repeatNtimes:
+			return new Models.RepeatNTimes(null, null, null, null);
+
+		case Models.COMMAND_TYPES.whiletrue:
+			return new Models.WhileTrue(null, null);
+
+		case Models.COMMAND_TYPES.dowhiletrue:
+			return new Models.DoWhileTrue(null, null);
+
+		case Models.COMMAND_TYPES.switch:
+			return new Models.Switch(null, null, null);
+
+		case Models.COMMAND_TYPES.functioncall:
+			return new Models.FunctionCall(null, null);
+	}
+}
+
+function manageCommand (function_obj, function_container, event, command_type) {
+	$( ".created_element" ).each(function( index ) { 
+		$(this).remove();
+	});
+
+	var el = document.elementFromPoint(event.clientX, event.clientY);
+	console.log('soltou no: ');
+	console.log(el);
+	console.log($(el).data('fun'));
+
+	// Primeiro verificar se ele soltou no espaço da função correta:
+	var hier = $(el).parentsUntil(".all_functions");
+	var esta_correto = false;
+	var esta_na_div_correta = false;
+	if ($(el).hasClass("commands_list_div")) {
+		esta_na_div_correta = true;
+	} 
+	for (var i = 0; i < hier.length; i++) {
+		if ($(hier[i]).hasClass("commands_list_div")) {
+			esta_na_div_correta = true;
+		} 
+		if ($(hier[i]).data('fun') == function_obj) {
+			esta_correto = true;
+			break;
+		}
+	}
+	if (!esta_correto) {
+		has_element_created_draged = false;
+		which_element_is_draged = null;
+		return;
+	} else {
+		if (!esta_na_div_correta) {
+			has_element_created_draged = false;
+			which_element_is_draged = null;
+			return;
+		}
+	}
+
+	// Agora é descobrir qual o escopo para adicionar o comando:
+
+	// Se o elemento clicado possuir o atributo "fun", então, é direto na div dos comandos:
+	if (typeof $(el).data('fun') !== 'undefined') {
+
+		// Se a lista de comandos estiver vazia, então é o primeiro.
+		// Portanto, ele deve soltar o elemento obrigatoriamente no objeto vazio
+		if (($(el).data('fun').commands == null)  || ($(el).data('fun').commands.length == 0)) {
+				// pode adicionar 
+				$(el).data('fun').commands = [];
+
+				var new_cmd = genericCreateCommand(command_type);
+
+				$(el).data('fun').commands.push(new_cmd);
+
+				renderCommand(new_cmd, $(function_container).find('.commands_list_div'), 3);
+			
+		} else { // Entra nesse else, caso já existam outros comandos no bloco:
+
+			findNearbyCommandToAddInFunctionScope(el, event, $(function_container).find('.commands_list_div'), function_obj, command_type);
+		}
+		return;
+
+	} else { // Se entrar nesse bloco 'else', quer dizer que o usuário não soltou o elemento necessariamente na div específica da função
+			 // portanto, devemos procurar nos elementos DOM, em que lugar da função, ele soltou o comando
+
+		/*var hier = $(el).parentsUntil(".all_functions");
+		for (i = 0; i < hier.length; i++) {
+			if ($(hier[i]).data('fun') == function_to_add) {
+
+				programa.funcoes[function_to_add].comandos.push(createElementGenericFunction());
+
+				break;
+			}
+		}*/
+
+		//findPositionAndInsertCommand(el, event);
+		var caminho = findPositionAndPathToElementTarget(el, event);
+
+		console.log("soltou sobre o seguinte elemento: ");
+
+		console.log(caminho);
+
+		console.log("soltou sobre o seguinte DOM: ");
+
+		console.log(el);
+
+		// se for 1, então está no nível do corpo da função:
+		if (caminho.length == 1) {
+
+			console.log("o caminho é de tamanho 1 e o objeto é o seguinte: " + caminho[0]);
+			console.log(programa.funcoes[function_to_add].comandos[caminho[0]]);
+
+			// se for do tipo true ou false, temos que determinar se soltou no if ou no else: 
+			if (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.iftrue) {
+
+				if ($(el).data('if')) {
+
+					if ((programa.funcoes[function_to_add].comandos[caminho[0]].commands_block == null) 
+						|| (programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.length == 0)) {
+
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block = [];
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
+
+					} else {
+
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
+
+					}
+				} else if ($(el).data('else')) {
+
+					if ((programa.funcoes[function_to_add].comandos[caminho[0]].commands_else == null) 
+						|| (programa.funcoes[function_to_add].comandos[caminho[0]].commands_else.length == 0)) {
+
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_else = [];
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_else.push(createElementGenericFunction());
+
+					} else {
+
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_else.push(createElementGenericFunction());
+
+					}
+				} else {
+					console.log("soltou dentro do if, fora dos divs corretos... VERIFICAR QUAL ESTÁ MAIS PRÓXIMO... O IF OU O ELSE  --- NNN11");
+					discoveryIfOrElse(el, event);
+				}
+
+			} else {
+
+				if ((programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.repeatNtimes)
+					|| (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.whiletrue) 
+					|| (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.dowhiletrue) 
+					|| (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.switch) ) {
+					
+					if ((programa.funcoes[function_to_add].comandos[caminho[0]].commands_block == null) 
+						|| (programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.length == 0)) {
+
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block = [];
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
+
+					} else {
+
+						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
+
+					}
+				} else {
+				
+					var result = getBeforeOrAfterOrEndAllocate(el, event);
+					if (result == true) {
+						console.log("adicionando ANTES");
+						programa.funcoes[function_to_add].comandos.splice(caminho[0], 0, createElementGenericFunction());
+					} else {
+						console.log("adicionando DEPOIS");
+						programa.funcoes[function_to_add].comandos.splice(caminho[0] + 1, 0, createElementGenericFunction());
+					}
+				}
+			}
+
+			
+
+		} else { // caso seja mais de um, o caminho, então, precisamos percorrer até achar: 
+
+			// CONTINUAR DAQUI: 
+			console.log("ACHO QUE É A SITUAÇÃO DE BLOCO INTERNO");
+			console.log("SOLTOU NO ELEMENTO A SEGUIR: ");
+			console.log(el.relatedObj);
+			console.log("PAI DO ELEMENTO QUE ELA SOLTOU: ");
+			console.log(el.parentNode.relatedObj);
+			//
+
+			if ((el.parentNode.relatedObj.tipo == tiposComandos.iftrue)) {
+
+				if ($(el.parentNode).data('if') || $(el).data('if')) {
+
+					if ((el.parentNode.relatedObj.commands_block == null) 
+						|| (el.parentNode.relatedObj.commands_block.length == 0)) {
+
+						el.parentNode.relatedObj.commands_block = [];
+						el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
+
+					} else {
+
+						if ($(el).data('if')) {
+							// Descobrir qual o elemento mais próximo de onde ele soltou o comando recém criado:
+							console.log("SITUAÇÃO TRATADA NO K1!");
+							getNearbyIndexOfElementOnClick(el, event);
+
+						} else {
+							if (getBeforeOrAfterOrEndAllocate(el, event)) {
+								console.log("K1 ANTECAO! SOLTOU ANTES DO ELEMENTO ALVO");
+
+								el.parentNode.relatedObj.commands_block.splice($(el).data('index'), 0, createElementGenericFunction());
+							} else {
+								console.log("K1 ANTECAO! SOLTOU DEPOIS DO ELEMENTO ALVO");
+
+								el.parentNode.relatedObj.commands_block.splice($(el).data('index') + 1, 0, createElementGenericFunction());
+							}
+						}
+
+						//el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
+
+					}
+				} else if ($(el.parentNode).data('else') || $(el).data('else')) {
+
+					if ((el.parentNode.relatedObj.commands_else == null) 
+						|| (el.parentNode.relatedObj.commands_else.length == 0)) {
+
+						el.parentNode.relatedObj.commands_else = [];
+						el.parentNode.relatedObj.commands_else.push(createElementGenericFunction());
+
+					} else {
+
+						if ($(el).data('else')) {
+							// Descobrir qual o elemento mais próximo de onde ele soltou o comando recém criado:
+							console.log("SITUAÇÃO TRATADA NO K2!");
+							getNearbyIndexOfElementOnClick(el, event);
+
+						} else {
+
+							if (getBeforeOrAfterOrEndAllocate(el, event)) {
+								console.log("K2 ANTECAO! SOLTOU ANTES DO ELEMENTO ALVO");
+
+								el.parentNode.relatedObj.commands_else.splice($(el).data('index'), 0, createElementGenericFunction());
+
+							} else {
+								console.log("K2 ANTECAO! SOLTOU DEPOIS DO ELEMENTO ALVO");
+
+								el.parentNode.relatedObj.commands_else.splice($(el).data('index') + 1, 0, createElementGenericFunction());
+							}
+						}
+
+						//el.parentNode.relatedObj.commands_else.push(createElementGenericFunction());
+
+					}
+				} else {
+					console.log("soltou dentro do if, fora dos divs corretos... VERIFICAR QUAL ESTÁ MAIS PRÓXIMO... O IF OU O ELSE  --- NNN22");
+					discoveryIfOrElse(el, event);
+				}
+
+			} else {
+				console.log("COMEÇAR A TRATAR!...");
+
+				if ((el.parentNode.relatedObj.tipo == tiposComandos.repeatNtimes)
+					|| (el.parentNode.relatedObj.tipo == tiposComandos.whiletrue) 
+					|| (el.parentNode.relatedObj.tipo == tiposComandos.dowhiletrue) 
+					|| (el.parentNode.relatedObj.tipo == tiposComandos.switch) 
+					|| (el.parentNode.relatedObj.tipo == tiposComandos.iftrue)) {
+
+
+					if ((el.parentNode.relatedObj.commands_block == null) 
+						|| (el.parentNode.relatedObj.commands_block.length == 0)) {
+					
+						el.parentNode.relatedObj.commands_block = [];
+						el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
+
+					} else {
+
+						if (typeof $(el).data('subblock') !== 'undefined') {
+							
+							console.log("SITUAÇÃO TRATADA NO K3!");
+
+							getNearbyIndexOfElementOnClick(el, event);
+
+						} else {
+							if (getBeforeOrAfterOrEndAllocate(el, event)) {
+								console.log("K3 ANTECAO! SOLTOU ANTES DO ELEMENTO ALVO");
+
+								el.parentNode.relatedObj.commands_block.splice($(el).data('index'), 0, createElementGenericFunction());
+							} else {
+								console.log("K3 ANTECAO! SOLTOU DEPOIS DO ELEMENTO ALVO");
+
+								el.parentNode.relatedObj.commands_block.splice($(el).data('index') + 1, 0, createElementGenericFunction());
+							}
+						}
+
+						//el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
+					}
+
+
+				} else {
+					console.log("AGORA SIM! SITUAÇÃO K4!");
+					console.log("VOU ADICIONAR NO SEGINTE ELEMENTO: ");
+					console.log(el.parentNode.parentNode.relatedObj);
+
+					if (getBeforeOrAfterOrEndAllocate(el.parentNode, event)) {
+						el.parentNode.parentNode.relatedObj.commands_block.splice($(el.parentNode).data('index'), 0, createElementGenericFunction());
+					} else {
+						el.parentNode.parentNode.relatedObj.commands_block.splice($(el.parentNode).data('index') + 1, 0, createElementGenericFunction());
+					}
+				}
+
+			}
+			
+
+			/*console.log("elemento superior: ");
+			console.log(programa.funcoes[function_to_add].comandos[caminho[0]]);
+			console.log("elemento específico: 
+			console.log(findElementByPath(caminho));*/
+
+		}
+
+	}
+
+
+	//console.log("onde soltou:");
+	//console.log(el);
+
+	
+	has_element_created_draged = false;
+	which_element_is_draged = null;
+	function_to_add = -1;
+
+	renderAlgorithm();
+
+}
+
+function findNearbyCommandToAddInFunctionScope(el, event, node_list_commands, function_obj, command_type) {
+
+	var all_sub = $(node_list_commands).find('div');
+
+	var menor_distancia = 999999999;
+	var elemento_menor_distancia = null;
+	var antes = true;
+
+	var t_bot;
+	var t_top;
+	// Descobrindo o elemento mais próximo:
+	for (var i = 0; i < all_sub.length; i++) {
+		
+		t_top = all_sub[i].getBoundingClientRect().top;
+		t_bot = all_sub[i].getBoundingClientRect().top + all_sub[i].getBoundingClientRect().height;
+
+		if ((t_top - event.clientY) < menor_distancia) {
+			menor_distancia = event.clientY - t_top;
+			elemento_menor_distancia = all_sub[i];
+		}
+	}
+
+	borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
+	
+	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
+	if ((borda_inferior - event.clientY) < menor_distancia) {
+		function_obj.commands.push(genericCreateCommand(command_type));
+	} else {
+		function_obj.commands.splice($(elemento_menor_distancia).data('index'), 0, genericCreateCommand(command_type));
+	}
+}
+
+function findPositionAndPathToElementTarget(el, event) {
+
+	var full_path = [];
+	var m;
+
+	if (typeof $(el).data('fullpath') !== 'undefined') {
+		m = $(el).data('fullpath');
+	} else {
+		
+		var hier = $(el).parentsUntil(".all_functions");
+		for (var i = 0; i < hier.length; i++) {
+			if (typeof $(hier[i]).data('fullpath') !== 'undefined') {
+				m = $(hier[i]).data('fullpath');
+				break;
+			}
+		}
+
+	}
+
+	if (isNaN(m)) {
+		full_path = m.split(',');
+		/*for (i = 0; i < full_path.length; i++) {
+			full_path[i] = parseInt(full_path[i]);
+		}*/
+		return full_path;
+	} else {
+		return [m];
+	}
+
+}

js/visualUI/commands/attribution.js

@@ -0,0 +1,16 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui attribution created_element"> <i class="ui icon small arrow left"></i> <span> x = 1 + 1 </span></div>');
+}
+
+export function renderCommand (command) {
+	var el = $('<div class="ui attribution"> <i class="ui icon small arrow left command_drag"></i> <span> x =  1 + 1</span></div>');
+	$(el).data('command', command);
+	return el;
+}

js/visualUI/commands/comment.js

@@ -0,0 +1,16 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui comment created_element"> <i class="ui icon small quote left"></i> <span class="span_comment_text" "> '+LocalizedStrings.getUI('text_comment')+' </span></div>');
+}
+
+export function renderCommand (command) {
+	var el = $('<div class="ui comment"> <i class="ui icon small quote left"></i> <span class="span_comment_text"> ' + command.comment_text + ' </span></div>');
+	$(el).data('command', command);
+	return el;
+}

js/visualUI/commands/dowhiletrue.js

@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui dowhiletrue created_element"> <i class="ui icon small sync"></i> <span> faça {<br>} enquanto(x < 10) </span></div>');
+}
+
+export function renderCommand (command) {
+	var ret = '';
+	ret += '<div class="ui dowhiletrue"> <i class="ui icon small random command_drag"></i> <span> faça  { </span>';
+	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
+	ret += '</div>';
+	ret += '<span> } enquanto (x < 10); </span>';
+	ret += '</div>';
+
+	var el = $(ret);
+	$(el).data('command', command);
+	return el;
+}

js/visualUI/commands/functioncall.js

@@ -0,0 +1,16 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui functioncall created_element"> <i class="hand point right icon"></i> <span> funcao() </span></div>');
+}
+
+export function renderCommand (command) {
+	var el = $('<div class="ui functioncall"> <i class="hand point right icon command_drag"></i> <span> funcao() </span></div>');
+	$(el).data('command', command);
+	return el;
+}

js/visualUI/commands/iftrue.js

@@ -0,0 +1,46 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui iftrue created_element"> <i class="ui icon small random"></i> <span> if (x < 1) { } </span></div>');
+}
+
+export function renderCommand (command) {
+	var ret = '';
+	ret += '<div class="ui iftrue"> <i class="ui icon small random command_drag"></i> <span> if (x < 1) { </span>';
+	ret += '<div class="ui block_commands" data-if="true">';
+
+	/*if ((writer_obj.commands_block == null)
+			|| (writer_obj.commands_block.length == 0)) {
+	} else {
+		for (ki = 0; ki < writer_obj.commands_block.length; ki ++) {
+			ret += renderElementCommandGeneric(writer_obj.commands_block[ki], function_index, ki, iftrue_index, (fullpath + ',' + ki));
+		}
+	}*/
+
+	ret += '</div>';
+	ret += '<span> } else { </span>';
+
+	ret += '<div class="ui block_commands" data-else="true">';
+
+	/*if ((writer_obj.commands_else == null)
+			|| (writer_obj.commands_else.length == 0)) {
+	} else {
+		for (ki = 0; ki < writer_obj.commands_else.length; ki ++) {
+			ret += renderElementCommandGeneric(writer_obj.commands_else[ki], function_index, ki, iftrue_index, (fullpath + ',' + ki));
+		}
+	}*/
+
+	ret += '</div>';
+
+	ret += '<span> }</span>';
+	ret += '</div>';
+
+	var el = $(ret);
+	$(el).data('command', command);
+	return el;
+}

js/visualUI/commands/reader.js

@@ -0,0 +1,19 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui reader created_element"> <i class="ui icon small download"></i> <span> '+LocalizedStrings.getUI('text_command_read')+' var </span></div>');
+}
+
+export function renderCommand (command) {
+	var ret = '<div class="ui reader"> <i class="ui icon small download command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_read')+' ( </span><span class="close_parentheses">)</span> </div>';
+	
+	var el = $(ret);
+	$(el).data('command', command);
+	return el;
+}
+

js/visualUI/commands/repeatNtimes.js

@@ -0,0 +1,23 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui repeatNtimes created_element"> <i class="ui icon small sync"></i> <span> para (x = 0; x < 10; x ++) { } </span></div>');
+}
+
+export function renderCommand (command) {
+	var ret = '<div class="ui repeatNtimes"> <i class="ui icon small random command_drag"></i> <span> para (x = 0; x < 10; x ++) { </span>';
+	ret += '<div class="ui block_commands">';
+
+	ret += '</div>';
+	ret += '<span> }</span>';
+	ret += '</div>';
+	
+	var el = $(ret);
+	$(el).data('command', command);
+	return el;
+}

js/visualUI/commands/switch.js

@@ -0,0 +1,21 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui switch created_element"> <i class="ui icon small random"></i> <span> escolha (x) { <br> caso 1: <br> caso 2: <br> } </span></div>');
+}
+
+export function renderCommand (command) {
+	var ret = '';
+	ret += '<div class="ui switch"> <i class="ui icon small random command_drag" ></i> <span> escolha (x) { <br> caso 1: <br> caso 2: <br> }</span>';
+	ret += '</div>';
+
+	var el = $(ret);
+	$(el).data('command', command);
+	return el;
+}
+

js/visualUI/commands/whiletrue.js

@@ -0,0 +1,24 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui whiletrue created_element"> <i class="ui icon small sync"></i> <span> enquanto(x < 10) { } </span></div>');
+}
+
+export function renderCommand (command) {
+	var ret = '';
+	ret += '<div class="ui whiletrue"> <i class="ui icon small random command_drag"></i> <span> enquanto (x < 10) { </span>';
+	ret += '<div class="ui block_commands">';
+	ret += '</div>';
+	ret += '<span> }</span>';
+	ret += '</div>';
+
+	var el = $(ret);
+	$(el).data('command', command);
+	return el;
+}
+

js/visualUI/commands/writer.js

@@ -0,0 +1,22 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+
+export function createFloatingCommand () {
+	return $('<div class="ui writer created_element"> <i class="ui icon small upload"></i> <span> '+LocalizedStrings.getUI('text_command_write')+' var </span></div>');
+}
+
+export function renderCommand (command) {
+	var ret = '';
+	ret += '<div class="ui writer"> <i class="ui icon small upload command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_write')+' ( </span>';
+
+	ret += '<span> ) </span></div>';
+
+	var el = $(ret);
+	$(el).data('command', command);
+	return el;
+}
+

js/visualUI/functions.js

@@ -1,43 +1,450 @@
 import $ from 'jquery';
-import { Types } from './../ast/types';
-import * as Modelos from './visual';
+import { Types } from './types';
+import * as Models from './ivprog_elements';
 import { LocalizedStrings } from './../services/localizedStringsService';
+import * as GlobalsManagement from './globals';
+import * as VariablesManagement from './variables';
+import * as CommandsManagement from './commands';
 
 var counter_new_functions = 0;
 var counter_new_parameters = 0;
-var counter_new_variables = 0;
-var counter_new_globals = 0;
 
-const programa = new Modelos.Programa()
-const funcaoPrincipal = new Modelos.Funcao(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true);
-funcaoPrincipal.comentario_funcao = new Modelos.Comentario(LocalizedStrings.getUI('text_comment_main'));
-programa.adicionarFuncao(funcaoPrincipal);
+const program = new Models.Program();
+const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true);
+mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main'));
+program.addFunction(mainFunction);
 
-function addFunctionHandler() {
-	new_function = new Modelos.Funcao(LocalizedStrings.getUI("new_function") + "_" + counter_new_functions, Types.VOID, 0, new Array(), false, false, null, new Comentario(LocalizedStrings.getUI('text_comment_start')));
-	programa.adicionarFuncao(new_function);
+window.program_obj = program;
+
+function addFunctionHandler () {
+
+	var new_function = new Models.Function(LocalizedStrings.getUI("new_function") + "_" + counter_new_functions, Types.VOID, 0, new Array(), false, false, null, new Models.Comment(LocalizedStrings.getUI('text_comment_start')));
+	program.addFunction(new_function);
 
 	counter_new_functions ++;
-	//renderAlgorithm();
+
+  renderFunction(new_function);
+}
+
+function addParameter (function_obj, function_container) {
+  if (function_obj.parameters_list == null) {
+    function_obj.parameters_list = [];
+  }
+  var new_parameter = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI("new_parameter") + "_" + counter_new_parameters);
+  function_obj.parameters_list.push(new_parameter);
+  counter_new_parameters ++;
+
+  renderParameter(function_obj, new_parameter, function_container);
+}
+
+function updateReturnType (function_obj, new_type, new_dimensions = 0) {
+  function_obj.return_type = new_type;
+  function_obj.return_dimensions = new_dimensions;
+}
+
+function removeFunction (function_obj) {
+  
+  var index = program.functions.indexOf(function_obj);
+  if (index > -1) {
+    program.functions.splice(index, 1);
+  }    
+}
+
+function minimizeFunction (function_obj) {
+  function_obj.is_hidden = !function_obj.is_hidden;
+}
+
+function addHandlers (function_obj, function_container) {
+
+  $( function_container ).find('.ui.dropdown.function_return').dropdown({
+      onChange: function(value, text, $selectedItem) {
+        if ($($selectedItem).data('dimensions')) {
+          updateReturnType(function_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
+        } else {
+          updateReturnType(function_obj, Types[$($selectedItem).data('type')]);
+        }
+      }
+  });
+
+  $( function_container ).find( ".name_function_updated" ).on('click', function(e){
+    enableNameFunctionUpdate(function_obj, function_container);
+  });
+
+  $( function_container ).find( ".add_parameter_button" ).on('click', function(e){
+    addParameter(function_obj, function_container);
+  });
+
+  $( function_container ).find('.menu_commands').dropdown();
+
+  $( function_container ).find('.menu_commands a').on('click', function(evt){
+    CommandsManagement.createFloatingCommand(function_obj, function_container, $(this).data('command'), evt);
+  });
+
+  $( function_container ).find('.add_var_button_function').on('click', function(e){
+    VariablesManagement.addVariable(function_obj, function_container);
+  });
+
+  $( function_container ).find('.remove_function_button').on('click', function(e){
+    removeFunction(function_obj);
+    $(function_container).slideUp(400);
+  });
+
+  $( function_container ).find('.minimize_function_button').on('click', function(e){
+    minimizeFunction(function_obj);
+    $(function_container).find(".function_area").toggle();
+  });
+
+
 }
 
-function addGlobalVar() {
-	var v = new Modelos.Variavel(Types.INTEGER, LocalizedStrings.getUI('new_global') + '_' + counter_new_globals, 1);
-	counter_new_globals ++;
+// Essa função imprime o tipo de retorno da função e cria o menu do tipo 'select' para alteração
+function renderFunctionReturn (function_obj, function_element) {
+
+  var ret = '<div class="ui dropdown function_return">';
+    
+    if (function_obj.return_dimensions > 0) {
+      ret += '<div class="text">'+ LocalizedStrings.getUI("vector") +':'+ LocalizedStrings.getUI(function_obj.return_type);
+      ret += '</div>';
+    } else {
+      ret += '<div class="text">'+LocalizedStrings.getUI(function_obj.return_type)+'</div>';
+    }
+
+    ret += '<i class="dropdown icon"></i>'
+      + '<div class="menu">';
+
+
+    for (var tm in Types) {
+      ret += '<div class="item ' + (function_obj.return_type == tm.toLowerCase()  && function_obj.return_dimensions < 1 ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
+    }
+
+    for (var tm in Types) {
+      if (tm == Types.VOID.toUpperCase()) {
+        continue;
+      }
+      ret += '<div class="item">'
+        + '<i class="dropdown icon"></i>'
+        +  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
+          +  '<div class="menu">'
+            + '<div class="item '+(function_obj.return_type == tm.toLowerCase()  && function_obj.return_dimensions > 0 ? ' selected ' : '')+'" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
+            + '<div class="item '+(function_obj.return_type == tm.toLowerCase()  && function_obj.return_dimensions > 0 ? ' selected ' : '')+'" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
+          +  '</div>'
+        + '</div>'; 
+    }
+
+    ret += '</div></div>';
+
+    ret = $(ret);
+    
+    $(function_element).find('.function_return').append(ret);
+}
+
+
+function renderFunction (function_obj) {
+
+  var appender = '<div class="ui secondary segment function_div list-group-item">';
+
+  if (function_obj.function_comment) {
+    //appender += renderComment(function_obj.function_comment, sequence, true, -1);
+  }
+    
+  appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
+
+  appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
+    + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
+
+  appender += '<div class="ui icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
+  
+  appender += '<div class="ui icon button dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
+  appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.reader+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_read_var')+ '</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.writer+'"><i class="upload icon"></i> '+LocalizedStrings.getUI('text_write_var')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.comment+'"><i class="quote left icon"></i> '+LocalizedStrings.getUI('text_comment')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.attribution+'"><i class="arrow left icon"></i> '+LocalizedStrings.getUI('text_attribution')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.functioncall+'"><i class="hand point right icon"></i> '+LocalizedStrings.getUI('text_functioncall')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.iftrue+'" ><i class="random icon"></i> '+LocalizedStrings.getUI('text_iftrue')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.repeatNtimes+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_repeatNtimes')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.whiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_whiletrue')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.dowhiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_dowhiletrue')+'</a>'
+        + '<a class="item" data-command="'+Models.COMMAND_TYPES.switch+'"><i class="list icon"></i> '+LocalizedStrings.getUI('text_switch')+'</a>'
+        + '</div></div></div>';
+
+  appender += '<div class="function_signature_div">'+LocalizedStrings.getUI("function")+' ';
+
+  if (function_obj.is_main) {
+      appender += '<div class="function_name_div">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' + LocalizedStrings.getUI('void') + ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span_name_function" >'+function_obj.name+'</span> </div> '
+        + '( <div class="ui large labels parameters_list">';
+  } else {
+      appender += '<div class="ui function_return"></div>';
+
+      appender += '<div class="function_name_div"><span class="span_name_function name_function_updated">'+function_obj.name+'</span> <i class="icon small pencil alternate enable_edit_name_function name_function_updated"></i></div> ' 
+        + '( <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
+  }
+
+  //appender += renderFunctionParameters(function_obj, sequence);
+    
+  appender += '</div> ) {</div>'
+    + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
+
+    + '<div class="ui top attached segment variables_list_div">'
+    /*+ renderVariables(function_obj, sequence)*/
+    + '</div>'
+    + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
+
+
+  if (function_obj.commands) {
+    for (var l = 0; l < function_obj.commands.length; l++) {
+      //appender += renderElementCommandGeneric(programa.funcoes[sequence].comandos[l], sequence, l, -1, l);
+      
+    }
+  }
+
+  appender += '</div>';
+
+  appender += '<div class="function_close_div">}</div>'
+    + '</div>'
+    + '</div>';
+
+  appender = $(appender);
+
+  $('.all_functions').append(appender);
+
+  $(appender).data('fun', function_obj);
+  $(appender).find('.commands_list_div').data('fun', function_obj);
+
+  renderFunctionReturn(function_obj, appender);
 
-	programa.adicionarGlobal(v);
-	//renderAlgorithm();
+  addHandlers(function_obj, appender);
 }
 
+
 export function initVisualUI () {
   // MUST USE CONST, LET, OR VAR !!!!!!
   const mainDiv = $('#visual-main-div');
   // fill mainDiv with functions and globals...
   // renderAlgorithm()...
   $('.add_function_button').on('click', () => {
-    addFunctionHandler()
+    addFunctionHandler();
+  });
+  $('.add_global_button').on('click', () => {
+    GlobalsManagement.addGlobal(program);
   });
-  $('.add-globalVar-button').on('click', () => {
-    addGlobalVar()
+
+  renderFunction(mainFunction);
+}
+
+function removeParameter (function_obj, parameter_obj, parameter_container) {
+  var index = function_obj.parameters_list.indexOf(parameter_obj);
+  if (index > -1) {
+    function_obj.parameters_list.splice(index, 1);
+  }
+  $(parameter_container).remove();
+}
+
+function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
+  parameter_obj.type = new_type;
+  parameter_obj.dimensions = new_dimensions;
+
+  if (new_dimensions > 0) {
+    parameter_obj.rows = new_dimensions;
+    parameter_obj.columns = 2;
+  }
+
+}
+
+function renderParameter (function_obj, parameter_obj, function_container) {
+  var ret = "";
+
+  ret += '<div class="ui label function_name_parameter"><span class="span_name_parameter label_enable_name_parameter">'+parameter_obj.name+'</span> <i class="icon small pencil alternate enable_edit_name_parameter label_enable_name_parameter"></i>';
+
+  ret += '<div class="ui dropdown parameter_type">';
+
+  if (parameter_obj.dimensions > 0) {
+    ret += '<div class="text">'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
+    ret += '</div>';
+  } else {
+    ret += '<div class="text">'+LocalizedStrings.getUI(parameter_obj.type)+'</div>';
+  }
+
+  ret += '<i class="dropdown icon"></i>'
+    + '<div class="menu">';
+
+  
+  for (var tm in Types) {
+      if (tm == Types.VOID.toUpperCase()) {
+        continue;
+      }
+      ret += '<div class="item ' + (parameter_obj.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
+  }
+
+  for (var tm in Types) {
+    if (tm == Types.VOID.toUpperCase()) {
+      continue;
+    }
+    ret += '<div class="item">'
+      + '<i class="dropdown icon"></i>'
+      +  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
+        +  '<div class="menu">'
+          + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
+          + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
+        +  '</div>'
+      + '</div>'; 
+  }
+
+  ret += '</div></div>';
+
+  ret += ' <i class="red icon times remove_parameter"></i></div>';
+
+  ret = $(ret);
+  
+  $(function_container).find('.container_parameters_list').append(ret);
+
+  $(ret).find('.remove_parameter').on('click', function(e){
+    removeParameter(function_obj, parameter_obj, ret);
+  });
+  
+  $(ret).find('.ui.dropdown.parameter_type').dropdown({
+    onChange: function(value, text, $selectedItem) {
+      if ($($selectedItem).data('dimensions')) {
+        updateParameterType(parameter_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
+      } else {
+        updateParameterType(parameter_obj, Types[$($selectedItem).data('type')]);
+      }
+    }
+  });
+
+  $(ret).find('.label_enable_name_parameter').on('click', function(e){
+    enableNameParameterUpdate(parameter_obj, ret);
+  });
+
+}
+
+var opened_name_parameter = false;
+var opened_input_parameter = null;
+function enableNameParameterUpdate (parameter_obj, parent_node) {
+  if (opened_name_parameter) {
+    $(opened_input_parameter).focus();
+    return;
+  }
+  opened_name_parameter = true;
+
+  $(parent_node).find('.span_name_parameter').text('');
+  $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+parameter_obj.name+"' />" ).insertBefore($(parent_node).find('.span_name_parameter'));
+
+  $('.width-dynamic').on('input', function() {
+    var inputWidth = $(this).textWidth()+10;
+    opened_input_parameter = this;
+    $(this).focus();
+
+    var tmpStr = $(this).val();
+    $(this).val('');
+    $(this).val(tmpStr);
+
+    $(this).css({
+        width: inputWidth
+    })
+  }).trigger('input');
+
+  $('.width-dynamic').focusout(function() {
+    /// update array:
+    if ($(this).val().trim()) {
+      parameter_obj.name = $(this).val().trim();
+      $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
+    }
+    $(this).remove();
+
+    /// update elements:
+    opened_name_parameter = false;
+    opened_input_parameter = false;
+  });
+
+  $('.width-dynamic').on('keydown', function(e) {
+    var code = e.keyCode || e.which;
+    if(code == 13) {
+      if ($(this).val().trim()) {
+        parameter_obj.name = $(this).val().trim();
+        $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
+      }
+      $(this).remove();
+
+      /// update elements:
+      opened_name_parameter = false;
+      opened_input_parameter = false;
+
+    }
+    if(code == 27) {
+      $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
+
+      $(this).remove();
+
+      /// update elements:
+      opened_name_parameter = false;
+      opened_input_parameter = false;
+    }
+  });
+
+}
+
+var opened_name_function = false;
+var opened_input = null;
+function enableNameFunctionUpdate(function_obj, parent_node) {
+  if (opened_name_function) {
+    $(opened_input).focus();
+    return;
+  }
+
+  $(parent_node).find('.span_name_function').text('');
+  $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+function_obj.name+"' />" ).insertBefore($(parent_node).find('.span_name_function'));
+
+  $('.width-dynamic').on('input', function() {
+    var inputWidth = $(this).textWidth()+10;
+    opened_input = this;
+    $(this).focus();
+
+    var tmpStr = $(this).val();
+    $(this).val('');
+    $(this).val(tmpStr);
+
+    $(this).css({
+        width: inputWidth
+    })
+  }).trigger('input');
+
+  $('.width-dynamic').focusout(function() {
+    /// update array:
+    if ($(this).val().trim()) {
+      function_obj.name = $(this).val().trim();
+    }
+    $(this).remove();
+    $(parent_node).find('.span_name_function').text(function_obj.name);
+
+    /// update elements:
+    opened_name_function = false;
+    opened_input = false;
+  });
+
+  $('.width-dynamic').on('keydown', function(e) {
+    var code = e.keyCode || e.which;
+    if(code == 13) {
+      if ($(this).val().trim()) {
+        function_obj.name = $(this).val().trim();
+      }
+      $(this).remove();
+
+      $(parent_node).find('.span_name_function').text(function_obj.name);
+
+      /// update elements:
+      opened_name_function = false;
+      opened_input = false;
+    }
+    if(code == 27) {
+
+      $(this).remove();
+
+      $(parent_node).find('.span_name_function').text(function_obj.name);
+
+      /// update elements:
+      opened_name_function = false;
+      opened_input = false;
+    }
   });
+  
 }

js/visualUI/globals.js

@@ -0,0 +1,827 @@
+import $ from 'jquery';
+import jQuery from 'jquery';
+import { Types } from './types';
+import * as Models from './ivprog_elements';
+import { LocalizedStrings } from './../services/localizedStringsService';
+
+
+window.jQuery = jQuery;
+
+import '../semantic/semantic.min.js';
+
+var counter_new_globals = 0;
+
+export function addGlobal (program) {
+
+	var new_global = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI('new_global') + '_' + counter_new_globals, 1);
+	counter_new_globals ++;
+
+	program.addGlobal(new_global);
+
+	renderGlobal(new_global);
+
+}
+
+function toggleConstant (global_var) {
+	global_var.is_constant = !global_var.is_constant;
+}
+
+function updateName (global_var, new_name) {
+	global_var.name = new_name;
+}
+
+function updateType (global_var, new_type, new_dimensions = 0) {
+	global_var.type = new_type;
+	global_var.dimensions = new_dimensions;
+
+	if (new_dimensions > 0) {
+		global_var.rows = new_dimensions;
+		global_var.columns = 2;
+	}
+
+	updateInitialValues(global_var);
+}
+
+function removeGlobal (global_var, global_container) {
+	var index = window.program_obj.globals.indexOf(global_var);
+	if (index > -1) {
+	  window.program_obj.globals.splice(index, 1);
+	}
+	$(global_container).remove();
+}
+
+function updateInitialValues (global_var) {
+	if (global_var.type == Types.INTEGER) {
+		if (global_var.dimensions == 0) {
+			global_var.value = 1;
+		}
+		if (global_var.dimensions == 1) {
+			global_var.value = [1, 1];
+		}
+		if (global_var.dimensions == 2) {
+			global_var.value = [[1, 1], [1, 1]];
+		}
+	}
+
+	if (global_var.type == Types.REAL) {
+		if (global_var.dimensions == 0) {
+			global_var.value = 1.0;
+		}
+		if (global_var.dimensions == 1) {
+			global_var.value = [1.0, 1.0];
+		}
+		if (global_var.dimensions == 2) {
+			global_var.value = [[1.0, 1.0], [1.0, 1.0]];
+		}
+	}
+
+	if (global_var.type == Types.TEXT) {
+		if (global_var.dimensions == 0) {
+			global_var.value = LocalizedStrings.getUI('text_start');
+		}
+		if (global_var.dimensions == 1) {
+			global_var.value = [LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')];
+		}
+		if (global_var.dimensions == 2) {
+			global_var.value = [[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')], 
+									[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')]];
+		}
+	}
+
+	if (global_var.type == Types.BOOLEAN) {
+		if (global_var.dimensions == 0) {
+			global_var.value = true;
+		}
+		if (global_var.dimensions == 1) {
+			global_var.value = [true, true];
+		}
+		if (global_var.dimensions == 2) {
+			global_var.value = [[true, true], [true, true]];
+		}
+	}
+}
+
+function alternateBooleanGlobalValue (global_var, value_container) {
+	global_var.value = !global_var.value;
+	$(value_container).find('.span_value_variable').text(global_var.value);
+}
+
+function alternateBooleanGlobalVectorValue (global_var, index, value_container) {
+	global_var.value[index] = !global_var.value[index];
+	$(value_container).find('.span_value_variable').text(global_var.value[index]);
+}
+
+function removeGlobalColumnVector (global_var) {
+	if (global_var.columns == 0) {
+		return;
+	}
+
+	global_var.columns --;
+	global_var.value.splice(global_var.value.length - 1, 1);
+}
+
+function addGlobalColumnVector (global_var) {
+	global_var.columns ++;
+
+	if (global_var.type == Types.INTEGER) {
+		global_var.value.push(1);
+	}
+	if (global_var.type == Types.REAL) {
+		global_var.value.push(1.0);
+	}
+	if (global_var.type == Types.TEXT) {
+		global_var.value.push(LocalizedStrings.getUI('text_start'));
+	}
+	if (global_var.type == Types.BOOLEAN) {
+		global_var.value.push(true);
+	}
+}
+
+function removeColumnGlobalMatrix (global_var) {
+	if (global_var.columns == 0) {
+		return;
+	}
+
+	global_var.columns --;
+
+	for (var i = 0; i < global_var.rows; i++) {
+		global_var.value[i].splice(global_var.value[i].length - 1, 1);
+	}
+}
+
+function addColumnGlobalMatrix (global_var) {
+	global_var.columns ++;
+
+	if (global_var.type == Types.INTEGER) {
+		for (var i = 0; i < global_var.rows; i++) {
+			global_var.value[i].push(1);
+		}
+	}
+	if (global_var.type == Types.REAL) {
+		for (var i = 0; i < global_var.rows; i++) {
+			global_var.value[i].push(1.0);
+		}
+	}
+	if (global_var.type == Types.TEXT) {
+		for (var i = 0; i < global_var.rows; i++) {
+			global_var.value[i].push(LocalizedStrings.getUI('text_start'));
+		}
+	}
+	if (global_var.type == Types.BOOLEAN) {
+		for (var i = 0; i < global_var.rows; i++) {
+			global_var.value[i].push(true);
+		}
+	}
+}
+
+function removeLineGlobalMatrix (global_var) {
+	if (global_var.rows == 0) {
+		return;
+	}
+
+	global_var.rows --;
+	global_var.value.splice(global_var.value.length - 1, 1);
+}
+
+function addLineGlobalMatrix (global_var) {
+	global_var.rows ++;
+
+	if (global_var.type == Types.INTEGER) {
+		var n_l = [];
+		for (var i = 0; i < global_var.columns; i++) {
+			n_l.push(1);
+		}
+		global_var.value.push(n_l);
+	}
+	if (global_var.type == Types.REAL) {
+		var n_l = [];
+		for (i = 0; i < global_var.columns; i++) {
+			n_l.push(1.0);
+		}
+		global_var.value.push(n_l);
+	}
+
+	if (global_var.type == Types.TEXT) {
+		var n_l = [];
+		for (i = 0; i < global_var.columns; i++) {
+			n_l.push(LocalizedStrings.getUI('text_start'));
+		}
+		global_var.value.push(n_l);
+	}
+
+	if (global_var.type == Types.BOOLEAN) {
+		var n_l = [];
+		for (i = 0; i < global_var.columns; i++) {
+			n_l.push(true);
+		}
+		global_var.value.push(n_l);
+	}
+}
+
+function alternateBooleanGlobalMatrixValue (global_var, row, index, value_container) {
+	global_var.value[row][index] = !global_var.value[row][index];
+	$(value_container).find('.span_value_variable').text(global_var.value[row][index]);
+}
+
+function renderValues (global_var, global_container) {
+
+	var ret = "";
+	var j = 0;
+
+	if (global_var.dimensions == 0) {
+		if (global_var.type == Types.REAL) {
+			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value.toFixed(1)+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+		} else {
+			if (global_var.type == Types.BOOLEAN) {
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+global_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function boolean_simple_type"></i></div> ';
+			} else {
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+			}
+		}
+	} else {
+		ret += '<table class="tabela_var">';
+
+		if (global_var.dimensions == 1) {
+			ret += '<tr>';
+			if (global_var.type == Types.REAL) {
+				for (var k = 0; k < global_var.columns; k++) {
+					ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+global_var.value[k].toFixed(1)+'</span></td>';
+				}
+			} else {
+				for (var k = 0; k < global_var.columns; k++) {
+					if (global_var.type == Types.BOOLEAN) {
+						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="'+k+'">'+global_var.value[k]+'</span></td>';
+					} else {
+						ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+global_var.value[k]+'</span>'+'</td>';
+					}
+				}
+			}
+			
+			ret += '</tr>';
+			ret += '</table>';
+
+			ret += '<div class="buttons_manage_columns"><i class="ui icon minus square outline remove_global_vector_column"></i>'
+		    	+ ' <i class="ui icon plus square outline add_global_vector_column"></i></div>';
+		}
+
+		if (global_var.dimensions == 2) {
+			if (global_var.type == Types.REAL) {
+				for (var l = 0; l < global_var.rows; l++) {
+    				ret += '<tr>';
+    				for (var k = 0; k < global_var.columns; k++) {
+    					ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k].toFixed(1)+'</span>'+'</td>';
+    				} 
+    				ret += '</tr>';
+				}
+			} else {
+				for (var l = 0; l < global_var.rows; l++) {
+    				ret += '<tr>';
+    				for (var k = 0; k < global_var.columns; k++) {
+    					if (global_var.type == Types.BOOLEAN) { 
+    						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k]+'</span></td>';
+    					} else {
+    						ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k]+'</span></td>';
+    					}
+    				} 
+    				ret += '</tr>';
+				}
+			}
+			if (global_var.rows == 0) {
+				ret += '<tr><td></td></tr>';
+			}
+			ret += '<tr><td colspan="'+global_var.columns+'" class="tr_manage_lines"><i class="ui icon minus square outline remove_global_matrix_line"></i>'
+		    	+ ' <i class="ui icon plus square outline add_global_matrix_line"></i></td></tr>';
+			ret += '</table>';
+
+			ret += '<div class="buttons_manage_columns"><i class="ui icon minus square outline remove_global_matrix_column"></i>'
+		    	+ ' <i class="ui icon plus square outline add_global_matrix_column"></i></div>';
+		}
+		
+	}
+
+	$( global_container ).find( ".div_valor_var" ).html('');
+
+	ret = $(ret);
+
+	$(ret).find('.span_value_variable').data('associatedOject', global_var);
+
+	$( ret ).find( ".boolean_simple_type" ).on('click', function(e){
+		alternateBooleanGlobalValue(global_var, this.parentNode);
+	});
+	$( ret ).find( ".simple_var" ).on('click', function(e){
+		enableGlobalValueUpdate(global_var, this.parentNode);
+	});
+
+	$( ret ).find( ".boolean_vector_var" ).on('click', function(e){
+		alternateBooleanGlobalVectorValue(global_var, $(this).data('index'), this.parentNode);
+	});
+	$( ret ).find( ".vector_var" ).on('click', function(e){
+		enableGlobalVectorValueUpdate(global_var, $(this).data('index'), this.parentNode);
+	});
+	$( ret ).find( ".remove_global_vector_column" ).on('click', function(e){
+		removeGlobalColumnVector(global_var);
+		$( global_container ).find( ".div_valor_var" ).html('');
+		renderValues(global_var, global_container);
+	});
+	$( ret ).find( ".add_global_vector_column" ).on('click', function(e){
+		addGlobalColumnVector(global_var);
+		$( global_container ).find( ".div_valor_var" ).html('');
+		renderValues(global_var, global_container);
+	});
+	$( ret ).find( ".remove_global_matrix_column" ).on('click', function(e){
+		removeColumnGlobalMatrix(global_var);
+		$( global_container ).find( ".div_valor_var" ).html('');
+		renderValues(global_var, global_container);
+	});
+	$( ret ).find( ".add_global_matrix_column" ).on('click', function(e){
+		addColumnGlobalMatrix(global_var);
+		$( global_container ).find( ".div_valor_var" ).html('');
+		renderValues(global_var, global_container);
+	});
+	$( ret ).find( ".remove_global_matrix_line" ).on('click', function(e){
+		removeLineGlobalMatrix(global_var);
+		$( global_container ).find( ".div_valor_var" ).html('');
+		renderValues(global_var, global_container);
+	});
+	$( ret ).find( ".add_global_matrix_line" ).on('click', function(e){
+		addLineGlobalMatrix(global_var);
+		$( global_container ).find( ".div_valor_var" ).html('');
+		renderValues(global_var, global_container);
+	});
+	$( ret ).find( ".boolean_matrix_var" ).on('click', function(e){
+		alternateBooleanGlobalMatrixValue(global_var, $(this).data('row'), $(this).data('index'), this.parentNode);
+	});
+	$( ret ).find( ".matrix_var" ).on('click', function(e){
+		enableGlobalMatrixValueUpdate(global_var, $(this).data('row'), $(this).data('index'), this.parentNode);
+	});
+	$( global_container ).find( ".div_valor_var" ).append(ret);
+
+}
+
+function addHandlers (global_container) {
+	var global_var = $(global_container).data('associatedOject'); 
+	// Manage constant option:
+	$( global_container ).find( ".alternate_constant" ).on('click', function(e){
+		toggleConstant(global_var);
+
+		$( this ).removeClass( "on off" );
+		if (global_var.is_constant) {
+			$( this ).addClass( "on" );
+		} else {
+			$( this ).addClass( "off" );
+		}
+	});
+
+	// Manage global name: 
+	$( global_container ).find( ".enable_edit_name_parameter" ).on('click', function(e){
+		enableNameUpdate(global_container);
+	});
+
+	// Menu to change type:
+	$( global_container ).find('.ui.dropdown.global_type').dropdown({
+	    onChange: function(value, text, $selectedItem) {
+	    	if ($($selectedItem).data('dimensions')) {
+	    		updateType(global_var, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
+	    	} else {
+	    		updateType(global_var, Types[$($selectedItem).data('type')]);
+	    	}
+
+	    	renderValues(global_var, global_container);
+	    }
+	});
+
+	// Remove global: 
+	$( global_container ).find( ".remove_global" ).on('click', function(e){
+		removeGlobal(global_var, global_container);
+	});
+
+}
+
+function renderGlobal (global_var) {
+
+	var element = '<div class="ui label global_container"><div class="global_const">const: ';
+
+	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div><span class="span_name_variable enable_edit_name_parameter">'+global_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_parameter"></i>';
+ 	
+ 	element += '<div class="ui dropdown global_type">';
+
+  	if (global_var.dimensions > 0) {
+  		element += '<div class="text">'+ i18n('ui:vector') + ':' + LocalizedStrings.getUI(global_var.type);
+  		for (var i = 0; i < global_var.dimensions; i ++) {
+  			element += ' [ ] ';
+  		}
+  		element += '</div>';
+  	} else {
+  		element += '<div class="text">' + LocalizedStrings.getUI(global_var.type.toLowerCase()) + '</div>';
+  	}
+	element += '<i class="dropdown icon"></i><div class="menu">';
+
+	for (var tm in Types) {
+  		if (tm == Types.VOID.toUpperCase()) {
+  			continue;
+  		}
+  		element += '<div class="item ' + (global_var.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
+	}
+
+  	for (var tm in Types) {
+  		if (tm == Types.VOID.toUpperCase()) {
+  			continue;
+  		}
+  		element += '<div class="item">'
+	    	+ '<i class="dropdown icon"></i>'
+	    	+  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
+	      	+  '<div class="menu">'
+		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
+		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
+	      	+  '</div>'
+	    	+ '</div>';	
+  	}
+
+    element += '</div></div>  = ';
+
+	element += '<div class="ui div_valor_var">'+global_var.value+'</div>';    
+
+	element += ' <i class="red icon times remove_global"></i></div>';
+
+	var complete_element = $(element);
+
+	$(complete_element).data('associatedOject', global_var);
+
+	$('.list_globals').append(complete_element);
+
+	addHandlers(complete_element);
+
+	renderValues(global_var, complete_element);
+}
+
+var opened_name_value_matrix_global_v = false;
+var opened_input_value_matrix_global_v = null;
+function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
+	if (opened_name_value_matrix_global_v) {
+		$(opened_input_value_matrix_global_v).focus();
+		return;
+	}
+	opened_name_value_matrix_global_v = true;
+
+	$(parent_node).find('.span_value_variable').text('');
+
+	if (global_var.type == Types.REAL) {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[row][index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	} else {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[row][index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	}
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_value_matrix_global_v = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			if (global_var.type == Types.REAL) {
+				global_var.value[row][index] = parseFloat($(this).val().trim());
+
+				$(parent_node).find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+			} else {
+				if (global_var.type == Types.INTEGER) {
+					global_var.value[row][index] = parseInt($(this).val().trim());
+				} else {
+					global_var.value[row][index] = $(this).val().trim();
+				}
+				$(parent_node).find('.span_value_variable').text(global_var.value[row][index]);
+			}
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_value_matrix_global_v = false;
+		opened_input_value_matrix_global_v = false;
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				if (global_var.type == Types.REAL) {
+					global_var.value[row][index] = parseFloat($(this).val().trim());
+
+					$(parent_node).find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+				} else {
+					if (global_var.type == Types.INTEGER) {
+						global_var.value[row][index] = parseInt($(this).val().trim());
+					} else {
+						global_var.value[row][index] = $(this).val().trim();
+					}
+					$(parent_node).find('.span_value_variable').text(global_var.value[row][index]);
+				}
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_matrix_global_v = false;
+			opened_input_value_matrix_global_v = false;
+		}
+		if(code == 27) {
+			if (global_var.type == Types.REAL) {
+				$(parent_node).find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+			} else {
+				$(parent_node).find('.span_value_variable').text(global_var.value[row][index]);
+			}
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_matrix_global_v = false;
+			opened_input_value_matrix_global_v = false;
+		}
+	});
+}
+
+var opened_name_value_global_var = false;
+var opened_input_value_global_ar = null;
+function enableGlobalValueUpdate (global_var, parent_node) {
+	if (opened_name_value_global_var) {
+		$(opened_input_value_global_ar).focus();
+		return;
+	}
+	opened_name_value_global_var = true;
+
+	$(parent_node).find('.span_value_variable').text('');
+	if (global_var.type == Types.REAL) {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value.toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	} else {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	}
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_value_global_ar = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			if (global_var.type == Types.REAL) {
+				global_var.value = parseFloat($(this).val().trim());
+				$(parent_node).find('.span_value_variable').text(global_var.value.toFixed(1));
+			} else{
+				if (global_var.type == Types.INTEGER) {
+					global_var.value = parseInt($(this).val().trim());
+				} else {
+					global_var.value = $(this).val().trim();
+				}
+				$(parent_node).find('.span_value_variable').text(global_var.value);
+				
+			}
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_value_global_var = false;
+		opened_input_value_global_ar = false;
+
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				if (global_var.type == Types.REAL) {
+					global_var.value = parseFloat($(this).val().trim());
+					$(parent_node).find('.span_value_variable').text(global_var.value.toFixed(1));
+				} else{
+					if (global_var.type == Types.INTEGER) {
+						global_var.value = parseInt($(this).val().trim());
+					} else {
+						global_var.value = $(this).val().trim();
+					}
+					$(parent_node).find('.span_value_variable').text(global_var.value);
+				}
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_global_var = false;
+			opened_input_value_global_ar = false;
+
+		}
+		if(code == 27) {
+			if (global_var.type == Types.REAL) {
+				$(parent_node).find('.span_value_variable').text(global_var.value.toFixed(1));
+			} else{
+				$(parent_node).find('.span_value_variable').text(global_var.value);
+			}
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_global_var = false;
+			opened_input_value_global_ar = false;
+		}
+	});
+}
+
+
+var opened_name_global = false;
+var opened_input_global = null;
+function enableNameUpdate (global_container) {
+
+	var global_var = $(global_container).data('associatedOject'); 
+
+	if (opened_name_global) {
+		$(opened_input_global).focus();
+		return;
+	}
+	opened_name_global = true;
+
+	$( global_container ).find('.span_name_variable').text('');
+	$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+global_var.name+"' />" ).insertBefore($(global_container).find('.span_name_variable'));
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_global = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			updateName(global_var, $(this).val().trim());
+			$(global_container).find('.span_name_variable').text(global_var.name);
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_global = false;
+		opened_input_global = false;
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				updateName(global_var, $(this).val().trim());
+				$(global_container).find('.span_name_variable').text(global_var.name);
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_global = false;
+			opened_input_global = false;
+		}
+		if(code == 27) {
+
+			$(global_container).find('.span_name_variable').text(global_var.name);
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_global = false;
+			opened_input_global = false;
+		}
+	});
+	
+}
+
+
+var opened_name_value_vector_global_ = false;
+var opened_input_value_vector_global_ = null;
+function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
+	if (opened_name_value_vector_global_) {
+		$(opened_input_value_vector_global_).focus();
+		return;
+	}
+	opened_name_value_vector_global_ = true;
+
+	$(parent_node).find('.span_value_variable').text('');
+
+	if (global_var.type == Types.REAL) {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	} else {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	}
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_value_vector_global_ = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			if (global_var.type == Types.REAL) {
+				global_var.value[index] = parseFloat($(this).val().trim());
+
+				$(parent_node).find('.span_value_variable').text(global_var.value[index].toFixed(1));
+			} else {
+
+				if (global_var.type == Types.INTEGER) {
+					global_var.value[index] = parseInt($(this).val().trim());
+				} else {
+					global_var.value[index] = $(this).val().trim();
+				}
+
+				$(parent_node).find('.span_value_variable').text(global_var.value[index]);
+
+			}
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_value_vector_global_ = false;
+		opened_input_value_vector_global_ = false;
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				if (global_var.type == Types.REAL) {
+					global_var.value[index] = parseFloat($(this).val().trim());
+
+					$(parent_node).find('.span_value_variable').text(global_var.value[index].toFixed(1));
+				} else {
+
+					if (global_var.type == Types.INTEGER) {
+						global_var.value[index] = parseInt($(this).val().trim());
+					} else {
+						global_var.value[index] = $(this).val().trim();
+					}
+
+					$(parent_node).find('.span_value_variable').text(global_var.value[index]);
+
+				}
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_vector_global_ = false;
+			opened_input_value_vector_global_ = false;
+		}
+		if(code == 27) {
+			if (global_var.type == Types.REAL) {
+				$(parent_node).find('.span_value_variable').text(global_var.value[index].toFixed(1));
+			} else {
+				$(parent_node).find('.span_value_variable').text(global_var.value[index]);
+			}
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_vector_global_ = false;
+			opened_input_value_vector_global_ = false;
+		}
+	});
+}
+
+
+$.fn.textWidth = function(text, font) {
+    
+    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
+    
+    $.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));
+    
+    return $.fn.textWidth.fakeEl.width();
+};

js/visualUI/ivprog_elements.js

@@ -0,0 +1,149 @@
+import { Types } from './../ast/types';
+
+export const COMMAND_TYPES = Object.freeze({function:"function", comment:"comment", reader:"reader", writer:"writer", attribution:"attribution", iftrue:"iftrue",
+ repeatNtimes:"repeatNtimes", whiletrue:"whiletrue", dowhiletrue:"dowhiletrue", switch:"switch", functioncall:"functioncall"});
+
+export class Variable {
+
+  constructor (type, name, value, dimensions = 0, is_constant = false, rows = 0, columns = 0) {
+    this.type = type;
+    this.name = name;
+    this.value = value;
+    this.dimensions = dimensions;
+    this.is_constant = is_constant;
+    this.rows = rows;
+    this.columns = columns;
+  }
+}
+
+export class Function {
+
+  constructor (name, return_type = Types.VOID, return_dimensions = 0, parameters_list = null, is_main = false, is_hidden = false, variables_list = [], function_comment = null) {
+    this.type = COMMAND_TYPES.function;
+    this.name = name;
+    this.return_type = return_type;
+    this.return_dimensions = return_dimensions;
+    this.parameters_list = parameters_list;
+    this.is_main = is_main;
+    this.is_hidden = is_hidden;
+    this.variables_list = variables_list;
+    this.function_comment = function_comment;
+    this.commands = [];
+  }
+}
+
+export class Comment {
+  
+  constructor (comment_text) {
+    this.type = COMMAND_TYPES.comment;
+    this.comment_text = comment_text;
+  }
+}
+
+export class Reader {
+  
+  constructor (variable = null, row = null, column = null) {
+    this.type = COMMAND_TYPES.reader;
+    this.variable = variable;
+    this.row = row;
+    this.column = column;
+  }
+}
+
+export class Writer {
+
+  constructor (content) {
+    this.type = COMMAND_TYPES.writer;
+    this.content = content;
+  }
+}
+
+export class Attribution {
+
+  constructor (variable, expression) {
+    this.type = COMMAND_TYPES.attribution;
+    this.variable = variable;
+    this.expression = expression;
+  }
+}
+
+export class IfTrue {
+
+  constructor (expression, commands_block, commands_else) {
+    this.type = COMMAND_TYPES.iftrue;
+    this.expression = expression;
+    this.commands_block = commands_block;
+    this.commands_else = commands_else;
+  }
+}
+
+export class RepeatNTimes {
+
+  constructor (expression1, expression2, expression3, commands_block) {
+    this.type = COMMAND_TYPES.repeatNtimes;
+    this.expression1 = expression1;
+    this.expression2 = expression2;
+    this.expression3 = expression3;
+    this.commands_block = commands_block;
+  }
+}
+
+export class WhileTrue {
+
+  constructor (expression, commands_block) {
+    this.type = COMMAND_TYPES.whiletrue;
+    this.expression = expression;
+    this.commands_block = commands_block;
+  }
+}
+
+export class DoWhileTrue {
+
+  constructor (expression, commands_block) {
+    this.type = COMMAND_TYPES.dowhiletrue;
+    this.expression = expression;
+    this.commands_block = commands_block;
+  }
+}
+
+export class Switch {
+
+  constructor (variable, cases, commands_blocks) {
+    this.type = COMMAND_TYPES.switch;
+    this.variable = variable;
+    this.cases = cases;
+    this.commands_blocks = commands_blocks;
+  }
+}
+
+export class FunctionCall {
+
+  constructor (function_called, parameters_list) {
+    this.type = COMMAND_TYPES.functioncall;
+    this.function_called = function_called;
+    this.parameters_list = parameters_list;
+  }
+}
+
+export class Program {
+
+  constructor () {
+    this.functions = [];
+    this.globals = [];
+  }
+
+  addFunction (function_to_add) {
+    this.functions.push(function_to_add);
+  }
+
+  addVariable (function_to_receive, variable) {
+    if (this.functions[function_to_receive].variable === null) {
+      this.functions[function_to_receive].variables_list = [];
+    }
+    this.functions[function_to_receive].variables_list.push(variable);
+  }
+
+  addGlobal (variable) {
+    this.globals.push(variable);
+  }
+}

js/visualUI/types.js

@@ -0,0 +1,7 @@
+export const Types = Object.freeze({
+  INTEGER: "integer",
+  REAL: "real",
+  TEXT: "text",
+  BOOLEAN: "boolean",
+  VOID: "void"
+});

js/visualUI/variables.js

@@ -0,0 +1,802 @@
+import $ from 'jquery';
+import jQuery from 'jquery';
+import { Types } from './types';
+import * as Models from './ivprog_elements';
+import { LocalizedStrings } from './../services/localizedStringsService';
+
+
+window.jQuery = jQuery;
+
+import '../semantic/semantic.min.js';
+
+var counter_new_variables = 0;
+
+export function addVariable (function_obj, function_container) {
+	var new_var = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI('new_variable') + '_' + counter_new_variables, 1);
+	if (function_obj.variables_list == null) {
+		function_obj.variables_list = [];
+	}
+	function_obj.variables_list.push(new_var);
+
+	counter_new_variables ++;
+
+	renderVariable(function_container, new_var, function_obj);
+}
+
+function updateName (variable_obj, new_name) {
+	variable_obj.name = new_name;
+}
+
+function removeVariable (variable_obj, variable_container) {
+	var function_associated = $(variable_container).data('associatedFunction');
+
+	var index = function_associated.variables_list.indexOf(variable_obj);
+	if (index > -1) {
+	  function_associated.variables_list.splice(index, 1);
+	}
+	$(variable_container).remove();
+}
+
+function updateType (variable_obj, new_type, new_dimensions = 0) {
+	variable_obj.type = new_type;
+	variable_obj.dimensions = new_dimensions;
+
+	if (new_dimensions > 0) {
+		variable_obj.rows = new_dimensions;
+		variable_obj.columns = 2;
+	}
+
+	updateInitialValues(variable_obj);
+}
+
+function addHandlers (variable_obj, variable_container) {
+
+	// Manage variable name: 
+	$( variable_container ).find( ".enable_edit_name_variable" ).on('click', function(e){
+		enableNameUpdate(variable_obj, variable_container);
+	});
+
+	// Menu to change type:
+	$( variable_container ).find('.ui.dropdown.variable_type').dropdown({
+	    onChange: function(value, text, $selectedItem) {
+	    	if ($($selectedItem).data('dimensions')) {
+	    		updateType(variable_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
+	    	} else {
+	    		updateType(variable_obj, Types[$($selectedItem).data('type')]);
+	    	}
+
+	    	renderValues(variable_obj, variable_container);
+	    }
+	});
+
+	// Remove global: 
+	$( variable_container ).find( ".remove_variable" ).on('click', function(e){
+		removeVariable(variable_obj, variable_container);
+	});
+
+}
+
+
+function renderVariable(function_container, new_var, function_obj) {
+
+	var element = '<div class="ui label variable_container">';
+
+	element += '<span class="span_name_variable enable_edit_name_variable">'+new_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_variable"></i>';
+ 	
+ 	element += '<div class="ui dropdown variable_type">';
+
+  	if (new_var.dimensions > 0) {
+  		element += '<div class="text">'+ LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(new_var.type.toLowerCase());
+  		for (var i = 0; i < new_var.dimensions; i ++) {
+  			element += ' [ ] ';
+  		}
+  		element += '</div>';
+  	} else {
+  		element += '<div class="text">' + LocalizedStrings.getUI(new_var.type.toLowerCase()) + '</div>';
+  	}
+	element += '<i class="dropdown icon"></i><div class="menu">';
+
+	for (var tm in Types) {
+  		if (tm == Types.VOID.toUpperCase()) {
+  			continue;
+  		}
+  		element += '<div class="item ' + (new_var.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
+	}
+
+  	for (var tm in Types) {
+  		if (tm == Types.VOID.toUpperCase()) {
+  			continue;
+  		}
+  		element += '<div class="item">'
+	    	+ '<i class="dropdown icon"></i>'
+	    	+  LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
+	      	+  '<div class="menu">'
+		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
+		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
+	      	+  '</div>'
+	    	+ '</div>';	
+  	}
+
+    element += '</div></div>  = ';
+
+	element += '<div class="ui div_valor_var">'+new_var.value+'</div>';    
+
+	element += ' <i class="red icon times remove_variable"></i></div>';
+
+	element = $(element);
+
+	$(element).data('associatedFunction', function_obj);
+
+	$(function_container).find('.variables_list_div').append(element);
+
+	addHandlers(new_var, element);
+
+	renderValues(new_var, element);
+}
+
+function renderValues (new_var, variable_container) {
+
+	var ret = "";
+	var j = 0;
+
+	if (new_var.dimensions == 0) {
+		if (new_var.type == Types.REAL) {
+			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+new_var.value.toFixed(1)+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+		} else {
+			if (new_var.type == Types.BOOLEAN) {
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+new_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function boolean_simple_type"></i></div> ';
+			} else {
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+new_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+			}
+		}
+	} else {
+		ret += '<table class="tabela_var">';
+
+		if (new_var.dimensions == 1) {
+			ret += '<tr>';
+			if (new_var.type == Types.REAL) {
+				for (var k = 0; k < new_var.columns; k++) {
+					ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+new_var.value[k].toFixed(1)+'</span></td>';
+				}
+			} else {
+				for (var k = 0; k < new_var.columns; k++) {
+					if (new_var.type == Types.BOOLEAN) {
+						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="'+k+'">'+new_var.value[k]+'</span></td>';
+					} else {
+						ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+new_var.value[k]+'</span>'+'</td>';
+					}
+				}
+			}
+			
+			ret += '</tr>';
+			ret += '</table>';
+
+			ret += '<div class="buttons_manage_columns"><i class="ui icon minus square outline remove_global_vector_column"></i>'
+		    	+ ' <i class="ui icon plus square outline add_global_vector_column"></i></div>';
+		}
+
+		if (new_var.dimensions == 2) {
+			if (new_var.type == Types.REAL) {
+				for (var l = 0; l < new_var.rows; l++) {
+    				ret += '<tr>';
+    				for (var k = 0; k < new_var.columns; k++) {
+    					ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+new_var.value[l][k].toFixed(1)+'</span>'+'</td>';
+    				} 
+    				ret += '</tr>';
+				}
+			} else {
+				for (var l = 0; l < new_var.rows; l++) {
+    				ret += '<tr>';
+    				for (var k = 0; k < new_var.columns; k++) {
+    					if (new_var.type == Types.BOOLEAN) { 
+    						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+new_var.value[l][k]+'</span></td>';
+    					} else {
+    						ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+new_var.value[l][k]+'</span></td>';
+    					}
+    				} 
+    				ret += '</tr>';
+				}
+			}
+			if (new_var.rows == 0) {
+				ret += '<tr><td></td></tr>';
+			}
+			ret += '<tr><td colspan="'+new_var.columns+'" class="tr_manage_lines"><i class="ui icon minus square outline remove_global_matrix_line"></i>'
+		    	+ ' <i class="ui icon plus square outline add_global_matrix_line"></i></td></tr>';
+			ret += '</table>';
+
+			ret += '<div class="buttons_manage_columns"><i class="ui icon minus square outline remove_global_matrix_column"></i>'
+		    	+ ' <i class="ui icon plus square outline add_global_matrix_column"></i></div>';
+		}
+		
+	}
+
+	$( variable_container ).find( ".div_valor_var" ).html('');
+
+	ret = $(ret);
+
+	$(ret).find('.span_value_variable').data('associatedOject', new_var);
+
+	$( ret ).find( ".boolean_simple_type" ).on('click', function(e){
+		alternateBooleanValue(new_var, this.parentNode);
+	});
+	$( ret ).find( ".simple_var" ).on('click', function(e){
+		enableValueUpdate(new_var, this.parentNode);
+	});
+
+	$( ret ).find( ".boolean_vector_var" ).on('click', function(e){
+		alternateBooleanVectorValue(new_var, $(this).data('index'), this.parentNode);
+	});
+	$( ret ).find( ".vector_var" ).on('click', function(e){
+		enableVectorValueUpdate(new_var, $(this).data('index'), this.parentNode);
+	});
+	$( ret ).find( ".remove_global_vector_column" ).on('click', function(e){
+		removeColumnVector(new_var);
+		$( variable_container ).find( ".div_valor_var" ).html('');
+		renderValues(new_var, variable_container);
+	});
+	$( ret ).find( ".add_global_vector_column" ).on('click', function(e){
+		addColumnVector(new_var);
+		$( variable_container ).find( ".div_valor_var" ).html('');
+		renderValues(new_var, variable_container);
+	});
+	$( ret ).find( ".remove_global_matrix_column" ).on('click', function(e){
+		removeColumnMatrix(new_var);
+		$( variable_container ).find( ".div_valor_var" ).html('');
+		renderValues(new_var, variable_container);
+	});
+	$( ret ).find( ".add_global_matrix_column" ).on('click', function(e){
+		addColumnMatrix(new_var);
+		$( variable_container ).find( ".div_valor_var" ).html('');
+		renderValues(new_var, variable_container);
+	});
+	$( ret ).find( ".remove_global_matrix_line" ).on('click', function(e){
+		removeLineMatrix(new_var);
+		$( variable_container ).find( ".div_valor_var" ).html('');
+		renderValues(new_var, variable_container);
+	});
+	$( ret ).find( ".add_global_matrix_line" ).on('click', function(e){
+		addLineMatrix(new_var);
+		$( variable_container ).find( ".div_valor_var" ).html('');
+		renderValues(new_var, variable_container);
+	});
+	$( ret ).find( ".boolean_matrix_var" ).on('click', function(e){
+		alternateBooleanMatrixValue(new_var, $(this).data('row'), $(this).data('index'), this.parentNode);
+	});
+	$( ret ).find( ".matrix_var" ).on('click', function(e){
+		enableMatrixValueUpdate(new_var, $(this).data('row'), $(this).data('index'), this.parentNode);
+	});
+	$( variable_container ).find( ".div_valor_var" ).append(ret);
+
+}
+
+function alternateBooleanMatrixValue (var_obj, row, index, value_container) {
+	var_obj.value[row][index] = !var_obj.value[row][index];
+	$(value_container).find('.span_value_variable').text(var_obj.value[row][index]);
+}
+
+function addLineMatrix (var_obj) {
+	var_obj.rows ++;
+
+	if (var_obj.type == Types.INTEGER) {
+		var n_l = [];
+		for (var i = 0; i < var_obj.columns; i++) {
+			n_l.push(1);
+		}
+		var_obj.value.push(n_l);
+	}
+	if (var_obj.type == Types.REAL) {
+		var n_l = [];
+		for (i = 0; i < var_obj.columns; i++) {
+			n_l.push(1.0);
+		}
+		var_obj.value.push(n_l);
+	}
+
+	if (var_obj.type == Types.TEXT) {
+		var n_l = [];
+		for (i = 0; i < var_obj.columns; i++) {
+			n_l.push(LocalizedStrings.getUI('text_start'));
+		}
+		var_obj.value.push(n_l);
+	}
+
+	if (var_obj.type == Types.BOOLEAN) {
+		var n_l = [];
+		for (i = 0; i < var_obj.columns; i++) {
+			n_l.push(true);
+		}
+		var_obj.value.push(n_l);
+	}
+}
+
+function removeLineMatrix (var_obj) {
+	if (var_obj.rows == 0) {
+		return;
+	}
+
+	var_obj.rows --;
+	var_obj.value.splice(var_obj.value.length - 1, 1);
+}
+
+function addColumnMatrix (var_obj) {
+	var_obj.columns ++;
+
+	if (var_obj.type == Types.INTEGER) {
+		for (var i = 0; i < var_obj.rows; i++) {
+			var_obj.value[i].push(1);
+		}
+	}
+	if (var_obj.type == Types.REAL) {
+		for (var i = 0; i < var_obj.rows; i++) {
+			var_obj.value[i].push(1.0);
+		}
+	}
+	if (var_obj.type == Types.TEXT) {
+		for (var i = 0; i < var_obj.rows; i++) {
+			var_obj.value[i].push(LocalizedStrings.getUI('text_start'));
+		}
+	}
+	if (var_obj.type == Types.BOOLEAN) {
+		for (var i = 0; i < var_obj.rows; i++) {
+			var_obj.value[i].push(true);
+		}
+	}
+}
+
+function removeColumnMatrix (var_obj) {
+	if (var_obj.columns == 0) {
+		return;
+	}
+
+	var_obj.columns --;
+
+	for (var i = 0; i < var_obj.rows; i++) {
+		var_obj.value[i].splice(var_obj.value[i].length - 1, 1);
+	}
+}
+
+function addColumnVector (var_obj) {
+	var_obj.columns ++;
+
+	if (var_obj.type == Types.INTEGER) {
+		var_obj.value.push(1);
+	}
+	if (var_obj.type == Types.REAL) {
+		var_obj.value.push(1.0);
+	}
+	if (var_obj.type == Types.TEXT) {
+		var_obj.value.push(LocalizedStrings.getUI('text_start'));
+	}
+	if (var_obj.type == Types.BOOLEAN) {
+		var_obj.value.push(true);
+	}
+}
+
+function removeColumnVector (var_obj) {
+	if (var_obj.columns == 0) {
+		return;
+	}
+
+	var_obj.columns --;
+	var_obj.value.splice(var_obj.value.length - 1, 1);
+}
+
+function alternateBooleanValue (var_obj, value_container) {
+	var_obj.value = !var_obj.value;
+	$(value_container).find('.span_value_variable').text(var_obj.value);
+}
+
+function alternateBooleanVectorValue (var_obj, index, value_container) {
+	var_obj.value[index] = !var_obj.value[index];
+	$(value_container).find('.span_value_variable').text(var_obj.value[index]);
+}
+
+function updateInitialValues (variable_obj) {
+	if (variable_obj.type == Types.INTEGER) {
+		if (variable_obj.dimensions == 0) {
+			variable_obj.value = 1;
+		}
+		if (variable_obj.dimensions == 1) {
+			variable_obj.value = [1, 1];
+		}
+		if (variable_obj.dimensions == 2) {
+			variable_obj.value = [[1, 1], [1, 1]];
+		}
+	}
+
+	if (variable_obj.type == Types.REAL) {
+		if (variable_obj.dimensions == 0) {
+			variable_obj.value = 1.0;
+		}
+		if (variable_obj.dimensions == 1) {
+			variable_obj.value = [1.0, 1.0];
+		}
+		if (variable_obj.dimensions == 2) {
+			variable_obj.value = [[1.0, 1.0], [1.0, 1.0]];
+		}
+	}
+
+	if (variable_obj.type == Types.TEXT) {
+		if (variable_obj.dimensions == 0) {
+			variable_obj.value = LocalizedStrings.getUI('text_start');
+		}
+		if (variable_obj.dimensions == 1) {
+			variable_obj.value = [LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')];
+		}
+		if (variable_obj.dimensions == 2) {
+			variable_obj.value = [[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')], 
+									[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')]];
+		}
+	}
+
+	if (variable_obj.type == Types.BOOLEAN) {
+		if (variable_obj.dimensions == 0) {
+			variable_obj.value = true;
+		}
+		if (variable_obj.dimensions == 1) {
+			variable_obj.value = [true, true];
+		}
+		if (variable_obj.dimensions == 2) {
+			variable_obj.value = [[true, true], [true, true]];
+		}
+	}
+}
+
+var opened_name_value_vector_global_ = false;
+var opened_input_value_vector_global_ = null;
+function enableVectorValueUpdate (var_obj, index, parent_node) {
+	if (opened_name_value_vector_global_) {
+		$(opened_input_value_vector_global_).focus();
+		return;
+	}
+	opened_name_value_vector_global_ = true;
+
+	$(parent_node).find('.span_value_variable').text('');
+
+	if (var_obj.type == Types.REAL) {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	} else {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	}
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_value_vector_global_ = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			if (var_obj.type == Types.REAL) {
+				var_obj.value[index] = parseFloat($(this).val().trim());
+
+				$(parent_node).find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+			} else {
+
+				if (var_obj.type == Types.INTEGER) {
+					var_obj.value[index] = parseInt($(this).val().trim());
+				} else {
+					var_obj.value[index] = $(this).val().trim();
+				}
+
+				$(parent_node).find('.span_value_variable').text(var_obj.value[index]);
+
+			}
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_value_vector_global_ = false;
+		opened_input_value_vector_global_ = false;
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				if (var_obj.type == Types.REAL) {
+					var_obj.value[index] = parseFloat($(this).val().trim());
+
+					$(parent_node).find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+				} else {
+
+					if (var_obj.type == Types.INTEGER) {
+						var_obj.value[index] = parseInt($(this).val().trim());
+					} else {
+						var_obj.value[index] = $(this).val().trim();
+					}
+
+					$(parent_node).find('.span_value_variable').text(var_obj.value[index]);
+
+				}
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_vector_global_ = false;
+			opened_input_value_vector_global_ = false;
+		}
+		if(code == 27) {
+			if (global_var.type == Types.REAL) {
+				$(parent_node).find('.span_value_variable').text(var_obj.value[index].toFixed(1));
+			} else {
+				$(parent_node).find('.span_value_variable').text(var_obj.value[index]);
+			}
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_vector_global_ = false;
+			opened_input_value_vector_global_ = false;
+		}
+	});
+}
+
+var opened_name_value_global_var = false;
+var opened_input_value_global_ar = null;
+function enableValueUpdate (var_obj, parent_node) {
+	if (opened_name_value_global_var) {
+		$(opened_input_value_global_ar).focus();
+		return;
+	}
+	opened_name_value_global_var = true;
+
+	$(parent_node).find('.span_value_variable').text('');
+	if (var_obj.type == Types.REAL) {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value.toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	} else {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	}
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_value_global_ar = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			if (var_obj.type == Types.REAL) {
+				var_obj.value = parseFloat($(this).val().trim());
+				$(parent_node).find('.span_value_variable').text(var_obj.value.toFixed(1));
+			} else{
+				if (var_obj.type == Types.INTEGER) {
+					var_obj.value = parseInt($(this).val().trim());
+				} else {
+					var_obj.value = $(this).val().trim();
+				}
+				$(parent_node).find('.span_value_variable').text(var_obj.value);
+				
+			}
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_value_global_var = false;
+		opened_input_value_global_ar = false;
+
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				if (var_obj.type == Types.REAL) {
+					var_obj.value = parseFloat($(this).val().trim());
+					$(parent_node).find('.span_value_variable').text(var_obj.value.toFixed(1));
+				} else{
+					if (var_obj.type == Types.INTEGER) {
+						var_obj.value = parseInt($(this).val().trim());
+					} else {
+						var_obj.value = $(this).val().trim();
+					}
+					$(parent_node).find('.span_value_variable').text(var_obj.value);
+				}
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_global_var = false;
+			opened_input_value_global_ar = false;
+
+		}
+		if(code == 27) {
+			if (var_obj.type == Types.REAL) {
+				$(parent_node).find('.span_value_variable').text(var_obj.value.toFixed(1));
+			} else{
+				$(parent_node).find('.span_value_variable').text(var_obj.value);
+			}
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_global_var = false;
+			opened_input_value_global_ar = false;
+		}
+	});
+}
+
+var opened_name_global = false;
+var opened_input_global = null;
+function enableNameUpdate (variable_obj, variable_container) {
+
+	if (opened_name_global) {
+		$(opened_input_global).focus();
+		return;
+	}
+	opened_name_global = true;
+
+	$( variable_container ).find('.span_name_variable').text('');
+	$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+variable_obj.name+"' />" ).insertBefore($(variable_container).find('.span_name_variable'));
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_global = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			updateName(variable_obj, $(this).val().trim());
+			$(variable_container).find('.span_name_variable').text(variable_obj.name);
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_global = false;
+		opened_input_global = false;
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				updateName(variable_obj, $(this).val().trim());
+				$(variable_container).find('.span_name_variable').text(variable_obj.name);
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_global = false;
+			opened_input_global = false;
+		}
+		if(code == 27) {
+
+			$(variable_container).find('.span_name_variable').text(variable_obj.name);
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_global = false;
+			opened_input_global = false;
+		}
+	});
+	
+}
+
+
+var opened_name_value_matrix_global_v = false;
+var opened_input_value_matrix_global_v = null;
+function enableMatrixValueUpdate (var_obj, row, index, parent_node) {
+	if (opened_name_value_matrix_global_v) {
+		$(opened_input_value_matrix_global_v).focus();
+		return;
+	}
+	opened_name_value_matrix_global_v = true;
+
+	$(parent_node).find('.span_value_variable').text('');
+
+	if (var_obj.type == Types.REAL) {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[row][index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	} else {
+		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ var_obj.value[row][index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+	}
+
+	$('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    opened_input_value_matrix_global_v = this;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+
+	$('.width-dynamic').focusout(function() {
+		/// update array:
+		if ($(this).val().trim()) {
+			if (var_obj.type == Types.REAL) {
+				var_obj.value[row][index] = parseFloat($(this).val().trim());
+
+				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+			} else {
+				if (var_obj.type == Types.INTEGER) {
+					var_obj.value[row][index] = parseInt($(this).val().trim());
+				} else {
+					var_obj.value[row][index] = $(this).val().trim();
+				}
+				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index]);
+			}
+		}
+		$(this).remove();
+
+		/// update elements:
+		opened_name_value_matrix_global_v = false;
+		opened_input_value_matrix_global_v = false;
+	});
+
+	$('.width-dynamic').on('keydown', function(e) {
+		var code = e.keyCode || e.which;
+		if(code == 13) {
+			if ($(this).val().trim()) {
+				if (var_obj.type == Types.REAL) {
+					var_obj.value[row][index] = parseFloat($(this).val().trim());
+
+					$(parent_node).find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+				} else {
+					if (var_obj.type == Types.INTEGER) {
+						var_obj.value[row][index] = parseInt($(this).val().trim());
+					} else {
+						var_obj.value[row][index] = $(this).val().trim();
+					}
+					$(parent_node).find('.span_value_variable').text(var_obj.value[row][index]);
+				}
+			}
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_matrix_global_v = false;
+			opened_input_value_matrix_global_v = false;
+		}
+		if(code == 27) {
+			if (var_obj.type == Types.REAL) {
+				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index].toFixed(1));
+			} else {
+				$(parent_node).find('.span_value_variable').text(var_obj.value[row][index]);
+			}
+
+			$(this).remove();
+
+			/// update elements:
+			opened_name_value_matrix_global_v = false;
+			opened_input_value_matrix_global_v = false;
+		}
+	});
+}

js/visualUI/visual.js

@@ -1,76 +0,0 @@
-import { Types } from './../ast/types';
-
-const tiposComandos = Object.freeze({comment:"comment", reader:"reader", writer:"writer"});
-
-export class Variavel {
-
-  constructor (tipo, nome, valor, dimensoes = 0, eh_constante = false, linhas = 0, colunas = 0) {
-    this.tipo = tipo;
-    this.nome = nome;
-    this.valor = valor;
-    this.dimensoes = dimensoes;
-    this.eh_constante = eh_constante;
-    this.linhas = linhas;
-    this.colunas = colunas;
-  }
-}
-
-export class Funcao {
-
-  constructor (nome, tipo_retorno = Types.VOID, dimensoes_retorno = 0, lista_parametros = null, eh_principal = false, esta_oculta = false, variaveis = [], comentario_funcao = null) {
-    this.nome = nome;
-    this.tipo_retorno = tipo_retorno;
-    this.dimensoes_retorno = dimensoes_retorno;
-    this.lista_parametros = lista_parametros;
-    this.eh_principal = eh_principal;
-    this.esta_oculta = esta_oculta;
-    this.variaveis = variaveis;
-    this.comentario_funcao = comentario_funcao;
-    this.comandos = [];
-  }
-}
-
-export class Comentario {
-  
-  constructor (texto_comentario) {
-    this.tipo = tiposComandos.comment;
-    this.texto_comentario = texto_comentario;
-  }
-}
-
-export class Comando {
-
-  constructor (tipo) {
-    this.tipo = tipo;
-  }
-} 
-
-export class Expressao {
-
-  constructor (conteudo) {
-    this.conteudo = conteudo;
-  }
-}
-
-
-export class Programa {
-  constructor () {
-    this.funcoes = [];
-    this.globais = [];
-  };
-
-  adicionarFuncao (funcao) {
-    this.funcoes.push(funcao);
-  }
-
-  adicionarVariavel(funcao, variavel) {
-    if (this.funcoes[funcao].variaveis === null) {
-      this.funcoes[funcao].variaveis = [];
-    }
-    this.funcoes[funcao].variaveis.push(variavel);
-  }
-
-  adicionarGlobal (variavel) {
-    this.globais.push(variavel);
-  }
-}

package.json

@@ -38,7 +38,10 @@
     "karma-jasmine-html-reporter": "^1.3.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-webpack": "^3.0.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
     "puppeteer-core": "^1.7.0",
+    "semantic-ui-less": "^2.3.3",
     "webpack": "^4.16.5",
     "webpack-cli": "^3.1.0"
   },