ability to edit tools (shapes) attributes like color, size after object is created

src/css/layout.css

@@ -514,22 +514,36 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
 }
 .sidebar_right .label{
 	display: inline-block;
-	width: 60px;
 }
 .info .toggle.toggled{
 	margin-bottom: -3px;
 }
 .block.details .row{
 	clear:both;
-	margin-bottom: 2px;
+	margin-bottom: 4px;
+	min-height: 23px;
 }
 .block.details input[type="number"]{
 	width: 70px;
 	padding: 3px 5px;
+	float: right;
+}
+.block.details .ui_color_input{
+	width: 70px;
+	float: right;
+}
+.block.details .ui_color_input input{
+	width: 100%;
+	height: 23px;
+}
+.block.details button.ui_toggle_button{
+	width: 90px;
+	float: right;
 }
 .block.details select{
 	width: calc(100% - 70px);
 	height: 23px;
+	float: right;
 }
 .block.details button{
 	width: calc(100% - 70px);
@@ -539,6 +553,8 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
 .block.details button.reset{
 	position: relative;
 	width: 25px;
+	float: right;
+	margin-right: 3px;
 	overflow: hidden;
 	opacity: 0.5;
 	color: transparent;

src/js/config.js

@@ -497,7 +497,6 @@ config.TOOLS = [
 		name: 'polygon',
 		visible: false,
 		attributes: {
-			size: 4,
 			border_size: 4,
 			border: true,
 			fill: true,

src/js/core/gui/gui-details.js

@@ -46,9 +46,9 @@ var template = `
 		<span class="trn label">Color:</span>
 		<input style="padding: 0px;" type="color" id="detail_color" />
 	</div>
+	<div id="parameters_container"></div>
 	<div id="text_detail_params">
-		<hr />
-		<div class="row">
+		<div class="row center">
 			<span class="trn label">&nbsp;</span>
 			<button type="button" class="trn dots" id="detail_param_text">Edit text...</button>
 		</div>
@@ -121,6 +121,7 @@ class GUI_details_class {
 		this.Base_layers = new Base_layers_class();
 		this.Tools_settings = new Tools_settings_class();
 		this.Helper = new Helper_class();
+		this.layer_details_active = false;
 	}
 
 	render_main_details() {
@@ -158,6 +159,9 @@ class GUI_details_class {
 			}
 		}
 
+		//add params
+		this.render_more_parameters();
+
 		this.render_text(events);
 		this.render_general_select_param('boundary', events);
 		this.render_general_select_param('kerning', events);
@@ -347,13 +351,13 @@ class GUI_details_class {
 			});
 		}
 	}
-	
+
 	render_general_select_param(key, events){
 		var layer = config.layer;
 
 		if (layer != undefined) {
 			var target = document.getElementById('detail_param_' + key);
-			
+
 			if (layer.params[key] == null) {
 				target.value = '';
 				target.disabled = true;
@@ -478,7 +482,8 @@ class GUI_details_class {
 				}
 			});
 			document.getElementById('reset_size').addEventListener('click', function (e) {
-				if (config.layer.width !== config.layer.width_original || config.layer.height !== config.layer.height_original) {
+				if (config.layer.width !== config.layer.width_original
+					|| config.layer.height !== config.layer.height_original) {
 					app.State.do_action(
 						new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
 							new app.Actions.Update_layer_action(config.layer.id, {
@@ -528,6 +533,183 @@ class GUI_details_class {
 		}
 	}
 
+	render_more_parameters() {
+		var _this = this;
+		var target_id = "parameters_container";
+		const itemContainer = document.getElementById(target_id);
+
+		if(this.layer_details_active == true){
+			return;
+		}
+
+		itemContainer.innerHTML = "";
+
+		if(!config.layer || typeof config.layer.params == 'undefined' || config.layer.type == 'text') {
+			return;
+		}
+
+		//find layer parameters settings
+		var params_config = null;
+		for (var i in config.TOOLS) {
+			if (config.TOOLS[i].name == config.layer.type) {
+				params_config =  config.TOOLS[i];
+			}
+		}
+		if(params_config == null){
+			return;
+		}
+
+		for (var k in params_config.attributes) {
+			var item = params_config.attributes[k];
+
+			//hide some fields, in future name should start with underscore
+			if(params_config.name == 'rectangle' && k == 'square'
+				|| params_config.name == 'ellipse' && k == 'circle'
+				|| params_config.name == 'pencil' && k == 'pressure'
+				|| params_config.name == 'pencil' && k == 'size'){
+				continue;
+			}
+
+			//row
+			let item_row = document.createElement('div');
+			item_row.className = 'row';
+			itemContainer.appendChild(item_row);
+
+			//title
+			var title = k[0].toUpperCase() + k.slice(1);
+			title = title.replace("_", " ");
+			let item_title = document.createElement('span');
+			item_title.className = 'trn label';
+			item_title.innerHTML = title;
+			item_row.appendChild(item_title);
+
+			//value
+			if (typeof item == 'boolean' || (typeof item == 'object' && typeof item.value == 'boolean')) {
+				//boolean - true, false
+
+				const elementInput = document.createElement('button');
+				elementInput.type = 'button';
+				elementInput.className = 'trn ui_toggle_button';
+				elementInput.innerHTML = title;
+
+				elementInput.dataset.key = k;
+				item_row.appendChild(elementInput);
+
+				let value = config.layer.params[k];
+				elementInput.setAttribute('aria-pressed', value);
+
+				//events
+				elementInput.addEventListener('click', function (e) {
+					//on leave
+					let layer = config.layer;
+					let key = this.dataset.key;
+					let new_value = elementInput.getAttribute('aria-pressed') !== 'true';
+					let params = JSON.parse(JSON.stringify(config.layer.params));
+					params[key] = new_value;
+
+					app.State.do_action(
+						new app.Actions.Update_layer_action(layer.id, {
+							params: params
+						})
+					);
+				});
+			}
+			else if (typeof item == 'number' || (typeof item == 'object' && typeof item.value == 'number')) {
+				//numbers
+
+				const elementInput = document.createElement('input');
+				elementInput.type = 'number';
+				elementInput.dataset.key = k;
+				item_row.appendChild(elementInput);
+
+				let min = 1;
+				let max = k === 'power' ? 100 : 999;
+				let step = null;
+				let value = config.layer.params[k];
+				if (typeof item == 'object') {
+					value = item.value;
+					if (item.min != null) {
+						min = item.min;
+					}
+					if (item.max != null) {
+						max = item.max;
+					}
+					if (item.step != null) {
+						step = item.step;
+					}
+				}
+				elementInput.setAttribute('min', min);
+				elementInput.setAttribute('max', max);
+				if (item.step != null) {
+					elementInput.setAttribute('step', step);
+				}
+				elementInput.setAttribute('value', config.layer.params[k]);
+
+				//events
+				let focus_value = null;
+				elementInput.addEventListener('focus', function (e) {
+					focus_value = parseFloat(this.value);
+					_this.layer_details_active = true;
+				});
+				elementInput.addEventListener('blur', function (e) {
+					//on leave
+					_this.layer_details_active = false;
+					let layer = config.layer;
+					let key = this.dataset.key;
+					let new_value = parseInt(this.value);
+					let params = JSON.parse(JSON.stringify(config.layer.params));
+					params[key] = new_value;
+
+					if (focus_value !== new_value) {
+						app.State.do_action(
+							new app.Actions.Update_layer_action(layer.id, {
+								params: params
+							})
+						);
+					}
+				});
+				elementInput.addEventListener('change', function (e) {
+					//on change - lots of events here in short time
+					let key = this.dataset.key;
+					let new_value = parseInt(this.value);
+
+					config.layer.params[key] = new_value;
+					config.need_render = true;
+				});
+			}
+			else if (typeof item == 'string' && item[0] == '#') {
+				//color
+
+				var elementInput = document.createElement('input');
+				elementInput.type = 'color';
+				let focus_value = null;
+				const $colorInput = $(elementInput).uiColorInput({
+						id: k,
+						value: item
+					})
+					.on('change', () => {
+						let layer = config.layer;
+						let key = $colorInput.uiColorInput('get_id');
+						let new_value = $colorInput.uiColorInput('get_value');
+						let params = JSON.parse(JSON.stringify(config.layer.params));
+						params[key] = new_value;
+
+						app.State.do_action(
+							new app.Actions.Update_layer_action(layer.id, {
+								params: params
+							})
+						);
+					});
+				$colorInput.uiColorInput('set_value', config.layer.params[k]);
+
+				item_row.appendChild($colorInput[0]);
+			}
+			else {
+				alertify.error('Error: unsupported attribute type:' + typeof item + ', ' + k);
+			}
+		}
+	}
+
 }
 
 export default GUI_details_class;

src/js/tools/gradient.js

@@ -43,7 +43,7 @@ class Gradient_class extends Base_tools_class {
 			y: mouse.y,
 			rotate: null,
 			is_vector: is_vector,
-			color: params.color_1,
+			color: null,
 			data: {
 				center_x: mouse.x,
 				center_y: mouse.y,
@@ -138,7 +138,7 @@ class Gradient_class extends Base_tools_class {
 			power = 255;
 		}
 
-		var color1 = layer.color;
+		var color1 = params.color_1;
 		var color2 = params.color_2;
 		var radial = params.radial;
 

src/js/tools/select.js

@@ -117,20 +117,35 @@ class Select_tool_class extends Base_tools_class {
 	}
 
 	dragStart(event) {
+		var mouse = this.get_mouse_info(event);
 		if (config.TOOL.name != this.name)
 			return;
+		if (mouse.click_valid == false) {
+			return;
+		}
+
 		this.mousedown(event);
 	}
 
 	dragMove(event) {
+		var mouse = this.get_mouse_info(event);
 		if (config.TOOL.name != this.name)
 			return;
+		if (mouse.click_valid == false) {
+			return;
+		}
+
 		this.mousemove(event);
 	}
 
 	dragEnd(event) {
+		var mouse = this.get_mouse_info(event);
 		if (config.TOOL.name != this.name)
 			return;
+		if (mouse.click_valid == false) {
+			return;
+		}
+
 		this.mouseup(event);
 		this.Base_layers.render();
 	}

src/js/tools/shapes/polygon.js

@@ -101,7 +101,7 @@ class Polygon_class extends Base_tools_class {
 				hide_selection_if_active: true,
 				rotate: null,
 				is_vector: true,
-				color: config.COLOR,
+				color: null,
 				status: 'draft',
 			};
 			app.State.do_action(