';
if (function_obj.function_comment) {
//appender += renderComment(function_obj.function_comment, sequence, true, -1);
}
appender += '
'+LocalizedStrings.getUI("function")+' ';
if (function_obj.is_main) {
appender += '
' + LocalizedStrings.getUI('void') + ' '+function_obj.name+'
'
+ '(
';
} else {
appender += '
';
appender += '
'+function_obj.name+'
'
+ '(
';
var menu_button = '';
var params = "";
menu_button = $(menu_button);
for (var j = 0; j < function_obj.parameters_list.length; j++) {
if (j > 0)
params += ',';
params += function_obj.parameters_list[j].type;
}
menu_button
.data('fun',function_obj)
.on('dragstart', function(e) {
e.originalEvent.dataTransfer.setData("text",JSON.stringify({type:"function",content:function_obj}));
//evt.originalEvent.dataTransfer.setData("text",$(this).data('command'));
})
.find('.function_params').text(params)
.find('.function_return_type').text(function_obj.type);
$('.functions_labels').append(menu_button);
console.log("aqui");
//var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']');
//var params = "";
//menu_button
}
appender += '
)
'
+ (function_obj.is_hidden ? '
' : '
')
+ '
'
/*+ renderVariables(function_obj, sequence)*/
+ '
'
+ '
';
appender += '
';
appender += '
'
+ '
'
+ '
';
appender = $(appender);
$('.all_functions').append(appender);
appender.data('fun', function_obj);
console.log("----====----->");
appender.find('.commands_list_div')
.data('fun', function_obj)
.attr('droppable',true)
.on('dragenter',function(e) {
e.preventDefault();
console.log('dragenter');
console.log(e.target)
$(e.target).addClass('div-over')
//e.stopPropagation();
}).on('dragover',function(e){
e.preventDefault();
})
.on('dragleave',function(e) {
e.preventDefault();
//e.stopPropagation();
console.log("dragleave")
$(e.target).removeClass('div-over')
console.log(e.target)
})
.on('drop',function(e){
e.preventDefault();
console.log('ondrop ' + e.originalEvent.dataTransfer.getData("text"));
console.log(e)
$(e.target).removeClass('div-over')
var data = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
if (data.type == 'command')
CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, data.content);
else {
CommandsManagement.prepareManageCommand(function_obj, $(e.target).closest('.function_div'), e, "functioncall", data.content);
}
});
renderFunctionReturn(function_obj, appender);
addHandlers(function_obj, appender);
// Rendering parameters:
for (var j = 0; j < function_obj.parameters_list.length; j++) {
renderParameter(function_obj, function_obj.parameters_list[j], appender);
}
// Rendering variables:
for (var j = 0; j < function_obj.variables_list.length; j++) {
VariablesManagement.renderVariable(appender, function_obj.variables_list[j], function_obj);
}
// Rendering commands:
for (var j = 0; j < function_obj.commands.length; j++) {
CommandsManagement.renderCommand(function_obj.commands[j], $(appender.find('.commands_list_div')[0]), 3, function_obj);
}
console.log('kk')
console.log($($('.function_div')[0]).data('fun'))
console.log(appender.data('fun'))
}
initVisualUI = function() {
// MUST USE CONST, LET, OR VAR !!!!!!
const mainDiv = $('#visual-main-div');
// fill mainDiv with functions and globals...
// renderAlgorithm()...
$('.add_function_button').on('click', () => {
addFunctionHandler();
});
$('.add_global_button').on('click', () => {
GlobalsManagement.addGlobal(program);
});
$('.run_button').on('click', () => {
runCode();
});
$('.visual_coding_button').on('click', () => {
toggleVisualCoding();
});
$('.textual_coding_button').on('click', () => {
toggleTextualCoding();
});
var commands = [
{type: Models.COMMAND_TYPES.break, icon: "stop", text: LocalizedStrings.getUI('text_break')},
{type: Models.COMMAND_TYPES.reader, icon: "download", text: LocalizedStrings.getUI('text_read_var')},
{type: Models.COMMAND_TYPES.writer, icon: "upload", text: LocalizedStrings.getUI('text_write_var')},
{type: Models.COMMAND_TYPES.comment, icon: "quote left", text: LocalizedStrings.getUI('text_comment')},
{type: Models.COMMAND_TYPES.attribution, icon: "arrow left", text: LocalizedStrings.getUI('text_attribution')},
//{type: Models.COMMAND_TYPES.functioncall, icon: "hand point right", text: LocalizedStrings.getUI('text_functioncall')},
{type: Models.COMMAND_TYPES.iftrue, icon: "random", text: LocalizedStrings.getUI('text_iftrue')},
{type: Models.COMMAND_TYPES.repeatNtimes, icon: "sync", text: LocalizedStrings.getUI('text_repeatNtimes')},
{type: Models.COMMAND_TYPES.whiletrue, icon: "sync", text: LocalizedStrings.getUI('text_whiletrue')},
{type: Models.COMMAND_TYPES.dowhiletrue, icon: "sync", text: LocalizedStrings.getUI('text_dowhiletrue')},
{type: Models.COMMAND_TYPES.switch, icon: "list", text: LocalizedStrings.getUI('text_switch')}
];
for (var i = 0; i < commands.length; i++) {
var command = '';
command = $(command);
command.on('dragstart', function(evt){
//evt.originalEvent.dataTransfer.setData("text",$(this).data('command'));
evt.originalEvent.dataTransfer.setData("text",JSON.stringify({type:"command",content:$(this).data('command')}));
console.log('dragstart')
// $('.commands_list_div').attr('droppable',true)
// .on('dragenter',function(e) {
// e.preventDefault();
// //e.stopPropagation();
// console.log("dragenter")
// e.originalEvent.dataTransfer.setData("text",$(this).data('command'));
// console.log($(this).data('command'))
// $(e.target).addClass('div-over')
// console.log(e.target)
// }).on('dragover',function(e){
// e.preventDefault();
// })
// .on('dragleave',function(e) {
// e.preventDefault();
// //e.stopPropagation();
// console.log("dragleave")
// $(e.target).removeClass('div-over')
// console.log(e.target)
// })
// .on('drop',function(e){
// e.preventDefault();
// console.log('ondrop ' + e.originalEvent.dataTransfer.getData("text"))
// CommandsManagement.prepareManageCommand(null, null, e, e.originalEvent.dataTransfer.getData("text"));
// })
/*$(".commands_list_div, .commands_list_div, .block_commands, .command_container").hover(
function(e) {
console.log("enter =>")
$(e.currentTarget).addClass('div-over');
console.log({target: e.target, currentTarget: e.currentTarget, relatedTarget: e.relatedTarget, delegateTarget: e.delegateTarget})
},
function(e) {
console.log("leave =>")
$(e.currentTarget).removeClass('div-over');
console.log({target: e.target, currentTarget: e.currentTarget, relatedTarget: e.relatedTarget, delegateTarget: e.delegateTarget})
}
)
CommandsManagement.createFloatingCommand(null, null, $(this).data('command'), evt);*/
});
$('.list-commands').prepend(command);
}
}
renderParameter = function(function_obj, parameter_obj, function_container) {
var ret = "";
ret += '
'+parameter_obj.name+' ';
ret += '
';
if (parameter_obj.dimensions > 0) {
ret += '
'+ LocalizedStrings.getUI('vector')+':'+LocalizedStrings.getUI(parameter_obj.type);
ret += '
';
} else {
ret += '
'+LocalizedStrings.getUI(parameter_obj.type)+'
';
}
ret += '
'
+ '
';
ret += '
';
ret = $(ret);
function_container.find('.container_parameters_list').append(ret);
ret.find('.remove_parameter').on('click', function(e){
removeParameter(function_obj, parameter_obj, ret);
});
ret.find('.ui.dropdown.parameter_type').dropdown({
onChange: function(value, text, $selectedItem) {
if ($($selectedItem).data('dimensions')) {
updateParameterType(parameter_obj, Types[$($selectedItem).data('type')], $($selectedItem).data('dimensions'));
} else {
updateParameterType(parameter_obj, Types[$($selectedItem).data('type')]);
}
}
});
ret.find('.label_enable_name_parameter').on('click', function(e){
enableNameParameterUpdate(parameter_obj, ret);
});
}
enableNameFunctionUpdate = function(function_obj, parent_node) {
if (opened_name_function) {
$(opened_input).focus();
return;
}
$(parent_node).find('.span_name_function').text('');
$( "
" ).insertBefore($(parent_node).find('.span_name_function'));
$('.width-dynamic').on('input', function() {
var inputWidth = $(this).textWidth()+10;
opened_input = this;
$(this).focus();
var tmpStr = $(this).val();
$(this).val('');
$(this).val(tmpStr);
$(this).css({
width: inputWidth
})
}).trigger('input');
$('.width-dynamic').focusout(function() {
/// update array:
if ($(this).val().trim()) {
function_obj.name = $(this).val().trim();
}
$(this).remove();
$(parent_node).find('.span_name_function').text(function_obj.name);
/// update elements:
opened_name_function = false;
opened_input = false;
});
$('.width-dynamic').on('keydown', function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
$('.functions_labels > [data-function=' + function_obj.name + ']')
.attr('data-function', $(this).val().trim())
.html('
' + $(this).val().trim());
if ($(this).val().trim()) {
function_obj.name = $(this).val().trim();
}
$(this).remove();
$(parent_node).find('.span_name_function').text(function_obj.name);
/// update elements:
opened_name_function = false;
opened_input = false;
}
if(code == 27) {
$(this).remove();
$(parent_node).find('.span_name_function').text(function_obj.name);
/// update elements:
opened_name_function = false;
opened_input = false;
}
});
}
addParameter = function (function_obj, function_container) {
if (function_obj.parameters_list == null) {
function_obj.parameters_list = [];
}
var new_parameter = new Models.Variable(Types.INTEGER, LocalizedStrings.getUI("new_parameter") + "_" + counter_new_parameters);
function_obj.parameters_list.push(new_parameter);
counter_new_parameters ++;
renderParameter(function_obj, new_parameter, function_container);
var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']');
var params = "";
for (var j = 0; j < function_obj.parameters_list.length; j++) {
if (j > 0)
params += ',';
params += function_obj.parameters_list[j].type;
}
menu_button.find('.function_params').text(params);
}
updateReturnType = function (function_obj, new_type, new_dimensions = 0) {
function_obj.return_type = new_type;
function_obj.return_dimensions = new_dimensions;
var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']');
menu_button.find('.function_return_type').text(new_type);
}
updateParameterType = function (parameter_obj, new_type, new_dimensions = 0) {
parameter_obj.type = new_type;
parameter_obj.dimensions = new_dimensions;
if (new_dimensions > 0) {
parameter_obj.rows = new_dimensions;
parameter_obj.columns = 2;
}
var menu_button = $('.functions_labels > [data-function=' + function_obj.name + ']');
var params = "";
for (var j = 0; j < function_obj.parameters_list.length; j++) {
if (j > 0)
params += ',';
params += function_obj.parameters_list[j].type;
}
menu_button.find('.function_params').text(params);
}