functions.js 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983
  1. import $ from 'jquery';
  2. import { Types } from './types';
  3. import * as Models from './ivprog_elements';
  4. import { LocalizedStrings } from './../services/localizedStringsService';
  5. import * as GlobalsManagement from './globals';
  6. import * as VariablesManagement from './variables';
  7. import * as CommandsManagement from './commands';
  8. import * as CodeManagement from './code_generator';
  9. import * as VariableValueMenu from './commands/variable_value_menu';
  10. import { DOMConsole } from './../io/domConsole';
  11. import { IVProgParser } from './../ast/ivprogParser';
  12. import { IVProgProcessor } from './../processor/ivprogProcessor';
  13. import WatchJS from 'melanke-watchjs';
  14. import { SemanticAnalyser } from '../processor/semantic/semanticAnalyser';
  15. import { IVProgAssessment } from '../assessment/ivprogAssessment';
  16. import * as AlgorithmManagement from './algorithm';
  17. import * as Utils from './utils';
  18. import '../Sortable.js';
  19. var counter_new_functions = 0;
  20. var counter_new_parameters = 0;
  21. let studentTemp = null;
  22. let domConsole = null;
  23. window.studentGrade = null;
  24. window.LocalizedStrings = LocalizedStrings;
  25. const program = new Models.Program();
  26. window.system_functions = [];
  27. // Adding math functions:
  28. window.system_functions.push(new Models.SystemFunction('$sin', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  29. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  30. window.system_functions.push(new Models.SystemFunction('$cos', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  31. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  32. window.system_functions.push(new Models.SystemFunction('$tan', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  33. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  34. window.system_functions.push(new Models.SystemFunction('$sqrt', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  35. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  36. 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)],
  37. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  38. window.system_functions.push(new Models.SystemFunction('$log', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  39. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  40. window.system_functions.push(new Models.SystemFunction('$abs', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  41. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  42. window.system_functions.push(new Models.SystemFunction('$negate', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  43. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  44. window.system_functions.push(new Models.SystemFunction('$invert', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  45. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  46. window.system_functions.push(new Models.SystemFunction('$max', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  47. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  48. window.system_functions.push(new Models.SystemFunction('$min', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  49. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.math));
  50. // Adding text functions:
  51. window.system_functions.push(new Models.SystemFunction('$substring', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true),
  52. 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)],
  53. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
  54. window.system_functions.push(new Models.SystemFunction('$length', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  55. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
  56. window.system_functions.push(new Models.SystemFunction('$uppercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  57. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
  58. window.system_functions.push(new Models.SystemFunction('$lowercase', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  59. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
  60. 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)],
  61. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.text));
  62. // Adding arrangement functions:
  63. 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)],
  64. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
  65. 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)],
  66. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
  67. 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)],
  68. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement));
  69. // Adding conversion functions:
  70. window.system_functions.push(new Models.SystemFunction('$isReal', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  71. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
  72. window.system_functions.push(new Models.SystemFunction('$isInt', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  73. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
  74. window.system_functions.push(new Models.SystemFunction('$isBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  75. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
  76. window.system_functions.push(new Models.SystemFunction('$castReal', Types.REAL, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  77. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
  78. window.system_functions.push(new Models.SystemFunction('$castInt', Types.INTEGER, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  79. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
  80. window.system_functions.push(new Models.SystemFunction('$castBool', Types.BOOLEAN, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  81. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
  82. window.system_functions.push(new Models.SystemFunction('$castString', Types.TEXT, 0, [new Models.VariableValueMenu(VariableValueMenu.VAR_OR_VALUE_TYPES.all, null, null, null, true)],
  83. null, Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion));
  84. 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');
  85. const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true, false);
  86. mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main'));
  87. program.addFunction(mainFunction);
  88. window.program_obj = program;
  89. window.generator = CodeManagement.generate;
  90. window.runCodeAssessment = runCodeAssessment;
  91. window.renderAlgorithm = AlgorithmManagement.renderAlgorithm;
  92. window.insertContext = false;
  93. window.watchW = WatchJS;
  94. WatchJS.watch(window.program_obj.globals, function(){
  95. if (window.insertContext) {
  96. setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
  97. window.insertContext = false;
  98. } else {
  99. AlgorithmManagement.renderAlgorithm();
  100. }
  101. }, 1);
  102. WatchJS.watch(window.program_obj.functions, function(){
  103. if (window.insertContext) {
  104. setTimeout(function(){ AlgorithmManagement.renderAlgorithm(); }, 300);
  105. window.insertContext = false;
  106. } else {
  107. AlgorithmManagement.renderAlgorithm();
  108. }
  109. }, 0);
  110. function addFunctionHandler () {
  111. 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')));
  112. program.addFunction(new_function);
  113. counter_new_functions ++;
  114. window.insertContext = true;
  115. var newe = renderFunction(new_function);
  116. newe.css('display', 'none');
  117. newe.fadeIn();
  118. }
  119. function addParameter (function_obj, function_container, is_from_click = false) {
  120. if (function_obj.parameters_list == null) {
  121. function_obj.parameters_list = [];
  122. }
  123. var new_parameter = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI("new_parameter") + "_" + counter_new_parameters);
  124. function_obj.parameters_list.push(new_parameter);
  125. counter_new_parameters ++;
  126. var newe = renderParameter(function_obj, new_parameter, function_container);
  127. if (is_from_click) {
  128. newe.css('display', 'none');
  129. newe.fadeIn();
  130. }
  131. }
  132. function updateReturnType (function_obj, new_type, new_dimensions = 0) {
  133. function_obj.return_type = new_type;
  134. function_obj.return_dimensions = new_dimensions;
  135. }
  136. function removeFunction (function_obj) {
  137. var index = program.functions.indexOf(function_obj);
  138. if (index > -1) {
  139. program.functions.splice(index, 1);
  140. }
  141. }
  142. function minimizeFunction (function_obj) {
  143. function_obj.is_hidden = !function_obj.is_hidden;
  144. }
  145. function addHandlers (function_obj, function_container) {
  146. function_container.find('.ui.dropdown.function_return').dropdown({
  147. onChange: function(value, text, $selectedItem) {
  148. if ($selectedItem.data('dimensions')) {
  149. updateReturnType(function_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
  150. } else {
  151. updateReturnType(function_obj, Types[$selectedItem.data('type')]);
  152. }
  153. },
  154. selectOnKeydown: false
  155. });
  156. function_container.find( ".name_function_updated" ).on('click', function(e){
  157. enableNameFunctionUpdate(function_obj, function_container);
  158. });
  159. function_container.find( ".add_parameter_button" ).on('click', function(e){
  160. window.insertContext = true;
  161. addParameter(function_obj, function_container, true);
  162. });
  163. function_container.find('.menu_commands').dropdown({
  164. on: 'hover'
  165. });
  166. function_container.find('.menu_commands a').on('click', function(evt){
  167. if (function_obj.commands == null || function_obj.commands.length == 0) {
  168. function_obj.commands = [];
  169. var new_cmd = CommandsManagement.genericCreateCommand($(this).data('command'));
  170. function_obj.commands.push(new_cmd);
  171. CommandsManagement.renderCommand(new_cmd, function_container.find('.commands_list_div'), 3, function_obj);
  172. } else {
  173. CommandsManagement.createFloatingCommand(function_obj, function_container, $(this).data('command'), evt);
  174. }
  175. });
  176. function_container.find('.add_var_button_function').on('click', function(e){
  177. window.insertContext = true;
  178. VariablesManagement.addVariable(function_obj, function_container, true);
  179. });
  180. function_container.find('.remove_function_button').on('click', function(e){
  181. removeFunction(function_obj);
  182. function_container.fadeOut();
  183. });
  184. function_container.find('.minimize_function_button').on('click', function(e){
  185. minimizeFunction(function_obj);
  186. if (function_obj.is_hidden) {
  187. function_container.find(".add_var_button_function").toggle();
  188. function_container.find(".inline_add_command").toggle();
  189. function_container.find(".function_area").slideToggle();
  190. } else {
  191. function_container.find(".function_area").slideToggle(function(){
  192. function_container.find(".add_var_button_function").toggle();
  193. function_container.find(".inline_add_command").toggle();
  194. });
  195. }
  196. });
  197. }
  198. // Essa função imprime o tipo de retorno da função e cria o menu do tipo 'select' para alteração
  199. function renderFunctionReturn (function_obj, function_element) {
  200. var ret = '<div class="ui dropdown function_return">';
  201. if (function_obj.return_dimensions > 0) {
  202. ret += '<div class="text">'+ LocalizedStrings.getUI("vector") +':'+ LocalizedStrings.getUI(function_obj.return_type);
  203. if (function_obj.return_dimensions == 1) {
  204. ret += ' [ ] ';
  205. } else {
  206. ret += ' [ ] [ ] ';
  207. }
  208. ret += '</div>';
  209. } else {
  210. ret += '<div class="text">'+LocalizedStrings.getUI(function_obj.return_type)+'</div>';
  211. }
  212. ret += '<div class="menu">';
  213. for (var tm in Types) {
  214. ret += '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions < 1 ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
  215. }
  216. for (var tm in Types) {
  217. if (tm == Types.VOID.toUpperCase()) {
  218. continue;
  219. }
  220. ret += '<div class="item">'
  221. + '<i class="dropdown icon"></i>'
  222. + LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
  223. + '<div class="menu">'
  224. + '<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>'
  225. + '<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>'
  226. + '</div>'
  227. + '</div>';
  228. }
  229. ret += '</div></div>';
  230. ret = $(ret);
  231. function_element.find('.function_return').append(ret);
  232. }
  233. export function renderFunction (function_obj) {
  234. var appender = '<div class="ui secondary segment function_div list-group-item">';
  235. if (function_obj.function_comment) {
  236. //appender += renderComment(function_obj.function_comment, sequence, true, -1);
  237. }
  238. appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
  239. 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>')
  240. + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
  241. appender += '<div class="function_signature_div">'+LocalizedStrings.getUI("function")+' ';
  242. if (function_obj.is_main) {
  243. appender += '<div class="function_name_div"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ' + LocalizedStrings.getUI('void') + ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="span_name_function" >'+function_obj.name+'</span> </div> '
  244. + ' <span class="parethesis_function">( </span> <div class="ui large labels parameters_list">';
  245. } else {
  246. appender += '<div class="ui function_return"></div>';
  247. appender += '<div class="function_name_div function_name_div_updated"><span class="span_name_function name_function_updated">'+function_obj.name+'</span> </div> '
  248. + ' <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">';
  249. }
  250. appender += '</div> <span class="parethesis_function"> ) </span> </div>'
  251. + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ');
  252. 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>';
  253. appender += '<div class="ui top attached segment variables_list_div"></div>';
  254. 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"> ';
  255. appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.reader+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_read_var')+ '</a>'
  256. + '<a class="item" data-command="'+Models.COMMAND_TYPES.writer+'"><i class="upload icon"></i> '+LocalizedStrings.getUI('text_write_var')+'</a>'
  257. + '<a class="item" data-command="'+Models.COMMAND_TYPES.comment+'"><i class="quote left icon"></i> '+LocalizedStrings.getUI('text_comment')+'</a>'
  258. + '<a class="item" data-command="'+Models.COMMAND_TYPES.attribution+'"><i class="arrow left icon"></i> '+LocalizedStrings.getUI('text_attribution')+'</a>'
  259. + '<a class="item" data-command="'+Models.COMMAND_TYPES.functioncall+'"><i class="hand point right icon"></i> '+LocalizedStrings.getUI('text_functioncall')+'</a>'
  260. + '<a class="item" data-command="'+Models.COMMAND_TYPES.iftrue+'" ><i class="random icon"></i> '+LocalizedStrings.getUI('text_iftrue')+'</a>'
  261. + '<a class="item" data-command="'+Models.COMMAND_TYPES.repeatNtimes+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_repeatNtimes')+'</a>'
  262. + '<a class="item" data-command="'+Models.COMMAND_TYPES.whiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_whiletrue')+'</a>'
  263. + '<a class="item" data-command="'+Models.COMMAND_TYPES.dowhiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_dowhiletrue')+'</a>'
  264. + '<a class="item" data-command="'+Models.COMMAND_TYPES.switch+'"><i class="list icon"></i> '+LocalizedStrings.getUI('text_switch')+'</a>'
  265. + '<a class="item" data-command="'+Models.COMMAND_TYPES.return+'"><i class="reply icon"></i> '+LocalizedStrings.getUI('text_btn_return')+'</a>'
  266. + '</div></div></div>';
  267. appender += '<div class="ui bottom attached segment commands_list_div"></div>';
  268. appender += '</div></div>';
  269. appender = $(appender);
  270. $('.all_functions').append(appender);
  271. appender.data('fun', function_obj);
  272. appender.find('.commands_list_div').data('fun', function_obj);
  273. renderFunctionReturn(function_obj, appender);
  274. addHandlers(function_obj, appender);
  275. // Rendering parameters:
  276. for (var j = 0; j < function_obj.parameters_list.length; j++) {
  277. renderParameter(function_obj, function_obj.parameters_list[j], appender);
  278. }
  279. // Rendering variables:
  280. for (var j = 0; j < function_obj.variables_list.length; j++) {
  281. VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
  282. }
  283. // Rendering commands:
  284. for (var j = 0; j < function_obj.commands.length; j++) {
  285. CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
  286. }
  287. $('.minimize_function_button').popup({
  288. content : LocalizedStrings.getUI("tooltip_minimize"),
  289. delay: {
  290. show: 750,
  291. hide: 0
  292. }
  293. });
  294. Sortable.create(appender.find(".variables_list_div")[0], {
  295. handle: '.ellipsis',
  296. animation: 100,
  297. ghostClass: 'ghost',
  298. group: 'local_vars_drag_' + program.functions.indexOf(function_obj),
  299. onEnd: function (evt) {
  300. updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
  301. }
  302. });
  303. Sortable.create(appender.find(".commands_list_div")[0], {
  304. handle: '.command_drag',
  305. animation: 100,
  306. ghostClass: 'ghost',
  307. group: 'commands_drag_' + program.functions.indexOf(function_obj),
  308. onEnd: function (evt) {
  309. //updateSequenceLocals(evt.oldIndex, evt.newIndex, function_obj);
  310. }
  311. });
  312. if (!function_obj.is_main) {
  313. Sortable.create(appender.find(".container_parameters_list")[0], {
  314. handle: '.ellipsis',
  315. animation: 100,
  316. ghostClass: 'ghost',
  317. group: 'parameters_drag_' + program.functions.indexOf(function_obj),
  318. onEnd: function (evt) {
  319. updateSequenceParameters(evt.oldIndex, evt.newIndex, function_obj);
  320. }
  321. });
  322. }
  323. return appender;
  324. }
  325. export function initVisualUI () {
  326. // MUST USE CONST, LET, OR VAR !!!!!!
  327. const mainDiv = $('#visual-main-div');
  328. // fill mainDiv with functions and globals...
  329. // renderAlgorithm()...
  330. $('.add_function_button').on('click', () => {
  331. addFunctionHandler();
  332. });
  333. $('.add_global_button').on('click', () => {
  334. window.insertContext = true;
  335. GlobalsManagement.addGlobal(program, true);
  336. });
  337. $('.run_button').on('click', () => {
  338. runCode();
  339. });
  340. $('.visual_coding_button').on('click', () => {
  341. toggleVisualCoding();
  342. });
  343. $('.textual_coding_button').on('click', () => {
  344. toggleTextualCoding();
  345. });
  346. $('.assessment').on('click', () => {
  347. runCodeAssessment();
  348. is_iassign = true;
  349. });
  350. $('.div_toggle_console').on('click', () => {
  351. toggleConsole();
  352. });
  353. $('.expand_button').on('click', () => {
  354. full_screen();
  355. });
  356. $('.main_title h2').prop('title', LocalizedStrings.getUI('text_ivprog_description'));
  357. }
  358. var is_iassign = false;
  359. $( document ).ready(function() {
  360. var time_show = 750;
  361. $('.visual_coding_button').popup({
  362. content : LocalizedStrings.getUI("tooltip_visual"),
  363. delay: {
  364. show: time_show,
  365. hide: 0
  366. }
  367. });
  368. $('.textual_coding_button').popup({
  369. content : LocalizedStrings.getUI("tooltip_textual"),
  370. delay: {
  371. show: time_show,
  372. hide: 0
  373. }
  374. });
  375. $('.upload_file_button').popup({
  376. content : LocalizedStrings.getUI("tooltip_upload"),
  377. delay: {
  378. show: time_show,
  379. hide: 0
  380. }
  381. });
  382. $('.download_file_button').popup({
  383. content : LocalizedStrings.getUI("tooltip_download"),
  384. delay: {
  385. show: time_show,
  386. hide: 0
  387. }
  388. });
  389. $('.undo_button').popup({
  390. content : LocalizedStrings.getUI("tooltip_undo"),
  391. delay: {
  392. show: time_show,
  393. hide: 0
  394. }
  395. });
  396. $('.redo_button').popup({
  397. content : LocalizedStrings.getUI("tooltip_redo"),
  398. delay: {
  399. show: time_show,
  400. hide: 0
  401. }
  402. });
  403. $('.run_button').popup({
  404. content : LocalizedStrings.getUI("tooltip_run"),
  405. delay: {
  406. show: time_show,
  407. hide: 0
  408. }
  409. });
  410. $('.assessment_button').popup({
  411. content : LocalizedStrings.getUI("tooltip_evaluate"),
  412. delay: {
  413. show: time_show,
  414. hide: 0
  415. }
  416. });
  417. $('.help_button').popup({
  418. content : LocalizedStrings.getUI("tooltip_help") + ' - ' + LocalizedStrings.getUI("text_ivprog_version"),
  419. delay: {
  420. show: time_show,
  421. hide: 0
  422. }
  423. });
  424. $('.add_global_button').popup({
  425. content : LocalizedStrings.getUI("tooltip_add_global"),
  426. delay: {
  427. show: time_show,
  428. hide: 0
  429. }
  430. });
  431. $('.div_toggle_console').popup({
  432. content : LocalizedStrings.getUI("tooltip_console"),
  433. delay: {
  434. show: time_show,
  435. hide: 0
  436. }
  437. });
  438. Sortable.create(listWithHandle, {
  439. handle: '.glyphicon-move',
  440. animation: 100,
  441. ghostClass: 'ghost',
  442. group: 'functions_divs_drag',
  443. onEnd: function (evt) {
  444. updateSequenceFunction(evt.oldIndex, evt.newIndex);
  445. }
  446. });
  447. var listGlobalsHandle = document.getElementById("listGlobalsHandle");
  448. Sortable.create(listGlobalsHandle, {
  449. handle: '.ellipsis',
  450. animation: 100,
  451. ghostClass: 'ghost',
  452. group: 'globals_divs_drag',
  453. onEnd: function (evt) {
  454. updateSequenceGlobals(evt.oldIndex, evt.newIndex);
  455. }
  456. });
  457. });
  458. function updateSequenceParameters (oldIndex, newIndex, function_obj) {
  459. function_obj.parameters_list.splice(newIndex, 0, function_obj.parameters_list.splice(oldIndex, 1)[0]);
  460. }
  461. function updateSequenceLocals (oldIndex, newIndex, function_obj) {
  462. function_obj.variables_list.splice(newIndex, 0, function_obj.variables_list.splice(oldIndex, 1)[0]);
  463. }
  464. function updateSequenceGlobals (oldIndex, newIndex) {
  465. program_obj.globals.splice(newIndex, 0, program_obj.globals.splice(oldIndex, 1)[0]);
  466. }
  467. function updateSequenceFunction (oldIndex, newIndex) {
  468. program_obj.functions.splice(newIndex, 0, program_obj.functions.splice(oldIndex, 1)[0]);
  469. }
  470. function runCodeAssessment () {
  471. window.studentGrade = null;
  472. studentTemp = null;
  473. const strCode = CodeManagement.generate();
  474. if (strCode == null) {
  475. return;
  476. }
  477. toggleConsole(true);
  478. if(domConsole == null)
  479. domConsole = new DOMConsole("#ivprog-term");
  480. $("#ivprog-term").slideDown(500);
  481. const runner = new IVProgAssessment(strCode, testCases, domConsole);
  482. runner.runTest().then(grade => {
  483. if (!is_iassign) {
  484. parent.getEvaluationCallback(grade);
  485. } else {
  486. is_iassign = false;
  487. }
  488. }).catch( err => console.log(err));
  489. }
  490. function runCode () {
  491. const strCode = CodeManagement.generate();
  492. if (strCode == null) {
  493. return;
  494. }
  495. toggleConsole(true);
  496. if(domConsole == null)
  497. domConsole = new DOMConsole("#ivprog-term");
  498. $("#ivprog-term").slideDown(500);
  499. try {
  500. const parser = IVProgParser.createParser(strCode);
  501. const analyser = new SemanticAnalyser(parser.parseTree());
  502. const data = analyser.analyseTree();
  503. const proc = new IVProgProcessor(data);
  504. proc.registerInput(domConsole);
  505. proc.registerOutput(domConsole);
  506. $("#ivprog-term").addClass('ivprog-term-active');
  507. proc.interpretAST().then( _ => {
  508. domConsole.info("Programa executado com sucesso!");
  509. $("#ivprog-term").removeClass('ivprog-term-active');
  510. }).catch(err => {
  511. domConsole.err(err.message);
  512. $("#ivprog-term").removeClass('ivprog-term-active');
  513. })
  514. } catch (error) {
  515. domConsole.err(error.message);
  516. console.log(error);
  517. }
  518. }
  519. function toggleConsole (is_running) {
  520. if (is_running) {
  521. $('.ivprog-term-div').css('display', 'block');
  522. $('#ivprog-term').css('min-height', '160px');
  523. $('#ivprog-term').css('margin-top', '-170px');
  524. return;
  525. }
  526. if ($('#ivprog-term').css('min-height') == '160px') {
  527. // esconder
  528. $('.ivprog-term-div').css('display', 'none');
  529. $('#ivprog-term').css('min-height', '0');
  530. $('#ivprog-term').css('margin-top', '-30px');
  531. $('#ivprog-term').css('padding', '5px');
  532. } else {
  533. // mostrar
  534. $('.ivprog-term-div').css('display', 'block');
  535. $('#ivprog-term').css('min-height', '160px');
  536. $('#ivprog-term').css('margin-top', '-170px');
  537. }
  538. }
  539. function waitToCloseConsole () {
  540. domConsole.info("Aperte qualquer tecla para fechar...");
  541. const p = new Promise((resolve, _) => {
  542. domConsole.requestInput(resolve, true);
  543. });
  544. p.then( _ => {
  545. domConsole.dispose();
  546. domConsole = null;
  547. $("#ivprog-term").hide();
  548. })
  549. }
  550. function toggleTextualCoding () {
  551. var code = CodeManagement.generate();
  552. if (code == null) {
  553. return;
  554. }
  555. $('.ivprog_visual_panel').css('display', 'none');
  556. $('.ivprog_textual_panel').css('display', 'block');
  557. $('.ivprog_textual_panel').removeClass('loading');
  558. $('.ivprog_textual_code').text(code);
  559. $('.visual_coding_button').removeClass('active');
  560. $('.textual_coding_button').addClass('active');
  561. }
  562. function toggleVisualCoding () {
  563. $('.ivprog_textual_panel').addClass('loading');
  564. $('.ivprog_textual_panel').css('display', 'none');
  565. $('.ivprog_visual_panel').css('display', 'block');
  566. $('.textual_coding_button').removeClass('active');
  567. $('.visual_coding_button').addClass('active');
  568. }
  569. function removeParameter (function_obj, parameter_obj, parameter_container) {
  570. var index = function_obj.parameters_list.indexOf(parameter_obj);
  571. if (index > -1) {
  572. window.insertContext = true;
  573. function_obj.parameters_list.splice(index, 1);
  574. }
  575. $(parameter_container).fadeOut();
  576. }
  577. function updateParameterType (parameter_obj, new_type, new_dimensions = 0) {
  578. parameter_obj.type = new_type;
  579. parameter_obj.dimensions = new_dimensions;
  580. if (new_dimensions > 0) {
  581. parameter_obj.rows = new_dimensions;
  582. parameter_obj.columns = 2;
  583. }
  584. }
  585. function renderParameter (function_obj, parameter_obj, function_container) {
  586. var ret = "";
  587. ret += '<div class="ui label function_name_parameter pink"><i class="ui icon ellipsis vertical inverted"></i>';
  588. ret += '<div class="ui dropdown parameter_type">';
  589. if (parameter_obj.dimensions > 0) {
  590. ret += '<div class="text">'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
  591. if (parameter_obj.dimensions == 1) {
  592. ret += ' [ ] ';
  593. } else {
  594. ret += ' [ ] [ ] ';
  595. }
  596. ret += '</div>';
  597. } else {
  598. ret += '<div class="text">'+LocalizedStrings.getUI(parameter_obj.type)+'</div>';
  599. }
  600. ret += '<div class="menu">';
  601. for (var tm in Types) {
  602. if (tm == Types.VOID.toUpperCase()) {
  603. continue;
  604. }
  605. ret += '<div class="item ' + (parameter_obj.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
  606. }
  607. for (var tm in Types) {
  608. if (tm == Types.VOID.toUpperCase()) {
  609. continue;
  610. }
  611. ret += '<div class="item">'
  612. + '<i class="dropdown icon"></i>'
  613. + LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
  614. + '<div class="menu">'
  615. + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
  616. + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
  617. + '</div>'
  618. + '</div>';
  619. }
  620. ret += '</div></div>';
  621. ret += '<div class="parameter_div_edit"><span class="span_name_parameter label_enable_name_parameter">'+parameter_obj.name+'</span></div> ';
  622. ret += ' <i class="yellow inverted icon times remove_parameter"></i></div>';
  623. ret = $(ret);
  624. function_container.find('.container_parameters_list').append(ret);
  625. ret.find('.remove_parameter').on('click', function(e){
  626. removeParameter(function_obj, parameter_obj, ret);
  627. });
  628. ret.find('.ui.dropdown.parameter_type').dropdown({
  629. onChange: function(value, text, $selectedItem) {
  630. if ($selectedItem.data('dimensions')) {
  631. updateParameterType(parameter_obj, Types[$selectedItem.data('type')], $selectedItem.data('dimensions'));
  632. } else {
  633. updateParameterType(parameter_obj, Types[$selectedItem.data('type')]);
  634. }
  635. },
  636. selectOnKeydown: false
  637. });
  638. ret.find('.label_enable_name_parameter').on('click', function(e){
  639. enableNameParameterUpdate(parameter_obj, ret, function_obj);
  640. });
  641. return ret;
  642. }
  643. function updateParameterName (parameter_var, new_name, parameter_obj_dom, function_obj) {
  644. if (isValidIdentifier(new_name)) {
  645. if (variableNameAlreadyExists(new_name, function_obj)) {
  646. Utils.renderErrorMessage(parameter_obj_dom.find('.parameter_div_edit'), LocalizedStrings.getUI('inform_valid_variable_duplicated'));
  647. } else {
  648. parameter_var.name = new_name;
  649. }
  650. } else {
  651. Utils.renderErrorMessage(parameter_obj_dom.find('.parameter_div_edit'), LocalizedStrings.getUI('inform_valid_name'));
  652. }
  653. }
  654. function variableNameAlreadyExists (name_var, function_obj) {
  655. if (function_obj.parameters_list) {
  656. for (var i = 0; i < function_obj.parameters_list.length; i++) {
  657. if (function_obj.parameters_list[i].name == name_var) {
  658. return true;
  659. }
  660. }
  661. }
  662. if (function_obj.variables_list) {
  663. for (var i = 0; i < function_obj.variables_list.length; i++) {
  664. if (function_obj.variables_list[i].name == name_var) {
  665. return true;
  666. }
  667. }
  668. }
  669. return false;
  670. }
  671. function updateFunctionName (function_var, new_name, function_obj_dom) {
  672. if (isValidIdentifier(new_name)) {
  673. if (functionNameAlreadyExists(new_name)) {
  674. Utils.renderErrorMessage(function_obj_dom.find('.function_name_div'), LocalizedStrings.getUI('inform_valid_name_duplicated'));
  675. } else {
  676. function_var.name = new_name;
  677. }
  678. } else {
  679. Utils.renderErrorMessage(function_obj_dom.find('.function_name_div'), LocalizedStrings.getUI('inform_valid_name'));
  680. }
  681. }
  682. function functionNameAlreadyExists (function_name) {
  683. for (var i = 0; i < window.program_obj.functions.length; i++) {
  684. if (window.program_obj.functions[i].name == function_name) {
  685. return true;
  686. }
  687. }
  688. return false;
  689. }
  690. function isValidIdentifier (identifier_str) {
  691. return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(identifier_str);
  692. }
  693. var opened_name_parameter = false;
  694. var opened_input_parameter = null;
  695. function enableNameParameterUpdate (parameter_obj, parent_node, function_obj) {
  696. if (opened_name_parameter) {
  697. opened_input_parameter.focus();
  698. return;
  699. }
  700. opened_name_parameter = true;
  701. parent_node = $(parent_node);
  702. var input_field;
  703. parent_node.find('.span_name_parameter').text('');
  704. input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+parameter_obj.name+"' />" );
  705. input_field.insertBefore(parent_node.find('.span_name_parameter'));
  706. input_field.on('input', function() {
  707. var inputWidth = input_field.textWidth()+10;
  708. opened_input_parameter = input_field;
  709. input_field.focus();
  710. var tmpStr = input_field.val();
  711. input_field.val('');
  712. input_field.val(tmpStr);
  713. input_field.css({
  714. width: inputWidth
  715. })
  716. }).trigger('input');
  717. input_field.focusout(function() {
  718. /// update array:
  719. if (input_field.val().trim()) {
  720. updateParameterName(parameter_obj, input_field.val().trim(), parent_node, function_obj);
  721. parent_node.find('.span_name_parameter').text(parameter_obj.name);
  722. }
  723. input_field.off();
  724. input_field.remove();
  725. /// update elements:
  726. opened_name_parameter = false;
  727. opened_input_parameter = false;
  728. });
  729. input_field.on('keydown', function(e) {
  730. var code = e.keyCode || e.which;
  731. if(code == 13) {
  732. if (input_field.val().trim()) {
  733. updateParameterName(parameter_obj, input_field.val().trim(), parent_node, function_obj);
  734. parent_node.find('.span_name_parameter').text(parameter_obj.name);
  735. }
  736. input_field.off();
  737. input_field.remove();
  738. /// update elements:
  739. opened_name_parameter = false;
  740. opened_input_parameter = false;
  741. }
  742. if(code == 27) {
  743. parent_node.find('.span_name_parameter').text(parameter_obj.name);
  744. input_field.off();
  745. input_field.remove();
  746. /// update elements:
  747. opened_name_parameter = false;
  748. opened_input_parameter = false;
  749. }
  750. });
  751. input_field.select();
  752. }
  753. var opened_name_function = false;
  754. var opened_input = null;
  755. var previousPadding = null;
  756. function enableNameFunctionUpdate (function_obj, parent_node) {
  757. if (opened_name_function) {
  758. opened_input.focus();
  759. return;
  760. }
  761. parent_node = $(parent_node);
  762. parent_node.find('.span_name_function').text('');
  763. var input_field;
  764. if (!previousPadding) {
  765. previousPadding = parent_node.find('.span_name_function').css('padding-left');
  766. }
  767. parent_node.find('.span_name_function').css('padding-left', '0');
  768. parent_node.find('.span_name_function').css('padding-right', '0');
  769. input_field = $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+function_obj.name+"' />" );
  770. input_field.insertBefore(parent_node.find('.span_name_function'));
  771. input_field.on('input', function() {
  772. var inputWidth = input_field.textWidth()+10;
  773. opened_input = input_field;
  774. input_field.focus();
  775. var tmpStr = input_field.val();
  776. input_field.val('');
  777. input_field.val(tmpStr);
  778. input_field.css({
  779. width: inputWidth
  780. })
  781. }).trigger('input');
  782. input_field.focusout(function() {
  783. /// update array:
  784. if (input_field.val().trim()) {
  785. updateFunctionName(function_obj, input_field.val().trim(), parent_node);
  786. }
  787. input_field.off();
  788. input_field.remove();
  789. parent_node.find('.span_name_function').css('padding-left', previousPadding);
  790. parent_node.find('.span_name_function').css('padding-right', previousPadding);
  791. parent_node.find('.span_name_function').text(function_obj.name);
  792. /// update elements:
  793. opened_name_function = false;
  794. opened_input = false;
  795. });
  796. input_field.on('keydown', function(e) {
  797. var code = e.keyCode || e.which;
  798. if(code == 13) {
  799. if (input_field.val().trim()) {
  800. updateFunctionName(function_obj, input_field.val().trim(), parent_node);
  801. }
  802. input_field.off();
  803. input_field.remove();
  804. parent_node.find('.span_name_function').css('padding-left', previousPadding);
  805. parent_node.find('.span_name_function').css('padding-right', previousPadding);
  806. parent_node.find('.span_name_function').text(function_obj.name);
  807. /// update elements:
  808. opened_name_function = false;
  809. opened_input = false;
  810. }
  811. if(code == 27) {
  812. input_field.off();
  813. input_field.remove();
  814. parent_node.find('.span_name_function').css('padding-left', previousPadding);
  815. parent_node.find('.span_name_function').css('padding-right', previousPadding);
  816. parent_node.find('.span_name_function').text(function_obj.name);
  817. /// update elements:
  818. opened_name_function = false;
  819. opened_input = false;
  820. }
  821. });
  822. input_field.select();
  823. }