Continuando os comandos

css/ivprog-visual-1.0.css

@@ -128,9 +128,28 @@ 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;
+	padding-left: 5px;
+	margin-top: 5px;
+}
+
 .function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
 .expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
-.expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression {
+.expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression,
+.incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case {
 	display: inline;
 }
 

i18n/en/ui.json

@@ -7,6 +7,8 @@
   "btn_arithmetic_multiplication": "Multiplication",
   "btn_arithmetic_division": "Division",
   "btn_arithmetic_module": "Module",
+  "btn_break":"Break",
+  "btn_case":"Case",
   "start": "start",
   "void": "void",
   "integer": "integer",
@@ -34,9 +36,12 @@
   "text_attribution": "Attribution",
   "text_if":"if",
   "text_else":"else",
+  "text_break":"break",
   "text_for":"for",
   "text_code_while":"while",
   "text_code_do":"do",
+  "text_code_switch": "switch",
+  "text_code_case": "case",
   "text_logic_expression": "Logic Expression",
   "text_arithmetic_expression": "Arithmetic Expression",
   "text_iftrue": "If true then",

i18n/es/ui.json

@@ -7,6 +7,8 @@
   "btn_arithmetic_multiplication": "Multiplication",
   "btn_arithmetic_division": "Division",
   "btn_arithmetic_module": "Module",
+  "btn_break":"Break",
+  "btn_case":"Case",
   "start": "start",
   "void": "void",
   "integer": "integer",
@@ -33,10 +35,13 @@
   "text_comment": "Comment",
   "text_attribution": "Attribution",
   "text_if":"if",
+  "text_break":"break",
   "text_else":"else",
   "text_for":"for",
   "text_code_while":"while",
   "text_code_do":"do",
+  "text_code_switch": "switch",
+  "text_code_case": "case",
   "text_logic_expression": "Logic Expression",
   "text_arithmetic_expression": "Arithmetic Expression",
   "text_iftrue": "If true then",

i18n/pt/ui.json

@@ -7,6 +7,8 @@
   "btn_arithmetic_multiplication": "Multiplicação",
   "btn_arithmetic_division": "Divisão",
   "btn_arithmetic_module": "Módulo",
+  "btn_break":"Pare",
+  "btn_case":"Caso",
   "start": "inicio",
   "void": "vazio",
   "integer": "inteiro",
@@ -34,10 +36,13 @@
   "join_or": "ou",
   "text_attribution": "Atribuição",
   "text_if":"se",
-  "text_else":"senão",
+  "text_break":"pare",
+  "text_else":"senao",
   "text_for":"para",
   "text_code_while":"enquanto",
   "text_code_do":"faça",
+  "text_code_switch": "escolha",
+  "text_code_case": "caso",
   "text_logic_expression": "Expressão Lógica",
   "text_arithmetic_expression": "Expressão Aritmética",
   "text_iftrue": "Se verdadeiro então",

js/visualUI/code_generator.js

@@ -84,9 +84,9 @@ function functionsCode (function_obj) {
 	}
 
 	for (var j = 0; j < function_obj.commands.length; j++) {
-		try {
+		//try {
 			ret += commandsCode(function_obj.commands[j]);
-		} catch (err) {
+		/*} catch (err) {
 
 			has_error = true;
 
@@ -101,7 +101,7 @@ function functionsCode (function_obj) {
 				}
 			}
 			
-		}
+		}*/
 		
 	}
 
@@ -116,6 +116,9 @@ function functionsCode (function_obj) {
 
 function commandsCode (command_obj, indentation = 2) {
 	switch (command_obj.type) {
+		case Models.COMMAND_TYPES.break:
+			return breaksCode(command_obj, indentation);
+
 		case Models.COMMAND_TYPES.comment:
 			return commentsCode(command_obj, indentation);
 
@@ -139,7 +142,147 @@ function commandsCode (command_obj, indentation = 2) {
 
 		case Models.COMMAND_TYPES.iftrue:
 			return iftruesCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.repeatNtimes:
+			return repeatNtimesCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.switch:
+			return switchsCode(command_obj, indentation);
+	}
+}
+
+function breaksCode(command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_break');
+
+	return ret;
+}
+
+function switchsCode(command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_code_switch') + ' ( ';
+
+	ret += variableValueMenuCode(command_obj.variable);
+
+	ret += ' ) { ';
+
+	if (command_obj.cases) {
+		for (var i = 0; i < command_obj.cases.length; i++) {
+			ret += switchcasesCode(command_obj.cases[i], (indentation + 1));
+		}
+	}
+
+	ret += '\n';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+	ret += '} ';
+
+	return ret;
+}
+
+function switchcasesCode(switchcase, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_code_case') + ' ';
+	ret += variableValueMenuCode(switchcase.variable_value_menu);
+	ret += ' :';
+
+	if (switchcase.commands_block) {
+		for (var i = 0; i < switchcase.commands_block.length; i++) {
+			ret += commandsCode(switchcase.commands_block[i], (indentation + 1));
+		}
 	}
+
+	return ret;
+
+}
+
+function repeatNtimesCode(command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_for') + ' ( ';
+
+	if (command_obj.var_attribution) {
+		ret += variableValueMenuCode(command_obj.var_attribution);
+		ret += ' = ';
+		ret += variableValueMenuCode(command_obj.expression1);
+	}
+	ret += ' ; ';
+
+
+	if (command_obj.expression2) {
+		switch (command_obj.expression2.expression.type) {
+			case Models.EXPRESSION_TYPES.exp_logic:
+				ret += logicExpressionCode(command_obj.expression2.expression);
+				break;
+			case Models.EXPRESSION_TYPES.exp_arithmetic:
+				ret += arithmeticExpressionCode(command_obj.expression2.expression);
+				break;
+		}
+	}
+
+	ret += ' ; ';
+
+	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) {
+		for (var i = 0; i < command_obj.commands_block.length; i++) {
+			ret += commandsCode(command_obj.commands_block[i], (indentation + 1));
+		}
+	}
+
+	ret += '\n';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '}';
+	return ret;
 }
 
 function iftruesCode (command_obj, indentation) {

js/visualUI/commands.js

@@ -15,22 +15,54 @@ import * as DowhiletruesManagement from './commands/dowhiletrue';
 import * as SwitchesManagement from './commands/switch';
 import * as FunctioncallsManagement from './commands/functioncall';
 import * as VariableValueMenuManagement from './commands/variable_value_menu';
+import * as BreaksManagement from './commands/break';
 
 var has_element_created_draged = false;
 var which_element_is_draged = null;
 
 export function removeCommand (command, function_obj, dom_obj) {
+	console.log('debugging removeCommand');
+	console.log('command');
+	console.log(command);
+	console.log('function_obj');
+	console.log(function_obj);
+	console.log('dom_obj');
+	console.log(dom_obj);
+
 	if (function_obj.commands.indexOf(command) > -1) {
 		function_obj.commands.splice(function_obj.commands.indexOf(command), 1);
 		return true;
 	}
 
 	// Utilize dois parantNode, pois o primeiro é o div de comandos
-	if ($(dom_obj[0].parentNode.parentNode).data('command').commands_block.indexOf(command) > -1) {
-		$(dom_obj[0].parentNode.parentNode).data('command').commands_block.splice
-		($(dom_obj[0].parentNode.parentNode).data('command').commands_block.indexOf(command), 1);
+	try {
+		if (dom_obj.parent().parent().data('command').commands_block.indexOf(command) > -1) {
+			dom_obj.parent().parent().data('command').commands_block.splice
+			(dom_obj.parent().parent().data('command').commands_block.indexOf(command), 1);
+			return true;
+		}	
+	} catch (err) {}
+	
+	try {
+		if (dom_obj.parent().parent().data('command').type == Models.COMMAND_TYPES.iftrue) {
+			if (dom_obj.parent().parent().data('command').commands_else.indexOf(command) > -1) {
+				dom_obj.parent().parent().data('command').commands_else.splice
+				(dom_obj.parent().parent().data('command').commands_else.indexOf(command), 1);
+				return true;
+			}
+		}
+	} catch (err) {}
+
+	console.log('veja: ');
+	console.log(dom_obj.parent());
+
+	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;
 	}
+
 	return false;
 }
 
@@ -38,6 +70,10 @@ export function createFloatingCommand (function_obj, function_container, command
 	var floatingObject;
 
 	switch (command_type) {
+		case Models.COMMAND_TYPES.break:
+			floatingObject = BreaksManagement.createFloatingCommand();
+			break;
+
 		case Models.COMMAND_TYPES.comment:
 			floatingObject = CommentsManagement.createFloatingCommand();
 			break;
@@ -101,6 +137,10 @@ export function renderCommand (command, element_reference, before_after_inside,
 			createdElement = CommentsManagement.renderCommand(command, function_obj);
 			break;
 
+		case Models.COMMAND_TYPES.break:
+			createdElement = BreaksManagement.renderCommand(command, function_obj);
+			break;
+
 		case Models.COMMAND_TYPES.reader:
 			createdElement = ReadersManagement.renderCommand(command, function_obj);
 			break;
@@ -158,6 +198,10 @@ export function renderCommand (command, element_reference, before_after_inside,
 export function genericCreateCommand (command_type) {
 
 	switch (command_type) {
+
+		case Models.COMMAND_TYPES.break:
+			return new Models.Break();
+
 		case Models.COMMAND_TYPES.comment:
 			return new Models.Comment(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_value, LocalizedStrings.getUI('text_comment'), null, null, false));
 
@@ -179,7 +223,8 @@ export function genericCreateCommand (command_type) {
 
 		case Models.COMMAND_TYPES.repeatNtimes:
 			return new Models.RepeatNTimes(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), 
-												null, new Models.ConditionalExpression(null), null, null);
+											new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false),
+										     null, new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.whiletrue:
 			return new Models.WhileTrue(new Models.ConditionalExpression(null), null);
@@ -188,7 +233,10 @@ export function genericCreateCommand (command_type) {
 			return new Models.DoWhileTrue(new Models.ConditionalExpression(null), null);
 
 		case Models.COMMAND_TYPES.switch:
-			return new Models.Switch(null, null, null);
+
+			var sc = [new Models.SwitchCase(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true))];
+
+			return new Models.Switch(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.variable_and_function, null, null, null, true), sc);
 	}
 }
 
@@ -203,6 +251,7 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	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;
@@ -274,6 +323,30 @@ function manageCommand (function_obj, function_container, event, command_type) {
 			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;
+		if (command_type == Models.COMMAND_TYPES.break) {
+			for (var i = 0; i < hierarquia_bottom_up.length; i++) {
+				if ((hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.repeatNtimes)
+					|| (hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.whiletrue)
+					|| (hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.dowhiletrue)
+					|| (hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.switch)) {
+
+					is_correct_context = true;
+					break;
+
+				}
+			}
+
+			if (!is_correct_context) {
+				console.error("Context not allowed to insert BREAK COMMAND!");
+				return;
+			}
+		}
+
+		
+
 		// se a hierarquia possuir apenas um elemento, então está na raiz dos comandos: 
 		if (hierarquia_bottom_up.length == 1) {
 			console.log('QQ1');
@@ -348,8 +421,7 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 
 		} else {
 			// QUANDO FOR BLOCO DO TIPO IF OU SWITCH/CASE:
-			console.log("que situação foi essa? quando o if no qual ele soltou, já está em outro bloco de comandos");
-
+			addCommandToSwitchCase(event, function_obj, command_type);
 		}
 
 	} else {
@@ -415,23 +487,36 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 	var el_jq = $(el);
 	var command_parent = $(el.parentNode.parentNode).data('command');
 	var command_target = el_jq.data('command');
+	var temp_parent = $(el.parentNode.parentNode);
 
 	var is_in_else = false;
 
 	if (!command_parent) {
+		command_parent = el_jq.data('command');
+		temp_parent = el_jq;
 		var hier = el_jq.parentsUntil(".command_container");
 
 		for (var i = 0; i < hier.length; i++) {
 			var temp = $(hier[i]);
-			if (typeof temp.data('else') !== 'undefined') {
+			if (typeof temp.data('else') != 'undefined') {
 				is_in_else = true;
 			}
-			if (typeof temp.data('command') !== 'undefined') {
+			if (typeof temp.data('command') != 'undefined') {
 				command_parent = temp.data('command');
+				temp_parent = temp;
 			}
 		}
 	}
 
+
+	var hier = el_jq.parentsUntil(".command_container");
+	for (var i = 0; i < hier.length; i++) {
+		var temp = $(hier[i]);
+		if (typeof temp.data('else') != 'undefined') {
+			is_in_else = true;
+		}
+	}
+
 	if (command_parent == command_target) {
 		var hier = el_jq.parentsUntil(".command_container");
 
@@ -444,6 +529,21 @@ 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;
+			}
+		}
+	}
+
 	console.log('debugging:');
 	console.log('el_jq');
 	console.log(el_jq);
@@ -484,9 +584,9 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 					var recentComand = genericCreateCommand(command_type);
 					command_parent.commands_else.push(recentComand);
 
-					renderCommand(recentComand, el_jq.find('.commands_else'), 3, function_obj);
+					renderCommand(recentComand, el_jq, 3, function_obj);
 				} else { // Se já tem algum comando no bloco:
-					findInBlockCorrectPlace(el_jq.find('.commands_else'), event, function_obj, command_type, true);
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, true);
 				}
 				return;
 			}
@@ -668,7 +768,87 @@ 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);
+	}
+}
+
+function addCommandToSwitchCase (event, function_obj, command_type) {
+
+	var el = $(document.elementFromPoint(event.clientX, event.clientY));
+
+	var which_case = el.data('switchcase');
+	var case_div = el;
+	
+	if (!which_case) {
+		var hier_find = el.parentsUntil(".all_cases_div");
+		for (var i = 0; i < hier_find.length; i++) {
+			if (typeof $(hier_find[i]).data('switchcase') !== 'undefined') {
+				which_case = $(hier_find[i]).data('switchcase');
+				case_div = $(hier_find[i]);
+				break;
+			}
+		}
+	}
+
+	if (which_case.commands_block == null || which_case.commands_block.length < 1) {
+		which_case.commands_block = [];
+
+		var recentComand = genericCreateCommand(command_type);
+		which_case.commands_block.push(recentComand);
+		renderCommand(recentComand, case_div.find('.case_commands_block'), 3, function_obj);
+	} else {
+		findInBlockCorrectPlaceInSwitchCase(which_case, case_div, event, function_obj, command_type);
+	}
+
+}
+
 
+
+
+function findInBlockCorrectPlaceInSwitchCase (which_case, case_div, event, function_obj, command_type) {
+
+	var all_sub = case_div.find('div.command_container');
+
+	var menor_distancia = 999999999;
+	var elemento_menor_distancia = null;
+	var antes = true;
+
+	var t_bot;
+	var t_top;
+
+	// Descobrindo o elemento mais próximo:
+	for (var i = 0; i < all_sub.length; i++) {
+	
+		t_top = all_sub[i].getBoundingClientRect().top;
+		t_bot = all_sub[i].getBoundingClientRect().top + all_sub[i].getBoundingClientRect().height;
+
+		if ((t_top - event.clientY) < menor_distancia) {
+			menor_distancia = event.clientY - t_top;
+			elemento_menor_distancia = all_sub[i];
+		}
+	}
+
+	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
+	
+	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
+	if ((borda_inferior - event.clientY) < menor_distancia) {
+		var recentComand = genericCreateCommand(command_type);
+
+		which_case.commands_block.push(recentComand);
+
+		renderCommand(recentComand, $(case_div.find('.case_commands_block')[0]), 3, function_obj);
+
+	} else {
+
+		var recentComand = genericCreateCommand(command_type);
+
+		var index = which_case.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+
+		if (index > -1) {
+		    which_case.commands_block.splice(index, 0, recentComand);
+		    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+		}
 	}
 }
 

js/visualUI/commands/break.js

@@ -0,0 +1,27 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+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>');
+}
+
+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>');
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, break_dom) {
+
+	break_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, break_dom)) {
+			break_dom.remove();
+		}
+	});
+}

js/visualUI/commands/contextualized_menu.js

@@ -0,0 +1,94 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as CommandsManagement from '../commands';
+import * as VariableValueMenuManagement from './variable_value_menu';
+import * as SwitchManagement from './switch';
+
+import * as RepeatNTimesManagement from './repeatNtimes';
+
+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"> ';
+
+	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>';
+
+	} 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 += '</div></div>';
+
+	menu_div = $(menu_div);
+  	
+	dom_where_render.append(menu_div);
+
+	addHandlers(command, dom_where_render, function_obj, dom_command);
+}
+
+function addHandlers (command, dom_where_render, function_obj, dom_command) {
+
+	dom_where_render.find('.menu_commands').dropdown({
+      on: 'hover'
+    });
+	
+	dom_where_render.find('.menu_commands a').on('click', function(evt){
+
+		if ((command.type == Models.COMMAND_TYPES.repeatNtimes) 
+			|| (command.type == Models.COMMAND_TYPES.whiletrue) 
+			|| (command.type == Models.COMMAND_TYPES.dowhiletrue)) {
+
+				if (command.commands_block == null || command.commands_block.length == 0) {
+
+			      command.commands_block = [];
+
+			      var new_cmd = CommandsManagement.genericCreateCommand($(this).data('command'));
+			      command.commands_block.push(new_cmd);
+
+			      CommandsManagement.renderCommand(new_cmd, dom_command.find('.block_commands'), 3, function_obj);
+
+			    } else {
+			      CommandsManagement.createFloatingCommand(function_obj, dom_command.find('.block_commands'), $(this).data('command'), evt);
+			    }
+
+		} else {
+
+			switch ($(this).data('command')) {
+				case Models.COMMAND_TYPES.break:
+					CommandsManagement.createFloatingCommand(function_obj, null, $(this).data('command'), evt);
+					break;
+
+				case Models.COMMAND_TYPES.switchcase:
+					addCaseToSwitch(command, dom_where_render, function_obj, dom_command);
+					break;
+			}
+
+		}
+
+	});
+}
+
+function addCaseToSwitch (command, dom_where_render, function_obj, dom_command) {
+	
+	if ((command.cases == null)) {
+		command.cases = [];
+	}
+	
+	var sc = new Models.SwitchCase(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+
+	command.cases.push(sc);
+
+	SwitchManagement.renderCase(sc, command, function_obj, dom_command.find('.all_cases_div'));
+
+}
+
+
+

js/visualUI/commands/dowhiletrue.js

@@ -6,6 +6,7 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
 import * as ConditionalExpressionManagement from './conditional_expression';
+import * as ContextualizedMenu from './contextualized_menu';
 
 export function createFloatingCommand () {
 	return $('<div class="ui dowhiletrue created_element"> <i class="ui icon small sync"></i> <span> faça {<br>} enquanto(x < 10) </span></div>');
@@ -13,7 +14,7 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> ' + LocalizedStrings.getUI('text_code_do') + '  { </span>';
+	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div> <span> ' + LocalizedStrings.getUI('text_code_do') + '  { </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
 	ret += '<span> } ' + LocalizedStrings.getUI('text_code_while') + ' </span> <div class="conditional_expression"></div>';
@@ -24,6 +25,8 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	ContextualizedMenu.renderMenu(command, el.find('.context_menu'), function_obj, el);
+
 	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
 
 	return el;

js/visualUI/commands/iftrue.js

@@ -13,7 +13,7 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui iftrue command_container"><div class="ui" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <i class="ui icon redo alternate blue button_refresh_attribution"></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> <i class="ui icon redo alternate blue button_refresh_attribution"></i>';
 	ret += '<span> ' + LocalizedStrings.getUI('text_if') + '</span>';
 	ret += ' <div class="conditional_expression"></div>';
 	ret += '<span> { </span> ';
@@ -28,7 +28,7 @@ export function renderCommand (command, function_obj) {
 	}*/
 
 	ret += '</div></div>';
-	ret += '<div class="ui" data-else="true"> <span> } ' + LocalizedStrings.getUI('text_else') + ' { </span>';
+	ret += '<div class="ui data_block_else" data-else="true"> <span> } ' + LocalizedStrings.getUI('text_else') + ' { </span>';
 
 	ret += '<div class="ui block_commands commands_else conditional_comands_block" data-else="true">';
 
@@ -48,6 +48,10 @@ export function renderCommand (command, function_obj) {
 	var el = $(ret);
 	el.data('command', command);
 	el.find('.block_commands').data('command', command);
+	el.find('.data_block_if').data('command', command);
+	el.find('.data_block_else').data('command', command);
+
+	//data_block_if
 
 	addHandlers(command, function_obj, el);
 

js/visualUI/commands/switch.js

@@ -5,14 +5,16 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
+import * as VariableValueMenu from './variable_value_menu';
+import * as ContextualizedMenu from './contextualized_menu';
 
 export function createFloatingCommand () {
-	return $('<div class="ui switch created_element"> <i class="ui icon small random"></i> <span> escolha (x) { <br> caso 1: <br> caso 2: <br> } </span></div>');
+	return $('<div class="ui switch created_element"> <i class="ui icon small random"></i> <span> '+LocalizedStrings.getUI('text_code_switch')+' ( x ) { <br> '+LocalizedStrings.getUI('text_code_case')+' 1: <br> '+LocalizedStrings.getUI('text_code_case')+' 2: <br> } </span></div>');
 }
 
 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> <span> escolha (x) { <br> caso 1: <br> caso 2: <br> }</span>';
+	ret += '<div class="ui switch command_container"> <i class="ui icon small random command_drag" ></i> <i class="ui icon times red button_remove_command"></i> <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>';
 
 	var el = $(ret);
@@ -20,9 +22,32 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	ContextualizedMenu.renderMenu(command, el.find('.context_menu'), function_obj, el);
+
+	VariableValueMenu.renderMenu(command, command.variable, el.find('.variable_to_switch'), function_obj);
+
+	if (command.cases) {
+		for (var i = 0; i < command.cases.length; i++) {
+			renderCase(command.cases[i], command, function_obj, el.find('.all_cases_div'));
+		}
+	}
+
 	return el;
 }
 
+export function renderCase (switchcase, command, function_obj, el) {
+
+	var casediv = $('<div class="ui case_div"><i class="ui icon times red button_remove_command"></i><span>'+LocalizedStrings.getUI('text_code_case')+'</span> <div class="ui variable_case"></div>: <div class="case_commands_block"></div></div>');
+
+	VariableValueMenu.renderMenu(command, switchcase.variable_value_menu, casediv.find('.variable_case'), function_obj);
+
+	casediv.data('switchcase', switchcase);
+	casediv.find('.case_commands_block').data('switchcase', switchcase);
+
+	el.append(casediv);
+
+}
+
 function addHandlers (command, function_obj, switch_dom) {
 
 	switch_dom.find('.button_remove_command').on('click', function() {

js/visualUI/commands/variable_value_menu.js

@@ -763,6 +763,10 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 	     if ($selectedItem.data('exp')) {
 	     	AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 	     }
+
+	     if (command.type == Models.COMMAND_TYPES.repeatNtimes) {
+	     	RepeatNTimesManagement.manageClearExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
+	     }
       }
 	});
 

js/visualUI/commands/whiletrue.js

@@ -6,14 +6,15 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
 import * as ConditionalExpressionManagement from './conditional_expression';
+import * as ContextualizedMenu from './contextualized_menu';
 
 export function createFloatingCommand () {
-	return $('<div class="ui whiletrue created_element"> <i class="ui icon small sync"></i> <span> enquanto(x < 10) { } </span></div>');
+	return $('<div class="ui whiletrue created_element"> <i class="ui icon small sync"></i> <span> ' + LocalizedStrings.getUI('text_code_while') + ' ( x < 10 ) { } </span></div>');
 }
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> ' + LocalizedStrings.getUI('text_code_while') + ' </span>';
+	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div> <span> ' + LocalizedStrings.getUI('text_code_while') + ' </span>';
 	ret += ' <div class="conditional_expression"></div>';
 	ret += ' { </span>';
 	ret += '<div class="ui block_commands">';
@@ -26,6 +27,8 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
+	ContextualizedMenu.renderMenu(command, el.find('.context_menu'), function_obj, el);
+
 	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
 
 	return el;

js/visualUI/functions.js

@@ -19,7 +19,7 @@ var counter_new_parameters = 0;
 
 let domConsole = null; 
 const program = new Models.Program();
-const variable1 = new Models.Variable(Types.REAL, "variable_1", 1, 1);
+const variable1 = new Models.Variable(Types.INTEGER, "a", 1);
 const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true, false, [variable1]);
 mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main'));
 const parameter1 = new Models.Variable(Types.INTEGER, "par_1", 1);

js/visualUI/ivprog_elements.js

@@ -2,7 +2,7 @@ import { Types } from './../ast/types';
 import WatchJS from 'melanke-watchjs';
 
 export const COMMAND_TYPES = Object.freeze({function:"function", comment:"comment", reader:"reader", writer:"writer", attribution:"attribution", iftrue:"iftrue",
- repeatNtimes:"repeatNtimes", whiletrue:"whiletrue", dowhiletrue:"dowhiletrue", switch:"switch", functioncall:"functioncall"});
+ repeatNtimes:"repeatNtimes", whiletrue:"whiletrue", dowhiletrue:"dowhiletrue", switch:"switch", switchcase:"switchcase", functioncall:"functioncall", break:"break"});
 
 export const ARITHMETIC_TYPES = Object.freeze({plus:"plus", minus:"minus", multiplication:"multiplication", division:"division", module:"module", none:"none"});
 
@@ -51,6 +51,13 @@ export class Comment {
   }
 }
 
+export class Break {
+  
+  constructor () {
+    this.type = COMMAND_TYPES.break;
+  }
+}
+
 export class Reader {
   
   constructor (variable_value_menu = new VariableValueMenu()) {
@@ -125,9 +132,10 @@ export class IfTrue {
 
 export class RepeatNTimes {
 
-  constructor (var_attribution, expression1, expression2, expression3, commands_block) {
+  constructor (var_attribution, var_incrementation, expression1, expression2, expression3, commands_block) {
     this.type = COMMAND_TYPES.repeatNtimes;
     this.var_attribution = var_attribution;
+    this.var_incrementation = var_incrementation;
     this.expression1 = expression1;
     this.expression2 = expression2;
     this.expression3 = expression3;
@@ -155,14 +163,22 @@ export class DoWhileTrue {
 
 export class Switch {
 
-  constructor (variable, cases, commands_blocks) {
+  constructor (variable, cases = []) {
     this.type = COMMAND_TYPES.switch;
     this.variable = variable;
     this.cases = cases;
-    this.commands_blocks = commands_blocks;
   }
 }
 
+export class SwitchCase {
+
+ constructor (variable_value_menu, commands_block = []) {
+    this.type = COMMAND_TYPES.switchcase;
+    this.variable_value_menu = variable_value_menu;
+    this.commands_block = commands_block;
+  } 
+}
+
 export class FunctionCall {
 
   constructor (function_called, parameters_list) {