+
@@ -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;
diff --git a/src/js/tools/gradient.js b/src/js/tools/gradient.js
index 04a9b798..0a1008cc 100644
--- a/src/js/tools/gradient.js
+++ b/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;
diff --git a/src/js/tools/select.js b/src/js/tools/select.js
index 568a1f68..4adee009 100644
--- a/src/js/tools/select.js
+++ b/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();
}
diff --git a/src/js/tools/shapes/polygon.js b/src/js/tools/shapes/polygon.js
index 9c0c8879..f4576fb0 100644
--- a/src/js/tools/shapes/polygon.js
+++ b/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(