import $ from 'jquery'; import { Types } from './types'; import * as Models from './ivprog_elements_sidebar'; import { LocalizedStrings } from './../services/localizedStringsService'; import * as GlobalsManagement from './globals_sidebar'; import * as VariablesManagement from './variables'; import * as CommandsManagement from './commands_sidebar'; import * as CodeManagement from './code_generator'; import * as VariableValueMenu from './commands/variable_value_menu'; import { DOMConsole } from './../io/domConsole'; import { IVProgParser } from './../ast/ivprogParser'; import { IVProgProcessor } from './../processor/ivprogProcessor'; import WatchJS from 'melanke-watchjs'; import { SemanticAnalyser } from '../processor/semantic/semanticAnalyser'; import { IVProgAssessment } from '../assessment/ivprogAssessment'; import * as AlgorithmManagement from './algorithm_sidebar'; import * as Utils from './utils'; import '../Sortable.js'; var counter_new_functions = 0; var counter_new_parameters = 0; let studentTemp = null; let domConsole = null; window.studentGrade = null; window.LocalizedStrings = LocalizedStrings; const program = new Models.Program(); window.system_functions = []; // Adding math functions: window.system_functions.push(new Models.SystemFunction('$sin', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$cos', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$tan', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$sqrt', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$pow', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$log', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$abs', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$negate', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$invert', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$max', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); window.system_functions.push(new Models.SystemFunction('$min', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math)); // Adding text functions: window.system_functions.push(new Models.SystemFunction('$substring', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true),new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text)); window.system_functions.push(new Models.SystemFunction('$length', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text)); window.system_functions.push(new Models.SystemFunction('$uppercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text)); window.system_functions.push(new Models.SystemFunction('$lowercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text)); window.system_functions.push(new Models.SystemFunction('$charAt', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true), new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text)); // Adding arrangement functions: window.system_functions.push(new Models.SystemFunction('$numElements', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.variable_and_function, null, null, null, true, 1)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement)); window.system_functions.push(new Models.SystemFunction('$matrixLines', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.variable_and_function, null, null, null, true, 2)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement)); window.system_functions.push(new Models.SystemFunction('$matrixColumns', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.variable_and_function, null, null, null, true, 2)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement)); // Adding conversion functions: window.system_functions.push(new Models.SystemFunction('$isReal', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion)); window.system_functions.push(new Models.SystemFunction('$isInt', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion)); window.system_functions.push(new Models.SystemFunction('$isBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion)); window.system_functions.push(new Models.SystemFunction('$castReal', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion)); window.system_functions.push(new Models.SystemFunction('$castInt', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion)); window.system_functions.push(new Models.SystemFunction('$castBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion)); window.system_functions.push(new Models.SystemFunction('$castString', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)], null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion)); console.log(' ___ ___ ________ \n / / / / / ____/ \n / / / / / / \n / / / / ______ ___ / /__ \n / / / / / \\ / / / ___/ \n / /______ / / / /\\ \\/ / / / \n / / / / / / \\ / / /____ \n/__________/ /___/ /___/ \\___/ /________/ \n\n Laboratório de Informática na Educação\n http://line.ime.usp.br'); 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; window.generator = CodeManagement.generate; window.runCodeAssessment = runCodeAssessment; window.renderAlgorithm = AlgorithmManagement.renderAlgorithm; window.insertContext = false; window.watchW = WatchJS; WatchJS.watch(window.program_obj.globals, function(){ if (window.insertContext) { setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300); window.insertContext = false; } else { AlgorithmManagement.renderAlgorithm(); } }, 1); WatchJS.watch(window.program_obj.functions, function(){ if (window.insertContext) { setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300); window.insertContext = false; } else { AlgorithmManagement.renderAlgorithm(); } }, 0); 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 ++; window.insertContext = true; var newe = renderFunction(new_function); newe.css('display', 'none'); newe.fadeIn(); } function addParameter (function_obj, function_container, is_from_click = false) { 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 ++; 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) { 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')]); } }, selectOnKeydown: false }); 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){ window.insertContext = true; addParameter(function_obj, function_container, true); }); function_container.find('.menu_commands').dropdown({ on: 'hover' }); function_container.find('.menu_commands a').on('click', function(evt){ if (function_obj.commands == null || function_obj.commands.length == 0) { function_obj.commands = []; var new_cmd = CommandsManagement.genericCreateCommand($(this).data('command')); function_obj.commands.push(new_cmd); CommandsManagement.renderCommand(new_cmd, function_container.find('.commands_list_div'), 3, function_obj); } else { CommandsManagement.createFloatingCommand(function_obj, function_container, $(this).data('command'), evt); } }); function_container.find('.add_var_button_function').on('click', function(e){ window.insertContext = true; VariablesManagement.addVariable(function_obj, function_container, true); }); function_container.find('.remove_function_button').on('click', function(e){ removeFunction(function_obj); function_container.fadeOut(); }); function_container.find('.minimize_function_button').on('click', function(e){ minimizeFunction(function_obj); if (function_obj.is_hidden) { function_container.find(".add_var_button_function").toggle(); function_container.find(".inline_add_command").toggle(); function_container.find(".function_area").slideToggle(); } else { function_container.find(".function_area").slideToggle(function(){ function_container.find(".add_var_button_function").toggle(); function_container.find(".inline_add_command").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); } export 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 += '
' + LocalizedStrings.getUI("function") + ' '; if (function_obj.is_main) { appender += '
      ' + LocalizedStrings.getUI('void') + '       ' + function_obj.name + '
' + ' (
'; } else { appender += '
'; appender += '
' + function_obj.name + '
' + ' (
'; var menu_func = generateMenuButton(function_obj); /*menu_func.css("display","none") $('.functions_labels').append(menu_func); menu_func.fadeIn();*/ $('.functions_labels').append(menu_func); } 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) .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, bundle) { e.preventDefault(); if (program_obj.dataTransfer == null) return; if (bundle) { e.clientX = bundle.clientX; e.clientY = bundle.clientY; } //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")); var data = program_obj.dataTransfer; if (data.type == 'command') CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, data.content); else if (data.type == 'var') CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "attribution", data.content); else { if (!data.content.parameters_list) data.content.parameters_list = []; CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "functioncall", data.content); } //program_obj.dataTransfer; program_obj.dataTransfer = null; }).on('click', function (e) { if (window.ghostNode) { console.log("drop click"); $(document).off('mousemove').off('mousedown').off('keyup'); $(window.ghostNode).remove(); delete window.ghostNode; $(this).trigger('drop', [e]); $('.div-over').removeClass('div-over'); } }) .on('mouseover', function (evt) { if (window.ghostNode) { evt.type = 'dragenter'; //$(this).trigger('dragenter'); console.log('mouseover'); $(this).trigger(evt); } }) .on('mouseout', function (evt) { //$(this).trigger('dragleave'); if (window.ghostNode) { evt.type = 'dragleave'; console.log('mouseout'); $(this).trigger(evt); } }); 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); } // Rendering variables: 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: { show: 750, 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); } }); Sortable.create(appender.find(".commands_list_div")[0], { handle: '.command_drag', animation: 100, ghostClass: 'ghost', group: 'commands_drag_' + program.functions.indexOf(function_obj), onEnd: function (evt) { //updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj); } }); if (!function_obj.is_main) { 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); } }); } return 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', () => { window.insertContext = true; GlobalsManagement.addGlobal(program, true); }); $('.run_button').on('click', () => { runCode(); }); $('.visual_coding_button').on('click', () => { toggleVisualCoding(); }); $('.textual_coding_button').on('click', () => { toggleTextualCoding(); }); $('.assessment').on('click', () => { runCodeAssessment(); is_iassign = true; }); $('.div_toggle_console').on('click', () => { toggleConsole(); }); $('.expand_button').on('click', () => { full_screen(); }); $('.main_title h2').prop('title', LocalizedStrings.getUI('text_ivprog_description')); } var is_iassign = false; $(document).ready(function () { var time_show = 750; $('.visual_coding_button').popup({ content: LocalizedStrings.getUI("tooltip_visual"), delay: { show: time_show, hide: 0 } }); $('.textual_coding_button').popup({ content: LocalizedStrings.getUI("tooltip_textual"), delay: { show: time_show, hide: 0 } }); $('.upload_file_button').popup({ content: LocalizedStrings.getUI("tooltip_upload"), delay: { show: time_show, hide: 0 } }); $('.download_file_button').popup({ content: LocalizedStrings.getUI("tooltip_download"), delay: { show: time_show, hide: 0 } }); $('.undo_button').popup({ content: LocalizedStrings.getUI("tooltip_undo"), delay: { show: time_show, hide: 0 } }); $('.redo_button').popup({ content: LocalizedStrings.getUI("tooltip_redo"), delay: { show: time_show, hide: 0 } }); $('.run_button').popup({ content: LocalizedStrings.getUI("tooltip_run"), delay: { show: time_show, hide: 0 } }); $('.assessment_button').popup({ content: LocalizedStrings.getUI("tooltip_evaluate"), delay: { show: time_show, hide: 0 } }); $('.help_button').popup({ content : LocalizedStrings.getUI("tooltip_help") + ' - ' + LocalizedStrings.getUI("text_ivprog_version"), delay: { show: time_show, hide: 0 } }); $('.add_global_button').popup({ content: LocalizedStrings.getUI("tooltip_add_global"), delay: { show: time_show, hide: 0 } }); $('.div_toggle_console').popup({ content: LocalizedStrings.getUI("tooltip_console"), delay: { show: time_show, hide: 0 } }); Sortable.create(listWithHandle, { handle: '.glyphicon-move', animation: 100, ghostClass: 'ghost', group: 'functions_divs_drag', onEnd: function (evt) { 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 (evt) { updateSequenceGlobals(evt.oldIndex, evt.newIndex); } }); renderAlgorithm(); }); 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]); } function runCodeAssessment () { window.studentGrade = null; studentTemp = null; const strCode = CodeManagement.generate(); if (strCode == null) { return; } toggleConsole(true); if(domConsole == null) domConsole = new DOMConsole("#ivprog-term"); $("#ivprog-term").slideDown(500); const runner = new IVProgAssessment(strCode, testCases, domConsole); runner.runTest().then(grade => { if (!is_iassign) { parent.getEvaluationCallback(grade); } else { is_iassign = false; } }).catch( err => domConsole.err(err.message)); } function runCode() { const strCode = CodeManagement.generate(); if (strCode == null) { return; } toggleConsole(true); if(domConsole == null) domConsole = new DOMConsole("#ivprog-term"); $("#ivprog-term").slideDown(500); try { const parser = IVProgParser.createParser(strCode); const analyser = new SemanticAnalyser(parser.parseTree()); const data = analyser.analyseTree(); const proc = new IVProgProcessor(data); proc.registerInput(domConsole); proc.registerOutput(domConsole); $("#ivprog-term").addClass('ivprog-term-active'); proc.interpretAST().then( _ => { domConsole.info("Programa executado com sucesso!"); $("#ivprog-term").removeClass('ivprog-term-active'); }).catch(err => { domConsole.err(err.message); $("#ivprog-term").removeClass('ivprog-term-active'); }) } catch (error) { domConsole.err(error.message); console.log(error); } } function toggleConsole (is_running) { if (is_running) { $('.ivprog-term-div').css('display', 'block'); $('#ivprog-term').css('min-height', '160px'); $('#ivprog-term').css('margin-top', '-170px'); return; } if ($('#ivprog-term').css('min-height') == '160px') { // esconder $('.ivprog-term-div').css('display', 'none'); $('#ivprog-term').css('min-height', '0'); $('#ivprog-term').css('margin-top', '-30px'); $('#ivprog-term').css('padding', '5px'); } else { // mostrar $('.ivprog-term-div').css('display', 'block'); $('#ivprog-term').css('min-height', '160px'); $('#ivprog-term').css('margin-top', '-170px'); } } function waitToCloseConsole () { domConsole.info("Aperte qualquer tecla para fechar..."); const p = new Promise((resolve, _) => { domConsole.requestInput(resolve, true); }); p.then( _ => { domConsole.dispose(); domConsole = null; $("#ivprog-term").hide(); }) } function toggleTextualCoding () { var code = CodeManagement.generate(); if (code == null) { return; } $('.ivprog_visual_panel').css('display', 'none'); $('.ivprog_textual_panel').css('display', 'block'); $('.ivprog_textual_panel').removeClass('loading'); $('.ivprog_textual_code').text(code); $('.visual_coding_button').removeClass('active'); $('.textual_coding_button').addClass('active'); $('.tabs').addClass('loading') } function toggleVisualCoding () { $('.ivprog_textual_panel').addClass('loading'); $('.ivprog_textual_panel').css('display', 'none'); $('.ivprog_visual_panel').css('display', 'block'); $('.textual_coding_button').removeClass('active'); $('.visual_coding_button').addClass('active'); $('.menu .item').tab(); $('.tabs').removeClass('loading') } 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).fadeOut(); } 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 += '
'; ret += ''; ret += '
' + parameter_obj.name + '
'; 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')]); } }, selectOnKeydown: false }); ret.find('.label_enable_name_parameter').on('click', function (e) { enableNameParameterUpdate(parameter_obj, ret); }); return ret; } function updateParameterName (parameter_var, new_name, parameter_obj_dom, function_obj) { if (isValidIdentifier(new_name)) { if (variableNameAlreadyExists(new_name, function_obj)) { Utils.renderErrorMessage(parameter_obj_dom.find('.parameter_div_edit'), LocalizedStrings.getUI('inform_valid_variable_duplicated')); } else { parameter_var.name = new_name; } } else { Utils.renderErrorMessage(parameter_obj_dom.find('.parameter_div_edit'), LocalizedStrings.getUI('inform_valid_name')); } } function variableNameAlreadyExists (name_var, function_obj) { if (function_obj.parameters_list) { for (var i = 0; i < function_obj.parameters_list.length; i++) { if (function_obj.parameters_list[i].name == name_var) { return true; } } } if (function_obj.variables_list) { for (var i = 0; i < function_obj.variables_list.length; i++) { if (function_obj.variables_list[i].name == name_var) { return true; } } } return false; } function updateFunctionName (function_var, new_name, function_obj_dom) { if (isValidIdentifier(new_name)) { if (functionNameAlreadyExists(new_name)) { Utils.renderErrorMessage(function_obj_dom.find('.function_name_div'), LocalizedStrings.getUI('inform_valid_name_duplicated')); } else { function_var.name = new_name; } } else { Utils.renderErrorMessage(function_obj_dom.find('.function_name_div'), LocalizedStrings.getUI('inform_valid_name')); } } function functionNameAlreadyExists (function_name) { for (var i = 0; i < window.program_obj.functions.length; i++) { if (window.program_obj.functions[i].name == function_name) { return true; } } return false; } function isValidIdentifier (identifier_str) { return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(identifier_str); } 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 = $(parent_node); var input_field; parent_node.find('.span_name_parameter').text(''); input_field = $( ""); input_field.insertBefore(parent_node.find('.span_name_parameter')); input_field.on('input', function () { var inputWidth = input_field.textWidth() + 10; opened_input_parameter = input_field; input_field.focus(); var tmpStr = input_field.val(); input_field.val(''); input_field.val(tmpStr); input_field.css({ width: inputWidth }) }).trigger('input'); input_field.focusout(function () { /// update array: if (input_field.val().trim()) { updateParameterName(parameter_obj, input_field.val().trim(), parent_node, function_obj); parent_node.find('.span_name_parameter').text(parameter_obj.name); } input_field.off(); input_field.remove(); /// update elements: opened_name_parameter = false; opened_input_parameter = false; }); input_field.on('keydown', function (e) { var code = e.keyCode || e.which; if (code == 13) { if (input_field.val().trim()) { updateParameterName(parameter_obj, input_field.val().trim(), parent_node, function_obj); parent_node.find('.span_name_parameter').text(parameter_obj.name); } input_field.off(); input_field.remove(); /// update elements: opened_name_parameter = false; opened_input_parameter = false; } if (code == 27) { parent_node.find('.span_name_parameter').text(parameter_obj.name); input_field.off(); input_field.remove(); /// update elements: opened_name_parameter = false; opened_input_parameter = false; } }); input_field.select(); } var opened_name_function = false; var opened_input = null; var previousPadding = null; function enableNameFunctionUpdate(function_obj, parent_node) { if (opened_name_function) { opened_input.focus(); return; } parent_node = $(parent_node); parent_node.find('.span_name_function').text(''); var input_field; if (!previousPadding) { previousPadding = parent_node.find('.span_name_function').css('padding-left'); } parent_node.find('.span_name_function').css('padding-left', '0'); parent_node.find('.span_name_function').css('padding-right', '0'); input_field = $(""); input_field.insertBefore(parent_node.find('.span_name_function')); input_field.on('input', function () { var inputWidth = input_field.textWidth() + 10; opened_input = input_field; input_field.focus(); var tmpStr = input_field.val(); input_field.val(''); input_field.val(tmpStr); input_field.css({ width: inputWidth }) }).trigger('input'); input_field.focusout(function () { /// update array: if (input_field.val().trim()) { updateFunctionName(function_obj, input_field.val().trim(), parent_node); } input_field.off(); input_field.remove(); parent_node.find('.span_name_function').css('padding-left', previousPadding); parent_node.find('.span_name_function').css('padding-right', previousPadding); parent_node.find('.span_name_function').text(function_obj.name); /// update elements: opened_name_function = false; opened_input = false; }); input_field.on('keydown', function (e) { var code = e.keyCode || e.which; if (code == 13) { if (input_field.val().trim()) { updateFunctionName(function_obj, input_field.val().trim(), parent_node); } input_field.off(); input_field.remove(); parent_node.find('.span_name_function').css('padding-left', previousPadding); parent_node.find('.span_name_function').css('padding-right', previousPadding); parent_node.find('.span_name_function').text(function_obj.name); /// update elements: opened_name_function = false; opened_input = false; } if (code == 27) { input_field.off(); input_field.remove(); parent_node.find('.span_name_function').css('padding-left', previousPadding); parent_node.find('.span_name_function').css('padding-right', previousPadding); parent_node.find('.span_name_function').text(function_obj.name); /// update elements: opened_name_function = false; opened_input = false; } }); input_field.select(); } /**************************************************** //DOUGLAS *******************************************************/ export function generateMenuButton(function_obj) { if (function_obj.identifier) { var identifier = LocalizedStrings.getUI(function_obj.identifier); var menu_button = ''; } else { var menu_button = ''; } var params = ""; menu_button = $(menu_button); for (var j = 0; j < function_obj.parameters_list.length; j++) { if (j > 0) params += ','; if (!function_obj.identifier) { params += LocalizedStrings.getUI(function_obj.parameters_list[j].type); } else { params += function_obj.parameters_list[j].type; } } menu_button .data('fun', function_obj) .on('dragstart', function (e) { program_obj.dataTransfer = { type: "function", content: function_obj }; //e.originalEvent.dataTransfer.setData("text", JSON.stringify({type:"function",content:function_obj})); //evt.originalEvent.dataTransfer.setData("text",$(this).data('command')); }) .find('.function_params').text(params) .find('.function_return_type').text(function_obj.type); menu_button .on('click', function (evt) { $(this).trigger('dragstart'); if (window.ghostNode) { $(window.ghostNode).remove(); $(document).off('mousemove'); } window.ghostNode = $(this).clone(); ghostNode.outerWidth($(this).outerWidth()); ghostNode.draggable().appendTo('body'); ghostNode.css('position', 'absolute'); ghostNode.css('left', evt.pageX); ghostNode.css('top', evt.pageY); evt.type = 'drag'; evt.target = ghostNode[0]; ghostNode.trigger(evt); $(document).on('mousemove', function (evt) { ghostNode.css('left', evt.pageX); ghostNode.css('top', evt.pageY); }); $(document).on('mousedown', function (evt) { console.log("length ==="); console.log($(evt.target).closest(".commands_list_div")) if ($(evt.target).closest(".commands_list_div").length <= 0) { if (window.ghostNode) { console.log("drop click"); $('.div-over').removeClass('div-over'); $(window.ghostNode).remove(); delete window.ghostNode; $(document).off('mousemove').off('mousedown').off('keyup'); } } }); $(document).keyup(function (e) { console.log("KeyUp") if (e.key === "Escape") { console.log("escape"); $('.div-over').removeClass('div-over'); $(window.ghostNode).remove(); delete window.ghostNode; $(document).off('mousemove').off('mousedown').off('keyup'); } }); }); return menu_button; } removeFunction = function (function_obj) { var index = program.functions.indexOf(function_obj); if (index > -1) { program.functions.splice(index, 1); } $('.functions_labels > [data-function=' + function_obj.name + ']').remove(); } // renderFunction = function (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 += '
' + LocalizedStrings.getUI("function") + ' '; // if (function_obj.is_main) { // appender += '
      ' + LocalizedStrings.getUI('void') + '       ' + function_obj.name + '
' // + '(
'; // } else { // appender += '
'; // appender += '
' + function_obj.name + '
' // + ' (
'; // $('.functions_labels').append(generateMenuButton(function_obj)); // console.log("aqui"); // //var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']'); // //var params = ""; // //menu_button // } // 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) // .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, bundle) { // e.preventDefault(); // if (bundle) { // e.clientX = bundle.clientX; // e.clientY = bundle.clientY; // } // //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")); // var data = program_obj.dataTransfer; // if (data.type == 'command') // CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, data.content); // else if (data.type == 'var') // CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "attribution", data.content); // else { // if (!data.content.parameters_list) // data.content.parameters_list = []; // CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "functioncall", data.content); // } // //program_obj.dataTransfer; // }).on('click', function (e) { // if (window.ghostNode) { // console.log("drop click"); // $(document).off('mousemove').off('mousedown').off('keyup'); // $(window.ghostNode).remove(); // delete window.ghostNode; // $(this).trigger('drop', [e]); // $('.div-over').removeClass('div-over'); // } // }) // .on('mouseover', function (evt) { // if (window.ghostNode) { // evt.type = 'dragenter'; // //$(this).trigger('dragenter'); // console.log('mouseover'); // $(this).trigger(evt); // } // }) // .on('mouseout', function (evt) { // //$(this).trigger('dragleave'); // if (window.ghostNode) { // evt.type = 'dragleave'; // console.log('mouseout'); // $(this).trigger(evt); // } // }); // 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); // } // // Rendering variables: // 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); // } // console.log('kk') // console.log($($('.function_div')[0]).data('fun')) // console.log(appender.data('fun')) // } initVisualUI = function () { // 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); }); $('.run_button').on('click', () => { runCode(); }); $('.visual_coding_button').on('click', () => { toggleVisualCoding(); }); $('.textual_coding_button').on('click', () => { toggleTextualCoding(); }); $('.assessment').on('click', () => { runCodeAssessment(); is_iassign = true; }); $('.div_toggle_console').on('click', () => { toggleConsole(); }); var commands = [ { type: Models.COMMAND_TYPES.reader, icon: "download", text: LocalizedStrings.getUI('text_read_var'), alt: "Solicita a introdução de um valor pelo teclado e grava em uma variável."}, { type: Models.COMMAND_TYPES.writer, icon: "upload", text: LocalizedStrings.getUI('text_write_var'), alt: "Imprime o conteúdo de uma variável, valor ou função. Pode somar várias variáveis ou concatenar sequências de texto." }, { type: Models.COMMAND_TYPES.comment, icon: "quote left", text: LocalizedStrings.getUI('text_comment'), alt: "Permite a inserção de comentários do autor. Serão desconsiderados na execução." }, { type: Models.COMMAND_TYPES.attribution, icon: "arrow left", text: LocalizedStrings.getUI('text_attribution'), alt: "Resolve uma expressão e armazena em uma variável." }, { type: Models.COMMAND_TYPES.iftrue, icon: "random", text: LocalizedStrings.getUI('text_iftrue'), alt: "Avalia uma condição como verdadeira ou falsa, escolhendo entre dois fluxos dependendo do valor." }, { type: Models.COMMAND_TYPES.repeatNtimes, icon: "sync", text: LocalizedStrings.getUI('text_repeatNtimes'), alt: "Repete um bloco de código N vezes." }, { type: Models.COMMAND_TYPES.whiletrue, icon: "sync", text: LocalizedStrings.getUI('text_whiletrue'), alt: "Enquanto a condição for verdadeira, repete um bloco de código, avaliando a condição antes de cada execução." }, { type: Models.COMMAND_TYPES.dowhiletrue, icon: "sync", text: LocalizedStrings.getUI('text_dowhiletrue'), alt: "Enquanto a condição for verdadeira, repete um bloco de código, avaliando a condição depois de cada execução." }, { type: Models.COMMAND_TYPES.switch, icon: "list", text: LocalizedStrings.getUI('text_switch'), alt: "Avalia o valor de uma expressão e escolhe um bloco de código para executar dependendo do valor." }, { type: Models.COMMAND_TYPES.return, icon: "reply", text: LocalizedStrings.getUI('text_btn_return'), alt: "Retorna o valor ao término de uma função." }, //{ type: Models.COMMAND_TYPES.break, icon: "stop", text: LocalizedStrings.getUI('text_break') }, //{type: Models.COMMAND_TYPES.functioncall, icon: "hand point right", text: LocalizedStrings.getUI('text_functioncall')}, ]; for (var i = commands.length-1; i >= 0; i--) { var command = ''; command = $(command); 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')})); program_obj.dataTransfer = { type: "command", content: $(this).data('command') }; console.log('dragstart') console.log(evt); }); command.on('click', function (evt) { $(this).trigger('dragstart'); if (window.ghostNode) { $(window.ghostNode).remove(); $(document).off('mousemove'); } window.ghostNode = $(this).clone(); ghostNode.outerWidth($(this).outerWidth()); ghostNode.draggable().appendTo('body'); ghostNode.css('position', 'absolute'); ghostNode.css('left', evt.pageX); ghostNode.css('top', evt.pageY); evt.type = 'drag'; evt.target = ghostNode[0]; ghostNode.trigger(evt); $(document).on('mousemove', function (evt) { ghostNode.css('left', evt.pageX); ghostNode.css('top', evt.pageY); }); $(document).on('mousedown', function (evt) { console.log("length ==="); console.log($(evt.target).closest(".commands_list_div")) if ($(evt.target).closest(".commands_list_div").length <= 0) { if (window.ghostNode) { console.log("drop click"); $('.div-over').removeClass('div-over'); $(window.ghostNode).remove(); delete window.ghostNode; $(document).off('mousemove').off('mousedown').off('keyup'); } } }); $(document).keyup(function (e) { console.log("KeyUp") if (e.key === "Escape") { console.log("escape"); $('.div-over').removeClass('div-over'); $(window.ghostNode).remove(); delete window.ghostNode; $(document).off('mousemove').off('mousedown').off('keyup'); } }); }); $('.list-commands').prepend(command); } /* $(document).on('mousemove',function(evt) { if (typeof ghostNode !== 'undefined') { ghostNode.css('left', evt.pageX - 15); ghostNode.css('top', evt.pageY - 15); } });*/ var library_labels = $('.library_labels'); for (var i = 0; i < system_functions.length; i++) { var system_button = generateMenuButton(system_functions[i]); var category = system_functions[i].category; var cat_accord = null; if (library_labels.find('.' + category).length == 0) { cat_accord = '
\
\ \ ' + LocalizedStrings.getUI(category) + ' \
\
'; library_labels.append(cat_accord); } cat_accord = $(library_labels.find('.' + category)[0]); cat_accord.find('.content').append(system_button); } $('.accordion').accordion(); } /* renderParameter = function(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); }); } enableNameFunctionUpdate = function(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) { $('.functions_labels > [data-function=' + function_obj.name + ']') .attr('data-function', $(this).val().trim()) .html(' ' + $(this).val().trim()); 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; } }); } addParameter = function (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); new_parameter.function_obj = function_obj; function_obj.parameters_list.push(new_parameter); counter_new_parameters ++; renderParameter(function_obj, new_parameter, function_container); //updateMenuButton(function_obj); } removeParameter = function (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(); }*/ /* updateReturnType = function (function_obj, new_type, new_dimensions = 0) { function_obj.return_type = new_type; function_obj.return_dimensions = new_dimensions; var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']'); menu_button.find('.function_return_type').text(LocalizedStrings.getUI(new_type)); }*/ /* updateParameterType = function (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; } //updateMenuButton(parameter_obj.function_obj); }*/