Corrigindo alguns bugs

css/ivprog-visual-1.0.css

@@ -806,4 +806,23 @@ div.ui.checkbox.transition.visible {
 
 .ui.iftrue, .ui.repeatNtimes, .ui.whiletrue, .ui.dowhiletrue, .ui.switch {
     background: #787fe721;
+}
+.ui.popup.invalid-identifier {
+	background: #ff3232;
+    color: white;
+    font-weight: bold;
+    border: 1px solid black;
+}
+.ui.popup.invalid-identifier:before {
+	background: #ff3232;
+	border-right: 1px solid black;
+    border-bottom: 1px solid black;
+}
+.ui.popup.invalid-identifier i.ui.icon.inverted.exclamation.triangle.yellow {
+	margin-left: -.5em;
+    margin-right: .4em;
+}
+.ui.repeatNtimes.command_container .ui.block_commands, 
+.ui.whiletrue.command_container .ui.block_commands {
+	margin-top: .8em;
 }

i18n/en/ui.json

@@ -44,7 +44,7 @@
   "text_code_switch": "switch",
   "text_code_case": "case",
   "text_logic_expression": "Logic Expression",
-  "text_arithmetic_expression": "Arithmetic Expression",
+  "text_arithmetic_expression": "Relational Expression",
   "text_iftrue": "If true then",
   "text_receives": "receives",
   "text_repeatNtimes": "Repeat N times",
@@ -94,9 +94,12 @@
   "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",
+  "expression_menu_select": "Construct any logical condition",
   "math": "Mathematic",
   "text_t": "Text",
+  "inform_valid_name": "Inform a valid name!",
+  "inform_valid_content": "Enter some content!",
+  "inform_valid_expression": "Construct the logical condition!",
   "arrangement": "Arrangement",
   "conversion": "Conversion",
   "$sin": "sin",

i18n/es/ui.json

@@ -46,7 +46,7 @@
   "text_code_switch": "switch",
   "text_code_case": "case",
   "text_logic_expression": "Logic Expression",
-  "text_arithmetic_expression": "Arithmetic Expression",
+  "text_arithmetic_expression": "Relational Expression",
   "text_iftrue": "If true then",
   "text_repeatNtimes": "Repeat N times",
   "text_receives": "receives",
@@ -94,13 +94,16 @@
   "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",
+  "expression_menu_select": "Construct any logical condition",
   "$sin": "sen",
   "math": "Mathematic",
   "text": "Text",
   "arrangement": "Arrangement",
   "conversion": "Conversion",
   "math": "Mathematic",
+  "inform_valid_name": "Inform a valid name!",
+  "inform_valid_content": "Enter some content!",
+  "inform_valid_expression": "Construct the logical condition!",
   "text_t": "Text",
   "arrangement": "Arrangement",
   "conversion": "Conversion",

i18n/pt/ui.json

@@ -52,7 +52,7 @@
   "text_code_switch": "escolha",
   "text_code_case": "caso",
   "text_logic_expression": "Expressão Lógica",
-  "text_arithmetic_expression": "Expressão Aritmética",
+  "text_arithmetic_expression": "Expressão Relacional",
   "text_iftrue": "Se verdadeiro então",
   "text_repeatNtimes": "Repita N vezes",
   "text_receives": "recebe",
@@ -100,10 +100,13 @@
   "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",
+  "expression_menu_select": "Construir uma expressão lógica",
   "$sin": "sen",
   "math": "Matematica",
   "text_t": "Texto",
+  "inform_valid_name": "Informe um nome válido!",
+  "inform_valid_content": "Informe o conteúdo!",
+  "inform_valid_expression": "Construa uma expressão lógica!",
   "arrangement": "Arranjo",
   "conversion": "Conversao",
   "$sin": "seno",

js/visualUI/algorithm.js

@@ -16,8 +16,6 @@ import { LanguageService } from '../services/languageService';
 var block_render = false;
 
 export function renderAlgorithm () {
-	console.log('rendering algorithm...');
-
 	if (block_render) {
 		return;
 	}

js/visualUI/code_generator.js

@@ -5,6 +5,7 @@ import { LocalizedStrings } from './../services/localizedStringsService';
 import * as GlobalsManagement from './globals';
 import * as VariablesManagement from './variables';
 import * as CommandsManagement from './commands';
+import * as Utils from './utils';
 
 export function generate () {
 
@@ -164,7 +165,7 @@ function returnsCode (command_obj, indentation) {
 
 	if (command_obj.variable_value_menu) {
 		try {
-			ret += ' ' + variableValueMenuCode(command_obj.variable_value_menu);
+			ret += ' ' + variableValueMenuCode(command_obj.variable_value_menu, true);
 		} catch(err) {}
 	}
 
@@ -314,6 +315,10 @@ function iftruesCode (command_obj, indentation) {
 
 	ret += LocalizedStrings.getUI('text_if');
 
+	if (!command_obj.expression.expression) {
+		Utils.renderErrorMessage(command_obj.expression.dom_object, LocalizedStrings.getUI('inform_valid_expression'));
+	}
+
 	switch (command_obj.expression.expression.type) {
 		case Models.EXPRESSION_TYPES.exp_logic:
 			ret += logicExpressionCode(command_obj.expression.expression);
@@ -377,6 +382,10 @@ function doWhilesCode (command_obj, indentation) {
 
 	ret += '} ' + LocalizedStrings.getUI('text_code_while');
 
+	if (!command_obj.expression.expression) {
+		Utils.renderErrorMessage(command_obj.expression.dom_object, LocalizedStrings.getUI('inform_valid_expression'));
+	}
+
 	switch (command_obj.expression.expression.type) {
 		case Models.EXPRESSION_TYPES.exp_logic:
 			ret += logicExpressionCode(command_obj.expression.expression);
@@ -399,6 +408,10 @@ function whiletruesCode (command_obj, indentation) {
 
 	ret += LocalizedStrings.getUI('text_code_while');
 
+	if (!command_obj.expression.expression) {
+		Utils.renderErrorMessage(command_obj.expression.dom_object, LocalizedStrings.getUI('inform_valid_expression'));
+	}
+
 	switch (command_obj.expression.expression.type) {
 		case Models.EXPRESSION_TYPES.exp_logic:
 			ret += logicExpressionCode(command_obj.expression.expression);
@@ -608,45 +621,53 @@ function readersCode (command_obj, indentation) {
 	return ret;
 }
 
-function variableValueMenuCode (variable_obj) {
+function variableValueMenuCode (variable_obj, is_return = false) {
 	var ret = '';
-	if (variable_obj.function_called) {
+	try {
+		if (variable_obj.function_called) {
 
-		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.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++) {
-				ret += variableValueMenuCode(variable_obj.parameters_list[i]);
-				if ((i + 1) < variable_obj.parameters_list.length) {
-					ret += ', ';
+			if (variable_obj.parameters_list) {
+				for (var i = 0; i < variable_obj.parameters_list.length; i++) {
+					ret += variableValueMenuCode(variable_obj.parameters_list[i]);
+					if ((i + 1) < variable_obj.parameters_list.length) {
+						ret += ', ';
+					}
 				}
 			}
-		}
 
-		ret += ' )';
-	} else if (variable_obj.content.type) {
+			ret += ' )';
+		} else if (variable_obj.content.type) {
 
-		ret += variable_obj.content.name;
+			ret += variable_obj.content.name;
 
-		if (variable_obj.content.dimensions == 1 && variable_obj.dimensions != 1) {
-			ret += ' [ ' + variableValueMenuCode(variable_obj.column) + ' ] ';
-		}
+			if (variable_obj.content.dimensions == 1 && variable_obj.dimensions != 1) {
+				ret += ' [ ' + variableValueMenuCode(variable_obj.column) + ' ] ';
+			}
 
-		if (variable_obj.content.dimensions == 2 && variable_obj.dimensions != 2) {
-			ret += ' [ ' + variableValueMenuCode(variable_obj.row) + ' ] ';
-			ret += ' [ ' + variableValueMenuCode(variable_obj.column) + ' ] ';
-		}
+			if (variable_obj.content.dimensions == 2 && variable_obj.dimensions != 2) {
+				ret += ' [ ' + variableValueMenuCode(variable_obj.row) + ' ] ';
+				ret += ' [ ' + variableValueMenuCode(variable_obj.column) + ' ] ';
+			}
 
 
-	} else {
-		if (isNaN(variable_obj.content)) {
-			ret += '"' + variable_obj.content + '"';
 		} else {
-			ret += variable_obj.content;
+			if (isNaN(variable_obj.content)) {
+				ret += '"' + variable_obj.content + '"';
+			} else {
+				ret += variable_obj.content;
+			}
+		}
+	} catch (err) {
+
+		if (!is_return) {
+			Utils.renderErrorMessage(variable_obj.dom_object, LocalizedStrings.getUI('inform_valid_content'));
+			throw err;
 		}
 	}
 

js/visualUI/commands.js

@@ -142,13 +142,15 @@ function borderMouseDragCommand (function_obj, function_container, evt) {
 
 	function_container.find('.commands_list_div').each(function( index ) { 
 		prev = $(this);
-		var objLeft = prev.offset().left;
-        var objTop = prev.offset().top;
-        var objRight = objLeft + prev.width();
-        var objBottom = objTop + prev.height();
-        if (evt.pageX > objLeft && evt.pageX < objRight && evt.pageY > objTop && evt.pageY < objBottom) {
-        	prev.addClass("over_command_drag"); 
-        }
+		if (prev) {
+			var objLeft = prev.offset().left;
+	        var objTop = prev.offset().top;
+	        var objRight = objLeft + prev.width();
+	        var objBottom = objTop + prev.height();
+	        if (evt.pageX > objLeft && evt.pageX < objRight && evt.pageY > objTop && evt.pageY < objBottom) {
+	        	prev.addClass("over_command_drag"); 
+	        }
+	    }
 	});
 
 	function_container.find('.command_container').each(function( index ) { 
@@ -158,7 +160,9 @@ function borderMouseDragCommand (function_obj, function_container, evt) {
         var objRight = objLeft + obj.width();
         var objBottom = objTop + obj.height();
         if (evt.pageX > objLeft && evt.pageX < objRight && evt.pageY > objTop && evt.pageY < objBottom) {
-        	prev.removeClass('over_command_drag');
+        	if (prev) {
+        		prev.removeClass('over_command_drag');
+        	}
         	obj.addClass("over_command_drag"); 
         	return;
         }
@@ -290,6 +294,23 @@ export function genericCreateCommand (command_type) {
 	}
 }
 
+function dragTrash (event) {
+
+	var trash = $('<i class="ui icon trash alternate outline"></i>');
+	$('body').append(trash);
+	trash.css('position', 'absolute');
+	trash.css('top', event.clientY);
+	trash.css('left', event.clientX - 20);
+	trash.css('font-size', '3em');
+	trash.css('display', 'none');
+
+	trash.fadeIn( 200, function() {
+		trash.fadeOut( 200, function() {
+			trash.remove();
+		} );
+    });
+}
+
 function manageCommand (function_obj, function_container, event, command_type) {
 
 	$( ".created_element" ).each(function( index ) { 
@@ -322,11 +343,13 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	if (!esta_correto) {
 		has_element_created_draged = false;
 		which_element_is_draged = null;
+		dragTrash(event);
 		return;
 	} else {
 		if (!esta_na_div_correta) {
 			has_element_created_draged = false;
 			which_element_is_draged = null;
+			dragTrash(event);
 			return;
 		}
 	}

js/visualUI/commands/conditional_expression.js

@@ -9,6 +9,8 @@ import * as VariableValueMenuManagement from './variable_value_menu';
 
 export function renderExpression (command, expression, function_obj, initial_el_to_render) {
 
+	expression.dom_object = initial_el_to_render;
+
 	if (expression.expression == null || expression.expression.length < 1) {
 
 		renderStartMenu(command, expression, function_obj, initial_el_to_render);
@@ -194,8 +196,8 @@ 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 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 class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_logic+'">'+LocalizedStrings.getUI('text_logic_expression')+' (EL == EL and EL)</div>';
+	start_menu += '<div class="item" data-exp="'+Models.EXPRESSION_TYPES.exp_arithmetic+'">'+LocalizedStrings.getUI('text_arithmetic_expression')+' (EA < EA)</div>';
 	start_menu += '</div></div>';
 	start_menu = $(start_menu);
 

js/visualUI/commands/contextualized_menu.js

@@ -36,6 +36,11 @@ export function renderMenu (command, dom_where_render, function_obj, dom_command
 
 function addHandlers (command, dom_where_render, function_obj, dom_command) {
 
+	console.log('command, dom_where_render, function_obj, dom_command');
+	console.log(command, dom_where_render, function_obj, dom_command);
+
+	console.log(dom_where_render.parents());
+
 	dom_where_render.find('.menu_commands').dropdown({
       on: 'hover'
     });
@@ -63,7 +68,7 @@ function addHandlers (command, dom_where_render, function_obj, dom_command) {
 
 			switch ($(this).data('command')) {
 				case Models.COMMAND_TYPES.break:
-					CommandsManagement.createFloatingCommand(function_obj, null, $(this).data('command'), evt);
+					CommandsManagement.createFloatingCommand(function_obj, dom_command.find('.block_commands'), $(this).data('command'), evt);
 					break;
 
 				case Models.COMMAND_TYPES.switchcase:

js/visualUI/commands/return.js

@@ -17,7 +17,12 @@ export function renderCommand (command, function_obj) {
 
 	addHandlers(command, function_obj, el);
 
-	VariableValueMenu.renderMenu(command, command.variable_value_menu, el.find('.var_value_menu_div'), function_obj);
+	if (function_obj.return_type != Types.VOID) {
+		VariableValueMenu.renderMenu(command, command.variable_value_menu, el.find('.var_value_menu_div'), function_obj);
+	} else {
+		el.find('.var_value_menu_div').remove();
+	}
+
 
 	return el;
 }

js/visualUI/commands/variable_value_menu.js

@@ -27,11 +27,11 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 		}
 	}
 
-	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">';
+	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-varmenu="true"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 
 	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">';
+		menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-varmenu="true"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_vars">';
 		menu_var_or_value += '</div>';
 	}
 
@@ -55,7 +55,7 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 
 	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 class="ui dropdown menu_var_or_value_dom" data-varmenu="true"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_functions">';
 		menu_var_or_value += '</div>';
 	} 
 
@@ -81,6 +81,8 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
     menu_var_or_value = $(menu_var_or_value);
 
     dom_object.append(menu_var_or_value);
+    
+    ref_object.dom_object = menu_var_or_value;
 
     addHandlers(command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element);
 
@@ -223,15 +225,6 @@ function isVarInProgram (var_obj, function_obj) {
 	return null;
 }
 
-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) {
 
 	
@@ -1151,7 +1144,8 @@ 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) {
+		/*rendered.parent().on('click', function(e) {
+			rendered.parent().off();
 			console.log("TTT14");
 			rendered.remove();
 			rendered.empty();
@@ -1160,7 +1154,7 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 			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) {

js/visualUI/functions.js

@@ -566,14 +566,16 @@ function updateSequenceFunction (oldIndex, newIndex) {
 }
 
 function runCodeAssessment () {
-  toggleConsole(true);
-
+  
   window.studentGrade = null;
   studentTemp = null;
   const strCode = CodeManagement.generate();
   if (strCode == null) {
     return;
   }
+
+  toggleConsole(true);
+
   if(domConsole == null)
     domConsole = new DOMConsole("#ivprog-term");
   $("#ivprog-term").slideDown(500);
@@ -590,12 +592,14 @@ function runCodeAssessment () {
 }
 
 function runCode () {
-  toggleConsole(true);
-
+  
   const strCode = CodeManagement.generate();
   if (strCode == null) {
     return;
   }
+  
+  toggleConsole(true);
+
   if(domConsole == null)
     domConsole = new DOMConsole("#ivprog-term");
   $("#ivprog-term").slideDown(500);
@@ -659,6 +663,11 @@ function waitToCloseConsole () {
 
 function toggleTextualCoding () {
   var code = CodeManagement.generate();
+
+  if (code == null) {
+    return;
+  }
+
   $('.ivprog_visual_panel').css('display', 'none');
   $('.ivprog_textual_panel').css('display', 'block');
   $('.ivprog_textual_panel').removeClass('loading');
@@ -686,7 +695,7 @@ function removeParameter (function_obj, parameter_obj, parameter_container) {
   $(parameter_container).fadeOut();
 }
 
-function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
+function updateParameterType (parameter_obj, new_type, new_dimensions = 0) {
   parameter_obj.type = new_type;
   parameter_obj.dimensions = new_dimensions;
 
@@ -772,6 +781,50 @@ function renderParameter (function_obj, parameter_obj, function_container) {
   return ret;
 }
 
+function updateParameterName (parameter_var, new_name, parameter_obj_dom) {
+  if (isValidIdentifier(new_name)) {
+    parameter_var.name = new_name;
+  } else {
+    parameter_obj_dom.find('.parameter_div_edit').popup({
+      html : '<i class="ui icon inverted exclamation triangle yellow"></i>' + LocalizedStrings.getUI('inform_valid_name'),
+      transition : "fade up",
+      on    : 'click',
+      closable : true,
+      className   : {
+        popup       : 'ui popup invalid-identifier'
+      },
+      onHidden : function($module) {
+        parameter_obj_dom.find('.parameter_div_edit').popup('destroy');
+      }
+
+    }).popup('toggle');
+  }
+}
+
+function updateFunctionName (function_var, new_name, function_obj_dom) {
+  if (isValidIdentifier(new_name)) {
+    function_var.name = new_name;
+  } else {
+    function_obj_dom.find('.function_name_div').popup({
+      html : '<i class="ui icon inverted exclamation triangle yellow"></i>' + LocalizedStrings.getUI('inform_valid_name'),
+      transition : "fade up",
+      on    : 'click',
+      closable : true,
+      className   : {
+        popup       : 'ui popup invalid-identifier'
+      },
+      onHidden : function($module) {
+        function_obj_dom.find('.function_name_div').popup('destroy');
+      }
+
+    }).popup('toggle');
+  }
+}
+
+function isValidIdentifier (identifier_str) {
+  return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(identifier_str);
+}
+
 var opened_name_parameter = false;
 var opened_input_parameter = null;
 function enableNameParameterUpdate (parameter_obj, parent_node) {
@@ -805,7 +858,7 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
   input_field.focusout(function() {
     /// update array:
     if (input_field.val().trim()) {
-      parameter_obj.name = input_field.val().trim();
+      updateParameterName(parameter_obj, input_field.val().trim(), parent_node);
       parent_node.find('.span_name_parameter').text(parameter_obj.name);
     }
     input_field.off();
@@ -820,7 +873,7 @@ function enableNameParameterUpdate (parameter_obj, parent_node) {
     var code = e.keyCode || e.which;
     if(code == 13) {
       if (input_field.val().trim()) {
-        parameter_obj.name = input_field.val().trim();
+        updateParameterName(parameter_obj, input_field.val().trim(), parent_node);
         parent_node.find('.span_name_parameter').text(parameter_obj.name);
       }
       input_field.off();
@@ -881,7 +934,7 @@ function enableNameFunctionUpdate (function_obj, parent_node) {
   input_field.focusout(function() {
     /// update array:
     if (input_field.val().trim()) {
-      function_obj.name = input_field.val().trim();
+      updateFunctionName(function_obj, input_field.val().trim(), parent_node);
     }
     input_field.off();
     input_field.remove();
@@ -898,7 +951,7 @@ function enableNameFunctionUpdate (function_obj, parent_node) {
     var code = e.keyCode || e.which;
     if(code == 13) {
       if (input_field.val().trim()) {
-        function_obj.name = input_field.val().trim();
+        updateFunctionName(function_obj, input_field.val().trim(), parent_node);
       }
       input_field.off();
       input_field.remove();

js/visualUI/globals.js

@@ -31,8 +31,28 @@ function toggleConstant (global_var) {
 	global_var.is_constant = !global_var.is_constant;
 }
 
-function updateName (global_var, new_name) {
-	global_var.name = new_name;
+function updateName (global_var, new_name, global_obj_dom) {
+	if (isValidIdentifier(new_name)) {
+		global_var.name = new_name;
+	} else {
+		global_obj_dom.find('.editing_name_var').popup({
+			html : '<i class="ui icon inverted exclamation triangle yellow"></i>' + LocalizedStrings.getUI('inform_valid_name'),
+			transition : "fade up",
+			on    : 'click',
+      		closable : true,
+			className   : {
+			  popup       : 'ui popup invalid-identifier'
+			},
+			onHidden : function($module) {
+				global_obj_dom.find('.editing_name_var').popup('destroy');
+			}
+
+		}).popup('toggle');
+	}
+}
+
+function isValidIdentifier (identifier_str) {
+	return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(identifier_str);
 }
 
 function updateType (global_var, new_type, new_dimensions = 0) {
@@ -769,7 +789,7 @@ function enableNameUpdate (global_container) {
 	input_name.focusout(function() {
 		/// update array:
 		if (input_name.val().trim().length > 0) {
-			updateName(global_var, input_name.val().trim());
+			updateName(global_var, input_name.val().trim(), global_container);
 			global_container.find('.span_name_variable').text(global_var.name);
 		} else {
 			global_container.find('.span_name_variable').text(global_var.name);
@@ -786,7 +806,7 @@ function enableNameUpdate (global_container) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
 			if (input_name.val().trim()) {
-				updateName(global_var, input_name.val().trim());
+				updateName(global_var, input_name.val().trim(), global_container);
 				global_container.find('.span_name_variable').text(global_var.name);
 			} else {
 				global_container.find('.span_name_variable').text(global_var.name);

js/visualUI/utils.js

@@ -0,0 +1,24 @@
+
+import $ from 'jquery';
+
+export function renderErrorMessage (dom_obj_target, message_text) {
+
+	dom_obj_target.popup({
+		html : '<i class="ui icon inverted exclamation triangle yellow"></i>' + message_text,
+		transition : "fade up",
+		on    : 'click',
+  		closable : true,
+  		movePopup : true,
+  		boundary : window,
+  		preserve : false,
+  		target : false,
+		className   : {
+		  popup       : 'ui popup invalid-identifier'
+		},
+		onHidden : function($module) {
+			dom_obj_target.popup('destroy');
+		}
+
+	}).popup('toggle');
+
+}

js/visualUI/variables.js

@@ -28,8 +28,30 @@ export function addVariable (function_obj, function_container, is_in_click = fal
 	}
 }
 
-function updateName (variable_obj, new_name) {
-	variable_obj.name = new_name;
+function updateName (variable_obj, new_name, variable_obj_dom) {
+
+	if (isValidIdentifier(new_name)) {
+		variable_obj.name = new_name;
+	} else {
+		variable_obj_dom.find('.editing_name_var').popup({
+			html : '<i class="ui icon inverted exclamation triangle yellow"></i>' + LocalizedStrings.getUI('inform_valid_name'),
+			transition : "fade up",
+			on    : 'click',
+      		closable : true,
+			className   : {
+			  popup       : 'ui popup invalid-identifier'
+			},
+			onHidden : function($module) {
+				variable_obj_dom.find('.editing_name_var').popup('destroy');
+			}
+
+		}).popup('toggle');
+	}
+
+}
+
+function isValidIdentifier (identifier_str) {
+	return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(identifier_str);
 }
 
 function removeVariable (variable_obj, variable_container) {
@@ -758,7 +780,7 @@ function enableNameUpdate (variable_obj, variable_container) {
 	input_name.focusout(function() {
 		/// update array:
 		if (input_name.val().trim().length > 0) {
-			updateName(variable_obj, input_name.val().trim());
+			updateName(variable_obj, input_name.val().trim(), variable_container);
 			variable_container.find('.span_name_variable').text(variable_obj.name);
 		} else {
 			variable_container.find('.span_name_variable').text(variable_obj.name);
@@ -775,7 +797,7 @@ function enableNameUpdate (variable_obj, variable_container) {
 		var code = e.keyCode || e.which;
 		if(code == 13) {
 			if (input_name.val().trim().length > 0) {
-				updateName(variable_obj, input_name.val().trim());
+				updateName(variable_obj, input_name.val().trim(), variable_container);
 				variable_container.find('.span_name_variable').text(variable_obj.name);
 			} else {
 				variable_container.find('.span_name_variable').text(variable_obj.name);