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 CommandsManagement from './commands'; var counter_new_functions = 0; var counter_new_parameters = 0; const program = new Models.Program(); const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true, false, []); mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main')); program.addFunction(mainFunction); window.program_obj = program; function addFunctionHandler () { var new_function = new Models.Function(LocalizedStrings.getUI("new_function") + "_" + counter_new_functions, Types.VOID, 0, [], false, false, [], new Models.Comment(LocalizedStrings.getUI('text_comment_start'))); program.addFunction(new_function); counter_new_functions ++; renderFunction(new_function); } function addParameter (function_obj, function_container) { if (function_obj.parameters_list == null) { function_obj.parameters_list = []; } var new_parameter = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI("new_parameter") + "_" + counter_new_parameters); function_obj.parameters_list.push(new_parameter); counter_new_parameters ++; renderParameter(function_obj, new_parameter, function_container); } function updateReturnType (function_obj, new_type, new_dimensions = 0) { function_obj.return_type = new_type; function_obj.return_dimensions = new_dimensions; } function removeFunction (function_obj) { var index = program.functions.indexOf(function_obj); if (index > -1) { program.functions.splice(index, 1); } } function minimizeFunction (function_obj) { function_obj.is_hidden = !function_obj.is_hidden; } function addHandlers (function_obj, function_container) { $( function_container ).find('.ui.dropdown.function_return').dropdown({ onChange: function(value, text, $selectedItem) { if ($($selectedItem).data('dimensions')) { updateReturnType(function_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions')); } else { updateReturnType(function_obj, Types[$($selectedItem).data('type')]); } } }); $( function_container ).find( ".name_function_updated" ).on('click', function(e){ enableNameFunctionUpdate(function_obj, function_container); }); $( function_container ).find( ".add_parameter_button" ).on('click', function(e){ addParameter(function_obj, function_container); }); $( function_container ).find('.menu_commands').dropdown(); $( function_container ).find('.menu_commands a').on('click', function(evt){ CommandsManagement.createFloatingCommand(function_obj, function_container, $(this).data('command'), evt); }); $( function_container ).find('.add_var_button_function').on('click', function(e){ VariablesManagement.addVariable(function_obj, function_container); }); $( function_container ).find('.remove_function_button').on('click', function(e){ removeFunction(function_obj); $(function_container).slideUp(400); }); $( function_container ).find('.minimize_function_button').on('click', function(e){ minimizeFunction(function_obj); $(function_container).find(".function_area").toggle(); }); } // Essa função imprime o tipo de retorno da função e cria o menu do tipo 'select' para alteração function renderFunctionReturn (function_obj, function_element) { var ret = ''; ret = $(ret); $(function_element).find('.function_return').append(ret); } function renderFunction (function_obj) { var appender = '
'; if (function_obj.function_comment) { //appender += renderComment(function_obj.function_comment, sequence, true, -1); } appender += ''; appender += (function_obj.is_main ? '
' : '') + ''; appender += '
'; appender += '
'; appender += '
'+LocalizedStrings.getUI("function")+' '; if (function_obj.is_main) { appender += '
      ' + LocalizedStrings.getUI('void') + '       '+function_obj.name+'
' + '(
'; } else { appender += '
'; appender += '
'+function_obj.name+'
' + '(
'; } //appender += renderFunctionParameters(function_obj, sequence); appender += '
) {
' + (function_obj.is_hidden ? ' '; appender = $(appender); $('.all_functions').append(appender); $(appender).data('fun', function_obj); $(appender).find('.commands_list_div').data('fun', function_obj); renderFunctionReturn(function_obj, appender); addHandlers(function_obj, appender); } export function initVisualUI () { // MUST USE CONST, LET, OR VAR !!!!!! const mainDiv = $('#visual-main-div'); // fill mainDiv with functions and globals... // renderAlgorithm()... $('.add_function_button').on('click', () => { addFunctionHandler(); }); $('.add_global_button').on('click', () => { GlobalsManagement.addGlobal(program); }); renderFunction(mainFunction); } function removeParameter (function_obj, parameter_obj, parameter_container) { var index = function_obj.parameters_list.indexOf(parameter_obj); if (index > -1) { function_obj.parameters_list.splice(index, 1); } $(parameter_container).remove(); } function updateParameterType(parameter_obj, new_type, new_dimensions = 0) { parameter_obj.type = new_type; parameter_obj.dimensions = new_dimensions; if (new_dimensions > 0) { parameter_obj.rows = new_dimensions; parameter_obj.columns = 2; } } function renderParameter (function_obj, parameter_obj, function_container) { var ret = ""; ret += '
'+parameter_obj.name+' '; ret += ''; ret += '
'; ret = $(ret); $(function_container).find('.container_parameters_list').append(ret); $(ret).find('.remove_parameter').on('click', function(e){ removeParameter(function_obj, parameter_obj, ret); }); $(ret).find('.ui.dropdown.parameter_type').dropdown({ onChange: function(value, text, $selectedItem) { if ($($selectedItem).data('dimensions')) { updateParameterType(parameter_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions')); } else { updateParameterType(parameter_obj, Types[$($selectedItem).data('type')]); } } }); $(ret).find('.label_enable_name_parameter').on('click', function(e){ enableNameParameterUpdate(parameter_obj, ret); }); } var opened_name_parameter = false; var opened_input_parameter = null; function enableNameParameterUpdate (parameter_obj, parent_node) { if (opened_name_parameter) { $(opened_input_parameter).focus(); return; } opened_name_parameter = true; $(parent_node).find('.span_name_parameter').text(''); $( "" ).insertBefore($(parent_node).find('.span_name_parameter')); $('.width-dynamic').on('input', function() { var inputWidth = $(this).textWidth()+10; opened_input_parameter = this; $(this).focus(); var tmpStr = $(this).val(); $(this).val(''); $(this).val(tmpStr); $(this).css({ width: inputWidth }) }).trigger('input'); $('.width-dynamic').focusout(function() { /// update array: if ($(this).val().trim()) { parameter_obj.name = $(this).val().trim(); $(parent_node).find('.span_name_parameter').text(parameter_obj.name); } $(this).remove(); /// update elements: opened_name_parameter = false; opened_input_parameter = false; }); $('.width-dynamic').on('keydown', function(e) { var code = e.keyCode || e.which; if(code == 13) { if ($(this).val().trim()) { parameter_obj.name = $(this).val().trim(); $(parent_node).find('.span_name_parameter').text(parameter_obj.name); } $(this).remove(); /// update elements: opened_name_parameter = false; opened_input_parameter = false; } if(code == 27) { $(parent_node).find('.span_name_parameter').text(parameter_obj.name); $(this).remove(); /// update elements: opened_name_parameter = false; opened_input_parameter = false; } }); } var opened_name_function = false; var opened_input = null; function enableNameFunctionUpdate(function_obj, parent_node) { if (opened_name_function) { $(opened_input).focus(); return; } $(parent_node).find('.span_name_function').text(''); $( "" ).insertBefore($(parent_node).find('.span_name_function')); $('.width-dynamic').on('input', function() { var inputWidth = $(this).textWidth()+10; opened_input = this; $(this).focus(); var tmpStr = $(this).val(); $(this).val(''); $(this).val(tmpStr); $(this).css({ width: inputWidth }) }).trigger('input'); $('.width-dynamic').focusout(function() { /// update array: if ($(this).val().trim()) { function_obj.name = $(this).val().trim(); } $(this).remove(); $(parent_node).find('.span_name_function').text(function_obj.name); /// update elements: opened_name_function = false; opened_input = false; }); $('.width-dynamic').on('keydown', function(e) { var code = e.keyCode || e.which; if(code == 13) { if ($(this).val().trim()) { function_obj.name = $(this).val().trim(); } $(this).remove(); $(parent_node).find('.span_name_function').text(function_obj.name); /// update elements: opened_name_function = false; opened_input = false; } if(code == 27) { $(this).remove(); $(parent_node).find('.span_name_function').text(function_obj.name); /// update elements: opened_name_function = false; opened_input = false; } }); }