Merge branch 'collapse-blocks-and-expressions' of LInE/iVProg into master

css/ivprog-visual-1.0.css

@@ -138,17 +138,6 @@ body {
 	margin-right: 10px;
 }
 
-.case_commands_block {
-	/*border: 1px solid red;*/
-}
-
-.context_menu {
-	display: inline;
-	float: right; 
-	margin-right: 25px;
-	margin-top: -4px;
-}
-
 .case_div {
 	border: 1px solid gray;
 	margin-left: 30px;
@@ -1085,3 +1074,70 @@ div.ui.checkbox.transition.visible {
   height: 32px;
   cursor: pointer;
 }
+
+.ui.icon.button.minimize_block_button {
+	background: none;
+	float: right;
+	padding-top: .25rem;
+	margin-right: .3rem;
+}
+
+div.ui.dropdown.menu_commands.pause {
+
+}
+
+.context_menu {
+	display: inline;
+	margin-left: 1rem;
+}
+
+.data_block_if span.textual_expression,
+.ui.dowhiletrue span.textual_expression,
+.ui.whiletrue span.textual_expression,
+.attribution span.textual_expression,
+.writer span.textual_expression,
+.return span.textual_expression {
+	color: #2325a6;
+	font-weight: bold;
+	font-size: 1.2rem;
+}
+
+i.button_alternate_expression {
+	cursor: pointer;
+	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;
+}
+
+.ui.dropdown.menu_commands.pause button {
+	border: none;
+	background: #f2711c;
+	color: white;
+	border-radius: .2rem;
+	padding: .1rem;
+	padding-left: 0.1rem;
+	font-size: .9rem;
+	padding-left: .25rem;
+	cursor: pointer;
+	margin-top: .15rem;
+}

js/iassign-integration-functions.js

@@ -20,11 +20,42 @@ var iLMparameters = {
 // and no dependency to the global scope, avoind future 'strict mode' problems
 //localStorage.setItem('ivprog.lang', iLMparameters.lang);
 
+function removeCollapseValue (command) {
+  if (command.collapsed) {
+    delete command.collapsed;
+  }
+  if (command.type == 'iftrue') {
+    if (command.commands_block)
+      for (var i = 0; i < command.commands_block.length; i++) {
+        removeCollapseValue(command.commands_block[i]);
+      }
+    if (command.commands_else)
+      for (var i = 0; i < command.commands_else.length; i++) {
+        removeCollapseValue(command.commands_else[i]);
+      }
+  } else if (command.type == 'repeatNtimes' 
+            || command.type == 'whiletrue' 
+            || command.type == 'dowhiletrue' ) {
+    if (command.commands_block)
+      for (var i = 0; i < command.commands_block.length; i++) {
+        removeCollapseValue(command.commands_block[i]);
+      }
+  }
+}
+
 // Função chamada pelo iTarefa quando o professor finaliza a criação da atividade
 // ou quando o aluno finaliza a resolução do exercício
 // O retorno é um JSON com os dados do exercício ou da resolução
 // Esse retorno será armazenado no banco de dados do Moodle, pelo iTarefa
 function getAnswer () {
+  // Remover o colapsar usado localmente:
+  if (window.program_obj) {
+    for (var i = 0; i < window.program_obj.functions.length; i++) {
+      for (var j = 0; j < window.program_obj.functions[i].commands.length; j++) {
+        removeCollapseValue(window.program_obj.functions[i].commands[j]);
+      }
+    }
+  }
   // Se o parâmetro "iLM_PARAM_SendAnswer" for false,
   // então trata-se de resolução de atividade
   if (iLMparameters.iLM_PARAM_SendAnswer == 'false') {

js/processor/ivprogProcessor.js

@@ -146,7 +146,7 @@ export class IVProgProcessor {
       funcStore,
       func.variablesDeclarations
     );
-    const finalSto = this.executeCommands(stoWithVars, func.commands);
+    const finalSto = await this.executeCommands(stoWithVars, func.commands);
     this.stores.pop();
     this.context.pop();
     return finalSto;

js/visualUI/algorithm.js

@@ -11,7 +11,6 @@ export function renderAlgorithm () {
 		return;
 	}
 	window.block_render = true;
-	console.log('rendering algorithm');
 
  	$('.all_functions').children().off();
 	$('.all_functions').empty();
@@ -28,7 +27,6 @@ export function renderAlgorithm () {
 	}	
 
 	setTimeout(function(){ window.block_render = false; }, 100);
-	console.log('fim do render');
 
 	if (settingsFilter && settingsFilter[0]) {
       blockAllEditingOptions();

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) {
@@ -580,7 +590,7 @@ function attributionsCode (command_obj, indentation) {
   return ret;
 }
 
-function elementExpressionCode (expression_obj) {
+export function elementExpressionCode (expression_obj) {
   let ret = "";
 
   for (let i = 0; i < expression_obj.length; i++) {

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/break.js

@@ -2,11 +2,11 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as CommandsManagement from '../commands';
 
 export function createFloatingCommand () {
-	return $('<div class="ui comment created_element"> <i class="ui icon small quote left"></i> <span> '+LocalizedStrings.getUI('text_break')+' </span></div>');
+	return $('<div class="ui comment created_element"> <i class="ui icon small pause"></i> <span> '+LocalizedStrings.getUI('text_break')+' </span></div>');
 }
 
 export function renderCommand (command, function_obj) {
-	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> <span>'+LocalizedStrings.getUI('text_break')+'</span> </div>');
+	var el = $('<div class="ui comment command_container"> <i class="ui icon small pause"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_break')+'</span> </div>');
 	el.data('command', command);
 
 	addHandlers(command, function_obj, el);

js/visualUI/commands/contextualized_menu.js

@@ -6,18 +6,18 @@ import * as SwitchManagement from './switch';
 
 export function renderMenu (command, dom_where_render, function_obj, dom_command) {
 
-	var menu_div = '<div class="ui dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
+	var menu_div = '<div class="ui dropdown menu_commands pause" ><button><i class="icon code"></i></button> <div class="menu"> ';
 
 	if ((command.type == Models.COMMAND_TYPES.repeatNtimes) 
 		|| (command.type == Models.COMMAND_TYPES.whiletrue) 
 		|| (command.type == Models.COMMAND_TYPES.dowhiletrue)) {
 
-		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="pause icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
 
 	} else {
 
-		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
-		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.switchcase+'"><i class="download icon"></i> '+LocalizedStrings.getUI('btn_case')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="pause icon"></i> '+LocalizedStrings.getUI('btn_break')+' </a>';
+		menu_div += '<a class="item" data-command="'+Models.COMMAND_TYPES.switchcase+'"><i class="plus icon"></i> '+LocalizedStrings.getUI('btn_case')+' </a>';
 
 	}
 
@@ -28,6 +28,10 @@ export function renderMenu (command, dom_where_render, function_obj, dom_command
 	dom_where_render.append(menu_div);
 
 	addHandlers(command, dom_where_render, function_obj, dom_command);
+
+	if (command.collapsed) {
+		dom_command.children('.ui.block_commands').toggle();
+	}
 }
 
 function addHandlers (command, dom_where_render, function_obj, dom_command) {

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>');
@@ -10,10 +11,11 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	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 dowhiletrue command_container"> <i class="ui icon small sync command_drag"></i> <i class="ui icon times red button_remove_command"></i> <button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button> <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> <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> <div class="ui context_menu"></div> ';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -36,12 +38,49 @@ 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')[el.find('.conditional_expression').length - 1]).toggle();
+					$(el.find('.textual_expression')[el.find('.textual_expression').length - 1]).text(text);
+					$(el.find('.textual_expression')[el.find('.textual_expression').length - 1]).toggle();
+					$(el.find('.button_alternate_expression')[el.find('.button_alternate_expression').length - 1]).toggleClass('unlock').toggleClass('lock');
+				}
+			} catch (e) {
+				command.lockexpression = false;
+			}
+		}
+	}
+
 	return el;
 }
 
 
 function addHandlers (command, function_obj, dowhiletrue_dom) {
 
+	dowhiletrue_dom.find('.minimize_block_button').on('click', function(evt){
+		dowhiletrue_dom.children('.ui.block_commands').toggle();
+		command.collapsed = !command.collapsed;
+	});
+
+	$(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')[dowhiletrue_dom.find('.conditional_expression').length - 1]).toggle();
+				$(dowhiletrue_dom.find('.textual_expression')[dowhiletrue_dom.find('.textual_expression').length - 1]).text(text);
+				$(dowhiletrue_dom.find('.textual_expression')[dowhiletrue_dom.find('.textual_expression').length - 1]).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

@@ -1,7 +1,7 @@
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as CommandsManagement from '../commands';
-import * as ConditionalExpressionManagement from './conditional_expression';
 import * as GenericExpressionManagement from './generic_expression';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui iftrue created_element"> <i class="ui icon small random"></i> <span> if (x < 1) { } </span></div>');
@@ -9,9 +9,10 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i>';
+	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button>';
 	ret += '<span class="span_command_spec"> ' + LocalizedStrings.getUI('text_if') + '</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 += '<i class="ui icon unlock button_alternate_expression"></i>';
 	ret += '<span> </span> ';
 	ret += '<div class="ui block_commands commands_if conditional_comands_block" data-if="true">';
  	ret += '</div></div>';
@@ -45,12 +46,48 @@ export function renderCommand (command, function_obj) {
 		}
 	}
 
+	if (command.collapsed) {
+		el.children('.data_block_else').toggle();
+		$(el.find('.block_commands')[0]).toggle();
+	}
+
+	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, iftrue_dom) {
 
+	$(iftrue_dom.find('.textual_expression')[0]).toggle();
+	
+	iftrue_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.expression) {
+			var text = CodeGenerator.elementExpressionCode(command.expression);
+			if (text) {
+				$(iftrue_dom.find('.conditional_expression')[0]).toggle();
+				$(iftrue_dom.find('.textual_expression')[0]).text(text);
+				$(iftrue_dom.find('.textual_expression')[0]).toggle();
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
 	iftrue_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, iftrue_dom)) {
 			iftrue_dom.fadeOut(400, function() {
@@ -58,4 +95,11 @@ function addHandlers (command, function_obj, iftrue_dom) {
 			});
 		}
 	});
+
+	iftrue_dom.find('.minimize_block_button').on('click', function() {
+		iftrue_dom.children('.data_block_else').toggle();
+		$(iftrue_dom.find('.block_commands')[0]).toggle();
+		command.collapsed = !command.collapsed;
+	});
+
 }

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>');
@@ -14,7 +15,8 @@ export function renderCommand (command, function_obj) {
 	let ret = `<div class="ui repeatNtimes 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_for')}
+		<button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button>
+		<span class="span_command_spec"> ${LocalizedStrings.getUI('text_for')}
 		</span>  <div class="ui attribution_expression">
 		<div class="ui variable_attribution"></div>
 		<span class="text_receives span_command_spec" style="margin-left: 10px;margin-right: 20px;"></span>
@@ -25,7 +27,9 @@ 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>
+		<div class="ui context_menu"></div>`;
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> </span>';
@@ -83,6 +87,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 +195,31 @@ export function manageClearExpressionElements (command, ref_object, dom_object,
 
 function addHandlers (command, function_obj, repeatNtimes_dom) {
 
+	repeatNtimes_dom.find('.minimize_block_button').on('click', function(evt){
+		repeatNtimes_dom.children('.ui.block_commands').toggle();
+		command.collapsed = !command.collapsed;
+	});
+
+	$(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/return.js

@@ -4,32 +4,63 @@ import * as VariableValueMenu from './variable_value_menu';
 import * as CommandsManagement from '../commands';
 import * as GenericExpressionManagement from './generic_expression';
 import * as Models from '../ivprog_elements';
+import * as CodeGenerator from '../code_generator';
 
 export function createFloatingCommand () {
 	return $('<div class="ui return created_element"> <i class="ui icon small reply"></i> <span> '+LocalizedStrings.getUI('text_return')+' </span></div>');
 }
 
 export function renderCommand (command, function_obj) {
-	var el = $('<div class="ui return command_container"> <i class="ui icon small reply command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="expression_elements"></div></div>');
+	var el = $('<div class="ui return command_container"> <i class="ui icon small reply command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="expression_elements"></div><span class="textual_expression" style="display: none; margin-left: 1rem;"></span></div>');
 	el.data('command', command);
 
-	addHandlers(command, function_obj, el);
-
 	if (function_obj.return_type != Types.VOID) {
 		if (!command.variable_value_menu) {
 			command.variable_value_menu = [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)];
 		}
 		GenericExpressionManagement.renderExpression(command, function_obj, el.find('.expression_elements'), command.variable_value_menu);
+		el.append($('<i class="ui icon unlock button_alternate_expression" style="margin-left: 1rem;"></i>'));
+
+		if (command.lockexpression) {
+			if (command.variable_value_menu) {
+				try {
+					var text = CodeGenerator.elementExpressionCode(command.variable_value_menu);
+					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;
+				}
+			}
+		}
 	} else {
 		el.find('.expression_elements').remove();
 		command.variable_value_menu = null;
 	}
 	
+	addHandlers(command, function_obj, el);
+
 	return el;
 }
 
 function addHandlers (command, function_obj, return_dom) {
 
+	return_dom.find('.button_alternate_expression').on('click', function() {
+		if (command.variable_value_menu) {
+      var text = CodeGenerator.elementExpressionCode(command.variable_value_menu);
+			if (text) {
+				$(return_dom.find('.expression_elements')[0]).toggle();
+				$(return_dom.find('.textual_expression')[0]).text(text);
+				$(return_dom.find('.textual_expression')[0]).toggle();
+				$(this).toggleClass('unlock').toggleClass('lock');
+				command.lockexpression = !command.lockexpression;
+			}
+		}
+	});
+
 	return_dom.find('.button_remove_command').on('click', function() {
 		if (CommandsManagement.removeCommand(command, function_obj, return_dom)) {
 			return_dom.fadeOut(400, function() {

js/visualUI/commands/switch.js

@@ -9,7 +9,7 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	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> <div class="ui context_menu"></div> <span> '+LocalizedStrings.getUI('text_code_switch')+' ( <div class="ui variable_to_switch"></div> ) <div class="ui all_cases_div"></div></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> '+LocalizedStrings.getUI('text_code_switch')+' ( <div class="ui variable_to_switch"></div> ) <div class="ui context_menu"></div> <div class="ui all_cases_div"></div></span>';
 	ret += '</div>';
 
 	var el = $(ret);

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;
@@ -908,7 +898,7 @@ function variableValueMenuCode (
       '<div class="variable_rendered"> <span class="var_name">';
 
     if (isNaN(variable_obj.content)) {
-      variable_render += variable_obj.content.replaceAll(" ", "&nbsp;");
+      variable_render += variable_obj.content.split(" ").join("&nbsp;");
     } else {
       variable_render += variable_obj.content;
     }
@@ -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;
@@ -1804,7 +1785,7 @@ function openInputToValue (
         .val();
 
     if (isNaN(ref_object.content)) {
-      rendered.html(ref_object.content.replaceAll(" ", "&nbsp;"));
+      rendered.html(ref_object.content.split(" ").join("&nbsp;"));
     } else {
       rendered.text(ref_object.content);
     }
@@ -1827,7 +1808,7 @@ function openInputToValue (
           .val();
 
       if (isNaN(ref_object.content)) {
-        rendered.html(ref_object.content.replaceAll(" ", "&nbsp;"));
+        rendered.html(ref_object.content.split(" ").join("&nbsp;"));
       } else {
         rendered.text(ref_object.content);
       }
@@ -1836,7 +1817,7 @@ function openInputToValue (
     }
     if (code == 27) {
       if (isNaN(ref_object.content)) {
-        rendered.html(ref_object.content.replaceAll(" ", "&nbsp;"));
+        rendered.html(ref_object.content.split(" ").join("&nbsp;"));
       } else {
         rendered.text(ref_object.content);
       }
@@ -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>');
@@ -10,9 +11,10 @@ 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 += '<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><button class="ui icon button minimize_block_button tiny"><i class="icon window minimize"></i></button> <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="textual_expression"></span> <span class="span_command_spec"> ) </span>';
 	ret += ' </span>';
+	ret += '<i class="ui icon unlock button_alternate_expression"></i> <div class="ui context_menu"></div>';
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
 	ret += '<span> </span>';
@@ -36,11 +38,47 @@ 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('.minimize_block_button').on('click', function(evt){
+		whiletrue_dom.children('.ui.block_commands').toggle();
+		command.collapsed = !command.collapsed;
+	});
+
+	$(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);
@@ -38,26 +40,23 @@ export function renderCommand (command, function_obj) {
     command.content
   );
 
-  /*for (var i = 0; i < command.content.length; i ++) {
-		var new_div_item = $( '<div class="var_value_menu_div"></div>' );
-		var div_parent_with_handler = $( '<div class="div_parent_handler"></div>' );
-		div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
-		div_parent_with_handler.append(new_div_item);
-		div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
-
-		el.find('.all_elements_write').append(div_parent_with_handler);
-		VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);
-
-		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
-
-		addHandlersManager(command, function_obj, el, div_parent_with_handler, command.content[i]);
-	}
+ 
+  addHandlers(command, function_obj, el);
 
-	if (command.content.length == 0) {
-		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
-	}*/
+  if (command.content && command.lockexpression) {
+    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;
+    }
+  }
 
-  addHandlers(command, function_obj, el);
   return el;
 }
 
@@ -88,6 +87,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 = [];