Continuando os comandos

css/ivprog-visual-1.0.css

@@ -111,10 +111,26 @@ body {
 	min-width: 50px;
 }
 
-.function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div {
+.text_attr_receives {
+	margin-left: 20px;
+	margin-right: 20px;
+}
+
+.menu_operations {
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
+.function_name_div, .function_return_div, .function_name_parameter, .created_div_valor_var, .function_return, .var_value_menu_div, .variable_rendered, .variable_rendered div, .var_attributed,
+.expression_operand_1, .expression_operand_2, .operator, .div_comment_text {
 	display: inline;
 }
 
+.div_comment_text {
+	min-width: 100px;
+	font-style: italic;
+}
+
 .enable_edit_name_function, .enable_edit_name_parameter, .add_parameter, .remove_parameter, .add_parameter_button, .remove_variable {
 	cursor: pointer;
 }
@@ -265,4 +281,8 @@ div.buttons_manage_columns {
 	z-index: 99999999;
 	opacity: .8;
 	cursor: move;
+}
+
+.width-dynamic {
+	min-width: 100px;
 }

i18n/en/ui.json

@@ -2,6 +2,11 @@
   "function": "function",
   "btn_clear": "Clear",
   "btn_function": "Function",
+  "btn_arithmetic_plus": "Sum",
+  "btn_arithmetic_minus": "Minus",
+  "btn_arithmetic_multiplication": "Multiplication",
+  "btn_arithmetic_division": "Division",
+  "btn_arithmetic_module": "Module",
   "start": "start",
   "void": "void",
   "integer": "integer",
@@ -28,6 +33,7 @@
   "text_comment": "Comment",
   "text_attribution": "Attribution",
   "text_iftrue": "If true then",
+  "text_receives": "receives",
   "text_repeatNtimes": "Repeat N times",
   "text_whiletrue": "While true",
   "text_dowhiletrue": "Do while true",

i18n/es/ui.json

@@ -2,6 +2,11 @@
   "function": "function",
   "btn_clear": "Clear",
   "btn_function": "Function",
+  "btn_arithmetic_plus": "Sum",
+  "btn_arithmetic_minus": "Minus",
+  "btn_arithmetic_multiplication": "Multiplication",
+  "btn_arithmetic_division": "Division",
+  "btn_arithmetic_module": "Module",
   "start": "start",
   "void": "void",
   "integer": "integer",
@@ -29,6 +34,7 @@
   "text_attribution": "Attribution",
   "text_iftrue": "If true then",
   "text_repeatNtimes": "Repeat N times",
+  "text_receives": "receives",
   "text_whiletrue": "While true",
   "text_dowhiletrue": "Do while true",
   "text_switch": "Switch",

i18n/pt/ui.json

@@ -2,6 +2,11 @@
   "function": "funcao",
   "btn_clear": "Limpar",
   "btn_function": "Função",
+  "btn_arithmetic_plus": "Adição",
+  "btn_arithmetic_minus": "Subtração",
+  "btn_arithmetic_multiplication": "Multiplicação",
+  "btn_arithmetic_division": "Divisão",
+  "btn_arithmetic_module": "Módulo",
   "start": "inicio",
   "void": "vazio",
   "integer": "inteiro",
@@ -30,6 +35,7 @@
   "text_attribution": "Atribuição",
   "text_iftrue": "Se verdadeiro então",
   "text_repeatNtimes": "Repita N vezes",
+  "text_receives": "recebe",
   "text_whiletrue": "Enquanto verdadeiro",
   "text_dowhiletrue": "Faça enquanto verdadeiro",
   "text_switch": "Escolha",

js/visualUI/commands.js

@@ -83,7 +83,7 @@ function renderCommand (command, element_reference, before_after_inside, functio
 	var createdElement;
 	switch (command.type) {
 		case Models.COMMAND_TYPES.comment:
-			createdElement = CommentsManagement.renderCommand(command);
+			createdElement = CommentsManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.reader:
@@ -91,11 +91,15 @@ function renderCommand (command, element_reference, before_after_inside, functio
 			break;
 
 		case Models.COMMAND_TYPES.writer:
-			createdElement = WritersManagement.renderCommand(command);
+			createdElement = WritersManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.attribution:
-			createdElement = AttributionsManagement.renderCommand(command);
+			createdElement = AttributionsManagement.renderCommand(command, function_obj);
+			break;
+
+		case Models.COMMAND_TYPES.functioncall:
+			createdElement = FunctioncallsManagement.renderCommand(command, function_obj);
 			break;
 
 		case Models.COMMAND_TYPES.iftrue:
@@ -118,9 +122,6 @@ function renderCommand (command, element_reference, before_after_inside, functio
 			createdElement = SwitchesManagement.renderCommand(command);
 			break;
 
-		case Models.COMMAND_TYPES.functioncall:
-			createdElement = FunctioncallsManagement.renderCommand(command);
-			break;
 	}
 
 	switch (before_after_inside) {
@@ -143,16 +144,20 @@ function genericCreateCommand (command_type) {
 
 	switch (command_type) {
 		case Models.COMMAND_TYPES.comment:
-			return new Models.Comment(null);
+			return new Models.Comment(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_value, LocalizedStrings.getUI('text_comment'), null, null, false));
 
 		case Models.COMMAND_TYPES.reader:
-			return new Models.Reader(null, null, null, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all));
+			return new Models.Reader(null, null, null, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false));
 
 		case Models.COMMAND_TYPES.writer:
-			return new Models.Writer(null);
+			return new Models.Writer(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
 
 		case Models.COMMAND_TYPES.attribution:
-			return new Models.Attribution(null, null);
+			return new Models.Attribution(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_variable, null, null, null, false), 
+				new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true));
+
+		case Models.COMMAND_TYPES.functioncall:
+			return new Models.FunctionCall(new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.only_function, null, null, null, false), null);
 
 		case Models.COMMAND_TYPES.iftrue:
 			return new Models.IfTrue(null, null, null);
@@ -168,9 +173,6 @@ function genericCreateCommand (command_type) {
 
 		case Models.COMMAND_TYPES.switch:
 			return new Models.Switch(null, null, null);
-
-		case Models.COMMAND_TYPES.functioncall:
-			return new Models.FunctionCall(null, null);
 	}
 }
 

js/visualUI/commands/attribution.js

@@ -4,13 +4,67 @@ import * as Models from '../ivprog_elements';
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
+import * as VariableValueMenuManagement from './variable_value_menu';
 
 export function createFloatingCommand () {
 	return $('<div class="ui attribution created_element"> <i class="ui icon small arrow left"></i> <span> x = 1 + 1 </span></div>');
 }
 
-export function renderCommand (command) {
-	var el = $('<div class="ui attribution"> <i class="ui icon small arrow left command_drag"></i> <span> x =  1 + 1</span></div>');
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui attribution"> <i class="ui icon small arrow left command_drag"></i>  <div class="var_attributed"></div> <span class="text_attr_receives">'+LocalizedStrings.getUI('text_receives')+'</span> '
+		 + '<div class="expression_operand_1"></div> </div>');
 	$(el).data('command', command);
+
+
+	VariableValueMenu.renderMenu(command, command.variable, $(el).find('.var_attributed'), function_obj);
+
+	VariableValueMenu.renderMenu(command, command.expression, $(el).find('.expression_operand_1'), function_obj);
+
 	return el;
+}
+
+export function renderMenuOperations (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
+
+	if ($(dom_object).hasClass('var_attributed')) {
+		return;
+	}
+
+	$(dom_object).find('.context_menu_clear').remove();
+
+
+	var menu_operations = '<div class="ui dropdown menu_operations"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
+
+	for (var tm in Models.ARITHMETIC_TYPES) {
+
+		menu_operations += '<div class="item" data-option="'+tm+'">'+LocalizedStrings.getUI('btn_arithmetic_' + tm)+'</div>';
+    }
+    menu_operations += '<div class="item" data-option="clear">'+LocalizedStrings.getUI('btn_clear')+'</div>';
+	
+    menu_operations += '</div></div>';
+
+    menu_operations = $(menu_operations);
+
+    $(dom_object).append(menu_operations);
+
+    $(menu_operations).dropdown({
+    	onChange: function(value, text, $selectedItem) {
+    		switch ($($selectedItem).data('option')) {
+    			case "clear":
+	    			$(dom_object).text('');
+		     	 	VariableValueMenu.renderMenu(command, ref_object, dom_object, function_obj);
+    				break;
+    			default:
+    				createExpressionAround(command, ref_object, dom_object, function_obj);
+    				$(menu_operations).find('.text').text('');
+    		}
+        }
+    });
+}
+
+function createExpressionAround (command, ref_object, dom_object, function_obj) {
+	$('<span> ( </span>').insertBefore(dom_object);
+	$('<span> ) </span>').insertAfter(dom_object);
+
+	VariableValueMenu.renderMenu(command, new Models.VariableValueMenu(VariableValueMenuManagement.VAR_OR_VALUE_TYPES.all, null, null, null, true), dom_object, function_obj);
 }

js/visualUI/commands/comment.js

@@ -4,13 +4,52 @@ import * as Models from '../ivprog_elements';
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
 
 export function createFloatingCommand () {
 	return $('<div class="ui comment created_element"> <i class="ui icon small quote left"></i> <span class="span_comment_text" "> '+LocalizedStrings.getUI('text_comment')+' </span></div>');
 }
 
-export function renderCommand (command) {
-	var el = $('<div class="ui comment"> <i class="ui icon small quote left"></i> <span class="span_comment_text"> ' + command.comment_text + ' </span></div>');
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui comment"> <i class="ui icon small quote left"></i> <div class="var_value_menu_div"></div> <div class="div_comment_text">'+command.comment_text.content+'</div> </div>');
 	$(el).data('command', command);
+
+	addHandlers(command, function_obj, el);
+
 	return el;
 }
+
+function addHandlers (command, function_obj, comment_dom) {
+
+	$(comment_dom).find('.div_comment_text').on('click', function() {
+		$(comment_dom).find('.div_comment_text').text('');
+		VariableValueMenu.renderMenu(command, command.comment_text, $(comment_dom).find('.var_value_menu_div'), function_obj, 20);
+		$(comment_dom).find('.width-dynamic').val(command.comment_text.content);
+
+		$(comment_dom).find('.width-dynamic').focusout(function() {
+			if ($(this).val().trim()) {
+				command.comment_text.content = $(this).val().trim();
+			}
+			$(comment_dom).find('.div_comment_text').text(command.comment_text.content);
+			$(this).remove();
+		});
+
+		$('.width-dynamic').on('keydown', function(e) {
+			var code = e.keyCode || e.which;
+			if(code == 13) {
+				if ($(this).val().trim()) {
+					command.comment_text.content = $(this).val().trim();
+				}
+				$(comment_dom).find('.div_comment_text').text(command.comment_text.content);
+				$(this).remove();
+			}
+			if(code == 27) {
+				$(comment_dom).find('.div_comment_text').text(command.comment_text.content);
+
+				$(this).remove();
+			}
+		});
+
+	});
+
+}

js/visualUI/commands/functioncall.js

@@ -4,13 +4,17 @@ import * as Models from '../ivprog_elements';
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
 
 export function createFloatingCommand () {
 	return $('<div class="ui functioncall created_element"> <i class="hand point right icon"></i> <span> funcao() </span></div>');
 }
 
-export function renderCommand (command) {
-	var el = $('<div class="ui functioncall"> <i class="hand point right icon command_drag"></i> <span> funcao() </span></div>');
+export function renderCommand (command, function_obj) {
+	var el = $('<div class="ui functioncall"> <i class="hand point right icon command_drag"></i> <div class="var_value_menu_div"></div> </div>');
 	$(el).data('command', command);
+
+	VariableValueMenu.renderMenu(command, command.function_called, $(el).find('.var_value_menu_div'), function_obj);
+
 	return el;
 }

js/visualUI/commands/reader.js

@@ -16,7 +16,7 @@ export function renderCommand (command, function_obj) {
 	var el = $(ret);
 	$(el).data('command', command);
 
-	VariableValueMenu.renderMenu(command.variable_value_menu, $(el).find('.var_value_menu_div'), function_obj);
+	VariableValueMenu.renderMenu(command, command.variable_value_menu, $(el).find('.var_value_menu_div'), function_obj);
 
 	return el;
 }

js/visualUI/commands/variable_value_menu.js

@@ -4,11 +4,17 @@ import * as Models from '../ivprog_elements';
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
+import * as AttribuitionsManagement from './attribution';
+import WatchJS from 'melanke-watchjs';
+
+
+var watch = WatchJS.watch;
+
 
 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 (ref_object, dom_object, function_obj) {
+export function renderMenu (command, ref_object, dom_object, function_obj, size_field = 2) {
 
 	var menu_var_or_value = '<div class="ui dropdown menu_var_or_value_dom"><div class="text"></div><i class="dropdown icon"></i><div class="menu">';
 
@@ -18,17 +24,24 @@ export function renderMenu (ref_object, dom_object, function_obj) {
 		menu_var_or_value += '<div class="item" data-option="'+VAR_OR_VALUE_TYPES.only_function+'"><i class="dropdown icon"></i>'+LocalizedStrings.getUI('btn_function')+'</div>';
 	}
 	
-	if ((ref_object.variable_and_value == VAR_OR_VALUE_TYPES.only_variable) || (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)) {
+	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"><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.only_value) || (ref_object.variable_and_value == VAR_OR_VALUE_TYPES.variable_and_value_opt) 
+	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>';
@@ -40,22 +53,47 @@ export function renderMenu (ref_object, dom_object, function_obj) {
 
     $(dom_object).append(menu_var_or_value);
 
-    addHandlers(ref_object, dom_object, menu_var_or_value, function_obj);
+    addHandlers(command, ref_object, dom_object, menu_var_or_value, function_obj);
 
-    addVariablesToMenu(function_obj, menu_var_or_value);
+    addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
 }
 
-function addVariablesToMenu (function_obj, menu_var_or_value) {
+function addVariablesToMenu (function_obj, menu_var_or_value, ref_object) {
+
+	watch(window.program_obj.globals, function(){
+    	addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
+	}, 1);
+
+	watch(function_obj.parameters_list, function(){
+    	addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
+	}, 1);
+
+	watch(function_obj.variables_list, function(){
+    	addVariablesToMenu(function_obj, menu_var_or_value, ref_object);
+	}, 1);
 
 	var sub_menu = $(menu_var_or_value).find('.menu_only_vars');
 	$(sub_menu).text('');
 
 	if (window.program_obj.globals) {
-		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);
+
+		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);
+			}
+		} 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);
+				}
+			}
 		}
+
+		
 	}
 
 	if (function_obj.parameters_list) {
@@ -76,30 +114,46 @@ function addVariablesToMenu (function_obj, menu_var_or_value) {
 
 }
 
-function addHandlers (ref_object, dom_object, menu_var_or_value, function_obj) {
+function addHandlers (command, ref_object, dom_object, menu_var_or_value, function_obj) {
 
-	$(menu_var_or_value).dropdown({
-	  onChange: function(value, text, $selectedItem) {
-	  	$(dom_object).find('.var_name').remove();
+	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:
-	     		console.log("foi função");
-	     		break;
+		     switch ($($selectedItem).data('option')) {
+		     	case VAR_OR_VALUE_TYPES.only_function:
+		     		console.log("foi função");
+		     		break;
 
-	     	case VAR_OR_VALUE_TYPES.only_value:
-	     		openInputToValue(ref_object, dom_object, menu_var_or_value, function_obj);
-	     		break;
+		     	case VAR_OR_VALUE_TYPES.only_value:
+		     		openInputToValue(command, ref_object, dom_object, menu_var_or_value, function_obj);
+		     		break;
 
-	     	case VAR_OR_VALUE_TYPES.only_variable:
-	     		openInputToVariable(ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('variable_reference'));
-	     		break;
-	     }
-      }
-    });
+		     	case VAR_OR_VALUE_TYPES.only_variable:
+		     		openInputToVariable(command, ref_object, dom_object, menu_var_or_value, function_obj, $($selectedItem).data('variable_reference'));
+		     		break;
+		     }
+	      }
+	    });
+	}
+
+	$(dom_object).find('.width-dynamic').on('input', function() {
+	    var inputWidth = $(this).textWidth()+10;
+	    $(this).focus();
+
+	    var tmpStr = $(this).val();
+		$(this).val('');
+		$(this).val(tmpStr);
+
+	    $(this).css({
+	        width: inputWidth
+	    })
+	}).trigger('input');
+	
 }
 
-function openInputToVariable(ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
+function openInputToVariable (command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected) {
 
 	$(menu_var_or_value).find('.text').text(' ');
 	$(dom_object).find('.menu_var_or_value_dom').remove();
@@ -123,18 +177,17 @@ function openInputToVariable(ref_object, dom_object, menu_var_or_value, function
 
 
 	if (variable_selected.dimensions == 1) {
-		var nova_var_menu = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all);
-		renderMenu(nova_var_menu, $(variable_render).find('.column_container'), function_obj);
+		var nova_var_menu = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
+		renderMenu(command, nova_var_menu, $(variable_render).find('.column_container'), function_obj);
 	}
 	if (variable_selected.dimensions == 2) {
-		var nova_var_menu_row = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all);
-		renderMenu(nova_var_menu_row, $(variable_render).find('.row_container'), function_obj);
+		var nova_var_menu_row = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
+		renderMenu(command, nova_var_menu_row, $(variable_render).find('.row_container'), function_obj);
 
-		var nova_var_menu_column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all);
-		renderMenu(nova_var_menu_column, $(variable_render).find('.column_container'), function_obj);
+		var nova_var_menu_column = new Models.VariableValueMenu(VAR_OR_VALUE_TYPES.all, null, null, null, true);
+		renderMenu(command, nova_var_menu_column, $(variable_render).find('.column_container'), function_obj);
 	}
 
-
 	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>';
 	context_menu += '</div></div>';
@@ -147,16 +200,20 @@ function openInputToVariable(ref_object, dom_object, menu_var_or_value, function
 		onChange: function(value, text, $selectedItem) {
 	     if ($($selectedItem).data('clear')) {
 	     	$(dom_object).text('');
-	     	renderMenu(ref_object, dom_object, function_obj);
+	     	renderMenu(command, ref_object, dom_object, function_obj);
 	     }
       }
 	});
+
+	if (command.type == Models.COMMAND_TYPES.attribution) {
+		AttribuitionsManagement.renderMenuOperations(command, ref_object, dom_object, menu_var_or_value, function_obj, variable_selected);
+	}
 }
 
 
-function openInputToValue (ref_object, dom_object, menu_var_or_value, function_obj) {
+function openInputToValue (command, ref_object, dom_object, menu_var_or_value, function_obj) {
 	$(menu_var_or_value).find('.text').text(' ');
-	var field = $('<input type="text"/>');
+	var field = $('<input type="text" size="2" />');
 	$( field ).insertBefore($(dom_object).find('.menu_var_or_value_dom'));
 	field.focus();
 
@@ -174,8 +231,23 @@ function openInputToValue (ref_object, dom_object, menu_var_or_value, function_o
 		onChange: function(value, text, $selectedItem) {
 	     if ($($selectedItem).data('clear')) {
 	     	$(dom_object).text('');
-	     	renderMenu(ref_object, dom_object, function_obj);
+	     	renderMenu(command, ref_object, dom_object, function_obj);
 	     }
       }
 	});
+
+
+	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();
+};

js/visualUI/commands/writer.js

@@ -4,19 +4,21 @@ import * as Models from '../ivprog_elements';
 import { LocalizedStrings } from '../../services/localizedStringsService';
 import * as GlobalsManagement from '../globals';
 import * as VariablesManagement from '../variables';
+import * as VariableValueMenu from './variable_value_menu';
 
 export function createFloatingCommand () {
 	return $('<div class="ui writer created_element"> <i class="ui icon small upload"></i> <span> '+LocalizedStrings.getUI('text_command_write')+' var </span></div>');
 }
 
-export function renderCommand (command) {
+export function renderCommand (command, function_obj) {
 	var ret = '';
-	ret += '<div class="ui writer"> <i class="ui icon small upload command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_write')+' ( </span>';
-
-	ret += '<span> ) </span></div>';
+	ret += '<div class="ui writer"> <i class="ui icon small upload command_drag"></i> <span>'+LocalizedStrings.getUI('text_command_write')+' ( </span><div class="var_value_menu_div"></div> <span class="close_parentheses">)</span> </div>';
 
 	var el = $(ret);
 	$(el).data('command', command);
+
+	VariableValueMenu.renderMenu(command, command.content, $(el).find('.var_value_menu_div'), function_obj);
+
 	return el;
 }
 

js/visualUI/ivprog_elements.js

@@ -3,6 +3,8 @@ import { Types } from './../ast/types';
 export const COMMAND_TYPES = Object.freeze({function:"function", comment:"comment", reader:"reader", writer:"writer", attribution:"attribution", iftrue:"iftrue",
  repeatNtimes:"repeatNtimes", whiletrue:"whiletrue", dowhiletrue:"dowhiletrue", switch:"switch", functioncall:"functioncall"});
 
+export const ARITHMETIC_TYPES = Object.freeze({plus:"plus", minus:"minus", multiplication:"multiplication", division:"division", module:"module"});
+
 export class Variable {
 
   constructor (type, name, value, dimensions = 0, is_constant = false, rows = 0, columns = 0) {
@@ -68,6 +70,15 @@ export class Attribution {
   }
 }
 
+export class Expression {
+
+  constructor (operand1, operand2, operator) {
+    this.operand1 = operand1;
+    this.operand2 = operand2;
+    this.operator = operator;
+  }
+}
+
 export class IfTrue {
 
   constructor (expression, commands_block, commands_else) {
@@ -128,11 +139,12 @@ export class FunctionCall {
 
 export class VariableValueMenu {
   
-  constructor (variable_and_value = 7, content = null, row = null, column = null) {
+  constructor (variable_and_value = 7, content = null, row = null, column = null, include_constant = true) {
     this.variable_and_value = variable_and_value;
     this.content = content;
     this.row = row;
     this.column = column;
+    this.include_constant = include_constant;
   }
 }