Continuando os comandos

css/ivprog-visual-1.0.css

@@ -129,7 +129,7 @@ body {
 }
 
 .function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
-.expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered {
+.expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div {
 	display: inline;
 }
 
@@ -194,6 +194,7 @@ body {
 	margin-left: 30px;
 	width: calc(100% - 30px);
 	background-color: #f9f9f9;
+	min-height: 30px;
 }
 
 .ui.segment.variables_list_div {
@@ -298,4 +299,9 @@ div.buttons_manage_columns {
 	margin-right: 10px;
 	margin-left: 10px;
 	cursor: pointer;
-}
+}
+
+.button_remove_command {
+	float: right;
+	cursor: pointer;
+}

i18n/pt/ui.json

@@ -16,7 +16,7 @@
   "text_start": "texto",
   "boolean": "logico",
   "true": "verdadeiro",
-  "false": "fals0",
+  "false": "falso",
   "variable": "Variável",
   "command": "Comando",
   "new_parameter": "novo_parametro",

js/visualUI/code_generator.js

@@ -8,7 +8,7 @@ import * as CommandsManagement from './commands';
 
 export function generate () {
 
-	var code = 'programa \n{ ';
+	var code = LocalizedStrings.getUI('program') + ' { ';
 
 	code += globalsCode();
 
@@ -27,25 +27,26 @@ export function generate () {
 }
 
 function functionsCode (function_obj) {
-	var ret = '\n\tfuncao ';
+	var ret = '\n\t' + LocalizedStrings.getUI('function') + ' ';
 
 	switch (function_obj.return_type) {
 		case Types.INTEGER:
-			ret += 'inteiro ';
+			ret += LocalizedStrings.getUI('integer');
 			break;
 		case Types.REAL:
-			ret += 'real ';
+			ret += LocalizedStrings.getUI('real');
 			break;
 		case Types.TEXT:
-			ret += 'texto ';
+			ret += LocalizedStrings.getUI('text');
 			break;
 		case Types.BOOLEAN:
-			ret += 'booleano ';
+			ret += LocalizedStrings.getUI('boolean');
 			break;
 		case Types.VOID:
-			ret += 'vazio ';
+			ret += LocalizedStrings.getUI('void');
 			break;
 	}
+	ret += ' ';
 
 	if (function_obj.return_dimensions == 1) {
 		ret += '[] '
@@ -62,8 +63,7 @@ function functionsCode (function_obj) {
 		}
 	}
 
-	ret += ' ) ';
-	ret += '\n\t{';
+	ret += ' )  {';
 
 	for (var j = 0; j < function_obj.variables_list.length; j++) {
 		ret += variablesCode(function_obj.variables_list[j]);
@@ -89,33 +89,77 @@ function commandsCode (command_obj) {
 
 		case Models.COMMAND_TYPES.writer:
 			return writersCode(command_obj);
+
+		case Models.COMMAND_TYPES.functioncall:
+			return functioncallsCode(command_obj);
 	}
 }
 
+function functioncallsCode (command_obj) {
+
+	var ret = '\n\t\t';
+	
+	ret += variableValueMenuCode(command_obj.function_called);
+
+	return ret;
+}
+
 function readersCode (command_obj) {
-	var ret = '\n\t\tleia ( ';
+	var ret = '\n\t\t' + LocalizedStrings.getUI('text_command_read') + ' ( ';
 	
-	ret += command_obj.variable_value_menu.content.name;
+	ret += variableValueMenuCode(command_obj.variable_value_menu);
 
-	if (command_obj.variable_value_menu.content.dimensions == 1) {
-		ret += ' [ ' + command_obj.column + ' ] ';
-	} else if (command_obj.variable_value_menu.content.dimensions == 2) {
-		ret += ' [ ' + command_obj.row + ' ] [ ' + command_obj.column + ' ]';
+	ret += ' ) ';
+	return ret;
+}
+
+function variableValueMenuCode (variable_obj) {
+
+	var ret = '';
+	if (variable_obj.function_called) {
+		ret += variable_obj.function_called.name + ' ( ';
+
+		if (variable_obj.parameters_list) {
+			for (var i = 0; i < variable_obj.parameters_list.length; i++) {
+				ret += variableValueMenuCode(variable_obj.parameters_list[i]);
+				if ((i + 1) < variable_obj.parameters_list.length) {
+					ret += ', ';
+				}
+			}
+		}
+
+		ret += ' )';
+	} else if (variable_obj.content.type) {
+
+		ret += variable_obj.content.name;
+
+		if (variable_obj.content.dimensions == 1) {
+			ret += ' [ ' + variableValueMenuCode(variable_obj.column) + ' ] ';
+		}
+
+		if (variable_obj.content.dimensions == 2) {
+			ret += ' [ ' + variableValueMenuCode(variable_obj.row) + ' ] ';
+			ret += ' [ ' + variableValueMenuCode(variable_obj.column) + ' ] ';
+		}
+
+
+	} else {
+		ret += variable_obj.content;
 	}
 
-	ret += ' ) ';
 	return ret;
+
 }
 
 function writersCode (command_obj) {
-	var ret = '\n\t\tescreva ( ';
+	var ret = '\n\t\t' + LocalizedStrings.getUI('text_command_write') + ' ( ';
 	
-	ret += command_obj.content[0].content.name;
+	for (var i = 0; i < command_obj.content.length; i++) {
+		ret += variableValueMenuCode(command_obj.content[i]);
 
-	if (command_obj.content[0].content.dimensions == 1) {
-		ret += ' [ ' + command_obj.content[0].column + ' ] ';
-	} else if (command_obj.content[0].dimensions == 2) {
-		ret += ' [ ' + command_obj.content[0].row + ' ] [ ' + command_obj.content[0].column + ' ]';
+		if ((i + 1) < command_obj.content.length) {
+			ret += ' + ';
+		}
 	}
 
 	ret += ' ) ';
@@ -132,16 +176,16 @@ function parametersCode (parameter_obj) {
 	var ret = '';
 	switch (parameter_obj.type) {
 		case Types.INTEGER:
-			ret += ' inteiro ';
+			ret += ' '+LocalizedStrings.getUI('integer')+' ';
 			break;
 		case Types.REAL:
-			ret += ' real ';
+			ret += ' '+LocalizedStrings.getUI('real')+' ';
 			break;
 		case Types.TEXT:
-			ret += ' texto ';
+			ret += ' '+LocalizedStrings.getUI('text')+' ';
 			break;
 		case Types.BOOLEAN:
-			ret += ' booleano ';
+			ret += ' '+LocalizedStrings.getUI('boolean')+' ';
 			break;
 	}
 	ret += parameter_obj.name + '';
@@ -166,16 +210,16 @@ function variablesCode (variable_obj) {
 	}
 	switch (temp.type) {
 		case Types.INTEGER:
-			ret += 'inteiro ';
+			ret += LocalizedStrings.getUI('integer')+' ';
 			break;
 		case Types.REAL:
-			ret += 'real ';
+			ret += LocalizedStrings.getUI('real')+' ';
 			break;
 		case Types.TEXT:
-			ret += 'texto ';
+			ret += LocalizedStrings.getUI('text')+' ';
 			break;
 		case Types.BOOLEAN:
-			ret += 'booleano ';
+			ret += LocalizedStrings.getUI('boolean')+' ';
 			break;
 	}
 	ret += temp.name + ' ';
@@ -202,9 +246,9 @@ function variablesCode (variable_obj) {
 				ret += '= {';
 				for (var j = 0; j < temp.value.length; j++) {
 					if (temp.value[j]) {
-						ret += "verdadeiro";
+						ret += LocalizedStrings.getUI("true");
 					} else {
-						ret += "falso";
+						ret += LocalizedStrings.getUI("false");
 					}
 					if ((j + 1) < temp.value.length) {
 						ret += ',';
@@ -261,9 +305,9 @@ function variablesCode (variable_obj) {
 					for (var k = 0; k < temp.columns; k++) {
 						
 						if (temp.value[j][k]) {
-							ret += "verdadeiro";
+							ret += LocalizedStrings.getUI("true");
 						} else {
-							ret += "falso";
+							ret += LocalizedStrings.getUI("false");
 						}
 
 						if ((k + 1) < temp.columns) {
@@ -292,9 +336,9 @@ function variablesCode (variable_obj) {
 			case Types.BOOLEAN:
 				ret += '= ';
 				if (temp.value) {
-					ret += "verdadeiro";
+					ret += LocalizedStrings.getUI("true");
 				} else {
-					ret += "falso";
+					ret += LocalizedStrings.getUI("false");
 				}
 				break;
 		}
@@ -319,19 +363,19 @@ function globalsCode () {
 			}
 			switch (temp.type) {
 				case Types.INTEGER:
-					ret += 'inteiro ';
+					ret += LocalizedStrings.getUI('integer');
 					break;
 				case Types.REAL:
-					ret += 'real ';
+					ret += LocalizedStrings.getUI('real');
 					break;
 				case Types.TEXT:
-					ret += 'texto ';
+					ret += LocalizedStrings.getUI('text');
 					break;
 				case Types.BOOLEAN:
-					ret += 'booleano ';
+					ret += LocalizedStrings.getUI('boolean');
 					break;
 			}
-			ret += temp.name + ' ';
+			ret += ' ' + temp.name + ' ';
 
 			if (temp.dimensions == 1) {
 				ret += '[' + temp.columns + '] ';
@@ -355,9 +399,9 @@ function globalsCode () {
 						ret += '= {';
 						for (var j = 0; j < temp.value.length; j++) {
 							if (temp.value[j]) {
-								ret += "verdadeiro";
+								ret += LocalizedStrings.getUI("true");
 							} else {
-								ret += "falso";
+								ret += LocalizedStrings.getUI("false");
 							}
 							if ((j + 1) < temp.value.length) {
 								ret += ',';
@@ -414,9 +458,9 @@ function globalsCode () {
 							for (var k = 0; k < temp.columns; k++) {
 								
 								if (temp.value[j][k]) {
-									ret += "verdadeiro";
+									ret += LocalizedStrings.getUI("true");
 								} else {
-									ret += "falso";
+									ret += LocalizedStrings.getUI("false");
 								}
 
 								if ((k + 1) < temp.columns) {
@@ -445,9 +489,9 @@ function globalsCode () {
 					case Types.BOOLEAN:
 						ret += '= ';
 						if (temp.value) {
-							ret += "verdadeiro";
+							ret += LocalizedStrings.getUI("true");;
 						} else {
-							ret += "falso";
+							ret += LocalizedStrings.getUI("false");;
 						}
 						break;
 				}

js/visualUI/commands.js

@@ -19,6 +19,21 @@ import * as VariableValueMenuManagement from './commands/variable_value_menu';
 var has_element_created_draged = false;
 var which_element_is_draged = null;
 
+export function removeCommand (command, function_obj, dom_obj) {
+	if (function_obj.commands.indexOf(command) > -1) {
+		function_obj.commands.splice(function_obj.commands.indexOf(command), 1);
+		return true;
+	}
+
+	// Utilize dois parantNode, pois o primeiro é o div de comandos
+	if ($(dom_obj[0].parentNode.parentNode).data('command').commands_block.indexOf(command) > -1) {
+		$(dom_obj[0].parentNode.parentNode).data('command').commands_block.splice
+		($(dom_obj[0].parentNode.parentNode).data('command').commands_block.indexOf(command), 1);
+		return true;
+	}
+	return false;
+}
+
 export function createFloatingCommand (function_obj, function_container, command_type, mouse_event) {
 	var floatingObject;
 
@@ -64,9 +79,9 @@ export function createFloatingCommand (function_obj, function_container, command
 			break;
 	}
 
-	$(floatingObject).draggable().appendTo("body");
+	floatingObject.draggable().appendTo("body");
 
-	$( floatingObject ).mouseup(function(evt) {
+	floatingObject.mouseup(function(evt) {
 	  manageCommand(function_obj, function_container, evt, command_type);
 	});
 	
@@ -79,7 +94,7 @@ export function createFloatingCommand (function_obj, function_container, command
 }
 
 // before_after_inside: 1 -> before, 2 -> after, 3 -> inside
-function renderCommand (command, element_reference, before_after_inside, function_obj) {
+export function renderCommand (command, element_reference, before_after_inside, function_obj) {
 	var createdElement;
 	switch (command.type) {
 		case Models.COMMAND_TYPES.comment:
@@ -103,58 +118,60 @@ function renderCommand (command, element_reference, before_after_inside, functio
 			break;
 
 		case Models.COMMAND_TYPES.iftrue:
-			createdElement = IftruesManagement.renderCommand(command);
+			createdElement = IftruesManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.repeatNtimes:
-			createdElement = RepeatNtimesManagement.renderCommand(command);
+			createdElement = RepeatNtimesManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.whiletrue:
-			createdElement = WhiletruesManagement.renderCommand(command);
+			createdElement = WhiletruesManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.dowhiletrue:
-			createdElement = DowhiletruesManagement.renderCommand(command);
+			createdElement = DowhiletruesManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.switch:
-			createdElement = SwitchesManagement.renderCommand(command);
+			createdElement = SwitchesManagement.renderCommand(command, function_obj);
 			break;
 
 	}
 
 	switch (before_after_inside) {
 		case 1:
-			$( createdElement ).insertBefore(element_reference);
+			createdElement.insertBefore(element_reference);
 			break;
 
 		case 2:
-			$( createdElement ).insertAfter(element_reference);
+			createdElement.insertAfter(element_reference);
 			break;
 
 		case 3: 
-			$( element_reference ).append(createdElement);
+			element_reference.append(createdElement);
 			break;
 	}
 
 }
 
-function genericCreateCommand (command_type) {
+export function genericCreateCommand (command_type) {
 
 	switch (command_type) {
 		case Models.COMMAND_TYPES.comment:
 			return new Models.Comment(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_value, LocalizedStrings.getUI('text_comment'), null, null, false));
 
 		case Models.COMMAND_TYPES.reader:
-			return new Models.Reader(null, null, null, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false));
+			return new Models.Reader(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false));
 
 		case Models.COMMAND_TYPES.writer:
 			return new Models.Writer([new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
 
 		case Models.COMMAND_TYPES.attribution:
-			return new Models.Attribution(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), 
-				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+			var root_node = new Models.ExpressionNode(null, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true),
+			 	null, null);
+
+			return new Models.Attribution(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), [root_node]);
 
 		case Models.COMMAND_TYPES.functioncall:
 			return new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false), null);
@@ -177,27 +194,29 @@ function genericCreateCommand (command_type) {
 }
 
 function manageCommand (function_obj, function_container, event, command_type) {
+
 	$( ".created_element" ).each(function( index ) { 
 		$(this).remove();
 	});
 
-	var el = document.elementFromPoint(event.clientX, event.clientY);
+	var el = $(document.elementFromPoint(event.clientX, event.clientY));
 	console.log('soltou no: ');
 	console.log(el);
-	console.log($(el).data('fun'));
+	console.log(el.data('fun'));
 
 	// Primeiro verificar se ele soltou no espaço da função correta:
-	var hier = $(el).parentsUntil(".all_functions");
+	var hier = el.parentsUntil(".all_functions");
 	var esta_correto = false;
 	var esta_na_div_correta = false;
-	if ($(el).hasClass("commands_list_div")) {
+	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")) {
+		var temp = $(hier[i]);
+		if (temp.hasClass("commands_list_div")) {
 			esta_na_div_correta = true;
 		} 
-		if ($(hier[i]).data('fun') == function_obj) {
+		if (temp.data('fun') == function_obj) {
 			esta_correto = true;
 			break;
 		}
@@ -217,17 +236,17 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	// 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') {
+	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)) {
+		if ((el.data('fun').commands == null)  || (el.data('fun').commands.length == 0)) {
 				// pode adicionar 
-				$(el).data('fun').commands = [];
+				el.data('fun').commands = [];
 
 				var new_cmd = genericCreateCommand(command_type);
 
-				$(el).data('fun').commands.push(new_cmd);
+				el.data('fun').commands.push(new_cmd);
 
 				renderCommand(new_cmd, $(function_container).find('.commands_list_div'), 3, function_obj);
 			
@@ -239,10 +258,10 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	} else {
 		console.log("soltou em um comando");
 		// descobrir em qual comando ele soltou: 
-		var hier_find = $(el).parentsUntil(".commands_list_div");
+		var hier_find = el.parentsUntil(".commands_list_div");
 		var hierarquia_bottom_up = [];
-		if (typeof $(el).data('command') !== 'undefined') {
-			hierarquia_bottom_up.push($(el).data('command'));
+		if (typeof el.data('command') !== 'undefined') {
+			hierarquia_bottom_up.push(el.data('command'));
 		}
 		for (var i = 0; i < hier_find.length; i++) {
 			if (typeof $(hier_find[i]).data('command') !== 'undefined') {
@@ -255,15 +274,84 @@ function manageCommand (function_obj, function_container, event, command_type) {
 		for (var i = 0; i < hierarquia_bottom_up.length; i++) {
 			console.log(hierarquia_bottom_up[i]);
 		}
+
+		// se a hierarquia possuir apenas um elemento, então está na raiz dos comandos: 
+		if (hierarquia_bottom_up.length == 1) {
+			var sub_elemento = false;
+			for (var i = 0; i < hier_find.length; i++) {
+				if (typeof $(hier_find[i]).data('command') !== 'undefined') {
+					findBeforeOrAfterCommandToAdd(hier_find[i], event, function_obj, command_type);
+					sub_elemento = true;
+					break;
+				}
+			}
+			if (!sub_elemento) {
+				findBeforeOrAfterCommandToAdd(el[0], event, function_obj, command_type);
+			}
+		} else {
+			// caso exista mais de um elemento na hierarquia:
+			if (typeof $(el).data('command') !== 'undefined') {
+				console.log("PPP1");
+				insertCommandInBlockHierar(el[0], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
+			} else {
+				var sub_elemento = false;
+				for (var i = 0; i < hier_find.length; i++) {
+					if (typeof $(hier_find[i]).data('command') !== 'undefined') {
+						insertCommandInBlockHierar(hier_find[i], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
+						sub_elemento = true;
+						break;
+					}
+				}
+			}
+			
+		}
 	}
 	
 	has_element_created_draged = false;
 	which_element_is_draged = null;
 }
 
-function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, function_obj, command_type) {
+function insertCommandInBlockHierar (el, event, function_obj, command_type, hier_dom, hier_obj) {
+	var el_jq = $(el);
+	var command_parent = el_jq.data('command');
+	
+	if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
+		(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
+		(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ||
+		(el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) ||
+		(el_jq.data('command').type == Models.COMMAND_TYPES.switch) ) {
+
+		if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
+			(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
+			(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ) {
+
+			// Se não tiver outro comando ainda no bloco, só adiciona: 
+			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+				command_parent.commands_block = [];
+
+				var recentComand = genericCreateCommand(command_type);
+				command_parent.commands_block.push(recentComand);
+
+				renderCommand(recentComand, el_jq.find('.block_commands'), 3, function_obj);
+			} else { // Se já tem algum comando no bloco:
+				findNearbyCommandToAddInBlockScope(el, event, el, function_obj, command_type, command_parent);
+			}
+
+		} else {
+			// QUANDO FOR BLOCO DO TIPO IF OU SWITCH/CASE:
+		}
+
+	} else {
+		// entra neste bloco, se soltou o comando sobre outro comando dentro de um subbloco:
+		findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, command_type);
+	}
+}
+
+
 
-	var all_sub = $(node_list_commands).find('div');
+function findNearbyCommandToAddInBlockScope (el, event, node_list_commands, function_obj, command_type, command_parent) {
+
+	var all_sub = $(node_list_commands).find('div.command_container');
 
 	var menor_distancia = 999999999;
 	var elemento_menor_distancia = null;
@@ -271,9 +359,229 @@ function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, f
 
 	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];
+		}
+	}
+
+	var 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) {
 		
+		var recentComand = genericCreateCommand(command_type);
+		command_parent.commands_block.push(recentComand);
+		//
+		renderCommand(recentComand, node_list_commands, 3, function_obj);
+
+	} else {
+
+		var recentComand = genericCreateCommand(command_type);
+
+		var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+
+		if (index > -1) {
+		    command_parent.commands_block.splice(index, 0, recentComand);
+		}
+
+		renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+	}
+}
+
+
+
+function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, command_type) {
+
+	var el_jq = $(el);
+	var command_parent = $(el.parentNode.parentNode).data('command');
+	var command_target = el_jq.data('command');
+
+	var menor_distancia = 999999999;
+	var antes = true;
+
+	var t_bot;
+	var t_top;
+
+	t_top = el.getBoundingClientRect().top;
+	t_bot = el.getBoundingClientRect().top + el.getBoundingClientRect().height;
+
+	var d_top = event.clientY - t_top; // distancia topo
+	var d_bot = t_bot - event.clientY; // distancia baixo
+
+	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
+
+	if (d_top < d_bot) {
+		
+		var recentComand = genericCreateCommand(command_type);
+
+		var index = command_parent.commands_block.indexOf(command_target);
+
+		if (index > -1) {
+		    command_parent.commands_block.splice(index, 0, recentComand);
+		}
+
+		renderCommand(recentComand, el, 1, function_obj);
+
+	} else {
+		var recentComand = genericCreateCommand(command_type);
+
+		var index = command_parent.commands_block.indexOf(command_target);
+
+		if (index > -1) {
+		    command_parent.commands_block.splice((index + 1), 0, recentComand);
+		}
+
+		renderCommand(recentComand, el, 2, function_obj);
+	}
+}
+
+function insertCommandInBlock (el, event, function_obj, command_type) {
+	var el_jq = $(el);
+	var command_parent = el_jq.data('command');
+
+	if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
+		(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
+		(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ) {
+
+		// Se não tiver outro comando ainda no bloco, só adiciona: 
+		if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+			command_parent.commands_block = [];
+
+			var recentComand = genericCreateCommand(command_type);
+			command_parent.commands_block.push(recentComand);
+
+			renderCommand(recentComand, el_jq.find('.block_commands'), 3, function_obj);
+		} else { // Se já tem algum comando no bloco:
+			findInBlockCorrectPlace(el, event, function_obj, command_type);
+		}
+
+	} else {
+		console.log("PPP2");
+	}
+}
+
+function findInBlockCorrectPlace (el, event, function_obj, command_type) {
+	var el_jq = $(el);
+	var all_sub = el_jq.find('div.command_container');
+
+	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];
+		}
+	}
+
+	var 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) {
+		
+		var recentComand = genericCreateCommand(command_type);
+
+		var command_parent = el_jq.data('command');
+		
+		command_parent.commands_block.push(recentComand);
+
+		renderCommand(recentComand, $(el_jq.find('.block_commands')[0]), 3, function_obj);
+
+	} else {
+
+		var recentComand = genericCreateCommand(command_type);
+
+		var command_parent = el_jq.data('command');
+		
+		var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+
+		if (index > -1) {
+		    command_parent.commands_block.splice(index, 0, recentComand);
+		    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+		}
+	}
+}
+
+function findBeforeOrAfterCommandToAdd (el, event, function_obj, command_type) {
+	switch ($(el).data('command').type) {
+		case Models.COMMAND_TYPES.iftrue:
+		case Models.COMMAND_TYPES.switch:
+		case Models.COMMAND_TYPES.repeatNtimes:
+		case Models.COMMAND_TYPES.whiletrue:
+		case Models.COMMAND_TYPES.dowhiletrue:
+			insertCommandInBlock(el, event, function_obj, command_type);
+			return;
+	}
+
+	var menor_distancia = 999999999;
+	var antes = true;
+
+	var t_bot;
+	var t_top;
+
+	t_top = el.getBoundingClientRect().top;
+	t_bot = el.getBoundingClientRect().top + el.getBoundingClientRect().height;
+
+	var d_top = event.clientY - t_top; // distancia topo
+	var d_bot = t_bot - event.clientY; // distancia baixo
+
+	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
+	if (d_top < d_bot) {
+		
+		var recentComand = genericCreateCommand(command_type);
+
+		var index = function_obj.commands.indexOf($(el).data('command'));
+
+		if (index > -1) {
+		    function_obj.commands.splice(index, 0, recentComand);
+		}
+
+		renderCommand(recentComand, el, 1, function_obj);
+
+	} else {
+		var recentComand = genericCreateCommand(command_type);
+
+		var index = function_obj.commands.indexOf($(el).data('command'));
+
+		if (index > -1) {
+		    function_obj.commands.splice((index + 1), 0, recentComand);
+		}
+
+		renderCommand(recentComand, el, 2, function_obj);
+	}
+}
+
+function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, function_obj, command_type) {
+
+	var all_sub = $(node_list_commands).find('div.command_container');
+
+	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;
 
@@ -292,6 +600,7 @@ function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, f
 		function_obj.commands.push(recentComand);
 		//
 		renderCommand(recentComand, node_list_commands, 3, function_obj);
+
 	} else {
 
 		var recentComand = genericCreateCommand(command_type);

js/visualUI/commands/attribution.js

@@ -6,13 +6,27 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as VariableValueMenu from './variable_value_menu';
 import * as VariableValueMenuManagement from './variable_value_menu';
+import * as CommandsManagement from '../commands';
 
 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, function_obj) {
-	var el = $('<div class="ui attribution"> <i class="ui icon small arrow left command_drag"></i>  <div class="var_attributed"></div> <span class="text_attr_receives">'+LocalizedStrings.getUI('text_receives')+'</span> '
+
+	var el = $('<div class="ui attribution command_container"> <i class="ui icon small arrow left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_attributed"></div> <span class="text_attr_receives">'+LocalizedStrings.getUI('text_receives')+'</span> '
+		 + '<div class="expression_operand_1"></div> </div>');
+	el.data('command', command);
+
+	VariableValueMenu.renderMenu(command, command.variable, el.find('.var_attributed'), function_obj);
+	command.expression[0].content = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+	VariableValueMenu.renderMenu(command, command.expression[0].content, el.find('.expression_operand_1'), function_obj);
+
+	addHandlers(command, function_obj, el);
+
+	return el;
+
+	/*var el = $('<div class="ui attribution command_container"> <i class="ui icon small arrow left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_attributed"></div> <span class="text_attr_receives">'+LocalizedStrings.getUI('text_receives')+'</span> '
 		 + '<div class="expression_operand_1"></div> </div>');
 	$(el).data('command', command);
 
@@ -21,16 +35,40 @@ export function renderCommand (command, function_obj) {
 
 	VariableValueMenu.renderMenu(command, command.expression, $(el).find('.expression_operand_1'), function_obj);
 
-	return el;
+	addHandlers(command, function_obj, el);
+
+	return el;*/
+}
+
+function addHandlers (command, function_obj, attribution_dom) {
+
+	attribution_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, attribution_dom)) {
+			attribution_dom.remove();
+		}
+	});
 }
 
 export function renderMenuOperations (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
 
-	if ($(dom_object).hasClass('var_attributed')) {
+	console.log("recebido o seguinte DOM: ");
+	console.log(dom_object);
+
+	if (dom_object.hasClass('var_attributed')) {
 		return;
+	} else {
+		var hier = dom_object.parentsUntil(".command_container");
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass('var_attributed') || $(hier[i]).hasClass('parameters_function_called')) {
+				return;
+			}
+		}
+
+
+		
 	}
 
-	$(dom_object).find('.context_menu_clear').remove();
+	dom_object.find('.context_menu_clear').remove();
 
 
 	var menu_operations = '<div class="ui dropdown menu_operations"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
@@ -45,9 +83,9 @@ export function renderMenuOperations (command, ref_object, dom_object, menu_var_
 
     menu_operations = $(menu_operations);
 
-    $(dom_object).append(menu_operations);
+    dom_object.append(menu_operations);
 
-    $(menu_operations).dropdown({
+    menu_operations.dropdown({
     	onChange: function(value, text, $selectedItem) {
     		switch ($($selectedItem).data('option')) {
     			case "clear":
@@ -56,7 +94,7 @@ export function renderMenuOperations (command, ref_object, dom_object, menu_var_
     				break;
     			default:
     				createExpressionAround(command, ref_object, dom_object, function_obj);
-    				$(menu_operations).find('.text').text('');
+    				menu_operations.find('.text').text('');
     		}
         }
     });
@@ -67,4 +105,5 @@ function createExpressionAround (command, ref_object, dom_object, function_obj)
 	$('<span> ) </span>').insertAfter(dom_object);
 
 	VariableValueMenu.renderMenu(command, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), dom_object, function_obj);
-}
+}
+

js/visualUI/commands/comment.js

@@ -5,14 +5,15 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
 
 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, function_obj) {
-	var el = $('<div class="ui comment"> <i class="ui icon small quote left"></i> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+command.comment_text.content+'</div> </div>');
-	$(el).data('command', command);
+	var el = $('<div class="ui comment command_container"> <i class="ui icon small quote left"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+command.comment_text.content+'</div> </div>');
+	el.data('command', command);
 
 	addHandlers(command, function_obj, el);
 
@@ -21,30 +22,36 @@ export function renderCommand (command, function_obj) {
 
 function addHandlers (command, function_obj, comment_dom) {
 
-	$(comment_dom).find('.div_comment_text').on('click', function() {
-		$(comment_dom).find('.div_comment_text').text('');
-		VariableValueMenu.renderMenu(command, command.comment_text, $(comment_dom).find('.var_value_menu_div'), function_obj, 20);
-		$(comment_dom).find('.width-dynamic').val(command.comment_text.content);
+	comment_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, comment_dom)) {
+			comment_dom.remove();
+		}
+	});
+
+	comment_dom.find('.div_comment_text').on('click', function() {
+		comment_dom.find('.div_comment_text').text('');
+		VariableValueMenu.renderMenu(command, command.comment_text, comment_dom.find('.var_value_menu_div'), function_obj, 20);
+		comment_dom.find('.width-dynamic').val(command.comment_text.content);
 
-		$(comment_dom).find('.width-dynamic').focusout(function() {
+		comment_dom.find('.width-dynamic').focusout(function() {
 			if ($(this).val().trim()) {
 				command.comment_text.content = $(this).val().trim();
 			}
-			$(comment_dom).find('.div_comment_text').text(command.comment_text.content);
+			comment_dom.find('.div_comment_text').text(command.comment_text.content);
 			$(this).remove();
 		});
 
-		$(comment_dom).find('.width-dynamic').on('keydown', function(e) {
+		comment_dom.find('.width-dynamic').on('keydown', function(e) {
 			var code = e.keyCode || e.which;
 			if(code == 13) {
 				if ($(this).val().trim()) {
 					command.comment_text.content = $(this).val().trim();
 				}
-				$(comment_dom).find('.div_comment_text').text(command.comment_text.content);
+				comment_dom.find('.div_comment_text').text(command.comment_text.content);
 				$(this).remove();
 			}
 			if(code == 27) {
-				$(comment_dom).find('.div_comment_text').text(command.comment_text.content);
+				comment_dom.find('.div_comment_text').text(command.comment_text.content);
 
 				$(this).remove();
 			}

js/visualUI/commands/dowhiletrue.js

@@ -4,20 +4,34 @@ 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';
 
 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) {
+export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui dowhiletrue"> <i class="ui icon small random command_drag"></i> <span> faça  { </span>';
+	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></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);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
 	return el;
+}
+
+
+function addHandlers (command, function_obj, dowhiletrue_dom) {
+
+	dowhiletrue_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, dowhiletrue_dom)) {
+			dowhiletrue_dom.remove();
+		}
+	});
 }

js/visualUI/commands/functioncall.js

@@ -5,16 +5,28 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
 
 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, function_obj) {
-	var el = $('<div class="ui functioncall"> <i class="hand point right icon command_drag"></i> <div class="var_value_menu_div"></div> </div>');
-	$(el).data('command', command);
+	var el = $('<div class="ui functioncall command_container"> <i class="hand point right icon command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> </div>');
+	el.data('command', command);
 
-	VariableValueMenu.renderMenu(command, command.function_called, $(el).find('.var_value_menu_div'), function_obj);
+	VariableValueMenu.renderMenu(command, command.function_called, el.find('.var_value_menu_div'), function_obj);
+
+	addHandlers(command, function_obj, el);
 
 	return el;
+}
+
+function addHandlers (command, function_obj, functioncall_dom) {
+
+	functioncall_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, functioncall_dom)) {
+			functioncall_dom.remove();
+		}
+	});
 }

js/visualUI/commands/iftrue.js

@@ -4,14 +4,15 @@ 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';
 
 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) {
+export function renderCommand (command, function_obj) {
 	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 iftrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> if (x < 1) { </span>';
 	ret += '<div class="ui block_commands" data-if="true">';
 
 	/*if ((writer_obj.commands_block == null)
@@ -41,6 +42,19 @@ export function renderCommand (command) {
 	ret += '</div>';
 
 	var el = $(ret);
-	$(el).data('command', command);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
 	return el;
+}
+
+
+function addHandlers (command, function_obj, iftrue_dom) {
+
+	iftrue_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, iftrue_dom)) {
+			iftrue_dom.remove();
+		}
+	});
 }

js/visualUI/commands/reader.js

@@ -5,19 +5,30 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
 
 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, function_obj) {
-	var ret = '<div class="ui reader"> <i class="ui icon small download command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_read')+' ( </span> <div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
+	var el = '<div class="ui reader command_container"> <i class="ui icon small download command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_command_read')+' ( </span> <div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
 	
-	var el = $(ret);
-	$(el).data('command', command);
+	el = $(el);
+	el.data('command', command);
 
-	VariableValueMenu.renderMenu(command, command.variable_value_menu, $(el).find('.var_value_menu_div'), function_obj);
+	VariableValueMenu.renderMenu(command, command.variable_value_menu, el.find('.var_value_menu_div'), function_obj);
+
+	addHandlers(command, function_obj, el);
 
 	return el;
 }
 
+function addHandlers (command, function_obj, reader_dom) {
+
+	reader_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, reader_dom)) {
+			reader_dom.remove();
+		}
+	});
+}

js/visualUI/commands/repeatNtimes.js

@@ -4,13 +4,14 @@ 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';
 
 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>';
+export function renderCommand (command, function_obj) {
+	var ret = '<div class="ui repeatNtimes command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> para (x = 0; x < 10; x ++) { </span>';
 	ret += '<div class="ui block_commands">';
 
 	ret += '</div>';
@@ -18,6 +19,20 @@ export function renderCommand (command) {
 	ret += '</div>';
 	
 	var el = $(ret);
-	$(el).data('command', command);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
 	return el;
 }
+
+
+
+function addHandlers (command, function_obj, repeatNtimes_dom) {
+
+	repeatNtimes_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, repeatNtimes_dom)) {
+			repeatNtimes_dom.remove();
+		}
+	});
+}

js/visualUI/commands/switch.js

@@ -4,18 +4,30 @@ 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';
 
 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) {
+export function renderCommand (command, function_obj) {
 	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 class="ui switch command_container"> <i class="ui icon small random command_drag" ></i> <i class="ui icon times red button_remove_command"></i> <span> escolha (x) { <br> caso 1: <br> caso 2: <br> }</span>';
 	ret += '</div>';
 
 	var el = $(ret);
-	$(el).data('command', command);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
 	return el;
 }
 
+function addHandlers (command, function_obj, switch_dom) {
+
+	switch_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, switch_dom)) {
+			switch_dom.remove();
+		}
+	});
+}

js/visualUI/commands/variable_value_menu.js

@@ -6,23 +6,25 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as AttribuitionsManagement from './attribution';
 import * as WritersManagement from './writer';
-import WatchJS from 'melanke-watchjs';
-
-
-var watch = WatchJS.watch;
-
 
 export const VAR_OR_VALUE_TYPES = Object.freeze({only_variable: 1, only_value: 2, only_function: 3, variable_and_function: 4, variable_and_value_opt: 5,
 	value_and_function: 6, all: 7});
 
 export function renderMenu (command, ref_object, dom_object, function_obj, size_field = 2) {
-
 	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 
-	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) 
+	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) {
+
+		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_functions">';
+		menu_var_or_value += '</div>';
+	} 
+
+	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) 
 		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
 		
-		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('btn_function')+'</div>';
+		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('btn_function');
+		menu_var_or_value += '<div class="menu menu_only_functions">';
+		menu_var_or_value += '</div></div>';
 	}
 	
 	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_variable) {
@@ -52,44 +54,45 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 
     menu_var_or_value = $(menu_var_or_value);
 
-    $(dom_object).append(menu_var_or_value);
+    dom_object.append(menu_var_or_value);
 
     addHandlers(command, ref_object, dom_object, menu_var_or_value, function_obj);
 
     addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
-}
 
-function addVariablesToMenu (function_obj, menu_var_or_value, ref_object) {
+    addFunctionsToMenu(function_obj, menu_var_or_value, ref_object);
+}
 
-	watch(window.program_obj.globals, function(){
-    	addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
-	}, 1);
+function addFunctionsToMenu (function_obj, menu_var_or_value, ref_object) {
+	var sub_menu = menu_var_or_value.find('.menu_only_functions');
+	sub_menu.text('');
 
-	watch(function_obj.parameters_list, function(){
-    	addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
-	}, 1);
+	for (var i = 0; i < window.program_obj.functions.length; i++) {
+		var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'">' + window.program_obj.functions[i].name + ' </div>');
+		temp.data('function_reference', window.program_obj.functions[i]);
+		sub_menu.append(temp);
+	}
+}
 
-	watch(function_obj.variables_list, function(){
-    	addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
-	}, 1);
+function addVariablesToMenu (function_obj, menu_var_or_value, ref_object) {
 
-	var sub_menu = $(menu_var_or_value).find('.menu_only_vars');
-	$(sub_menu).text('');
+	var sub_menu = menu_var_or_value.find('.menu_only_vars');
+	sub_menu.text('');
 
 	if (window.program_obj.globals) {
 
 		if (ref_object.include_constant) {
 			for (var i = 0; i < window.program_obj.globals.length; i++) {
 				var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + window.program_obj.globals[i].name + ' </div>');
-				$(temp).data('variable_reference', window.program_obj.globals[i]);
-				$(sub_menu).append(temp);
+				temp.data('variable_reference', window.program_obj.globals[i]);
+				sub_menu.append(temp);
 			}
 		} else {
 			for (var i = 0; i < window.program_obj.globals.length; i++) {
 				if (!window.program_obj.globals[i].is_constant) {
 					var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + window.program_obj.globals[i].name + ' </div>');
-					$(temp).data('variable_reference', window.program_obj.globals[i]);
-					$(sub_menu).append(temp);
+					temp.data('variable_reference', window.program_obj.globals[i]);
+					sub_menu.append(temp);
 				}
 			}
 		}
@@ -100,16 +103,16 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object) {
 	if (function_obj.parameters_list) {
 		for (var i = 0; i < function_obj.parameters_list.length; i++) {
 			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.parameters_list[i].name + ' </div>');
-			$(temp).data('variable_reference', function_obj.parameters_list[i]);
-			$(sub_menu).append(temp);
+			temp.data('variable_reference', function_obj.parameters_list[i]);
+			sub_menu.append(temp);
 		}
 	}
 
 	if (function_obj.variables_list) {
 		for (var i = 0; i < function_obj.variables_list.length; i++) {
 			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.variables_list[i].name + ' </div>');
-			$(temp).data('variable_reference', function_obj.variables_list[i]);
-			$(sub_menu).append(temp);
+			temp.data('variable_reference', function_obj.variables_list[i]);
+			sub_menu.append(temp);
 		}
 	}
 
@@ -118,13 +121,13 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object) {
 function addHandlers (command, ref_object, dom_object, menu_var_or_value, function_obj) {
 
 	if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
-		$(menu_var_or_value).dropdown({
+		menu_var_or_value.dropdown({
 		  onChange: function(value, text, $selectedItem) {
-		  	$(dom_object).find('.var_name').remove();
+		  	dom_object.find('.var_name').remove();
 
-		     switch ($($selectedItem).data('option')) {
+		     switch ($selectedItem.data('option')) {
 		     	case VAR_OR_VALUE_TYPES.only_function:
-		     		console.log("foi função");
+		     		openInputToFunction(command, ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('function_reference'));
 		     		break;
 
 		     	case VAR_OR_VALUE_TYPES.only_value:
@@ -139,7 +142,7 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 	    });
 	}
 
-	$(dom_object).find('.width-dynamic').on('input', function() {
+	dom_object.find('.width-dynamic').on('input', function() {
 	    var inputWidth = $(this).textWidth()+10;
 	    $(this).focus();
 
@@ -154,13 +157,80 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 	
 }
 
-function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
+function openInputToFunction (command, ref_object, dom_object, menu_var_or_value, function_obj, function_selected) {
+	
+	ref_object.function_called = function_selected;
+	ref_object.parameters_list = [];
+
+
+	if (function_selected.parameters_list != null && function_selected.parameters_list.length > 0) {
+
+		menu_var_or_value.find('.text').text(' ');
+		dom_object.find('.menu_var_or_value_dom').remove();
+
+		var parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		for (var j = 0; j < function_selected.parameters_list.length; j++) {
+			parameters_menu += '<div class="parameter_'+j+'"></div>';
+			if ((j + 1) != function_selected.parameters_list.length) {
+				parameters_menu += ' , ';
+			}
+		}
+		parameters_menu += '<span> ) </span></div>';
+
+		parameters_menu = $(parameters_menu);
+
+		dom_object.append(parameters_menu);
+
+		for (var j = 0; j < function_selected.parameters_list.length; j++) {
+			var temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
+			ref_object.parameters_list.push(temp);
+			renderMenu(command, temp, parameters_menu.find('.parameter_'+j), function_obj);
+		}
+
 
+		var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+		context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+		context_menu += '</div></div>';
 
+		context_menu = $(context_menu);
+
+		context_menu.insertAfter( dom_object.find('.parameters_function_called') );
+
+		context_menu.dropdown({
+			onChange: function(value, text, $selectedItem) {
+		     if ($selectedItem.data('clear')) {
+		     	dom_object.text('');
+
+		     	ref_object.content = null;
+		     	ref_object.row = null;
+		     	ref_object.column = null;
+		     	delete ref_object.function_called;
+		     	delete ref_object.parameters_list;
+
+		     	renderMenu(command, ref_object, dom_object, function_obj);
+		     }
+	      }
+		});
+
+	} else {
+		menu_var_or_value.find('.text').append('<span> (  ) </span>');
+	}
+
+	if (command.type == Models.COMMAND_TYPES.attribution) {
+		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
+	}
+
+	if (command.type == Models.COMMAND_TYPES.writer) {
+		WritersManagement.addContent(command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object.content);
+	}
+}
+
+function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
+	
 	ref_object.content = variable_selected;
 
-	$(menu_var_or_value).find('.text').text(' ');
-	$(dom_object).find('.menu_var_or_value_dom').remove();
+	menu_var_or_value.find('.text').text(' ');
+	dom_object.find('.menu_var_or_value_dom').remove();
 
 	var variable_render = '<div class="variable_rendered"> <span class="var_name">'+variable_selected.name+'</span>';
 
@@ -177,19 +247,18 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 
 	variable_render = $(variable_render);
 
-	$(dom_object).append(variable_render);
-
+	dom_object.append(variable_render);
 
 	if (variable_selected.dimensions == 1) {
 		ref_object.column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
-		renderMenu(command, ref_object.column, $(variable_render).find('.column_container'), function_obj);
+		renderMenu(command, ref_object.column, variable_render.find('.column_container'), function_obj);
 	}
 	if (variable_selected.dimensions == 2) {
 		ref_object.row = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
-		renderMenu(command, ref_object.row, $(variable_render).find('.row_container'), function_obj);
+		renderMenu(command, ref_object.row, variable_render.find('.row_container'), function_obj);
 
 		ref_object.column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
-		renderMenu(command, ref_object.column, $(variable_render).find('.column_container'), function_obj);
+		renderMenu(command, ref_object.column, variable_render.find('.column_container'), function_obj);
 	}
 
 	var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
@@ -198,13 +267,17 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 
 	context_menu = $(context_menu);
 
-	$( context_menu ).insertAfter( $(dom_object).find('.variable_rendered') );
+	context_menu.insertAfter( dom_object.find('.variable_rendered') );
 
-	$(context_menu).dropdown({
+	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
-	     if ($($selectedItem).data('clear')) {
-	     	$(dom_object).text('');
-	     	ref_object = new Models.VariableValueMenu(ref_object.variable_and_value, null, null, null, ref_object.include_constant);
+	     if ($selectedItem.data('clear')) {
+	     	dom_object.text('');
+
+	     	ref_object.content = null;
+	     	ref_object.row = null;
+	     	ref_object.column = null;
+
 	     	renderMenu(command, ref_object, dom_object, function_obj);
 	     }
       }
@@ -228,16 +301,16 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 		ref_object.content = "";
 	}
 
-	$(menu_var_or_value).find('.text').text(' ');
+	menu_var_or_value.find('.text').text(' ');
 	var field = $('<input type="text" size="2" class="width-dynamic-minus" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />');
-	$( field ).insertBefore($(dom_object).find('.menu_var_or_value_dom'));
+	field.insertBefore(dom_object.find('.menu_var_or_value_dom'));
 	var rendered = $('<div class="value_rendered"></div>');
-	$( rendered ).insertBefore(field);
+	rendered.insertBefore(field);
 
 	field.focus();
-	$(field).val(ref_object.content);
+	field.val(ref_object.content);
 
-	$(dom_object).find('.menu_var_or_value_dom').remove();
+	dom_object.find('.menu_var_or_value_dom').remove();
 
 	var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 	context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
@@ -245,64 +318,58 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 
 	context_menu = $(context_menu);
 
-	$( context_menu ).insertAfter( field );
+	context_menu.insertAfter( field );
 
-	$(context_menu).dropdown({
+	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
-	     if ($($selectedItem).data('clear')) {
-	     	$(dom_object).text('');
+	     if ($selectedItem.data('clear')) {
+	     	dom_object.text('');
 
 	     	ref_object = new Models.VariableValueMenu(ref_object.variable_and_value, null, null, null, ref_object.include_constant);
 
-	     	$(dom_object).find('.value_rendered').remove();
-			$(dom_object).find('.context_menu_clear').remove();
-			$(dom_object).find('.width-dynamic-minus').remove();
+	     	dom_object.find('.value_rendered').remove();
+			dom_object.find('.context_menu_clear').remove();
+			dom_object.find('.width-dynamic-minus').remove();
 
 	     	renderMenu(command, ref_object, dom_object, function_obj);
 	     }
       }
 	});
 
-	$(dom_object).find('.width-dynamic-minus').focusout(function() {
+	dom_object.find('.width-dynamic-minus').focusout(function() {
 		if ($(this).val().trim()) {
 			ref_object.content = $(this).val().trim();
 		}
 
-		$(rendered).text(ref_object.content);
+		rendered.text(ref_object.content);
 		$(this).remove();
 
 	});
 
-	$(dom_object).find('.width-dynamic-minus').on('keydown', function(e) {
+	dom_object.find('.width-dynamic-minus').on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
 			if ($(this).val().trim()) {
 				ref_object.content = $(this).val().trim();
 			}
-			$(rendered).text(ref_object.content);
+			rendered.text(ref_object.content);
 
 			$(this).remove();
 		}
 		if(code == 27) {
-			$(rendered).text(ref_object.content);
+			rendered.text(ref_object.content);
 
 			$(this).remove();
 		}
 	});
 
 	$(rendered).on('click', function(e) {
-		console.log('no clique, vou passar o seguinte: ');
-		console.log(dom_object);
 		rendered.remove();
 		rendered.empty();
-		$(rendered).remove();
-		$(dom_object).empty();
-		$(dom_object).append('<span class="menu_var_or_value_dom"> </span>');
-		//$('<span class="menu_var_or_value_dom"> </span>').insertBefore($(dom_object).find('.value_rendered'));
-		//$(dom_object).find('.value_rendered').remove();
-		//$(dom_object).find('.context_menu_clear').remove();
-		//$(dom_object).find('.width-dynamic-minus').remove();
-
+		rendered.remove();
+		dom_object.empty();
+		dom_object.append('<span class="menu_var_or_value_dom"> </span>');
+		
 		openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj)
 	});
 

js/visualUI/commands/whiletrue.js

@@ -4,21 +4,33 @@ 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';
 
 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) {
+export function renderCommand (command, function_obj) {
 	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 whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></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);
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
 	return el;
 }
 
+function addHandlers (command, function_obj, whiletrue_dom) {
+
+	whiletrue_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, whiletrue_dom)) {
+			whiletrue_dom.remove();
+		}
+	});
+}

js/visualUI/commands/writer.js

@@ -6,6 +6,7 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as VariableValueMenu from './variable_value_menu';
 import * as VariableValueMenuManagement from './variable_value_menu';
+import * as CommandsManagement from '../commands';
 
 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>');
@@ -13,16 +14,27 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui writer"> <i class="ui icon small upload command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
+	ret += '<div class="ui writer command_container"> <i class="ui icon small upload command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
 
 	var el = $(ret);
 	$(el).data('command', command);
 
 	VariableValueMenu.renderMenu(command, command.content[0], $(el).find('.var_value_menu_div'), function_obj);
 
+	addHandlers(command, function_obj, el);
+
 	return el;
 }
 
+function addHandlers (command, function_obj, writer_dom) {
+
+	writer_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, writer_dom)) {
+			writer_dom.remove();
+		}
+	});
+}
+
 export function addContent (command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object_content) {
 	
 	if ($(dom_object).hasClass('var_value_menu_div')) {

js/visualUI/functions.js

@@ -6,10 +6,13 @@ import * as GlobalsManagement from './globals';
 import * as VariablesManagement from './variables';
 import * as CommandsManagement from './commands';
 import * as CodeManagement from './code_generator';
+import * as VariableValueMenu from './commands/variable_value_menu';
 import { DOMConsole } from './../io/domConsole';
 import { IVProgParser } from './../ast/ivprogParser';
 import { IVProgProcessor } from './../processor/ivprogProcessor';
 import { LanguageService } from '../services/languageService';
+import WatchJS from 'melanke-watchjs';
+
 
 var counter_new_functions = 0;
 var counter_new_parameters = 0;
@@ -19,10 +22,21 @@ let domConsole = null;
 const program = new Models.Program();
 const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true, false, []);
 mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main'));
+const parameter1 = new Models.Variable(Types.INTEGER, "par_1", 1);
+const variable1 = new Models.Variable(Types.REAL, "variable_1", 1);
+const command1 = new Models.Comment(new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.only_value, "Testing rendering commands"));
+
+const sumFunction = new Models.Function("soma", Types.INTEGER, 0, [parameter1], false, false, [variable1], null, [command1]);
+
 program.addFunction(mainFunction);
+program.addFunction(sumFunction);
 
 window.program_obj = program;
 
+WatchJS.watch(program.globals, function(){
+      console.log("as globais foram alteradas!");
+  }, 1);
+
 function addFunctionHandler () {
 
 	var new_function = new Models.Function(LocalizedStrings.getUI("new_function") + "_" + counter_new_functions, Types.VOID, 0, [], false, false, [], new Models.Comment(LocalizedStrings.getUI('text_comment_start')));
@@ -63,42 +77,55 @@ function minimizeFunction (function_obj) {
 
 function addHandlers (function_obj, function_container) {
 
-  $( function_container ).find('.ui.dropdown.function_return').dropdown({
+  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'));
+        $selectedItem = $($selectedItem);
+        if ($selectedItem.data('dimensions')) {
+          updateReturnType(function_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
         } else {
-          updateReturnType(function_obj, Types[$($selectedItem).data('type')]);
+          updateReturnType(function_obj, Types[$selectedItem.data('type')]);
         }
       }
   });
 
-  $( function_container ).find( ".name_function_updated" ).on('click', function(e){
+  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){
+  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').dropdown({
+      on: 'hover'
+    });
+
+  function_container.find('.menu_commands a').on('click', function(evt){
+    if (function_obj.commands == null || function_obj.commands.length == 0) {
+      function_obj.commands = [];
+      var new_cmd = CommandsManagement.genericCreateCommand($(this).data('command'));
+      function_obj.commands.push(new_cmd);
+
+      CommandsManagement.renderCommand(new_cmd, function_container.find('.commands_list_div'), 3, function_obj);
+    } else {
+      CommandsManagement.createFloatingCommand(function_obj, function_container, $(this).data('command'), evt);
+    }
 
-  $( 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){
+  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){
+  function_container.find('.remove_function_button').on('click', function(e){
     removeFunction(function_obj);
-    $(function_container).slideUp(400);
+    function_container.slideUp(400);
   });
 
-  $( function_container ).find('.minimize_function_button').on('click', function(e){
+  function_container.find('.minimize_function_button').on('click', function(e){
     minimizeFunction(function_obj);
-    $(function_container).find(".function_area").toggle();
+    function_container.find(".function_area").toggle();
+    function_container.find(".add_var_top_button").toggle();
   });
 
 
@@ -142,7 +169,7 @@ function renderFunctionReturn (function_obj, function_element) {
 
     ret = $(ret);
     
-    $(function_element).find('.function_return').append(ret);
+    function_element.find('.function_return').append(ret);
 }
 
 
@@ -159,7 +186,7 @@ function renderFunction (function_obj) {
   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 small 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>'
@@ -185,8 +212,6 @@ function renderFunction (function_obj) {
       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"> ')
@@ -214,12 +239,29 @@ function renderFunction (function_obj) {
 
   $('.all_functions').append(appender);
 
-  $(appender).data('fun', function_obj);
-  $(appender).find('.commands_list_div').data('fun', function_obj);
+  appender.data('fun', function_obj);
+  appender.find('.commands_list_div').data('fun', function_obj);
 
   renderFunctionReturn(function_obj, appender);
 
   addHandlers(function_obj, appender);
+
+
+  // Rendering parameters: 
+  for (var j = 0; j < function_obj.parameters_list.length; j++) {
+    renderParameter(function_obj, function_obj.parameters_list[j], appender);
+  }
+
+  // Rendering variables:
+  for (var j = 0; j < function_obj.variables_list.length; j++) {
+    VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
+  }
+
+  // Rendering commands:
+  for (var j = 0; j < function_obj.commands.length; j++) {
+    CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
+  }
+
 }
 
 
@@ -235,8 +277,6 @@ export function initVisualUI () {
     GlobalsManagement.addGlobal(program);
   });
 
-  renderFunction(mainFunction);
-
   $('.run_button').on('click', () => {
     runCode();
   });
@@ -250,6 +290,14 @@ export function initVisualUI () {
   });
 }
 
+$( document ).ready(function() {
+
+  for (var i = 0; i < program.functions.length; i++) {
+    renderFunction(program.functions[i]);
+  }
+
+});
+
 function runCode () {
   const strCode = CodeManagement.generate();
   domConsole = new DOMConsole("#ivprog-term");
@@ -351,13 +399,13 @@ function renderParameter (function_obj, parameter_obj, function_container) {
 
   ret = $(ret);
   
-  $(function_container).find('.container_parameters_list').append(ret);
+  function_container.find('.container_parameters_list').append(ret);
 
-  $(ret).find('.remove_parameter').on('click', function(e){
+  ret.find('.remove_parameter').on('click', function(e){
     removeParameter(function_obj, parameter_obj, ret);
   });
   
-  $(ret).find('.ui.dropdown.parameter_type').dropdown({
+  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'));
@@ -367,7 +415,7 @@ function renderParameter (function_obj, parameter_obj, function_container) {
     }
   });
 
-  $(ret).find('.label_enable_name_parameter').on('click', function(e){
+  ret.find('.label_enable_name_parameter').on('click', function(e){
     enableNameParameterUpdate(parameter_obj, ret);
   });
 

js/visualUI/ivprog_elements.js

@@ -1,4 +1,5 @@
 import { Types } from './../ast/types';
+import WatchJS from 'melanke-watchjs';
 
 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"});
@@ -20,7 +21,7 @@ export class Variable {
 
 export class Function {
 
-  constructor (name, return_type = Types.VOID, return_dimensions = 0, parameters_list = [], is_main = false, is_hidden = false, variables_list = [], function_comment = null) {
+  constructor (name, return_type = Types.VOID, return_dimensions = 0, parameters_list = [], is_main = false, is_hidden = false, variables_list = [], function_comment = null, commands = []) {
     this.type = COMMAND_TYPES.function;
     this.name = name;
     this.return_type = return_type;
@@ -30,7 +31,7 @@ export class Function {
     this.is_hidden = is_hidden;
     this.variables_list = variables_list;
     this.function_comment = function_comment;
-    this.commands = [];
+    this.commands = commands;
   }
 }
 
@@ -44,11 +45,8 @@ export class Comment {
 
 export class Reader {
   
-  constructor (variable = null, row = null, column = null, variable_value_menu = null) {
+  constructor (variable_value_menu = new VariableValueMenu()) {
     this.type = COMMAND_TYPES.reader;
-    this.variable = variable;
-    this.row = row;
-    this.column = column;
     this.variable_value_menu = variable_value_menu;
   }
 }
@@ -63,7 +61,7 @@ export class Writer {
 
 export class Attribution {
 
-  constructor (variable, expression) {
+  constructor (variable, expression = []) {
     this.type = COMMAND_TYPES.attribution;
     this.variable = variable;
     this.expression = expression;
@@ -79,6 +77,17 @@ export class Expression {
   }
 }
 
+export class ExpressionNode {
+
+  constructor (parent_node, content, left_node, right_node) {
+    this.parent_node = parent_node;
+    this.content = content;
+    this.left_node = left_node;
+    this.right_node = right_node;
+    
+  }
+}
+
 export class IfTrue {
 
   constructor (expression, commands_block, commands_else) {
@@ -140,6 +149,7 @@ export class FunctionCall {
 export class VariableValueMenu {
   
   constructor (variable_and_value = 7, content = null, row = null, column = null, include_constant = true) {
+    this.type = "var_value";
     this.variable_and_value = variable_and_value;
     this.content = content;
     this.row = row;
@@ -148,6 +158,15 @@ export class VariableValueMenu {
   }
 }
 
+export class FunctionCallMenu {
+  
+  constructor (function_called = null, parameters_list = []) {
+    this.type = "function_call";
+    this.function_called = function_called;
+    this.parameters_list = parameters_list;
+  }
+}
+
 export class Program {
 
   constructor () {
@@ -156,6 +175,17 @@ export class Program {
   }
 
   addFunction (function_to_add) {
+
+    WatchJS.watch(function_to_add.parameters_list, function(){
+      console.log("os parametros da função abaixo foram alterados:");
+      console.log(function_to_add);
+    }, 1);
+
+    WatchJS.watch(function_to_add.variables_list, function(){
+      console.log("as variáveis da função abaixo foram alteradas: ");
+      console.log(function_to_add);
+    }, 1);
+
     this.functions.push(function_to_add);
   }
 

js/visualUI/variables.js

@@ -77,7 +77,7 @@ function addHandlers (variable_obj, variable_container) {
 }
 
 
-function renderVariable(function_container, new_var, function_obj) {
+export function renderVariable(function_container, new_var, function_obj) {
 
 	var element = '<div class="ui label variable_container">';
 

package-lock.json

@@ -3450,7 +3450,8 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3461,7 +3462,8 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3591,6 +3593,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3613,12 +3616,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3637,6 +3642,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3717,7 +3723,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3729,6 +3736,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3850,6 +3858,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",