viliusle#188 - fixed CSS effect on different zoom.

bit9labs · Nov 5, 2020 · a796994 · a796994
1 parent 837c2f4
commit a796994
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 12 deletions.
diff --git a/images/test-collection.json b/images/test-collection.json
@@ -231,9 +231,9 @@
  "x": 50,
  "y": 100,
  "width": 300,
- "width_original": 300,
  "height": 239,
- "height_original": 239,
+ "width_original": 400,
+ "height_original": 380,
  "visible": true,
  "is_vector": false,
  "hide_selection_if_active": false,
@@ -252,7 +252,7 @@
  "params": {
  "x": 10,
  "y": 10,
- "value": "10px 10px 5px #000000",
+ "value": "5",
  "color": "#000000"
  }
  }

diff --git a/src/js/config-menu.js b/src/js/config-menu.js
@@ -341,7 +341,7 @@ const menuDefinition = [
  {
  name: 'Negative',
  ellipsis: true,
- target: 'effects/negative.negative'
+ target: 'effects/invert.invert'
  },
  {
  name: 'Saturate',

diff --git a/src/js/core/base-layers.js b/src/js/core/base-layers.js
@@ -229,7 +229,16 @@ class Base_layers_class {
 
  if (filter_code != '')
  filter_code += ' ';
- filter_code += filter.name + "(" + filter.params.value + ")";
+
+ //load filter lib
+ var filter_file = filter.name.replace(/-/g, '_') + '.js';
+ if(filter_file == 'drop_shadow.js')
+ filter_file = 'shadow.js';
+ var filter_include = require("./../modules/effects/"+filter_file);
+ var filter_class = new filter_include.default();
+
+ var params_values = filter_class.convert_value(filter.params.value, filter.params, 'save');
+ filter_code += filter.name + "(" + params_values + ")";
  }
  if (filter_code != '')
  ctx.filter = filter_code;

diff --git a/src/js/modules/effects/abstract/css.js b/src/js/modules/effects/abstract/css.js
@@ -40,8 +40,6 @@ class Effects_common_class {
  }
 
  save(params, type) {
- params.value = this.convert_value(params.value, params, 'save');
-
  this.Base_layers.add_filter(null, type, params);
  }
 

diff --git a/src/js/modules/effects/blur.js b/src/js/modules/effects/blur.js
@@ -25,7 +25,7 @@ class Effects_blur_class extends Effects_common_class {
  value = value * diff;
  }
 
- return value + 'px';
+ return (value * config.ZOOM) + 'px';
  }
 
 }

diff --git a/src/js/modules/effects/negative.js → src/js/modules/effects/invert.js b/src/js/modules/effects/negative.js → src/js/modules/effects/invert.js
@@ -1,8 +1,8 @@
 import Effects_common_class from './abstract/css.js';
 
-class Effects_negative_class extends Effects_common_class {
+class Effects_invert_class extends Effects_common_class {
 
- negative() {
+ invert() {
  var params = [
  {name: "value", title: "Percentage:", value: 100, range: [0, 100]},
  ];
@@ -16,4 +16,4 @@ class Effects_negative_class extends Effects_common_class {
 
 }
 
-export default Effects_negative_class;
+export default Effects_invert_class;
diff --git a/src/js/modules/effects/shadow.js b/src/js/modules/effects/shadow.js
@@ -31,7 +31,8 @@ class Effects_brightness_class extends Effects_common_class {
  params.value = params.value * diff;
  }
 
- return params.x + "px " + params.y + "px " + params.value + "px " + params.color;
+ return (params.x * config.ZOOM) + "px " + (params.y * config.ZOOM) + "px " + (params.value * config.ZOOM) + "px "
+ + params.color;
  }
 
 }