Trabalhando o visual

build/ivprog.bundle.js

@@ -176,7 +176,7 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-// Generated from /tmp/tmp-85364ifhdHrTFavt/ivprog.g4 by ANTLR 4.7
+// Generated from /tmp/tmp-3599k8bI6A2Zxbgf/ivprog.g4 by ANTLR 4.7
 // jshint ignore: start
 var antlr4 = __webpack_require__(2);
 
@@ -766,7 +766,7 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-// Generated from /tmp/tmp-8536OBchj5po7IMG/ivprog.g4 by ANTLR 4.7
+// Generated from /tmp/tmp-3599dRlq2LyCsP22/ivprog.g4 by ANTLR 4.7
 // jshint ignore: start
 var antlr4 = __webpack_require__(2);
 
@@ -1420,7 +1420,7 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports, __webpack_require__) {
 
-// Generated from /tmp/tmp-8536rtngVqZH47ZG/ivprog.g4 by ANTLR 4.7
+// Generated from /tmp/tmp-3599DE70EXHYx5iE/ivprog.g4 by ANTLR 4.7
 // jshint ignore: start
 var antlr4 = __webpack_require__(2);
 
@@ -21997,6 +21997,8 @@ function addFunctionHandler() {
 }
 
 function addParameter(function_obj, function_container) {
+  var is_from_click = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
   if (function_obj.parameters_list == null) {
     function_obj.parameters_list = [];
   }
@@ -22004,7 +22006,12 @@ function addParameter(function_obj, function_container) {
   function_obj.parameters_list.push(new_parameter);
   counter_new_parameters++;
 
-  renderParameter(function_obj, new_parameter, function_container);
+  var newe = renderParameter(function_obj, new_parameter, function_container);
+
+  if (is_from_click) {
+    newe.css('display', 'none');
+    newe.fadeIn();
+  }
 }
 
 function updateReturnType(function_obj, new_type) {
@@ -22043,7 +22050,8 @@ function addHandlers(function_obj, function_container) {
   });
 
   function_container.find(".add_parameter_button").on('click', function (e) {
-    addParameter(function_obj, function_container);
+    window.insertContext = true;
+    addParameter(function_obj, function_container, true);
   });
 
   function_container.find('.menu_commands').dropdown({
@@ -22182,6 +22190,28 @@ function renderFunction(function_obj) {
       hide: 0
     }
   });
+
+  Sortable.create(appender.find(".variables_list_div")[0], {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'local_vars_drag_' + program.functions.indexOf(function_obj),
+    onEnd: function onEnd(evt) {
+      updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
+    }
+  });
+
+  if (appender.find(".container_parameters_list")[0]) {
+    Sortable.create(appender.find(".container_parameters_list")[0], {
+      handle: '.ellipsis',
+      animation: 100,
+      ghostClass: 'ghost',
+      group: 'parameters_drag_' + program.functions.indexOf(function_obj),
+      onEnd: function onEnd(evt) {
+        updateSequenceParameters(evt.oldIndex, evt.newIndex, function_obj);
+      }
+    });
+  }
 }
 
 function initVisualUI() {
@@ -22315,8 +22345,31 @@ var is_iassign = false;
       updateSequenceFunction(evt.oldIndex, evt.newIndex);
     }
   });
+
+  var listGlobalsHandle = document.getElementById("listGlobalsHandle");
+  Sortable.create(listGlobalsHandle, {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'globals_divs_drag',
+    onEnd: function onEnd(evt) {
+      updateSequenceGlobals(evt.oldIndex, evt.newIndex);
+    }
+  });
 });
 
+function updateSequenceParameters(oldIndex, newIndex, function_obj) {
+  function_obj.parameters_list.splice(newIndex, 0, function_obj.parameters_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceLocals(oldIndex, newIndex, function_obj) {
+  function_obj.variables_list.splice(newIndex, 0, function_obj.variables_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceGlobals(oldIndex, newIndex) {
+  program_obj.globals.splice(newIndex, 0, program_obj.globals.splice(oldIndex, 1)[0]);
+}
+
 function updateSequenceFunction(oldIndex, newIndex) {
   program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
 }
@@ -22434,9 +22487,10 @@ function toggleVisualCoding() {
 function removeParameter(function_obj, parameter_obj, parameter_container) {
   var index = function_obj.parameters_list.indexOf(parameter_obj);
   if (index > -1) {
+    window.insertContext = true;
     function_obj.parameters_list.splice(index, 1);
   }
-  (0, _jquery2.default)(parameter_container).remove();
+  (0, _jquery2.default)(parameter_container).fadeOut();
 }
 
 function updateParameterType(parameter_obj, new_type) {
@@ -22454,7 +22508,7 @@ function updateParameterType(parameter_obj, new_type) {
 function renderParameter(function_obj, parameter_obj, function_container) {
   var ret = "";
 
-  ret += '<div class="ui label function_name_parameter">';
+  ret += '<div class="ui label function_name_parameter pink"><i class="ui icon ellipsis vertical inverted"></i>';
 
   ret += '<div class="ui dropdown parameter_type">';
 
@@ -22490,7 +22544,7 @@ function renderParameter(function_obj, parameter_obj, function_container) {
 
   ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">' + parameter_obj.name + '</span></div> ';
 
-  ret += ' <i class="red icon times remove_parameter"></i></div>';
+  ret += ' <i class="yellow inverted icon times remove_parameter"></i></div>';
 
   ret = (0, _jquery2.default)(ret);
 
@@ -22513,6 +22567,8 @@ function renderParameter(function_obj, parameter_obj, function_container) {
   ret.find('.label_enable_name_parameter').on('click', function (e) {
     enableNameParameterUpdate(parameter_obj, ret);
   });
+
+  return ret;
 }
 
 var opened_name_parameter = false;
@@ -22750,11 +22806,12 @@ function updateType(global_var, new_type) {
 function removeGlobal(global_var, global_container) {
 	var index = window.program_obj.globals.indexOf(global_var);
 	if (index > -1) {
+		window.insertContext = true;
 		window.program_obj.globals.splice(index, 1);
 	}
 	global_container.children().off();
 	global_container.off();
-	global_container.remove();
+	global_container.fadeOut();
 }
 
 function updateInitialValues(global_var) {
@@ -23115,7 +23172,7 @@ function updateColumnsAndRowsText(global_container, global_var) {
 
 function renderGlobal(global_var) {
 
-	var element = '<div class="ui label global_container pink"><div class="global_const">const: ';
+	var element = '<div class="ui label global_container pink"><i class="ui icon ellipsis vertical inverted"></i><div class="global_const">const: ';
 
 	element += '<i class="ui icon toggle ' + (global_var.is_constant ? "on" : "off") + ' alternate_constant"></i></div>';
 
@@ -23920,7 +23977,14 @@ var Program = exports.Program = function () {
     value: function addFunction(function_to_add) {
 
       _melankeWatchjs2.default.watch(function_to_add.parameters_list, function () {
-        AlgorithmManagement.renderAlgorithm();
+        if (window.insertContext) {
+          setTimeout(function () {
+            AlgorithmManagement.renderAlgorithm();
+          }, 300);
+          window.insertContext = false;
+        } else {
+          AlgorithmManagement.renderAlgorithm();
+        }
       }, 1);
 
       _melankeWatchjs2.default.watch(function_to_add.variables_list, function () {
@@ -24045,13 +24109,13 @@ function removeVariable(variable_obj, variable_container) {
 
 	var index = function_associated.variables_list.indexOf(variable_obj);
 	if (index > -1) {
-		//function_associated.variables_list[index] = null;
+		window.insertContext = true;
 		delete function_associated.variables_list[index];
 		function_associated.variables_list.splice(index, 1);
 	}
 	variable_container.children().off();
 	variable_container.off();
-	variable_container.remove();
+	variable_container.fadeOut();
 }
 
 function updateType(variable_obj, new_type) {
@@ -24096,7 +24160,7 @@ function addHandlers(variable_obj, variable_container) {
 
 function renderVariable(function_container, new_var, function_obj) {
 
-	var element = '<div class="ui label variable_container pink">';
+	var element = '<div class="ui label variable_container pink"><i class="ui icon ellipsis vertical inverted"></i>';
 
 	element += '<div class="ui dropdown variable_type">';
 

css/ivprog-visual-1.0.css

@@ -479,7 +479,7 @@ div.function_name_div_updated:active,
 
 .yellow.icon.times.remove_global,
 .yellow.icon.times.remove_variable,
-.red.icon.times.remove_parameter {
+.yellow.icon.times.remove_parameter {
 	float: right;
     margin-right: -1px;
     margin-left: 8px;
@@ -487,7 +487,7 @@ div.function_name_div_updated:active,
 }
 
 .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 {
+.function_name_parameter:hover > .yellow.icon.times.remove_parameter {
 	opacity: 1;
 }
 
@@ -650,7 +650,7 @@ div.function_name_div_updated:active,
 .global_var .circle.add_global_button,
 .ui.add_var_context .icon.plus.circle,
 .inline_add_command .icon.plus.circle {
-	z-index: 100;
+	z-index: 10;
 	color: #bf80d4!important;
 	cursor: pointer;
 	font-style: 120%;
@@ -658,7 +658,7 @@ div.function_name_div_updated:active,
 .global_var i.back,
 .ui.add_var_context .icon.circle.back,
 .inline_add_command .icon.circle.back {
-	z-index: 99;
+	z-index: 9;
 	color: white !important;
 }
 .ui.add_var_context{
@@ -691,15 +691,18 @@ div.function_name_div_updated:active,
     font-size: 110%;
 }
 .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 {
+.variable_container .variable_type,  .variable_container .span_value_variable, .variable_container .editing_name_var,
+.ui.dropdown.parameter_type, .parameter_div_edit {
 	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,
-.variable_container .variable_type:hover,  .variable_container .span_value_variable:hover, .variable_container .editing_name_var:hover {
+.variable_container .variable_type:hover,  .variable_container .span_value_variable:hover, .variable_container .editing_name_var:hover,
+.ui.dropdown.parameter_type:hover, .parameter_div_edit:hover {
 	background-color: #545353;
 }
 .yellow.icon.times.remove_global,
@@ -728,4 +731,39 @@ div.function_name_div_updated:active,
 .ui.dropdown.variable_type {
 	padding: 5px;
 }
-/*#ab0054*/
+
+.global_var .global_container .ellipsis,
+.variable_container .ui.icon.ellipsis.vertical.inverted,
+.ui.label.function_name_parameter.pink .ui.icon.ellipsis.vertical.inverted {
+	position: relative;
+    margin-left: -3px;
+    margin-right: 4px;
+    opacity: 0;
+    cursor: move;
+    font-size: 120%;
+}
+
+.global_container:hover > .ellipsis,
+.variable_container:hover > .ui.icon.ellipsis.vertical.inverted {
+	opacity: 1;
+}
+
+.glyphicon.glyphicon-move.move_function i {
+	font-size: 130%;
+}
+
+.span_name_parameter.label_enable_name_parameter {
+	font-size: 94%;
+    font-weight: 700;
+}
+
+.ui.dropdown.parameter_type {
+	font-size: 96%;
+}
+.ui.label.function_name_parameter .ellipsis {
+	font-size: 96% !important;
+	margin-left: .05em !important;
+}
+.ui.label.function_name_parameter:hover > .ellipsis {
+	opacity: 1 !important;
+}

index.html

@@ -78,7 +78,7 @@
 
           <div class="ui icon button add-globalVar-button add_global_button purple"><i class="icon superscript"></i></div>
 
-          <div class="list_globals"></div>
+          <div class="list_globals" id="listGlobalsHandle"></div>
 
         </div>
 

js/visualUI/functions.js

@@ -125,7 +125,7 @@ function addFunctionHandler () {
   renderFunction(new_function);
 }
 
-function addParameter (function_obj, function_container) {
+function addParameter (function_obj, function_container, is_from_click = false) {
   if (function_obj.parameters_list == null) {
     function_obj.parameters_list = [];
   }
@@ -133,7 +133,12 @@ function addParameter (function_obj, function_container) {
   function_obj.parameters_list.push(new_parameter);
   counter_new_parameters ++;
 
-  renderParameter(function_obj, new_parameter, function_container);
+  var newe = renderParameter(function_obj, new_parameter, function_container);
+
+  if (is_from_click) {
+    newe.css('display', 'none');
+    newe.fadeIn();
+  }
 }
 
 function updateReturnType (function_obj, new_type, new_dimensions = 0) {
@@ -170,7 +175,8 @@ function addHandlers (function_obj, function_container) {
   });
 
   function_container.find( ".add_parameter_button" ).on('click', function(e){
-    addParameter(function_obj, function_container);
+    window.insertContext = true;
+    addParameter(function_obj, function_container, true);
   });
 
   function_container.find('.menu_commands').dropdown({
@@ -334,6 +340,28 @@ export function renderFunction (function_obj) {
       hide: 0
     }
   });
+
+  Sortable.create(appender.find(".variables_list_div")[0], {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'local_vars_drag_' + program.functions.indexOf(function_obj),
+    onEnd: function (evt) {
+       updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
+    }
+  });
+
+  if (appender.find(".container_parameters_list")[0]) {
+    Sortable.create(appender.find(".container_parameters_list")[0], {
+      handle: '.ellipsis',
+      animation: 100,
+      ghostClass: 'ghost',
+      group: 'parameters_drag_' + program.functions.indexOf(function_obj),
+      onEnd: function (evt) {
+         updateSequenceParameters(evt.oldIndex, evt.newIndex, function_obj);
+      }
+    });
+  }
 }
 
 export function initVisualUI () {
@@ -468,8 +496,31 @@ $( document ).ready(function() {
     }
   });
 
+  var listGlobalsHandle = document.getElementById("listGlobalsHandle");
+  Sortable.create(listGlobalsHandle, {
+    handle: '.ellipsis',
+    animation: 100,
+    ghostClass: 'ghost',
+    group: 'globals_divs_drag',
+    onEnd: function (evt) {
+       updateSequenceGlobals(evt.oldIndex, evt.newIndex);
+    }
+  });
+
 });
 
+function updateSequenceParameters (oldIndex, newIndex, function_obj) {
+  function_obj.parameters_list.splice(newIndex, 0, function_obj.parameters_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceLocals (oldIndex, newIndex, function_obj) {
+  function_obj.variables_list.splice(newIndex, 0, function_obj.variables_list.splice(oldIndex, 1)[0]);
+}
+
+function updateSequenceGlobals (oldIndex, newIndex) {
+  program_obj.globals.splice(newIndex, 0, program_obj.globals.splice(oldIndex, 1)[0]);
+}
+
 function updateSequenceFunction (oldIndex, newIndex) {
   program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
 }
@@ -589,9 +640,10 @@ function toggleVisualCoding () {
 function removeParameter (function_obj, parameter_obj, parameter_container) {
   var index = function_obj.parameters_list.indexOf(parameter_obj);
   if (index > -1) {
+    window.insertContext = true;
     function_obj.parameters_list.splice(index, 1);
   }
-  $(parameter_container).remove();
+  $(parameter_container).fadeOut();
 }
 
 function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
@@ -608,7 +660,7 @@ function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
 function renderParameter (function_obj, parameter_obj, function_container) {
   var ret = "";
 
-  ret += '<div class="ui label function_name_parameter">';
+  ret += '<div class="ui label function_name_parameter pink"><i class="ui icon ellipsis vertical inverted"></i>';
 
   ret += '<div class="ui dropdown parameter_type">';
 
@@ -652,7 +704,7 @@ function renderParameter (function_obj, parameter_obj, function_container) {
 
   ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">'+parameter_obj.name+'</span></div> ';
 
-  ret += ' <i class="red icon times remove_parameter"></i></div>';
+  ret += ' <i class="yellow inverted icon times remove_parameter"></i></div>';
 
   ret = $(ret);
   
@@ -676,6 +728,7 @@ function renderParameter (function_obj, parameter_obj, function_container) {
     enableNameParameterUpdate(parameter_obj, ret);
   });
 
+  return ret;
 }
 
 var opened_name_parameter = false;

js/visualUI/globals.js

@@ -50,11 +50,12 @@ function updateType (global_var, new_type, new_dimensions = 0) {
 function removeGlobal (global_var, global_container) {
 	var index = window.program_obj.globals.indexOf(global_var);
 	if (index > -1) {
+		window.insertContext = true;
 	  window.program_obj.globals.splice(index, 1);
 	}
 	global_container.children().off();
 	global_container.off();
-	global_container.remove();
+	global_container.fadeOut();
 }
 
 function updateInitialValues (global_var) {
@@ -424,7 +425,7 @@ function updateColumnsAndRowsText (global_container, global_var) {
 
 export function renderGlobal (global_var) {
 
-	var element = '<div class="ui label global_container pink"><div class="global_const">const: ';
+	var element = '<div class="ui label global_container pink"><i class="ui icon ellipsis vertical inverted"></i><div class="global_const">const: ';
 
 	element += '<i class="ui icon toggle '+(global_var.is_constant?"on":"off")+' alternate_constant"></i></div>';
  	

js/visualUI/ivprog_elements.js

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

js/visualUI/variables.js

@@ -37,13 +37,13 @@ function removeVariable (variable_obj, variable_container) {
 
 	var index = function_associated.variables_list.indexOf(variable_obj);
 	if (index > -1) {
-	  //function_associated.variables_list[index] = null;
+	  window.insertContext = true;
 	  delete function_associated.variables_list[index];
 	  function_associated.variables_list.splice(index, 1);
 	}
 	variable_container.children().off();
 	variable_container.off();
-	variable_container.remove();
+	variable_container.fadeOut();
 }
 
 function updateType (variable_obj, new_type, new_dimensions = 0) {
@@ -88,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 pink">';
+	var element = '<div class="ui label variable_container pink"><i class="ui icon ellipsis vertical inverted"></i>';
 
 	element += '<div class="ui dropdown variable_type">';