1
0

functions.js 33 KB

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