1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630 |
- 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 = '<div class="ui dropdown function_return">';
- if (function_obj.return_dimensions > 0) {
- ret += '<div class="text">'+ LocalizedStrings.getUI("vector") +':'+ LocalizedStrings.getUI(function_obj.return_type);
- if (function_obj.return_dimensions == 1) {
- ret += ' [ ] ';
- } else {
- ret += ' [ ] [ ] ';
- }
- ret += '</div>';
- } else {
- ret += '<div class="text">'+LocalizedStrings.getUI(function_obj.return_type) + '</div>';
- }
- ret += '<div class="menu">';
- for (var tm in Types) {
- ret += '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions < 1 ? ' selected ' : '') + '" data-type="' + tm + '" >' + LocalizedStrings.getUI(tm.toLowerCase()) + '</div>';
- }
- for (var tm in Types) {
- if (tm == Types.VOID.toUpperCase()) {
- continue;
- }
- ret += '<div class="item">'
- + '<i class="dropdown icon"></i>'
- + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase())
- + '<div class="menu">'
- + '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions > 0 ? ' selected ' : '') + '" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] " data-type="' + tm + '" data-dimensions="1">[ ]</div>'
- + '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions > 0 ? ' selected ' : '') + '" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] [ ] " data-type="' + tm + '" data-dimensions="2">[ ] [ ] </div>'
- + '</div>'
- + '</div>';
- }
- ret += '</div></div>';
- ret = $(ret);
- function_element.find('.function_return').append(ret);
- }
- export function renderFunction(function_obj) {
- var appender = '<div class="ui secondary segment function_div list-group-item">';
- if (function_obj.function_comment) {
- //appender += renderComment(function_obj.function_comment, sequence, true, -1);
- }
- appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
- appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
- + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
- appender += '<div class="function_signature_div">' + LocalizedStrings.getUI("function") + ' ';
- if (function_obj.is_main) {
- appender += '<div class="function_name_div"> ' + LocalizedStrings.getUI('void') + ' <span class="span_name_function" >' + function_obj.name + '</span> </div> '
- + ' <span class="parethesis_function">( </span> <div class="ui large labels parameters_list">';
- } else {
- appender += '<div class="ui function_return"></div>';
- appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">' + function_obj.name + '</span> </div> '
- + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
- 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 += '</div> <span class="parethesis_function"> ) </span> </div>'
- + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ');
- appender += '<div class="ui add_var_context add_var_button_function" style="float: left;"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button purple"><i class="icon superscript"></i></div></div>';
- appender += '<div class="ui top attached segment variables_list_div"></div>';
- appender += '<div class="ui inline_add_command"><i class="icon plus circle purple"></i><i class="icon circle white back"></i><div class="ui icon button dropdown menu_commands orange" style="float: left;" ><i class="icon code"></i> <div class="menu"> ';
- appender += '<a class="item" data-command="' + Models.COMMAND_TYPES.reader + '"><i class="download icon"></i> ' + LocalizedStrings.getUI('text_read_var') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.writer + '"><i class="upload icon"></i> ' + LocalizedStrings.getUI('text_write_var') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.comment + '"><i class="quote left icon"></i> ' + LocalizedStrings.getUI('text_comment') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.attribution + '"><i class="arrow left icon"></i> ' + LocalizedStrings.getUI('text_attribution') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.functioncall + '"><i class="hand point right icon"></i> ' + LocalizedStrings.getUI('text_functioncall') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.iftrue + '" ><i class="random icon"></i> ' + LocalizedStrings.getUI('text_iftrue') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.repeatNtimes + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_repeatNtimes') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.whiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_whiletrue') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.dowhiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_dowhiletrue') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.switch + '"><i class="list icon"></i> ' + LocalizedStrings.getUI('text_switch') + '</a>'
- + '<a class="item" data-command="' + Models.COMMAND_TYPES.return + '"><i class="reply icon"></i> ' + LocalizedStrings.getUI('text_btn_return') + '</a>'
- + '</div></div></div>';
- appender += '<div class="ui bottom attached segment commands_list_div"></div>';
- appender += '</div></div>';
- 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 () {
- for (var i = 0; i < program.functions.length; i++) {
- renderFunction(program.functions[i]);
- }
- 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 += '<div class="ui label function_name_parameter pink"><i class="ui icon ellipsis vertical inverted"></i>';
- ret += '<div class="ui dropdown parameter_type">';
- if (parameter_obj.dimensions > 0) {
- ret += '<div class="text">'+ LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(parameter_obj.type);
- if (parameter_obj.dimensions == 1) {
- ret += ' [ ] ';
- } else {
- ret += ' [ ] [ ] ';
- }
- ret += '</div>';
- } else {
- ret += '<div class="text">' + LocalizedStrings.getUI(parameter_obj.type) + '</div>';
- }
- ret += '<div class="menu">';
- for (var tm in Types) {
- if (tm == Types.VOID.toUpperCase()) {
- continue;
- }
- ret += '<div class="item ' + (parameter_obj.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="' + tm + '" >' + LocalizedStrings.getUI(tm.toLowerCase()) + '</div>';
- }
- for (var tm in Types) {
- if (tm == Types.VOID.toUpperCase()) {
- continue;
- }
- ret += '<div class="item">'
- + '<i class="dropdown icon"></i>'
- + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase())
- + '<div class="menu">'
- + '<div class="item" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] " data-type="' + tm + '" data-dimensions="1">[ ]</div>'
- + '<div class="item" data-text="' + LocalizedStrings.getUI('vector') + ':' + LocalizedStrings.getUI(tm.toLowerCase()) + ' [ ] [ ] " data-type="' + tm + '" data-dimensions="2">[ ] [ ] </div>'
- + '</div>'
- + '</div>';
- }
- ret += '</div></div>';
- ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">' + parameter_obj.name + '</span></div> ';
- ret += ' <i class="yellow inverted icon times remove_parameter"></i></div>';
- 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 type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='" + parameter_obj.name + "' />");
- 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 type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='" + function_obj.name + "' />");
- 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 = '<button class="fluid ui container segment labeled icon button list-group-item menu-item" draggable="true" data-function="' + identifier + '"><i class="code icon"></i> <span class="function_name">' + identifier + '</span> (<span class="function_params"></span>) : <span class="function_return_type">' + LocalizedStrings.getUI(function_obj.return_type) + '</span></button>';
- } else {
- 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="code icon"></i> <span class="function_name">' + function_obj.name + '</span> (<span class="function_params"></span>) : <span class="function_return_type">' + LocalizedStrings.getUI(function_obj.return_type) + '</span></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 = '<div class="ui secondary segment function_div list-group-item">';
- // if (function_obj.function_comment) {
- // //appender += renderComment(function_obj.function_comment, sequence, true, -1);
- // }
- // appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
- // appender += (function_obj.is_main ? '<div class="div_start_minimize_v"> </div>' : '<button class="ui icon button large remove_function_button"><i class="red icon times"></i></button>')
- // + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
- // 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>'
- // + '<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>'
- // + '<a class="item" data-command="' + Models.COMMAND_TYPES.functioncall + '"><i class="hand point right icon"></i> ' + LocalizedStrings.getUI('text_functioncall') + '</a>'
- // + '<a class="item" data-command="' + Models.COMMAND_TYPES.iftrue + '" ><i class="random icon"></i> ' + LocalizedStrings.getUI('text_iftrue') + '</a>'
- // + '<a class="item" data-command="' + Models.COMMAND_TYPES.repeatNtimes + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_repeatNtimes') + '</a>'
- // + '<a class="item" data-command="' + Models.COMMAND_TYPES.whiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_whiletrue') + '</a>'
- // + '<a class="item" data-command="' + Models.COMMAND_TYPES.dowhiletrue + '"><i class="sync icon"></i> ' + LocalizedStrings.getUI('text_dowhiletrue') + '</a>'
- // + '<a class="item" data-command="' + Models.COMMAND_TYPES.switch + '"><i class="list icon"></i> ' + LocalizedStrings.getUI('text_switch') + '</a>'
- // + '<a class="item" data-command="' + Models.COMMAND_TYPES.return + '"><i class="reply icon"></i> ' + LocalizedStrings.getUI('text_btn_return') + '</a>'
- // + '</div></div></div>';
- // appender += '<div class="function_signature_div">' + LocalizedStrings.getUI("function") + ' ';
- // if (function_obj.is_main) {
- // appender += '<div class="function_name_div"> ' + LocalizedStrings.getUI('void') + ' <span class="span_name_function" >' + function_obj.name + '</span> </div> '
- // + '( <div class="ui large labels parameters_list">';
- // } else {
- // appender += '<div class="ui function_return"></div>';
- // appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">' + function_obj.name + '</span> </div> '
- // + ' <span class="parethesis_function"> ( </span> <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
- // $('.functions_labels').append(generateMenuButton(function_obj));
- // console.log("aqui");
- // //var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']');
- // //var params = "";
- // //menu_button
- // }
- // appender += '</div> ) </div>'
- // + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
- // + '<div class="ui top attached segment variables_list_div">'
- // /*+ renderVariables(function_obj, sequence)*/
- // + '</div>'
- // + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
- // appender += '</div>';
- // appender += '<div class="function_close_div"></div>'
- // + '</div>'
- // + '</div>';
- // 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') },
- { 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') },
- { type: Models.COMMAND_TYPES.attribution, icon: "arrow left", text: LocalizedStrings.getUI('text_attribution') },
- { type: Models.COMMAND_TYPES.iftrue, icon: "random", text: LocalizedStrings.getUI('text_iftrue') },
- { type: Models.COMMAND_TYPES.repeatNtimes, icon: "sync", text: LocalizedStrings.getUI('text_repeatNtimes') },
- { type: Models.COMMAND_TYPES.whiletrue, icon: "sync", text: LocalizedStrings.getUI('text_whiletrue') },
- { type: Models.COMMAND_TYPES.dowhiletrue, icon: "sync", text: LocalizedStrings.getUI('text_dowhiletrue') },
- { type: Models.COMMAND_TYPES.switch, icon: "list", text: LocalizedStrings.getUI('text_switch') },
- { type: Models.COMMAND_TYPES.return, icon: "reply", text: LocalizedStrings.getUI('text_btn_return') },
- //{ 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 = '<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('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 =
- '<div class="ui styled accordion ' + category + '"> \
- <div class="title"> \
- <i class="dropdown icon"></i> \
- ' + LocalizedStrings.getUI(category) + ' \
- </div> \
- <div class="content"><div>';
- 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 += '<div class="ui label function_name_parameter"><span class="span_name_parameter label_enable_name_parameter">'+parameter_obj.name+'</span> <i class="icon small pencil alternate enable_edit_name_parameter label_enable_name_parameter"></i>';
- ret += '<div class="ui dropdown parameter_type">';
- if (parameter_obj.dimensions > 0) {
- ret += '<div class="text">'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
- ret += '</div>';
- } else {
- ret += '<div class="text">'+LocalizedStrings.getUI(parameter_obj.type)+'</div>';
- }
- ret += '<i class="dropdown icon"></i>'
- + '<div class="menu">';
- for (var tm in Types) {
- if (tm == Types.VOID.toUpperCase()) {
- continue;
- }
- ret += '<div class="item ' + (parameter_obj.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
- }
- for (var tm in Types) {
- if (tm == Types.VOID.toUpperCase()) {
- continue;
- }
- ret += '<div class="item">'
- + '<i class="dropdown icon"></i>'
- + LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
- + '<div class="menu">'
- + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
- + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
- + '</div>'
- + '</div>';
- }
- ret += '</div></div>';
- ret += ' <i class="red icon times remove_parameter"></i></div>';
- 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('');
- $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+function_obj.name+"' />" ).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('<i class="list icon"></i> ' + $(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);
- }*/
|