iVProg/js/visualUI/commands/variable_value_menu.js

// iVProg - www.usp.br/line/ivprog
// LInE - Free Education, Private Data

import * as Models from "../ivprog_elements";
import { LocalizedStrings } from "../../services/localizedStringsService";
import * as AttribuitionsManagement from "./attribution";
import * as RepeatNTimesManagement from "./repeatNtimes";

export const VAR_OR_VALUE_TYPES = Object.freeze({
  only_variable: 1,
  only_value: 2,
  only_function: 3,
  variable_and_function: 4,
  variable_and_value_opt: 5,
  value_and_function: 6,
  all: 7,
  });

export function renderMenu (command, ref_object, dom_object, function_obj, size_field = 2, expression_element) {
  // Verificar se o objeto atual trata-se de uma chamada de funcao e conferir se possui a quantidade correta de parametros
  // Caso nao possua, tem que adicionar as variaveis que servirao de parametros:
  if (ref_object.function_called) {
    if (ref_object.function_called.parameters_list) {
      while (ref_object.function_called.parameters_list.length != ref_object.parameters_list.length) {
        if (ref_object.parameters_list.length > ref_object.function_called.parameters_list.length) {
          ref_object.parameters_list.pop();
        } else {
          ref_object.parameters_list.push(new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true));
          }
        }
      }
    }

  // Verificar agora, quando trata-se de chamada de funcao, se a passagem de parametro e'
  // por referencia ou por copia:
  var index_references = [];
  if (ref_object.function_called) {
    if (ref_object.function_called.parameters_list) {
      for (var i = 0; i < ref_object.function_called.parameters_list.length; i++) {
        if (ref_object.function_called.parameters_list[i].reference) {
          index_references.push(i)
          ref_object.parameters_list[i].reference = true
          ref_object.parameters_list[i].variable_and_value = VAR_OR_VALUE_TYPES.only_variable;
          if (ref_object.parameters_list[i].column)
            ref_object.parameters_list[i].column.reference_parent = true
          if (ref_object.parameters_list[i].row)
            ref_object.parameters_list[i].row.reference_parent = true
          }
        else {
          ref_object.parameters_list[i].reference = false;
          ref_object.parameters_list[i].variable_and_value = VAR_OR_VALUE_TYPES.all;
          if (ref_object.parameters_list[i].column)
            ref_object.parameters_list[i].column.reference_parent = false
          if (ref_object.parameters_list[i].row)
            ref_object.parameters_list[i].row.reference_parent = false
          }

        ref_object.parameters_list[i].reference_dimensions = ref_object.function_called.parameters_list[i].dimensions
        } 
      }
    }

  let menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-varmenu="true"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';

  if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_variable) {
    menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-varmenu="true"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_vars">';
    menu_var_or_value += "</div>";
    }

  if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function ||
      ref_object.variable_and_value ==
      VAR_OR_VALUE_TYPES.variable_and_value_opt ||
      ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all) {
    menu_var_or_value +=
      '<div class="item" data-option="' +
      VAR_OR_VALUE_TYPES.only_variable +
      '"><i class="dropdown icon"></i>' +
      LocalizedStrings.getUI("variable");
    menu_var_or_value += '<div class="menu menu_only_vars">';
    menu_var_or_value += "</div></div>";
    }

  if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_value) {
    menu_var_or_value =
      '<input type="text" class="width-dynamic" size="' +
      size_field +
      '" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />';
    }

  if (ref_object.variable_and_value ==VAR_OR_VALUE_TYPES.variable_and_value_opt ||
      ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function ||
      ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all) {
    menu_var_or_value +=
      '<div class="item" data-option="' +
      VAR_OR_VALUE_TYPES.only_value +
      '">' +
      LocalizedStrings.getUI("text_value") +
      "</div>";
    }

  if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_function) {
    menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom" data-varmenu="true"><div class="text"></div><i class="dropdown icon"></i><div class="menu menu_only_functions">';
    menu_var_or_value += "</div>";
    }

  if (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_function ||
      ref_object.variable_and_value == VAR_OR_VALUE_TYPES.value_and_function ||
      ref_object.variable_and_value == VAR_OR_VALUE_TYPES.all) {
    menu_var_or_value +=
      '<div class="item" data-option="' +
      VAR_OR_VALUE_TYPES.only_function +
      '"><i class="dropdown icon"></i>' +
      LocalizedStrings.getUI("btn_function");
    menu_var_or_value += '<div class="menu menu_only_functions">';
    menu_var_or_value += "</div></div>";

    /*if (command.type == Models.COMMAND_TYPES.attribution) {
      menu_var_or_value += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
      menu_var_or_value += '<div class="menu">';
      menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
      menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
      menu_var_or_value += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
      menu_var_or_value += '</div></div>';
      }*/
    }

  menu_var_or_value += "</div></div>";

  menu_var_or_value = $(menu_var_or_value);

  menu_var_or_value.find('.width-dynamic').on('input', function() {
    var input_field = $(this);
    var inputWidth = input_field.textWidth()+10;
    inputWidth = inputWidth<50?50:inputWidth;
    input_field.css({width: inputWidth})
    }).trigger('input');

  dom_object.append(menu_var_or_value);

  ref_object.dom_object = menu_var_or_value;

  addHandlers(command,   ref_object,   dom_object,   menu_var_or_value,   function_obj,   expression_element);

  addVariablesToMenu(function_obj,   menu_var_or_value,   ref_object,   expression_element);

  addFunctionsToMenu(function_obj,   menu_var_or_value,   ref_object,   expression_element);

  addIVProgFunctionsToMenu(function_obj,   menu_var_or_value,   ref_object,   expression_element);

  //D console.log("./ivprog/js/visualUI/commands/variable_value_menu.js: renderMenu(.): ref_object.content=" + ref_object.content);
  //leo ATTENTION: if constant with value 0 does not pass in "if ((ref_object.content)"
  if (ref_object.content || ref_object.content==0 || ref_object.function_called) {
    if (ref_object.content || ref_object.content==0) { //leo
      // Verificar se a variavel ainda existe:
      const variable_fun = isVarInProgram(ref_object.content, function_obj);
      if (variable_fun) {
        ref_object.content = variable_fun;
        renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
      } else {
        if ((ref_object.content || ref_object.content==0) && ref_object.content.type) { //leo
          ref_object.content = null;
          appendSelectText(ref_object, menu_var_or_value);
        } else {
          renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
        }
      }
    } else if (ref_object.function_called) {
      // Verificar se a funcao ainda existe:
      const ret_function = isFunctionInProgram(ref_object.function_called);
      if (ret_function) {
        ref_object.function_called = ret_function;
        renderPreviousContent(function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element);
      } else {
        ref_object.content = null;
        ref_object.row = null;
        ref_object.column = null;
        delete ref_object.function_called;
        delete ref_object.parameters_list;
        appendSelectText(ref_object, menu_var_or_value);
        }
      }
    } // if (ref_object.content || ref_object.content==0)
  else {
    appendSelectText(ref_object, menu_var_or_value);
    }
  }


function appendSelectText (ref_object, menu_var_or_value) {
  // if (ref_object.reference_parent) { menu_var_or_value.find(".text").append("<i>Opcional</i>"); return; }
  switch (ref_object.variable_and_value) {
    case VAR_OR_VALUE_TYPES.only_variable:
      menu_var_or_value.find(".text").append("<i>" + LocalizedStrings.getUI("var_menu_select_var") + "</i>");
      break;
    case VAR_OR_VALUE_TYPES.all:
      menu_var_or_value.find(".text").append("<i>" + LocalizedStrings.getUI("var_menu_select_all") + "</i>");
      break;
    case VAR_OR_VALUE_TYPES.variable_and_function:
      menu_var_or_value.find(".text").append("<i>" + LocalizedStrings.getUI("var_menu_select_all") + "</i>");
      break;
    case VAR_OR_VALUE_TYPES.only_function:
      menu_var_or_value.find(".text").append("<i>" + LocalizedStrings.getUI("var_menu_select_function") + "</i>");
      break;
    }
  } // function appendSelectText(ref_object, menu_var_or_value)


function isFunctionInProgram (function_called_obj) {
  if (function_called_obj.name) {
    if (window.program_obj.functions) {
      for (var i = 0; i < window.program_obj.functions.length; i++) {
        if (window.program_obj.functions[i] == function_called_obj) {
          return window.program_obj.functions[i];
          }
        }
      for (var i = 0; i < window.program_obj.functions.length; i++) {
        if (window.program_obj.functions[i].name == function_called_obj.name) {
          return window.program_obj.functions[i];
          }
        }
      }
  } else if (function_called_obj.identifier) {
    for (var i = 0; i < window.system_functions.length; i++) {
      if (window.system_functions[i].identifier == function_called_obj.identifier) {
        return window.system_functions[i];
        }
      }
    }

  return null;
  } // function isFunctionInProgram(function_called_obj)


function isVarInProgram (var_obj, function_obj) {
  // Verify in locals:
  if (function_obj.variables_list) {
    for (var i = 0; i < function_obj.variables_list.length; i++) {
      if (function_obj.variables_list[i] == var_obj) {
        return function_obj.variables_list[i];
      }
    }
  }
  // Verify in parameters:
  if (function_obj.parameters_list) {
    for (var i = 0; i < function_obj.parameters_list.length; i++) {
      if (function_obj.parameters_list[i] == var_obj) {
        return function_obj.parameters_list[i];
      }
    }
  }
  // Verify in globals:
  if (window.program_obj.globals) {
    for (var i = 0; i < window.program_obj.globals.length; i++) {
      if (window.program_obj.globals[i] == var_obj) {
        return window.program_obj.globals[i];
      }
    }
  }

  // If not found, verify if the reference was lost
  if (var_obj) {
    if (function_obj.variables_list) {
      for (var i = 0; i < function_obj.variables_list.length; i++) {
        if (function_obj.variables_list[i].name == var_obj.name) {
          return function_obj.variables_list[i];
        }
      }
    }
    if (function_obj.parameters_list) {
      for (var i = 0; i < function_obj.parameters_list.length; i++) {
        if (function_obj.parameters_list[i].name == var_obj.name) {
          return function_obj.parameters_list[i];
        }
      }
    }
    if (window.program_obj.globals) {
      for (var i = 0; i < window.program_obj.globals.length; i++) {
        if (window.program_obj.globals[i].name == var_obj.name) {
          return window.program_obj.globals[i];
          }
        }
      }
    }

  return null;
  }


function renderPreviousContent (function_obj, menu_var_or_value, ref_object, dom_object, command, expression_element) {
  if (ref_object.function_called) {
    menu_var_or_value.remove();
    variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value, expression_element);
  } else if (ref_object.content.type) {
    menu_var_or_value.remove();
    variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value, expression_element);
  } else {
    menu_var_or_value.remove();
    variableValueMenuCode(command, ref_object, dom_object, function_obj, menu_var_or_value, expression_element);
    }
  }


function variableValueMenuCode (command, variable_obj, dom_object, function_obj, menu_var_or_value, expression_element) {
  if (variable_obj.content || variable_obj.function_called) {
    // Verificar se a variavel ainda existe:
    const var_fun = isVarInProgram(variable_obj.content, function_obj);

    if (var_fun) {
      variable_obj.content = var_fun;
    } else {
      if (variable_obj.content && variable_obj.content.type) {
        variable_obj.content = null;
        appendSelectText(variable_obj, menu_var_or_value);
      }
    }
  } else {
    appendSelectText(variable_obj, menu_var_or_value);
  }

  if (variable_obj.content == null && variable_obj.function_called == null) {
    renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
    return;
    }

  const ret = "";
  if (variable_obj.function_called) {
    if (variable_obj.function_called.parameters_list == null || variable_obj.function_called.length == 0) {
      menu_var_or_value.find(".text").text(" ");
      dom_object.find(".menu_var_or_value_dom").remove();

      var parameters_menu;

      if (variable_obj.function_called.name) {
        parameters_menu =
          '<div class="parameters_function_called"> ' +
          variable_obj.function_called.name +
          " <span> ( </span>";
      } else {
        parameters_menu =
          '<div class="parameters_function_called"> <i>' +
          LocalizedStrings.translateInternalFunction(variable_obj.function_called.identifier, variable_obj.function_called.category) +
          "</i> <span> ( </span>";
        }

      parameters_menu += "<span> ) </span></div>";

      parameters_menu = $(parameters_menu);

      dom_object.append(parameters_menu);

      var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
      context_menu += '<div class="item" data-clear="true">' + LocalizedStrings.getUI("btn_clear") + "</div>"; // Clear

      /*if (command.type == Models.COMMAND_TYPES.attribution) {
        context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
        context_menu += '<div class="menu">';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
        context_menu += '</div></div>';
	}*/

      context_menu += "</div></div>";

      context_menu = $(context_menu);

      context_menu.insertAfter(dom_object.find(".parameters_function_called"));

      context_menu.dropdown({
        onChange: function (value, text, $selectedItem) {
          if ($selectedItem.data("clear")) {
            dom_object.text("");

            variable_obj.content = null;
            variable_obj.row = null;
            variable_obj.column = null;
            delete variable_obj.function_called;
            delete variable_obj.parameters_list;

            renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
            }

          if ($selectedItem.data("exp")) {
            AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
            }
        },
        selectOnKeydown: false,
      });
    } else {
      menu_var_or_value.find(".text").text(" ");
      dom_object.find(".menu_var_or_value_dom").remove();

      var parameters_menu;

      if (variable_obj.function_called.name) {
        parameters_menu =
          '<div class="parameters_function_called"> ' +
          variable_obj.function_called.name +
          " <span> ( </span>";
      } else {
        parameters_menu =
          '<div class="parameters_function_called"> <i>' +
          LocalizedStrings.translateInternalFunction(variable_obj.function_called.identifier, variable_obj.function_called.category) +
          "</i> <span> ( </span>";
      }

      for (let j = 0; j < variable_obj.function_called.parameters_list.length; j++) {
        parameters_menu += '<div class="render_style_param parameter_' + j + '"></div>';
        if (j + 1 != variable_obj.function_called.parameters_list.length) {
          parameters_menu += " , ";
        }
      }
      parameters_menu += "<span> ) </span></div>";

      parameters_menu = $(parameters_menu);

      dom_object.append(parameters_menu);

      for (let j = 0; j < variable_obj.function_called.parameters_list.length; j++) {
        renderMenu(command, variable_obj.parameters_list[j], parameters_menu.find(".parameter_" + j), function_obj, 2, expression_element);
        }

      let context_menu =
        '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
      context_menu +=
        '<div class="item" data-clear="true">' +
        LocalizedStrings.getUI("btn_clear") +
        "</div>";

      /*if (command.type == Models.COMMAND_TYPES.attribution) {
        context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
        context_menu += '<div class="menu">';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
        context_menu += '</div></div>';
	}*/

      context_menu += "</div></div>";

      context_menu = $(context_menu);

      context_menu.insertAfter(parameters_menu);

      context_menu.dropdown({
        onChange: function (value, text, $selectedItem) {
          if ($selectedItem.data("clear")) {
            dom_object.text("");

            variable_obj.content = null;
            variable_obj.row = null;
            variable_obj.column = null;
            delete variable_obj.function_called;
            delete variable_obj.parameters_list;

            renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
            }

          if ($selectedItem.data("exp")) {
            AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
            }
          },
          selectOnKeydown: false,
        });
      }
  } else if (variable_obj.content.type) {
    let variable_render = "";

    if (variable_obj.content.dimensions == 1 && variable_obj.dimensions != 1) {
      variable_render =
        '<div class="variable_rendered"> <span class="var_name">' +
        variable_obj.content.name +
        "</span>";

      if (variable_obj.reference_dimensions >= 1)
        variable_render += '';
      else
        variable_render +=
          ' <span>[ </span> <div class="column_container"></div> <span> ]</span>';

      variable_render += "</div>";

      variable_render = $(variable_render);

      dom_object.append(variable_render);

      let context_menu =
        '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
      context_menu +=
        '<div class="item" data-clear="true">' +
        LocalizedStrings.getUI("btn_clear") +
        "</div>";

      /*if (command.type == Models.COMMAND_TYPES.attribution) {
        context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
        context_menu += '<div class="menu">';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
        context_menu += '</div></div>';
	}*/

      context_menu += "</div></div>";

      context_menu = $(context_menu);

      variable_render.append(context_menu);

      context_menu.dropdown({
        onChange: function (value, text, $selectedItem) {
          if ($selectedItem.data("clear")) {
            dom_object.text("");

            variable_obj.content = null;
            variable_obj.row = null;
            variable_obj.column = null;
            delete variable_obj.function_called;
            delete variable_obj.parameters_list;
            renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
            }

          if ($selectedItem.data("exp")) {
            AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
            }
          },
        selectOnKeydown: false,
        });

      if (!variable_obj.column) {
        var temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
        if (variable_obj.reference)
          temp.reference_parent = true
        variable_obj.column = temp;
        }

      variableValueMenuCode(command, variable_obj.column, $(variable_render.find(".column_container")), function_obj, menu_var_or_value, expression_element);
    } else if (
      variable_obj.content.dimensions == 2 &&
      variable_obj.dimensions != 2
    ) {
      variable_render =
        '<div class="variable_rendered"> <span class="var_name">' +
        variable_obj.content.name +
        "</span>";
      
      variable_render +=
        ' <span>[ </span> <div class="row_container"></div> <span> ]</span>';

      if (variable_obj.reference_dimensions == 0)
        variable_render +=
          ' <span>[ </span> <div class="column_container"></div> <span> ] </span>';

      variable_render += "</div>";

      variable_render = $(variable_render);

      dom_object.append(variable_render);

      let context_menu =
        '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
      context_menu +=
        '<div class="item" data-clear="true">' +
        LocalizedStrings.getUI("btn_clear") +
        "</div>";

      /*if (command.type == Models.COMMAND_TYPES.attribution) {
        context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
        context_menu += '<div class="menu">';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
        context_menu += '</div></div>';
	}*/

      context_menu += "</div></div>";

      context_menu = $(context_menu);

      variable_render.append(context_menu);

      context_menu.dropdown({
        onChange: function (value, text, $selectedItem) {
          if ($selectedItem.data("clear")) {
            dom_object.text("");

            variable_obj.content = null;
            variable_obj.row = null;
            variable_obj.column = null;
            delete variable_obj.function_called;
            delete variable_obj.parameters_list;

            renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
          }

          if ($selectedItem.data("exp")) {
            AttribuitionsManagement.manageExpressionElements(
              command,
              variable_obj,
              dom_object,
              menu_var_or_value,
              function_obj,
              $selectedItem,
              expression_element
            );
          }
        },
        selectOnKeydown: false,
      });

      if (!variable_obj.column) {
        var temp = new Models.VariableValueMenu(
          VAR_OR_VALUE_TYPES.all,
          null,
          null,
          null,
          true
        );

        if (variable_obj.reference)
          temp.reference_parent = true

        variable_obj.column = temp
      }
      if (!variable_obj.row) {
        var temp = new Models.VariableValueMenu(
          VAR_OR_VALUE_TYPES.all,
          null,
          null,
          null,
          true
        );

        if (variable_obj.reference)
          temp.reference_parent = true

        variable_obj.row = temp
      }

      variableValueMenuCode(
        command,
        variable_obj.row,
        $(variable_render.find(".row_container")),
        function_obj,
        menu_var_or_value,
        expression_element
      );

      if (variable_obj.reference_dimensions == 1) {
        variable_obj.column = null
      } else {
        variableValueMenuCode(
          command,
          variable_obj.column,
          $(variable_render.find(".column_container")),
          function_obj,
          menu_var_or_value,
          expression_element
        );
      }
    } else {
      variable_render =
        '<div class="variable_rendered"> <span class="var_name">' +
        variable_obj.content.name +
        "</span>";

      variable_render += "</div>";

      variable_render = $(variable_render);

      dom_object.append(variable_render);

      let context_menu =
        '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
      context_menu +=
        '<div class="item" data-clear="true">' +
        LocalizedStrings.getUI("btn_clear") +
        "</div>";

      /*if (command.type == Models.COMMAND_TYPES.attribution && !dom_object.hasClass('var_attributed')) {
        console.log('dom_object6');
        console.log(dom_object);
        context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
        context_menu += '<div class="menu">';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
        context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
        context_menu += '</div></div>';
	}*/

      context_menu += "</div></div>";

      context_menu = $(context_menu);

      variable_render.append(context_menu);

      context_menu.dropdown({
        onChange: function (value, text, $selectedItem) {
          if ($selectedItem.data("clear")) {
            dom_object.text("");

            variable_obj.content = null;
            variable_obj.row = null;
            variable_obj.column = null;

            delete variable_obj.function_called;
            delete variable_obj.parameters_list;

            renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
            }

          if ($selectedItem.data("exp")) {
            AttribuitionsManagement.manageExpressionElements(command, variable_obj, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
            }
        },
        selectOnKeydown: false,
      });
    }
  } else {
    let variable_render;

    variable_render =
      '<div class="variable_rendered"> <span class="var_name">';

    if (isNaN(variable_obj.content)) {
      variable_render += variable_obj.content.split(" ").join("&nbsp;");
    } else {
      variable_render += variable_obj.content;
    }

    variable_render += "</span>";
    variable_render += "</div>";

    variable_render = $(variable_render);

    dom_object.append(variable_render);

    var context_menu =
      '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
    context_menu +=
      '<div class="item" data-clear="true">' +
      LocalizedStrings.getUI("btn_clear") +
      "</div>";

    /*if (command.type == Models.COMMAND_TYPES.attribution) {
      context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
      context_menu += '<div class="menu">';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
      context_menu += '</div></div>';
      }*/

    context_menu += "</div></div>";

    context_menu = $(context_menu);

    if (variable_obj.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
      context_menu.insertAfter(variable_render);
    }

    context_menu.dropdown({
      onChange: function (value, text, $selectedItem) {
        if ($selectedItem.data("clear")) {
          dom_object.text("");

          variable_obj.content = null;
          variable_obj.row = null;
          variable_obj.column = null;

          delete variable_obj.function_called;
          delete variable_obj.parameters_list;

          dom_object.find(".value_rendered").remove();
          dom_object.find(".context_menu_clear").remove();
          dom_object.find(".width-dynamic-minus").remove();

          renderMenu(command, variable_obj, dom_object, function_obj, 2, expression_element);
          }

        if ($selectedItem.data("exp")) {
          AttribuitionsManagement.manageExpressionElements(
            command,
            variable_obj,
            dom_object,
            menu_var_or_value,
            function_obj,
            $selectedItem,
            expression_element
          );
        }
      },
      selectOnKeydown: false,
    });

    variable_render.on("click", function (e) {
      variable_render.remove();
      variable_render.empty();
      variable_render.remove();
      dom_object.empty();
      dom_object.append('<span class="menu_var_or_value_dom"> </span>');

      openInputToValue(
        command,
        variable_obj,
        dom_object,
        menu_var_or_value,
        function_obj,
        expression_element
      );
    });
  }
}

function addIVProgFunctionsToMenu (
  function_obj,
  menu_var_or_value,
  ref_object,
  expression_element
) {
  const sub_menu = menu_var_or_value.find(".menu_only_functions");
  sub_menu.append(
    '<div class="divider"></div><div class="header">' +
      LocalizedStrings.getUI("text_header_ivprog_functions") +
      "</div>"
  );
  sub_menu.append(
    '<div class="item"><i class="dropdown icon"></i>' +
      LocalizedStrings.getUI("text_menu_functions_math") +
      '<div class="menu menu_math_functions"></div></div>'
  );
  sub_menu.append(
    '<div class="item"><i class="dropdown icon"></i>' +
      LocalizedStrings.getUI("text_menu_functions_text") +
      '<div class="menu menu_text_functions"></div></div>'
  );
  sub_menu.append(
    '<div class="item"><i class="dropdown icon"></i>' +
      LocalizedStrings.getUI("text_menu_functions_array") +
      '<div class="menu menu_arrangement_functions"></div></div>'
  );
  sub_menu.append(
    '<div class="item"><i class="dropdown icon"></i>' +
      LocalizedStrings.getUI("text_menu_functions_conversion") +
      '<div class="menu menu_conversion_functions"></div></div>'
  );

  // Insert Math functions:
  for (let i = 0; i < window.system_functions.length; i++) {
    const t = $('<div class="item"></div>');
    t.data("function_reference", window.system_functions[i]);
    t.data("option", VAR_OR_VALUE_TYPES.only_function);
    t.text(LocalizedStrings.translateInternalFunction(window.system_functions[i].identifier));

    switch (window.system_functions[i].category) {
      case Models.SYSTEM_FUNCTIONS_CATEGORIES.math:
        sub_menu.find(".menu_math_functions").append(t);
        break;
      case Models.SYSTEM_FUNCTIONS_CATEGORIES.text:
        sub_menu.find(".menu_text_functions").append(t);
        break;
      case Models.SYSTEM_FUNCTIONS_CATEGORIES.arrangement:
        sub_menu.find(".menu_arrangement_functions").append(t);
        break;
      case Models.SYSTEM_FUNCTIONS_CATEGORIES.conversion:
        sub_menu.find(".menu_conversion_functions").append(t);
        break;
    }
  }
}

function addFunctionsToMenu (
  function_obj,
  menu_var_or_value,
  ref_object,
  expression_element
) {
  const sub_menu = menu_var_or_value.find(".menu_only_functions");
  sub_menu.text("");

  for (let i = 0; i < window.program_obj.functions.length; i++) {
    const temp = $(
      '<div class="item" data-option="' +
        VAR_OR_VALUE_TYPES.only_function +
        '">' +
        window.program_obj.functions[i].name +
        " </div>"
    );
    temp.data("function_reference", window.program_obj.functions[i]);
    sub_menu.append(temp);
  }
}

function addVariablesToMenu (
  function_obj,
  menu_var_or_value,
  ref_object,
  expression_element
) {
  const sub_menu = menu_var_or_value.find(".menu_only_vars");
  sub_menu.text("");
  let is_there = false;

  if (window.program_obj.globals) {
    if (ref_object.include_constant) {
      for (var i = 0; i < window.program_obj.globals.length; i++) {
        var temp = $(
          '<div class="item" data-option="' +
            VAR_OR_VALUE_TYPES.only_variable +
            '">' +
            window.program_obj.globals[i].name +
            " </div>"
        );
        temp.data("variable_reference", window.program_obj.globals[i]);
        sub_menu.append(temp);
        is_there = true;
      }
    } else {
      for (var i = 0; i < window.program_obj.globals.length; i++) {
        if (!window.program_obj.globals[i].is_constant) {
          var temp = $(
            '<div class="item" data-option="' +
              VAR_OR_VALUE_TYPES.only_variable +
              '">' +
              window.program_obj.globals[i].name +
              " </div>"
          );
          temp.data("variable_reference", window.program_obj.globals[i]);
          sub_menu.append(temp);
          is_there = true;
        }
      }
    }
  }

  if (function_obj.parameters_list) {
    for (var i = 0; i < function_obj.parameters_list.length; i++) {
      var temp = $(
        '<div class="item" data-option="' +
          VAR_OR_VALUE_TYPES.only_variable +
          '">' +
          function_obj.parameters_list[i].name +
          " </div>"
      );
      temp.data("variable_reference", function_obj.parameters_list[i]);
      sub_menu.append(temp);
      is_there = true;
    }
  }

  if (function_obj.variables_list) {
    for (var i = 0; i < function_obj.variables_list.length; i++) {
      var temp = $(
        '<div class="item" data-option="' +
          VAR_OR_VALUE_TYPES.only_variable +
          '">' +
          function_obj.variables_list[i].name +
          " </div>"
      );
      temp.data("variable_reference", function_obj.variables_list[i]);
      sub_menu.append(temp);
      is_there = true;
    }
  }
  if (!is_there) {
    sub_menu.append(
      $(
        '<div class="header">' +
          LocalizedStrings.getUI("text_no_variable") +
          "</div>"
      )
    );
    sub_menu.append(
      $(
        '<div class="item disabled">' +
          LocalizedStrings.getUI("text_no_variable_instruction") +
          "</div>"
      )
    );
  }
}

function addHandlers (
  command,
  ref_object,
  dom_object,
  menu_var_or_value,
  function_obj,
  expression_element
) {
  if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
    menu_var_or_value.dropdown({
      onChange: function (value, text, $selectedItem) {
        dom_object.find(".var_name").remove();
        switch ($selectedItem.data("option")) {
          case VAR_OR_VALUE_TYPES.only_function:
            openInputToFunction(
              command,
              ref_object,
              dom_object,
              menu_var_or_value,
              function_obj,
              $($selectedItem).data("function_reference"),
              expression_element
            );
            break;

          case VAR_OR_VALUE_TYPES.only_value:
            openInputToValue(
              command,
              ref_object,
              dom_object,
              menu_var_or_value,
              function_obj,
              expression_element
            );
            break;

          case VAR_OR_VALUE_TYPES.only_variable:
            openInputToVariable(
              command,
              ref_object,
              dom_object,
              menu_var_or_value,
              function_obj,
              $($selectedItem).data("variable_reference"),
              expression_element
            );
            break;
        }

        if ($selectedItem.data("exp")) {
          AttribuitionsManagement.manageExpressionElements(
            command,
            ref_object,
            dom_object,
            menu_var_or_value,
            function_obj,
            $selectedItem,
            expression_element
          );
        }

        if (command.type == Models.COMMAND_TYPES.repeatNtimes) {
          RepeatNTimesManagement.manageExpressionElements(
            command,
            ref_object,
            dom_object,
            menu_var_or_value,
            function_obj,
            $selectedItem,
            expression_element
          );
        }
      },
      selectOnKeydown: false,
    });
  }

  dom_object
    .find(".width-dynamic")
    .on("input", function () {
      const inputWidth = $(this).textWidth() + 10;
      $(this).focus();

      const tmpStr = $(this).val();
      $(this).val("");
      $(this).val(tmpStr);

      $(this).css({
        width: inputWidth,
      });
    })
    .trigger("input");

  if (command.type == Models.COMMAND_TYPES.comment) {
    dom_object.parent().on("click", function (e) {
      dom_object.find(".value_rendered").remove();
      dom_object.find(".value_rendered").empty();
      dom_object.find(".value_rendered").remove();
      dom_object.empty();
      dom_object.append('<span class="menu_var_or_value_dom"> </span>');

      openInputToValue(
        command,
        ref_object,
        dom_object,
        menu_var_or_value,
        function_obj,
        expression_element
      );
    });
  }
}

function openInputToFunction (
  command,
  ref_object,
  dom_object,
  menu_var_or_value,
  function_obj,
  function_selected,
  expression_element
) {
  ref_object.function_called = function_selected;
  ref_object.parameters_list = [];

  if (
    function_selected.parameters_list != null &&
    function_selected.parameters_list.length > 0
  ) {
    menu_var_or_value.find(".text").text(" ");
    dom_object.find(".menu_var_or_value_dom").remove();

    var parameters_menu;
    if (function_selected.name) {
      parameters_menu =
        '<div class="parameters_function_called"> ' +
        function_selected.name +
        " <span> ( </span>";
    } else {
      parameters_menu =
        '<div class="parameters_function_called"> <i>' +
        LocalizedStrings.translateInternalFunction(function_selected.identifier, function_selected.category) +
        "</i> <span> ( </span>\n";
      }
    for (var j = 0; j < function_selected.parameters_list.length; j++) {
      parameters_menu += '<div class="render_style_param parameter_' + j + '"></div>';
      if (j + 1 != function_selected.parameters_list.length) {
        parameters_menu += " , ";
        }
    }
    parameters_menu += "<span> ) </span></div>\n";

    parameters_menu = $(parameters_menu);

    dom_object.append(parameters_menu);

    for (var j = 0; j < function_selected.parameters_list.length; j++) {
      var temp;
      if (function_selected.parameters_list[j].dimensions > 0) {
        temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.variable_and_function, null, null, null, true, function_selected.parameters_list[j].dimensions);
      } else {
        temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
        }

      if (function_selected.parameters_list[j].reference == true) {
        temp.reference = true;
        temp.variable_and_value = VAR_OR_VALUE_TYPES.only_variable;
      } else {
        temp.reference = false;
        temp.variable_and_value = VAR_OR_VALUE_TYPES.all;
        }
      temp.reference_dimensions = function_selected.parameters_list[j].dimensions
      
      ref_object.parameters_list.push(temp);
      renderMenu(command, temp, parameters_menu.find(".parameter_" + j), function_obj, 2, expression_element);
    }

    var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
    context_menu +=
      '<div class="item" data-clear="true">' +
      LocalizedStrings.getUI("btn_clear") +
      "</div>";

    /*if (command.type == Models.COMMAND_TYPES.attribution) {
      context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
      context_menu += '<div class="menu">';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
      context_menu += '</div></div>';
      }*/

    context_menu += "</div></div>\n";

    context_menu = $(context_menu);

    context_menu.insertAfter(dom_object.find(".parameters_function_called"));

    context_menu.dropdown({
      onChange: function (value, text, $selectedItem) {
        if ($selectedItem.data("clear")) {
          dom_object.text("");

          ref_object.content = null;
          ref_object.row = null;
          ref_object.column = null;
          delete ref_object.function_called;
          delete ref_object.parameters_list;

          renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
          }

        if ($selectedItem.data("exp")) {
          AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
        }
      },
      selectOnKeydown: false,
    });
  } else {
    menu_var_or_value.find(".text").text(" ");
    dom_object.find(".menu_var_or_value_dom").remove();

    var parameters_menu;

    if (function_selected.name) {
      parameters_menu =
        '<div class="parameters_function_called"> ' +
        function_selected.name +
        " <span> ( </span>";
    } else {
      parameters_menu =
        '<div class="parameters_function_called"> <i>' +
        LocalizedStrings.translateInternalFunction(function_selected.identifier, function_selected.category) +
        "</i> <span> ( </span>";
    }

    parameters_menu += "<span> ) </span></div>";

    parameters_menu = $(parameters_menu);

    dom_object.append(parameters_menu);

    var context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
    context_menu +=
      '<div class="item" data-clear="true">' +
      LocalizedStrings.getUI("btn_clear") +
      "</div>";

    /*if (command.type == Models.COMMAND_TYPES.attribution) {
      context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
      context_menu += '<div class="menu">';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
      context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
      context_menu += '</div></div>';
      }*/

    context_menu += "</div></div>";

    context_menu = $(context_menu);

    context_menu.insertAfter(dom_object.find(".parameters_function_called"));

    context_menu.dropdown({
      onChange: function (value, text, $selectedItem) {
        if ($selectedItem.data("clear")) {
          dom_object.text("");

          ref_object.content = null;
          ref_object.row = null;
          ref_object.column = null;
          delete ref_object.function_called;
          delete ref_object.parameters_list;

          renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
          }

        if ($selectedItem.data("exp")) {
          AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
          }
        },
      selectOnKeydown: false,
      });
    }

  /*if (command.type == Models.COMMAND_TYPES.attribution) {
      AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
      }*/
  }

function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected, expression_element) {
  ref_object.content = variable_selected;

  menu_var_or_value.find(".text").text(" ");
  dom_object.find(".menu_var_or_value_dom").remove();

  let variable_render =
    '<div class="variable_rendered"> <span class="var_name">' +
    variable_selected.name +
    "</span>";

  if (variable_selected.dimensions == 1 && ref_object.dimensions != 1) {    
    variable_render += ' <span>[ </span> <div class="column_container"></div> <span> ]</span>';
    }
  if (variable_selected.dimensions == 2 && ref_object.dimensions != 2) {
    variable_render += ' <span>[ </span> <div class="row_container"></div> <span> ]</span> ';
    variable_render += ' <span>[ </span> <div class="column_container"></div> <span> ]</span>';
    }

  variable_render += "</div>";
  variable_render = $(variable_render);
  dom_object.append(variable_render);

  if (variable_selected.dimensions == 1 && ref_object.dimensions != 1) {
    var temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
    if (ref_object.reference)
      temp.reference_parent = true

    ref_object.column = temp

    renderMenu(command, ref_object.column, variable_render.find(".column_container"), function_obj, 2, expression_element);
  }
  if (variable_selected.dimensions == 2 && ref_object.dimensions != 2) {
    var temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);

    if (ref_object.reference)
      temp.reference_parent = true

    ref_object.row = temp

    renderMenu(command, ref_object.row, variable_render.find(".row_container"), function_obj, 2, expression_element);

    var temp = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);

    if (ref_object.reference)
      temp.reference_parent = true

    ref_object.column = temp
    
    renderMenu(command, ref_object.column, variable_render.find(".column_container"), function_obj, 2, expression_element);
    }

  let context_menu = '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
  context_menu +=
    '<div class="item" data-clear="true">' +
    LocalizedStrings.getUI("btn_clear") +
    "</div>";

  /*if (command.type == Models.COMMAND_TYPES.attribution && !dom_object.hasClass('var_attributed')) {
    console.log("dom_object 10: ");
    console.log(dom_object);
    context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
    context_menu += '<div class="menu">';
    context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
    context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
    context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
    context_menu += '</div></div>';
    }*/

  context_menu += "</div></div>";

  context_menu = $(context_menu);

  context_menu.insertAfter(dom_object.find(".variable_rendered"));

  context_menu.dropdown({
    onChange: function (value, text, $selectedItem) {
      if ($selectedItem.data("clear")) {
        dom_object.text("");

        ref_object.content = null;
        ref_object.row = null;
        ref_object.column = null;

        delete ref_object.function_called;
        delete ref_object.parameters_list;

        renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
      }

      if ($selectedItem.data("exp")) {
        AttribuitionsManagement.manageExpressionElements( command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
        }

      if (command.type == Models.COMMAND_TYPES.repeatNtimes) {
        RepeatNTimesManagement.manageClearExpressionElements( command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element);
        }
      },
    selectOnKeydown: false,
    });

  /*if (command.type == Models.COMMAND_TYPES.attribution) {
      AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected);
      }*/
}

function openInputToValue (
  command,
  ref_object,
  dom_object,
  menu_var_or_value,
  function_obj,
  expression_element
) {
  if (ref_object.content == null) {
    ref_object.content = "";
  }

  menu_var_or_value.find(".text").text(" ");
  const field = $(
    '<input type="text" size="2" class="width-dynamic-minus" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />'
  );
  field.insertBefore(dom_object.find(".menu_var_or_value_dom"));


  field.on('input', function() {
    var input_field = $(this);
    var inputWidth = input_field.textWidth()+10;
    inputWidth = inputWidth<50?50:inputWidth;
      input_field.css({ width: inputWidth
      })
  }).trigger('input');

  const rendered = $('<div class="value_rendered"></div>');
  rendered.insertBefore(field);

  field.focus();
  field.val(ref_object.content);

  let context_menu =
    '<div class="ui dropdown context_menu_clear"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
  context_menu +=
    '<div class="item" data-clear="true">' +
    LocalizedStrings.getUI("btn_clear") +
    "</div>";

  /*if (command.type == Models.COMMAND_TYPES.attribution) {
    context_menu += '<div class="item"><i class="dropdown icon"></i>' + LocalizedStrings.getUI('text_change');
    context_menu += '<div class="menu">';
    context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.exp_op_exp+'">EXP OP EXP</div>';
    context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.op_exp+'">OP EXP</div>';
    context_menu += '<div class="item" data-exp="'+Models.EXPRESSION_ELEMENTS.par_exp_par+'">( EXP )</div>';
    context_menu += '</div></div>';
    }*/

  context_menu += "</div></div>";

  context_menu = $(context_menu);

  dom_object.find(".menu_var_or_value_dom").remove();

  if (ref_object.variable_and_value != VAR_OR_VALUE_TYPES.only_value) {
    context_menu.insertAfter(field);
  }

  context_menu.dropdown({
    onChange: function (value, text, $selectedItem) {
      if ($selectedItem.data("clear")) {
        dom_object.text("");

        dom_object.find(".value_rendered").remove();
        dom_object.find(".context_menu_clear").remove();
        dom_object.find(".width-dynamic-minus").remove();

        ref_object.content = null;
        ref_object.row = null;
        ref_object.column = null;

        delete ref_object.function_called;
        delete ref_object.parameters_list;

        renderMenu(command, ref_object, dom_object, function_obj, 2, expression_element);
        }

      if ($selectedItem.data("exp")) {
        AttribuitionsManagement.manageExpressionElements(command, ref_object, dom_object, menu_var_or_value, function_obj, $selectedItem, expression_element
        );
      }
    },
    selectOnKeydown: false,
  });

  dom_object.find(".width-dynamic-minus").focusout(function () {
    //if ($(this).val().trim()) { ref_object.content = $(this).val().trim();}
    ref_object.content = $(this)
        .val();

    if (isNaN(ref_object.content)) {
      rendered.html(ref_object.content.split(" ").join("&nbsp;"));
    } else {
      rendered.text(ref_object.content);
    }
    $(this).remove();
  });

  dom_object.find(".width-dynamic-minus").on("keydown", function (e) {
    const code = e.keyCode || e.which;
    if (code == 13) {
      //if ($(this).val().trim()) { ref_object.content = $(this).val().trim();}
      ref_object.content = $(this).val();

      if (isNaN(ref_object.content)) {
        rendered.html(ref_object.content.split(" ").join("&nbsp;"));
      } else {
        rendered.text(ref_object.content);
      }

      $(this).remove();
    }
    if (code == 27) {
      if (isNaN(ref_object.content)) {
        rendered.html(ref_object.content.split(" ").join("&nbsp;"));
      } else {
        rendered.text(ref_object.content);
      }

      $(this).remove();
    }
  });

  if (command.type == Models.COMMAND_TYPES.comment) {
    /*rendered.parent().on('click', function(e) {
      rendered.parent().off();
      console.log("TTT14");
      rendered.remove();
      rendered.empty();
      rendered.remove();
      dom_object.empty();
      dom_object.append('<span class="menu_var_or_value_dom"> </span>');
      openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element)
      });*/
  }

  rendered.on("click", function (e) {
    rendered.empty();
    rendered.remove();
    dom_object.empty();
    dom_object.append('<span class="menu_var_or_value_dom"> </span>');
    openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj, expression_element);
    });

  /*if (command.type == Models.COMMAND_TYPES.attribution) {
    AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj);
    }*/
}

$.fn.textWidth = function (text, font) {
  if (!$.fn.textWidth.fakeEl)
    $.fn.textWidth.fakeEl = $("<span>").hide().appendTo(document.body);

  $.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr("placeholder")).css("font", font || this.css("font"));

  return $.fn.textWidth.fakeEl.width();
  };