Drag and Drop com realce

css/ivprog-visual-1.0.css

@@ -340,4 +340,14 @@ div.buttons_manage_columns {
 .ui.icon.red.exclamation.triangle.error_icon {
 	float: left;
     margin-left: -30px;
+}
+
+/* DOUGLAS */
+/*
+.div-over {
+	border-style: dotted;
+}*/
+
+.div-over {
+	outline: dashed 2px blue;
 }

index.html

@@ -54,7 +54,8 @@
 
           <div class="ui top attached tabular menu">
             <a class="item" data-tab="variaveis">Vari&aacute;veis</a>
-            <a class="item active" data-tab="funcoes">Fun&ccedil;&otilde;es</a>
+            <a class="item active" data-tab="comandos">Comandos</a>
+            <a class="item" data-tab="funcoes">Fun&ccedil;&otilde;es</a>
           </div>
           <div class="ui bottom attached tab segment" data-tab="variaveis">
             <div class="ui one column container segment ivprog_visual_panel loading">
@@ -64,7 +65,7 @@
               <div class="ui container list_globals list-group"></div>
             </div>
           </div>
-          <div class="ui bottom attached tab segment active" data-tab="funcoes">
+          <div class="ui bottom attached tab segment active" data-tab="comandos">
             <div class="ui one column container segment ivprog_visual_panel loading">
                 <!--mudar-->
                 <!-- <div class="ui teal small labeled icon button add_function_button" draggable="true">
@@ -73,8 +74,19 @@
                   </div> -->
 
               <div class="ui container list-group list-commands">
-                <div class="ui divider"></div>
-                <div class="functions_labels"></div>
+              </div>
+
+            </div>
+          </div>
+          <div class="ui bottom attached tab segment" data-tab="funcoes">
+            <div class="ui one column container segment ivprog_visual_panel loading">
+                <!--mudar-->
+                <!-- <div class="ui teal small labeled icon button add_function_button" draggable="true">
+                  <data class="i18n" value="Function">Function</data>
+                  <i class="add icon"></i>
+                  </div> -->
+
+              <div class="ui container list-group functions_labels">
               </div>
 
             </div>
@@ -153,13 +165,13 @@
 
         $('.menu .item')
           .tab();    ;
-
+/*
         document.querySelectorAll('.button.menu-item').forEach(function(element, index, array) {
           element.addEventListener('dragstart', function(e) {
               console.log(this);
 
           }, false);
-        });
+        });*/
       });
     </script>
 

js/visualUI/commands/functioncall-sidebar.js

@@ -0,0 +1,32 @@
+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 VariableValueMenu from './variable_value_menu';
+import * as CommandsManagement from '../commands';
+
+export function createFloatingCommand () {
+	return $('<div class="ui functioncall created_element"> <i class="hand point right icon"></i> <span> funcao() </span></div>');
+}
+
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui functioncall command_container"> <i class="hand point right icon command_drag"></i> <i class="ui icon times red button_remove_command"></i> <div class="var_value_menu_div"></div> </div>');
+	el.data('command', command);
+
+	VariableValueMenu.renderMenu(command, command.function_called, el.find('.var_value_menu_div'), function_obj);
+
+	addHandlers(command, function_obj, el);
+
+	return el;
+}
+
+function addHandlers (command, function_obj, functioncall_dom) {
+
+	functioncall_dom.find('.button_remove_command').on('click', function() {
+		if (CommandsManagement.removeCommand(command, function_obj, functioncall_dom)) {
+			functioncall_dom.remove();
+		}
+	});
+}

js/visualUI/commands_sidebar.js

@@ -15,22 +15,54 @@ import * as DowhiletruesManagement from './commands/dowhiletrue';
 import * as SwitchesManagement from './commands/switch';
 import * as FunctioncallsManagement from './commands/functioncall';
 import * as VariableValueMenuManagement from './commands/variable_value_menu';
+import * as BreaksManagement from './commands/break';
 
 var has_element_created_draged = false;
 var which_element_is_draged = null;
 
 export function removeCommand (command, function_obj, dom_obj) {
+	console.log('debugging removeCommand');
+	console.log('command');
+	console.log(command);
+	console.log('function_obj');
+	console.log(function_obj);
+	console.log('dom_obj');
+	console.log(dom_obj);
+
 	if (function_obj.commands.indexOf(command) > -1) {
 		function_obj.commands.splice(function_obj.commands.indexOf(command), 1);
 		return true;
 	}
 
 	// Utilize dois parantNode, pois o primeiro é o div de comandos
-	if ($(dom_obj[0].parentNode.parentNode).data('command').commands_block.indexOf(command) > -1) {
-		$(dom_obj[0].parentNode.parentNode).data('command').commands_block.splice
-		($(dom_obj[0].parentNode.parentNode).data('command').commands_block.indexOf(command), 1);
+	try {
+		if (dom_obj.parent().parent().data('command').commands_block.indexOf(command) > -1) {
+			dom_obj.parent().parent().data('command').commands_block.splice
+			(dom_obj.parent().parent().data('command').commands_block.indexOf(command), 1);
+			return true;
+		}	
+	} catch (err) {}
+	
+	try {
+		if (dom_obj.parent().parent().data('command').type == Models.COMMAND_TYPES.iftrue) {
+			if (dom_obj.parent().parent().data('command').commands_else.indexOf(command) > -1) {
+				dom_obj.parent().parent().data('command').commands_else.splice
+				(dom_obj.parent().parent().data('command').commands_else.indexOf(command), 1);
+				return true;
+			}
+		}
+	} catch (err) {}
+
+	console.log('veja: ');
+	console.log(dom_obj.parent());
+
+	if (dom_obj.parent().data('switchcase')) {
+		console.log("o que encontrei: ");
+		console.log(dom_obj.parent().data('switchcase'));
+		dom_obj.parent().data('switchcase').commands_block.splice(dom_obj.parent().data('switchcase').commands_block.indexOf(command), 1);
 		return true;
 	}
+
 	return false;
 }
 
@@ -38,6 +70,10 @@ export function createFloatingCommand (function_obj, function_container, command
 	var floatingObject;
 
 	switch (command_type) {
+		case Models.COMMAND_TYPES.break:
+			floatingObject = BreaksManagement.createFloatingCommand();
+			break;
+
 		case Models.COMMAND_TYPES.comment:
 			floatingObject = CommentsManagement.createFloatingCommand();
 			break;
@@ -84,7 +120,7 @@ export function createFloatingCommand (function_obj, function_container, command
 	floatingObject.mouseup(function(evt) {
 	  manageCommand(function_obj, function_container, evt, command_type);
 	});
-
+	
 	floatingObject.css("position", "absolute");
 	mouse_event.type = "mousedown.draggable";
 	mouse_event.target = floatingObject[0];
@@ -101,6 +137,10 @@ export function renderCommand (command, element_reference, before_after_inside,
 			createdElement = CommentsManagement.renderCommand(command, function_obj);
 			break;
 
+		case Models.COMMAND_TYPES.break:
+			createdElement = BreaksManagement.renderCommand(command, function_obj);
+			break;
+
 		case Models.COMMAND_TYPES.reader:
 			createdElement = ReadersManagement.renderCommand(command, function_obj);
 			break;
@@ -148,7 +188,7 @@ export function renderCommand (command, element_reference, before_after_inside,
 			createdElement.insertAfter(element_reference);
 			break;
 
-		case 3:
+		case 3: 
 			element_reference.append(createdElement);
 			break;
 	}
@@ -158,6 +198,10 @@ export function renderCommand (command, element_reference, before_after_inside,
 export function genericCreateCommand (command_type) {
 
 	switch (command_type) {
+
+		case Models.COMMAND_TYPES.break:
+			return new Models.Break();
+
 		case Models.COMMAND_TYPES.comment:
 			return new Models.Comment(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_value, LocalizedStrings.getUI('text_comment'), null, null, false));
 
@@ -168,32 +212,37 @@ export function genericCreateCommand (command_type) {
 			return new Models.Writer([new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true)]);
 
 		case Models.COMMAND_TYPES.attribution:
-			return new Models.Attribution(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false),
+			return new Models.Attribution(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), 
 				[]);
 
 		case Models.COMMAND_TYPES.functioncall:
 			return new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false), null);
 
 		case Models.COMMAND_TYPES.iftrue:
-			return new Models.IfTrue(null, null, null);
+			return new Models.IfTrue(new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.repeatNtimes:
-			return new Models.RepeatNTimes(null, null, null, null);
+			return new Models.RepeatNTimes(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), 
+											new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false),
+										     null, new Models.ConditionalExpression(null), null, null);
 
 		case Models.COMMAND_TYPES.whiletrue:
-			return new Models.WhileTrue(null, null);
+			return new Models.WhileTrue(new Models.ConditionalExpression(null), null);
 
 		case Models.COMMAND_TYPES.dowhiletrue:
-			return new Models.DoWhileTrue(null, null);
+			return new Models.DoWhileTrue(new Models.ConditionalExpression(null), null);
 
 		case Models.COMMAND_TYPES.switch:
-			return new Models.Switch(null, null, null);
+
+			var sc = [new Models.SwitchCase(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true))];
+
+			return new Models.Switch(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.variable_and_function, null, null, null, true), sc);
 	}
 }
 
 function manageCommand (function_obj, function_container, event, command_type) {
 
-	$( ".created_element" ).each(function( index ) {
+	$( ".created_element" ).each(function( index ) { 
 		$(this).remove();
 	});
 
@@ -202,18 +251,19 @@ function manageCommand (function_obj, function_container, event, command_type) {
 	console.log(el);
 	console.log(el.data('fun'));
 
+
 	// Primeiro verificar se ele soltou no espaço da função correta:
 	var hier = el.parentsUntil(".all_functions");
 	var esta_correto = false;
 	var esta_na_div_correta = false;
 	if (el.hasClass("commands_list_div")) {
 		esta_na_div_correta = true;
-	}
+	} 
 	for (var i = 0; i < hier.length; i++) {
 		var temp = $(hier[i]);
 		if (temp.hasClass("commands_list_div")) {
 			esta_na_div_correta = true;
-		}
+		} 
 		if (temp.data('fun') == function_obj) {
 			esta_correto = true;
 			break;
@@ -239,7 +289,7 @@ function manageCommand (function_obj, function_container, event, command_type) {
 		// Se a lista de comandos estiver vazia, então é o primeiro.
 		// Portanto, ele deve soltar o elemento obrigatoriamente no objeto vazio
 		if ((el.data('fun').commands == null)  || (el.data('fun').commands.length == 0)) {
-				// pode adicionar
+				// pode adicionar 
 				el.data('fun').commands = [];
 
 				var new_cmd = genericCreateCommand(command_type);
@@ -247,7 +297,7 @@ function manageCommand (function_obj, function_container, event, command_type) {
 				el.data('fun').commands.push(new_cmd);
 
 				renderCommand(new_cmd, $(function_container).find('.commands_list_div'), 3, function_obj);
-
+			
 		} else { // Entra nesse else, caso já existam outros comandos no bloco:
 
 			findNearbyCommandToAddInFunctionScope(el, event, $(function_container).find('.commands_list_div'), function_obj, command_type);
@@ -255,7 +305,7 @@ function manageCommand (function_obj, function_container, event, command_type) {
 
 	} else {
 		console.log("soltou em um comando");
-		// descobrir em qual comando ele soltou:
+		// descobrir em qual comando ele soltou: 
 		var hier_find = el.parentsUntil(".commands_list_div");
 		var hierarquia_bottom_up = [];
 		if (typeof el.data('command') !== 'undefined') {
@@ -273,38 +323,69 @@ function manageCommand (function_obj, function_container, event, command_type) {
 			console.log(hierarquia_bottom_up[i]);
 		}
 
-		// se a hierarquia possuir apenas um elemento, então está na raiz dos comandos:
+		// Se for do tipo break, verificar se está no contexto correto: 
+		// Caso não esteja no contexto, apenas retorna sem dar continuidade:
+		var is_correct_context = false;
+		if (command_type == Models.COMMAND_TYPES.break) {
+			for (var i = 0; i < hierarquia_bottom_up.length; i++) {
+				if ((hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.repeatNtimes)
+					|| (hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.whiletrue)
+					|| (hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.dowhiletrue)
+					|| (hierarquia_bottom_up[i].type == Models.COMMAND_TYPES.switch)) {
+
+					is_correct_context = true;
+					break;
+
+				}
+			}
+
+			if (!is_correct_context) {
+				console.error("Context not allowed to insert BREAK COMMAND!");
+				return;
+			}
+		}
+
+		
+
+		// se a hierarquia possuir apenas um elemento, então está na raiz dos comandos: 
 		if (hierarquia_bottom_up.length == 1) {
+			console.log('QQ1');
 			var sub_elemento = false;
 			for (var i = 0; i < hier_find.length; i++) {
 				if (typeof $(hier_find[i]).data('command') !== 'undefined') {
+					console.log('QQ2');
 					findBeforeOrAfterCommandToAdd(hier_find[i], event, function_obj, command_type);
 					sub_elemento = true;
 					break;
 				}
 			}
 			if (!sub_elemento) {
+				console.log('QQ3');
 				findBeforeOrAfterCommandToAdd(el[0], event, function_obj, command_type);
 			}
 		} else {
+			console.log('QQ4');
 			// caso exista mais de um elemento na hierarquia:
 			if (typeof $(el).data('command') !== 'undefined') {
+				console.log('QQ5');
 				console.log("PPP1");
 				insertCommandInBlockHierar(el[0], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
 			} else {
+				console.log('QQ6');
 				var sub_elemento = false;
 				for (var i = 0; i < hier_find.length; i++) {
 					if (typeof $(hier_find[i]).data('command') !== 'undefined') {
+						console.log('QQ7');
 						insertCommandInBlockHierar(hier_find[i], event, function_obj, command_type, hier_find, hierarquia_bottom_up);
 						sub_elemento = true;
 						break;
 					}
 				}
 			}
-
+			
 		}
 	}
-
+	
 	has_element_created_draged = false;
 	which_element_is_draged = null;
 }
@@ -312,18 +393,21 @@ function manageCommand (function_obj, function_container, event, command_type) {
 function insertCommandInBlockHierar (el, event, function_obj, command_type, hier_dom, hier_obj) {
 	var el_jq = $(el);
 	var command_parent = el_jq.data('command');
-
+	
 	if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ||
-		(el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.switch) ) {
 
+		console.log('QQ17');
+
 		if ((el_jq.data('command').type == Models.COMMAND_TYPES.repeatNtimes) ||
 			(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
 			(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ) {
 
-			// Se não tiver outro comando ainda no bloco, só adiciona:
+			console.log('QQ18');
+
+			// Se não tiver outro comando ainda no bloco, só adiciona: 
 			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 				command_parent.commands_block = [];
 
@@ -337,9 +421,11 @@ function insertCommandInBlockHierar (el, event, function_obj, command_type, hier
 
 		} else {
 			// QUANDO FOR BLOCO DO TIPO IF OU SWITCH/CASE:
+			addCommandToSwitchCase(event, function_obj, command_type);
 		}
 
 	} else {
+		console.log('QQ19');
 		// entra neste bloco, se soltou o comando sobre outro comando dentro de um subbloco:
 		findBeforeOrAfterCommandToAddInsertBlock(el, event, function_obj, command_type);
 	}
@@ -360,7 +446,7 @@ function findNearbyCommandToAddInBlockScope (el, event, node_list_commands, func
 
 	// Descobrindo o elemento mais próximo:
 	for (var i = 0; i < all_sub.length; i++) {
-
+	
 		t_top = all_sub[i].getBoundingClientRect().top;
 		t_bot = all_sub[i].getBoundingClientRect().top + all_sub[i].getBoundingClientRect().height;
 
@@ -371,10 +457,10 @@ function findNearbyCommandToAddInBlockScope (el, event, node_list_commands, func
 	}
 
 	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
-
+	
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
-
+		
 		var recentComand = genericCreateCommand(command_type);
 		command_parent.commands_block.push(recentComand);
 		//
@@ -401,6 +487,70 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 	var el_jq = $(el);
 	var command_parent = $(el.parentNode.parentNode).data('command');
 	var command_target = el_jq.data('command');
+	var temp_parent = $(el.parentNode.parentNode);
+
+	var is_in_else = false;
+
+	if (!command_parent) {
+		command_parent = el_jq.data('command');
+		temp_parent = el_jq;
+		var hier = el_jq.parentsUntil(".command_container");
+
+		for (var i = 0; i < hier.length; i++) {
+			var temp = $(hier[i]);
+			if (typeof temp.data('else') != 'undefined') {
+				is_in_else = true;
+			}
+			if (typeof temp.data('command') != 'undefined') {
+				command_parent = temp.data('command');
+				temp_parent = temp;
+			}
+		}
+	}
+
+
+	var hier = el_jq.parentsUntil(".command_container");
+	for (var i = 0; i < hier.length; i++) {
+		var temp = $(hier[i]);
+		if (typeof temp.data('else') != 'undefined') {
+			is_in_else = true;
+		}
+	}
+
+	if (command_parent == command_target) {
+		var hier = el_jq.parentsUntil(".command_container");
+
+		for (var i = 0; i < hier.length; i++) {
+			var temp = $(hier[i]);
+			if (typeof temp.data('else') !== 'undefined') {
+				is_in_else = true;
+				break;
+			}
+		}
+	}
+
+	if ((command_parent.type != Models.COMMAND_TYPES.iftrue) && (command_parent.type != Models.COMMAND_TYPES.switch)) {
+		var hier = temp_parent.parentsUntil(".all_cases_div");
+		console.log("vou procurar!!");
+		for (var i = 0; i < hier.length; i++) {
+			console.log("estou vasculhando...");
+			var temp = $(hier[i]);
+			if (typeof temp.data('switchcase') !== 'undefined') {
+				console.log("encontrei");
+				command_parent = temp.data('switchcase');
+				is_in_else = false;
+				break;
+			}
+		}
+	}
+
+	console.log('debugging:');
+	console.log('el_jq');
+	console.log(el_jq);
+	console.log('command_parent');
+	console.log(command_parent);
+	console.log('command_target');
+	console.log(command_target);
 
 	var menor_distancia = 999999999;
 	var antes = true;
@@ -417,27 +567,131 @@ function findBeforeOrAfterCommandToAddInsertBlock (el, event, function_obj, comm
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 
 	if (d_top < d_bot) {
-
+		
 		var recentComand = genericCreateCommand(command_type);
 
-		var index = command_parent.commands_block.indexOf(command_target);
+		console.log('MMM1');
 
-		if (index > -1) {
-		    command_parent.commands_block.splice(index, 0, recentComand);
+		if (is_in_else) {
+
+			console.log('MMM2');
+
+			if (command_parent == command_target) {
+				console.log('MMM3');
+				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
+					command_parent.commands_else = [];
+
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_else.push(recentComand);
+
+					renderCommand(recentComand, el_jq, 3, function_obj);
+				} else { // Se já tem algum comando no bloco:
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, true);
+				}
+				return;
+			}
+			console.log('MMM7');
+			var index = command_parent.commands_else.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_else.splice(index, 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 1, function_obj);
+		} else {
+			console.log('MMM4');
+			if (command_parent == command_target) {
+				console.log('Nxxxx5');
+				if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+					command_parent.commands_block = [];
+					console.log('SSS4');
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_block.push(recentComand);
+
+					renderCommand(recentComand, el_jq, 3, function_obj);
+				} else {
+					console.log('SSS5');
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type);
+				}
+				
+				
+				return;
+			}
+			console.log('MMM6');
+
+			var index = command_parent.commands_block.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_block.splice(index, 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 1, function_obj);
 		}
 
-		renderCommand(recentComand, el, 1, function_obj);
+		
 
 	} else {
+		console.log('XXX1');
 		var recentComand = genericCreateCommand(command_type);
 
-		var index = command_parent.commands_block.indexOf(command_target);
+		if (is_in_else) {
 
-		if (index > -1) {
-		    command_parent.commands_block.splice((index + 1), 0, recentComand);
+			if (command_parent == command_target) {
+				console.log('MMM3');
+				if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
+					command_parent.commands_else = [];
+					console.log('SSS1');
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_else.push(recentComand);
+
+					renderCommand(recentComand, el_jq, 3, function_obj);
+				} else { // Se já tem algum comando no bloco:
+					console.log('SSS2');
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type, true);
+				}
+				return;
+			}
+
+			console.log('XXX2');
+			var index = command_parent.commands_else.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_else.splice((index + 1), 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 2, function_obj);
+
+		} else {
+
+			if (command_parent == command_target) {
+				console.log('Nxxxx78');
+				if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+					command_parent.commands_block = [];
+
+					var recentComand = genericCreateCommand(command_type);
+					command_parent.commands_block.push(recentComand);
+					console.log('SSS6');
+					renderCommand(recentComand, el_jq, 3, function_obj);
+				} else {
+					console.log('SSS7');
+					findInBlockCorrectPlace(el_jq, event, function_obj, command_type);
+				}
+				
+				
+				return;
+			}
+
+			console.log('XXX3');
+			var index = command_parent.commands_block.indexOf(command_target);
+
+			if (index > -1) {
+			    command_parent.commands_block.splice((index + 1), 0, recentComand);
+			}
+
+			renderCommand(recentComand, el, 2, function_obj);
 		}
 
-		renderCommand(recentComand, el, 2, function_obj);
+		
 	}
 }
 
@@ -449,7 +703,7 @@ function insertCommandInBlock (el, event, function_obj, command_type) {
 		(el_jq.data('command').type == Models.COMMAND_TYPES.whiletrue)  ||
 		(el_jq.data('command').type == Models.COMMAND_TYPES.dowhiletrue) ) {
 
-		// Se não tiver outro comando ainda no bloco, só adiciona:
+		// Se não tiver outro comando ainda no bloco, só adiciona: 
 		if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
 			command_parent.commands_block = [];
 
@@ -461,12 +715,144 @@ function insertCommandInBlock (el, event, function_obj, command_type) {
 			findInBlockCorrectPlace(el, event, function_obj, command_type);
 		}
 
+	} else if (el_jq.data('command').type == Models.COMMAND_TYPES.iftrue) {
+
+		console.log('QQ9');
+		
+		// no if ou no else?
+		var correct_div = $(document.elementFromPoint(event.pageX, event.pageY));
+		var is_in_if = true;
+		if (correct_div.data('if')) {
+			is_in_if = true;
+		} else if (correct_div.data('else')) {
+			is_in_if = false;
+		} else {
+			var hier = correct_div.parentsUntil(".command_container");
+			for (var i = 0; i < hier.length; i++) {
+				var temp = $(hier[i]);
+				if (typeof temp.data('if') !== 'undefined') {
+					is_in_if = true;
+					break;
+				}
+				if (typeof temp.data('else') !== 'undefined') {
+					is_in_if = false;
+					break;
+				}
+			}
+		}
+
+		if (is_in_if) {
+			if (command_parent.commands_block == null || command_parent.commands_block.length == 0) {
+				command_parent.commands_block = [];
+
+				var recentComand = genericCreateCommand(command_type);
+				command_parent.commands_block.push(recentComand);
+
+				renderCommand(recentComand, el_jq.find('.commands_if'), 3, function_obj);
+			} else { // Se já tem algum comando no bloco:
+				findInBlockCorrectPlace(el_jq.find('.commands_if'), event, function_obj, command_type);
+			}
+
+		} else {
+			if (command_parent.commands_else == null || command_parent.commands_else.length == 0) {
+				command_parent.commands_else = [];
+
+				var recentComand = genericCreateCommand(command_type);
+				command_parent.commands_else.push(recentComand);
+
+				renderCommand(recentComand, el_jq.find('.commands_else'), 3, function_obj);
+			} else { // Se já tem algum comando no bloco:
+				findInBlockCorrectPlace(el_jq.find('.commands_else'), event, function_obj, command_type, true);
+			}
+
+		}
+
+	} else { // é do tipo switch
+		console.log("está tentando inserir em um switch que está na raiz!");
+		addCommandToSwitchCase(event, function_obj, command_type);
+	}
+}
+
+function addCommandToSwitchCase (event, function_obj, command_type) {
+
+	var el = $(document.elementFromPoint(event.clientX, event.clientY));
+
+	var which_case = el.data('switchcase');
+	var case_div = el;
+	
+	if (!which_case) {
+		var hier_find = el.parentsUntil(".all_cases_div");
+		for (var i = 0; i < hier_find.length; i++) {
+			if (typeof $(hier_find[i]).data('switchcase') !== 'undefined') {
+				which_case = $(hier_find[i]).data('switchcase');
+				case_div = $(hier_find[i]);
+				break;
+			}
+		}
+	}
+
+	if (which_case.commands_block == null || which_case.commands_block.length < 1) {
+		which_case.commands_block = [];
+
+		var recentComand = genericCreateCommand(command_type);
+		which_case.commands_block.push(recentComand);
+		renderCommand(recentComand, case_div.find('.case_commands_block'), 3, function_obj);
+	} else {
+		findInBlockCorrectPlaceInSwitchCase(which_case, case_div, event, function_obj, command_type);
+	}
+
+}
+
+
+
+
+function findInBlockCorrectPlaceInSwitchCase (which_case, case_div, event, function_obj, command_type) {
+
+	var all_sub = case_div.find('div.command_container');
+
+	var menor_distancia = 999999999;
+	var elemento_menor_distancia = null;
+	var antes = true;
+
+	var t_bot;
+	var t_top;
+
+	// Descobrindo o elemento mais próximo:
+	for (var i = 0; i < all_sub.length; i++) {
+	
+		t_top = all_sub[i].getBoundingClientRect().top;
+		t_bot = all_sub[i].getBoundingClientRect().top + all_sub[i].getBoundingClientRect().height;
+
+		if ((t_top - event.clientY) < menor_distancia) {
+			menor_distancia = event.clientY - t_top;
+			elemento_menor_distancia = all_sub[i];
+		}
+	}
+
+	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
+	
+	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
+	if ((borda_inferior - event.clientY) < menor_distancia) {
+		var recentComand = genericCreateCommand(command_type);
+
+		which_case.commands_block.push(recentComand);
+
+		renderCommand(recentComand, $(case_div.find('.case_commands_block')[0]), 3, function_obj);
+
 	} else {
-		console.log("PPP2");
+
+		var recentComand = genericCreateCommand(command_type);
+
+		var index = which_case.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+
+		if (index > -1) {
+		    which_case.commands_block.splice(index, 0, recentComand);
+		    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+		}
 	}
 }
 
-function findInBlockCorrectPlace (el, event, function_obj, command_type) {
+function findInBlockCorrectPlace (el, event, function_obj, command_type, is_in_else = false) {
 	var el_jq = $(el);
 	var all_sub = el_jq.find('div.command_container');
 
@@ -479,7 +865,7 @@ function findInBlockCorrectPlace (el, event, function_obj, command_type) {
 
 	// Descobrindo o elemento mais próximo:
 	for (var i = 0; i < all_sub.length; i++) {
-
+	
 		t_top = all_sub[i].getBoundingClientRect().top;
 		t_bot = all_sub[i].getBoundingClientRect().top + all_sub[i].getBoundingClientRect().height;
 
@@ -491,29 +877,62 @@ function findInBlockCorrectPlace (el, event, function_obj, command_type) {
 
 	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
 
+	console.log("menor_distancia: ");
+	console.log(elemento_menor_distancia);
+	
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
 
+		console.log('QQ11');
+		
 		var recentComand = genericCreateCommand(command_type);
 
 		var command_parent = el_jq.data('command');
 
-		command_parent.commands_block.push(recentComand);
+		if (is_in_else) {
+			console.log('QQ15');
+			command_parent.commands_else.push(recentComand);
+			console.log('el_jq');
+			console.log(el_jq);
+			console.log("$(el_jq.find('.commands_else')[0]):: ");
+			console.log($(el_jq.find('.commands_else')[0]));
+
+			renderCommand(recentComand, el_jq, 3, function_obj);
+
+		} else {
+			console.log('QQ16');
+			command_parent.commands_block.push(recentComand);
 
-		renderCommand(recentComand, $(el_jq.find('.block_commands')[0]), 3, function_obj);
+			renderCommand(recentComand, $(el_jq.find('.block_commands')[0]), 3, function_obj);
+		}
 
 	} else {
 
+		console.log('QQ12');
+
 		var recentComand = genericCreateCommand(command_type);
 
 		var command_parent = el_jq.data('command');
 
-		var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+		if (is_in_else) {
+
+			var index = command_parent.commands_else.indexOf($(elemento_menor_distancia).data('command'));
+
+			if (index > -1) {
+			    command_parent.commands_else.splice(index, 0, recentComand);
+			    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+			}
+
+		} else {
+			var index = command_parent.commands_block.indexOf($(elemento_menor_distancia).data('command'));
+
+			if (index > -1) {
+			    command_parent.commands_block.splice(index, 0, recentComand);
+			    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
+			}
 
-		if (index > -1) {
-		    command_parent.commands_block.splice(index, 0, recentComand);
-		    renderCommand(recentComand, elemento_menor_distancia, 1, function_obj);
 		}
+		
 	}
 }
 
@@ -542,7 +961,7 @@ function findBeforeOrAfterCommandToAdd (el, event, function_obj, command_type) {
 
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if (d_top < d_bot) {
-
+		
 		var recentComand = genericCreateCommand(command_type);
 
 		var index = function_obj.commands.indexOf($(el).data('command'));
@@ -579,7 +998,7 @@ function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, f
 
 	// Descobrindo o elemento mais próximo:
 	for (var i = 0; i < all_sub.length; i++) {
-
+	
 		t_top = all_sub[i].getBoundingClientRect().top;
 		t_bot = all_sub[i].getBoundingClientRect().top + all_sub[i].getBoundingClientRect().height;
 
@@ -590,10 +1009,10 @@ function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, f
 	}
 
 	var borda_inferior = elemento_menor_distancia.parentNode.getBoundingClientRect().top + elemento_menor_distancia.parentNode.getBoundingClientRect().height;
-
+	
 	// Está mais próximo da borda de baixo, ou seja.. inserir por último:
 	if ((borda_inferior - event.clientY) < menor_distancia) {
-
+		
 		var recentComand = genericCreateCommand(command_type);
 		function_obj.commands.push(recentComand);
 		//
@@ -617,6 +1036,74 @@ function findNearbyCommandToAddInFunctionScope (el, event, node_list_commands, f
 //* DOUGLAS
 //******************************************************
 
+createFloatingCommand = function (function_obj, function_container, command_type, mouse_event) {
+	var floatingObject;
+
+	switch (command_type) {
+		case Models.COMMAND_TYPES.break:
+			floatingObject = BreaksManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.comment:
+			floatingObject = CommentsManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.reader:
+			floatingObject = ReadersManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.writer:
+			floatingObject = WritersManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.attribution:
+			floatingObject = AttributionsManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.iftrue:
+			floatingObject = IftruesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.repeatNtimes:
+			floatingObject = RepeatNtimesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.whiletrue:
+			floatingObject = WhiletruesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.dowhiletrue:
+			floatingObject = DowhiletruesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.switch:
+			floatingObject = SwitchesManagement.createFloatingCommand();
+			break;
+
+		case Models.COMMAND_TYPES.functioncall:
+			floatingObject = FunctioncallsManagement.createFloatingCommand();
+			break;
+	}
+	floatingObject.draggable().appendTo("body");
+
+	floatingObject.on('dragstart', function(e) {
+		console.log("TESTEEEEE");
+	}).trigger('dragstart');
+
+	floatingObject.mouseup(function(evt) {
+		console.log('mouseup')
+		$(".commands_list_div, .commands_list_div, .block_commands, .command_container").off('mouseenter mouseleave');
+	  manageCommand(function_obj, function_container, evt, command_type);
+	});
+
+	floatingObject.css("position", "absolute");
+	mouse_event.type = "mousedown.draggable";
+	mouse_event.target = floatingObject[0];
+	floatingObject.css("left", mouse_event.pageX - 15);
+	floatingObject.css("top", mouse_event.pageY - 15);
+	floatingObject.trigger(mouse_event);
+}
+/*
 manageCommand = function(function_obj, function_container, event, command_type) {
 
 	$( ".created_element" ).each(function( index ) {
@@ -735,3 +1222,7 @@ manageCommand = function(function_obj, function_container, event, command_type)
 	has_element_created_draged = false;
 	which_element_is_draged = null;
 }
+*/
+export function prepareManageCommand (function_obj, function_container, evt, command_type) {
+	manageCommand(function_obj, function_container, evt, command_type);
+}

js/visualUI/functions_sidebar.js

@@ -19,7 +19,7 @@ var counter_new_parameters = 0;
 
 let domConsole = null;
 const program = new Models.Program();
-const variable1 = new Models.Variable(Types.REAL, "variable_1", 1, 1);
+const variable1 = new Models.Variable(Types.INTEGER, "a", 1);
 const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true, false, [variable1]);
 mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main'));
 const parameter1 = new Models.Variable(Types.INTEGER, "par_1", 1);
@@ -76,6 +76,12 @@ function minimizeFunction (function_obj) {
 
 function addHandlers (function_obj, function_container) {
 
+  // function_container.on('dragenter',function(e) {
+  //   e.preventDefault();
+  //   $(e.target).addClass('div-over')
+  //   console.log(e.target)
+  // })
+
   function_container.find('.ui.dropdown.function_return').dropdown({
       onChange: function(value, text, $selectedItem) {
         $selectedItem = $($selectedItem);
@@ -188,7 +194,8 @@ function renderFunction (function_obj) {
   appender += '<div class="ui small icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
 
   appender += '<div class="ui icon button dropdown menu_commands" ><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>'
+  appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.break+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_break')+ '</a>'
+        + '<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>'
         + '<a class="item" data-command="'+Models.COMMAND_TYPES.attribution+'"><i class="arrow left icon"></i> '+LocalizedStrings.getUI('text_attribution')+'</a>'
@@ -608,7 +615,12 @@ renderFunction = function(function_obj) {
 
 			var menu_button = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true" data-function="' + function_obj.name + '"><i class="list icon"></i> ' + function_obj.name + '</button>';
 			menu_button = $(menu_button);
-      menu_button.data('fun',function_obj);
+      menu_button
+        .data('fun',function_obj)
+        .on('dragstart', function(e) {
+          e.originalEvent.dataTransfer.setData("text",JSON.stringify({type:"function",content:function_obj}));
+          //evt.originalEvent.dataTransfer.setData("text",$(this).data('command'));
+        })
 
 			$('.functions_labels').append(menu_button);
 			console.log("aqui")
@@ -641,13 +653,43 @@ renderFunction = function(function_obj) {
   $('.all_functions').append(appender);
 
   appender.data('fun', function_obj);
-  appender.find('.commands_list_div').data('fun', function_obj);
+  console.log("----====----->");
+  appender.find('.commands_list_div')
+    .data('fun', function_obj)
+    .attr('droppable',true)
+    .on('dragenter',function(e) {
+      e.preventDefault();
+      console.log('dragenter');
+      console.log(e.target)
+      $(e.target).addClass('div-over')
+      //e.stopPropagation();
+    }).on('dragover',function(e){
+      e.preventDefault();
+    })
+    .on('dragleave',function(e) {
+      e.preventDefault();
+      //e.stopPropagation();
+      console.log("dragleave")
+      $(e.target).removeClass('div-over')
+      console.log(e.target)
+    })
+    .on('drop',function(e){ 
+      e.preventDefault();
+      console.log('ondrop ' + e.originalEvent.dataTransfer.getData("text"));
+      console.log(e)
+      $(e.target).removeClass('div-over')
+      var data = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
+      if (data.type == 'command')
+        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, e.originalEvent.dataTransfer.getData("text"));
+      else {
+        CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, e.originalEvent.dataTransfer.getData("text"));
+      }
+    });
 
   renderFunctionReturn(function_obj, appender);
 
   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);
@@ -662,6 +704,9 @@ renderFunction = function(function_obj) {
   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);
   }
+  console.log('kk')
+  console.log($($('.function_div')[0]).data('fun'))
+  console.log(appender.data('fun'))
 
 }
 
@@ -690,6 +735,7 @@ initVisualUI = function() {
   });
 
   var commands = [
+        {type: Models.COMMAND_TYPES.break, icon: "stop", text: LocalizedStrings.getUI('text_break')},
         {type: Models.COMMAND_TYPES.reader, icon: "download", text: LocalizedStrings.getUI('text_read_var')},
         {type: Models.COMMAND_TYPES.writer, icon: "upload", text: LocalizedStrings.getUI('text_write_var')},
         {type: Models.COMMAND_TYPES.comment, icon: "quote left", text: LocalizedStrings.getUI('text_comment')},
@@ -705,8 +751,48 @@ initVisualUI = function() {
   for (var i = 0; i < commands.length; i++) {
     var command = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true"  data-command="' + commands[i].type + '"><i class="' + commands[i].icon + ' icon"></i> ' + commands[i].text + '</button>';
     command = $(command);
-    command.on('click', function(evt){
-      CommandsManagement.createFloatingCommand(null, null, $(this).data('command'), evt);
+    command.on('dragstart', function(evt){
+      //evt.originalEvent.dataTransfer.setData("text",$(this).data('command'));
+      evt.originalEvent.dataTransfer.setData("text",JSON.stringify({type:"command",content:$(this).data('command')}));
+      console.log('dragstart')
+      // $('.commands_list_div').attr('droppable',true)
+      // .on('dragenter',function(e) {
+      //   e.preventDefault();
+      //   //e.stopPropagation();
+      //   console.log("dragenter")
+      //   e.originalEvent.dataTransfer.setData("text",$(this).data('command'));
+      //   console.log($(this).data('command'))
+      //   $(e.target).addClass('div-over')
+      //   console.log(e.target)
+      // }).on('dragover',function(e){
+      //   e.preventDefault();
+      // })
+      // .on('dragleave',function(e) {
+      //   e.preventDefault();
+      //   //e.stopPropagation();
+      //   console.log("dragleave")
+      //   $(e.target).removeClass('div-over')
+      //   console.log(e.target)
+      // })
+      // .on('drop',function(e){ 
+      //   e.preventDefault();
+      //   console.log('ondrop ' + e.originalEvent.dataTransfer.getData("text"))
+      //   CommandsManagement.prepareManageCommand(null, null, e, e.originalEvent.dataTransfer.getData("text"));
+      // })
+      /*$(".commands_list_div, .commands_list_div, .block_commands, .command_container").hover(
+        function(e) {
+          console.log("enter =>")
+          $(e.currentTarget).addClass('div-over');
+          console.log({target: e.target, currentTarget: e.currentTarget, relatedTarget: e.relatedTarget, delegateTarget: e.delegateTarget})
+        },
+        function(e) {
+          console.log("leave =>")
+          $(e.currentTarget).removeClass('div-over');
+          console.log({target: e.target, currentTarget: e.currentTarget, relatedTarget: e.relatedTarget, delegateTarget: e.delegateTarget})
+        }
+      )
+      CommandsManagement.createFloatingCommand(null, null, $(this).data('command'), evt);*/
+      
     });
     $('.list-commands').prepend(command);
   }