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

css/ivprog-visual-1.0.css

@@ -154,7 +154,7 @@ body {
 .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, .parameter_div_edit,
-.all_elements_write, .container_var_element_control, .inline_add_command {
+.all_elements_write, .container_var_element_control, .inline_add_command, .restart_expression, .div_parent_handler, .div_drag_writer {
 	display: inline;
 }
 
@@ -825,4 +825,34 @@ div.ui.checkbox.transition.visible {
 .ui.repeatNtimes.command_container .ui.block_commands, 
 .ui.whiletrue.command_container .ui.block_commands {
 	margin-top: .8em;
+}
+
+.ui.restart_expression {
+	margin-left: .4em;
+    cursor: pointer;
+    color: brown;
+}
+
+.div_parent_handler {
+	padding-top: 5px;
+    padding-bottom: 6px;
+    background: #7a7acf;
+    border-radius: 4px;
+}
+
+.div_parent_handler i.times {
+	margin-left: .3em;
+	cursor: pointer;
+}
+
+.div_parent_handler i.ellipsis {
+	cursor: move;
+}
+
+.div_parent_handler i.handler {
+	opacity: 0;
+}
+
+.div_parent_handler:hover i.handler {
+	opacity: 1;
 }

i18n/en/ui.json

@@ -101,6 +101,8 @@
   "inform_valid_content": "Enter some content!",
   "inform_valid_expression": "Construct the logical condition!",
   "inform_valid_name_duplicated": "This name is already in use by other function.",
+  "inform_valid_global_duplicated": "A global variable with this name already exists.",
+  "inform_valid_variable_duplicated" : "A local variable with this name already exists.",
   "arrangement": "Arrangement",
   "conversion": "Conversion",
   "$sin": "sin",

i18n/es/ui.json

@@ -105,6 +105,8 @@
   "inform_valid_content": "Enter some content!",
   "inform_valid_expression": "Construct the logical condition!",
   "inform_valid_name_duplicated": "This name is already in use by other function.",
+  "inform_valid_global_duplicated": "A global variable with this name already exists.",
+  "inform_valid_variable_duplicated" : "A local variable with this name already exists.",
   "text_t": "Text",
   "arrangement": "Arrangement",
   "conversion": "Conversion",

i18n/pt/ui.json

@@ -108,6 +108,8 @@
   "inform_valid_content": "Informe o conteúdo!",
   "inform_valid_expression": "Construa uma expressão lógica!",
   "inform_valid_name_duplicated": "Este nome já está em uso por outra função!",
+  "inform_valid_global_duplicated": "Já existe uma variável global com o nome informado.",
+  "inform_valid_variable_duplicated" : "Já existe uma variável local com o nome informado.",
   "arrangement": "Arranjo",
   "conversion": "Conversao",
   "$sin": "seno",

js/iassign-integration-functions.js

@@ -295,7 +295,6 @@ function prepareTableTestCases (div_el) {
     $('.button_add_case').on('click', function(e) {
         addTestCase();
     });
-
 }
 
 var hist = false;

js/visualUI/algorithm.js

@@ -35,5 +35,5 @@ export function renderAlgorithm () {
 		GlobalsManagement.renderGlobal(window.program_obj.globals[i]);
 	}	
 
-	setTimeout(function(){ block_render = false; }, 100);
+	setTimeout(function(){ block_render = false; }, 500);
 }

js/visualUI/commands/conditional_expression.js

@@ -29,6 +29,13 @@ export function renderExpression (command, expression, function_obj, initial_el_
 		}
 
 		initial_el_to_render.append(main_div);	
+		var restartMenu = $('<div class="ui restart_expression"><i class="ui icon undo"></i></div>');
+		initial_el_to_render.append(restartMenu);	
+		restartMenu.on('click', function(e){
+	    	expression.expression = null;
+	    	initial_el_to_render.empty();
+	    	renderExpression(command, expression, function_obj, initial_el_to_render);
+	  	});
 	}
 }
 
@@ -221,8 +228,8 @@ function renderStartMenu (command, expression, function_obj, initial_el_to_rende
 			initial_el_to_render.html('');
 
 			renderExpression(command, expression, function_obj, initial_el_to_render);
-
-    	}
+    	},
+    	selectOnKeydown: false
 	});
 
 	initial_el_to_render.append(' <span class="span_command_spec"> </span> ');

js/visualUI/commands/writer.js

@@ -8,6 +8,8 @@ import * as VariableValueMenu from './variable_value_menu';
 import * as VariableValueMenuManagement from './variable_value_menu';
 import * as CommandsManagement from '../commands';
 
+import '../../Sortable.js';
+
 export function createFloatingCommand () {
 	return $('<div class="ui writer created_element"> <i class="ui icon small upload"></i> <span> '+LocalizedStrings.getUI('text_command_write')+' var </span></div>');
 }
@@ -21,15 +23,48 @@ export function renderCommand (command, 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);
+		var div_parent_with_handler = $( '<div class="div_parent_handler"></div>' );
+		div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
+		div_parent_with_handler.append(new_div_item);
+		div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
+
+		el.find('.all_elements_write').append(div_parent_with_handler);
 		VariableValueMenu.renderMenu(command, command.content[i], new_div_item, function_obj);
 
 		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
+
+		addHandlersManager(command, function_obj, el, div_parent_with_handler, command.content[i]);
 	}
+
+	if (command.content.length == 0) {
+		addHandlerIconAdd(el.find('.all_elements_write'), command, function_obj);
+	}
+
 	addHandlers(command, function_obj, el);
 	return el;
 }
 
+function addHandlersManager (command, function_obj, writer_dom, item_div, content_element) {
+
+	item_div.find('.times').on('click', function() {
+		for (var i = 0; i < command.content.length; i++) {
+			if (command.content[i] == content_element) {
+				delete command.content[i];
+	  			command.content.splice(i, 1);
+				
+				item_div.children().off();
+				item_div.off();
+				item_div.fadeOut();
+
+				if (command.content.length > 0) {
+					item_div.next('.icon_add_item_to_writer').fadeOut();
+				}
+				break;
+			}
+		}
+	});
+}
+
 function addHandlers (command, function_obj, writer_dom) {
 
 	writer_dom.find('.button_remove_command').on('click', function() {
@@ -37,6 +72,23 @@ function addHandlers (command, function_obj, writer_dom) {
 			writer_dom.fadeOut();
 		}
 	});
+
+	Sortable.create(writer_dom.find(".all_elements_write")[0], {
+	    handle: '.ellipsis',
+	    animation: 100,
+	    ghostClass: 'ghost',
+	    group: 'writer',
+	    draggable: '.div_parent_handler',
+	    onEnd: function (evt) {
+	    	
+	    	command.content.splice(evt.newIndex, 0, command.content.splice(evt.oldIndex, 1)[0]);
+
+	    	writer_dom.empty();
+	    	writer_dom.replaceWith(renderCommand(command, function_obj));
+	    }
+	  });
+
+
 }
 
 function addHandlerIconAdd (dom_object, command, function_obj, insert_after = false, after_which = null) {
@@ -48,13 +100,20 @@ function addHandlerIconAdd (dom_object, command, function_obj, insert_after = fa
 	}
 	
 	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 div_parent_with_handler = $( '<div class="div_parent_handler" style="display:none;"></div>' );
+		var new_div_item = $( '<div class="var_value_menu_div"></div>' );
+		div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
+		div_parent_with_handler.append(new_div_item);
+		div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
+		div_parent_with_handler.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);
+		addHandlerIconAdd(dom_object, command, function_obj, true, div_parent_with_handler);
+
+		addHandlersManager(command, function_obj, dom_object, div_parent_with_handler, new_related_menu);
 		var pos = 1;
 		dom_object.find('.icon_add_item_to_writer').each(function() {
 			if ($(this).get(0) === icon_add_item.get(0)) {
@@ -63,7 +122,10 @@ function addHandlerIconAdd (dom_object, command, function_obj, insert_after = fa
 				pos ++;
 			}
 		});
-		new_div_item.fadeIn();
+		if (command.content.length == 1) {
+			icon_add_item.remove();
+		}
+		div_parent_with_handler.fadeIn();
 	});
 }
 
@@ -74,13 +136,23 @@ export function addContent (command, ref_object, dom_object, menu_var_or_value,
 		icon_add_item.insertAfter(dom_object);
 
 		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);
+			var div_parent_with_handler = $( '<div class="div_parent_handler"></div>' );
+			div_parent_with_handler.append($('<i class="ui icon ellipsis vertical inverted handler"></i>'));
+			div_parent_with_handler.append(new_div_item);
+			div_parent_with_handler.append($('<i class="white inverted icon times handler"></i>'));
+
+			div_parent_with_handler.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);
 
+			addHandlersManager(command, function_obj, dom_object, div_parent_with_handler, new_related_menu);
+
 			command.content.push(new_related_menu);
+
+			if (command.content.length == 1) {
+				icon_add_item.remove();
+			}
 		});
 	}
-}
+}

js/visualUI/globals.js

@@ -3,6 +3,7 @@ import jQuery from 'jquery';
 import { Types } from './types';
 import * as Models from './ivprog_elements';
 import { LocalizedStrings } from './../services/localizedStringsService';
+import * as Utils from './utils';
 
 
 window.jQuery = jQuery;
@@ -33,24 +34,25 @@ function toggleConstant (global_var) {
 
 function updateName (global_var, new_name, global_obj_dom) {
 	if (isValidIdentifier(new_name)) {
-		global_var.name = new_name;
+		if (globalNameAlreadyExists(new_name)) {
+			Utils.renderErrorMessage(global_obj_dom.find('.editing_name_var'), LocalizedStrings.getUI('inform_valid_global_duplicated'));
+		} else {
+			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');
+		Utils.renderErrorMessage(global_obj_dom.find('.editing_name_var'), LocalizedStrings.getUI('inform_valid_name'));
 	}
 }
 
+function globalNameAlreadyExists (global_name) {
+  for (var i = 0; i < window.program_obj.globals.length; i++) {
+    if (window.program_obj.globals[i].name == global_name) {
+      return true;
+    }
+  }
+  return false;
+}
+
 function isValidIdentifier (identifier_str) {
 	return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(identifier_str);
 }

js/visualUI/variables.js

@@ -3,7 +3,7 @@ import jQuery from 'jquery';
 import { Types } from './types';
 import * as Models from './ivprog_elements';
 import { LocalizedStrings } from './../services/localizedStringsService';
-
+import * as Utils from './utils';
 
 window.jQuery = jQuery;
 
@@ -28,26 +28,38 @@ export function addVariable (function_obj, function_container, is_in_click = fal
 	}
 }
 
-function updateName (variable_obj, new_name, variable_obj_dom) {
+function updateName (variable_obj, new_name, variable_obj_dom, function_obj) {
 
 	if (isValidIdentifier(new_name)) {
-		variable_obj.name = new_name;
+		if (variableNameAlreadyExists(new_name, function_obj)) {
+			Utils.renderErrorMessage(variable_obj_dom.find('.editing_name_var'), LocalizedStrings.getUI('inform_valid_variable_duplicated'));
+		} else {
+			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');
+		Utils.renderErrorMessage(variable_obj_dom.find('.editing_name_var'), LocalizedStrings.getUI('inform_valid_name'));
+	}
+}
+
+function variableNameAlreadyExists (name_var, function_obj) {
+
+	if (function_obj.parameters_list) {
+		for (var i = 0; i < function_obj.parameters_list.length; i++) {
+			if (function_obj.parameters_list[i].name == name_var) {
+				return true;
 			}
+		}
+	}
 
-		}).popup('toggle');
+	if (function_obj.variables_list) {
+		for (var i = 0; i < function_obj.variables_list.length; i++) {
+			if (function_obj.variables_list[i].name == name_var) {
+				return true;
+			}
+		}
 	}
 
+	return false;
 }
 
 function isValidIdentifier (identifier_str) {
@@ -80,11 +92,11 @@ function updateType (variable_obj, new_type, new_dimensions = 0) {
 	updateInitialValues(variable_obj);
 }
 
-function addHandlers (variable_obj, variable_container) {
+function addHandlers (variable_obj, variable_container, function_obj) {
 
 	// Manage variable name: 
 	variable_container.find( ".enable_edit_name_variable" ).on('click', function(e){
-		enableNameUpdate(variable_obj, variable_container);
+		enableNameUpdate(variable_obj, variable_container, function_obj);
 	});
 
 	// Menu to change type:
@@ -161,7 +173,7 @@ export function renderVariable (function_container, new_var, function_obj) {
 
 	function_container.find('.variables_list_div').append(element);
 
-	addHandlers(new_var, element);
+	addHandlers(new_var, element, function_obj);
 
 	renderValues(new_var, element);
 
@@ -748,7 +760,7 @@ function enableValueUpdate (var_obj, parent_node) {
 
 var opened_name_global = false;
 var opened_input_global = null;
-function enableNameUpdate (variable_obj, variable_container) {
+function enableNameUpdate (variable_obj, variable_container, function_obj) {
 
 	if (opened_name_global) {
 		opened_input_global.focus();
@@ -780,7 +792,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(), variable_container);
+			updateName(variable_obj, input_name.val().trim(), variable_container, function_obj);
 			variable_container.find('.span_name_variable').text(variable_obj.name);
 		} else {
 			variable_container.find('.span_name_variable').text(variable_obj.name);
@@ -797,7 +809,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(), variable_container);
+				updateName(variable_obj, input_name.val().trim(), variable_container, function_obj);
 				variable_container.find('.span_name_variable').text(variable_obj.name);
 			} else {
 				variable_container.find('.span_name_variable').text(variable_obj.name);