Primeira parte das expressões

.ima_version.json

@@ -1 +1 @@
-{ "version":"2019_03_04 11_07" }
+{ "version":"2019_03_09 09_56" }

css/ivprog-term.css

@@ -36,6 +36,7 @@
   margin-top: -30px;
   position: relative;
   padding: 5px;
+  z-index: 999;
 }
 #ivprog-term i {
   margin-left: 5px;

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, .restart_expression, .div_parent_handler, .div_drag_writer {
+.all_elements_write, .container_var_element_control, .inline_add_command, .restart_expression, .div_parent_handler, .div_drag_writer, .single_element_expression, .ghost_parenthesis {
 	display: inline;
 }
 
@@ -559,7 +559,8 @@ div.function_name_div_updated:active,
 .incrementation_field .incrementation_variable,
 .incrementation_field .first_operand:not(:empty),
 .incrementation_field .operator:not(:empty),
-.incrementation_field .second_operand:not(:empty) {
+.incrementation_field .second_operand:not(:empty),
+.single_element_expression, .ghost_parenthesis {
 	background: #e8e8e8;
 	border-radius: 5px;
 	min-width: 40px;
@@ -860,11 +861,67 @@ div.ui.checkbox.transition.visible {
 }
 
 .ghost_div {
-
     height: 20px;
     background-color: #ffffff;
     margin: 5px;
     border: 2px dotted #000000;
     box-shadow: 1px 1px;
     height: 28px;
+}
+.ghost_element, .ghost_parenthesis {
+	opacity: 0;
+}
+.expression_elements:hover .ghost_element, .expression_elements:hover .ghost_parenthesis {
+	opacity: .5;
+}
+.ghost_element:hover, .ghost_parenthesis:hover {
+	opacity: 1.0 !important;
+}
+
+.usepointer, .ghost_element, .ghost_parenthesis, .add_parentheses {
+	cursor: pointer !important;
+}
+
+.add_parentheses {
+	margin-left: 5px;
+}
+
+.temp_class {
+	opacity: 0;
+}
+
+.parentheses_ghost {
+	display: inline;
+	background-color: #2ecc40;
+	padding: 1px 4px;
+    font-size: 120%;
+    padding-bottom: 2px;
+    font-weight: bold;
+    margin: 0px 4px;
+    border-radius: 4px;
+    box-shadow: 4px black;
+    box-shadow: 1px 1px;
+    border: 1px solid gray;
+}
+
+.single_element_expression {
+	position: relative;
+}
+
+.floating_parenthesis {
+	padding: 3px 2px;
+    border: 1px solid gray;
+    background-color: #e8e8e8;
+    width: 30px;
+    text-align: center;
+    border-radius: 5px;
+    font-weight: bold;
+    box-shadow: 2px 2px grey;
+}
+
+.remove_element_expression {
+	display: inline;
+	position: absolute;
+    top: -15px;
+    right: -5px;
 }

js/visualUI/commands/attribution.js

@@ -7,6 +7,7 @@ import * as VariablesManagement from '../variables';
 import * as VariableValueMenu from './variable_value_menu';
 import * as VariableValueMenuManagement from './variable_value_menu';
 import * as CommandsManagement from '../commands';
+import * as ExpressionManagement from './generic_expression';
 
 export function createFloatingCommand () {
 	return $('<div class="ui attribution created_element"> <i class="ui icon small arrow left"></i> <span> x = 1 + 1 </span></div>');
@@ -21,15 +22,15 @@ export function renderCommand (command, function_obj) {
 	VariableValueMenu.renderMenu(command, command.variable, el.find('.var_attributed'), function_obj);
 
 	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)]);
-
+		var exp = new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true);
 		command.expression.push(exp);
 	}
 
 	addHandlers(command, function_obj, el);
 
-	renderExpressionElements(command, function_obj, el);
+	ExpressionManagement.renderExpression(command, function_obj, el.find('.expression_elements'), command.expression);
+
+	//renderExpressionElements(command, function_obj, el);
 
 	return el;
 

js/visualUI/commands/generic_expression.js

@@ -0,0 +1,580 @@
+import $ from 'jquery';
+import { Types } from '../types';
+import * as Models from '../ivprog_elements';
+import { LocalizedStrings } from '../../services/localizedStringsService';
+import * as GlobalsManagement from '../globals';
+import * as VariablesManagement from '../variables';
+import * as VariableValueMenuManagement from './variable_value_menu';
+import WatchJS from 'melanke-watchjs';
+
+export function renderExpression (command, function_obj, div_to_render, expression_array) {
+
+	div_to_render.empty();
+
+	if (command.type === Models.COMMAND_TYPES.attribution) {
+
+		WatchJS.unwatch(command.variable);
+		WatchJS.watch(command.variable, function(){
+	      renderExpression(command, function_obj, div_to_render, expression_array);
+	    }, 0);
+
+		if (command.variable.content) {
+
+			var types_included = [];
+
+			if (command.variable.content.type == Types.INTEGER || command.variable.content.type == Types.REAL) {
+	    		types_included.push(Models.EXPRESSION_TYPES.exp_arithmetic);
+		    } else if (command.variable.content.type == Types.BOOLEAN) {
+		    	types_included.push(Models.EXPRESSION_TYPES.exp_conditional);
+		    	types_included.push(Models.EXPRESSION_TYPES.exp_logic);
+		    	types_included.push(Models.EXPRESSION_TYPES.exp_arithmetic);
+		    } else if (command.variable.content.type == Types.TEXT) {
+		    	types_included.push(Models.EXPRESSION_TYPES.exp_conditional);
+		    	types_included.push(Models.EXPRESSION_TYPES.exp_logic);
+		    	types_included.push(Models.EXPRESSION_TYPES.exp_arithmetic);
+		    } else {
+		    	console.log('NÃO RECONHECI! VEJA: ', command.variable.content.type);
+		    }
+
+		    renderElements(command, function_obj, div_to_render, expression_array, types_included);
+		} else {
+			div_to_render.text('selecione uma variável');
+		}
+	}
+}
+
+function renderElements (command, function_obj, div_to_render, expression_array, types_included) {
+
+	if (expression_array.length > 0) {
+		if (!expression_array[0].type_op) {
+			renderStartAddOperator(div_to_render, types_included, expression_array, command, function_obj, 0);
+		}
+	}
+
+	var i = 0;
+	for (i = 0; i < expression_array.length; i++) {
+		if (expression_array[i].type == "var_value") {
+			var div_temp = $('<div class="single_element_expression" data-index="'+i+'"></div>');
+			VariableValueMenuManagement.renderMenu(command, expression_array[i], div_temp, function_obj);
+			div_to_render.append(div_temp);
+		} else if (expression_array[i] == '(' || expression_array[i] == ')') {
+			renderParenthesis(div_to_render, expression_array[i], command, function_obj, i, expression_array);
+		} else {
+			renderOperatorMenu(command, function_obj, div_to_render, expression_array[i], types_included, i, expression_array);
+		}
+	}
+
+	renderFinalAddElements(div_to_render, types_included, expression_array, command, function_obj, i);
+
+	renderAddParenthesis(command, function_obj, div_to_render, expression_array, types_included);
+
+}
+
+window.parentheses_activate = false;
+window.open_or_close = null;
+function renderAddParenthesis (command, function_obj, div_to_render, expression_array, types_included) {
+	var addParentheses = $('<div class="single_element_expression add_parentheses"><i class="icons"><b style="font-style: normal;">( )</b><i class="corner add icon blue" style="font-size: .6em;right: -3px;bottom: -2px;"></i></i></div>');
+	div_to_render.append(addParentheses);
+	addParentheses.popup({
+	    content : "Adicionar parênteses",
+	    delay: {
+	      show: 750,
+	      hide: 0
+		}
+	});
+
+	addParentheses.on('click', function(mouse_event) {
+
+		// verificar se já está ativado
+		if (window.parentheses_activate) {
+			return;
+		}
+
+		window.parentheses_activate = true;
+
+		window.open_or_close = "open";
+
+		div_to_render.find('.dropdown').addClass('disabled');
+
+		div_to_render.find('.ghost_element').addClass('temp_class');
+		div_to_render.find('.ghost_element').removeClass('ghost_element');
+
+		var floatingObject = $('<div class="floating_parenthesis"> ( </div>');
+		floatingObject.draggable().appendTo("body");
+		floatingObject.css("position", "absolute");
+		mouse_event.type = "mousedown.draggable";
+		mouse_event.target = floatingObject[0];
+		floatingObject.css("left", mouse_event.pageX + 10);
+		floatingObject.css("top", mouse_event.pageY + 10);
+		floatingObject.trigger(mouse_event);
+
+		div_to_render.on('mousemove', function(evt) {
+			var actual_target = null;
+			if ($(evt.target).hasClass('single_element_expression')) {
+				actual_target = $(evt.target);
+			} else {
+				actual_target = $(evt.target).closest('.single_element_expression');
+			}
+
+			if ($(evt.target).hasClass('temp_class') 
+				|| actual_target.length < 1 
+				|| actual_target.hasClass('add_parentheses')
+				|| actual_target.hasClass('rendered_parentheses')
+				|| $(evt.target).hasClass('parentheses_ghost')
+				|| $(evt.target).hasClass('expression_elements')) {
+				return;
+			}
+			renderGhostParentheses(actual_target, command, function_obj, div_to_render, expression_array);
+		});
+
+		div_to_render.on('mouseleave', function(evt) {
+			/*window.open_parentheses.remove();
+			window.close_parentheses.remove();*/
+		});
+
+		var floating;
+
+		$('body').on('mouseup', function(evt) {
+
+			if (window.open_or_close == "open") {
+
+				window.open_or_close = "close";
+
+				floatingObject.remove();
+
+				floating = $('<div class="floating_parenthesis"> ) </div>');
+				floating.draggable().appendTo("body");
+				floating.css("position", "absolute");
+				floating.css("left", evt.pageX + 10);
+				floating.css("top", evt.pageY + 10);
+
+				$('body').on('mousemove', function(evts) {
+					floating.css("left", evts.pageX + 10);
+					floating.css("top", evts.pageY + 10);
+				});				
+
+			} else {
+
+				floating.remove();
+				
+				div_to_render.find('.temp_class').addClass('ghost_element');
+				div_to_render.find('.temp_class').removeClass('temp_class');
+				
+				div_to_render.off('mousemove');
+				div_to_render.off('mouseleave');
+				$('body').off('mouseup');
+
+				setTimeout(function(){
+					window.parentheses_activate = false;
+				}, 50);
+
+				window.open_parentheses.remove();
+				window.close_parentheses.remove();
+
+				var all_el = $(evt.target).parentsUntil('.command_container');
+
+				var is_correct = false;
+				
+				for (var j = 0; j < all_el.length; j++) {
+					if ($(all_el.get(j)).is(div_to_render)) {
+						is_correct = true;
+						break;
+					}
+				}
+
+				if (is_correct) {
+					expression_array.splice(window.inserir_open, 0, '(');
+					expression_array.splice(window.inserir_close, 0, ')');
+					renderExpression(command, function_obj, div_to_render, expression_array);
+				}
+
+				window.inserir_open = -1;
+				window.inserir_close = -1;
+
+			}
+
+		});
+	});
+}
+
+window.open_parentheses = $('<div class="parentheses_ghost">(</div>');
+window.close_parentheses = $('<div class="parentheses_ghost">)</div>');
+window.inserir_open = -1;
+window.inserir_close = -1;
+function renderGhostParentheses (actual_target, command, function_obj, div_to_render, expression_array) {
+
+	/*window.open_parentheses.remove();
+	window.close_parentheses.remove();*/
+
+	var index_in_array = actual_target.data('index');
+
+	if ((expression_array[index_in_array] == '(') || (expression_array[index_in_array] == ')')) {
+		return;
+	}
+
+	// Tratando a situação quando é na primeira posição:
+
+	if (index_in_array == 0) {
+		if (expression_array[index_in_array].type == "var_value") {
+
+			if (window.open_or_close == "open") {
+				window.open_parentheses.insertBefore(actual_target);
+				window.inserir_open = index_in_array;
+			}
+
+			if (expression_array.length == 1) {
+				if (window.open_or_close == "close") {
+					window.close_parentheses.insertAfter(actual_target);
+					window.inserir_close = index_in_array + 2;
+				}
+
+			} else {
+				var count_opened = 0;
+				var count_closed = 0;
+				for (var i = 1; i < expression_array.length; i++) {
+					if ((expression_array[i] == '(')) {
+						count_opened ++;
+					}
+					if (expression_array[i] == ')') {
+						count_closed ++;
+					}
+					if (count_opened != count_closed) {
+					} else {
+						if (count_opened > 0) {
+							if (window.open_or_close == "close") {
+								window.close_parentheses.insertAfter(div_to_render.find('.single_element_expression[data-index="'+i+'"]'));
+								window.inserir_close = i + 2;
+							}
+							break;
+						} else {
+							if (expression_array[i].type == "var_value") {
+								if (window.open_or_close == "close") {
+									window.close_parentheses.insertAfter(div_to_render.find('.single_element_expression[data-index="'+i+'"]'));
+									window.inserir_close = i + 2;
+								}
+								break;
+							}
+						}
+					}
+
+				}
+			}
+
+		} else if (expression_array[index_in_array].type_op) {
+
+			if (window.open_or_close == "open") {
+				window.open_parentheses.insertBefore(actual_target);
+				window.inserir_open = index_in_array;
+			}
+
+			var count_opened = 0;
+			var count_closed = 0;
+			for (var i = 1; i < expression_array.length; i++) {
+				// $('.slide-link[data-slide="0"]')
+				if ((expression_array[i] == '(')) {
+					count_opened ++;
+				}
+				if (expression_array[i] == ')') {
+					count_closed ++;
+				}
+				if (count_opened != count_closed) {
+				} else {
+					if (count_opened > 0) {
+						if (expression_array[i].type == "var_value") {
+							window.close_parentheses.insertAfter(div_to_render.find('.single_element_expression[data-index="'+i+'"]'));
+							window.inserir_close = i + 2;
+						}
+
+						break;
+					} else {
+						if (expression_array[i].type == "var_value") {
+							if (expression_array[i].type == "var_value") {
+								window.close_parentheses.insertAfter(div_to_render.find('.single_element_expression[data-index="'+i+'"]'));
+								window.inserir_close = i + 2;
+							}
+							break;
+						}
+					}
+				}
+
+			}
+		}
+		return;
+	}
+
+	// Tratando quando não é no índice 0:
+	if (expression_array[index_in_array].type == "var_value") {
+		if (window.open_or_close == "open") {
+			window.open_parentheses.insertBefore(actual_target);
+			window.inserir_open = index_in_array;
+		}
+		if (window.open_or_close == "close") {
+			window.close_parentheses.insertAfter(actual_target);
+			window.inserir_close = index_in_array + 2;
+		}
+		return;
+	}
+
+	if (expression_array[index_in_array].type_op) {
+		// buscar para a esquerda primeiro:
+		if (expression_array[index_in_array - 1] == '(') {
+			if (window.open_or_close == "open") {
+				window.open_parentheses.insertBefore(actual_target);
+				window.inserir_open = index_in_array;
+			}
+		} else if (expression_array[index_in_array - 1] == ')') {
+			// buscar a abertura
+			var count_opened = 0;
+			var count_closed = 0;
+			for (var j = index_in_array - 1; j >= 0; j--) {
+				if ((expression_array[j] == '(')) {
+					count_opened ++;
+				}
+				if (expression_array[j] == ')') {
+					count_closed ++;
+				}
+
+				if (count_opened != count_closed) {
+				} else {
+					if (count_closed > 0) {
+						if (window.open_or_close == "open") {
+							window.open_parentheses.insertBefore(div_to_render.find('.single_element_expression[data-index="'+j+'"]'));
+							window.inserir_open = j;
+						}
+						break;
+					}
+				}
+
+			}
+
+		} else if (expression_array[index_in_array - 1].type == "var_value") {
+			if (window.open_or_close == "open") {
+				window.open_parentheses.insertBefore(div_to_render.find('.single_element_expression[data-index="'+(index_in_array - 1)+'"]'));
+				window.inserir_open = index_in_array - 1;
+			}
+		}
+
+		// buscar para a direita agora:
+		if (expression_array[index_in_array + 1] == '(') {
+			// buscar o fechamento:
+
+			var count_opened = 0;
+			var count_closed = 0;
+			for (var j = index_in_array + 1; j < expression_array.length; j ++) {
+				if ((expression_array[j] == '(')) {
+					count_opened ++;
+				}
+				if (expression_array[j] == ')') {
+					count_closed ++;
+				}
+
+				if (count_opened != count_closed) {
+				} else {
+					if (count_opened > 0) {
+						if (window.open_or_close == "close") {
+							window.close_parentheses.insertAfter(div_to_render.find('.single_element_expression[data-index="'+j+'"]'));
+							window.inserir_close = j + 2;
+						}
+						break;
+					}
+				}
+
+			}
+
+
+		} else if (expression_array[index_in_array + 1].type == "var_value") {
+			if (window.open_or_close == "close") {
+				window.close_parentheses.insertAfter(div_to_render.find('.single_element_expression[data-index="'+(index_in_array + 1)+'"]'));
+				window.inserir_close = index_in_array + 3;
+			}
+		}
+	}
+
+}
+
+function renderParenthesis (div_to_render, expression_content, command, function_obj, position, expression_array) {
+	var ghost_parenthesis = $('<div class="single_element_expression" data-index="'+position+'">'+expression_content+'</div>');
+	div_to_render.append(ghost_parenthesis);
+}
+
+function renderStartAddOperator (div_to_render, types_included, expression_array, command, function_obj, position) {
+	var menu_final = '<div class="ui dropdown disabled usepointer"><div class="text"> + </div><i class="dropdown icon"></i><div class="menu">';
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_arithmetic) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Aritméticos<div class="menu">';
+			menu_final += getArithmeticOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getArithmeticOperators();
+		}
+	}
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_logic) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Lógicos<div class="menu">';
+			menu_final += getLogicOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getLogicOperators();
+		}
+	}
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_conditional) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Relacionais<div class="menu">';
+			menu_final += getRelationalOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getRelationalOperators();
+		}
+	}
+	menu_final += '</div></div>';
+
+	menu_final = $(menu_final);
+	var div_temp = $('<div class="single_element_expression ghost_element"></div>');
+	div_temp.append(menu_final);
+	div_to_render.append(div_temp);
+	menu_final.dropdown('set selected', Models.ARITHMETIC_TYPES.minus);
+
+	div_temp.on('click', function() {
+		var sera = position;
+
+		if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_arithmetic) >= 0) {
+			expression_array.splice(sera, 0, new Models.ExpressionOperator(Models.EXPRESSION_TYPES.exp_arithmetic,Models.ARITHMETIC_TYPES.minus));
+		} else if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_logic) >= 0) {
+			expression_array.splice(sera, 0, new Models.ExpressionOperator(Models.EXPRESSION_TYPES.exp_logic,Models.LOGIC_COMPARISON.equals_to));
+		} else if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_conditional) >= 0) {
+			expression_array.splice(sera, 0, new Models.ExpressionOperator(Models.EXPRESSION_TYPES.exp_conditional,Models.ARITHMETIC_COMPARISON.greater_than));
+		}
+
+		renderExpression(command, function_obj, div_to_render, expression_array);
+	});
+}
+
+function renderFinalAddElements (div_to_render, types_included, expression_array, command, function_obj, position) {
+
+	var menu_final = '<div class="ui dropdown disabled usepointer"><div class="text"> + </div><i class="dropdown icon"></i><div class="menu">';
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_arithmetic) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Aritméticos<div class="menu">';
+			menu_final += getArithmeticOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getArithmeticOperators();
+		}
+	}
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_logic) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Lógicos<div class="menu">';
+			menu_final += getLogicOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getLogicOperators();
+		}
+	}
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_conditional) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Relacionais<div class="menu">';
+			menu_final += getRelationalOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getRelationalOperators();
+		}
+	}
+	menu_final += '</div></div>';
+
+	menu_final = $(menu_final);
+	var div_temp = $('<div class="single_element_expression ghost_element"></div>');
+	div_temp.append(menu_final);
+	div_to_render.append(div_temp);
+	menu_final.dropdown('set selected', Models.ARITHMETIC_TYPES.plus);
+
+	div_temp.on('click', function() {
+		var sera = position;
+
+		if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_arithmetic) >= 0) {
+			expression_array.splice(sera, 0, new Models.ExpressionOperator(Models.EXPRESSION_TYPES.exp_arithmetic,Models.ARITHMETIC_TYPES.plus));
+		} else if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_logic) >= 0) {
+			expression_array.splice(sera, 0, new Models.ExpressionOperator(Models.EXPRESSION_TYPES.exp_logic,Models.LOGIC_COMPARISON.equals_to));
+		} else if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_conditional) >= 0) {
+			expression_array.splice(sera, 0, new Models.ExpressionOperator(Models.EXPRESSION_TYPES.exp_conditional,Models.ARITHMETIC_COMPARISON.greater_than));
+		}
+		expression_array.splice(sera + 1, 0, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+
+		renderExpression(command, function_obj, div_to_render, expression_array);
+	});
+}
+
+function renderOperatorMenu (command, function_obj, div_to_render, expression_element, types_included, position, expression_array) {
+
+	var menu_final = '<div class="ui dropdown"><div class="text"> + </div><i class="dropdown icon"></i><div class="menu">';
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_arithmetic) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Aritméticos<div class="menu">';
+			menu_final += getArithmeticOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getArithmeticOperators();
+		}
+	}
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_logic) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Lógicos<div class="menu">';
+			menu_final += getLogicOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getLogicOperators();
+		}
+	}
+	if (types_included.indexOf(Models.EXPRESSION_TYPES.exp_conditional) >= 0) {
+		if (types_included.length > 1) {
+			menu_final += '<div class="item"><i class="dropdown icon"></i>Relacionais<div class="menu">';
+			menu_final += getRelationalOperators();
+			menu_final += '</div></div>';
+		} else {
+			menu_final += getRelationalOperators();
+		}
+	}
+	menu_final += '</div></div>';
+
+	menu_final = $(menu_final);
+	var div_temp = $('<div class="single_element_expression" data-index="'+position+'"></div>');
+	div_temp.append(menu_final);
+	div_to_render.append(div_temp);
+	menu_final.dropdown({
+		onChange: function(value, text, $selectedItem) {
+      		expression_element.item = $selectedItem.data('value');
+      		expression_element.type_op = $selectedItem.data('type');
+    	}
+	});
+
+	menu_final.dropdown('set selected', expression_element.item);
+}
+
+function getArithmeticOperators () {
+	var arithmetic_operators;
+	arithmetic_operators = '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_arithmetic+'" data-value="'+Models.ARITHMETIC_TYPES.plus+'">+</div>';
+	arithmetic_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_arithmetic+'" data-value="'+Models.ARITHMETIC_TYPES.minus+'">-</div>';
+	arithmetic_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_arithmetic+'" data-value="'+Models.ARITHMETIC_TYPES.multiplication+'">*</div>';
+	arithmetic_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_arithmetic+'" data-value="'+Models.ARITHMETIC_TYPES.division+'">/</div>';
+	arithmetic_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_arithmetic+'" data-value="'+Models.ARITHMETIC_TYPES.module+'">%</div>';
+	return arithmetic_operators;
+}
+
+function getLogicOperators () {
+	var logic_operators;
+	logic_operators = '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_logic+'" data-value="'+Models.LOGIC_COMPARISON.equals_to+'">==</div>';
+	logic_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_logic+'" data-value="'+Models.LOGIC_COMPARISON.not_equals_to+'">!=</div>';
+	logic_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_logic+'" data-value="'+Models.LOGIC_COMPARISON.and+'">&&</div>';
+	logic_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_logic+'" data-value="'+Models.LOGIC_COMPARISON.or+'">||</div>';
+	return logic_operators;
+}
+
+function getRelationalOperators () {
+	var relational_operators;
+	relational_operators = '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_conditional+'" data-value="'+Models.ARITHMETIC_COMPARISON.greater_than+'">></div>';
+	relational_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_conditional+'" data-value="'+Models.ARITHMETIC_COMPARISON.less_than+'"><</div>';
+	relational_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_conditional+'" data-value="'+Models.ARITHMETIC_COMPARISON.equals_to+'">==</div>';
+	relational_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_conditional+'" data-value="'+Models.ARITHMETIC_COMPARISON.not_equals_to+'">!=</div>';
+	relational_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_conditional+'" data-value="'+Models.ARITHMETIC_COMPARISON.greater_than_or_equals_to+'">>=</div>';
+	relational_operators += '<div class="item" data-type="'+Models.EXPRESSION_TYPES.exp_conditional+'" data-value="'+Models.ARITHMETIC_COMPARISON.less_than_or_equals_to+'"><=</div>';
+	return relational_operators;
+}

js/visualUI/commands/variable_value_menu.js

@@ -66,14 +66,14 @@ export function renderMenu (command, ref_object, dom_object, function_obj, size_
 		menu_var_or_value += '<div class="menu menu_only_functions">';
 		menu_var_or_value += '</div></div>';
 
-		if (command.type == Models.COMMAND_TYPES.attribution) {
+/*		if (command.type == Models.COMMAND_TYPES.attribution) {
 			menu_var_or_value += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 			menu_var_or_value += '<div class="menu">';
 			menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 			menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 			menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 			menu_var_or_value += '</div></div>';
-		}
+		}*/
 	}
 
     menu_var_or_value += '</div></div>';
@@ -294,14 +294,14 @@ 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) {
 				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 				context_menu += '<div class="menu">';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 				context_menu += '</div></div>';
-			}
+			}*/
 
 			context_menu += '</div></div>';
 
@@ -364,14 +364,14 @@ 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) {
 				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 				context_menu += '<div class="menu">';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 				context_menu += '</div></div>';
-			}
+			}*/
 
 			context_menu += '</div></div>';
 
@@ -424,14 +424,14 @@ 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) {
 				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 				context_menu += '<div class="menu">';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 				context_menu += '</div></div>';
-			}
+			}*/
 
 			context_menu += '</div></div>';
 
@@ -485,14 +485,14 @@ 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) {
 				context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 				context_menu += '<div class="menu">';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 				context_menu += '</div></div>';
-			}
+			}*/
 
 			context_menu += '</div></div>';
 
@@ -547,7 +547,7 @@ 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 && !dom_object.hasClass('var_attributed')) {
+			/*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');
@@ -556,7 +556,7 @@ function variableValueMenuCode (command, variable_obj, dom_object, function_obj,
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 				context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 				context_menu += '</div></div>';
-			}
+			}*/
 
 			context_menu += '</div></div>';
 
@@ -602,14 +602,14 @@ 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) {
 			context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 			context_menu += '<div class="menu">';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 			context_menu += '</div></div>';
-		}
+		}*/
 
 		context_menu += '</div></div>';
 
@@ -858,14 +858,14 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 		context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
 
-		if (command.type == Models.COMMAND_TYPES.attribution) {
+		/*if (command.type == Models.COMMAND_TYPES.attribution) {
 			context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 			context_menu += '<div class="menu">';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 			context_menu += '</div></div>';
-		}
+		}*/
 
 		context_menu += '</div></div>';
 
@@ -917,14 +917,14 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 		context_menu += '<div class="item" data-clear="true">'+LocalizedStrings.getUI('btn_clear')+'</div>';
 
-		if (command.type == Models.COMMAND_TYPES.attribution) {
+		/*if (command.type == Models.COMMAND_TYPES.attribution) {
 			context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 			context_menu += '<div class="menu">';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 			context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 			context_menu += '</div></div>';
-		}
+		}*/
 
 		context_menu += '</div></div>';
 
@@ -956,9 +956,9 @@ function openInputToFunction (command, ref_object, dom_object, menu_var_or_value
 		});
 	}
 
-	if (command.type == Models.COMMAND_TYPES.attribution) {
+	/*if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
-	}
+	}*/
 }
 
 function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected, expression_element) {
@@ -1000,7 +1000,7 @@ 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 && !dom_object.hasClass('var_attributed')) {
+	/*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');
@@ -1009,7 +1009,7 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 		context_menu += '</div></div>';
-	}
+	}*/
 
 	context_menu += '</div></div>';
 
@@ -1045,9 +1045,9 @@ function openInputToVariable (command, ref_object, dom_object, menu_var_or_value
 	  selectOnKeydown: false
 	});
 
-	if (command.type == Models.COMMAND_TYPES.attribution) {
+	/*if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected);
-	}
+	}*/
 }
 
 
@@ -1069,14 +1069,14 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 	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) {
 		context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
 		context_menu += '<div class="menu">';
 		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
 		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
 		context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
 		context_menu += '</div></div>';
-	}
+	}*/
 
 	context_menu += '</div></div>';
 
@@ -1168,9 +1168,9 @@ function openInputToValue (command, ref_object, dom_object, menu_var_or_value, f
 		openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element)
 	});
 
-	if (command.type == Models.COMMAND_TYPES.attribution) {
+	/*if (command.type == Models.COMMAND_TYPES.attribution) {
 		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
-	}
+	}*/
 }
 
 

js/visualUI/functions.js

@@ -404,34 +404,37 @@ export function renderFunction (function_obj) {
     });
   }
 
-  var teste  = '.ui.sticky.sticky_cont_'+cont;
-  $(teste).sticky({
-    context: '.ui.bottom.attached.segment.commands_list_div.commands_cont_'+cont,
-    scrollContext: '.ivprog_visual_panel',
-    observeChanges: true,
-    offset: 40,
-    onStick: function (evt) {
-      $(teste).css('top', '20px', 'important');
-    }, 
-    onBottom: function (evt) {
-      $(teste).css('top', '20px', 'important');
-    },
-    onUnstick: function (evt) {
-      $(teste).css('top', '20px', 'important');
-    },
-    onReposition: function (evt) {
-      $(teste).css('top', '20px', 'important');
-    },
-    onScroll: function (evt) {
-      $(teste).css('top', '20px', 'important');
-      if (!isVisible($(teste), $(teste).parent())) {
-        $(teste).removeClass('fixed');
+  if (function_obj.commands.length > 0) {
+    var teste  = '.ui.sticky.sticky_cont_'+cont;
+    $(teste).sticky({
+      context: '.ui.bottom.attached.segment.commands_list_div.commands_cont_'+cont,
+      scrollContext: '.ivprog_visual_panel',
+      observeChanges: true,
+      offset: 40,
+      onStick: function (evt) {
+        $(teste).css('top', '20px', 'important');
+      }, 
+      onBottom: function (evt) {
+        $(teste).css('top', '20px', 'important');
+      },
+      onUnstick: function (evt) {
+        $(teste).css('top', '20px', 'important');
+      },
+      onReposition: function (evt) {
+        $(teste).css('top', '20px', 'important');
+      },
+      onScroll: function (evt) {
+        $(teste).css('top', '20px', 'important');
+        if (!isVisible($(teste), $(teste).parent())) {
+          $(teste).removeClass('fixed');
+        }
+      },
+      onTop: function (evt) {
+        $(teste).css('top', '20px', 'important');
       }
-    },
-    onTop: function (evt) {
-      $(teste).css('top', '20px', 'important');
-    }
-  });
+    });
+  }
+  
   cont ++;
 
   return appender;

js/visualUI/ivprog_elements.js

@@ -15,7 +15,7 @@ export const EXPRESSION_TYPES = Object.freeze({exp_conditional:"exp_conditional"
 
 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 LOGIC_COMPARISON = Object.freeze({equals_to:"equals_to", not_equals_to:"not_equals_to", and:"and", or:"or", not:"not"});
 
 export const SYSTEM_FUNCTIONS_CATEGORIES = Object.freeze({math:"math", text:"text_t", arrangement:"arrangement", conversion:"conversion"});
 
@@ -101,6 +101,14 @@ export class Attribution {
   }
 }
 
+export class ExpressionOperator {
+
+  constructor (type_op, item) {
+    this.type_op = type_op; // Logic, Arithmetic OR Relational
+    this.item = item;
+  }
+}
+
 export class ExpressionElement {
 
   constructor (type_exp, itens = []) {