Função funcionando adequadamente

css/ivprog-visual-1.0.css

@@ -7,7 +7,7 @@ body {
 }
 
 .ui.raised.container.segment.div_to_body {
-  height: 96%;
+  height: 92%;
   padding: 10px;
   padding-left: 6px;
   padding-right: 6px;
@@ -17,7 +17,6 @@ body {
 	height: 96%;
 	overflow: auto;
 	overflow-x: auto;
-
 }
 
 .ivprog_textual_code {
@@ -52,7 +51,7 @@ body {
 }
 .content_margin .content_sub_margin {
 	display: inline; 
-	margin-left: 15%; 
+    margin-left: 34%;
 	margin-top: 50px;
 }
 .ui.icon.menu.center.aligned.container {
@@ -152,7 +151,8 @@ body {
 .function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
 .expression_operand_1, .expression_operand_2, .operator, .div_comment_text, .value_rendered, .parameters_function_called, .parameters_function_called div, .expression_elements,
 .expression_element, .var_rendered, .menu_add_item, .component_element, .component_element, .conditional_expression, .variable_attribution, .attribution_expression, .var_value_expression,
-.incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var {
+.incrementation_field, .incrementation_variable, .first_operand, .operator, .second_operand, .variable_to_switch, .variable_case, .button_remove_case, .editing_name_var, .parameter_div_edit,
+.all_elements_write, .container_var_element_control {
 	display: inline;
 }
 
@@ -248,7 +248,7 @@ body {
 	display: inline;
 }
 
-.function_return, .parameter_type {
+.parameter_type {
 	margin-left: 10px;
     margin-right: 15px;
 }
@@ -283,7 +283,15 @@ div.buttons_manage_columns {
 	margin: 5px;
 	background: #f9f9f9;
 }
-
+.ui.repeatNtimes .separator_character {
+	margin-right: 10px;
+}
+.ui.repeatNtimes, .ui.whiletrue {
+    min-height: 50px;
+}
+.ui.dowhiletrue .ui.block_commands {
+	min-height: 10px;
+}
 .add_var_top_button {
 	padding-right: 50px;
 }
@@ -304,7 +312,7 @@ div.buttons_manage_columns {
 }
 
 .global_var {
-	margin-bottom: 10px;
+	margin-bottom: 7px;
 }
 
 .list_globals, .global_const {
@@ -376,23 +384,64 @@ div.buttons_manage_columns {
 	margin: auto;
 }
 
-.global_container:hover {
+.global_container:hover, 
+.variable_container:hover {
 	border: 2px solid gray;
 	padding-left: 8px;
 	padding-right: 8px;
-	padding-top: 6px;
+	padding-top: 5px;
 	padding-bottom: 4px;
 }
 
-.global_container .global_type, .editing_name_var, .global_container .span_value_variable {
+.ui.label.function_name_parameter:hover {
+	border: 2px solid gray;
+	padding: 5px 6px 5px 6px;
+}
+
+.ui.label.function_name_parameter {
+	padding: 7px 8px 7px 8px;
+}
+
+.global_container:hover,  .variable_container:hover {
+	margin-bottom:  4px !important;
+}
+
+.global_container .global_type, .editing_name_var, .global_container .span_value_variable,
+.variable_container .variable_type,  .variable_container .span_value_variable,
+.ui.dropdown.function_return, div.function_name_div_updated,
+.ui.dropdown.parameter_type, .parameter_div_edit {
 	background: #cecece;
 	border-radius: 5px;
 	padding: 4px;
 	margin-left: 5px;
 	margin-right: 5px;
 }
+.parameter_div_edit {
+	padding-bottom: 2px;
+	padding-top: 2px;
+}
+.ui.dropdown.parameter_type {
 
-.global_container .global_type:hover, .editing_name_var:hover, .global_container .span_value_variable:hover {
+}
+div.function_name_div_updated {
+	padding-top: 5px;
+	padding-bottom: 5px;
+	margin-right: 10px;
+}
+.function_name_div_updated .name_function_updated {
+	padding-left: 10px;
+    padding-right: 10px;
+}
+.variable_container .variable_type {
+	padding: 5px;
+	margin-left: 0;
+	margin-right: 3px;
+}
+
+.global_container .global_type:hover, .editing_name_var:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover, .variable_container .span_name_variable:hover, .variable_container .span_value_variable:hover,
+.ui.dropdown.function_return:hover, div.function_name_div_updated:hover,
+.ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
 	background: #848484;
 	color: #fff;
 	z-index: 999999;
@@ -404,7 +453,11 @@ div.buttons_manage_columns {
 	padding-bottom: 3px;
 }
 
-.global_container .global_type:active {
+.global_container .global_type:active, 
+.variable_container .variable_type:active,
+.ui.dropdown.function_return:active, 
+div.function_name_div_updated:active,
+.ui.dropdown.parameter_type:active {
 	background: #636363;
 	color: #fff;
 }
@@ -422,10 +475,18 @@ div.buttons_manage_columns {
     font-size: 150%;
 }
 
-.red.icon.times.remove_global {
+.red.icon.times.remove_global,
+.red.icon.times.remove_variable,
+.red.icon.times.remove_parameter {
 	float: right;
     margin-right: -1px;
     margin-left: 8px;
+    opacity: 0;
+}
+
+.global_container:hover > .red.icon.times.remove_global, .variable_container:hover > .red.icon.times.remove_variable,
+.function_name_parameter:hover > .red.icon.times.remove_parameter {
+	opacity: 1;
 }
 
 .tr_manage_lines {
@@ -434,10 +495,139 @@ div.buttons_manage_columns {
 
 .ui.icon.button.add-globalVar-button.add_global_button {
 	padding: 8px;
+	margin-bottom: 4px;
 }
 .all_functions {
 	margin-top: -5px;
 }
+.only_in_frame {
+	position: absolute;
+    z-index: 9999;
+    width: 90px;
+    top: 5px;
+    left: 5px;
+    opacity: .6;
+}
+.only_in_frame:hover {
+	opacity: 1;
+}
+.only_in_frame:hover span {
+	display: block;
+}
+.only_in_frame span {
+	display: none;
+	margin-top: -5px;
+}
+.ui.container.main_title {
+	width: 85px;
+}
+.ui.label.global_container {
+	margin-bottom: 3px;
+}
+.ui.label.variable_container {
+	margin-bottom: 3px;
+}
+.created_div_valor_var {
+	display: inline-block;
+}
+.ui.dropdown.function_return {
+	padding-left: 15px;
+    padding-right: 15px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+.parethesis_function {
+	font-size: 120%;
+}
+
+.var_value_menu_div,
+.attribution .var_attributed,
+.component_element,
+.conditional_expression .expression_element,
+.menu_start_rendered,
+.attribution_expression .variable_attribution,
+.render_style_param,
+.attribution_expression .div_expression_st:not(:empty),
+.incrementation_field .incrementation_variable,
+.incrementation_field .first_operand:not(:empty),
+.incrementation_field .operator:not(:empty),
+.incrementation_field .second_operand:not(:empty) {
+	background: #e8e8e8;
+	border-radius: 5px;
+	min-width: 40px;
+	padding: 2px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 1px solid gray;
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
+    color: black;
+}
+.menu_start_rendered {
+	padding-left: 12px;
+}
+.menu_start_rendered i {
+	width: 1.5em;
+    margin-right: -1em;
+}
+.row_container:hover, .column_container:hover {
+	background: #cecece;
+}
+
+.column_container, .row_container {
+	border-radius: 4px;
+    border: 1px solid gray;
+    padding: 1px 2px 1px 2px;
+    background: #e8e8e8;
+
+    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
+}
+
+.var_value_menu_div div i {
+	color: black;
+}
+
+.span_command_spec {
+	color: black;
+	font-weight: bold;
+	font-size: 110%;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	display: inline-block;
+	width: 93%;
+}
+
+.ui.comment.command_container .var_value_menu_div .variable_rendered,
+.ui.comment.command_container .var_value_menu_div .value_rendered {
+    width: 100%;
+    cursor: text;
+    font-style: italic;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	cursor: text;
+}
+
+.ui.comment.command_container .var_value_menu_div {
+	background: none;
+	border-radius: 0;
+    border: 0px solid gray;
+    box-shadow: none;
+    padding: 0px;
+    font-size: 110%;
+}
+.ui.comment.command_container .var_name,
+.ui.comment.command_container .value_rendered {
+	color: rgba(0,0,0,.6);
+}
+.ui.comment.command_container .var_value_menu_div input {
+    width: 100%;
+    display: inline-block;
+    font-style: italic;
+}
+.ui.dropdown.menu_start_rendered .text i {
+    padding-right: 8px;
+}
 /* DOUGLAS */
 /*
 .div-over {
@@ -451,4 +641,4 @@ div.buttons_manage_columns {
 button.ui.segment {
 	margin-bottom: 0.5em;
 	margin-top: 0.5em;
-}
+}

grammar/en/langFunctions.js

@@ -19,15 +19,15 @@ export default {
   $castInt: "como_inteiro",
   $castBool: "como_logico",
   $castString: "como_cadeia",
-  $sin: "sen",
+  $sin: "sin",
   $cos: "cos",
   $tan: "tan",
-  $sqrt: "raiz_quadrada",
-  $pow: "pot",
+  $sqrt: "sqrt",
+  $pow: "pow",
   $log: "log",
-  $abs: "modulo",
-  $negate: "trocar_sinal",
-  $invert: "inverter_valor",
-  $max: "maximo",
-  $min: "minimo"
-}
+  $abs: "abs",
+  $negate: "negate",
+  $invert: "invert",
+  $max: "maximum",
+  $min: "minimum"
+}

grammar/en/langLibs.js

@@ -2,7 +2,7 @@
  * This is the dictionary of the language defined libraries
  */
 export default {
-  $mathLib: "Matematica",
+  $mathLib: "Mathematic",
   $ioLib: "ES",
   $strLib: "Texto",
   $arrayLib: "Arranjo",

grammar/es/langFunctions.js

@@ -19,15 +19,15 @@ export default {
   $castInt: "como_inteiro",
   $castBool: "como_logico",
   $castString: "como_cadeia",
-  $sin: "sen",
+  $sin: "sin",
   $cos: "cos",
   $tan: "tan",
-  $sqrt: "raiz_quadrada",
-  $pow: "pot",
+  $sqrt: "sqrt",
+  $pow: "pow",
   $log: "log",
-  $abs: "modulo",
-  $negate: "trocar_sinal",
-  $invert: "inverter_valor",
-  $max: "maximo",
-  $min: "minimo"
+  $abs: "abs",
+  $negate: "negate",
+  $invert: "invert",
+  $max: "maximum",
+  $min: "minimum"
 }

grammar/es/langLibs.js

@@ -2,7 +2,7 @@
  * This is the dictionary of the language defined libraries
  */
 export default {
-  $mathLib: "Matematica",
+  $mathLib: "Mathematic",
   $ioLib: "ES",
   $strLib: "Texto",
   $arrayLib: "Arranjo",

grammar/pt/langFunctions.js

@@ -19,15 +19,15 @@ export default {
   $castInt: "como_inteiro",
   $castBool: "como_logico",
   $castString: "como_cadeia",
-  $sin: "sen",
-  $cos: "cos",
-  $tan: "tan",
+  $sin: "seno",
+  $cos: "cosseno",
+  $tan: "tangente",
   $sqrt: "raiz_quadrada",
-  $pow: "pot",
-  $log: "log",
+  $pow: "potencia",
+  $log: "logaritmo",
   $abs: "modulo",
   $negate: "trocar_sinal",
   $invert: "inverter_valor",
   $max: "maximo",
   $min: "minimo"
-}
+}

i18n/en/ui.json

@@ -40,6 +40,7 @@
   "text_for":"for",
   "text_code_while":"while",
   "text_code_do":"do",
+  "text_command_do":"do",
   "text_code_switch": "switch",
   "text_code_case": "case",
   "text_logic_expression": "Logic Expression",
@@ -69,5 +70,41 @@
   "text_teacher_test_case_input": "Input",
   "text_teacher_test_case_output": "Output",
   "text_teacher_test_case_actions": "Actions",
-  "text_teacher_test_case_add": "Add test cases"
+  "text_teacher_test_case_add": "Add test cases",
+  "text_header_ivprog_functions": "iVProg Functions",
+  "text_menu_functions_math":"Mathematic",
+  "text_menu_functions_text":"Text",
+  "text_menu_functions_arrangement":"Arrangement",
+  "text_menu_functions_conversion":"Conversion",
+  "tooltip_visual": "Visual programming",
+  "tooltip_textual": "Textual programming",
+  "tooltip_upload": "Upload code file",
+  "tooltip_download": "Download code file",
+  "tooltip_undo": "Undo",
+  "tooltip_redo": "Redo",
+  "tooltip_run": "Run program",
+  "tooltip_evaluate": "Evaluate program",
+  "tooltip_help": "Help",
+  "tooltip_add_global": "Add global variable",
+  "tooltip_minimize": "Hidde function elements",
+  "tooltip_console": "Open/Close console",
+  "var_menu_select_var": "Select a var",
+  "var_menu_select_all": "Select",
+  "var_menu_select_function": "Select a function",
+  "expression_menu_select": "Select an expression",
+  "math": "Mathematic",
+  "text": "Text",
+  "arrangement": "Arrangement",
+  "conversion": "Conversion",
+  "$sin": "sin",
+  "$cos": "cos",
+  "$tan": "tan",
+  "$sqrt": "sqrt",
+  "$pow": "pow",
+  "$log": "log",
+  "$abs": "abs",
+  "$negate": "negate",
+  "$invert": "invert",
+  "$max": "maximum",
+  "$min": "minimum"
 }

i18n/es/ui.json

@@ -42,6 +42,7 @@
   "text_for":"for",
   "text_code_while":"while",
   "text_code_do":"do",
+  "text_command_do":"do",
   "text_code_switch": "switch",
   "text_code_case": "case",
   "text_logic_expression": "Logic Expression",
@@ -69,5 +70,46 @@
   "text_teacher_test_case_input": "Input",
   "text_teacher_test_case_output": "Output",
   "text_teacher_test_case_actions": "Actions",
-  "text_teacher_test_case_add": "Add test cases"
+  "text_teacher_test_case_add": "Add test cases",
+  "text_header_ivprog_functions": "iVProg Functions",
+  "text_menu_functions_math":"Mathematics",
+  "text_menu_functions_text":"Text",
+  "text_menu_functions_arrangement":"Arrangement",
+  "text_menu_functions_conversion":"Conversion",
+  "tooltip_visual": "Visual programming",
+  "tooltip_textual": "Textual programming",
+  "tooltip_upload": "Upload code file",
+  "tooltip_download": "Download code file",
+  "tooltip_undo": "Undo",
+  "tooltip_redo": "Redo",
+  "tooltip_run": "Run program",
+  "tooltip_evaluate": "Evaluate program",
+  "tooltip_help": "Help",
+  "tooltip_add_global": "Add global variable",
+  "tooltip_minimize": "Hidde function elements",
+  "tooltip_console": "Open/Close console",
+  "var_menu_select_var": "Select a var",
+  "var_menu_select_all": "Select",
+  "var_menu_select_function": "Select a function",
+  "expression_menu_select": "Select an expression",
+  "$sin": "sen",
+  "math": "Mathematic",
+  "text": "Text",
+  "arrangement": "Arrangement",
+  "conversion": "Conversion",
+  "math": "Mathematic",
+  "text": "Text",
+  "arrangement": "Arrangement",
+  "conversion": "Conversion",
+  "$sin": "sin",
+  "$cos": "cos",
+  "$tan": "tan",
+  "$sqrt": "sqrt",
+  "$pow": "pow",
+  "$log": "log",
+  "$abs": "abs",
+  "$negate": "negate",
+  "$invert": "invert",
+  "$max": "maximum",
+  "$min": "minimum"
 }

i18n/pt/ui.json

@@ -42,7 +42,8 @@
   "text_else":"senao",
   "text_for":"para",
   "text_code_while":"enquanto",
-  "text_code_do":"faça",
+  "text_code_do":"faca",
+  "text_command_do":"faça",
   "text_code_switch": "escolha",
   "text_code_case": "caso",
   "text_logic_expression": "Expressão Lógica",
@@ -70,5 +71,42 @@
   "text_teacher_test_case_input": "Entrada",
   "text_teacher_test_case_output": "Saída",
   "text_teacher_test_case_actions": "Ações",
-  "text_teacher_test_case_add": "Adicionar caso de teste"
+  "text_teacher_test_case_add": "Adicionar caso de teste",
+  "text_header_ivprog_functions": "Funções do iVProg",
+  "text_menu_functions_math":"Matemática",
+  "text_menu_functions_text":"Texto",
+  "text_menu_functions_arrangement":"Arranjo",
+  "text_menu_functions_conversion":"Conversão",
+  "tooltip_visual": "Programação visual",
+  "tooltip_textual": "Programação textual",
+  "tooltip_upload": "Upload de código fonte",
+  "tooltip_download": "Download do código fonte",
+  "tooltip_undo": "Desfazer",
+  "tooltip_redo": "Refazer",
+  "tooltip_run": "Executar o programa",
+  "tooltip_evaluate": "Avaliar o programa",
+  "tooltip_help": "Ajuda",
+  "tooltip_add_global": "Adicionar variável global",
+  "tooltip_minimize": "Ocultar os elementos da função",
+  "tooltip_console": "Abrir/fechar o terminal",
+  "var_menu_select_var": "Selecione uma variável",
+  "var_menu_select_all": "Selecione",
+  "var_menu_select_function": "Selecione uma função",
+  "expression_menu_select": "Selecione uma expressão",
+  "$sin": "sen",
+  "math": "Matematica",
+  "text": "Texto",
+  "arrangement": "Arranjo",
+  "conversion": "Conversao",
+  "$sin": "seno",
+  "$cos": "cosseno",
+  "$tan": "tangente",
+  "$sqrt": "raiz_quadrada",
+  "$pow": "potencia",
+  "$log": "logaritmo",
+  "$abs": "modulo",
+  "$negate": "trocar_sinal",
+  "$invert": "inverter_valor",
+  "$max": "maximo",
+  "$min": "minimo"
 }

index.html

@@ -88,6 +88,8 @@
 
               <div class="ui container list-group functions_labels">
               </div>
+              <div class="ui container list-group library_labels">
+              </div>
 
             </div>
           </div>

js/visualUI/algorithm.js

@@ -16,7 +16,6 @@ import { LanguageService } from '../services/languageService';
 var block_render = false;
 
 export function renderAlgorithm () {
-
 	if (block_render) {
 		return;
 	}
@@ -25,6 +24,9 @@ export function renderAlgorithm () {
  	$('.all_functions').children().off();
 	$('.all_functions').empty();
 
+	$('.list_globals').children().off();
+	$('.list_globals').empty();	
+
 	for (var i = 0; i < window.program_obj.functions.length; i++) {
 		FunctionsManagement.renderFunction(window.program_obj.functions[i]);
 	}

js/visualUI/algorithm_sidebar.js

@@ -24,6 +24,10 @@ export function renderAlgorithm () {
 
  	$('.all_functions').children().off();
 	$('.all_functions').empty();
+	$('.functions_labels').children().off();
+	$('.functions_labels').empty();
+	$('.list_globals').children().off();
+	$('.list_globals').empty();	
 
 	for (var i = 0; i < window.program_obj.functions.length; i++) {
 		FunctionsManagement.renderFunction(window.program_obj.functions[i]);

js/visualUI/code_generator.js

@@ -38,6 +38,7 @@ export function generate () {
 
 }
 
+
 function functionsCode (function_obj) {
 	var ret = '\n\t' + LocalizedStrings.getUI('function') + ' ';
 
@@ -148,10 +149,31 @@ function commandsCode (command_obj, indentation = 2) {
 
 		case Models.COMMAND_TYPES.switch:
 			return switchsCode(command_obj, indentation);
+
+		case Models.COMMAND_TYPES.return:
+			return returnsCode(command_obj, indentation);
+	}
+}
+
+function returnsCode (command_obj, indentation) {
+	var ret = '\n';
+
+	for (var i = 0; i < indentation; i++) {
+		ret += '\t';
 	}
+
+	ret += LocalizedStrings.getUI('text_return');
+
+	if (command_obj.variable_value_menu) {
+		try {
+			ret += ' ' + variableValueMenuCode(command_obj.variable_value_menu);
+		} catch(err) {}
+	}
+
+	return ret;
 }
 
-function breaksCode(command_obj, indentation) {
+function breaksCode (command_obj, indentation) {
 	var ret = '\n';
 
 	for (var i = 0; i < indentation; i++) {
@@ -163,7 +185,7 @@ function breaksCode(command_obj, indentation) {
 	return ret;
 }
 
-function switchsCode(command_obj, indentation) {
+function switchsCode (command_obj, indentation) {
 	var ret = '\n';
 
 	for (var i = 0; i < indentation; i++) {
@@ -191,7 +213,7 @@ function switchsCode(command_obj, indentation) {
 	return ret;
 }
 
-function switchcasesCode(switchcase, indentation) {
+function switchcasesCode (switchcase, indentation) {
 	var ret = '\n';
 
 	for (var i = 0; i < indentation; i++) {
@@ -212,7 +234,7 @@ function switchcasesCode(switchcase, indentation) {
 
 }
 
-function repeatNtimesCode(command_obj, indentation) {
+function repeatNtimesCode (command_obj, indentation) {
 	var ret = '\n';
 
 	for (var i = 0; i < indentation; i++) {
@@ -592,7 +614,12 @@ function variableValueMenuCode (variable_obj) {
 
 	var ret = '';
 	if (variable_obj.function_called) {
-		ret += variable_obj.function_called.name + ' ( ';
+
+		if (variable_obj.function_called.name) {
+			ret += variable_obj.function_called.name + ' ( ';
+		} else {
+			ret += LocalizedStrings.getUI(variable_obj.function_called.category)+'.'+LocalizedStrings.getUI(variable_obj.function_called.identifier) + ' ( ';
+		}
 
 		if (variable_obj.parameters_list) {
 			for (var i = 0; i < variable_obj.parameters_list.length; i++) {
@@ -721,9 +748,11 @@ function variablesCode (variable_obj) {
 
 		switch (temp.type) {
 			case Types.INTEGER:
-			case Types.REAL:
 				ret += '= {' + temp.value + '}';
 				break;
+			case Types.REAL:
+				ret += '= {' + temp.value.toFixed(2) + '}';
+				break;
 			case Types.TEXT:
 				ret += '= {';
 				for (var j = 0; j < temp.value.length; j++) {
@@ -755,7 +784,6 @@ function variablesCode (variable_obj) {
 
 		switch (temp.type) {
 			case Types.INTEGER:
-			case Types.REAL:
 				ret += '= {';
 
 				for (var j = 0; j < temp.rows; j++) {
@@ -766,6 +794,19 @@ function variablesCode (variable_obj) {
 					}
 				}
 
+				ret += '}';
+				break;
+			case Types.REAL:
+				ret += '= {';
+
+				for (var j = 0; j < temp.rows; j++) {
+					ret += '{' + temp.value[j].toFixed(2) + '}';
+
+					if ((j + 1) < temp.rows) {
+						ret += ',';
+					}
+				}
+
 				ret += '}';
 				break;
 			case Types.TEXT:
@@ -819,9 +860,11 @@ function variablesCode (variable_obj) {
 
 		switch (temp.type) {
 			case Types.INTEGER:
-			case Types.REAL:
 				ret += '= ' + temp.value;
 				break;
+			case Types.REAL:
+				ret += '= ' + temp.value.toFixed(2);
+				break;
 			case Types.TEXT:
 				ret += '= "' + temp.value + '"';
 				break;
@@ -874,9 +917,18 @@ function globalsCode () {
 
 				switch (temp.type) {
 					case Types.INTEGER:
-					case Types.REAL:
 						ret += '= {' + temp.value + '}';
 						break;
+					case Types.REAL:
+						ret += '= {';
+						for (var j = 0; j < temp.value.length; j++) {
+							ret += temp.value[j].toFixed(2);
+							if ((j + 1) < temp.value.length) {
+								ret += ',';
+							}
+						}
+						ret += '}';
+						break;
 					case Types.TEXT:
 						ret += '= {';
 						for (var j = 0; j < temp.value.length; j++) {
@@ -908,7 +960,6 @@ function globalsCode () {
 
 				switch (temp.type) {
 					case Types.INTEGER:
-					case Types.REAL:
 						ret += '= {';
 
 						for (var j = 0; j < temp.rows; j++) {
@@ -919,6 +970,28 @@ function globalsCode () {
 							}
 						}
 
+						ret += '}';
+						break;
+					case Types.REAL:
+						ret += '= {';
+
+						for (var j = 0; j < temp.rows; j++) {
+							ret += '{';
+
+							for (var k = 0; k < temp.columns; k++) {
+								ret += temp.value[j][k].toFixed(2);
+
+								if ((k + 1) < temp.columns) {
+									ret += ',';
+								}
+							}
+
+							ret += '}';
+							if ((j + 1) < temp.rows) {
+								ret += ',';
+							}
+						}
+
 						ret += '}';
 						break;
 					case Types.TEXT:
@@ -972,9 +1045,11 @@ function globalsCode () {
 
 				switch (temp.type) {
 					case Types.INTEGER:
-					case Types.REAL:
 						ret += '= ' + temp.value;
 						break;
+					case Types.REAL:
+						ret += '= ' + temp.value.toFixed(2);
+						break;
 					case Types.TEXT:
 						ret += '= "' + temp.value + '"';
 						break;

js/visualUI/commands.js

@@ -16,6 +16,7 @@ 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';
+import * as ReturnsManagement from './commands/return';
 
 var has_element_created_draged = false;
 var which_element_is_draged = null;
@@ -113,6 +114,10 @@ export function createFloatingCommand (function_obj, function_container, command
 		case Models.COMMAND_TYPES.functioncall:
 			floatingObject = FunctioncallsManagement.createFloatingCommand();
 			break;
+
+		case Models.COMMAND_TYPES.return:
+			floatingObject = ReturnsManagement.createFloatingCommand();
+			break;
 	}
 
 	floatingObject.draggable().appendTo("body");
@@ -177,6 +182,10 @@ export function renderCommand (command, element_reference, before_after_inside,
 			createdElement = SwitchesManagement.renderCommand(command, function_obj);
 			break;
 
+		case Models.COMMAND_TYPES.return:
+			createdElement = ReturnsManagement.renderCommand(command, function_obj);
+			break;
+
 	}
 
 	switch (before_after_inside) {
@@ -237,6 +246,9 @@ export function genericCreateCommand (command_type) {
 			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);
+
+		case Models.COMMAND_TYPES.return:
+			return new Models.Return(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
 	}
 }
 

js/visualUI/commands/attribution.js

@@ -14,16 +14,18 @@ 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> <div class="var_attributed"></div> <span class="text_attr_receives span_command_spec">'+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);
 
-	var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.none, 
+	if (!command.expression || command.expression.length < 1) {
+		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(exp);
+		command.expression.push(exp);
+	}
 
 	addHandlers(command, function_obj, el);
 

js/visualUI/commands/conditional_expression.js

@@ -120,11 +120,11 @@ function renderLogicOperator (command, all_expression, expression_logic, logic_o
 
 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_par_1 = $(' <span class="span_command_spec"> </span> ');
 	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>');
+	var exp_el_par_2 = $(' <span class="span_command_spec"> </span> ');
 
 	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);
@@ -159,11 +159,11 @@ function renderLogicExpression (command, all_expression, expression_logic, funct
 
 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_par_1 = $(' <span class="span_command_spec"> </span> ');
 	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>');
+	var exp_el_par_2 = $(' <span class="span_command_spec"> </span> ');
 
 
 	if (expression_arithmetic.first_operand.type == Models.EXPRESSION_TYPES.exp_logic) {
@@ -193,7 +193,7 @@ function renderArithmeticExpression (command, all_expression, expression_arithme
 
 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="ui dropdown menu_start_rendered"><div class="text"><i>'+LocalizedStrings.getUI('expression_menu_select')+'</i></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>';
@@ -223,9 +223,9 @@ function renderStartMenu (command, expression, function_obj, initial_el_to_rende
     	}
 	});
 
-	initial_el_to_render.append('<div class="expression_element"> ( </div>');
+	initial_el_to_render.append(' <span class="span_command_spec"> </span> ');
 	
 	initial_el_to_render.append(start_menu);
 
-	initial_el_to_render.append('<div class="expression_element"> ) </div>');
+	initial_el_to_render.append(' <span class="span_command_spec"> </span> ');
 }

js/visualUI/commands/dowhiletrue.js

@@ -9,15 +9,15 @@ 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>');
+	return $('<div class="ui dowhiletrue created_element"> <i class="ui icon small sync"></i> <span> '+ LocalizedStrings.getUI('text_command_do') +' {<br>} ' + LocalizedStrings.getUI('text_code_while') +'(x < 10) </span></div>');
 }
 
 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> <div class="ui context_menu"></div> <span> ' + LocalizedStrings.getUI('text_code_do') + '  { </span>';
+	ret += '<div class="ui dowhiletrue command_container"> <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div>  <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_command_do') + ' </span>';
 	ret += '<div class="ui block_commands" data-subblock="" data-idcommand="">';
 	ret += '</div>';
-	ret += '<span> } ' + LocalizedStrings.getUI('text_code_while') + ' </span> <div class="conditional_expression"></div>';
+	ret += ' <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_code_while') + ' </span> <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -29,6 +29,12 @@ export function renderCommand (command, function_obj) {
 
 	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
 
+	if (command.commands_block) {
+		for (var j = 0; j < command.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.block_commands')[0]), 3, function_obj);
+		}
+	}
+
 	return el;
 }
 

js/visualUI/commands/functioncall-sidebar.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { Types } from '../types';
-import * as Models from '../ivprog_elements';
+import * as Models from '../ivprog_elements_sidebar';
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
@@ -15,6 +15,10 @@ export function renderCommand (command, function_obj) {
 	var el = $('<div class="ui functioncall command_container"> <i class="hand point right icon command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> </div>');
 	el.data('command', command);
 
+	if (command.function_called) {
+		console.log("command.function_called");
+	}
+
 	VariableValueMenu.renderMenu(command, command.function_called, el.find('.var_value_menu_div'), function_obj);
 
 	addHandlers(command, function_obj, el);

js/visualUI/commands/iftrue.js

@@ -13,36 +13,16 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i> <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 iftrue command_container"><div class="ui data_block_if" data-if="true">  <i class="ui icon small random command_drag"></i> <i class="ui icon times red button_remove_command"></i>';
+	ret += '<span class="span_command_spec"> ' + LocalizedStrings.getUI('text_if') + '</span>';
+	ret += ' <span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += '<span> </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)) {
-	} else {
-		for (ki = 0; ki < writer_obj.commands_block.length; ki ++) {
-			ret += renderElementCommandGeneric(writer_obj.commands_block[ki], function_index, ki, iftrue_index, (fullpath + ',' + ki));
-		}
-	}*/
-
-	ret += '</div></div>';
-	ret += '<div class="ui data_block_else" data-else="true"> <span> } ' + LocalizedStrings.getUI('text_else') + ' { </span>';
-
+ 	ret += '</div></div>';
+	ret += '<div class="ui data_block_else" data-else="true"> <span class="span_command_spec"> ' + LocalizedStrings.getUI('text_else') + ' </span>';
 	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)) {
-	} else {
-		for (ki = 0; ki < writer_obj.commands_else.length; ki ++) {
-			ret += renderElementCommandGeneric(writer_obj.commands_else[ki], function_index, ki, iftrue_index, (fullpath + ',' + ki));
-		}
-	}*/
-
 	ret += '</div>';
-
-	ret += '<span> }</span></div>';
+	ret += '<span></span></div>';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -51,16 +31,20 @@ export function renderCommand (command, function_obj) {
 	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'));		
-	});
+	if (command.commands_block) {
+		for (var j = 0; j < command.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.commands_if')[0]), 3, function_obj);
+		}
+	}
+	if (command.commands_else) {
+		for (var j = 0; j < command.commands_else.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_else[j], $(el.find('.commands_else')[0]), 3, function_obj);
+		}
+	}
 
 	return el;
 }

js/visualUI/commands/reader.js

@@ -12,7 +12,7 @@ export function createFloatingCommand () {
 }
 
 export function renderCommand (command, function_obj) {
-	var el = '<div class="ui reader command_container"> <i class="ui icon small download command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span>'+LocalizedStrings.getUI('text_command_read')+' ( </span> <div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
+	var el = '<div class="ui reader command_container"> <i class="ui icon small download command_drag"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec">'+LocalizedStrings.getUI('text_command_read')+' ( </span> <div class="var_value_menu_div"></div> <span class="close_parentheses span_command_spec">)</span> </div>';
 	
 	el = $(el);
 	el.data('command', command);

js/visualUI/commands/return.js

@@ -0,0 +1,32 @@
+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 VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui return created_element"> <i class="ui icon small reply"></i> <span> '+LocalizedStrings.getUI('text_return')+' </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui return command_container"> <i class="ui icon small reply"></i> <i class="ui icon times red button_remove_command"></i> <span class="span_command_spec"> '+LocalizedStrings.getUI('text_return')+' </span>  <div class="var_value_menu_div"></div></div>');
+	el.data('command', command);
+
+	addHandlers(command, function_obj, el);
+
+	VariableValueMenu.renderMenu(command, command.variable_value_menu, el.find('.var_value_menu_div'), function_obj);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, return_dom) {
+
+	return_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, return_dom)) {
+			return_dom.remove();
+		}
+	});
+}

js/visualUI/commands/switch.js

@@ -14,7 +14,7 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui switch command_container"> <i class="ui icon small random command_drag" ></i> <i class="ui icon times red button_remove_command"></i> <div class="ui context_menu"></div> <span> '+LocalizedStrings.getUI('text_code_switch')+' ( <div class="ui variable_to_switch"></div> ) { <div class="ui all_cases_div"></div> }</span>';
+	ret += '<div class="ui switch command_container"> <i class="ui icon small random command_drag" ></i> <i class="ui icon times red button_remove_command"></i> <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);
@@ -46,6 +46,23 @@ export function renderCase (switchcase, command, function_obj, el) {
 
 	el.append(casediv);
 
+	if (switchcase.commands_block) {
+		for (var j = 0; j < switchcase.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(switchcase.commands_block[j], $(casediv.find('.case_commands_block')[0]), 3, function_obj);
+		}
+	}
+
+	casediv.find('.button_remove_command').on('click', function() {
+		for (var i = 0; i < command.cases.length; i++) {
+			if (switchcase == command.cases[i]) {
+				delete command.cases[i];
+				command.cases.splice(i, 1);
+				casediv.remove();
+				break;
+			}
+		}
+	});
+
 }
 
 function addHandlers (command, function_obj, switch_dom) {

js/visualUI/commands/variable_value_menu.js

@@ -12,22 +12,27 @@ export const VAR_OR_VALUE_TYPES = Object.freeze({only_variable: 1, only_value: 2
 	value_and_function: 6, all: 7});
 
 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">';
+	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-algo="12"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 
-	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) {
+	// Verificar se o objeto atual trata-se de uma chamada de função e conferir se possui a quantidade correta de parâmetros
+	// Caso não possua, tem que adicionar as variáveis que servirão de parâmetros:
+	if (ref_object.function_called) {
+		if (ref_object.function_called.parameters_list) {
 
-		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_functions">';
-		menu_var_or_value += '</div>';
-	} 
+			if (!ref_object.parameters_list) {
+				ref_object.parameters_list = [];
+			}
 
-	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) 
-		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
-		
-		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('btn_function');
-		menu_var_or_value += '<div class="menu menu_only_functions">';
-		menu_var_or_value += '</div></div>';
+			while (ref_object.function_called.parameters_list.length != ref_object.parameters_list.length) {
+				if (ref_object.parameters_list.length > ref_object.function_called.parameters_list.length) {
+					ref_object.parameters_list.pop();
+				} else {
+					ref_object.parameters_list.push(new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true));
+				}
+			}
+		}
 	}
-	
+
 	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_variable) {
 
 		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_vars">';
@@ -50,6 +55,21 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 
 		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_value+'">'+LocalizedStrings.getUI('text_value')+'</div>';
 
+	}
+
+	if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) {
+
+		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_functions">';
+		menu_var_or_value += '</div>';
+	} 
+
+	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) 
+		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
+		
+		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('btn_function');
+		menu_var_or_value += '<div class="menu menu_only_functions">';
+		menu_var_or_value += '</div></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">';
@@ -72,9 +92,78 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 
     addFunctionsToMenu(function_obj, menu_var_or_value, ref_object, expression_element);
 
+	addIVProgFunctionsToMenu(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, expression_element);
+    	// Verificar se a variável ainda existe:
+    	if (isVarInProgram(ref_object.content, function_obj)) {
+    		renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
+    	} else {
+    		if (ref_object.content && ref_object.content.type) {
+    			ref_object.content = null;
+    			appendSelectText(ref_object, menu_var_or_value);
+    		} else {
+    			renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
+    		}
+    	}
+    } else {
+    	appendSelectText(ref_object, menu_var_or_value);
     }
+
+}
+
+function appendSelectText (ref_object, menu_var_or_value) {
+	switch(ref_object.variable_and_value) {
+		case VAR_OR_VALUE_TYPES.only_variable:
+			menu_var_or_value.find('.text').append('<i>'+LocalizedStrings.getUI('var_menu_select_var')+'</i>');
+			break;
+		case VAR_OR_VALUE_TYPES.all:
+			menu_var_or_value.find('.text').append('<i>'+LocalizedStrings.getUI('var_menu_select_all')+'</i>');
+			break;
+		case VAR_OR_VALUE_TYPES.variable_and_function:
+			menu_var_or_value.find('.text').append('<i>'+LocalizedStrings.getUI('var_menu_select_all')+'</i>');
+			break;
+		case VAR_OR_VALUE_TYPES.only_function:
+			menu_var_or_value.find('.text').append('<i>'+LocalizedStrings.getUI('var_menu_select_function')+'</i>');
+			break;
+	}
+}
+
+function isVarInProgram (var_obj, function_obj) {
+	// Verify in globals:
+	if (window.program_obj.globals) {
+		for (var i = 0; i < window.program_obj.globals.length; i++) {
+			if (window.program_obj.globals[i] == var_obj) {
+				return true;
+			}
+		}
+	}
+	// Verify in locals:
+	if (function_obj.variables_list) {
+		for (var i = 0; i < function_obj.variables_list.length; i++) {
+			if (function_obj.variables_list[i] == var_obj) {
+				return true;
+			}
+		}
+	}
+	// Verify in parameters:
+	if (function_obj.parameters_list) {
+		for (var i = 0; i < function_obj.parameters_list.length; i++) {
+			if (function_obj.parameters_list[i] == var_obj) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
+export function refreshMenu (menu_var_or_value_dom) {
+	console.log('\n\n');
+	console.log(menu_var_or_value_dom);
+	console.log("olá, fui chamado! note alguns DATAS recuperados: ");
+	console.log(menu_var_or_value_dom.data());
+	console.log('\n\n\n');
+
 }
 
 function renderPreviousContent (function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element) {
@@ -99,6 +188,20 @@ function renderPreviousContent (function_obj, menu_var_or_value, ref_object, dom
 }
 
 function variableValueMenuCode (command, variable_obj, dom_object, function_obj, menu_var_or_value, expression_element) {
+	
+	if (variable_obj.content || variable_obj.function_called) {
+    	// Verificar se a variável ainda existe:
+    	if (isVarInProgram(variable_obj.content, function_obj)) {
+    		
+    	} else {
+    		if (variable_obj.content && variable_obj.content.type) {
+    			variable_obj.content = null;
+    			appendSelectText(variable_obj, menu_var_or_value);
+    		}
+    	}
+    } else {
+    	appendSelectText(variable_obj, menu_var_or_value);
+    }
 
 	if (variable_obj.content == null && variable_obj.function_called == null) {
 		renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
@@ -113,8 +216,14 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			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>';
+			var parameters_menu;
 			
+			if (variable_obj.function_called.name) {
+				parameters_menu = '<div class="parameters_function_called"> '+variable_obj.function_called.name+' <span> ( </span>';
+			} else {
+				parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(variable_obj.function_called.category)+'.'+LocalizedStrings.getUI(variable_obj.function_called.identifier)+'</i> <span> ( </span>';
+			}
+
 			parameters_menu += '<span> ) </span></div>';
 
 			parameters_menu = $(parameters_menu);
@@ -141,6 +250,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+				 console.log('S1');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP1');
 			     	dom_object.text('');
@@ -164,9 +274,16 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			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>';
+			var parameters_menu;
+
+			if (variable_obj.function_called.name) {
+				parameters_menu = '<div class="parameters_function_called"> '+variable_obj.function_called.name+' <span> ( </span>';
+			} else {
+				parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(variable_obj.function_called.category)+'.'+LocalizedStrings.getUI(variable_obj.function_called.identifier)+'</i> <span> ( </span>';
+			}
+
 			for (var j = 0; j < variable_obj.function_called.parameters_list.length; j++) {
-				parameters_menu += '<div class="parameter_'+j+'"></div>';
+				parameters_menu += '<div class="render_style_param parameter_'+j+'"></div>';
 				if ((j + 1) != variable_obj.function_called.parameters_list.length) {
 					parameters_menu += ' , ';
 				}
@@ -177,8 +294,11 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			dom_object.append(parameters_menu);
 
+			console.log("\nvariable_obj:");
+			console.log(variable_obj);
+
 			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);
+				renderMenu(command, new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true), parameters_menu.find('.parameter_'+j), function_obj, 2, expression_element);
 			}
 
 
@@ -202,6 +322,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S2');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP2');
 			     	dom_object.text('');
@@ -260,6 +381,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S3');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP3');
 			     	dom_object.text('');
@@ -279,6 +401,10 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 		      }
 			});
 
+			if (!variable_obj.column) {
+				variable_obj.column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
+			}
+
 			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) {
@@ -315,6 +441,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S4');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP4');
 			     	dom_object.text('');
@@ -334,6 +461,13 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 		      }
 			});
 
+			if (!variable_obj.column) {
+				variable_obj.column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
+			}
+			if (!variable_obj.row) {
+				variable_obj.row = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
+			}
+
 			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);
 
@@ -351,7 +485,9 @@ 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) {
+			if (command.type == Models.COMMAND_TYPES.attribution && !dom_object.hasClass('var_attributed')) {
+				console.log('dom_object6');
+				console.log(dom_object);
 				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>';
@@ -368,6 +504,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 			context_menu.dropdown({
 				onChange: function(value, text, $selectedItem) {
+					console.log('S5');
 			     if ($selectedItem.data('clear')) {
 			     	console.log('PP5');
 			     	dom_object.text('');
@@ -421,6 +558,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
+				console.log('S6');
 		     if ($selectedItem.data('clear')) {
 		     	console.log('PP6');
 		     	dom_object.text('');
@@ -455,9 +593,29 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 			openInputToValue(command, variable_obj, dom_object, menu_var_or_value, function_obj, expression_element);
 		});
 	}
+}
 
-	
-
+function addIVProgFunctionsToMenu (function_obj, menu_var_or_value, ref_object, expression_element) {
+	var sub_menu = menu_var_or_value.find('.menu_only_functions');
+	sub_menu.append('<div class="divider"></div><div class="header">'+LocalizedStrings.getUI('text_header_ivprog_functions')+'</div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_math')+'<div class="menu menu_math_functions"></div></div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_text')+'<div class="menu menu_text_functions"></div></div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_arrangement')+'<div class="menu menu_arrangement_functions"></div></div>');
+	sub_menu.append('<div class="item"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('text_menu_functions_conversion')+'<div class="menu menu_conversion_functions"></div></div>');
+
+	// Insert Math functions:
+	for (var i = 0; i < window.system_functions.length; i++) {
+		var t = $('<div class="item"></div>');
+		t.data('function_reference', window.system_functions[i]);
+		t.data('option', VAR_OR_VALUE_TYPES.only_function);
+		t.text(LocalizedStrings.getUI(window.system_functions[i].identifier));
+		
+		switch(window.system_functions[i].category) {
+			case Models.SYSTEM_FUNCTIONS_CATEGORIES.math:
+				sub_menu.find('.menu_math_functions').append(t);
+				break;
+		}	
+	}
 }
 
 function addFunctionsToMenu (function_obj, menu_var_or_value, ref_object, expression_element) {
@@ -518,6 +676,7 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 	if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
 		menu_var_or_value.dropdown({
 		  onChange: function(value, text, $selectedItem) {
+		  	console.log('S7');
 		  	dom_object.find('.var_name').remove();
 		     switch ($selectedItem.data('option')) {
 		     	case VAR_OR_VALUE_TYPES.only_function:
@@ -556,6 +715,19 @@ function addHandlers (command, ref_object, dom_object, menu_var_or_value, functi
 	        width: inputWidth
 	    })
 	}).trigger('input');
+
+
+	if (command.type == Models.COMMAND_TYPES.comment) {
+		dom_object.parent().on('click', function(e) {
+			dom_object.find('.value_rendered').remove();
+			dom_object.find('.value_rendered').empty();
+			dom_object.find('.value_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, expression_element)
+		});
+	}
 	
 }
 
@@ -570,9 +742,14 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		menu_var_or_value.find('.text').text(' ');
 		dom_object.find('.menu_var_or_value_dom').remove();
 
-		var parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		var parameters_menu;
+		if (function_selected.name) {
+			parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		} else {
+			parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(function_selected.category)+'.'+LocalizedStrings.getUI(function_selected.identifier)+'</i> <span> ( </span>';
+		}
 		for (var j = 0; j < function_selected.parameters_list.length; j++) {
-			parameters_menu += '<div class="parameter_'+j+'"></div>';
+			parameters_menu += '<div class="render_style_param parameter_'+j+'"></div>';
 			if ((j + 1) != function_selected.parameters_list.length) {
 				parameters_menu += ' , ';
 			}
@@ -610,6 +787,7 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
+				console.log('S8');
 		     if ($selectedItem.data('clear')) {
 		     	console.log('PP7');
 		     	dom_object.text('');
@@ -633,7 +811,13 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		menu_var_or_value.find('.text').text(' ');
 		dom_object.find('.menu_var_or_value_dom').remove();
 
-		var parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		var parameters_menu;
+
+		if (function_selected.name) {
+			parameters_menu = '<div class="parameters_function_called"> '+function_selected.name+' <span> ( </span>';
+		} else {
+			parameters_menu = '<div class="parameters_function_called"> <i>'+LocalizedStrings.getUI(function_selected.category)+'.'+LocalizedStrings.getUI(function_selected.identifier)+'</i> <span> ( </span>';
+		}
 		
 		parameters_menu += '<span> ) </span></div>';
 
@@ -661,6 +845,7 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 
 		context_menu.dropdown({
 			onChange: function(value, text, $selectedItem) {
+				console.log('S9');
 		     if ($selectedItem.data('clear')) {
 		     	console.log('PP8');
 		     	dom_object.text('');
@@ -684,10 +869,6 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 	if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
 	}
-
-	if (command.type == Models.COMMAND_TYPES.writer) {
-		WritersManagement.addContent(command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object.content);
-	}
 }
 
 function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected, expression_element) {
@@ -729,7 +910,9 @@ function openInputToVariable (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) {
+	if (command.type == Models.COMMAND_TYPES.attribution && !dom_object.hasClass('var_attributed')) {
+		console.log("dom_object 10: ");
+		console.log(dom_object);
 		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>';
@@ -746,6 +929,7 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 
 	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
+			console.log('S10');
 	     if ($selectedItem.data('clear')) {
 	     	console.log('PP9');
 	     	dom_object.text('');
@@ -773,12 +957,6 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 	if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected);
 	}
-
-	if (command.type == Models.COMMAND_TYPES.writer) {
-		WritersManagement.addContent(command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected);
-	}
-
-	
 }
 
 
@@ -821,6 +999,7 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 
 	context_menu.dropdown({
 		onChange: function(value, text, $selectedItem) {
+			console.log('S11');
 	     if ($selectedItem.data('clear')) {
 	     	console.log('PP10');
 	     	dom_object.text('');
@@ -872,6 +1051,19 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 		}
 	});
 
+	if (command.type == Models.COMMAND_TYPES.comment) {
+		rendered.parent().on('click', function(e) {
+			console.log("TTT14");
+			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, expression_element)
+		});
+	}
+
 	rendered.on('click', function(e) {
 		console.log("TTT2");
 		rendered.remove();
@@ -886,10 +1078,6 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 	if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
 	}
-
-	if (command.type == Models.COMMAND_TYPES.writer) {
-		WritersManagement.addContent(command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object.content);
-	}
 }
 
 

js/visualUI/commands/whiletrue.js

@@ -14,12 +14,12 @@ export function createFloatingCommand () {
 
 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> <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 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 class="span_command_spec"> ' + LocalizedStrings.getUI('text_code_while') + ' </span>';
+	ret += '<span class="span_command_spec"> ( </span> <div class="conditional_expression"></div> <span class="span_command_spec"> ) </span>';
+	ret += ' </span>';
 	ret += '<div class="ui block_commands">';
 	ret += '</div>';
-	ret += '<span> }</span>';
+	ret += '<span> </span>';
 	ret += '</div>';
 
 	var el = $(ret);
@@ -31,6 +31,12 @@ export function renderCommand (command, function_obj) {
 
 	ConditionalExpressionManagement.renderExpression(command, command.expression, function_obj, el.find('.conditional_expression'));
 
+	if (command.commands_block) {
+		for (var j = 0; j < command.commands_block.length; j++) {
+		    CommandsManagement.renderCommand(command.commands_block[j], $(el.find('.block_commands')[0]), 3, function_obj);
+		}
+	}
+
 	return el;
 }
 

js/visualUI/commands/writer.js

@@ -14,15 +14,19 @@ export function createFloatingCommand () {
 
 export function renderCommand (command, function_obj) {
 	var ret = '';
-	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>';
+	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 class="span_command_spec">'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="all_elements_write"></div> <span class="close_parentheses span_command_spec">)</span> </div>';
 
 	var el = $(ret);
 	el.data('command', command);
 
-	VariableValueMenu.renderMenu(command, command.content[0], $(el).find('.var_value_menu_div'), function_obj);
+	for (var i = 0; i < command.content.length; i ++) {
+		var new_div_item = $( '<div class="var_value_menu_div"></div>' );
+		el.find('.all_elements_write').append(new_div_item);
+		VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);
 
+		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
+	}
 	addHandlers(command, function_obj, el);
-
 	return el;
 }
 
@@ -35,15 +39,43 @@ function addHandlers (command, function_obj, writer_dom) {
 	});
 }
 
+function addHandlerIconAdd (dom_object, command, function_obj, insert_after = false, after_which = null) {
+	var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
+	if (!insert_after) {
+		dom_object.append(icon_add_item);
+	} else {
+		icon_add_item.insertAfter(after_which);
+	}
+	
+	icon_add_item.on('click', function(e) {
+		var new_div_item = $( '<div class="var_value_menu_div" style="display:none;"></div>' );
+		new_div_item.insertAfter(icon_add_item);
+		var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+
+		VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
+
+		addHandlerIconAdd(dom_object, command, function_obj, true, new_div_item);
+		var pos = 1;
+		dom_object.find('.icon_add_item_to_writer').each(function() {
+			if ($(this).get(0) === icon_add_item.get(0)) {
+				command.content.splice(pos, 0, new_related_menu);
+			} else {
+				pos ++;
+			}
+		});
+		new_div_item.fadeIn();
+	});
+}
+
 export function addContent (command, ref_object, dom_object, menu_var_or_value, function_obj, ref_object_content) {
 	
-	if ($(dom_object).hasClass('var_value_menu_div')) {
+	if (dom_object.hasClass('var_value_menu_div')) {
 		var icon_add_item = $( '<i class="ui icon plus square outline icon_add_item_to_writer"></i> ' );
-		$(icon_add_item).insertAfter(dom_object);
+		icon_add_item.insertAfter(dom_object);
 
-		$( icon_add_item ).on('click', function(e) {
+		icon_add_item.on('click', function(e) {
 			var new_div_item = $( '<div class="var_value_menu_div"></div>' );
-			$(new_div_item).insertAfter(icon_add_item);
+			new_div_item.insertAfter(icon_add_item);
 			var new_related_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
 
 			VariableValueMenu.renderMenu(command, new_related_menu, new_div_item, function_obj);
@@ -51,5 +83,4 @@ export function addContent (command, ref_object, dom_object, menu_var_or_value,
 			command.content.push(new_related_menu);
 		});
 	}
-	
 }

js/visualUI/commands_sidebar.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { Types } from './types';
-import * as Models from './ivprog_elements';
+import * as Models from './ivprog_elements_sidebar';
 import { LocalizedStrings } from './../services/localizedStringsService';
 import * as GlobalsManagement from './globals';
 import * as VariablesManagement from './variables';
@@ -16,11 +16,13 @@ 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';
+import * as ReturnsManagement from './commands/return';
+import { VariableValueMenu } from './ivprog_elements_sidebar';
 
 var has_element_created_draged = false;
 var which_element_is_draged = null;
 
-export function removeCommand(command, function_obj, dom_obj) {
+export function removeCommand (command, function_obj, dom_obj) {
 	console.log('debugging removeCommand');
 	console.log('command');
 	console.log(command);
@@ -41,7 +43,7 @@ export function removeCommand(command, function_obj, dom_obj) {
 				(dom_obj.parent().parent().data('command').commands_block.indexOf(command), 1);
 			return true;
 		}
-	} catch (err) { }
+	} catch (err) {}
 
 	try {
 		if (dom_obj.parent().parent().data('command').type == Models.COMMAND_TYPES.iftrue) {
@@ -51,7 +53,7 @@ export function removeCommand(command, function_obj, dom_obj) {
 				return true;
 			}
 		}
-	} catch (err) { }
+	} catch (err) {}
 
 	console.log('veja: ');
 	console.log(dom_obj.parent());
@@ -66,7 +68,7 @@ export function removeCommand(command, function_obj, dom_obj) {
 	return false;
 }
 
-export function createFloatingCommand(function_obj, function_container, command_type, mouse_event) {
+export function createFloatingCommand (function_obj, function_container, command_type, mouse_event) {
 	var floatingObject;
 
 	switch (command_type) {
@@ -113,11 +115,15 @@ export function createFloatingCommand(function_obj, function_container, command_
 		case Models.COMMAND_TYPES.functioncall:
 			floatingObject = FunctioncallsManagement.createFloatingCommand();
 			break;
+
+			case Models.COMMAND_TYPES.return:
+				floatingObject = ReturnsManagement.createFloatingCommand();
+				break;
 	}
 
 	floatingObject.draggable().appendTo("body");
 
-	floatingObject.mouseup(function (evt) {
+	floatingObject.mouseup(function(evt) {
 		manageCommand(function_obj, function_container, evt, command_type);
 	});
 
@@ -130,7 +136,7 @@ export function createFloatingCommand(function_obj, function_container, command_
 }
 
 // before_after_inside: 1 -> before, 2 -> after, 3 -> inside
-export function renderCommand(command, element_reference, before_after_inside, function_obj) {
+export function renderCommand (command, element_reference, before_after_inside, function_obj) {
 	var createdElement;
 	switch (command.type) {
 		case Models.COMMAND_TYPES.comment:
@@ -177,7 +183,11 @@ export function renderCommand(command, element_reference, before_after_inside, f
 			createdElement = SwitchesManagement.renderCommand(command, function_obj);
 			break;
 
-	}
+			case Models.COMMAND_TYPES.return:
+				createdElement = ReturnsManagement.renderCommand(command, function_obj);
+				break;
+	
+		}
 
 	switch (before_after_inside) {
 		case 1:
@@ -195,7 +205,7 @@ export function renderCommand(command, element_reference, before_after_inside, f
 
 }
 
-export function genericCreateCommand(command_type) {
+export function genericCreateCommand (command_type) {
 
 	switch (command_type) {
 
@@ -237,6 +247,33 @@ export function genericCreateCommand(command_type) {
 			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);
+
+			case Models.COMMAND_TYPES.return:
+				return new Models.Return(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+		}
+}
+
+function preCreateCommand(command_type, function_called) {
+	if (function_called == null)
+		return genericCreateCommand(command_type);
+	else if (command_type == 'functioncall') {
+		if (function_called.return_type != Types.VOID) {
+			var var_menu = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
+			var_menu.function_called = function_called;
+			var exp = new Models.ExpressionElement(Models.EXPRESSION_ELEMENTS.op_exp, [Models.ARITHMETIC_TYPES.none, 
+				var_menu]);
+			exp.function_called = function_called;
+			return new Models.Attribution(new Models.VariableValueMenu(
+				VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false),[exp]);
+		}
+		var varM = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false);
+		varM.function_called = function_called;
+		var parameters = [];
+		for (var i = 0; i < function_called.parameters_list.length; i++) {
+			parameters.push(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+		}
+		var functionCall = new Models.FunctionCall(varM, parameters);
+		return functionCall;
 	}
 }
 
@@ -292,12 +329,7 @@ function manageCommand(function_obj, function_container, event, command_type, fu
 			// pode adicionar 
 			el.data('fun').commands = [];
 
-			var new_cmd = null;
-
-			if (function_called == null)
-				new_cmd = genericCreateCommand(command_type);
-			else if (command_type == 'functioncall')
-				new_cmd = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+			var new_cmd = preCreateCommand(command_type,function_called);
 
 			el.data('fun').commands.push(new_cmd);
 
@@ -374,14 +406,14 @@ function manageCommand(function_obj, function_container, event, command_type, fu
 			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);
+				insertCommandInBlockHierar(el[0], event, function_obj, command_type, hier_find, hierarquia_bottom_up, function_called);
 			} 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);
+						insertCommandInBlockHierar(hier_find[i], event, function_obj, command_type, hier_find, hierarquia_bottom_up, function_called);
 						sub_elemento = true;
 						break;
 					}
@@ -416,16 +448,12 @@ function insertCommandInBlockHierar(el, event, function_obj, command_type, hier_
 			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 				command_parent.commands_block = [];
 
-				var recentComand = null;
-				if (function_called == null)
-					recentComand = genericCreateCommand(command_type);
-				else if (command_type == "functioncall")
-					recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+				var recentComand = preCreateCommand(command_type, function_called);
 				command_parent.commands_block.push(recentComand);
 
 				renderCommand(recentComand, el_jq.find('.block_commands'), 3, function_obj);
 			} else { // Se já tem algum comando no bloco:
-				findNearbyCommandToAddInBlockScope(el, event, el, function_obj, command_type, command_parent);
+				findNearbyCommandToAddInBlockScope(el, event, el, function_obj, command_type, command_parent, function_called);
 			}
 
 		} else {
@@ -467,11 +495,7 @@ function findNearbyCommandToAddInBlockScope(el, event, node_list_commands, funct
 
 	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
 
-	var recentComand = null;
-	if (function_called == null)
-		recentComand = genericCreateCommand(command_type);
-	else if (command_type == 'functioncall')
-		recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+	var recentComand = preCreateCommand(command_type,function_called);
 
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
@@ -580,12 +604,7 @@ function findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, comma
 
 	if (d_top < d_bot) {
 
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
-
+		var recentComand = preCreateCommand(command_type,function_called);
 
 		console.log('MMM1');
 
@@ -598,10 +617,7 @@ function findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, comma
 				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
 					command_parent.commands_else = [];
 
-					var recentComand = null;
-					if (function_called == null)
-						recentComand = genericCreateCommand(command_type);
-					else if (command_type == 'functioncall') recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+					var recentComand = preCreateCommand(command_type,function_called);
 						command_parent.commands_else.push(recentComand);
 
 					renderCommand(recentComand, el_jq, 3, function_obj);
@@ -625,17 +641,13 @@ function findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, comma
 				if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 					command_parent.commands_block = [];
 					console.log('SSS4');
-					var recentComand = null;
-					if (function_called == null)
-						recentComand = genericCreateCommand(command_type);
-					else if (command_type == 'functioncall')
-						recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+					var recentComand = preCreateCommand(command_type,function_called);
 					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, function_called);
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, false, function_called);
 				}
 
 
@@ -656,11 +668,7 @@ function findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, comma
 
 	} else {
 		console.log('XXX1');
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 
 		if (is_in_else) {
 
@@ -669,11 +677,7 @@ function findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, comma
 				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
 					command_parent.commands_else = [];
 					console.log('SSS1');
-					var recentComand = null;
-					if (function_called == null)
-						recentComand = genericCreateCommand(command_type);
-					else if (command_type == 'functioncall')
-						recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+					var recentComand = preCreateCommand(command_type,function_called);
 					command_parent.commands_else.push(recentComand);
 
 					renderCommand(recentComand, el_jq, 3, function_obj);
@@ -700,17 +704,13 @@ function findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, comma
 				if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 					command_parent.commands_block = [];
 
-					var recentComand = null;
-					if (function_called == null)
-						recentComand = genericCreateCommand(command_type);
-					else if (command_type == 'functioncall')
-						recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+					var recentComand = preCreateCommand(command_type,function_called);
 					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, function_called);
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, false, function_called);
 				}
 
 
@@ -743,17 +743,13 @@ function insertCommandInBlock(el, event, function_obj, command_type, function_ca
 		if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 			command_parent.commands_block = [];
 
-			var recentComand = null;
-			if (function_called == null)
-				recentComand = genericCreateCommand(command_type);
-			else if (command_type == 'functioncall')
-				recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+			var recentComand = preCreateCommand(command_type,function_called);
 
 			command_parent.commands_block.push(recentComand);
 
 			renderCommand(recentComand, el_jq.find('.block_commands'), 3, function_obj);
 		} else { // Se já tem algum comando no bloco:
-			findInBlockCorrectPlace(el, event, function_obj, command_type, function_called);
+			findInBlockCorrectPlace(el, event, function_obj, command_type, false, function_called);
 		}
 
 	} else if (el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) {
@@ -786,27 +782,19 @@ function insertCommandInBlock(el, event, function_obj, command_type, function_ca
 			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 				command_parent.commands_block = [];
 
-				var recentComand = null;
-				if (function_called == null)
-					recentComand = genericCreateCommand(command_type);
-				else if (command_type == 'functioncall')
-					recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+				var recentComand = preCreateCommand(command_type,function_called);
 				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, function_called);
+				findInBlockCorrectPlace(el_jq.find('.commands_if'), event, function_obj, command_type, false, function_called);
 			}
 
 		} else {
 			if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
 				command_parent.commands_else = [];
 
-				var recentComand = null;
-				if (function_called == null)
-					recentComand = genericCreateCommand(command_type);
-				else if (command_type == 'functioncall')
-					recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+				var recentComand = preCreateCommand(command_type,function_called);
 				command_parent.commands_else.push(recentComand);
 
 				renderCommand(recentComand, el_jq.find('.commands_else'), 3, function_obj);
@@ -843,11 +831,7 @@ function addCommandToSwitchCase(event, function_obj, command_type) {
 	if (which_case.commands_block == null || which_case.commands_block.length < 1) {
 		which_case.commands_block = [];
 
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 		which_case.commands_block.push(recentComand);
 		renderCommand(recentComand, case_div.find('.case_commands_block'), 3, function_obj);
 	} else {
@@ -886,11 +870,7 @@ function findInBlockCorrectPlaceInSwitchCase(which_case, case_div, event, functi
 
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 
 		which_case.commands_block.push(recentComand);
 
@@ -898,11 +878,7 @@ function findInBlockCorrectPlaceInSwitchCase(which_case, case_div, event, functi
 
 	} else {
 
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 
 		var index = which_case.commands_block.indexOf($(elemento_menor_distancia).data('command'));
 
@@ -913,7 +889,7 @@ function findInBlockCorrectPlaceInSwitchCase(which_case, case_div, event, functi
 	}
 }
 
-function findInBlockCorrectPlace(el, event, function_obj, command_type, is_in_else = false) {
+function findInBlockCorrectPlace(el, event, function_obj, command_type, is_in_else = false, function_called = null) {
 	var el_jq = $(el);
 	var all_sub = el_jq.find('div.command_container');
 
@@ -946,11 +922,7 @@ function findInBlockCorrectPlace(el, event, function_obj, command_type, is_in_el
 
 		console.log('QQ11');
 
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 
 		var command_parent = el_jq.data('command');
 
@@ -975,11 +947,7 @@ function findInBlockCorrectPlace(el, event, function_obj, command_type, is_in_el
 
 		console.log('QQ12');
 
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 
 		var command_parent = el_jq.data('command');
 
@@ -1031,11 +999,7 @@ function findBeforeOrAfterCommandToAdd(el, event, function_obj, command_type, fu
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if (d_top < d_bot) {
 
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 
 
 		var index = function_obj.commands.indexOf($(el).data('command'));
@@ -1047,11 +1011,7 @@ function findBeforeOrAfterCommandToAdd(el, event, function_obj, command_type, fu
 		renderCommand(recentComand, el, 1, function_obj);
 
 	} else {
-		var recentComand = null;
-		if (function_called == null)
-			recentComand = genericCreateCommand(command_type);
-		else if (command_type == 'functioncall')
-			recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+		var recentComand = preCreateCommand(command_type,function_called);
 
 		var index = function_obj.commands.indexOf($(el).data('command'));
 
@@ -1088,11 +1048,7 @@ function findNearbyCommandToAddInFunctionScope(el, event, node_list_commands, fu
 
 	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
 
-	var recentComand = null;
-	if (function_called == null)
-		recentComand = genericCreateCommand(command_type);
-	else if (command_type == 'functioncall')
-		recentComand = new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, function_called, null, null, false), null);
+	var recentComand = preCreateCommand(command_type,function_called);
 
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {

js/visualUI/functions.js

@@ -15,6 +15,8 @@ import { SemanticAnalyser } from '../processor/semantic/semanticAnalyser';
 import { IVProgAssessment } from '../assessment/ivprogAssessment';
 import * as AlgorithmManagement from './algorithm';
 
+import '../Sortable.js';
+
 var counter_new_functions = 0;
 var counter_new_parameters = 0;
 
@@ -22,6 +24,30 @@ let studentTemp = null;
 let domConsole = null;
 window.studentGrade = null;
 const program = new Models.Program();
+
+window.system_functions = [];
+window.system_functions.push(new Models.SystemFunction('$sin', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$cos', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$tan', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$sqrt', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$pow', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$log', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$abs', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$negate', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$invert', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$max', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
+window.system_functions.push(new Models.SystemFunction('$min', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
+  null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
 /*const variable1 = new Models.Variable(Types.INTEGER, "a", 1);
 const parameter1 = new Models.Variable(Types.INTEGER, "par_1", 1);
 const command1 = new Models.Comment(new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.only_value, "Testing rendering commands"));
@@ -32,6 +58,8 @@ const sumFunction = new Models.Function("soma", Types.INTEGER, 0, [parameter1],
 program.addFunction(sumFunction);
 */
 
+console.log('       ___           ___                    ________          \n      /   /         /   /                  /   ____/  \n     /   /         /   /                  /   /        \n    /   /         /   /  ______    ___   /   /__         \n   /   /         /   /  /      \\  /  /  /   ___/      \n  /   /______   /   /  /   /\\   \\/  /  /   /      \n /          /  /   /  /   /  \\     /  /   /____     \n/__________/  /___/  /___/    \\___/  /________/       ');
+
 const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true, false);
 mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main'));
 program.addFunction(mainFunction);
@@ -88,7 +116,6 @@ function addHandlers (function_obj, function_container) {
 
   function_container.find('.ui.dropdown.function_return').dropdown({
       onChange: function(value, text, $selectedItem) {
-        $selectedItem = $($selectedItem);
         if ($selectedItem.data('dimensions')) {
           updateReturnType(function_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
         } else {
@@ -136,8 +163,6 @@ function addHandlers (function_obj, function_container) {
     function_container.find(".function_area").toggle();
     function_container.find(".add_var_top_button").toggle();
   });
-
-
 }
 
 // Essa função imprime o tipo de retorno da função e cria o menu do tipo 'select' para alteração
@@ -147,13 +172,17 @@ function renderFunctionReturn (function_obj, function_element) {
     
     if (function_obj.return_dimensions > 0) {
       ret += '<div class="text">'+ LocalizedStrings.getUI("vector") +':'+ LocalizedStrings.getUI(function_obj.return_type);
+      if (function_obj.return_dimensions == 1) {
+        ret += ' [ ] ';
+      } else {
+        ret += ' [ ] [ ] ';
+      }
       ret += '</div>';
     } else {
       ret += '<div class="text">'+LocalizedStrings.getUI(function_obj.return_type)+'</div>';
     }
 
-    ret += '<i class="dropdown icon"></i>'
-      + '<div class="menu">';
+    ret += '<div class="menu">';
 
 
     for (var tm in Types) {
@@ -215,20 +244,20 @@ export function renderFunction (function_obj) {
 
   if (function_obj.is_main) {
       appender += '<div class="function_name_div">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' + LocalizedStrings.getUI('void') + ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span_name_function" >'+function_obj.name+'</span> </div> '
-        + '( <div class="ui large labels parameters_list">';
+        + ' <span class="parethesis_function">( </span> <div class="ui large labels parameters_list">';
   } else {
       appender += '<div class="ui function_return"></div>';
 
-      appender += '<div class="function_name_divunction_obj.name+'</span> <i class="icon small pencil alternate enable_edit_name_function name_function_updated"></i></div> ' 
-        + '( <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
+      appender += '<div class="function_name_div function_name_div_updatedunction_obj.name+'</span> </div> ' 
+        + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
   }
     
-  appender += '</div> ) </div>'
+  appender += '</div> <span class="parethesis_function"> ) </span> </div>'
     + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
 
     + '<div class="ui top attached segment variables_list_div">'
-    /*+ renderVariables(function_obj, sequence)*/
     + '</div>'
+
     + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
 
   appender += '</div>';
@@ -264,6 +293,14 @@ export function renderFunction (function_obj) {
     CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
   }
 
+
+  $('.minimize_function_button').popup({
+    content : LocalizedStrings.getUI("tooltip_minimize"),
+    delay: {
+      show: 750,
+      hide: 0
+    }
+  });
 }
 
 
@@ -295,6 +332,10 @@ export function initVisualUI () {
     runCodeAssessment();
     is_iassign = true;
   });
+
+  $('.div_toggle_console').on('click', () => {
+    toggleConsole();
+  });
 }
 
 var is_iassign = false;
@@ -305,10 +346,104 @@ $( document ).ready(function() {
     renderFunction(program.functions[i]);
   }
 
+  var time_show = 750;
+  $('.visual_coding_button').popup({
+    content : LocalizedStrings.getUI("tooltip_visual"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.textual_coding_button').popup({
+    content : LocalizedStrings.getUI("tooltip_textual"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.upload_file_button').popup({
+    content : LocalizedStrings.getUI("tooltip_upload"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.download_file_button').popup({
+    content : LocalizedStrings.getUI("tooltip_download"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.undo_button').popup({
+    content : LocalizedStrings.getUI("tooltip_undo"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.redo_button').popup({
+    content : LocalizedStrings.getUI("tooltip_redo"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.run_button').popup({
+    content : LocalizedStrings.getUI("tooltip_run"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.assessment_button').popup({
+    content : LocalizedStrings.getUI("tooltip_evaluate"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.help_button').popup({
+    content : LocalizedStrings.getUI("tooltip_help"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.add_global_button').popup({
+    content : LocalizedStrings.getUI("tooltip_add_global"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+  $('.div_toggle_console').popup({
+    content : LocalizedStrings.getUI("tooltip_console"),
+    delay: {
+      show: time_show,
+      hide: 0
+    }
+  });
+
+  Sortable.create(listWithHandle, {
+    handle: '.glyphicon-move',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'functions_divs_drag',
+    onEnd: function (evt) {
+       updateSequenceFunction(evt.oldIndex, evt.newIndex);
+    }
+  });
+
 });
 
+function updateSequenceFunction (oldIndex, newIndex) {
+  program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
+}
 
 function runCodeAssessment () {
+  toggleConsole(true);
+
   window.studentGrade = null;
   studentTemp = null;
   const strCode = CodeManagement.generate();
@@ -320,27 +455,19 @@ function runCodeAssessment () {
   $("#ivprog-term").slideDown(500);
   const runner = new IVProgAssessment(strCode, testCases, domConsole);
 
-  runner.runTest().then(grade => studentTemp = grade).catch( err => domConsole.err(err.message));
-  
-  gradeMonitor();
-}
-
-function gradeMonitor () {
-
-  if (studentTemp == null) { 
-    setTimeout(gradeMonitor, 50); 
-  } else {
-    window.studentGrade = studentTemp;
+  runner.runTest().then(grade => {
     if (!is_iassign) {
-      parent.getEvaluationCallback(window.studentGrade);
+      parent.getEvaluationCallback(grade);
     } else {
       is_iassign = false;
     }
-  }
-
+  }).catch( err => domConsole.err(err.message));
+  
 }
 
 function runCode () {
+  toggleConsole(true);
+
   const strCode = CodeManagement.generate();
   if (strCode == null) {
     return;
@@ -355,11 +482,14 @@ function runCode () {
     const proc = new IVProgProcessor(data);
     proc.registerInput(domConsole);
     proc.registerOutput(domConsole);
-    
+    $("#ivprog-term").addClass('ivprog-term-active');
+
     proc.interpretAST().then( _ => {
       domConsole.info("Programa executado com sucesso!");
+      $("#ivprog-term").removeClass('ivprog-term-active');
     }).catch(err => {
       domConsole.err(err.message);
+      $("#ivprog-term").removeClass('ivprog-term-active');
     }) 
   } catch (error) {
     domConsole.err(error.message);
@@ -368,6 +498,29 @@ function runCode () {
   
 }
 
+function toggleConsole (is_running) {
+
+  if (is_running) {
+    $('.ivprog-term-div').css('display', 'block');
+    $('#ivprog-term').css('min-height', '160px');
+    $('#ivprog-term').css('margin-top', '-170px');
+    return;
+  }
+
+  if ($('#ivprog-term').css('min-height') == '160px') {
+    // esconder
+    $('.ivprog-term-div').css('display', 'none');
+    $('#ivprog-term').css('min-height', '0');
+    $('#ivprog-term').css('margin-top', '-30px');
+    $('#ivprog-term').css('padding', '5px');
+  } else {
+    // mostrar
+    $('.ivprog-term-div').css('display', 'block');
+    $('#ivprog-term').css('min-height', '160px');
+    $('#ivprog-term').css('margin-top', '-170px');
+  }
+}
+
 function waitToCloseConsole () {
   domConsole.info("Aperte qualquer tecla para fechar...");
   const p = new Promise((resolve, _) => {
@@ -386,12 +539,18 @@ function toggleTextualCoding () {
   $('.ivprog_textual_panel').css('display', 'block');
   $('.ivprog_textual_panel').removeClass('loading');
   $('.ivprog_textual_code').text(code);
+
+  $('.visual_coding_button').removeClass('active');
+  $('.textual_coding_button').addClass('active');
 }
 
 function toggleVisualCoding () {
   $('.ivprog_textual_panel').addClass('loading');
   $('.ivprog_textual_panel').css('display', 'none');
   $('.ivprog_visual_panel').css('display', 'block');
+
+  $('.textual_coding_button').removeClass('active');
+  $('.visual_coding_button').addClass('active');
 }
 
 function removeParameter (function_obj, parameter_obj, parameter_container) {
@@ -422,13 +581,17 @@ function renderParameter (function_obj, parameter_obj, function_container) {
 
   if (parameter_obj.dimensions > 0) {
     ret += '<div class="text">'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
+    if (parameter_obj.dimensions == 1) {
+      ret += ' [ ] ';
+    } else {
+      ret += ' [ ] [ ] ';
+    }
     ret += '</div>';
   } else {
     ret += '<div class="text">'+LocalizedStrings.getUI(parameter_obj.type)+'</div>';
   }
 
-  ret += '<i class="dropdown icon"></i>'
-    + '<div class="menu">';
+  ret += '<div class="menu">';
 
   
   for (var tm in Types) {
@@ -454,7 +617,7 @@ function renderParameter (function_obj, parameter_obj, function_container) {
 
   ret += '</div></div>';
 
-  ret += '<span class="span_name_parameter label_enable_name_parameter">'+parameter_obj.name+'</span> <i class="icon small pencil alternate enable_edit_name_parameter label_enable_name_parameter"></i>';
+  ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">'+parameter_obj.name+'</span></div> ';
 
   ret += ' <i class="red icon times remove_parameter"></i></div>';
 
@@ -468,10 +631,10 @@ function renderParameter (function_obj, parameter_obj, function_container) {
   
   ret.find('.ui.dropdown.parameter_type').dropdown({
     onChange: function(value, text, $selectedItem) {
-      if ($($selectedItem).data('dimensions')) {
-        updateParameterType(parameter_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
+      if ($selectedItem.data('dimensions')) {
+        updateParameterType(parameter_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
       } else {
-        updateParameterType(parameter_obj, Types[$($selectedItem).data('type')]);
+        updateParameterType(parameter_obj, Types[$selectedItem.data('type')]);
       }
     }
   });
@@ -486,49 +649,55 @@ var opened_name_parameter = false;
 var opened_input_parameter = null;
 function enableNameParameterUpdate (parameter_obj, parent_node) {
   if (opened_name_parameter) {
-    $(opened_input_parameter).focus();
+    opened_input_parameter.focus();
     return;
   }
   opened_name_parameter = true;
+  parent_node = $(parent_node);
+
+  var input_field;
 
-  $(parent_node).find('.span_name_parameter').text('');
-  $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+parameter_obj.name+"' />" ).insertBefore($(parent_node).find('.span_name_parameter'));
+  parent_node.find('.span_name_parameter').text('');
+  input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+parameter_obj.name+"' />" );
+  input_field.insertBefore(parent_node.find('.span_name_parameter'));
 
-  $('.width-dynamic').on('input', function() {
-    var inputWidth = $(this).textWidth()+10;
-    opened_input_parameter = this;
-    $(this).focus();
+  input_field.on('input', function() {
+    var inputWidth = input_field.textWidth()+10;
+    opened_input_parameter = input_field;
+    input_field.focus();
 
-    var tmpStr = $(this).val();
-    $(this).val('');
-    $(this).val(tmpStr);
+    var tmpStr = input_field.val();
+    input_field.val('');
+    input_field.val(tmpStr);
 
-    $(this).css({
+    input_field.css({
         width: inputWidth
     })
   }).trigger('input');
 
-  $('.width-dynamic').focusout(function() {
+  input_field.focusout(function() {
     /// update array:
-    if ($(this).val().trim()) {
-      parameter_obj.name = $(this).val().trim();
-      $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
+    if (input_field.val().trim()) {
+      parameter_obj.name = input_field.val().trim();
+      parent_node.find('.span_name_parameter').text(parameter_obj.name);
     }
-    $(this).remove();
+    input_field.off();
+    input_field.remove();
 
     /// update elements:
     opened_name_parameter = false;
     opened_input_parameter = false;
   });
 
-  $('.width-dynamic').on('keydown', function(e) {
+  input_field.on('keydown', function(e) {
     var code = e.keyCode || e.which;
     if(code == 13) {
-      if ($(this).val().trim()) {
-        parameter_obj.name = $(this).val().trim();
-        $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
+      if (input_field.val().trim()) {
+        parameter_obj.name = input_field.val().trim();
+        parent_node.find('.span_name_parameter').text(parameter_obj.name);
       }
-      $(this).remove();
+      input_field.off();
+      input_field.remove();
 
       /// update elements:
       opened_name_parameter = false;
@@ -536,65 +705,79 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
 
     }
     if(code == 27) {
-      $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
-
-      $(this).remove();
+      parent_node.find('.span_name_parameter').text(parameter_obj.name);
+      input_field.off();
+      input_field.remove();
 
       /// update elements:
       opened_name_parameter = false;
       opened_input_parameter = false;
     }
   });
-
+  input_field.select();
 }
 
 var opened_name_function = false;
 var opened_input = null;
-function enableNameFunctionUpdate(function_obj, parent_node) {
+var previousPadding = null;
+function enableNameFunctionUpdate (function_obj, parent_node) {
   if (opened_name_function) {
-    $(opened_input).focus();
+    opened_input.focus();
     return;
   }
+  parent_node = $(parent_node);
+  parent_node.find('.span_name_function').text('');
+  var input_field;
+  if (!previousPadding) {
+    previousPadding = parent_node.find('.span_name_function').css('padding-left');
+  }
+  parent_node.find('.span_name_function').css('padding-left', '0');
+  parent_node.find('.span_name_function').css('padding-right', '0');
+  
+  input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+function_obj.name+"' />" );
+  input_field.insertBefore(parent_node.find('.span_name_function'));
 
-  $(parent_node).find('.span_name_function').text('');
-  $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+function_obj.name+"' />" ).insertBefore($(parent_node).find('.span_name_function'));
-
-  $('.width-dynamic').on('input', function() {
-    var inputWidth = $(this).textWidth()+10;
-    opened_input = this;
-    $(this).focus();
+  input_field.on('input', function() {
+    var inputWidth = input_field.textWidth()+10;
+    opened_input = input_field;
+    input_field.focus();
 
-    var tmpStr = $(this).val();
-    $(this).val('');
-    $(this).val(tmpStr);
+    var tmpStr = input_field.val();
+    input_field.val('');
+    input_field.val(tmpStr);
 
-    $(this).css({
+    input_field.css({
         width: inputWidth
     })
   }).trigger('input');
 
-  $('.width-dynamic').focusout(function() {
+  input_field.focusout(function() {
     /// update array:
-    if ($(this).val().trim()) {
-      function_obj.name = $(this).val().trim();
+    if (input_field.val().trim()) {
+      function_obj.name = input_field.val().trim();
     }
-    $(this).remove();
-    $(parent_node).find('.span_name_function').text(function_obj.name);
+    input_field.off();
+    input_field.remove();
+    parent_node.find('.span_name_function').css('padding-left', previousPadding);
+    parent_node.find('.span_name_function').css('padding-right', previousPadding);
+    parent_node.find('.span_name_function').text(function_obj.name);
 
     /// update elements:
     opened_name_function = false;
     opened_input = false;
   });
 
-  $('.width-dynamic').on('keydown', function(e) {
+  input_field.on('keydown', function(e) {
     var code = e.keyCode || e.which;
     if(code == 13) {
-      if ($(this).val().trim()) {
-        function_obj.name = $(this).val().trim();
+      if (input_field.val().trim()) {
+        function_obj.name = input_field.val().trim();
       }
-      $(this).remove();
-
-      $(parent_node).find('.span_name_function').text(function_obj.name);
+      input_field.off();
+      input_field.remove();
+      parent_node.find('.span_name_function').css('padding-left', previousPadding);
+      parent_node.find('.span_name_function').css('padding-right', previousPadding);
+      parent_node.find('.span_name_function').text(function_obj.name);
 
       /// update elements:
       opened_name_function = false;
@@ -602,14 +785,17 @@ function enableNameFunctionUpdate(function_obj, parent_node) {
     }
     if(code == 27) {
 
-      $(this).remove();
-
-      $(parent_node).find('.span_name_function').text(function_obj.name);
+      input_field.off();
+      input_field.remove();
+      parent_node.find('.span_name_function').css('padding-left', previousPadding);
+      parent_node.find('.span_name_function').css('padding-right', previousPadding);
+      parent_node.find('.span_name_function').text(function_obj.name);
 
       /// update elements:
       opened_name_function = false;
       opened_input = false;
     }
   });
+  input_field.select();
   
 }

js/visualUI/globals.js

@@ -47,7 +47,9 @@ function removeGlobal (global_var, global_container) {
 	if (index > -1) {
 	  window.program_obj.globals.splice(index, 1);
 	}
-	$(global_container).remove();
+	global_container.children().off();
+	global_container.off();
+	global_container.remove();
 }
 
 function updateInitialValues (global_var) {
@@ -103,12 +105,12 @@ function updateInitialValues (global_var) {
 
 function alternateBooleanGlobalValue (global_var, value_container) {
 	global_var.value = !global_var.value;
-	$(value_container).find('.span_value_variable').text(global_var.value);
+	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(global_var.value));
 }
 
 function alternateBooleanGlobalVectorValue (global_var, index, value_container) {
 	global_var.value[index] = !global_var.value[index];
-	$(value_container).find('.span_value_variable').text(global_var.value[index]);
+	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(global_var.value[index]));
 }
 
 function removeGlobalColumnVector (global_var) {
@@ -220,7 +222,7 @@ function addLineGlobalMatrix (global_var) {
 
 function alternateBooleanGlobalMatrixValue (global_var, row, index, value_container) {
 	global_var.value[row][index] = !global_var.value[row][index];
-	$(value_container).find('.span_value_variable').text(global_var.value[row][index]);
+	$(value_container).find('.span_value_variable').text(LocalizedStrings.getUI(global_var.value[row][index]));
 }
 
 function renderValues (global_var, global_container) {
@@ -230,12 +232,12 @@ function renderValues (global_var, global_container) {
 
 	if (global_var.dimensions == 0) {
 		if (global_var.type == Types.REAL) {
-			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value.toFixed(1)+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value.toFixed(1)+'</span>  </div> ';
 		} else {
 			if (global_var.type == Types.BOOLEAN) {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+global_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function boolean_simple_type"></i></div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+LocalizedStrings.getUI(global_var.value)+'</span>  </div> ';
 			} else {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value+'</span>  </div> ';
 			}
 		}
 	} else {
@@ -250,7 +252,7 @@ function renderValues (global_var, global_container) {
 			} else {
 				for (var k = 0; k < global_var.columns; k++) {
 					if (global_var.type == Types.BOOLEAN) {
-						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="'+k+'">'+global_var.value[k]+'</span></td>';
+						ret += '<td><span class="span_value_variable boolean_vector_var" data-index="'+k+'">'+LocalizedStrings.getUI(global_var.value[k])+'</span></td>';
 					} else {
 						ret += '<td><span class="span_value_variable vector_var" data-index="'+k+'">'+global_var.value[k]+'</span>'+'</td>';
 					}
@@ -278,7 +280,7 @@ function renderValues (global_var, global_container) {
     				ret += '<tr>';
     				for (var k = 0; k < global_var.columns; k++) {
     					if (global_var.type == Types.BOOLEAN) { 
-    						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k]+'</span></td>';
+    						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+LocalizedStrings.getUI(global_var.value[l][k])+'</span></td>';
     					} else {
     						ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k]+'</span></td>';
     					}
@@ -299,69 +301,72 @@ function renderValues (global_var, global_container) {
 		
 	}
 
-	$( global_container ).find( ".div_valor_var" ).html('');
+	global_container.find( ".div_valor_var" ).html('');
 
 	ret = $(ret);
 
-	$(ret).find('.span_value_variable').data('associatedOject', global_var);
+	ret.find('.span_value_variable').data('associatedOject', global_var);
 
-	$( ret ).find( ".boolean_simple_type" ).on('click', function(e){
+	ret.find( ".boolean_simple_type" ).on('click', function(e){
 		alternateBooleanGlobalValue(global_var, this.parentNode);
 	});
-	$( ret ).find( ".simple_var" ).on('click', function(e){
+	ret.find( ".simple_var" ).on('click', function(e){
 		enableGlobalValueUpdate(global_var, this.parentNode);
 	});
 
-	$( ret ).find( ".boolean_vector_var" ).on('click', function(e){
+	ret.find( ".boolean_vector_var" ).on('click', function(e){
 		alternateBooleanGlobalVectorValue(global_var, $(this).data('index'), this.parentNode);
 	});
-	$( ret ).find( ".vector_var" ).on('click', function(e){
+	ret.find( ".vector_var" ).on('click', function(e){
 		enableGlobalVectorValueUpdate(global_var, $(this).data('index'), this.parentNode);
 	});
-	$( ret ).find( ".remove_global_vector_column" ).on('click', function(e){
+	ret.find( ".remove_global_vector_column" ).on('click', function(e){
 		removeGlobalColumnVector(global_var);
-		$( global_container ).find( ".div_valor_var" ).html('');
+		global_container.find( ".div_valor_var" ).html('');
 		renderValues(global_var, global_container);
 	});
-	$( ret ).find( ".add_global_vector_column" ).on('click', function(e){
+	ret.find( ".add_global_vector_column" ).on('click', function(e){
 		addGlobalColumnVector(global_var);
-		$( global_container ).find( ".div_valor_var" ).html('');
+		global_container.find( ".div_valor_var" ).html('');
 		renderValues(global_var, global_container);
 	});
-	$( ret ).find( ".remove_global_matrix_column" ).on('click', function(e){
+	ret.find( ".remove_global_matrix_column" ).on('click', function(e){
 		removeColumnGlobalMatrix(global_var);
-		$( global_container ).find( ".div_valor_var" ).html('');
+		global_container.find( ".div_valor_var" ).html('');
 		renderValues(global_var, global_container);
 	});
-	$( ret ).find( ".add_global_matrix_column" ).on('click', function(e){
+	ret.find( ".add_global_matrix_column" ).on('click', function(e){
 		addColumnGlobalMatrix(global_var);
-		$( global_container ).find( ".div_valor_var" ).html('');
+		global_container.find( ".div_valor_var" ).html('');
 		renderValues(global_var, global_container);
 	});
-	$( ret ).find( ".remove_global_matrix_line" ).on('click', function(e){
+	ret.find( ".remove_global_matrix_line" ).on('click', function(e){
 		removeLineGlobalMatrix(global_var);
-		$( global_container ).find( ".div_valor_var" ).html('');
+		global_container.find( ".div_valor_var" ).html('');
 		renderValues(global_var, global_container);
 	});
-	$( ret ).find( ".add_global_matrix_line" ).on('click', function(e){
+	ret.find( ".add_global_matrix_line" ).on('click', function(e){
 		addLineGlobalMatrix(global_var);
-		$( global_container ).find( ".div_valor_var" ).html('');
+		global_container.find( ".div_valor_var" ).html('');
 		renderValues(global_var, global_container);
 	});
-	$( ret ).find( ".boolean_matrix_var" ).on('click', function(e){
+	ret.find( ".boolean_matrix_var" ).on('click', function(e){
 		alternateBooleanGlobalMatrixValue(global_var, $(this).data('row'), $(this).data('index'), this.parentNode);
 	});
-	$( ret ).find( ".matrix_var" ).on('click', function(e){
+	ret.find( ".matrix_var" ).on('click', function(e){
 		enableGlobalMatrixValueUpdate(global_var, $(this).data('row'), $(this).data('index'), this.parentNode);
 	});
-	$( global_container ).find( ".div_valor_var" ).append(ret);
+	global_container.find( ".div_valor_var" ).append(ret);
+
+
+	updateColumnsAndRowsText(global_container, global_var);
 
 }
 
 function addHandlers (global_container) {
-	var global_var = $(global_container).data('associatedOject'); 
+	var global_var = global_container.data('associatedOject'); 
 	// Manage constant option:
-	$( global_container ).find( ".alternate_constant" ).on('click', function(e){
+	global_container.find( ".alternate_constant" ).on('click', function(e){
 		toggleConstant(global_var);
 
 		$( this ).removeClass( "on off" );
@@ -373,48 +378,63 @@ function addHandlers (global_container) {
 	});
 
 	// Manage global name: 
-	$( global_container ).find( ".enable_edit_name_parameter" ).on('click', function(e){
+	global_container.find( ".enable_edit_name_parameter" ).on('click', function(e){
 		enableNameUpdate(global_container);
 	});
 
 	// Menu to change type:
-	$( global_container ).find('.ui.dropdown.global_type').dropdown({
+	global_container.find('.ui.dropdown.global_type').dropdown({
 	    onChange: function(value, text, $selectedItem) {
-	    	if ($($selectedItem).data('dimensions')) {
-	    		updateType(global_var, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
+	    	if ($selectedItem.data('dimensions')) {
+	    		updateType(global_var, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
 	    	} else {
-	    		updateType(global_var, Types[$($selectedItem).data('type')]);
+	    		updateType(global_var, Types[$selectedItem.data('type')]);
 	    	}
 
 	    	renderValues(global_var, global_container);
+
 	    }
 	});
 
 	// Remove global: 
-	$( global_container ).find( ".remove_global" ).on('click', function(e){
+	global_container.find( ".remove_global" ).on('click', function(e){
 		removeGlobal(global_var, global_container);
 	});
 
 }
 
-function renderGlobal (global_var) {
+function updateColumnsAndRowsText (global_container, global_var) {
+	var prev = global_container.find('.text').text().split('[');
+	if (prev.length == 2) {
+		var ff = prev[0] + '[ ' + global_var.columns + ' ] ';
+		global_container.find('.text').empty();
+		global_container.find('.text').text(ff);
+	}
+	if (prev.length == 3) {
+		var ff = prev[0] + '[ ' + global_var.columns + ' ] [ ' + global_var.rows + ' ] ';
+		global_container.find('.text').empty();
+		global_container.find('.text').text(ff);
+	}
+}
+
+export function renderGlobal (global_var) {
 
 	var element = '<div class="ui label global_container"><div class="global_const">const: ';
 
-	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div><span class="span_name_variable enable_edit_name_parameter">'+global_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_parameter"></i>';
+	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div>';
  	
  	element += '<div class="ui dropdown global_type">';
 
   	if (global_var.dimensions > 0) {
   		element += '<div class="text">'+ i18n('ui:vector') + ':' + LocalizedStrings.getUI(global_var.type);
   		for (var i = 0; i < global_var.dimensions; i ++) {
-  			element += ' [ ] ';
+  			element += ' [ <span class="dimensions_'+i+'"></span> ] ';
   		}
   		element += '</div>';
   	} else {
   		element += '<div class="text">' + LocalizedStrings.getUI(global_var.type.toLowerCase()) + '</div>';
   	}
-	element += '<i class="dropdown icon"></i><div class="menu">';
+	element += '<div class="menu">';
 
 	for (var tm in Types) {
   		if (tm == Types.VOID.toUpperCase()) {
@@ -437,7 +457,7 @@ function renderGlobal (global_var) {
 	    	+ '</div>';	
   	}
 
-    element += '</div></div>  = ';
+    element += '</div></div> <div class="editing_name_var"> <span class="span_name_variable enable_edit_name_parameter">'+global_var.name+'</span> </div> <span class="character_equals"> = </span> ';
 
 	element += '<div class="ui div_valor_var">'+global_var.value+'</div>';    
 
@@ -445,89 +465,124 @@ function renderGlobal (global_var) {
 
 	var complete_element = $(element);
 
-	$(complete_element).data('associatedOject', global_var);
+	complete_element.data('associatedOject', global_var);
 
 	$('.list_globals').append(complete_element);
 
 	addHandlers(complete_element);
 
 	renderValues(global_var, complete_element);
+
+	if (global_var.dimensions == 1) {
+		complete_element.find('.dimensions_0').text(global_var.columns);
+	}
+	if (global_var.dimensions == 2) {
+		complete_element.find('.dimensions_0').text(global_var.columns);
+		complete_element.find('.dimensions_1').text(global_var.rows);
+	}
 }
 
 var opened_name_value_matrix_global_v = false;
 var opened_input_value_matrix_global_v = null;
 function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
 	if (opened_name_value_matrix_global_v) {
-		$(opened_input_value_matrix_global_v).focus();
+		opened_input_value_matrix_global_v.focus();
 		return;
 	}
+	parent_node = $(parent_node);
 	opened_name_value_matrix_global_v = true;
 
-	$(parent_node).find('.span_value_variable').text('');
+	parent_node.find('.span_value_variable').text('');
+
+	var input_field;
 
 	if (global_var.type == Types.REAL) {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[row][index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[row][index].toFixed(1) + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[row][index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[row][index] + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_value_matrix_global_v = this;
-	    $(this).focus();
+	input_field.on('input', function() {
+	    var inputWidth = input_field.textWidth()+10;
+	    opened_input_value_matrix_global_v = input_field;
+	    input_field.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
+	    var tmpStr = input_field.val();
+		input_field.val('');
+		input_field.val(tmpStr);
 
-	    $(this).css({
+	    input_field.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_field.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
+		if (input_field.val().trim()) {
 			if (global_var.type == Types.REAL) {
-				global_var.value[row][index] = parseFloat($(this).val().trim());
+				global_var.value[row][index] = parseFloat(input_field.val().trim());
 
-				$(parent_node).find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+				parent_node.find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
 			} else {
 				if (global_var.type == Types.INTEGER) {
-					global_var.value[row][index] = parseInt($(this).val().trim());
+					global_var.value[row][index] = parseInt(input_field.val().trim());
 				} else {
-					global_var.value[row][index] = $(this).val().trim();
+					global_var.value[row][index] = input_field.val().trim();
 				}
-				$(parent_node).find('.span_value_variable').text(global_var.value[row][index]);
+				parent_node.find('.span_value_variable').text(global_var.value[row][index]);
+			}
+		} else {
+			if (global_var.type == Types.REAL) {
+				parent_node.find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+			} else {
+				parent_node.find('.span_value_variable').text(global_var.value[row][index]);
 			}
 		}
-		$(this).remove();
+		if (global_var.type == Types.TEXT) {
+			global_var.value[row][index] = input_field.val();
+			parent_node.find('.span_value_variable').text(global_var.value[row][index]);
+		}
+		input_field.off();
+		input_field.remove();
 
 		/// update elements:
 		opened_name_value_matrix_global_v = false;
 		opened_input_value_matrix_global_v = false;
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_field.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
+			if (input_field.val().trim()) {
 				if (global_var.type == Types.REAL) {
-					global_var.value[row][index] = parseFloat($(this).val().trim());
+					global_var.value[row][index] = parseFloat(input_field.val().trim());
 
-					$(parent_node).find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+					parent_node.find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
 				} else {
 					if (global_var.type == Types.INTEGER) {
-						global_var.value[row][index] = parseInt($(this).val().trim());
+						global_var.value[row][index] = parseInt(input_field.val().trim());
 					} else {
-						global_var.value[row][index] = $(this).val().trim();
+						global_var.value[row][index] = input_field.val().trim();
 					}
-					$(parent_node).find('.span_value_variable').text(global_var.value[row][index]);
+					parent_node.find('.span_value_variable').text(global_var.value[row][index]);
 				}
+			} else {
+				if (global_var.type == Types.REAL) {
+					parent_node.find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+				} else {
+					parent_node.find('.span_value_variable').text(global_var.value[row][index]);
+				}
+			}
+			if (global_var.type == Types.TEXT) {
+				global_var.value[row][index] = input_field.val();
+				parent_node.find('.span_value_variable').text(global_var.value[row][index]);
 			}
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_matrix_global_v = false;
@@ -535,69 +590,87 @@ function enableGlobalMatrixValueUpdate (global_var, row, index, parent_node) {
 		}
 		if(code == 27) {
 			if (global_var.type == Types.REAL) {
-				$(parent_node).find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
+				parent_node.find('.span_value_variable').text(global_var.value[row][index].toFixed(1));
 			} else {
-				$(parent_node).find('.span_value_variable').text(global_var.value[row][index]);
+				parent_node.find('.span_value_variable').text(global_var.value[row][index]);
 			}
-
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_matrix_global_v = false;
 			opened_input_value_matrix_global_v = false;
 		}
 	});
+	input_field.select();
 }
 
 var opened_name_value_global_var = false;
 var opened_input_value_global_ar = null;
 function enableGlobalValueUpdate (global_var, parent_node) {
 	if (opened_name_value_global_var) {
-		$(opened_input_value_global_ar).focus();
+		opened_input_value_global_ar.focus();
 		return;
 	}
+	parent_node = $(parent_node);
 	opened_name_value_global_var = true;
 
-	$(parent_node).find('.span_value_variable').text('');
+	parent_node.find('.span_value_variable').text('');
+
+	var input_field;
+
 	if (global_var.type == Types.REAL) {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value.toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value.toFixed(1) + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_value_global_ar = this;
-	    $(this).focus();
+	input_field.on('input', function() {
+	    var inputWidth = input_field.textWidth()+10;
+	    opened_input_value_global_ar = input_field;
+	    input_field.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
+	    var tmpStr = input_field.val();
+		input_field.val('');
+		input_field.val(tmpStr);
 
-	    $(this).css({
+	    input_field.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_field.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
+		if (input_field.val().trim()) {
 			if (global_var.type == Types.REAL) {
-				global_var.value = parseFloat($(this).val().trim());
-				$(parent_node).find('.span_value_variable').text(global_var.value.toFixed(1));
+				global_var.value = parseFloat(input_field.val().trim());
+				parent_node.find('.span_value_variable').text(global_var.value.toFixed(1));
 			} else{
 				if (global_var.type == Types.INTEGER) {
-					global_var.value = parseInt($(this).val().trim());
+					global_var.value = parseInt(input_field.val().trim());
 				} else {
-					global_var.value = $(this).val().trim();
+					global_var.value = input_field.val().trim();
 				}
-				$(parent_node).find('.span_value_variable').text(global_var.value);
+				parent_node.find('.span_value_variable').text(global_var.value);
 				
 			}
+		} else {
+			if (global_var.type == Types.REAL) {
+				parent_node.find('.span_value_variable').text(global_var.value.toFixed(1));
+			} else {
+				parent_node.find('.span_value_variable').text(global_var.value);
+			}
 		}
-		$(this).remove();
+		if (global_var.type == Types.TEXT) {
+			global_var.value = input_field.val();
+			parent_node.find('.span_value_variable').text(global_var.value);
+		}
+		input_field.off();
+		input_field.remove();
 
 		/// update elements:
 		opened_name_value_global_var = false;
@@ -605,23 +678,34 @@ function enableGlobalValueUpdate (global_var, parent_node) {
 
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_field.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
+			if (input_field.val().trim()) {
 				if (global_var.type == Types.REAL) {
-					global_var.value = parseFloat($(this).val().trim());
-					$(parent_node).find('.span_value_variable').text(global_var.value.toFixed(1));
-				} else{
+					global_var.value = parseFloat(input_field.val().trim());
+					parent_node.find('.span_value_variable').text(global_var.value.toFixed(1));
+				} else {
 					if (global_var.type == Types.INTEGER) {
-						global_var.value = parseInt($(this).val().trim());
+						global_var.value = parseInt(input_field.val().trim());
 					} else {
-						global_var.value = $(this).val().trim();
+						global_var.value = input_field.val().trim();
 					}
-					$(parent_node).find('.span_value_variable').text(global_var.value);
+					parent_node.find('.span_value_variable').text(global_var.value);
 				}
+			} else {
+				if (global_var.type == Types.REAL) {
+					parent_node.find('.span_value_variable').text(global_var.value.toFixed(1));
+				} else {
+					parent_node.find('.span_value_variable').text(global_var.value);
+				}
+			}
+			if (global_var.type == Types.TEXT) {
+				global_var.value = input_field.val();
+				parent_node.find('.span_value_variable').text(global_var.value);
 			}
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_global_var = false;
@@ -630,18 +714,20 @@ function enableGlobalValueUpdate (global_var, parent_node) {
 		}
 		if(code == 27) {
 			if (global_var.type == Types.REAL) {
-				$(parent_node).find('.span_value_variable').text(global_var.value.toFixed(1));
+				parent_node.find('.span_value_variable').text(global_var.value.toFixed(1));
 			} else{
-				$(parent_node).find('.span_value_variable').text(global_var.value);
+				parent_node.find('.span_value_variable').text(global_var.value);
 			}
-
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_global_var = false;
 			opened_input_value_global_ar = false;
 		}
 	});
+
+	input_field.select();
 }
 
 
@@ -649,52 +735,55 @@ var opened_name_global = false;
 var opened_input_global = null;
 function enableNameUpdate (global_container) {
 
-	var global_var = $(global_container).data('associatedOject'); 
+	var global_var = global_container.data('associatedOject'); 
 
 	if (opened_name_global) {
-		$(opened_input_global).focus();
+		opened_input_global.focus();
 		return;
 	}
 	opened_name_global = true;
 
-	$( global_container ).find('.span_name_variable').text('');
-	$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+global_var.name+"' />" ).insertBefore($(global_container).find('.span_name_variable'));
+	global_container.find('.span_name_variable').text('');
+	var input_name = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+global_var.name+"' />" );
+	input_name.insertBefore(global_container.find('.span_name_variable'));
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_global = this;
-	    $(this).focus();
+	input_name.on('input', function() {
+	    var inputWidth = input_name.textWidth()+10;
+	    opened_input_global = input_name;
+	    opened_input_global.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
-
-	    $(this).css({
+	    opened_input_global.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_name.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
-			updateName(global_var, $(this).val().trim());
-			$(global_container).find('.span_name_variable').text(global_var.name);
+		if (input_name.val().trim().length > 0) {
+			updateName(global_var, input_name.val().trim());
+			global_container.find('.span_name_variable').text(global_var.name);
+		} else {
+			global_container.find('.span_name_variable').text(global_var.name);
 		}
-		$(this).remove();
+		input_name.off();
+		input_name.remove();
 
 		/// update elements:
 		opened_name_global = false;
 		opened_input_global = false;
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_name.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
-				updateName(global_var, $(this).val().trim());
-				$(global_container).find('.span_name_variable').text(global_var.name);
+			if (input_name.val().trim()) {
+				updateName(global_var, input_name.val().trim());
+				global_container.find('.span_name_variable').text(global_var.name);
+			} else {
+				global_container.find('.span_name_variable').text(global_var.name);
 			}
-			$(this).remove();
+			input_name.off();
+			input_name.remove();
 
 			/// update elements:
 			opened_name_global = false;
@@ -702,15 +791,17 @@ function enableNameUpdate (global_container) {
 		}
 		if(code == 27) {
 
-			$(global_container).find('.span_name_variable').text(global_var.name);
-
-			$(this).remove();
+			global_container.find('.span_name_variable').text(global_var.name);
+			input_name.off();
+			input_name.remove();
 
 			/// update elements:
 			opened_name_global = false;
 			opened_input_global = false;
 		}
 	});
+
+	input_name.select();
 	
 }
 
@@ -719,82 +810,109 @@ var opened_name_value_vector_global_ = false;
 var opened_input_value_vector_global_ = null;
 function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
 	if (opened_name_value_vector_global_) {
-		$(opened_input_value_vector_global_).focus();
+		opened_input_value_vector_global_.focus();
 		return;
 	}
+	parent_node = $(parent_node);
 	opened_name_value_vector_global_ = true;
 
-	$(parent_node).find('.span_value_variable').text('');
+	parent_node.find('.span_value_variable').text('');
+
+	var input_field;
 
 	if (global_var.type == Types.REAL) {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[index].toFixed(1) + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[index].toFixed(1) + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	} else {
-		$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
-			+ global_var.value[index] + "' />" ).insertBefore($(parent_node).find('.span_value_variable'));
+		input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"
+			+ global_var.value[index] + "' />" );
+		input_field.insertBefore(parent_node.find('.span_value_variable'));
 	}
 
-	$('.width-dynamic').on('input', function() {
-	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_value_vector_global_ = this;
-	    $(this).focus();
+	input_field.on('input', function() {
+	    var inputWidth = input_field.textWidth()+10;
+	    opened_input_value_vector_global_ = input_field;
+	    input_field.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
+	    var tmpStr = input_field.val();
+		input_field.val('');
+		input_field.val(tmpStr);
 
-	    $(this).css({
+	    input_field.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
-	$('.width-dynamic').focusout(function() {
+	input_field.focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
+		if (input_field.val().trim()) {
 			if (global_var.type == Types.REAL) {
-				global_var.value[index] = parseFloat($(this).val().trim());
+				global_var.value[index] = parseFloat(input_field.val().trim());
 
-				$(parent_node).find('.span_value_variable').text(global_var.value[index].toFixed(1));
+				parent_node.find('.span_value_variable').text(global_var.value[index].toFixed(1));
 			} else {
 
 				if (global_var.type == Types.INTEGER) {
-					global_var.value[index] = parseInt($(this).val().trim());
+					global_var.value[index] = parseInt(input_field.val().trim());
 				} else {
-					global_var.value[index] = $(this).val().trim();
+					global_var.value[index] = input_field.val().trim();
 				}
 
-				$(parent_node).find('.span_value_variable').text(global_var.value[index]);
+				parent_node.find('.span_value_variable').text(global_var.value[index]);
 
 			}
+		} else {
+			if (global_var.type == Types.REAL) {
+				parent_node.find('.span_value_variable').text(global_var.value[index].toFixed(1));
+			} else {
+				parent_node.find('.span_value_variable').text(global_var.value[index]);
+			}
+		}
+		if (global_var.type == Types.TEXT) {
+			global_var.value[index] = input_field.val();
+			parent_node.find('.span_value_variable').text(global_var.value[index]);
 		}
-		$(this).remove();
+		input_field.off();
+		input_field.remove();
 
 		/// update elements:
 		opened_name_value_vector_global_ = false;
 		opened_input_value_vector_global_ = false;
 	});
 
-	$('.width-dynamic').on('keydown', function(e) {
+	input_field.on('keydown', function(e) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
-			if ($(this).val().trim()) {
+			if (input_field.val().trim()) {
 				if (global_var.type == Types.REAL) {
-					global_var.value[index] = parseFloat($(this).val().trim());
+					global_var.value[index] = parseFloat(input_field.val().trim());
 
-					$(parent_node).find('.span_value_variable').text(global_var.value[index].toFixed(1));
+					parent_node.find('.span_value_variable').text(global_var.value[index].toFixed(1));
 				} else {
 
 					if (global_var.type == Types.INTEGER) {
-						global_var.value[index] = parseInt($(this).val().trim());
+						global_var.value[index] = parseInt(input_field.val().trim());
 					} else {
-						global_var.value[index] = $(this).val().trim();
+						global_var.value[index] = input_field.val().trim();
 					}
 
-					$(parent_node).find('.span_value_variable').text(global_var.value[index]);
+					parent_node.find('.span_value_variable').text(global_var.value[index]);
 
 				}
+			} else {
+				if (global_var.type == Types.REAL) {
+					parent_node.find('.span_value_variable').text(global_var.value[index].toFixed(1));
+				} else {
+					parent_node.find('.span_value_variable').text(global_var.value[index]);
+				}
 			}
-			$(this).remove();
+			if (global_var.type == Types.TEXT) {
+				global_var.value[index] = input_field.val();
+				parent_node.find('.span_value_variable').text(global_var.value[index]);
+			}
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_vector_global_ = false;
@@ -802,18 +920,20 @@ function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
 		}
 		if(code == 27) {
 			if (global_var.type == Types.REAL) {
-				$(parent_node).find('.span_value_variable').text(global_var.value[index].toFixed(1));
+				parent_node.find('.span_value_variable').text(global_var.value[index].toFixed(1));
 			} else {
-				$(parent_node).find('.span_value_variable').text(global_var.value[index]);
+				parent_node.find('.span_value_variable').text(global_var.value[index]);
 			}
-
-			$(this).remove();
+			input_field.off();
+			input_field.remove();
 
 			/// update elements:
 			opened_name_value_vector_global_ = false;
 			opened_input_value_vector_global_ = false;
 		}
 	});
+
+	input_field.select();
 }
 
 

js/visualUI/globals_sidebar.js

@@ -83,7 +83,7 @@ function updateInitialValues (global_var) {
 			global_var.value = [LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')];
 		}
 		if (global_var.dimensions == 2) {
-			global_var.value = [[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')],
+			global_var.value = [[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')], 
 									[LocalizedStrings.getUI('text_start'), LocalizedStrings.getUI('text_start')]];
 		}
 	}
@@ -230,12 +230,12 @@ function renderValues (global_var, global_container) {
 
 	if (global_var.dimensions == 0) {
 		if (global_var.type == Types.REAL) {
-			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value.toFixed(1)+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+			ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value.toFixed(1)+'</span>  </div> ';
 		} else {
 			if (global_var.type == Types.BOOLEAN) {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+global_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function boolean_simple_type"></i></div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable boolean_simple_type">'+global_var.value+'</span>  </div> ';
 			} else {
-				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value+'</span> <i class="icon small pencil alternate enable_edit_name_function simple_var"></i></div> ';
+				ret += '<div class="created_div_valor_var"><span class="span_value_variable simple_var">'+global_var.value+'</span>  </div> ';
 			}
 		}
 	} else {
@@ -256,7 +256,7 @@ function renderValues (global_var, global_container) {
 					}
 				}
 			}
-
+			
 			ret += '</tr>';
 			ret += '</table>';
 
@@ -270,19 +270,19 @@ function renderValues (global_var, global_container) {
     				ret += '<tr>';
     				for (var k = 0; k < global_var.columns; k++) {
     					ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k].toFixed(1)+'</span>'+'</td>';
-    				}
+    				} 
     				ret += '</tr>';
 				}
 			} else {
 				for (var l = 0; l < global_var.rows; l++) {
     				ret += '<tr>';
     				for (var k = 0; k < global_var.columns; k++) {
-    					if (global_var.type == Types.BOOLEAN) {
+    					if (global_var.type == Types.BOOLEAN) { 
     						ret += '<td><span class="span_value_variable boolean_matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k]+'</span></td>';
     					} else {
     						ret += '<td><span class="span_value_variable matrix_var" data-index="'+k+'" data-row="'+l+'">'+global_var.value[l][k]+'</span></td>';
     					}
-    				}
+    				} 
     				ret += '</tr>';
 				}
 			}
@@ -296,7 +296,7 @@ function renderValues (global_var, global_container) {
 			ret += '<div class="buttons_manage_columns"><i class="ui icon minus square outline remove_global_matrix_column"></i>'
 		    	+ ' <i class="ui icon plus square outline add_global_matrix_column"></i></div>';
 		}
-
+		
 	}
 
 	$( global_container ).find( ".div_valor_var" ).html('');
@@ -356,12 +356,15 @@ function renderValues (global_var, global_container) {
 	});
 	$( global_container ).find( ".div_valor_var" ).append(ret);
 
+
+	updateColumnsAndRowsText(global_container, global_var);
+
 }
 
 function addHandlers (global_container) {
-	var global_var = $(global_container).data('associatedOject');
+	var global_var = global_container.data('associatedOject'); 
 	// Manage constant option:
-	$( global_container ).find( ".alternate_constant" ).on('click', function(e){
+	global_container.find( ".alternate_constant" ).on('click', function(e){
 		toggleConstant(global_var);
 
 		$( this ).removeClass( "on off" );
@@ -372,13 +375,13 @@ function addHandlers (global_container) {
 		}
 	});
 
-	// Manage global name:
-	$( global_container ).find( ".enable_edit_name_parameter" ).on('click', function(e){
+	// Manage global name: 
+	global_container.find( ".enable_edit_name_parameter" ).on('click', function(e){
 		enableNameUpdate(global_container);
 	});
 
 	// Menu to change type:
-	$( global_container ).find('.ui.dropdown.global_type').dropdown({
+	global_container.find('.ui.dropdown.global_type').dropdown({
 	    onChange: function(value, text, $selectedItem) {
 	    	if ($($selectedItem).data('dimensions')) {
 	    		updateType(global_var, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
@@ -387,34 +390,54 @@ function addHandlers (global_container) {
 	    	}
 
 	    	renderValues(global_var, global_container);
+
 	    }
 	});
 
-	// Remove global:
-	$( global_container ).find( ".remove_global" ).on('click', function(e){
+	// Remove global: 
+	global_container.find( ".remove_global" ).on('click', function(e){
 		removeGlobal(global_var, global_container);
 	});
 
+	global_container
+	.on('dragstart', function(e) {
+		e.originalEvent.dataTransfer.setData("text",JSON.stringify({type:"var",content:global_var}));
+	})
+
 }
 
-function renderGlobal (global_var) {
+function updateColumnsAndRowsText (global_container, global_var) {
+	var prev = global_container.find('.text').text().split('[');
+	if (prev.length == 2) {
+		var ff = prev[0] + '[ ' + global_var.columns + ' ] ';
+		global_container.find('.text').empty();
+		global_container.find('.text').text(ff);
+	}
+	if (prev.length == 3) {
+		var ff = prev[0] + '[ ' + global_var.columns + ' ] [ ' + global_var.rows + ' ] ';
+		global_container.find('.text').empty();
+		global_container.find('.text').text(ff);
+	}
+}
 
-	var element = '<div class="ui label global_container"><div class="global_const">const: ';
+export function renderGlobal (global_var) {
 
-	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div><span class="span_name_variable enable_edit_name_parameter">'+global_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_parameter"></i>';
+	var element = '<div class="ui label global_container"><div class="global_const">const: ';
 
+	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div>';
+ 	
  	element += '<div class="ui dropdown global_type">';
 
   	if (global_var.dimensions > 0) {
   		element += '<div class="text">'+ i18n('ui:vector') + ':' + LocalizedStrings.getUI(global_var.type);
   		for (var i = 0; i < global_var.dimensions; i ++) {
-  			element += ' [ ] ';
+  			element += ' [ <span class="dimensions_'+i+'"></span> ] ';
   		}
   		element += '</div>';
   	} else {
   		element += '<div class="text">' + LocalizedStrings.getUI(global_var.type.toLowerCase()) + '</div>';
   	}
-	element += '<i class="dropdown icon"></i><div class="menu">';
+	element += '<div class="menu">';
 
 	for (var tm in Types) {
   		if (tm == Types.VOID.toUpperCase()) {
@@ -434,24 +457,32 @@ function renderGlobal (global_var) {
 		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
 		        + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
 	      	+  '</div>'
-	    	+ '</div>';
+	    	+ '</div>';	
   	}
 
-    element += '</div></div>  = ';
+    element += '</div></div> <div class="editing_name_var"> <span class="span_name_variable enable_edit_name_parameter">'+global_var.name+'</span> </div> <span class="character_equals"> = </span> ';
 
-	element += '<div class="ui div_valor_var">'+global_var.value+'</div>';
+	element += '<div class="ui div_valor_var">'+global_var.value+'</div>';    
 
 	element += ' <i class="red icon times remove_global"></i></div>';
 
 	var complete_element = $(element);
 
-	$(complete_element).data('associatedOject', global_var);
+	complete_element.data('associatedOject', global_var);
 
 	$('.list_globals').append(complete_element);
 
 	addHandlers(complete_element);
 
 	renderValues(global_var, complete_element);
+
+	if (global_var.dimensions == 1) {
+		complete_element.find('.dimensions_0').text(global_var.columns);
+	}
+	if (global_var.dimensions == 2) {
+		complete_element.find('.dimensions_0').text(global_var.columns);
+		complete_element.find('.dimensions_1').text(global_var.rows);
+	}
 }
 
 var opened_name_value_matrix_global_v = false;
@@ -594,7 +625,7 @@ function enableGlobalValueUpdate (global_var, parent_node) {
 					global_var.value = $(this).val().trim();
 				}
 				$(parent_node).find('.span_value_variable').text(global_var.value);
-
+				
 			}
 		}
 		$(this).remove();
@@ -649,36 +680,34 @@ var opened_name_global = false;
 var opened_input_global = null;
 function enableNameUpdate (global_container) {
 
-	var global_var = $(global_container).data('associatedOject');
+	var global_var = global_container.data('associatedOject'); 
 
 	if (opened_name_global) {
-		$(opened_input_global).focus();
+		opened_input_global.focus();
 		return;
 	}
 	opened_name_global = true;
 
-	$( global_container ).find('.span_name_variable').text('');
-	$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+global_var.name+"' />" ).insertBefore($(global_container).find('.span_name_variable'));
+	global_container.find('.span_name_variable').text('');
+	$( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+global_var.name+"' />" ).insertBefore(global_container.find('.span_name_variable'));
 
 	$('.width-dynamic').on('input', function() {
 	    var inputWidth = $(this).textWidth()+10;
-	    opened_input_global = this;
-	    $(this).focus();
+	    opened_input_global = $(this);
+	    opened_input_global.focus();
 
-	    var tmpStr = $(this).val();
-		$(this).val('');
-		$(this).val(tmpStr);
-
-	    $(this).css({
+	    opened_input_global.css({
 	        width: inputWidth
 	    })
 	}).trigger('input');
 
 	$('.width-dynamic').focusout(function() {
 		/// update array:
-		if ($(this).val().trim()) {
+		if ($(this).val().trim().length > 0) {
 			updateName(global_var, $(this).val().trim());
-			$(global_container).find('.span_name_variable').text(global_var.name);
+			global_container.find('.span_name_variable').text(global_var.name);
+		} else {
+			global_container.find('.span_name_variable').text(global_var.name);
 		}
 		$(this).remove();
 
@@ -692,7 +721,9 @@ function enableNameUpdate (global_container) {
 		if(code == 13) {
 			if ($(this).val().trim()) {
 				updateName(global_var, $(this).val().trim());
-				$(global_container).find('.span_name_variable').text(global_var.name);
+				global_container.find('.span_name_variable').text(global_var.name);
+			} else {
+				global_container.find('.span_name_variable').text(global_var.name);
 			}
 			$(this).remove();
 
@@ -702,7 +733,7 @@ function enableNameUpdate (global_container) {
 		}
 		if(code == 27) {
 
-			$(global_container).find('.span_name_variable').text(global_var.name);
+			global_container.find('.span_name_variable').text(global_var.name);
 
 			$(this).remove();
 
@@ -712,6 +743,8 @@ function enableNameUpdate (global_container) {
 		}
 	});
 
+	 $('.width-dynamic').select();
+	
 }
 
 
@@ -818,11 +851,11 @@ function enableGlobalVectorValueUpdate (global_var, index, parent_node) {
 
 
 $.fn.textWidth = function(text, font) {
-
+    
     if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
-
+    
     $.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));
-
+    
     return $.fn.textWidth.fakeEl.width();
 };
 

js/visualUI/ivprog_elements.js

@@ -1,8 +1,11 @@
+import * as VariableValueMenuManagement from './commands/variable_value_menu';
 import { Types } from './types';
 import WatchJS from 'melanke-watchjs';
+import * as AlgorithmManagement from './algorithm_sidebar';
 
 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", switchcase:"switchcase", functioncall:"functioncall", break:"break"});
+ repeatNtimes:"repeatNtimes", whiletrue:"whiletrue", dowhiletrue:"dowhiletrue", switch:"switch", switchcase:"switchcase", functioncall:"functioncall", break:"break",
+ return:"return"});
 
 export const ARITHMETIC_TYPES = Object.freeze({plus:"plus", minus:"minus", multiplication:"multiplication", division:"division", module:"module", none:"none"});
 
@@ -14,6 +17,8 @@ export const ARITHMETIC_COMPARISON = Object.freeze({greater_than:"greater_than",
 
 export const LOGIC_COMPARISON = Object.freeze({equals_to:"equals_to", not_equals_to:"not_equals_to", and:"and", or:"or"});
 
+export const SYSTEM_FUNCTIONS_CATEGORIES = Object.freeze({math:"math", text:"text", arrangement:"arrangement", conversion:"conversion"});
+
 export class Variable {
 
   constructor (type, name, value, dimensions = 0, is_constant = false, rows = 0, columns = 0) {
@@ -43,6 +48,19 @@ export class Function {
   }
 }
 
+export class SystemFunction {
+
+  constructor (identifier, return_type, return_dimensions, parameters_list, function_comment = null, category) {
+    this.type = COMMAND_TYPES.function;
+    this.identifier = identifier;
+    this.return_type = return_type;
+    this.return_dimensions = return_dimensions;
+    this.parameters_list = parameters_list;
+    this.function_comment = function_comment;
+    this.category = category;
+  }
+}
+
 export class Comment {
   
   constructor (comment_text) {
@@ -170,6 +188,14 @@ export class Switch {
   }
 }
 
+export class Return {
+
+ constructor (variable_value_menu) {
+    this.type = COMMAND_TYPES.return;
+    this.variable_value_menu = variable_value_menu;
+  } 
+}
+
 export class SwitchCase {
 
  constructor (variable_value_menu, commands_block = []) {
@@ -219,13 +245,15 @@ export class Program {
   addFunction (function_to_add) {
 
     WatchJS.watch(function_to_add.parameters_list, function(){
-      console.log("os parametros da função abaixo foram alterados:");
-      console.log(function_to_add);
+      AlgorithmManagement.renderAlgorithm();
     }, 1);
 
     WatchJS.watch(function_to_add.variables_list, function(){
-      console.log("as variáveis da função abaixo foram alteradas: ");
-      console.log(function_to_add);
+      AlgorithmManagement.renderAlgorithm();
+    }, 1);
+
+    WatchJS.watch(function_to_add, "name", function(){
+      AlgorithmManagement.renderAlgorithm();
     }, 1);
 
     this.functions.push(function_to_add);

js/visualUI/ivprog_elements_sidebar.js

@@ -0,0 +1,272 @@
+import * as VariableValueMenuManagement from './commands/variable_value_menu';
+import { Types } from './types';
+import WatchJS from 'melanke-watchjs';
+import * as AlgorithmManagement from './algorithm_sidebar';
+
+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", switchcase:"switchcase", functioncall:"functioncall", break:"break",
+ return:"return"});
+
+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 const SYSTEM_FUNCTIONS_CATEGORIES = Object.freeze({math:"math", text:"text", arrangement:"arrangement", conversion:"conversion"});
+
+export class Variable {
+
+  constructor (type, name, value, dimensions = 0, is_constant = false, rows = 0, columns = 0) {
+    this.type = type;
+    this.name = name;
+    this.value = value;
+    this.dimensions = dimensions;
+    this.is_constant = is_constant;
+    this.rows = rows;
+    this.columns = columns;
+  }
+}
+
+export class Function {
+
+  constructor (name, return_type = Types.VOID, return_dimensions = 0, parameters_list = [], is_main = false, is_hidden = false, variables_list = [], function_comment = null, commands = []) {
+    this.type = COMMAND_TYPES.function;
+    this.name = name;
+    this.return_type = return_type;
+    this.return_dimensions = return_dimensions;
+    this.parameters_list = parameters_list;
+    this.is_main = is_main;
+    this.is_hidden = is_hidden;
+    this.variables_list = variables_list;
+    this.function_comment = function_comment;
+    this.commands = commands;
+  }
+}
+
+export class SystemFunction {
+
+  constructor (identifier, return_type, return_dimensions, parameters_list, function_comment = null, category) {
+    this.type = COMMAND_TYPES.function;
+    this.identifier = identifier;
+    this.return_type = return_type;
+    this.return_dimensions = return_dimensions;
+    this.parameters_list = parameters_list;
+    this.function_comment = function_comment;
+    this.category = category;
+  }
+}
+
+export class Comment {
+  
+  constructor (comment_text) {
+    this.type = COMMAND_TYPES.comment;
+    this.comment_text = comment_text;
+  }
+}
+
+export class Break {
+  
+  constructor () {
+    this.type = COMMAND_TYPES.break;
+  }
+}
+
+export class Reader {
+  
+  constructor (variable_value_menu = new VariableValueMenu()) {
+    this.type = COMMAND_TYPES.reader;
+    this.variable_value_menu = variable_value_menu;
+  }
+}
+
+export class Writer {
+
+  constructor (content) {
+    this.type = COMMAND_TYPES.writer;
+    this.content = content;
+  }
+}
+
+export class Attribution {
+
+  constructor (variable, expression = []) {
+    this.type = COMMAND_TYPES.attribution;
+    this.variable = variable;
+    this.expression = expression;
+  }
+}
+
+export class ExpressionElement {
+
+  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 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 {
+
+  constructor (expression, commands_block, commands_else) {
+    this.type = COMMAND_TYPES.iftrue;
+    this.expression = expression;
+    this.commands_block = commands_block;
+    this.commands_else = commands_else;
+  }
+}
+
+export class RepeatNTimes {
+
+  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;
+    this.commands_block = commands_block;
+  }
+}
+
+export class WhileTrue {
+
+  constructor (expression, commands_block) {
+    this.type = COMMAND_TYPES.whiletrue;
+    this.expression = expression;
+    this.commands_block = commands_block;
+  }
+}
+
+export class DoWhileTrue {
+
+  constructor (expression, commands_block) {
+    this.type = COMMAND_TYPES.dowhiletrue;
+    this.expression = expression;
+    this.commands_block = commands_block;
+  }
+}
+
+export class Switch {
+
+  constructor (variable, cases = []) {
+    this.type = COMMAND_TYPES.switch;
+    this.variable = variable;
+    this.cases = cases;
+  }
+}
+
+export class Return {
+
+ constructor (variable_value_menu) {
+    this.type = COMMAND_TYPES.return;
+    this.variable_value_menu = variable_value_menu;
+  } 
+}
+
+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) {
+    this.type = COMMAND_TYPES.functioncall;
+    this.function_called = function_called;
+    this.parameters_list = parameters_list;
+  }
+}
+
+export class VariableValueMenu {
+  
+  constructor (variable_and_value = 7, content = null, row = null, column = null, include_constant = true) {
+    this.type = "var_value";
+    this.variable_and_value = variable_and_value;
+    this.content = content;
+    this.row = row;
+    this.column = column;
+    this.include_constant = include_constant;
+  }
+}
+
+export class FunctionCallMenu {
+  
+  constructor (function_called = null, parameters_list = []) {
+    this.type = "function_call";
+    this.function_called = function_called;
+    this.parameters_list = parameters_list;
+  }
+}
+
+export class Program {
+
+  constructor () {
+    this.functions = [];
+    this.globals = [];
+  }
+
+  addFunction (function_to_add) {
+
+    WatchJS.watch(function_to_add.parameters_list, function(){
+      AlgorithmManagement.renderAlgorithm();
+    }, 1);
+
+    WatchJS.watch(function_to_add.variables_list, function(){
+      AlgorithmManagement.renderAlgorithm();
+    }, 1);
+
+    WatchJS.watch(function_to_add, "name", function(){
+      AlgorithmManagement.renderAlgorithm();
+    }, 1);
+
+    this.functions.push(function_to_add);
+  }
+
+  addVariable (function_to_receive, variable) {
+    if (this.functions[function_to_receive].variable === null) {
+      this.functions[function_to_receive].variables_list = [];
+    }
+    this.functions[function_to_receive].variables_list.push(variable);
+  }
+
+  addGlobal (variable) {
+    this.globals.push(variable);
+  }
+}

js/visualUI/variables.js

@@ -77,13 +77,11 @@ function addHandlers (variable_obj, variable_container) {
 }
 
 
-export function renderVariable(function_container, new_var, function_obj) {
+export function renderVariable (function_container, new_var, function_obj) {
 
 	var element = '<div class="ui label variable_container">';
 
-	element += '<span class="span_name_variable enable_edit_name_variable">'+new_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_variable"></i>';
- 	
- 	element += '<div class="ui dropdown variable_type">';
+	element += '<div class="ui dropdown variable_type">';
 
   	if (new_var.dimensions > 0) {
   		element += '<div class="text">'+ LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(new_var.type.toLowerCase());
@@ -117,9 +115,11 @@ export function renderVariable(function_container, new_var, function_obj) {
 	    	+ '</div>';	
   	}
 
-    element += '</div></div>  = ';
+    element += '</div></div> ';
 
-	element += '<div class="ui div_valor_var">'+new_var.value+'</div>';    
+    element += '<span class="span_name_variable enable_edit_name_variable">'+new_var.name+'</span> <i class="icon small pencil alternate enable_edit_name_variable"></i>';
+
+	element += ' = <div class="ui div_valor_var">'+new_var.value+'</div>';    
 
 	element += ' <i class="red icon times remove_variable"></i></div>';
 

js/visualUI/visual.js

@@ -0,0 +1,76 @@
+import { Types } from './../ast/types';
+
+const tiposComandos = Object.freeze({comment:"comment", reader:"reader", writer:"writer"});
+
+export class Variavel {
+
+  constructor (tipo, nome, valor, dimensoes = 0, eh_constante = false, linhas = 0, colunas = 0) {
+    this.tipo = tipo;
+    this.nome = nome;
+    this.valor = valor;
+    this.dimensoes = dimensoes;
+    this.eh_constante = eh_constante;
+    this.linhas = linhas;
+    this.colunas = colunas;
+  }
+}
+
+export class Funcao {
+
+  constructor (nome, tipo_retorno = Types.VOID, dimensoes_retorno = 0, lista_parametros = null, eh_principal = false, esta_oculta = false, variaveis = [], comentario_funcao = null) {
+    this.nome = nome;
+    this.tipo_retorno = tipo_retorno;
+    this.dimensoes_retorno = dimensoes_retorno;
+    this.lista_parametros = lista_parametros;
+    this.eh_principal = eh_principal;
+    this.esta_oculta = esta_oculta;
+    this.variaveis = variaveis;
+    this.comentario_funcao = comentario_funcao;
+    this.comandos = [];
+  }
+}
+
+export class Comentario {
+  
+  constructor (texto_comentario) {
+    this.tipo = tiposComandos.comment;
+    this.texto_comentario = texto_comentario;
+  }
+}
+
+export class Comando {
+
+  constructor (tipo) {
+    this.tipo = tipo;
+  }
+} 
+
+export class Expressao {
+
+  constructor (conteudo) {
+    this.conteudo = conteudo;
+  }
+}
+
+
+export class Programa {
+  constructor () {
+    this.funcoes = [];
+    this.globais = [];
+  };
+
+  adicionarFuncao (funcao) {
+    this.funcoes.push(funcao);
+  }
+
+  adicionarVariavel(funcao, variavel) {
+    if (this.funcoes[funcao].variaveis === null) {
+      this.funcoes[funcao].variaveis = [];
+    }
+    this.funcoes[funcao].variaveis.push(variavel);
+  }
+
+  adicionarGlobal (variavel) {
+    this.globais.push(variavel);
+  }
+}

observacoes

@@ -1,6 +1,6 @@
 
 
-botar assinatura das funções funcao(tipo,tipo,tipo)
+OK botar assinatura das funções funcao(tipo,tipo,tipo)
 
 blocos com funções específicas
 
@@ -12,8 +12,9 @@ clique pega clique solta
 
 tornar tipo como botão e não dropdown
 
-arraste de globais
+(-) arraste de globais e solta uma atribuição
 
 comentário descritivo sobre a assinatura da função
 
+quando tiver retorno, atribuicao. Quando vazio, chamada de função
 

package-lock.json

@@ -3401,8 +3401,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -3413,8 +3412,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3531,8 +3529,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3544,7 +3541,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3574,7 +3570,6 @@
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3593,7 +3588,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3687,7 +3681,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3809,7 +3802,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4132,7 +4124,7 @@
       "dependencies": {
         "async": {
           "version": "1.5.2",
-          "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
           "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
         },
         "handlebars": {

package.json

@@ -46,10 +46,10 @@
   },
   "dependencies": {
     "antlr4": "^4.7.1",
+    "decimal.js": "^10.0.1",
     "jquery": "^3.3.1",
+    "line-i18n": "git+https://git.lcalion.com/LInE/line-i18n.git",
     "melanke-watchjs": "^1.5.0",
-    "server": "^1.0.18",
-    "decimal.js": "^10.0.1",
-    "line-i18n": "git+https://git.lcalion.com/LInE/line-i18n.git"
+    "server": "^1.0.18"
   }
 }

webpack.config.js

@@ -3,7 +3,7 @@ var webpack = require('webpack');
 module.exports = {
     entry: './js/main-sidebar.js',
     mode: 'development',
-    watch: false,
+    watch: true,
     output: {
         path: path.resolve(__dirname, 'build'),
         filename: 'ivprog.bundle.js',