Parte de gerenciamento de variáveis nos comandos quase pronta

css/ivprog-visual-1.0.css

@@ -111,7 +111,7 @@ body {
 	min-width: 50px;
 }
 
-.function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return {
+.function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div {
 	display: inline;
 }
 

i18n/en/ui.json

@@ -1,5 +1,6 @@
 {
   "function": "function",
+  "btn_clear": "Clear",
   "btn_function": "Function",
   "start": "start",
   "void": "void",
@@ -31,5 +32,6 @@
   "text_whiletrue": "While true",
   "text_dowhiletrue": "Do while true",
   "text_switch": "Switch",
-  "text_functioncall": "Function call"
+  "text_functioncall": "Function call",
+  "text_value": "Value"
 }

i18n/es/ui.json

@@ -1,5 +1,6 @@
 {
   "function": "function",
+  "btn_clear": "Clear",
   "btn_function": "Function",
   "start": "start",
   "void": "void",
@@ -31,5 +32,6 @@
   "text_whiletrue": "While true",
   "text_dowhiletrue": "Do while true",
   "text_switch": "Switch",
-  "text_functioncall": "Function call"
+  "text_functioncall": "Function call",
+  "text_value": "Value"
 }

i18n/pt/ui.json

@@ -1,5 +1,6 @@
 {
   "function": "funcao",
+  "btn_clear": "Limpar",
   "btn_function": "Função",
   "start": "inicio",
   "void": "vazio",
@@ -32,5 +33,6 @@
   "text_whiletrue": "Enquanto verdadeiro",
   "text_dowhiletrue": "Faça enquanto verdadeiro",
   "text_switch": "Escolha",
-  "text_functioncall": "Chamada de função"
+  "text_functioncall": "Chamada de função",
+  "text_value": "Valor"
 }

js/visualUI/commands.js

@@ -14,6 +14,7 @@ import * as WhiletruesManagement from './commands/whiletrue';
 import * as DowhiletruesManagement from './commands/dowhiletrue';
 import * as SwitchesManagement from './commands/switch';
 import * as FunctioncallsManagement from './commands/functioncall';
+import * as VariableValueMenuManagement from './commands/variable_value_menu';
 
 var has_element_created_draged = false;
 var which_element_is_draged = null;
@@ -78,7 +79,7 @@ export function createFloatingCommand (function_obj, function_container, command
 }
 
 // before_after_inside: 1 -> before, 2 -> after, 3 -> inside
-function renderCommand (command, element_reference, before_after_inside) {
+function renderCommand (command, element_reference, before_after_inside, function_obj) {
 	var createdElement;
 	switch (command.type) {
 		case Models.COMMAND_TYPES.comment:
@@ -86,7 +87,7 @@ function renderCommand (command, element_reference, before_after_inside) {
 			break;
 
 		case Models.COMMAND_TYPES.reader:
-			createdElement = ReadersManagement.renderCommand(command);
+			createdElement = ReadersManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.writer:
@@ -145,7 +146,7 @@ function genericCreateCommand (command_type) {
 			return new Models.Comment(null);
 
 		case Models.COMMAND_TYPES.reader:
-			return new Models.Reader(null, null, null);
+			return new Models.Reader(null, null, null, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all));
 
 		case Models.COMMAND_TYPES.writer:
 			return new Models.Writer(null);
@@ -226,268 +227,39 @@ function manageCommand (function_obj, function_container, event, command_type) {
 
 				$(el).data('fun').commands.push(new_cmd);
 
-				renderCommand(new_cmd, $(function_container).find('.commands_list_div'), 3);
+				renderCommand(new_cmd, $(function_container).find('.commands_list_div'), 3, function_obj);
 			
 		} else { // Entra nesse else, caso já existam outros comandos no bloco:
 
 			findNearbyCommandToAddInFunctionScope(el, event, $(function_container).find('.commands_list_div'), function_obj, command_type);
 		}
-		return;
-
-	} else { // Se entrar nesse bloco 'else', quer dizer que o usuário não soltou o elemento necessariamente na div específica da função
-			 // portanto, devemos procurar nos elementos DOM, em que lugar da função, ele soltou o comando
-
-		/*var hier = $(el).parentsUntil(".all_functions");
-		for (i = 0; i < hier.length; i++) {
-			if ($(hier[i]).data('fun') == function_to_add) {
-
-				programa.funcoes[function_to_add].comandos.push(createElementGenericFunction());
-
-				break;
-			}
-		}*/
-
-		//findPositionAndInsertCommand(el, event);
-		var caminho = findPositionAndPathToElementTarget(el, event);
-
-		console.log("soltou sobre o seguinte elemento: ");
-
-		console.log(caminho);
-
-		console.log("soltou sobre o seguinte DOM: ");
-
-		console.log(el);
-
-		// se for 1, então está no nível do corpo da função:
-		if (caminho.length == 1) {
-
-			console.log("o caminho é de tamanho 1 e o objeto é o seguinte: " + caminho[0]);
-			console.log(programa.funcoes[function_to_add].comandos[caminho[0]]);
-
-			// se for do tipo true ou false, temos que determinar se soltou no if ou no else: 
-			if (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.iftrue) {
-
-				if ($(el).data('if')) {
-
-					if ((programa.funcoes[function_to_add].comandos[caminho[0]].commands_block == null) 
-						|| (programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.length == 0)) {
-
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block = [];
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
-
-					} else {
-
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
-
-					}
-				} else if ($(el).data('else')) {
-
-					if ((programa.funcoes[function_to_add].comandos[caminho[0]].commands_else == null) 
-						|| (programa.funcoes[function_to_add].comandos[caminho[0]].commands_else.length == 0)) {
-
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_else = [];
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_else.push(createElementGenericFunction());
-
-					} else {
-
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_else.push(createElementGenericFunction());
-
-					}
-				} else {
-					console.log("soltou dentro do if, fora dos divs corretos... VERIFICAR QUAL ESTÁ MAIS PRÓXIMO... O IF OU O ELSE  --- NNN11");
-					discoveryIfOrElse(el, event);
-				}
-
-			} else {
-
-				if ((programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.repeatNtimes)
-					|| (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.whiletrue) 
-					|| (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.dowhiletrue) 
-					|| (programa.funcoes[function_to_add].comandos[caminho[0]].tipo == tiposComandos.switch) ) {
-					
-					if ((programa.funcoes[function_to_add].comandos[caminho[0]].commands_block == null) 
-						|| (programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.length == 0)) {
-
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block = [];
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
-
-					} else {
-
-						programa.funcoes[function_to_add].comandos[caminho[0]].commands_block.push(createElementGenericFunction());
-
-					}
-				} else {
-				
-					var result = getBeforeOrAfterOrEndAllocate(el, event);
-					if (result == true) {
-						console.log("adicionando ANTES");
-						programa.funcoes[function_to_add].comandos.splice(caminho[0], 0, createElementGenericFunction());
-					} else {
-						console.log("adicionando DEPOIS");
-						programa.funcoes[function_to_add].comandos.splice(caminho[0] + 1, 0, createElementGenericFunction());
-					}
-				}
-			}
-
-			
-
-		} else { // caso seja mais de um, o caminho, então, precisamos percorrer até achar: 
-
-			// CONTINUAR DAQUI: 
-			console.log("ACHO QUE É A SITUAÇÃO DE BLOCO INTERNO");
-			console.log("SOLTOU NO ELEMENTO A SEGUIR: ");
-			console.log(el.relatedObj);
-			console.log("PAI DO ELEMENTO QUE ELA SOLTOU: ");
-			console.log(el.parentNode.relatedObj);
-			//
-
-			if ((el.parentNode.relatedObj.tipo == tiposComandos.iftrue)) {
-
-				if ($(el.parentNode).data('if') || $(el).data('if')) {
-
-					if ((el.parentNode.relatedObj.commands_block == null) 
-						|| (el.parentNode.relatedObj.commands_block.length == 0)) {
-
-						el.parentNode.relatedObj.commands_block = [];
-						el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
-
-					} else {
-
-						if ($(el).data('if')) {
-							// Descobrir qual o elemento mais próximo de onde ele soltou o comando recém criado:
-							console.log("SITUAÇÃO TRATADA NO K1!");
-							getNearbyIndexOfElementOnClick(el, event);
-
-						} else {
-							if (getBeforeOrAfterOrEndAllocate(el, event)) {
-								console.log("K1 ANTECAO! SOLTOU ANTES DO ELEMENTO ALVO");
-
-								el.parentNode.relatedObj.commands_block.splice($(el).data('index'), 0, createElementGenericFunction());
-							} else {
-								console.log("K1 ANTECAO! SOLTOU DEPOIS DO ELEMENTO ALVO");
-
-								el.parentNode.relatedObj.commands_block.splice($(el).data('index') + 1, 0, createElementGenericFunction());
-							}
-						}
-
-						//el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
-
-					}
-				} else if ($(el.parentNode).data('else') || $(el).data('else')) {
-
-					if ((el.parentNode.relatedObj.commands_else == null) 
-						|| (el.parentNode.relatedObj.commands_else.length == 0)) {
-
-						el.parentNode.relatedObj.commands_else = [];
-						el.parentNode.relatedObj.commands_else.push(createElementGenericFunction());
-
-					} else {
-
-						if ($(el).data('else')) {
-							// Descobrir qual o elemento mais próximo de onde ele soltou o comando recém criado:
-							console.log("SITUAÇÃO TRATADA NO K2!");
-							getNearbyIndexOfElementOnClick(el, event);
-
-						} else {
-
-							if (getBeforeOrAfterOrEndAllocate(el, event)) {
-								console.log("K2 ANTECAO! SOLTOU ANTES DO ELEMENTO ALVO");
-
-								el.parentNode.relatedObj.commands_else.splice($(el).data('index'), 0, createElementGenericFunction());
-
-							} else {
-								console.log("K2 ANTECAO! SOLTOU DEPOIS DO ELEMENTO ALVO");
-
-								el.parentNode.relatedObj.commands_else.splice($(el).data('index') + 1, 0, createElementGenericFunction());
-							}
-						}
-
-						//el.parentNode.relatedObj.commands_else.push(createElementGenericFunction());
-
-					}
-				} else {
-					console.log("soltou dentro do if, fora dos divs corretos... VERIFICAR QUAL ESTÁ MAIS PRÓXIMO... O IF OU O ELSE  --- NNN22");
-					discoveryIfOrElse(el, event);
-				}
-
-			} else {
-				console.log("COMEÇAR A TRATAR!...");
-
-				if ((el.parentNode.relatedObj.tipo == tiposComandos.repeatNtimes)
-					|| (el.parentNode.relatedObj.tipo == tiposComandos.whiletrue) 
-					|| (el.parentNode.relatedObj.tipo == tiposComandos.dowhiletrue) 
-					|| (el.parentNode.relatedObj.tipo == tiposComandos.switch) 
-					|| (el.parentNode.relatedObj.tipo == tiposComandos.iftrue)) {
-
-
-					if ((el.parentNode.relatedObj.commands_block == null) 
-						|| (el.parentNode.relatedObj.commands_block.length == 0)) {
-					
-						el.parentNode.relatedObj.commands_block = [];
-						el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
-
-					} else {
-
-						if (typeof $(el).data('subblock') !== 'undefined') {
-							
-							console.log("SITUAÇÃO TRATADA NO K3!");
-
-							getNearbyIndexOfElementOnClick(el, event);
-
-						} else {
-							if (getBeforeOrAfterOrEndAllocate(el, event)) {
-								console.log("K3 ANTECAO! SOLTOU ANTES DO ELEMENTO ALVO");
-
-								el.parentNode.relatedObj.commands_block.splice($(el).data('index'), 0, createElementGenericFunction());
-							} else {
-								console.log("K3 ANTECAO! SOLTOU DEPOIS DO ELEMENTO ALVO");
-
-								el.parentNode.relatedObj.commands_block.splice($(el).data('index') + 1, 0, createElementGenericFunction());
-							}
-						}
-
-						//el.parentNode.relatedObj.commands_block.push(createElementGenericFunction());
-					}
-
-
-				} else {
-					console.log("AGORA SIM! SITUAÇÃO K4!");
-					console.log("VOU ADICIONAR NO SEGINTE ELEMENTO: ");
-					console.log(el.parentNode.parentNode.relatedObj);
-
-					if (getBeforeOrAfterOrEndAllocate(el.parentNode, event)) {
-						el.parentNode.parentNode.relatedObj.commands_block.splice($(el.parentNode).data('index'), 0, createElementGenericFunction());
-					} else {
-						el.parentNode.parentNode.relatedObj.commands_block.splice($(el.parentNode).data('index') + 1, 0, createElementGenericFunction());
-					}
-				}
 
+	} else {
+		console.log("soltou em um comando");
+		// descobrir em qual comando ele soltou: 
+		var hier_find = $(el).parentsUntil(".commands_list_div");
+		var hierarquia_bottom_up = [];
+		if (typeof $(el).data('command') !== 'undefined') {
+			hierarquia_bottom_up.push($(el).data('command'));
+		}
+		for (var i = 0; i < hier_find.length; i++) {
+			if (typeof $(hier_find[i]).data('command') !== 'undefined') {
+				hierarquia_bottom_up.push($(hier_find[i]).data('command'));
 			}
-			
-
-			/*console.log("elemento superior: ");
-			console.log(programa.funcoes[function_to_add].comandos[caminho[0]]);
-			console.log("elemento específico: 
-			console.log(findElementByPath(caminho));*/
-
 		}
-
+		console.log("comando em que soltou: ");
+		console.log(hierarquia_bottom_up[0]);
+		console.log("hierarquia de baixo para cima na árvore, de onde ele soltou: ");
+		for (var i = 0; i < hierarquia_bottom_up.length; i++) {
+			console.log(hierarquia_bottom_up[i]);
+		}
 	}
-
-
-	//console.log("onde soltou:");
-	//console.log(el);
-
 	
 	has_element_created_draged = false;
 	which_element_is_draged = null;
-	function_to_add = -1;
-
-	renderAlgorithm();
-
 }
 
-function findNearbyCommandToAddInFunctionScope(el, event, node_list_commands, function_obj, command_type) {
+function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, function_obj, command_type) {
 
 	var all_sub = $(node_list_commands).find('div');
 
@@ -509,43 +281,25 @@ function findNearbyCommandToAddInFunctionScope(el, event, node_list_commands, fu
 		}
 	}
 
-	borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
+	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
 	
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
-		function_obj.commands.push(genericCreateCommand(command_type));
+		
+		var recentComand = genericCreateCommand(command_type);
+		function_obj.commands.push(recentComand);
+		//
+		renderCommand(recentComand, node_list_commands, 3, function_obj);
 	} else {
-		function_obj.commands.splice($(elemento_menor_distancia).data('index'), 0, genericCreateCommand(command_type));
-	}
-}
 
-function findPositionAndPathToElementTarget(el, event) {
+		var recentComand = genericCreateCommand(command_type);
 
-	var full_path = [];
-	var m;
+		var index = function_obj.commands.indexOf($(elemento_menor_distancia).data('command'));
 
-	if (typeof $(el).data('fullpath') !== 'undefined') {
-		m = $(el).data('fullpath');
-	} else {
-		
-		var hier = $(el).parentsUntil(".all_functions");
-		for (var i = 0; i < hier.length; i++) {
-			if (typeof $(hier[i]).data('fullpath') !== 'undefined') {
-				m = $(hier[i]).data('fullpath');
-				break;
-			}
+		if (index > -1) {
+		    function_obj.commands.splice(index, 0, recentComand);
 		}
 
+		renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
 	}
-
-	if (isNaN(m)) {
-		full_path = m.split(',');
-		/*for (i = 0; i < full_path.length; i++) {
-			full_path[i] = parseInt(full_path[i]);
-		}*/
-		return full_path;
-	} else {
-		return [m];
-	}
-
-}
+}

js/visualUI/commands/reader.js

@@ -4,16 +4,20 @@ 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';
 
 export function createFloatingCommand () {
 	return $('<div class="ui reader created_element"> <i class="ui icon small download"></i> <span> '+LocalizedStrings.getUI('text_command_read')+' var </span></div>');
 }
 
-export function renderCommand (command) {
-	var ret = '<div class="ui reader"> <i class="ui icon small download command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_read')+' ( </span><span class="close_parentheses">)</span> </div>';
+export function renderCommand (command, function_obj) {
+	var ret = '<div class="ui reader"> <i class="ui icon small download command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_read')+' ( </span> <div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
 	
 	var el = $(ret);
 	$(el).data('command', command);
+
+	VariableValueMenu.renderMenu(command.variable_value_menu, $(el).find('.var_value_menu_div'), function_obj);
+
 	return el;
 }
 

js/visualUI/commands/variable_value_menu.js

@@ -0,0 +1,181 @@
+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';
+
+export const VAR_OR_VALUE_TYPES = Object.freeze({only_variable: 1, only_value: 2, only_function: 3, variable_and_function: 4, variable_and_value_opt: 5,
+	value_and_function: 6, all: 7});
+
+export function renderMenu (ref_object, dom_object, function_obj) {
+
+	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+
+	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) || (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')+'</div>';
+	}
+	
+	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_variable) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function) 
+		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_value_opt) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
+		
+		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('variable');
+		menu_var_or_value += '<div class="menu menu_only_vars">';
+
+		menu_var_or_value += '</div></div>';
+	}
+
+
+	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_value) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_value_opt) 
+		|| (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all)) {
+
+		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_value+'">'+LocalizedStrings.getUI('text_value')+'</div>';
+	}
+
+    menu_var_or_value += '</div></div>';
+
+    menu_var_or_value = $(menu_var_or_value);
+
+    $(dom_object).append(menu_var_or_value);
+
+    addHandlers(ref_object, dom_object, menu_var_or_value, function_obj);
+
+    addVariablesToMenu(function_obj, menu_var_or_value);
+}
+
+function addVariablesToMenu (function_obj, menu_var_or_value) {
+
+	var sub_menu = $(menu_var_or_value).find('.menu_only_vars');
+	$(sub_menu).text('');
+
+	if (window.program_obj.globals) {
+		for (var i = 0; i < window.program_obj.globals.length; i++) {
+			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + window.program_obj.globals[i].name + ' </div>');
+			$(temp).data('variable_reference', window.program_obj.globals[i]);
+			$(sub_menu).append(temp);
+		}
+	}
+
+	if (function_obj.parameters_list) {
+		for (var i = 0; i < function_obj.parameters_list.length; i++) {
+			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.parameters_list[i].name + ' </div>');
+			$(temp).data('variable_reference', function_obj.parameters_list[i]);
+			$(sub_menu).append(temp);
+		}
+	}
+
+	if (function_obj.variables_list) {
+		for (var i = 0; i < function_obj.variables_list.length; i++) {
+			var temp = $('<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_variable+'">' + function_obj.variables_list[i].name + ' </div>');
+			$(temp).data('variable_reference', function_obj.variables_list[i]);
+			$(sub_menu).append(temp);
+		}
+	}
+
+}
+
+function addHandlers (ref_object, dom_object, menu_var_or_value, function_obj) {
+
+	$(menu_var_or_value).dropdown({
+	  onChange: function(value, text, $selectedItem) {
+	  	$(dom_object).find('.var_name').remove();
+
+	     switch ($($selectedItem).data('option')) {
+	     	case VAR_OR_VALUE_TYPES.only_function:
+	     		console.log("foi função");
+	     		break;
+
+	     	case VAR_OR_VALUE_TYPES.only_value:
+	     		openInputToValue(ref_object, dom_object, menu_var_or_value, function_obj);
+	     		break;
+
+	     	case VAR_OR_VALUE_TYPES.only_variable:
+	     		openInputToVariable(ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('variable_reference'));
+	     		break;
+	     }
+      }
+    });
+}
+
+function openInputToVariable(ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
+
+	$(menu_var_or_value).find('.text').text(' ');
+	$(dom_object).find('.menu_var_or_value_dom').remove();
+
+	var variable_render = '<div class="variable_rendered"> <span class="var_name">'+variable_selected.name+'</span>';
+
+	if (variable_selected.dimensions == 1) {
+		variable_render += ' <span>[ </span> <div class="column_container"></div> <span> ]</span>';
+	}
+	if (variable_selected.dimensions == 2) {
+		variable_render += ' <span>[ </span> <div class="row_container"></div> <span> ]</span> ';
+		variable_render += ' <span>[ </span> <div class="column_container"></div> <span> ]</span>';
+	}
+
+
+	variable_render += '</div>';
+
+	variable_render = $(variable_render);
+
+	$(dom_object).append(variable_render);
+
+
+	if (variable_selected.dimensions == 1) {
+		var nova_var_menu = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all);
+		renderMenu(nova_var_menu, $(variable_render).find('.column_container'), function_obj);
+	}
+	if (variable_selected.dimensions == 2) {
+		var nova_var_menu_row = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all);
+		renderMenu(nova_var_menu_row, $(variable_render).find('.row_container'), function_obj);
+
+		var nova_var_menu_column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all);
+		renderMenu(nova_var_menu_column, $(variable_render).find('.column_container'), 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>';
+	context_menu += '</div></div>';
+
+	context_menu = $(context_menu);
+
+	$( context_menu ).insertAfter( $(dom_object).find('.variable_rendered') );
+
+	$(context_menu).dropdown({
+		onChange: function(value, text, $selectedItem) {
+	     if ($($selectedItem).data('clear')) {
+	     	$(dom_object).text('');
+	     	renderMenu(ref_object, dom_object, function_obj);
+	     }
+      }
+	});
+}
+
+
+function openInputToValue (ref_object, dom_object, menu_var_or_value, function_obj) {
+	$(menu_var_or_value).find('.text').text(' ');
+	var field = $('<input type="text"/>');
+	$( field ).insertBefore($(dom_object).find('.menu_var_or_value_dom'));
+	field.focus();
+
+	$(dom_object).find('.menu_var_or_value_dom').remove();
+
+	var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+	context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+	context_menu += '</div></div>';
+
+	context_menu = $(context_menu);
+
+	$( context_menu ).insertAfter( field );
+
+	$(context_menu).dropdown({
+		onChange: function(value, text, $selectedItem) {
+	     if ($($selectedItem).data('clear')) {
+	     	$(dom_object).text('');
+	     	renderMenu(ref_object, dom_object, function_obj);
+	     }
+      }
+	});
+}

js/visualUI/functions.js

@@ -47,7 +47,7 @@ function removeFunction (function_obj) {
   var index = program.functions.indexOf(function_obj);
   if (index > -1) {
     program.functions.splice(index, 1);
-  }    
+  }
 }
 
 function minimizeFunction (function_obj) {

js/visualUI/ivprog_elements.js

@@ -42,11 +42,12 @@ export class Comment {
 
 export class Reader {
   
-  constructor (variable = null, row = null, column = null) {
+  constructor (variable = null, row = null, column = null, variable_value_menu = null) {
     this.type = COMMAND_TYPES.reader;
     this.variable = variable;
     this.row = row;
     this.column = column;
+    this.variable_value_menu = variable_value_menu;
   }
 }
 
@@ -125,6 +126,16 @@ export class FunctionCall {
   }
 }
 
+export class VariableValueMenu {
+  
+  constructor (variable_and_value = 7, content = null, row = null, column = null) {
+    this.variable_and_value = variable_and_value;
+    this.content = content;
+    this.row = row;
+    this.column = column;
+  }
+}
+
 export class Program {
 
   constructor () {

webpack.config.js

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