Merge branch 'visualui' of https://git.lcalion.com/LInE/ivprog into visualui

css/ivprog-visual-1.0.css

@@ -128,12 +128,35 @@ 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 {
+.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;
 }
 
+.conditional_comands_block {
+	min-height: 10px;
+}
+
 .div_comment_text {
 	min-width: 100px;
 	font-style: italic;
@@ -306,3 +329,15 @@ div.buttons_manage_columns {
 	float: right;
 	cursor: pointer;
 }
+
+.expression_drag {
+	cursor: col-resize;
+	border: 2px gray solid;
+	display: inline;
+	width: 5px;
+}
+
+.ui.icon.red.exclamation.triangle.error_icon {
+	float: left;
+    margin-left: -30px;
+}

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",
@@ -32,6 +34,16 @@
   "text_command_write":"write",
   "text_comment": "Comment",
   "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",
   "text_receives": "receives",
   "text_repeatNtimes": "Repeat N times",
@@ -39,5 +51,8 @@
   "text_dowhiletrue": "Do while true",
   "text_switch": "Switch",
   "text_functioncall": "Function call",
-  "text_value": "Value"
+  "text_value": "Value",
+  "text_operator": "Operator",
+  "text_parentheses": "Parentheses",
+  "text_change": "Change"
 }

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",
@@ -32,6 +34,16 @@
   "text_command_write":"write",
   "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",
   "text_repeatNtimes": "Repeat N times",
   "text_receives": "receives",
@@ -39,5 +51,8 @@
   "text_dowhiletrue": "Do while true",
   "text_switch": "Switch",
   "text_functioncall": "Function call",
-  "text_value": "Value"
+  "text_value": "Value",
+  "text_operator": "Operator",
+  "text_parentheses": "Parentheses",
+  "text_change": "Change"
 }

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",
@@ -33,6 +35,16 @@
   "text_comment": "Comentário",
   "join_or": "ou",
   "text_attribution": "Atribuição",
+  "text_if":"se",
+  "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",
   "text_repeatNtimes": "Repita N vezes",
   "text_receives": "recebe",
@@ -40,5 +52,8 @@
   "text_dowhiletrue": "Faça enquanto verdadeiro",
   "text_switch": "Escolha",
   "text_functioncall": "Chamada de função",
-  "text_value": "Valor"
+  "text_value": "Valor",
+  "text_operator": "Operador",
+  "text_parentheses": "Parênteses",
+  "text_change": "Alterar"
 }

js/visualUI/code_generator.js

@@ -8,27 +8,41 @@ import * as CommandsManagement from './commands';
 
 export function generate () {
 
+	$('.ivprog_visual_panel').find('.error_icon').remove();
+
 	var code = LocalizedStrings.getUI('program') + ' { ';
 
 	code += globalsCode();
 
 	code += '\n';
 
+	var has_error = false;
+
 	for (var i = 0; i < window.program_obj.functions.length; i ++) {
-		code += functionsCode(window.program_obj.functions[i]);
+		var n_code = functionsCode(window.program_obj.functions[i]);
+		if (n_code == null) {
+			has_error = true;
+		}
+		code += n_code;
 		code += '\n';
 
 	}
 
 	code += '\n}';
 
-	return code;
+	if (has_error) {
+		return null;
+	} else {
+		return code;
+	}
 
 }
 
 function functionsCode (function_obj) {
 	var ret = '\n\t' + LocalizedStrings.getUI('function') + ' ';
 
+	var has_error = false;
+
 	switch (function_obj.return_type) {
 		case Types.INTEGER:
 			ret += LocalizedStrings.getUI('integer');
@@ -70,43 +84,504 @@ function functionsCode (function_obj) {
 	}
 
 	for (var j = 0; j < function_obj.commands.length; j++) {
-		ret += commandsCode(function_obj.commands[j]);
+		//try {
+			ret += commandsCode(function_obj.commands[j]);
+		/*} catch (err) {
+
+			has_error = true;
+
+			console.error(err.message);
+
+			var todos = $('body').find('.command_container');
+			for (var i = 0; i < todos.length; i++) {
+
+				if ($(todos[i]).data('command') == function_obj.commands[j]) {
+					$( todos[i] ).prepend( ' <i class="ui icon red exclamation triangle error_icon"></i> ' );
+					break;
+				}
+			}
+			
+		}*/
+		
 	}
 
 	ret += '\n\t}';
 
-
-	return ret;
+	if (has_error) {
+		return null;
+	} else {
+		return ret;
+	}
 }
 
-function commandsCode (command_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);
+			return commentsCode(command_obj, indentation);
 
 		case Models.COMMAND_TYPES.reader:
-			return readersCode(command_obj);
+			return readersCode(command_obj, indentation);
 
 		case Models.COMMAND_TYPES.writer:
-			return writersCode(command_obj);
+			return writersCode(command_obj, indentation);
 
 		case Models.COMMAND_TYPES.functioncall:
-			return functioncallsCode(command_obj);
+			return functioncallsCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.attribution:
+			return attributionsCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.whiletrue:
+			return whiletruesCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.dowhiletrue:
+			return doWhilesCode(command_obj, indentation);
+
+		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 functioncallsCode (command_obj) {
+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 += ' ) { ';
 
-	var ret = '\n\t\t';
+	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) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_if');
+
+	switch (command_obj.expression.expression.type) {
+		case Models.EXPRESSION_TYPES.exp_logic:
+			ret += logicExpressionCode(command_obj.expression.expression);
+			break;
+		case Models.EXPRESSION_TYPES.exp_arithmetic:
+			ret += arithmeticExpressionCode(command_obj.expression.expression);
+			break;
+	}
+
+	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 += '} ' + LocalizedStrings.getUI('text_else') + ' {';
+
+	if (command_obj.commands_else) {
+		for (var i = 0; i < command_obj.commands_else.length; i++) {
+			ret += commandsCode(command_obj.commands_else[i], (indentation + 1));
+		}
+	}
+
+	ret += '\n';
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '}';
+
+	return ret;
+}
+
+
+function doWhilesCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_code_do') + ' { ';
+
+	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 += '} ' + LocalizedStrings.getUI('text_code_while');
+
+	switch (command_obj.expression.expression.type) {
+		case Models.EXPRESSION_TYPES.exp_logic:
+			ret += logicExpressionCode(command_obj.expression.expression);
+			break;
+		case Models.EXPRESSION_TYPES.exp_arithmetic:
+			ret += arithmeticExpressionCode(command_obj.expression.expression);
+			break;
+	}
+
+	return ret;
+}
+
+
+function whiletruesCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_code_while');
+
+	switch (command_obj.expression.expression.type) {
+		case Models.EXPRESSION_TYPES.exp_logic:
+			ret += logicExpressionCode(command_obj.expression.expression);
+			break;
+		case Models.EXPRESSION_TYPES.exp_arithmetic:
+			ret += arithmeticExpressionCode(command_obj.expression.expression);
+			break;
+	}
+
+	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 logicExpressionCode (expression) {
+	var ret = ' ( ';
+
+	if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		ret += logicExpressionCode(expression.first_operand);
+	} else if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		ret += arithmeticExpressionCode(expression.first_operand);
+	} else {
+		ret += variableValueMenuCode(expression.first_operand);
+	}
+
+	if (expression.operator) {
+		switch (expression.operator) {
+	        case Models.LOGIC_COMPARISON.equals_to:
+	        	ret += ' == ';
+	        	break;
+	        case Models.LOGIC_COMPARISON.not_equals_to:
+	        	ret += ' != ';
+	        	break;
+	        case Models.LOGIC_COMPARISON.and:
+	        	ret += ' && ';
+	        	break;
+	        case Models.LOGIC_COMPARISON.or:
+	        	ret += ' || ';
+	        	break;
+		}
+
+		if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+			ret += logicExpressionCode(expression.second_operand);
+		} else if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+			ret += arithmeticExpressionCode(expression.second_operand);
+		} else {
+			ret += variableValueMenuCode(expression.second_operand);
+		}
+
+	}
+
+	ret += ' ) ';
+
+	return ret;
+}
+
+function arithmeticExpressionCode (expression) {
+	var ret = ' ( ';
+
+	if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		ret += logicExpressionCode(expression.first_operand);
+	} else if (expression.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		ret += arithmeticExpressionCode(expression.first_operand);
+	} else {
+		ret += variableValueMenuCode(expression.first_operand);
+	}
+
+	switch (expression.operator) {
+        case Models.ARITHMETIC_COMPARISON.greater_than:
+        	ret += ' > ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.less_than:
+        	ret += ' < ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.equals_to:
+        	ret += ' == ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.not_equals_to:
+        	ret += ' != ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to:
+        	ret += ' >= ';
+        	break;
+        case Models.ARITHMETIC_COMPARISON.less_than_or_equals_to:
+        	ret += ' <= ';
+        	break;
+	}
+
+	if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		ret += logicExpressionCode(expression.second_operand);
+	} else if (expression.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		ret += arithmeticExpressionCode(expression.second_operand);
+	} else {
+		ret += variableValueMenuCode(expression.second_operand);
+	}
+
+	ret += ' ) ';
+
+	return ret;
+}
+
+function attributionsCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += variableValueMenuCode(command_obj.variable) + ' = ';
+
+	for (var i = 0; i < command_obj.expression.length; i++) {
+		ret += elementExpressionCode(command_obj.expression[i]);
+	}
+
+	return ret;
+}
+
+function elementExpressionCode (expression_obj) {
+
+	var ret = ''; 
+
+	for (var i = 0; i < expression_obj.itens.length; i++) {
+
+
+		if (expression_obj.itens[i].type) {
+
+			ret += variableValueMenuCode(expression_obj.itens[i]);
+
+		} else if (expression_obj.itens[i].type_exp) {
+
+			if (expression_obj.itens[i].type_exp == Models.EXPRESSION_ELEMENTS.par_exp_par) {
+				ret += ' ( ';
+			}
+
+			ret += elementExpressionCode(expression_obj.itens[i]);
+
+			if (expression_obj.itens[i].type_exp == Models.EXPRESSION_ELEMENTS.par_exp_par) {
+				ret += ' ) ';
+			}
+
+		} else {
+
+			switch (expression_obj.itens[i]) {
+				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;
+			}
+			
+		}
+
+	}
+
+	return ret;
+
+}
+
+function functioncallsCode (command_obj, indentation) {
+
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
 	
 	ret += variableValueMenuCode(command_obj.function_called);
 
 	return ret;
 }
 
-function readersCode (command_obj) {
-	var ret = '\n\t\t' + LocalizedStrings.getUI('text_command_read') + ' ( ';
+function readersCode (command_obj, indentation) {
+	var ret = '\n';
 	
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += LocalizedStrings.getUI('text_command_read') + ' ( ';
+
 	ret += variableValueMenuCode(command_obj.variable_value_menu);
 
 	ret += ' ) ';
@@ -144,16 +619,26 @@ function variableValueMenuCode (variable_obj) {
 
 
 	} else {
-		ret += variable_obj.content;
+		if (isNaN(variable_obj.content)) {
+			ret += '"' + variable_obj.content + '"';
+		} else {
+			ret += variable_obj.content;
+		}
 	}
 
 	return ret;
 
 }
 
-function writersCode (command_obj) {
-	var ret = '\n\t\t' + LocalizedStrings.getUI('text_command_write') + ' ( ';
+function writersCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
 	
+	ret += LocalizedStrings.getUI('text_command_write') + ' ( ';
+
 	for (var i = 0; i < command_obj.content.length; i++) {
 		ret += variableValueMenuCode(command_obj.content[i]);
 
@@ -166,8 +651,15 @@ function writersCode (command_obj) {
 	return ret;
 }
 
-function commentsCode (command_obj) {
-	var ret = '\n\t\t// ';
+function commentsCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
+	}
+
+	ret += '// ';
+
 	ret += command_obj.comment_text.content;
 	return ret;
 }

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));
 
@@ -175,19 +219,24 @@ export function genericCreateCommand (command_type) {
 			return new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false), null);
 
 		case Models.COMMAND_TYPES.iftrue:
-			return new Models.IfTrue(null, null, null);
+			return new Models.IfTrue(new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.repeatNtimes:
-			return new Models.RepeatNTimes(null, null, null, null);
+			return new Models.RepeatNTimes(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), 
+											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(null, null);
+			return new Models.WhileTrue(new Models.ConditionalExpression(null), null);
 
 		case Models.COMMAND_TYPES.dowhiletrue:
-			return new Models.DoWhileTrue(null, null);
+			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);
 	}
 }
 
@@ -202,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;
@@ -273,28 +323,59 @@ 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');
 			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;
@@ -316,13 +397,16 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 	if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ||
-		(el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.switch) ) {
 
+		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 = [];
@@ -337,9 +421,11 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 
 		} else {
 			// QUANDO FOR BLOCO DO TIPO IF OU SWITCH/CASE:
+			addCommandToSwitchCase(event, function_obj, command_type);
 		}
 
 	} 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);
 	}
@@ -401,6 +487,70 @@ 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') {
+				is_in_else = true;
+			}
+			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");
+
+		for (var i = 0; i < hier.length; i++) {
+			var temp = $(hier[i]);
+			if (typeof temp.data('else') !== 'undefined') {
+				is_in_else = true;
+				break;
+			}
+		}
+	}
+
+	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);
+	console.log('command_parent');
+	console.log(command_parent);
+	console.log('command_target');
+	console.log(command_target);
 
 	var menor_distancia = 999999999;
 	var antes = true;
@@ -420,24 +570,128 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 		
 		var recentComand = genericCreateCommand(command_type);
 
-		var index = command_parent.commands_block.indexOf(command_target);
+		console.log('MMM1');
 
-		if (index > -1) {
-		    command_parent.commands_block.splice(index, 0, recentComand);
+		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 = [];
+
+					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:
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, true);
+				}
+				return;
+			}
+			console.log('MMM7');
+			var index = command_parent.commands_else.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_else.splice(index, 0, recentComand);
+			}
+
+			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);
+
+			if (index > -1) {
+			    command_parent.commands_block.splice(index, 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 1, function_obj);
 		}
 
-		renderCommand(recentComand, el, 1, function_obj);
+		
 
 	} else {
+		console.log('XXX1');
 		var recentComand = genericCreateCommand(command_type);
 
-		var index = command_parent.commands_block.indexOf(command_target);
+		if (is_in_else) {
 
-		if (index > -1) {
-		    command_parent.commands_block.splice((index + 1), 0, recentComand);
+			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) {
+			    command_parent.commands_else.splice((index + 1), 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 2, function_obj);
+
+		} 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);
+				}
+				
+				
+				return;
+			}
+
+			console.log('XXX3');
+			var index = command_parent.commands_block.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_block.splice((index + 1), 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 2, function_obj);
 		}
 
-		renderCommand(recentComand, el, 2, function_obj);
+		
 	}
 }
 
@@ -461,12 +715,144 @@ function insertCommandInBlock (el, event, function_obj, command_type) {
 			findInBlockCorrectPlace(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;
+		if (correct_div.data('if')) {
+			is_in_if = true;
+		} else if (correct_div.data('else')) {
+			is_in_if = false;
+		} else {
+			var hier = correct_div.parentsUntil(".command_container");
+			for (var i = 0; i < hier.length; i++) {
+				var temp = $(hier[i]);
+				if (typeof temp.data('if') !== 'undefined') {
+					is_in_if = true;
+					break;
+				}
+				if (typeof temp.data('else') !== 'undefined') {
+					is_in_if = false;
+					break;
+				}
+			}
+		}
+
+		if (is_in_if) {
+			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+				command_parent.commands_block = [];
+
+				var recentComand = genericCreateCommand(command_type);
+				command_parent.commands_block.push(recentComand);
+
+				renderCommand(recentComand, el_jq.find('.commands_if'), 3, function_obj);
+			} else { // Se já tem algum comando no bloco:
+				findInBlockCorrectPlace(el_jq.find('.commands_if'), event, function_obj, command_type);
+			}
+
+		} else {
+			if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
+				command_parent.commands_else = [];
+
+				var recentComand = genericCreateCommand(command_type);
+				command_parent.commands_else.push(recentComand);
+
+				renderCommand(recentComand, el_jq.find('.commands_else'), 3, function_obj);
+			} else { // Se já tem algum comando no bloco:
+				findInBlockCorrectPlace(el_jq.find('.commands_else'), event, function_obj, command_type, true);
+			}
+
+		}
+
+	} 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 {
-		console.log("PPP2");
+
+		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);
+		}
 	}
 }
 
-function findInBlockCorrectPlace (el, event, function_obj, command_type) {
+function findInBlockCorrectPlace (el, event, function_obj, command_type, is_in_else = false) {
 	var el_jq = $(el);
 	var all_sub = el_jq.find('div.command_container');
 
@@ -490,30 +876,63 @@ function findInBlockCorrectPlace (el, event, function_obj, command_type) {
 	}
 
 	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');
-		
-		command_parent.commands_block.push(recentComand);
 
-		renderCommand(recentComand, $(el_jq.find('.block_commands')[0]), 3, function_obj);
+		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);
+		}
 
 	} else {
 
+		console.log('QQ12');
+
 		var recentComand = genericCreateCommand(command_type);
 
 		var command_parent = el_jq.data('command');
-		
-		var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
 
-		if (index > -1) {
-		    command_parent.commands_block.splice(index, 0, recentComand);
-		    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+		if (is_in_else) {
+
+			var index = command_parent.commands_else.indexOf($(elemento_menor_distancia).data('command'));
+
+			if (index > -1) {
+			    command_parent.commands_else.splice(index, 0, recentComand);
+			    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+			}
+
+		} else {
+			var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+
+			if (index > -1) {
+			    command_parent.commands_block.splice(index, 0, recentComand);
+			    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+			}
+
 		}
+		
 	}
 }
 

js/visualUI/commands/attribution.js

@@ -14,42 +14,299 @@ export function createFloatingCommand () {
 
 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> <i class="ui icon redo alternate blue button_refresh_attribution"></i> <div class="var_attributed"></div> <span class="text_attr_receives">'+LocalizedStrings.getUI('text_receives')+'</span> '
+	var el = $('<div class="ui attribution command_container"><i class="ui icon small arrow left command_drag"></i> <i class="ui icon times red button_remove_command"></i> <i class="ui icon redo alternate blue button_refresh_attribution"></i> <div class="var_attributed"></div> <span class="text_attr_receives">'+LocalizedStrings.getUI('text_receives')+'</span> '
 		 + '<div class="expression_elements"></div> </div>');
 	el.data('command', command);
 
 	VariableValueMenu.renderMenu(command, command.variable, el.find('.var_attributed'), function_obj);
 
-	command.expression.push("(");
+	var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.none, 
+		new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
 
-	command.expression.push(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, "1", null, null, true));
+	command.expression.push(exp);
 
-	command.expression.push(Models.ARITHMETIC_TYPES.plus);
+	addHandlers(command, function_obj, el);
+
+	renderExpressionElements(command, function_obj, el);
+
+	return el;
 
-	command.expression.push(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, window.program_obj.functions[0].variables_list[0], null, 
-		new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, new Models.Variable(Types.REAL, "variable_2", 1)), null, null, true));
+}
 
+export function manageExpressionElements (command, ref_object, dom_object, menu_var_or_value, function_obj, selectedItem, expression_element) {
+	
+	var index_to_move = expression_element.itens.indexOf(ref_object);
 
-	command.expression.push(")");
+	switch (selectedItem.data('exp')) {
+		case Models.EXPRESSION_ELEMENTS.exp_op_exp:
 
-	command.expression.push(Models.ARITHMETIC_TYPES.minus);
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, [expression_element.itens[index_to_move],
+	     		Models.ARITHMETIC_TYPES.plus, 
+				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
 
-	command.expression.push(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, "2", null, null, true));
+			expression_element.itens[index_to_move] = exp;
 
-	/*VariableValueMenu.renderMenu(command, command.expression[0].content, el.find('.expression_operand_1'), function_obj);*/
+			break;
 
-	addHandlers(command, function_obj, el);
+		case Models.EXPRESSION_ELEMENTS.op_exp:
 
-	renderExpression(command, function_obj, el);
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.plus, 
+				expression_element.itens[index_to_move] ]);
 
-	return el;
+			expression_element.itens[index_to_move] = exp;
+
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.par_exp_par:
+
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.par_exp_par, [expression_element.itens[index_to_move]]);
+
+			expression_element.itens[index_to_move] = exp;
+
+			break;
+	}
+
+	renderExpressionElements(command, function_obj, dom_object);
+
+}
+
+function renderExpressionElements (command, function_obj, el) {
+	var expression_div = el.find('.expression_elements');
+	var command_container;
+
+	if (el.hasClass("command_container") == false) {
+		var hier = el.parentsUntil(".command_container");
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass("command_container")) {
+				command_container = $(hier[i]);
+				break;
+			}
+			if ($(hier[i]).hasClass("expression_elements")) {
+				expression_div = $(hier[i]);
+				break;
+			}
+		}
+	}
+
+	if (command_container) {
+		expression_div = command_container.find('.expression_elements');
+	}
+
+	expression_div.text('');
+
+	for (var i = 0; i < command.expression.length; i++) {
+
+		var temp = $('<div class="expression_element"></div>');
+		temp.data('ref_element', command.expression[i]);
+		temp.data('ref_index', i);
+
+		expression_div.append(temp);
+
+		renderElement(command, function_obj, temp, command.expression[i]);
+	}
+}
+
+function renderOperator (command, function_obj, temp_op, expression_element, index_op) {
+
+	var context_menu = '<div class="ui dropdown"><div class="text">';
+
+	switch (expression_element.itens[index_op]) {
+		case Models.ARITHMETIC_TYPES.plus:
+			context_menu += '+';
+			break;
+
+		case Models.ARITHMETIC_TYPES.minus:
+			context_menu += '-';
+			break;
+
+		case Models.ARITHMETIC_TYPES.multiplication:
+			context_menu += '*';
+			break;
+
+		case Models.ARITHMETIC_TYPES.division:
+			context_menu += '/';
+			break;
+
+		case Models.ARITHMETIC_TYPES.module:
+			context_menu += '%';
+			break;
+
+		case Models.ARITHMETIC_TYPES.none:
+			context_menu += '...';
+			break;
+	}
+	
+	context_menu += '</div><div class="menu">';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.plus+'">+</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.minus+'">-</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.multiplication+'">*</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.division+'">/</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.module+'">%</div>';
+	context_menu += '<div class="item" data-value="'+Models.ARITHMETIC_TYPES.none+'" data-text="...">Nenhum</div>';
+	context_menu += '</div></div>';
+
+	context_menu = $(context_menu);
+
+	temp_op.append(context_menu);
+
+	context_menu.dropdown({
+		onChange: function(value, text, $selectedItem) {
+	     expression_element.itens[index_op] = value;
+      }
+	});
+
+}
+
+function renderMenuAddExpression (command, function_obj, el, dom_append_menu, expression_append_new_expression) {
+
+	if (el.hasClass("command_container") == false) {
+		var hier = el.parentsUntil(".commands_list_div");
+
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass("command_container")) {
+				el = $(hier[i]);
+				break;
+			}
+		}
+	}
+
+	if (dom_append_menu.hasClass("expression_elements") == false) {
+		var hier = el.parentsUntil(".commands_list_div");
+
+		for (var i = 0; i < hier.length; i++) {
+			if ($(hier[i]).hasClass("expression_elements")) {
+				dom_append_menu = $(hier[i]);
+				break;
+			}
+		}
+	}
+
+	var context_menu = '<div class="ui dropdown"><div class="text"></div><i class="ui icon arrow alternate circle right outline"></i><div class="menu">';
+	context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+	context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+	context_menu += '<div class="item" data-value="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+	context_menu += '</div></div>';
+
+	context_menu = $(context_menu);
+
+	dom_append_menu.append(context_menu);
+
+	context_menu.dropdown({
+		onChange: function(value, text, $selectedItem) {
+	     switch (value) {
+	     	case Models.EXPRESSION_ELEMENTS.exp_op_exp:
+
+	     	var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.exp_op_exp, [new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true),
+	     		Models.ARITHMETIC_TYPES.plus, 
+				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+			expression_append_new_expression.push(exp);
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.op_exp:
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.plus, 
+				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+			expression_append_new_expression.push(exp);
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.par_exp_par:
+
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.par_exp_par, [new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
+
+			expression_append_new_expression.push(exp);
+
+			break;
+		}
+		
+		renderExpressionElements(command, function_obj, el);
+      }
+	});
+
+}
+
+function renderElement (command, function_obj, el, expression_element) {
+
+	switch (expression_element.type_exp) {
+		case Models.EXPRESSION_ELEMENTS.exp_op_exp:
+
+			var temp_op = $('<div class="component_element"></div>');
+			var temp_exp_1 = $('<div class="component_element"></div>');
+			var temp_exp_2 = $('<div class="component_element"></div>');
+
+			el.append(temp_exp_1);
+			el.append(temp_op);
+			el.append(temp_exp_2);
+			
+			if (expression_element.itens[0].type) {
+				VariableValueMenu.renderMenu(command, expression_element.itens[0], temp_exp_1, function_obj, 2, expression_element);
+			} else {
+				renderElement(command, function_obj, temp_exp_1, expression_element.itens[0]);
+			}
+
+			renderOperator(command, function_obj, temp_op, expression_element, 1);
+
+			if (expression_element.itens[2].type) {
+				VariableValueMenu.renderMenu(command, expression_element.itens[2], temp_exp_2, function_obj, 2, expression_element);
+			} else {
+				renderElement(command, function_obj, temp_exp_2, expression_element.itens[2]);
+			}
+
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.op_exp:
+			var temp_op = $('<div class="component_element"></div>');
+			var temp_exp = $('<div class="component_element"></div>');
+
+			el.append(temp_op);
+			el.append(temp_exp);
+
+			renderOperator(command, function_obj, temp_op, expression_element, 0);
+
+			if (expression_element.itens[1].type) {
+				VariableValueMenu.renderMenu(command, expression_element.itens[1], temp_exp, function_obj, 2, expression_element);
+			} else {
+				renderElement(command, function_obj, temp_exp, expression_element.itens[1]);
+			}
+			break;
+
+		case Models.EXPRESSION_ELEMENTS.par_exp_par:
+
+			var temp_par_1 = $('<div class="component_element"> ( </div>');
+			var temp_exp = $('<div class="component_element"></div>');
+			var temp_par_2 = $('<div class="component_element"> ) </div>');
+
+			el.append(temp_par_1);
+			el.append(temp_exp);
+
+			for (var j = 0; j < expression_element.itens.length; j++) {
+				if (expression_element.itens[j].type) {
+					VariableValueMenu.renderMenu(command, expression_element.itens[j], temp_exp, function_obj, 2, expression_element);
+				} else {
+					renderElement(command, function_obj, temp_exp, expression_element.itens[j]);
+				}
+			}
+			
+
+			//renderMenuAddExpression(command, function_obj, el, el, expression_element.itens);
+
+			el.append(temp_par_2);
+
+			break;
+	}
 
 }
 
-function renderExpression(command, function_obj, el) {
+
+function renderExpression (command, function_obj, el) {
 
 	var expression_div = el.find('.expression_elements');
 	expression_div.text('');
+
+	var menu_add_item = $('<div class="menu_add_item"></div>');
+	menu_add_item.data('index_add', 0);
+
+	expression_div.append(menu_add_item);
 	
 	for (var i = 0; i < command.expression.length; i++) {
 
@@ -101,10 +358,59 @@ function renderExpression(command, function_obj, el) {
 			expression_div.append(temp);
 
 		}
+		
+		var menu_add_item_seq = $('<div class="menu_add_item"></div>');
+		var index_temp = (i + 1);
+		menu_add_item_seq.data('index_add', index_temp);
+		expression_div.append(menu_add_item_seq);
 
 	}
+
+	addMenuItens(command, function_obj, el);
+
 }
 
+function addMenuItens (command, function_obj, expression_div) {
+	var divs_expression = expression_div.find('.menu_add_item');
+
+	for (var i = 0; i < divs_expression.length; i++) {
+
+		var temp = $(divs_expression[i]).data('index_add');
+
+		var context_menu = '<div class="ui dropdown context_menu_clear"><i class="ui icon plus square outline"></i><div class="menu">';
+		context_menu += '<div class="item" data-option="value" data-index="'+temp+'">'+LocalizedStrings.getUI('text_value')+'</div>';
+		context_menu += '<div class="item" data-option="operator" data-index="'+temp+'">'+LocalizedStrings.getUI('text_operator')+'</div>';
+		context_menu += '<div class="item" data-option="parentheses" data-index="'+temp+'">'+LocalizedStrings.getUI('text_parentheses')+'</div>';
+		context_menu += '</div></div>';
+
+		context_menu = $(context_menu);
+
+		$(divs_expression[i]).append(context_menu);
+
+		context_menu.dropdown({
+	      on: 'hover',
+	      onChange: function(value, text, $selectedItem) {
+    		switch ($selectedItem.data('option')) {
+    			case "value":
+    				command.expression.splice($selectedItem.data('index'), 0, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+    				renderExpression(command, function_obj, expression_div);
+    				break;
+    			case "operator":
+    				command.expression.splice($selectedItem.data('index'), 0, Models.ARITHMETIC_TYPES.plus);
+    				renderExpression(command, function_obj, expression_div);
+    				break;
+    			case "parentheses":
+    				command.expression.splice($selectedItem.data('index'), 0, "(");
+    				command.expression.splice($selectedItem.data('index') + 1, 0, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+    				command.expression.splice($selectedItem.data('index') + 2, 0, ")");
+    				renderExpression(command, function_obj, expression_div);
+    				break;
+    		 }
+        	}
+	    });
+
+	}
+}
 
 
 function addHandlers (command, function_obj, attribution_dom) {
@@ -116,7 +422,7 @@ function addHandlers (command, function_obj, attribution_dom) {
 	});
 
 	attribution_dom.find('.button_refresh_attribution').on('click', function() {
-		renderExpression(command, function_obj, attribution_dom);
+		renderExpressionElements(command, function_obj, attribution_dom);
 	});
 }
 

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

@@ -12,14 +12,20 @@ export function createFloatingCommand () {
 }
 
 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> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+command.comment_text.content+'</div> </div>');
+	var el = $('<div class="ui comment command_container"> <i class="ui icon small quote left"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+'</div> </div>');
 	el.data('command', command);
 
 	addHandlers(command, function_obj, el);
 
+	renderTextComment(command, function_obj, el);
+
 	return el;
 }
 
+function renderTextComment (command, function_obj, el) {
+	VariableValueMenu.renderMenu(command, command.comment_text, el.find('.var_value_menu_div'), function_obj, 20);
+}
+
 function addHandlers (command, function_obj, comment_dom) {
 
 	comment_dom.find('.button_remove_command').on('click', function() {
@@ -27,36 +33,4 @@ function addHandlers (command, function_obj, comment_dom) {
 			comment_dom.remove();
 		}
 	});
-
-	comment_dom.find('.div_comment_text').on('click', function() {
-		comment_dom.find('.div_comment_text').text('');
-		VariableValueMenu.renderMenu(command, command.comment_text, comment_dom.find('.var_value_menu_div'), function_obj, 20);
-		comment_dom.find('.width-dynamic').val(command.comment_text.content);
-
-		comment_dom.find('.width-dynamic').focusout(function() {
-			if ($(this).val().trim()) {
-				command.comment_text.content = $(this).val().trim();
-			}
-			comment_dom.find('.div_comment_text').text(command.comment_text.content);
-			$(this).remove();
-		});
-
-		comment_dom.find('.width-dynamic').on('keydown', function(e) {
-			var code = e.keyCode || e.which;
-			if(code == 13) {
-				if ($(this).val().trim()) {
-					command.comment_text.content = $(this).val().trim();
-				}
-				comment_dom.find('.div_comment_text').text(command.comment_text.content);
-				$(this).remove();
-			}
-			if(code == 27) {
-				comment_dom.find('.div_comment_text').text(command.comment_text.content);
-
-				$(this).remove();
-			}
-		});
-
-	});
-
 }

js/visualUI/commands/conditional_expression.js

@@ -0,0 +1,231 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenuManagement from './variable_value_menu';
+
+
+export function renderExpression (command, expression, function_obj, initial_el_to_render) {
+
+	if (expression.expression == null || expression.expression.length < 1) {
+
+		renderStartMenu(command, expression, function_obj, initial_el_to_render);
+
+	} else {
+		
+		var main_div = $('<div class="expression_elements"></div>');
+
+		switch (expression.expression.type) {
+			case Models.EXPRESSION_TYPES.exp_logic:
+				renderLogicExpression(command, expression, expression.expression, function_obj, main_div, initial_el_to_render);
+				break;
+			case Models.EXPRESSION_TYPES.exp_arithmetic:
+				renderArithmeticExpression(command, expression, expression.expression, function_obj, main_div);
+				break;
+		}
+
+		initial_el_to_render.append(main_div);	
+	}
+}
+
+function renderArithmeticOperator (command, all_expression, expression_arithmetic, arithmetic_operator, function_obj, element_to_append) {
+
+	var menu_operator = $('<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i></div>');
+	menu_operator.dropdown({
+	    values: [
+	      {
+	        name     : '>',
+	        value    : Models.ARITHMETIC_COMPARISON.greater_than,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.greater_than)
+	      },
+	      {
+	        name     : '<',
+	        value    : Models.ARITHMETIC_COMPARISON.less_than,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.less_than)
+	      },
+	      {
+	        name     : '==',
+	        value    : Models.ARITHMETIC_COMPARISON.equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.equals_to)
+	      },
+	      {
+	        name     : '!=',
+	        value    : Models.ARITHMETIC_COMPARISON.not_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.not_equals_to)
+	      },
+	      {
+	        name     : '>=',
+	        value    : Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to)
+	      },
+	      {
+	        name     : '<=',
+	        value    : Models.ARITHMETIC_COMPARISON.less_than_or_equals_to,
+	        selected : (arithmetic_operator == Models.ARITHMETIC_COMPARISON.less_than_or_equals_to)
+	      }
+	    ],
+	    onChange: function(value, text, $selectedItem) {
+	    	expression_arithmetic.operator = value;
+	    }
+	  })
+	;
+
+	element_to_append.append(menu_operator);
+}
+
+function renderLogicOperator (command, all_expression, expression_logic, logic_operator, function_obj, element_to_append, initial_el_to_render) {
+
+	var menu_operator = $('<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i></div>');
+	menu_operator.dropdown({
+	    values: [
+	      {
+	        name     : '==',
+	        value    : Models.LOGIC_COMPARISON.equals_to,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.equals_to)
+	      },
+	      {
+	        name     : '!=',
+	        value    : Models.LOGIC_COMPARISON.not_equals_to,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.not_equals_to)
+	      },
+	      {
+	        name     : '&&',
+	        value    : Models.LOGIC_COMPARISON.and,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.and)
+	      },
+	      {
+	        name     : '||',
+	        value    : Models.LOGIC_COMPARISON.or,
+	        selected : (logic_operator == Models.LOGIC_COMPARISON.or)
+	      }
+	    ],
+	    onChange: function(value, text, $selectedItem) {
+	    	if ($selectedItem) {
+		    	expression_logic.operator = value;
+		    	if (expression_logic.second_operand == null) {
+		    		expression_logic.second_operand = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+		    		initial_el_to_render.empty();
+		    		renderExpression(command, all_expression, function_obj, initial_el_to_render);
+		    	}
+	    	}
+	    }
+	  });
+
+	element_to_append.append(menu_operator);
+
+}
+
+
+function renderLogicExpression (command, all_expression, expression_logic, function_obj, element_to_append, initial_el_to_render) {
+
+	var exp_el_par_1 = $('<div class="expression_element"> ( </div>');
+	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
+	var exp_el_expr_operand = $('<div class="expression_element"></div>');
+	var exp_el_expr_el_2 = $('<div class="expression_element"></div>');
+	var exp_el_par_2 = $('<div class="expression_element"> ) </div>');
+
+	if (expression_logic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_logic.first_operand, function_obj, exp_el_expr_el_1);
+	} else if (expression_logic.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_logic.first_operand, function_obj, exp_el_expr_el_1);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_logic.first_operand, exp_el_expr_el_1, function_obj);
+	}
+
+	element_to_append.append(exp_el_par_1);
+	element_to_append.append(exp_el_expr_el_1);
+
+	renderLogicOperator(command, all_expression, expression_logic, expression_logic.operator, function_obj, exp_el_expr_operand, initial_el_to_render);
+
+	element_to_append.append(exp_el_expr_operand);
+
+	if (expression_logic.second_operand) {
+		if (expression_logic.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+			renderLogicExpression(command, all_expression, expression_logic.second_operand, function_obj, exp_el_expr_el_2);
+		} else if (expression_logic.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+			renderArithmeticExpression(command, all_expression, expression_logic.second_operand, function_obj, exp_el_expr_el_2);
+		} else {
+			VariableValueMenuManagement.renderMenu(command, expression_logic.second_operand, exp_el_expr_el_2, function_obj);
+		}
+
+		element_to_append.append(exp_el_expr_el_2);
+	}
+
+	element_to_append.append(exp_el_par_2);
+
+}
+
+function renderArithmeticExpression (command, all_expression, expression_arithmetic, function_obj, element_to_append) {
+
+	var exp_el_par_1 = $('<div class="expression_element"> ( </div>');
+	var exp_el_expr_el_1 = $('<div class="expression_element"></div>');
+	var exp_el_expr_operand = $('<div class="expression_element"></div>');
+	var exp_el_expr_el_2 = $('<div class="expression_element"></div>');
+	var exp_el_par_2 = $('<div class="expression_element"> ) </div>');
+
+
+	if (expression_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_arithmetic.first_operand, function_obj, exp_el_expr_el_1);
+	} else if (expression_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_arithmetic.first_operand, function_obj, exp_el_expr_el_1);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_arithmetic.first_operand, exp_el_expr_el_1, function_obj);
+	}
+
+	if (expression_arithmetic.second_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
+		renderLogicExpression(command, all_expression, expression_arithmetic.second_operand, function_obj, exp_el_expr_el_2);
+	} else if (expression_arithmetic.second_operand.type == Models.EXPRESSION_TYPES.exp_arithmetic) {
+		renderArithmeticExpression(command, all_expression, expression_arithmetic.second_operand, function_obj, exp_el_expr_el_2);
+	} else {
+		VariableValueMenuManagement.renderMenu(command, expression_arithmetic.second_operand, exp_el_expr_el_2, function_obj);
+	}
+
+	renderArithmeticOperator(command, all_expression, expression_arithmetic, expression_arithmetic.operator, function_obj, exp_el_expr_operand);
+
+	element_to_append.append(exp_el_par_1);
+	element_to_append.append(exp_el_expr_el_1);
+	element_to_append.append(exp_el_expr_operand);
+	element_to_append.append(exp_el_expr_el_2);
+	element_to_append.append(exp_el_par_2);
+}
+
+function renderStartMenu (command, expression, function_obj, initial_el_to_render) {
+	var start_menu = '';
+	start_menu += '<div class="ui dropdown"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_logic+'">'+LocalizedStrings.getUI('text_logic_expression')+'</div>';
+	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_arithmetic+'">'+LocalizedStrings.getUI('text_arithmetic_expression')+'</div>';
+	start_menu += '</div></div>';
+	start_menu = $(start_menu);
+
+	start_menu.dropdown({
+		onChange: function(value, text, $selectedItem) {
+			switch ($selectedItem.data('exp')) {
+				case Models.EXPRESSION_TYPES.exp_logic:
+					expression.expression = 
+						new Models.LogicExpression(false, 
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+					break;
+				case Models.EXPRESSION_TYPES.exp_arithmetic:
+					expression.expression = 
+						new Models.ArithmeticExpression(
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), 
+							Models.ARITHMETIC_COMPARISON.less_than);
+					break;
+			}
+
+			initial_el_to_render.html('');
+
+			renderExpression(command, expression, function_obj, initial_el_to_render);
+
+    	}
+	});
+
+	initial_el_to_render.append('<div class="expression_element"> ( </div>');
+	
+	initial_el_to_render.append(start_menu);
+
+	initial_el_to_render.append('<div class="expression_element"> ) </div>');
+}

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

@@ -5,6 +5,8 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 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>');
@@ -12,10 +14,10 @@ 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> faça  { </span>';
+	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <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> } enquanto (x < 10); </span>';
+	ret += '<span> } ' + LocalizedStrings.getUI('text_code_while') + ' </span> <div class="conditional_expression"></div>';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -23,6 +25,10 @@ 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

@@ -5,6 +5,7 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as CommandsManagement from '../commands';
+import * as ConditionalExpressionManagement from './conditional_expression';
 
 export function createFloatingCommand () {
 	return $('<div class="ui iftrue created_element"> <i class="ui icon small random"></i> <span> if (x < 1) { } </span></div>');
@@ -12,8 +13,11 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui iftrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span> if (x < 1) { </span>';
-	ret += '<div class="ui block_commands" data-if="true">';
+	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> ';
+	ret += '<div class="ui block_commands commands_if conditional_comands_block" data-if="true">';
 
 	/*if ((writer_obj.commands_block == null)
 			|| (writer_obj.commands_block.length == 0)) {
@@ -23,10 +27,10 @@ export function renderCommand (command, function_obj) {
 		}
 	}*/
 
-	ret += '</div>';
-	ret += '<span> } else { </span>';
+	ret += '</div></div>';
+	ret += '<div class="ui data_block_else" data-else="true"> <span> } ' + LocalizedStrings.getUI('text_else') + ' { </span>';
 
-	ret += '<div class="ui block_commands" data-else="true">';
+	ret += '<div class="ui block_commands commands_else conditional_comands_block" data-else="true">';
 
 	/*if ((writer_obj.commands_else == null)
 			|| (writer_obj.commands_else.length == 0)) {
@@ -38,14 +42,26 @@ export function renderCommand (command, function_obj) {
 
 	ret += '</div>';
 
-	ret += '<span> }</span>';
+	ret += '<span> }</span></div>';
 	ret += '</div>';
 
 	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);
 
+	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
+
+	el.find('.button_refresh_attribution').on('click', function() {
+		el.find('.conditional_expression').empty();
+		ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));		
+	});
+
 	return 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

@@ -6,11 +6,12 @@ import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
 import * as AttribuitionsManagement from './attribution';
 import * as WritersManagement from './writer';
+import * as RepeatNTimesManagement from './repeatNtimes';
 
 export const VAR_OR_VALUE_TYPES = Object.freeze({only_variable: 1, only_value: 2, only_function: 3, variable_and_function: 4, variable_and_value_opt: 5,
 	value_and_function: 6, all: 7});
 
-export function renderMenu (command, ref_object, dom_object, function_obj, size_field = 2) {
+export function renderMenu (command, ref_object, dom_object, function_obj, size_field = 2, expression_element) {
 	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 
 	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) {
@@ -48,6 +49,15 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
 
 		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_value+'">'+LocalizedStrings.getUI('text_value')+'</div>';
+
+		if (command.type == Models.COMMAND_TYPES.attribution) {
+			menu_var_or_value += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+			menu_var_or_value += '<div class="menu">';
+			menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+			menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+			menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+			menu_var_or_value += '</div></div>';
+		}
 	}
 
     menu_var_or_value += '</div></div>';
@@ -56,49 +66,44 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 
     dom_object.append(menu_var_or_value);
 
-    addHandlers(command, ref_object, dom_object, menu_var_or_value, function_obj);
+    addHandlers(command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element);
 
-    addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
+    addVariablesToMenu(function_obj, menu_var_or_value, ref_object, expression_element);
 
-    addFunctionsToMenu(function_obj, menu_var_or_value, ref_object);
+    addFunctionsToMenu(function_obj, menu_var_or_value, ref_object, expression_element);
 
     if (ref_object.content || ref_object.function_called) {
-    	renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command);
+    	renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
     }
 }
 
-function renderPreviousContent (function_obj, menu_var_or_value, ref_object, dom_object, command) {
+function renderPreviousContent (function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element) {
 
 	
 	if (ref_object.function_called) {
 
-		console.log("P1 chamando para: ");
-		console.log(ref_object);
-
 		menu_var_or_value.remove();
-		variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value);
+		variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value, expression_element);
 
 	} else if (ref_object.content.type) { 
-		
-		console.log("P2 chamando para: ");
-		console.log(ref_object);
 
 		menu_var_or_value.remove();
-		variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value);
+		variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value, expression_element);
 
 	} else {
 
-		console.log("P3 chamando para: ");
-		console.log(ref_object);
-
 		menu_var_or_value.remove();
-		variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value);
+		variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value, expression_element);
 
 	}
 }
 
-function variableValueMenuCode (command, variable_obj, dom_object, function_obj, menu_var_or_value) {
+function variableValueMenuCode (command, variable_obj, dom_object, function_obj, menu_var_or_value, expression_element) {
 
+	if (variable_obj.content == null && variable_obj.function_called == null) {
+		renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
+		return;
+	}
 
 	var ret = '';
 	if (variable_obj.function_called) {
@@ -118,6 +123,16 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 			context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+			if (command.type == Models.COMMAND_TYPES.attribution) {
+				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+				context_menu += '<div class="menu">';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+				context_menu += '</div></div>';
+			}
+
 			context_menu += '</div></div>';
 
 			context_menu = $(context_menu);
@@ -127,6 +142,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
 			     if ($selectedItem.data('clear')) {
+			     	console.log('PP1');
 			     	dom_object.text('');
 
 			     	variable_obj.content = null;
@@ -135,35 +151,59 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			     	delete variable_obj.function_called;
 			     	delete variable_obj.parameters_list;
 
-			     	renderMenu(command, variable_obj, dom_object, function_obj);
+			     	renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
+			     }
+
+			     if ($selectedItem.data('exp')) {
+			     	AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 			     }
 		      }
 			});
 		} else {
 
-			console.log("sei que preciso colcoar parametros");
 			menu_var_or_value.find('.text').text(' ');
 			dom_object.find('.menu_var_or_value_dom').remove();
 
 			var parameters_menu = '<div class="parameters_function_called"> '+variable_obj.function_called.name+' <span> ( </span>';
-			
+			for (var j = 0; j < variable_obj.function_called.parameters_list.length; j++) {
+				parameters_menu += '<div class="parameter_'+j+'"></div>';
+				if ((j + 1) != variable_obj.function_called.parameters_list.length) {
+					parameters_menu += ' , ';
+				}
+			}
 			parameters_menu += '<span> ) </span></div>';
 
 			parameters_menu = $(parameters_menu);
 
 			dom_object.append(parameters_menu);
 
+			for (var j = 0; j < variable_obj.function_called.parameters_list.length; j++) {
+				renderMenu(command, variable_obj.parameters_list[j], parameters_menu.find('.parameter_'+j), function_obj, 2, expression_element);
+			}
+
+
 			var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 			context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+			if (command.type == Models.COMMAND_TYPES.attribution) {
+				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+				context_menu += '<div class="menu">';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+				context_menu += '</div></div>';
+			}
+
 			context_menu += '</div></div>';
 
 			context_menu = $(context_menu);
 
-			context_menu.insertAfter( dom_object.find('.parameters_function_called') );
+			context_menu.insertAfter( parameters_menu );
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
 			     if ($selectedItem.data('clear')) {
+			     	console.log('PP2');
 			     	dom_object.text('');
 
 			     	variable_obj.content = null;
@@ -172,7 +212,11 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			     	delete variable_obj.function_called;
 			     	delete variable_obj.parameters_list;
 
-			     	renderMenu(command, variable_obj, dom_object, function_obj);
+			     	renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
+			     }
+
+			     if ($selectedItem.data('exp')) {
+			     	AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 			     }
 		      }
 			});
@@ -198,17 +242,26 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 			context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+			if (command.type == Models.COMMAND_TYPES.attribution) {
+				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+				context_menu += '<div class="menu">';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+				context_menu += '</div></div>';
+			}
+
 			context_menu += '</div></div>';
 
 			context_menu = $(context_menu);
 
-			//context_menu.insertAfter( dom_object.find('.variable_rendered') );
-
 			variable_render.append(context_menu);
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
 			     if ($selectedItem.data('clear')) {
+			     	console.log('PP3');
 			     	dom_object.text('');
 
 			     	variable_obj.content = null;
@@ -217,16 +270,73 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			     	delete variable_obj.function_called;
 		     		delete variable_obj.parameters_list;
 
-			     	renderMenu(command, variable_obj, dom_object, function_obj);
+			     	renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
+			     }
+
+			     if ($selectedItem.data('exp')) {
+			     	AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 			     }
 		      }
 			});
 
-			variableValueMenuCode(command, variable_obj.column, $(variable_render.find('.column_container')), function_obj, menu_var_or_value);
+			variableValueMenuCode(command, variable_obj.column, $(variable_render.find('.column_container')), function_obj, menu_var_or_value, expression_element);
 
 		} else if (variable_obj.content.dimensions == 2) {
-			/*ret += ' [ ' + variableValueMenuCode(command, variable_obj.row, dom_object, function_obj) + ' ] ';
-			ret += ' [ ' + variableValueMenuCode(command, variable_obj.column, dom_object, function_obj) + ' ] ';*/
+
+			variable_render = '<div class="variable_rendered"> <span class="var_name">'+variable_obj.content.name+'</span>';
+
+			variable_render += ' <span>[ </span> <div class="row_container"></div> <span> ]</span>';
+			variable_render += ' <span>[ </span> <div class="column_container"></div> <span> ] </span>';
+			
+			variable_render += '</div>';
+
+			variable_render = $(variable_render);
+
+			dom_object.append(variable_render);
+
+
+			var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+			context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+			if (command.type == Models.COMMAND_TYPES.attribution) {
+				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+				context_menu += '<div class="menu">';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+				context_menu += '</div></div>';
+			}
+
+			context_menu += '</div></div>';
+
+			context_menu = $(context_menu);
+
+			variable_render.append(context_menu);
+
+			context_menu.dropdown({
+				onChange: function(value, text, $selectedItem) {
+			     if ($selectedItem.data('clear')) {
+			     	console.log('PP4');
+			     	dom_object.text('');
+
+			     	variable_obj.content = null;
+			     	variable_obj.row = null;
+			     	variable_obj.column = null;
+			     	delete variable_obj.function_called;
+		     		delete variable_obj.parameters_list;
+
+			     	renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
+			     }
+
+			     if ($selectedItem.data('exp')) {
+			     	AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
+			     }
+		      }
+			});
+
+			variableValueMenuCode(command, variable_obj.row, $(variable_render.find('.row_container')), function_obj, menu_var_or_value, expression_element);
+			variableValueMenuCode(command, variable_obj.column, $(variable_render.find('.column_container')), function_obj, menu_var_or_value, expression_element);
+
 		} else {
 
 			variable_render = '<div class="variable_rendered"> <span class="var_name">'+variable_obj.content.name+'</span>';
@@ -240,15 +350,26 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 			context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+			if (command.type == Models.COMMAND_TYPES.attribution) {
+				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+				context_menu += '<div class="menu">';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+				context_menu += '</div></div>';
+			}
+
 			context_menu += '</div></div>';
 
 			context_menu = $(context_menu);
 
-			context_menu.insertAfter( variable_render );
+			variable_render.append(context_menu);
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
 			     if ($selectedItem.data('clear')) {
+			     	console.log('PP5');
 			     	dom_object.text('');
 
 			     	variable_obj.content = null;
@@ -258,7 +379,11 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			     	delete variable_obj.function_called;
 		     		delete variable_obj.parameters_list;
 
-			     	renderMenu(command, variable_obj, dom_object, function_obj);
+			     	renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
+			     }
+
+			     if ($selectedItem.data('exp')) {
+			     	AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 			     }
 		      }
 			});
@@ -276,15 +401,28 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 		var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 		context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+		if (command.type == Models.COMMAND_TYPES.attribution) {
+			context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+			context_menu += '<div class="menu">';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+			context_menu += '</div></div>';
+		}
+
 		context_menu += '</div></div>';
 
 		context_menu = $(context_menu);
 
-		context_menu.insertAfter( variable_render );
+		if (variable_obj.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
+			context_menu.insertAfter( variable_render );
+		}
 
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
 		     if ($selectedItem.data('clear')) {
+		     	console.log('PP6');
 		     	dom_object.text('');
 
    				variable_obj.content = null;
@@ -298,7 +436,11 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 				dom_object.find('.context_menu_clear').remove();
 				dom_object.find('.width-dynamic-minus').remove();
 
-		     	renderMenu(command, variable_obj, dom_object, function_obj);
+		     	renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
+		     }
+
+		     if ($selectedItem.data('exp')) {
+		     	AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 		     }
 	      }
 		});
@@ -310,7 +452,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			dom_object.empty();
 			dom_object.append('<span class="menu_var_or_value_dom"> </span>');
 			
-			openInputToValue(command, variable_obj, dom_object, menu_var_or_value, function_obj);
+			openInputToValue(command, variable_obj, dom_object, menu_var_or_value, function_obj, expression_element);
 		});
 	}
 
@@ -318,7 +460,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 }
 
-function addFunctionsToMenu (function_obj, menu_var_or_value, ref_object) {
+function addFunctionsToMenu (function_obj, menu_var_or_value, ref_object, expression_element) {
 	var sub_menu = menu_var_or_value.find('.menu_only_functions');
 	sub_menu.text('');
 
@@ -329,7 +471,7 @@ function addFunctionsToMenu (function_obj, menu_var_or_value, ref_object) {
 	}
 }
 
-function addVariablesToMenu (function_obj, menu_var_or_value, ref_object) {
+function addVariablesToMenu (function_obj, menu_var_or_value, ref_object, expression_element) {
 
 	var sub_menu = menu_var_or_value.find('.menu_only_vars');
 	sub_menu.text('');
@@ -371,26 +513,33 @@ function addVariablesToMenu (function_obj, menu_var_or_value, ref_object) {
 
 }
 
-function addHandlers (command, ref_object, dom_object, menu_var_or_value, function_obj) {
+function addHandlers (command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element) {
 
 	if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
 		menu_var_or_value.dropdown({
 		  onChange: function(value, text, $selectedItem) {
 		  	dom_object.find('.var_name').remove();
-
 		     switch ($selectedItem.data('option')) {
 		     	case VAR_OR_VALUE_TYPES.only_function:
-		     		openInputToFunction(command, ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('function_reference'));
+		     		openInputToFunction(command, ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('function_reference'), expression_element);
 		     		break;
 
 		     	case VAR_OR_VALUE_TYPES.only_value:
-		     		openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj);
+		     		openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element);
 		     		break;
 
 		     	case VAR_OR_VALUE_TYPES.only_variable:
-		     		openInputToVariable(command, ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('variable_reference'));
+		     		openInputToVariable(command, ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('variable_reference'), expression_element);
 		     		break;
 		     }
+
+		     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.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
+		     }
 	      }
 	    });
 	}
@@ -410,7 +559,7 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 	
 }
 
-function openInputToFunction (command, ref_object, dom_object, menu_var_or_value, function_obj, function_selected) {
+function openInputToFunction (command, ref_object, dom_object, menu_var_or_value, function_obj, function_selected, expression_element) {
 	
 	ref_object.function_called = function_selected;
 	ref_object.parameters_list = [];
@@ -437,12 +586,22 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		for (var j = 0; j < function_selected.parameters_list.length; j++) {
 			var temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
 			ref_object.parameters_list.push(temp);
-			renderMenu(command, temp, parameters_menu.find('.parameter_'+j), function_obj);
+			renderMenu(command, temp, parameters_menu.find('.parameter_'+j), function_obj, 2, expression_element);
 		}
 
 
 		var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 		context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+		if (command.type == Models.COMMAND_TYPES.attribution) {
+			context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+			context_menu += '<div class="menu">';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+			context_menu += '</div></div>';
+		}
+
 		context_menu += '</div></div>';
 
 		context_menu = $(context_menu);
@@ -452,6 +611,7 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
 		     if ($selectedItem.data('clear')) {
+		     	console.log('PP7');
 		     	dom_object.text('');
 
 		     	ref_object.content = null;
@@ -460,7 +620,11 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		     	delete ref_object.function_called;
 		     	delete ref_object.parameters_list;
 
-		     	renderMenu(command, ref_object, dom_object, function_obj);
+		     	renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
+		     }
+
+		     if ($selectedItem.data('exp')) {
+		     	AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 		     }
 	      }
 		});
@@ -479,6 +643,16 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 
 		var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 		context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+		if (command.type == Models.COMMAND_TYPES.attribution) {
+			context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+			context_menu += '<div class="menu">';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+			context_menu += '</div></div>';
+		}
+
 		context_menu += '</div></div>';
 
 		context_menu = $(context_menu);
@@ -488,6 +662,7 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
 		     if ($selectedItem.data('clear')) {
+		     	console.log('PP8');
 		     	dom_object.text('');
 
 		     	ref_object.content = null;
@@ -496,7 +671,11 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		     	delete ref_object.function_called;
 		     	delete ref_object.parameters_list;
 
-		     	renderMenu(command, ref_object, dom_object, function_obj);
+		     	renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
+		     }
+
+		     if ($selectedItem.data('exp')) {
+		     	AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 		     }
 	      }
 		});
@@ -511,7 +690,7 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 	}
 }
 
-function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
+function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected, expression_element) {
 	
 	ref_object.content = variable_selected;
 
@@ -537,18 +716,28 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 
 	if (variable_selected.dimensions == 1) {
 		ref_object.column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
-		renderMenu(command, ref_object.column, variable_render.find('.column_container'), function_obj);
+		renderMenu(command, ref_object.column, variable_render.find('.column_container'), function_obj, 2, expression_element);
 	}
 	if (variable_selected.dimensions == 2) {
 		ref_object.row = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
-		renderMenu(command, ref_object.row, variable_render.find('.row_container'), function_obj);
+		renderMenu(command, ref_object.row, variable_render.find('.row_container'), function_obj, 2, expression_element);
 
 		ref_object.column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
-		renderMenu(command, ref_object.column, variable_render.find('.column_container'), function_obj);
+		renderMenu(command, ref_object.column, variable_render.find('.column_container'), function_obj, 2, expression_element);
 	}
 
 	var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 	context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+	if (command.type == Models.COMMAND_TYPES.attribution) {
+		context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+		context_menu += '<div class="menu">';
+		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+		context_menu += '</div></div>';
+	}
+
 	context_menu += '</div></div>';
 
 	context_menu = $(context_menu);
@@ -558,6 +747,7 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
 	     if ($selectedItem.data('clear')) {
+	     	console.log('PP9');
 	     	dom_object.text('');
 
 	     	ref_object.content = null;
@@ -567,7 +757,15 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 	     	delete ref_object.function_called;
 		    delete ref_object.parameters_list;
 
-	     	renderMenu(command, ref_object, dom_object, function_obj);
+	     	renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
+	     }
+
+	     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);
 	     }
       }
 	});
@@ -584,7 +782,7 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 }
 
 
-function openInputToValue (command, ref_object, dom_object, menu_var_or_value, function_obj) {
+function openInputToValue (command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element) {
 
 	if (ref_object.content == null) {
 		ref_object.content = "";
@@ -599,19 +797,32 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 	field.focus();
 	field.val(ref_object.content);
 
-	dom_object.find('.menu_var_or_value_dom').remove();
-
 	var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 	context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+
+	if (command.type == Models.COMMAND_TYPES.attribution) {
+		context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
+		context_menu += '<div class="menu">';
+		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
+		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
+		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
+		context_menu += '</div></div>';
+	}
+
 	context_menu += '</div></div>';
 
 	context_menu = $(context_menu);
 
-	context_menu.insertAfter( field );
+	dom_object.find('.menu_var_or_value_dom').remove();
+
+	if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
+		context_menu.insertAfter( field );
+	}
 
 	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
 	     if ($selectedItem.data('clear')) {
+	     	console.log('PP10');
 	     	dom_object.text('');
 
 	     	dom_object.find('.value_rendered').remove();
@@ -625,7 +836,11 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 			delete ref_object.function_called;
 		    delete ref_object.parameters_list;
 
-	     	renderMenu(command, ref_object, dom_object, function_obj);
+	     	renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
+	     }
+
+	     if ($selectedItem.data('exp')) {
+	     	AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
 	     }
       }
 	});
@@ -658,13 +873,14 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 	});
 
 	rendered.on('click', function(e) {
+		console.log("TTT2");
 		rendered.remove();
 		rendered.empty();
 		rendered.remove();
 		dom_object.empty();
 		dom_object.append('<span class="menu_var_or_value_dom"> </span>');
 		
-		openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj)
+		openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element)
 	});
 
 	if (command.type == Models.COMMAND_TYPES.attribution) {

js/visualUI/commands/whiletrue.js

@@ -5,14 +5,18 @@ import { LocalizedStrings } from '../../services/localizedStringsService';
 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> enquanto (x < 10) { </span>';
+	ret += '<div class="ui whiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <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">';
 	ret += '</div>';
 	ret += '<span> }</span>';
@@ -23,6 +27,10 @@ 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;
 }
 
@@ -33,4 +41,4 @@ function addHandlers (command, function_obj, whiletrue_dom) {
 			whiletrue_dom.remove();
 		}
 	});
-}
+}

js/visualUI/commands/writer.js

@@ -17,7 +17,7 @@ export function renderCommand (command, function_obj) {
 	ret += '<div class="ui writer command_container"> <i class="ui icon small upload command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
 
 	var el = $(ret);
-	$(el).data('command', command);
+	el.data('command', command);
 
 	VariableValueMenu.renderMenu(command, command.content[0], $(el).find('.var_value_menu_div'), function_obj);
 

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);
@@ -299,6 +299,9 @@ $( document ).ready(function() {
 
 function runCode () {
   const strCode = CodeManagement.generate();
+  if (strCode == null) {
+    return;
+  }
   domConsole = new DOMConsole("#ivprog-term");
   $("#ivprog-term").slideDown(500);
   const lexer = LanguageService.getCurrentLexer();

js/visualUI/ivprog_elements.js

@@ -2,9 +2,17 @@ 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"});
+export const ARITHMETIC_TYPES = Object.freeze({plus:"plus", minus:"minus", multiplication:"multiplication", division:"division", module:"module", none:"none"});
+
+export const EXPRESSION_ELEMENTS = Object.freeze({exp_op_exp:"exp_op_exp", op_exp:"op_exp", par_exp_par:"par_exp_par", start_point:"start_point"});
+
+export const EXPRESSION_TYPES = Object.freeze({exp_conditional:"exp_conditional", exp_logic:"exp_logic", exp_arithmetic:"exp_arithmetic"});
+
+export const ARITHMETIC_COMPARISON = Object.freeze({greater_than:"greater_than", less_than:"less_than", equals_to:"equals_to", not_equals_to:"not_equals_to", greater_than_or_equals_to:"greater_than_or_equals_to", less_than_or_equals_to:"less_than_or_equals_to"});
+
+export const LOGIC_COMPARISON = Object.freeze({equals_to:"equals_to", not_equals_to:"not_equals_to", and:"and", or:"or"});
 
 export class Variable {
 
@@ -43,6 +51,13 @@ export class Comment {
   }
 }
 
+export class Break {
+  
+  constructor () {
+    this.type = COMMAND_TYPES.break;
+  }
+}
+
 export class Reader {
   
   constructor (variable_value_menu = new VariableValueMenu()) {
@@ -68,24 +83,42 @@ export class Attribution {
   }
 }
 
-export class Expression {
+export class ExpressionElement {
 
-  constructor (operand1, operand2, operator) {
-    this.operand1 = operand1;
-    this.operand2 = operand2;
+  constructor (type_exp, itens = []) {
+    this.type_exp = type_exp;
+    this.itens = itens;
+  }
+}
+
+export class ConditionalExpression {
+
+  constructor (expression) {
+    this.type = EXPRESSION_TYPES.exp_conditional;
+    this.expression = expression;
+  }
+}
+
+export class LogicExpression {
+
+  constructor (has_neg, first_operand, second_operand, operator) {
+    this.type = EXPRESSION_TYPES.exp_logic;
+    this.has_neg = has_neg;
+    this.first_operand = first_operand;
+    this.second_operand = second_operand;
     this.operator = operator;
   }
 }
-/*
-export class ExpressionNode {
 
-  constructor (content, left_node, right_node) {
-    this.content = content;
-    this.left_node = left_node;
-    this.right_node = right_node;
-    
+export class ArithmeticExpression {
+
+  constructor (first_operand, second_operand, operator) {
+    this.type = EXPRESSION_TYPES.exp_arithmetic;
+    this.first_operand = first_operand;
+    this.second_operand = second_operand;
+    this.operator = operator;
   }
-}*/
+}
 
 export class IfTrue {
 
@@ -99,8 +132,10 @@ export class IfTrue {
 
 export class RepeatNTimes {
 
-  constructor (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;
@@ -128,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) {