functions.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  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. var counter_new_functions = 0;
  10. var counter_new_parameters = 0;
  11. const program = new Models.Program();
  12. const mainFunction = new Models.Function(LocalizedStrings.getUI("start"), Types.VOID, 0, [], true, false, []);
  13. mainFunction.function_comment = new Models.Comment(LocalizedStrings.getUI('text_comment_main'));
  14. program.addFunction(mainFunction);
  15. window.program_obj = program;
  16. function addFunctionHandler () {
  17. 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')));
  18. program.addFunction(new_function);
  19. counter_new_functions ++;
  20. renderFunction(new_function);
  21. }
  22. function addParameter (function_obj, function_container) {
  23. if (function_obj.parameters_list == null) {
  24. function_obj.parameters_list = [];
  25. }
  26. var new_parameter = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI("new_parameter") + "_" + counter_new_parameters);
  27. function_obj.parameters_list.push(new_parameter);
  28. counter_new_parameters ++;
  29. renderParameter(function_obj, new_parameter, function_container);
  30. }
  31. function updateReturnType (function_obj, new_type, new_dimensions = 0) {
  32. function_obj.return_type = new_type;
  33. function_obj.return_dimensions = new_dimensions;
  34. }
  35. function removeFunction (function_obj) {
  36. var index = program.functions.indexOf(function_obj);
  37. if (index > -1) {
  38. program.functions.splice(index, 1);
  39. }
  40. }
  41. function minimizeFunction (function_obj) {
  42. function_obj.is_hidden = !function_obj.is_hidden;
  43. }
  44. function addHandlers (function_obj, function_container) {
  45. $( function_container ).find('.ui.dropdown.function_return').dropdown({
  46. onChange: function(value, text, $selectedItem) {
  47. if ($($selectedItem).data('dimensions')) {
  48. updateReturnType(function_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
  49. } else {
  50. updateReturnType(function_obj, Types[$($selectedItem).data('type')]);
  51. }
  52. }
  53. });
  54. $( function_container ).find( ".name_function_updated" ).on('click', function(e){
  55. enableNameFunctionUpdate(function_obj, function_container);
  56. });
  57. $( function_container ).find( ".add_parameter_button" ).on('click', function(e){
  58. addParameter(function_obj, function_container);
  59. });
  60. $( function_container ).find('.menu_commands').dropdown();
  61. $( function_container ).find('.menu_commands a').on('click', function(evt){
  62. CommandsManagement.createFloatingCommand(function_obj, function_container, $(this).data('command'), evt);
  63. });
  64. $( function_container ).find('.add_var_button_function').on('click', function(e){
  65. VariablesManagement.addVariable(function_obj, function_container);
  66. });
  67. $( function_container ).find('.remove_function_button').on('click', function(e){
  68. removeFunction(function_obj);
  69. $(function_container).slideUp(400);
  70. });
  71. $( function_container ).find('.minimize_function_button').on('click', function(e){
  72. minimizeFunction(function_obj);
  73. $(function_container).find(".function_area").toggle();
  74. });
  75. }
  76. // Essa função imprime o tipo de retorno da função e cria o menu do tipo 'select' para alteração
  77. function renderFunctionReturn (function_obj, function_element) {
  78. var ret = '<div class="ui dropdown function_return">';
  79. if (function_obj.return_dimensions > 0) {
  80. ret += '<div class="text">'+ LocalizedStrings.getUI("vector") +':'+ LocalizedStrings.getUI(function_obj.return_type);
  81. ret += '</div>';
  82. } else {
  83. ret += '<div class="text">'+LocalizedStrings.getUI(function_obj.return_type)+'</div>';
  84. }
  85. ret += '<i class="dropdown icon"></i>'
  86. + '<div class="menu">';
  87. for (var tm in Types) {
  88. ret += '<div class="item ' + (function_obj.return_type == tm.toLowerCase() && function_obj.return_dimensions < 1 ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
  89. }
  90. for (var tm in Types) {
  91. if (tm == Types.VOID.toUpperCase()) {
  92. continue;
  93. }
  94. ret += '<div class="item">'
  95. + '<i class="dropdown icon"></i>'
  96. + LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
  97. + '<div class="menu">'
  98. + '<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>'
  99. + '<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>'
  100. + '</div>'
  101. + '</div>';
  102. }
  103. ret += '</div></div>';
  104. ret = $(ret);
  105. $(function_element).find('.function_return').append(ret);
  106. }
  107. function renderFunction (function_obj) {
  108. var appender = '<div class="ui secondary segment function_div list-group-item">';
  109. if (function_obj.function_comment) {
  110. //appender += renderComment(function_obj.function_comment, sequence, true, -1);
  111. }
  112. appender += '<span class="glyphicon glyphicon-move move_function" aria-hidden="true"><i class="icon sort alternate vertical"></i></span>';
  113. 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>')
  114. + '<button class="ui icon button tiny minimize_function_button"><i class="icon window minimize"></i></button>';
  115. appender += '<div class="ui icon buttons add_var_top_button"><div class="ui icon button add_var_button_function"><i class="icon superscript"></i></div>';
  116. appender += '<div class="ui icon button dropdown menu_commands" ><i class="icon code"></i> <div class="menu"> ';
  117. appender += '<a class="item" data-command="'+Models.COMMAND_TYPES.reader+'"><i class="download icon"></i> ' +LocalizedStrings.getUI('text_read_var')+ '</a>'
  118. + '<a class="item" data-command="'+Models.COMMAND_TYPES.writer+'"><i class="upload icon"></i> '+LocalizedStrings.getUI('text_write_var')+'</a>'
  119. + '<a class="item" data-command="'+Models.COMMAND_TYPES.comment+'"><i class="quote left icon"></i> '+LocalizedStrings.getUI('text_comment')+'</a>'
  120. + '<a class="item" data-command="'+Models.COMMAND_TYPES.attribution+'"><i class="arrow left icon"></i> '+LocalizedStrings.getUI('text_attribution')+'</a>'
  121. + '<a class="item" data-command="'+Models.COMMAND_TYPES.functioncall+'"><i class="hand point right icon"></i> '+LocalizedStrings.getUI('text_functioncall')+'</a>'
  122. + '<a class="item" data-command="'+Models.COMMAND_TYPES.iftrue+'" ><i class="random icon"></i> '+LocalizedStrings.getUI('text_iftrue')+'</a>'
  123. + '<a class="item" data-command="'+Models.COMMAND_TYPES.repeatNtimes+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_repeatNtimes')+'</a>'
  124. + '<a class="item" data-command="'+Models.COMMAND_TYPES.whiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_whiletrue')+'</a>'
  125. + '<a class="item" data-command="'+Models.COMMAND_TYPES.dowhiletrue+'"><i class="sync icon"></i> '+LocalizedStrings.getUI('text_dowhiletrue')+'</a>'
  126. + '<a class="item" data-command="'+Models.COMMAND_TYPES.switch+'"><i class="list icon"></i> '+LocalizedStrings.getUI('text_switch')+'</a>'
  127. + '</div></div></div>';
  128. appender += '<div class="function_signature_div">'+LocalizedStrings.getUI("function")+' ';
  129. if (function_obj.is_main) {
  130. 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> '
  131. + '( <div class="ui large labels parameters_list">';
  132. } else {
  133. appender += '<div class="ui function_return"></div>';
  134. appender += '<div class="function_name_div"><span class="span_name_function name_function_updated">'+function_obj.name+'</span> <i class="icon small pencil alternate enable_edit_name_function name_function_updated"></i></div> '
  135. + '( <i class="ui icon plus square outline add_parameter_button"></i> <div class="ui large labels parameters_list container_parameters_list">';
  136. }
  137. //appender += renderFunctionParameters(function_obj, sequence);
  138. appender += '</div> ) {</div>'
  139. + (function_obj.is_hidden ? ' <div class="function_area" style="display: none;"> ' : ' <div class="function_area"> ')
  140. + '<div class="ui top attached segment variables_list_div">'
  141. /*+ renderVariables(function_obj, sequence)*/
  142. + '</div>'
  143. + '<div class="ui bottom attached segment commands_list_div" id="function_drag_cmd_">';
  144. if (function_obj.commands) {
  145. for (var l = 0; l < function_obj.commands.length; l++) {
  146. //appender += renderElementCommandGeneric(programa.funcoes[sequence].comandos[l], sequence, l, -1, l);
  147. }
  148. }
  149. appender += '</div>';
  150. appender += '<div class="function_close_div">}</div>'
  151. + '</div>'
  152. + '</div>';
  153. appender = $(appender);
  154. $('.all_functions').append(appender);
  155. $(appender).data('fun', function_obj);
  156. $(appender).find('.commands_list_div').data('fun', function_obj);
  157. renderFunctionReturn(function_obj, appender);
  158. addHandlers(function_obj, appender);
  159. }
  160. export function initVisualUI () {
  161. // MUST USE CONST, LET, OR VAR !!!!!!
  162. const mainDiv = $('#visual-main-div');
  163. // fill mainDiv with functions and globals...
  164. // renderAlgorithm()...
  165. $('.add_function_button').on('click', () => {
  166. addFunctionHandler();
  167. });
  168. $('.add_global_button').on('click', () => {
  169. GlobalsManagement.addGlobal(program);
  170. });
  171. renderFunction(mainFunction);
  172. $('.run_button').on('click', () => {
  173. CodeManagement.generate();
  174. });
  175. $('.visual_coding_button').on('click', () => {
  176. toggleVisualCoding();
  177. });
  178. $('.textual_coding_button').on('click', () => {
  179. toggleTextualCoding();
  180. });
  181. }
  182. function toggleTextualCoding () {
  183. var code = CodeManagement.generate();
  184. $('.ivprog_visual_panel').css('display', 'none');
  185. $('.ivprog_textual_panel').css('display', 'block');
  186. $('.ivprog_textual_panel').removeClass('loading');
  187. $('.ivprog_textual_code').text(code);
  188. }
  189. function toggleVisualCoding () {
  190. $('.ivprog_textual_panel').addClass('loading');
  191. $('.ivprog_textual_panel').css('display', 'none');
  192. $('.ivprog_visual_panel').css('display', 'block');
  193. }
  194. function removeParameter (function_obj, parameter_obj, parameter_container) {
  195. var index = function_obj.parameters_list.indexOf(parameter_obj);
  196. if (index > -1) {
  197. function_obj.parameters_list.splice(index, 1);
  198. }
  199. $(parameter_container).remove();
  200. }
  201. function updateParameterType(parameter_obj, new_type, new_dimensions = 0) {
  202. parameter_obj.type = new_type;
  203. parameter_obj.dimensions = new_dimensions;
  204. if (new_dimensions > 0) {
  205. parameter_obj.rows = new_dimensions;
  206. parameter_obj.columns = 2;
  207. }
  208. }
  209. function renderParameter (function_obj, parameter_obj, function_container) {
  210. var ret = "";
  211. 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>';
  212. ret += '<div class="ui dropdown parameter_type">';
  213. if (parameter_obj.dimensions > 0) {
  214. ret += '<div class="text">'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
  215. ret += '</div>';
  216. } else {
  217. ret += '<div class="text">'+LocalizedStrings.getUI(parameter_obj.type)+'</div>';
  218. }
  219. ret += '<i class="dropdown icon"></i>'
  220. + '<div class="menu">';
  221. for (var tm in Types) {
  222. if (tm == Types.VOID.toUpperCase()) {
  223. continue;
  224. }
  225. ret += '<div class="item ' + (parameter_obj.type == tm.toLowerCase() ? ' selected ' : '') + '" data-type="'+tm+'" >'+LocalizedStrings.getUI(tm.toLowerCase())+'</div>';
  226. }
  227. for (var tm in Types) {
  228. if (tm == Types.VOID.toUpperCase()) {
  229. continue;
  230. }
  231. ret += '<div class="item">'
  232. + '<i class="dropdown icon"></i>'
  233. + LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())
  234. + '<div class="menu">'
  235. + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] " data-type="'+tm+'" data-dimensions="1">[ ]</div>'
  236. + '<div class="item" data-text="'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(tm.toLowerCase())+' [ ] [ ] " data-type="'+tm+'" data-dimensions="2">[ ] [ ] </div>'
  237. + '</div>'
  238. + '</div>';
  239. }
  240. ret += '</div></div>';
  241. ret += ' <i class="red icon times remove_parameter"></i></div>';
  242. ret = $(ret);
  243. $(function_container).find('.container_parameters_list').append(ret);
  244. $(ret).find('.remove_parameter').on('click', function(e){
  245. removeParameter(function_obj, parameter_obj, ret);
  246. });
  247. $(ret).find('.ui.dropdown.parameter_type').dropdown({
  248. onChange: function(value, text, $selectedItem) {
  249. if ($($selectedItem).data('dimensions')) {
  250. updateParameterType(parameter_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
  251. } else {
  252. updateParameterType(parameter_obj, Types[$($selectedItem).data('type')]);
  253. }
  254. }
  255. });
  256. $(ret).find('.label_enable_name_parameter').on('click', function(e){
  257. enableNameParameterUpdate(parameter_obj, ret);
  258. });
  259. }
  260. var opened_name_parameter = false;
  261. var opened_input_parameter = null;
  262. function enableNameParameterUpdate (parameter_obj, parent_node) {
  263. if (opened_name_parameter) {
  264. $(opened_input_parameter).focus();
  265. return;
  266. }
  267. opened_name_parameter = true;
  268. $(parent_node).find('.span_name_parameter').text('');
  269. $( "<input type='text' class='width-dynamic input_name_function' autocomplete='off' autocorrect='off' autocapitalize='off' spellcheck='false' value='"+parameter_obj.name+"' />" ).insertBefore($(parent_node).find('.span_name_parameter'));
  270. $('.width-dynamic').on('input', function() {
  271. var inputWidth = $(this).textWidth()+10;
  272. opened_input_parameter = this;
  273. $(this).focus();
  274. var tmpStr = $(this).val();
  275. $(this).val('');
  276. $(this).val(tmpStr);
  277. $(this).css({
  278. width: inputWidth
  279. })
  280. }).trigger('input');
  281. $('.width-dynamic').focusout(function() {
  282. /// update array:
  283. if ($(this).val().trim()) {
  284. parameter_obj.name = $(this).val().trim();
  285. $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
  286. }
  287. $(this).remove();
  288. /// update elements:
  289. opened_name_parameter = false;
  290. opened_input_parameter = false;
  291. });
  292. $('.width-dynamic').on('keydown', function(e) {
  293. var code = e.keyCode || e.which;
  294. if(code == 13) {
  295. if ($(this).val().trim()) {
  296. parameter_obj.name = $(this).val().trim();
  297. $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
  298. }
  299. $(this).remove();
  300. /// update elements:
  301. opened_name_parameter = false;
  302. opened_input_parameter = false;
  303. }
  304. if(code == 27) {
  305. $(parent_node).find('.span_name_parameter').text(parameter_obj.name);
  306. $(this).remove();
  307. /// update elements:
  308. opened_name_parameter = false;
  309. opened_input_parameter = false;
  310. }
  311. });
  312. }
  313. var opened_name_function = false;
  314. var opened_input = null;
  315. function enableNameFunctionUpdate(function_obj, parent_node) {
  316. if (opened_name_function) {
  317. $(opened_input).focus();
  318. return;
  319. }
  320. $(parent_node).find('.span_name_function').text('');
  321. $( "<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'));
  322. $('.width-dynamic').on('input', function() {
  323. var inputWidth = $(this).textWidth()+10;
  324. opened_input = this;
  325. $(this).focus();
  326. var tmpStr = $(this).val();
  327. $(this).val('');
  328. $(this).val(tmpStr);
  329. $(this).css({
  330. width: inputWidth
  331. })
  332. }).trigger('input');
  333. $('.width-dynamic').focusout(function() {
  334. /// update array:
  335. if ($(this).val().trim()) {
  336. function_obj.name = $(this).val().trim();
  337. }
  338. $(this).remove();
  339. $(parent_node).find('.span_name_function').text(function_obj.name);
  340. /// update elements:
  341. opened_name_function = false;
  342. opened_input = false;
  343. });
  344. $('.width-dynamic').on('keydown', function(e) {
  345. var code = e.keyCode || e.which;
  346. if(code == 13) {
  347. if ($(this).val().trim()) {
  348. function_obj.name = $(this).val().trim();
  349. }
  350. $(this).remove();
  351. $(parent_node).find('.span_name_function').text(function_obj.name);
  352. /// update elements:
  353. opened_name_function = false;
  354. opened_input = false;
  355. }
  356. if(code == 27) {
  357. $(this).remove();
  358. $(parent_node).find('.span_name_function').text(function_obj.name);
  359. /// update elements:
  360. opened_name_function = false;
  361. opened_input = false;
  362. }
  363. });
  364. }