Finished improving collapse and lock/unlock expressions

css/ivprog-visual-1.0.css

@@ -1092,8 +1092,14 @@ div.ui.dropdown.menu_commands.pause {
 	margin: 0;
 }
 
-span.textual_expression {
-	color: #2325a6;;
+.data_block_if span.textual_expression,
+.ui.dowhiletrue span.textual_expression,
+.ui.whiletrue span.textual_expression,
+.attribution span.textual_expression,
+.writer span.textual_expression {
+	color: #2325a6;
+	font-weight: bold;
+	font-size: 1.2rem;
 }
 
 i.button_alternate_expression {
@@ -1101,4 +1107,24 @@ i.button_alternate_expression {
 	font-size: 1.1rem;
 	margin-left: 0.3rem;
 	color: black;
+}
+
+.attribution i.button_alternate_expression {
+	margin-left: .8rem;
+}
+.repeatN_text_par_1, .repeatN_text_par_2, 
+.repeatN_text_par_3, .repeatN_text_par_4 {
+	margin-left: .2rem;
+	font-weight: bold;
+	font-size: 1.2rem;
+	margin-right: .3rem;
+	color: #2325a6;
+}
+
+.repeatN_text_par_1 {
+	margin-left: -1.2rem;
+}
+
+.writer .button_alternate_expression {
+	margin-left: 2.5rem;
 }

js/visualUI/code_generator.js

@@ -238,6 +238,42 @@ function switchcasesCode (switchcase, indentation) {
   return ret;
 }
 
+export function repeatNtimesHeader (command_obj) {
+  let ret = "";
+  if (command_obj.var_attribution) {
+    ret += '<span class="repeatN_text_par_1">';
+    ret += variableValueMenuCode(command_obj.var_attribution);
+    ret += '</span>';
+    ret += ` ${LocalizedStrings.getUI("text_code_for_from")} `;
+    ret += '<span class="repeatN_text_par_2">';
+    ret += variableValueMenuCode(command_obj.expression1);
+    ret += '</span>';
+  }
+
+  if (command_obj.expression2) {
+    ret += ` ${LocalizedStrings.getUI("text_code_for_to")} `;
+    ret += '<span class="repeatN_text_par_3">';
+    ret += variableValueMenuCode(command_obj.expression2);
+    ret += '</span>';
+  }
+
+  if (command_obj.expression3) {
+    ret += ` ${LocalizedStrings.getUI("text_code_for_pass")} `;
+    ret += '<span class="repeatN_text_par_4">';
+    switch (command_obj.expression3.itens[1]) {
+      case Models.ARITHMETIC_TYPES.plus:
+        ret += " +";
+        break;
+      case Models.ARITHMETIC_TYPES.minus:
+        ret += " -";
+        break;
+    }
+    ret += variableValueMenuCode(command_obj.expression3.itens[2]);
+    ret += '</span>';
+  }
+  return ret;
+}
+
 function repeatNtimesCode (command_obj, indentation) {
   let ret = "\n";
 
@@ -271,32 +307,6 @@ function repeatNtimesCode (command_obj, indentation) {
     ret += variableValueMenuCode(command_obj.expression3.itens[2]);
   }
 
-  /*if (command_obj.var_incrementation) {
-                ret += variableValueMenuCode(command_obj.var_incrementation);
-                ret += ' <- ';
-                ret += variableValueMenuCode(command_obj.expression3.itens[0]);
-
-                switch (command_obj.expression3.itens[1]) {
-                        case Models.ARITHMETIC_TYPES.plus:
-                                ret += ' + ';
-                                break;
-                        case Models.ARITHMETIC_TYPES.minus:
-                                ret += ' - ';
-                                break;
-                        case Models.ARITHMETIC_TYPES.multiplication:
-                                ret += ' * ';
-                                break;
-                        case Models.ARITHMETIC_TYPES.division:
-                                ret += ' / ';
-                                break;
-                        case Models.ARITHMETIC_TYPES.module:
-                                ret += ' % ';
-                                break;
-                }
-
-                ret += variableValueMenuCode(command_obj.expression3.itens[2]);
-        }*/
-
   ret += " { ";
 
   if (command_obj.commands_block) {

js/visualUI/commands.js

@@ -47,8 +47,6 @@ export function removeCommand (command, function_obj, dom_obj) {
 	} catch (err) {}
 
 	if (dom_obj.parent().data('switchcase')) {
-		console.log("o que encontrei: ");
-		console.log(dom_obj.parent().data('switchcase'));
 		dom_obj.parent().data('switchcase').commands_block.splice(dom_obj.parent().data('switchcase').commands_block.indexOf(command), 1);
 		return true;
 	}
@@ -125,8 +123,6 @@ export function createFloatingCommand (function_obj, function_container, command
 		function_container = $(mouse_event.originalEvent.srcElement.closest('.function_div'));
 	}
 
-	console.log('function_container', function_container);
-
 	function_container_active = function_container;
 
 	function_container.find('.commands_list_div').on('mousemove', function(evt) {
@@ -173,18 +169,18 @@ function addGhostToEmptyBlock (element, evt) {
 
 	if (window.active_container != null) {
 		if (window.active_container.is(container)) {
-			console.log('é o mesmo, não mudou!');
+			//console.log('é o mesmo, não mudou!');
 		} else {
 			if (container.length < 1) {
 				container = element.closest('.commands_list_div');
 				if (window.active_container.is(container)) {
-					console.log('é o mesmo command list');
+					//console.log('é o mesmo command list');
 				} else {
-					console.log('mudou para um command list');
+					//console.log('mudou para um command list');
 					window.active_container = container;
 				}
 			} else {
-				console.log('mudou para um outro container?');
+				//console.log('mudou para um outro container?');
 			}
 		}
 	}
@@ -236,7 +232,6 @@ function addGhostToNotEmptyBlock (element, evt) {
 
 	// quem está mais próximo? // Essa regra se aplica somente quando o over está sobre um comando
 	var allfilhos;
-	console.log('olha o container: ', container);
 	if (container.hasClass('iftrue')) {
 		
 		if ($(evt.target).closest('.data_block_if').length > 0) {
@@ -276,8 +271,6 @@ function addGhostToNotEmptyBlock (element, evt) {
 		bottomDistances.push(botD);
 	}
 
-	console.log('topDistances\n', topDistances, '\nbottomDistances\n', bottomDistances)
-
 	var menorTop = Math.min.apply(null, topDistances);
 	var indiceTop = topDistances.indexOf(menorTop);
 
@@ -289,8 +282,6 @@ function addGhostToNotEmptyBlock (element, evt) {
 	} else {
 		window.ghostDiv.insertAfter($(allfilhos.get(indiceBot)));
 	}
-
-	console.log('distancias: menorTop ', menorTop, ' menorBot ', menorBot);
 }
 
 function addGhostToFunctionArea (undermouse, evt) {
@@ -549,8 +540,6 @@ function findSingleElement (searching, query) {
 			searching.commands_else = [];
 		}
 
-		console.log('\n\nveja onde: ', searching.commands_block, ' \n\nquery: ', query);
-
 		if (searching.commands_block.indexOf(query) >= 0) {
 			return 'if[' + searching.commands_block.indexOf(query) + ']';
 		} else {
@@ -573,9 +562,6 @@ function findPathRecursive (starter_index, hierarquia_bottom_up, function_obj, i
 	var full_path = '';
 	
 	for (var i = 0; i <= hierarquia_bottom_up.length; i ++) {
-
-		console.log('\n\n:: ', i, ':\n', hierarquia_bottom_up[i]);
-
 		full_path += findSingleElement(hierarquia_bottom_up[i], hierarquia_bottom_up[i + 1]) + '-';
 	}
 
@@ -593,11 +579,6 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	if (el.hasClass('ghost_div')) {
 		if (el.closest('.command_container').length < 1) {
 			
-
-			console.log('\n\nvou tentar!!!!');
-
-			console.log(el.closest('.commands_list_div'), '\n\n');
-
 			el.closest('.commands_list_div').css('height', el.closest('.commands_list_div').css('height') + 30);
 			
 			//$('.ghost_div').remove();
@@ -606,10 +587,6 @@ function manageCommand (function_obj, function_container, event, command_type) {
 		}
 	}
 
-	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;
@@ -642,7 +619,6 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	}
 	var hierarquia_bottom_up = null;
 	// Agora é descobrir qual o escopo para adicionar o comando:
-	console.log('ev0');
 	// Se o elemento clicado possuir o atributo "fun", então, é direto na div dos comandos:
 	if (typeof el.data('fun') !== 'undefined') {
 
@@ -665,7 +641,6 @@ 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");
 		hierarquia_bottom_up = [];
@@ -677,13 +652,7 @@ function manageCommand (function_obj, function_container, event, command_type) {
 				hierarquia_bottom_up.push($(hier_find[i]).data('command'));
 			}
 		}
-		console.log("comando em que soltou: ");
-		console.log(hierarquia_bottom_up[0]);
-		console.log("hierarquia de baixo para cima na árvore, de onde ele soltou: ");
-		for (var i = 0; i < hierarquia_bottom_up.length; i++) {
-			console.log(hierarquia_bottom_up[i]);
-		}
-
+		
 		// Se for do tipo break, verificar se está no contexto correto: 
 		// Caso não esteja no contexto, apenas retorna sem dar continuidade:
 		var is_correct_context = false;
@@ -707,33 +676,25 @@ function manageCommand (function_obj, function_container, event, command_type) {
 
 		// se a hierarquia possuir apenas um elemento, então está na raiz dos comandos: 
 		if (hierarquia_bottom_up.length == 1) {
-			console.log('QQ1');
 			var sub_elemento = false;
 			for (var i = 0; i < hier_find.length; i++) {
 				if (typeof $(hier_find[i]).data('command') !== 'undefined') {
-					console.log('QQ2');
 					findBeforeOrAfterCommandToAdd(hier_find[i], event, function_obj, command_type);
 					sub_elemento = true;
 					break;
 				}
 			}
 			if (!sub_elemento) {
-				console.log('QQ3');
 				findBeforeOrAfterCommandToAdd(el[0], event, function_obj, command_type);
 			}
 		} else {
-			console.log('QQ4');
 			// caso exista mais de um elemento na hierarquia:
 			if (typeof $(el).data('command') !== 'undefined') {
-				console.log('QQ5');
-				console.log("PPP1");
 				insertCommandInBlockHierar(el[0], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
 			} else {
-				console.log('QQ6');
 				var sub_elemento = false;
 				for (var i = 0; i < hier_find.length; i++) {
 					if (typeof $(hier_find[i]).data('command') !== 'undefined') {
-						console.log('QQ7');
 						insertCommandInBlockHierar(hier_find[i], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
 						sub_elemento = true;
 						break;
@@ -748,13 +709,10 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	// which_element_is_draged = null;
 
 	if (hierarquia_bottom_up) {
-		console.log('\n\n:::índices::\n\n');
 		var i = hierarquia_bottom_up.length - 1;
 		var starter_index = window.program_obj.functions[window.program_obj.functions.indexOf(function_obj)].commands.indexOf(hierarquia_bottom_up[i]);
 		var all_str_path = starter_index + '-' + findPathRecursive(starter_index, hierarquia_bottom_up, function_obj);
 		registerUserEvent(function_obj.name, ActionTypes.INSERT_COMMAND, command_type, '/' , all_str_path);
-		console.log('\n\nfull path: \n\n', all_str_path);
-		console.log('fim dos índices');
 	}
 
 	renderAlgorithm();
@@ -769,14 +727,10 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 		(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.switch) ) {
 
-		console.log('QQ17');
-
 		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) ) {
 
-			console.log('QQ18');
-
 			// 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 = [];
@@ -796,7 +750,6 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 		}
 
 	} else {
-		console.log('QQ19');
 		// entra neste bloco, se soltou o comando sobre outro comando dentro de um subbloco:
 		findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, command_type);
 	}
@@ -804,8 +757,6 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 
 function findNearbyCommandToAddInBlockScope (el, event, node_list_commands, function_obj, command_type, command_parent) {
 
-	console.log("\n\n\n::COMANDOS:\n\n", 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;
@@ -900,12 +851,9 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 
 	if ((command_parent.type != Models.COMMAND_TYPES.iftrue) && (command_parent.type != Models.COMMAND_TYPES.switch)) {
 		var hier = temp_parent.parentsUntil(".all_cases_div");
-		console.log("vou procurar!!");
 		for (var i = 0; i < hier.length; i++) {
-			console.log("estou vasculhando...");
 			var temp = $(hier[i]);
 			if (typeof temp.data('switchcase') !== 'undefined') {
-				console.log("encontrei");
 				command_parent = temp.data('switchcase');
 				is_in_else = false;
 				break;
@@ -913,14 +861,6 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 		}
 	}
 
-	console.log('debugging:');
-	console.log('el_jq');
-	console.log(el_jq);
-	console.log('command_parent');
-	console.log(command_parent);
-	console.log('command_target');
-	console.log(command_target);
-
 	var menor_distancia = 999999999;
 	var antes = true;
 
@@ -939,14 +879,9 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 		
 		var recentComand = genericCreateCommand(command_type);
 
-		console.log('MMM1');
-
 		if (is_in_else) {
 
-			console.log('MMM2');
-
 			if (command_parent == command_target) {
-				console.log('MMM3');
 				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
 					command_parent.commands_else = [];
 
@@ -959,7 +894,6 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 				}
 				return;
 			}
-			console.log('MMM7');
 			var index = command_parent.commands_else.indexOf(command_target);
 
 			if (index > -1) {
@@ -968,25 +902,20 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 
 			renderCommand(recentComand, el, 1, function_obj);
 		} else {
-			console.log('MMM4');
 			if (command_parent == command_target) {
-				console.log('Nxxxx5');
 				if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 					command_parent.commands_block = [];
-					console.log('SSS4');
 					var recentComand = genericCreateCommand(command_type);
 					command_parent.commands_block.push(recentComand);
 
 					renderCommand(recentComand, el_jq, 3, function_obj);
 				} else {
-					console.log('SSS5');
 					findInBlockCorrectPlace(el_jq, event, function_obj, command_type);
 				}
 				
 				
 				return;
 			}
-			console.log('MMM6');
 
 			var index = command_parent.commands_block.indexOf(command_target);
 
@@ -1000,28 +929,23 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 		
 
 	} else {
-		console.log('XXX1');
 		var recentComand = genericCreateCommand(command_type);
 
 		if (is_in_else) {
 
 			if (command_parent == command_target) {
-				console.log('MMM3');
 				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
 					command_parent.commands_else = [];
-					console.log('SSS1');
 					var recentComand = genericCreateCommand(command_type);
 					command_parent.commands_else.push(recentComand);
 
 					renderCommand(recentComand, el_jq, 3, function_obj);
 				} else { // Se já tem algum comando no bloco:
-					console.log('SSS2');
 					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, true);
 				}
 				return;
 			}
 
-			console.log('XXX2');
 			var index = command_parent.commands_else.indexOf(command_target);
 
 			if (index > -1) {
@@ -1033,16 +957,13 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 		} else {
 
 			if (command_parent == command_target) {
-				console.log('Nxxxx78');
 				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);
-					console.log('SSS6');
 					renderCommand(recentComand, el_jq, 3, function_obj);
 				} else {
-					console.log('SSS7');
 					findInBlockCorrectPlace(el_jq, event, function_obj, command_type);
 				}
 				
@@ -1050,7 +971,6 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 				return;
 			}
 
-			console.log('XXX3');
 			var index = command_parent.commands_block.indexOf(command_target);
 
 			if (index > -1) {
@@ -1086,8 +1006,6 @@ function insertCommandInBlock (el, event, function_obj, command_type) {
 
 	} else if (el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) {
 
-		console.log('QQ9');
-		
 		// no if ou no else?
 		var correct_div = $(document.elementFromPoint(event.pageX, event.pageY));
 		var is_in_if = true;
@@ -1137,7 +1055,6 @@ function insertCommandInBlock (el, event, function_obj, command_type) {
 		}
 
 	} else { // é do tipo switch
-		console.log("está tentando inserir em um switch que está na raiz!");
 		addCommandToSwitchCase(event, function_obj, command_type);
 	}
 }
@@ -1245,31 +1162,20 @@ function findInBlockCorrectPlace (el, event, function_obj, command_type, is_in_e
 	}
 
 	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
-
-	console.log("menor_distancia: ");
-	console.log(elemento_menor_distancia);
 	
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
 
-		console.log('QQ11');
-		
 		var recentComand = genericCreateCommand(command_type);
 
 		var command_parent = el_jq.data('command');
 
 		if (is_in_else) {
-			console.log('QQ15');
 			command_parent.commands_else.push(recentComand);
-			console.log('el_jq');
-			console.log(el_jq);
-			console.log("$(el_jq.find('.commands_else')[0]):: ");
-			console.log($(el_jq.find('.commands_else')[0]));
 
 			renderCommand(recentComand, el_jq, 3, function_obj);
 
 		} else {
-			console.log('QQ16');
 			command_parent.commands_block.push(recentComand);
 
 			renderCommand(recentComand, $(el_jq.find('.block_commands')[0]), 3, function_obj);
@@ -1277,8 +1183,6 @@ function findInBlockCorrectPlace (el, event, function_obj, command_type, is_in_e
 
 	} else {
 
-		console.log('QQ12');
-
 		var recentComand = genericCreateCommand(command_type);
 
 		var command_parent = el_jq.data('command');

js/visualUI/commands/attribution.js

@@ -4,15 +4,15 @@ import * as VariableValueMenu from './variable_value_menu';
 import * as VariableValueMenuManagement from './variable_value_menu';
 import * as CommandsManagement from '../commands';
 import * as ExpressionManagement from './generic_expression';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui attribution created_element"> <i class="ui icon small arrow left"></i> <span> x <&#8212; 1 + 1 </span></div>');
 }
 
 export function renderCommand (command, function_obj) {
-	
 	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 span_command_spec">'+LocalizedStrings.getUI('text_receives')+'</span> '
-		 + '<div class="expression_elements"></div> </div>');
+		 + '<div class="expression_elements"></div>  <span class="textual_expression"></span> <i class="ui icon unlock button_alternate_expression"></i> </div>');
 	el.data('command', command);
 
 	VariableValueMenu.renderMenu(command, command.variable, el.find('.var_attributed'), function_obj);
@@ -26,7 +26,21 @@ export function renderCommand (command, function_obj) {
 
 	ExpressionManagement.renderExpression(command, function_obj, el.find('.expression_elements'), command.expression);
 
-	//renderExpressionElements(command, function_obj, el);
+	if (command.lockexpression) {
+		if (command.expression) {
+			try {
+				var text = CodeGenerator.elementExpressionCode(command.expression);
+				if (text) {
+					$(el.find('.expression_elements')[0]).toggle();
+					$(el.find('.textual_expression')[0]).text(text);
+					$(el.find('.textual_expression')[0]).toggle();
+					$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+				}
+			} catch (e) {
+				command.lockexpression = false;
+			}
+		}
+	}
 
 	return el;
 
@@ -150,7 +164,7 @@ function renderOperator (command, function_obj, temp_op, expression_element, ind
 
 	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
-	     expression_element.itens[index_op] = value;
+			 expression_element.itens[index_op] = value;
       }
 	});
 
@@ -414,6 +428,21 @@ function addMenuItens (command, function_obj, expression_div) {
 
 function addHandlers (command, function_obj, attribution_dom) {
 
+	$(attribution_dom.find('.textual_expression')[0]).toggle();
+	
+	attribution_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.expression) {
+			var text = CodeGenerator.elementExpressionCode(command.expression);
+			if (text) {
+				$(attribution_dom.find('.expression_elements')[0]).toggle();
+				$(attribution_dom.find('.textual_expression')[0]).text(text);
+				$(attribution_dom.find('.textual_expression')[0]).toggle();
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
 	attribution_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, attribution_dom)) {
 			attribution_dom.fadeOut(400, function() {

js/visualUI/commands/dowhiletrue.js

@@ -3,6 +3,7 @@ import * as CommandsManagement from '../commands';
 import * as ConditionalExpressionManagement from './conditional_expression';
 import * as ContextualizedMenu from './contextualized_menu';
 import * as GenericExpressionManagement from './generic_expression';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui dowhiletrue created_element"> <i class="ui icon small sync"></i> <span> '+ LocalizedStrings.getUI('text_command_do') +' <br> ' + LocalizedStrings.getUI('text_command_do_until') +'(x < 10) </span></div>');
@@ -13,7 +14,8 @@ export function renderCommand (command, function_obj) {
 	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do') + ' </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
-	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do_until') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <i class="ui icon unlock button_alternate_expression"></i> <span class="span_command_spec"> ) </span>';
+	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do_until') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="textual_expression"></span> <span class="span_command_spec"> ) </span>';
+	ret += ' <i class="ui icon unlock button_alternate_expression"></i>';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -36,12 +38,44 @@ export function renderCommand (command, function_obj) {
 		}
 	}
 
+	if (command.lockexpression) {
+		if (command.expression) {
+			try {
+				var text = CodeGenerator.elementExpressionCode(command.expression);
+				if (text) {
+					$(el.find('.conditional_expression')[0]).toggle();
+					$(el.find('.textual_expression')[0]).text(text);
+					$(el.find('.textual_expression')[0]).toggle();
+					$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+				}
+			} catch (e) {
+				command.lockexpression = false;
+			}
+		}
+	}
+
 	return el;
 }
 
 
 function addHandlers (command, function_obj, dowhiletrue_dom) {
 
+	$(dowhiletrue_dom.find('.textual_expression')[0]).toggle();
+	
+	dowhiletrue_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.expression) {
+			var text = CodeGenerator.elementExpressionCode(command.expression);
+			if (text) {
+				$(dowhiletrue_dom.find('.conditional_expression')[0]).toggle();
+				$(dowhiletrue_dom.find('.textual_expression')[0]).text(text);
+				$(dowhiletrue_dom.find('.textual_expression')[0]).toggle();
+
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
 	dowhiletrue_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, dowhiletrue_dom)) {
 			dowhiletrue_dom.fadeOut(400, function() {

js/visualUI/commands/generic_expression.js

@@ -101,7 +101,7 @@ export function renderExpression (
         types_included.push(Models.EXPRESSION_TYPES.exp_logic);
         types_included.push(Models.EXPRESSION_TYPES.exp_arithmetic);
       } else {
-        console.log("NÃO RECONHECI! VEJA: ", command.variable.content.type);
+        //console.log("NÃO RECONHECI! VEJA: ", command.variable.content.type);
       }
 
       renderElements(
@@ -200,7 +200,6 @@ export function renderExpression (
 function removeElement (event, expression_array) {
   const indice = $(event.item).data("index");
   const first = expression_array[0];
-  console.log("indice: ", indice);
   if (expression_array[indice].type) {
     // if is alone in expression:
     if (expression_array.length == 1) {
@@ -394,9 +393,7 @@ function renderElements (
       }
     } else {
       if (i == 0) {
-        console.log("NEGAÇÃO NO PRIMEIRO ELEMENTO");
       } else if (expression_array[i - 1] == "(") {
-        console.log("NEGAÇÃO APÓS O PARÊNTESES");
       }
       renderOperatorMenu(
         command,
@@ -906,7 +903,6 @@ function renderStartAddOperator (
       const sera = position;
 
       if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_arithmetic) >= 0) {
-        console.log("p1");
         expression_array.splice(
           sera,
           0,
@@ -918,7 +914,6 @@ function renderStartAddOperator (
       } else if (
         types_included.indexOf(Models.EXPRESSION_TYPES.exp_logic) >= 0
       ) {
-        console.log("p2");
         expression_array.splice(
           sera,
           0,
@@ -930,7 +925,6 @@ function renderStartAddOperator (
       } else if (
         types_included.indexOf(Models.EXPRESSION_TYPES.exp_conditional) >= 0
       ) {
-        console.log("p3");
         expression_array.splice(
           sera,
           0,

js/visualUI/commands/iftrue.js

@@ -53,12 +53,16 @@ export function renderCommand (command, function_obj) {
 
 	if (command.lockexpression) {
 		if (command.expression) {
-			var text = CodeGenerator.elementExpressionCode(command.expression);
-			if (text) {
-				$(el.find('.conditional_expression')[0]).toggle();
-				$(el.find('.textual_expression')[0]).text(text);
-				$(el.find('.textual_expression')[0]).toggle();
-				$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+			try {
+				var text = CodeGenerator.elementExpressionCode(command.expression);
+				if (text) {
+					$(el.find('.conditional_expression')[0]).toggle();
+					$(el.find('.textual_expression')[0]).text(text);
+					$(el.find('.textual_expression')[0]).toggle();
+					$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+				}
+			} catch (e) {
+				command.lockexpression = false;
 			}
 		}
 	}

js/visualUI/commands/repeatNtimes.js

@@ -5,6 +5,7 @@ import * as ConditionalExpressionManagement from './conditional_expression';
 import * as VariableValueMenu from './variable_value_menu';
 import * as ContextualizedMenu from './contextualized_menu';
 import * as GenericExpressionManagement from './generic_expression';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui repeatNtimes created_element"> <i class="ui icon small sync"></i> <span> repita_para i de 0 ate 10 passo 1 <br> </span></div>');
@@ -25,7 +26,8 @@ export function renderCommand (command, function_obj) {
 		<div class="conditional_expression"></div> <div class="pass_button"></div> 
 		<div class="ui incrementation_field"><span class="text_inc_receives span_command_spec"></span>
 		<div class="ui first_operand"></div><div class="ui operator"></div>
-		<div class="ui second_operand"></div></div>  <span class="span_command_spec"> </span>'`;
+		<div class="ui second_operand"></div></div>  <span class="span_command_spec"> </span>
+		<span class="textual_expression"></span> <i class="ui icon unlock button_alternate_expression"></i>`;
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> </span>';
@@ -83,6 +85,26 @@ export function renderCommand (command, function_obj) {
 		}
 	}
 
+	if (command.lockexpression) {
+		try {
+			var text = CodeGenerator.repeatNtimesHeader(command);
+			if (text) {
+				$(el.find('.textual_expression')[0]).html(text);
+				$(el.find('.textual_expression')[0]).toggle();
+
+				$(el.find('.attribution_expression')[0]).toggle();
+				$(el.find('.span_command_spec.separator_character')[0]).toggle();
+				$(el.find('.conditional_expression')[0]).toggle();
+				$(el.find('.pass_button')[0]).toggle();
+				$(el.find('.incrementation_field')[0]).toggle();
+
+				$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+			}
+		} catch (e) {
+			command.lockexpression = false;
+		}
+	}
+
 	return el;
 }
 
@@ -171,6 +193,26 @@ export function manageClearExpressionElements (command, ref_object, dom_object,
 
 function addHandlers (command, function_obj, repeatNtimes_dom) {
 
+	$(repeatNtimes_dom.find('.textual_expression')[0]).toggle();
+	
+	repeatNtimes_dom.find('.button_alternate_expression').on('click', function() {
+		var text = CodeGenerator.repeatNtimesHeader(command);
+		if (text) {
+			$(repeatNtimes_dom.find('.textual_expression')[0]).html(text);
+			$(repeatNtimes_dom.find('.textual_expression')[0]).toggle();
+
+			$(repeatNtimes_dom.find('.attribution_expression')[0]).toggle();
+			$(repeatNtimes_dom.find('.span_command_spec.separator_character')[0]).toggle();
+			$(repeatNtimes_dom.find('.conditional_expression')[0]).toggle();
+			$(repeatNtimes_dom.find('.pass_button')[0]).toggle();
+			$(repeatNtimes_dom.find('.incrementation_field')[0]).toggle();
+
+			$(repeatNtimes_dom.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+
+			command.lockexpression = !command.lockexpression;
+		}
+	});
+
 	repeatNtimes_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, repeatNtimes_dom)) {
 			repeatNtimes_dom.fadeOut(400, function() {

js/visualUI/commands/variable_value_menu.js

@@ -467,9 +467,7 @@ function variableValueMenuCode (
 
       context_menu.dropdown({
         onChange: function (value, text, $selectedItem) {
-          console.log("S1");
           if ($selectedItem.data("clear")) {
-            console.log("PP1");
             dom_object.text("");
 
             variable_obj.content = null;
@@ -579,9 +577,7 @@ function variableValueMenuCode (
 
       context_menu.dropdown({
         onChange: function (value, text, $selectedItem) {
-          console.log("S2");
           if ($selectedItem.data("clear")) {
-            console.log("PP2");
             dom_object.text("");
 
             variable_obj.content = null;
@@ -657,9 +653,7 @@ function variableValueMenuCode (
 
       context_menu.dropdown({
         onChange: function (value, text, $selectedItem) {
-          console.log("S3");
           if ($selectedItem.data("clear")) {
-            console.log("PP3");
             dom_object.text("");
 
             variable_obj.content = null;
@@ -755,9 +749,7 @@ function variableValueMenuCode (
 
       context_menu.dropdown({
         onChange: function (value, text, $selectedItem) {
-          console.log("S4");
           if ($selectedItem.data("clear")) {
-            console.log("PP4");
             dom_object.text("");
 
             variable_obj.content = null;
@@ -864,9 +856,7 @@ function variableValueMenuCode (
 
       context_menu.dropdown({
         onChange: function (value, text, $selectedItem) {
-          console.log("S5");
           if ($selectedItem.data("clear")) {
-            console.log("PP5");
             dom_object.text("");
 
             variable_obj.content = null;
@@ -946,9 +936,7 @@ function variableValueMenuCode (
 
     context_menu.dropdown({
       onChange: function (value, text, $selectedItem) {
-        console.log("S6");
         if ($selectedItem.data("clear")) {
-          console.log("PP6");
           dom_object.text("");
 
           variable_obj.content = null;
@@ -1189,7 +1177,6 @@ function addHandlers (
   if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
     menu_var_or_value.dropdown({
       onChange: function (value, text, $selectedItem) {
-        console.log("S7");
         dom_object.find(".var_name").remove();
         switch ($selectedItem.data("option")) {
           case VAR_OR_VALUE_TYPES.only_function:
@@ -1394,9 +1381,7 @@ function openInputToFunction (
 
     context_menu.dropdown({
       onChange: function (value, text, $selectedItem) {
-        console.log("S8");
         if ($selectedItem.data("clear")) {
-          console.log("PP7");
           dom_object.text("");
 
           ref_object.content = null;
@@ -1480,9 +1465,7 @@ function openInputToFunction (
 
     context_menu.dropdown({
       onChange: function (value, text, $selectedItem) {
-        console.log("S9");
         if ($selectedItem.data("clear")) {
-          console.log("PP8");
           dom_object.text("");
 
           ref_object.content = null;
@@ -1635,9 +1618,7 @@ function openInputToVariable (
 
   context_menu.dropdown({
     onChange: function (value, text, $selectedItem) {
-      console.log("S10");
       if ($selectedItem.data("clear")) {
-        console.log("PP9");
         dom_object.text("");
 
         ref_object.content = null;
@@ -1860,7 +1841,6 @@ function openInputToValue (
   }
 
   rendered.on("click", function (e) {
-    console.log("TTT2");
     rendered.empty();
     rendered.remove();
     dom_object.empty();

js/visualUI/commands/whiletrue.js

@@ -3,6 +3,7 @@ import * as CommandsManagement from '../commands';
 import * as ConditionalExpressionManagement from './conditional_expression';
 import * as ContextualizedMenu from './contextualized_menu';
 import * as GenericExpressionManagement from './generic_expression';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui whiletrue created_element"> <i class="ui icon small sync"></i> <span> ' + LocalizedStrings.getUI('text_command_while') + ' ( x < 10 ) <br> </span></div>');
@@ -11,8 +12,9 @@ export function createFloatingCommand () {
 export function renderCommand (command, function_obj) {
 	var ret = '';
 	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_while') + ' </span>';
-	ret += '<span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += '<span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="textual_expression"></span> <span class="span_command_spec"> ) </span>';
 	ret += ' </span>';
+	ret += '<i class="ui icon unlock button_alternate_expression"></i>';
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> </span>';
@@ -36,11 +38,42 @@ export function renderCommand (command, function_obj) {
 		}
 	}
 
+	if (command.lockexpression) {
+		if (command.expression) {
+			try {
+				var text = CodeGenerator.elementExpressionCode(command.expression);
+				if (text) {
+					$(el.find('.conditional_expression')[0]).toggle();
+					$(el.find('.textual_expression')[0]).text(text);
+					$(el.find('.textual_expression')[0]).toggle();
+					$(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+				}
+			} catch (e) {
+				command.lockexpression = false;
+			}
+		}
+	}
+	
 	return el;
 }
 
 function addHandlers (command, function_obj, whiletrue_dom) {
 
+	$(whiletrue_dom.find('.textual_expression')[0]).toggle();
+	
+	whiletrue_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.expression) {
+			var text = CodeGenerator.elementExpressionCode(command.expression);
+			if (text) {
+				$(whiletrue_dom.find('.conditional_expression')[0]).toggle();
+				$(whiletrue_dom.find('.textual_expression')[0]).text(text);
+				$(whiletrue_dom.find('.textual_expression')[0]).toggle();
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
 	whiletrue_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, whiletrue_dom)) {
 			whiletrue_dom.fadeOut(400, function() {

js/visualUI/commands/writer.js

@@ -4,6 +4,7 @@ import * as VariableValueMenu from "./variable_value_menu";
 import * as VariableValueMenuManagement from "./variable_value_menu";
 import * as CommandsManagement from "../commands";
 import * as GenericExpressionManagement from "./generic_expression";
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
   return $(
@@ -20,11 +21,12 @@ export function renderCommand (command, function_obj) {
       <span class="span_command_spec">${LocalizedStrings.getUI(
         "text_command_write"
       )}
-      ( </span><div class="all_elements_write"></div>
+      ( </span><div class="all_elements_write"></div> <span class="textual_expression"></span>
       <span class="close_parentheses span_command_spec">)</span>
     <img data-state="${command.newline ? "on" : "false"}" src="${
     command.newline ? "img/new_line.svg" : "img/no_new_line.svg"
-  }" class="ivprog_newline_btn"/>
+  }" class="ivprog_newline_btn"/> 
+    <i class="ui icon unlock button_alternate_expression"></i>
     </div>`;
   const el = $(ret);
   el.data("command", command);
@@ -58,6 +60,21 @@ export function renderCommand (command, function_obj) {
 	}*/
 
   addHandlers(command, function_obj, el);
+
+  if (command.content) {
+    try {
+      var text = CodeGenerator.elementExpressionCode(command.content);
+      if (text) {
+        $(el.find('.all_elements_write')[0]).toggle();
+        $(el.find('.textual_expression')[0]).text(text);
+        $(el.find('.textual_expression')[0]).toggle();
+        $(el.find('.button_alternate_expression')[0]).toggleClass('unlock').toggleClass('lock');
+      }
+    } catch (e) {
+      command.lockexpression = false;
+    }
+  }
+
   return el;
 }
 
@@ -88,6 +105,22 @@ function addHandlersManager (
 }
 
 function addHandlers (command, function_obj, writer_dom) {
+
+  $(writer_dom.find('.textual_expression')[0]).toggle();
+	
+	writer_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.content) {
+      var text = CodeGenerator.elementExpressionCode(command.content);
+			if (text) {
+				$(writer_dom.find('.all_elements_write')[0]).toggle();
+				$(writer_dom.find('.textual_expression')[0]).text(text);
+				$(writer_dom.find('.textual_expression')[0]).toggle();
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
   writer_dom.find(".button_remove_command").on("click", function () {
     if (CommandsManagement.removeCommand(command, function_obj, writer_dom)) {
       writer_dom.fadeOut(400, function () {

js/visualUI/functions.js

@@ -509,10 +509,8 @@ function updateProgramObjDrag () {
   var index_each = [];
   var path_relative = [];
   for (var i = path_target.length - 1; i >= 0; i --) {
-    console.log('da vez', $(path_target[i + 1]));
     if (i == (path_target.length - 1)) { // está na raiz
       var indice_na_raiz = function_obj.find('.command_container').index(path_target[i]);
-      console.log('índice na raiz: ', indice_na_raiz);
     } else {
       if ($(path_target[i + 1]).hasClass('iftrue')) {
         if ($(path_target[i]).parent().hasClass('commands_if')) {
@@ -543,24 +541,7 @@ function updateProgramObjDrag () {
   // index_in_block = $(evento_drag.item).parent().find('.command_container').index(evento_drag.item);
 
   const is_in_case_switch = $(evento_drag.item).parent().hasClass('case_commands_block');
-  // var index_case_of_switch = -1;
-  // if (is_in_case_switch) {
-  //   index_case_of_switch = $(evento_drag.item).parent().parent().parent().find('.case_div').index($(evento_drag.item).parent().parent());
-  // }
-
-  /*console.log('path_relative:');
-  console.log(path_relative);
-  console.log('index_each:');
-  console.log(index_each);
-  console.log('index_in_block:');
-  console.log(index_in_block);
-  console.log('ele está em algum bloco de senão? ');
-  console.log(is_in_else);
-  console.log('ele está dentro de um case de switch?');
-  console.log(is_in_case_switch);
-  console.log('qual é o índice do case: ');
-  console.log(index_case_of_switch);*/
-
+  
   // encontrar o elemento na árvore:
 
   var command_start_point = window.program_obj.functions[function_index].commands[indice_na_raiz];
@@ -595,7 +576,6 @@ function updateProgramObjDrag () {
   } else {
     // verificar se tem alguma coisa no bloco:
     if (block_to_insert.commands_block) {
-      console.log("existe alguma coisa dentro do bloco, index: ", evento_drag.newIndex);
       block_to_insert.commands_block.splice(evento_drag.newIndex, 0, command_in_drag);
     } else {
       block_to_insert.commands_block = [];