editable filters (only if non-destructive)

src/js/actions/add-layer-filter.js

@@ -10,14 +10,14 @@ export class Add_layer_filter_action extends Base_action {
  * @param {string} name
  * @param {object} params
  */
- constructor(layer_id, name, params) {
+ constructor(layer_id, name, params, filter_id) {
  super('add_layer_filter', 'Add Layer Filter');
  if (layer_id == null)
  layer_id = config.layer.id;
  this.layer_id = parseInt(layer_id);
- this.filter_id = Math.floor(Math.random() * 999999999) + 1; // A good UUID library would 
  this.name = name;
  this.params = params;
+ this.filter_id = filter_id;
  this.reference_layer = null;
  }
 
@@ -32,8 +32,20 @@ export class Add_layer_filter_action extends Base_action {
  name: this.name,
  params: this.params,
  };
- this.reference_layer.filters.push(filter);
-
+ if(this.filter_id) {
+ //update
+ for(var i in this.reference_layer.filters) {
+ if(this.reference_layer.filters[i].id == this.filter_id){
+ this.reference_layer.filters[i] = filter;
+ break;
+ }
+ }
+ }
+ else{
+ //insert
+ filter.id = Math.floor(Math.random() * 999999999) + 1; // A good UUID library would
+ this.reference_layer.filters.push(filter);
+ }
  config.need_render = true;
  app.GUI.GUI_layers.render_layers();
  }

src/js/core/base-layers.js

@@ -64,6 +64,7 @@ class Base_layers_class {
  this.stable_dimensions = [];
  this.debug_rendering = false;
  this.render_success = null;
+ this.disabled_filter_id = null;
  }
 
  /**
@@ -254,6 +255,10 @@ class Base_layers_class {
  //apply pre-filters
  for (var i in object.filters) {
  var filter = object.filters[i];
+ if(filter.id == this.disabled_filter_id){
+ continue;
+ }
+
  filter.name = filter.name.replace('drop-shadow', 'shadow');
 
  //find filter
@@ -708,6 +713,15 @@ class Base_layers_class {
  return config.layers;
  }
 
+ /**
+ * disabled filter by id
+ *
+ * @param filter_id
+ */
+ disable_filter(filter_id) {
+ this.disabled_filter_id = filter_id;
+ }
+
 }
 
 export default Base_layers_class;

src/js/core/gui/gui-layers.js

@@ -8,6 +8,7 @@ import config from './../../config.js';
 import Base_layers_class from './../base-layers.js';
 import Helper_class from './../../libs/helpers.js';
 import Layer_rename_class from './../../modules/layer/rename.js';
+import Effects_browser_class from './../../modules/effects/browser.js';
 
 var template = `
  <span class="trn">Insert:</span>
@@ -28,6 +29,7 @@ class GUI_layers_class {
  this.Base_layers = new Base_layers_class();
  this.Helper = new Helper_class();
  this.Layer_rename = new Layer_rename_class();
+ this.Effects_browser = new Effects_browser_class();
  }
 
  render_main_layers() {
@@ -86,6 +88,18 @@ class GUI_layers_class {
  new app.Actions.Delete_layer_filter_action(target.dataset.pid, target.dataset.id)
  );
  }
+ else if (target.id == 'filter_name') {
+ //edit filter
+ var effects = _this.Effects_browser.get_effects_list();
+ var key = target.dataset.filter.toLowerCase();
+ for (var i in effects) {
+ if(effects[i].title.toLowerCase() == key){
+ _this.Base_layers.select(target.dataset.pid);
+ var function_name = _this.Effects_browser.get_function_from_path(key);
+ effects[i].object[function_name](target.dataset.id);
+ }
+ }
+ }
  });
 
  document.getElementById('layers_base').addEventListener('dblclick', function (event) {
@@ -138,7 +152,7 @@ class GUI_layers_class {
 
  html += '<div class="filter">';
  html += ' <span class="delete" id="delete_filter" data-pid="' + layers[i].id + '" data-id="' + filter.id + '" title="delete"></span>';
- html += ' <span class="layer_name" id="filter_name" data-pid="' + layers[i].id + '" data-id="' + filter.id + '">' + title + '</span>';
+ html += ' <span class="layer_name" id="filter_name" data-pid="' + layers[i].id + '" data-id="' + filter.id + '" data-filter="' + filter.name + '">' + title + '</span>';
  html += ' <div class="clear"></div>';
  html += '</div>';
  }

src/js/modules/effects/abstract/css.js

@@ -13,7 +13,7 @@ class Effects_common_class {
  this.params = null;
  }
 
- show_dialog(type, params) {
+ show_dialog(type, params, filter_id) {
  var _this = this;
  var title = this.Helper.ucfirst(type);
  title = title.replace(/-/g, ' ');
@@ -39,19 +39,25 @@ class Effects_common_class {
  },
  on_finish: function (params) {
  _this.params = params;
- _this.save(params, type);
+ _this.save(params, type, filter_id);
  },
  };
+ this.Base_layers.disable_filter(filter_id);
  this.POP.show(settings);
+ this.Base_layers.disable_filter(null);
  }
 
- save(params, type) {
+ save(params, type, filter_id) {
  return app.State.do_action(
- new app.Actions.Add_layer_filter_action(null, type, params)
+ new app.Actions.Add_layer_filter_action(null, type, params, filter_id)
  );
  }
 
  preview(params, type) {
+ if(type == 'shadow'){
+ type = 'drop-shadow';
+ }
+
  var value = this.convert_value(params.value, params, 'preview');
  return type + "(" + value + ")";
  }
@@ -60,6 +66,17 @@ class Effects_common_class {
  return value;
  }
 
+ find_filter_by_id(filter_id, filter_name) {
+ var filter = {};
+ for(var i in config.layer.filters){
+ if(config.layer.filters[i].name == filter_name && config.layer.filters[i].id == filter_id) {
+ return config.layer.filters[i].params;
+ }
+ }
+
+ return {};
+ }
+
 }
 
 export default Effects_common_class;

src/js/modules/effects/common/blur.js

@@ -9,11 +9,13 @@ class Effects_blur_class extends Effects_common_class {
  this.POP = new Dialog_class();
  }
 
- blur() {
+ blur(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'blur');
+
  var params = [
- {name: "value", title: "Percentage:", value: 5, range: [0, 50]},
+ {name: "value", title: "Percentage:", value: filter.value ??= 5, range: [0, 50]},
  ];
- this.show_dialog('blur', params);
+ this.show_dialog('blur', params, filter_id);
  }
 
  convert_value(value, params, type) {

src/js/modules/effects/common/brightness.js

@@ -2,11 +2,13 @@ import Effects_common_class from '../abstract/css.js';
 
 class Effects_brightness_class extends Effects_common_class {
 
- brightness() {
+ brightness(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'brightness');
+
  var params = [
- {name: "value", title: "Percentage:", value: 50, range: [-100, 100]},
+ {name: "value", title: "Percentage:", value: filter.value ??= 50, range: [-100, 100]},
  ];
- this.show_dialog('brightness', params);
+ this.show_dialog('brightness', params, filter_id);
  }
 
  convert_value(value) {

src/js/modules/effects/common/contrast.js

@@ -2,11 +2,13 @@ import Effects_common_class from '../abstract/css.js';
 
 class Effects_contrast_class extends Effects_common_class {
 
- contrast() {
+ contrast(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'contrast');
+
  var params = [
- {name: "value", title: "Percentage:", value: 40, range: [-100, 100]},
+ {name: "value", title: "Percentage:", value: filter.value ??= 40, range: [-100, 100]},
  ];
- this.show_dialog('contrast', params);
+ this.show_dialog('contrast', params, filter_id);
  }
 
  convert_value(value) {

src/js/modules/effects/common/grayscale.js

@@ -2,11 +2,13 @@ import Effects_common_class from '../abstract/css.js';
 
 class Effects_grayscale_class extends Effects_common_class {
 
- grayscale() {
+ grayscale(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'grayscale');
+
  var params = [
- {name: "value", title: "Percentage:", value: 100, range: [0, 100]},
+ {name: "value", title: "Percentage:", value: filter.value ??= 100, range: [0, 100]},
  ];
- this.show_dialog('grayscale', params);
+ this.show_dialog('grayscale', params, filter_id);
  }
 
  convert_value(value) {

src/js/modules/effects/common/hue-rotate.js

@@ -2,11 +2,13 @@ import Effects_common_class from '../abstract/css.js';
 
 class Effects_hueRotate_class extends Effects_common_class {
 
- hue_rotate() {
+ hue_rotate(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'hue-rotate');
+
  var params = [
- {name: "value", title: "Degree:", value: 90, range: [0, 360]},
+ {name: "value", title: "Degree:", value: filter.value ??= 90, range: [0, 360]},
  ];
- this.show_dialog('hue-rotate', params);
+ this.show_dialog('hue-rotate', params, filter_id);
  }
 
  convert_value(value) {

src/js/modules/effects/common/invert.js

@@ -2,11 +2,13 @@ import Effects_common_class from '../abstract/css.js';
 
 class Effects_invert_class extends Effects_common_class {
 
- invert() {
+ invert(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'invert');
+
  var params = [
- {name: "value", title: "Percentage:", value: 100, range: [0, 100]},
+ {name: "value", title: "Percentage:", value: filter.value ??= 100, range: [0, 100]},
  ];
- this.show_dialog('invert', params);
+ this.show_dialog('invert', params, filter_id);
  }
 
  convert_value(value) {

src/js/modules/effects/common/saturate.js

@@ -2,11 +2,13 @@ import Effects_common_class from '../abstract/css.js';
 
 class Effects_saturate_class extends Effects_common_class {
 
- saturate() {
+ saturate(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'saturate');
+
  var params = [
- {name: "value", title: "Percentage:", value: -50, range: [-100, 100]},
+ {name: "value", title: "Percentage:", value: filter.value ??= -50, range: [-100, 100]},
  ];
- this.show_dialog('saturate', params);
+ this.show_dialog('saturate', params, filter_id);
  }
 
  convert_value(value) {

src/js/modules/effects/common/sepia.js

@@ -2,11 +2,13 @@ import Effects_common_class from '../abstract/css.js';
 
 class Effects_sepia_class extends Effects_common_class {
 
- sepia() {
+ sepia(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'sepia');
+
  var params = [
- {name: "value", title: "Percentage:", value: 60, range: [0, 100]},
+ {name: "value", title: "Percentage:", value: filter.value ??= 60, range: [0, 100]},
  ];
- this.show_dialog('sepia', params);
+ this.show_dialog('sepia', params, filter_id);
  }
 
  convert_value(value) {

src/js/modules/effects/common/shadow.js

@@ -12,14 +12,16 @@ class Effects_brightness_class extends Effects_common_class {
  this.preview_padding = 20;
  }
 
- shadow() {
+ shadow(filter_id) {
+ var filter = this.find_filter_by_id(filter_id, 'shadow');
+
  var params = [
- {name: "x", title: "Offset X:", value: 10, range: [-100, 100]},
- {name: "y", title: "Offset Y:", value: 10, range: [-100, 100]},
- {name: "value", title: "Radius:", value: 5, range: [0, 100]},
- {name: "color", title: "Color:", value: "#000000", type: 'color'},
+ {name: "x", title: "Offset X:", value: filter.x ??= 10, range: [-100, 100]},
+ {name: "y", title: "Offset Y:", value: filter.y ??= 10, range: [-100, 100]},
+ {name: "value", title: "Radius:", value: filter.value ??= 5, range: [0, 100]},
+ {name: "color", title: "Color:", value: filter.color ??= "#000000", type: 'color'},
  ];
- this.show_dialog('drop-shadow', params);
+ this.show_dialog('shadow', params, filter_id);
  }
 
  convert_value(value, params, type) {