Correção de um problema de processamento e alterações visuais

css/ivprog-visual-1.0.css

@@ -153,7 +153,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 {
+.all_elements_write, .container_var_element_control, .inline_add_command {
 	display: inline;
 }
 
@@ -440,8 +440,8 @@ div.function_name_div_updated {
 	margin-right: 3px;
 }
 
-.global_container .global_type:hover, .editing_name_var:hover, .global_container .span_value_variable:hover,
-.variable_container .variable_type:hover, .variable_container .span_name_variable:hover, .variable_container .span_value_variable:hover,
+.global_container .global_type:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover, .variable_container .span_value_variable:hover,
 .ui.dropdown.function_return:hover, div.function_name_div_updated:hover,
 .ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
 	background: #848484;
@@ -478,7 +478,7 @@ div.function_name_div_updated:active,
 }
 
 .yellow.icon.times.remove_global,
-.red.icon.times.remove_variable,
+.yellow.icon.times.remove_variable,
 .red.icon.times.remove_parameter {
 	float: right;
     margin-right: -1px;
@@ -486,7 +486,7 @@ div.function_name_div_updated:active,
     opacity: 0;
 }
 
-.global_container:hover > .yellow.icon.times.remove_global, .variable_container:hover > .red.icon.times.remove_variable,
+.global_container:hover > .yellow.icon.times.remove_global, .variable_container:hover > .yellow.icon.times.remove_variable,
 .function_name_parameter:hover > .red.icon.times.remove_parameter {
 	opacity: 1;
 }
@@ -640,46 +640,92 @@ div.function_name_div_updated:active,
 	font-size: 130%;
 }
 
-.global_var .circle.add_global_button, .global_var i.back {
+.global_var .circle.add_global_button, .global_var i.back,
+.ui.add_var_context .icon.plus.circle, .ui.add_var_context .icon.circle.back,
+.inline_add_command .icon.plus.circle, .inline_add_command .icon.circle.back {
 	position: absolute;
     margin-top: 22px;
     margin-left: 22px;
 }
-.global_var .circle.add_global_button {
+.global_var .circle.add_global_button,
+.ui.add_var_context .icon.plus.circle,
+.inline_add_command .icon.plus.circle {
 	z-index: 100;
 	color: #bf80d4!important;
 	cursor: pointer;
 	font-style: 120%;
 }
-.global_var i.back {
+.global_var i.back,
+.ui.add_var_context .icon.circle.back,
+.inline_add_command .icon.circle.back {
 	z-index: 99;
 	color: white !important;
 }
+.ui.add_var_context{
+	margin-left: -4px;
+}
+.inline_add_command {
+	color: #ab0054 !important;
+}
 
+.ui.add_var_context .icon.superscript {
+	font-size: 110%;
+}
+.ui.add_var_context .ui.icon.button.purple {
+	padding: 8px;
+}
 
-.global_container .global_const, .global_container .global_type {
+.global_container .global_const, .global_container .global_type,
+.variable_container .variable_type {
 	font-size: 114%;
 }
-.global_container .editing_name_var {
+.global_container .editing_name_var,
+.variable_container .editing_name_var {
 	font-size: 108%;
 }
 .global_container .global_const i {
 	font-size: 120%;
 }
-.global_container .span_value_variable {
+.global_container .span_value_variable,
+.variable_container .span_value_variable {
     font-size: 110%;
 }
-.global_container .global_type, .global_container .editing_name_var, .global_container .span_value_variable {
+.global_container .global_type, .global_container .editing_name_var, .global_container .span_value_variable,
+.variable_container .variable_type,  .variable_container .span_value_variable, .variable_container .editing_name_var {
 	background: black;
 	border-radius: 5px;
 	padding: 4px;
 	margin-left: 5px;
 	margin-right: 5px;
 }
-.global_container .global_type:hover, .global_container .editing_name_var:hover, .global_container .span_value_variable:hover {
+.global_container .global_type:hover, .global_container .editing_name_var:hover, .global_container .span_value_variable:hover,
+.variable_container .variable_type:hover,  .variable_container .span_value_variable:hover, .variable_container .editing_name_var:hover {
 	background-color: #545353;
 }
-.yellow.icon.times.remove_global {
+.yellow.icon.times.remove_global,
+.yellow.icon.times.remove_variable {
 	color: yellow;
 	font-size: 125%;
-}
+}
+.inline_add_command .icon.circle.back {
+	margin-top: 20px;
+    margin-left: 20px;
+}
+.inline_add_command .icon.plus.circle {
+	color: #ec9962 !important;
+	margin-top: 20px;
+    margin-left: 20px;
+}
+
+.ui.icon.button.dropdown.menu_commands {
+    float: left;
+    color: white;
+    margin-left: -4px;
+    padding: 8px;
+    margin-top: 0.3em;
+}
+
+.ui.dropdown.variable_type {
+	padding: 5px;
+}
+/*#ab0054*/

index.html

@@ -76,8 +76,7 @@
           <i class="icon plus circle purple add_global_button"></i>
           <i class="icon circle white back"></i>
 
-          <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i>
-          </div>
+          <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i></div>
 
           <div class="list_globals"></div>
 

js/assessment/ivprogAssessment.js

@@ -74,7 +74,7 @@ export class IVProgAssessment {
 
   partialEvaluateTestCase (prog, inputList, outputList, name) {
     let partial = (accumulator) => this.evaluateTestCase(prog, inputList, outputList, name, accumulator)
-    patrial = partial.bind(this);
+    partial = partial.bind(this);
     return partial;
   }
 

js/visualUI/functions.js

@@ -104,10 +104,15 @@ window.program_obj = program;
 window.generator = CodeManagement.generate;
 window.runCodeAssessment = runCodeAssessment;
 window.renderAlgorithm = AlgorithmManagement.renderAlgorithm;
+window.insertContext = false;
 
 WatchJS.watch(program.globals, function(){
-  //
-  setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
+  if (window.insertContext) {
+    setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
+    window.insertContext = false;
+  } else {
+    AlgorithmManagement.renderAlgorithm();
+  }
 }, 1);
 
 function addFunctionHandler () {
@@ -186,7 +191,8 @@ function addHandlers (function_obj, function_container) {
   });
 
   function_container.find('.add_var_button_function').on('click', function(e){
-    VariablesManagement.addVariable(function_obj, function_container);
+    window.insertContext = true;
+    VariablesManagement.addVariable(function_obj, function_container, true);
   });
 
   function_container.find('.remove_function_button').on('click', function(e){
@@ -275,11 +281,11 @@ export function renderFunction (function_obj) {
   appender += '</div> <span class="parethesis_function"> ) </span> </div>'
     + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ');
 
-  appender += '<div class="ui icon button add_var_button_function" style="float: left;"><i class="icon superscript"></i></div>';
+  appender += '<div class="ui add_var_context add_var_button_function" style="float: left;"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button purple"><i class="icon superscript"></i></div></div>';
 
   appender += '<div class="ui top attached segment variables_list_div"></div>';
 
-  appender += '<div class="ui icon button dropdown menu_commands" style="float: left;" ><i class="icon code"></i> <div class="menu"> ';
+  appender += '<div class="ui inline_add_command"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button dropdown menu_commands orange" style="float: left;" ><i class="icon code"></i> <div class="menu"> ';
   appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.reader+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_read_var')+ '</a>'
         + '<a class="item" data-command="'+Models.COMMAND_TYPES.writer+'"><i class="upload icon"></i> '+LocalizedStrings.getUI('text_write_var')+'</a>'
         + '<a class="item" data-command="'+Models.COMMAND_TYPES.comment+'"><i class="quote left icon"></i> '+LocalizedStrings.getUI('text_comment')+'</a>'
@@ -291,7 +297,7 @@ export function renderFunction (function_obj) {
         + '<a class="item" data-command="'+Models.COMMAND_TYPES.dowhiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_dowhiletrue')+'</a>'
         + '<a class="item" data-command="'+Models.COMMAND_TYPES.switch+'"><i class="list icon"></i> '+LocalizedStrings.getUI('text_switch')+'</a>'
         + '<a class="item" data-command="'+Models.COMMAND_TYPES.return+'"><i class="reply icon"></i> '+LocalizedStrings.getUI('text_btn_return')+'</a>'
-        + '</div></div>';
+        + '</div></div></div>';
 
   appender += '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_"></div>';
 
@@ -308,7 +314,6 @@ export function renderFunction (function_obj) {
 
   addHandlers(function_obj, appender);
 
-
   // Rendering parameters: 
   for (var j = 0; j < function_obj.parameters_list.length; j++) {
     renderParameter(function_obj, function_obj.parameters_list[j], appender);
@@ -318,13 +323,10 @@ export function renderFunction (function_obj) {
   for (var j = 0; j < function_obj.variables_list.length; j++) {
     VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
   }
-
   // Rendering commands:
   for (var j = 0; j < function_obj.commands.length; j++) {
     CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
   }
-
-
   $('.minimize_function_button').popup({
     content : LocalizedStrings.getUI("tooltip_minimize"),
     delay: {
@@ -334,7 +336,6 @@ export function renderFunction (function_obj) {
   });
 }
 
-
 export function initVisualUI () {
   // MUST USE CONST, LET, OR VAR !!!!!!
   const mainDiv = $('#visual-main-div');
@@ -344,6 +345,7 @@ export function initVisualUI () {
     addFunctionHandler();
   });
   $('.add_global_button').on('click', () => {
+    window.insertContext = true;
     GlobalsManagement.addGlobal(program, true);
   });
 

js/visualUI/ivprog_elements.js

@@ -249,7 +249,12 @@ export class Program {
     }, 1);
 
     WatchJS.watch(function_to_add.variables_list, function(){
-      AlgorithmManagement.renderAlgorithm();
+      if (window.insertContext) {
+        setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
+        window.insertContext = false;
+      } else {
+        AlgorithmManagement.renderAlgorithm();
+      }
     }, 1);
 
     this.functions.push(function_to_add);

js/visualUI/variables.js

@@ -11,7 +11,7 @@ import '../semantic/semantic.min.js';
 
 var counter_new_variables = 0;
 
-export function addVariable (function_obj, function_container) {
+export function addVariable (function_obj, function_container, is_in_click = false) {
 	var new_var = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI('new_variable') + '_' + counter_new_variables, 1);
 	if (function_obj.variables_list == null) {
 		function_obj.variables_list = [];
@@ -20,7 +20,12 @@ export function addVariable (function_obj, function_container) {
 
 	counter_new_variables ++;
 
-	renderVariable(function_container, new_var, function_obj);
+	var newe = renderVariable(function_container, new_var, function_obj);
+
+	if (is_in_click) {
+		newe.css('display', 'none');
+		newe.fadeIn();
+	}
 }
 
 function updateName (variable_obj, new_name) {
@@ -83,7 +88,7 @@ function addHandlers (variable_obj, variable_container) {
 
 export function renderVariable (function_container, new_var, function_obj) {
 
-	var element = '<div class="ui label variable_container">';
+	var element = '<div class="ui label variable_container pink">';
 
 	element += '<div class="ui dropdown variable_type">';
 
@@ -125,7 +130,7 @@ export function renderVariable (function_container, new_var, function_obj) {
 
 	element += ' <span class="character_equals"> = </span> <div class="ui div_valor_var">'+new_var.value+'</div>';    
 
-	element += ' <i class="red icon times remove_variable"></i></div>';
+	element += ' <i class="yellow inverted icon times remove_variable"></i></div>';
 
 	element = $(element);
 
@@ -136,6 +141,8 @@ export function renderVariable (function_container, new_var, function_obj) {
 	addHandlers(new_var, element);
 
 	renderValues(new_var, element);
+
+	return element;
 }
 
 function updateColumnsAndRowsText (variable_container, variable_var) {