ability to edit tools (shapes) attributes like color, size after obje…

…ct 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(