#188 - fixed CSS effect on different zoom.

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"
 					}
 				}

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',

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;

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);
 	}
 

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';
 	}
 
 }

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;

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;
 	}
 
 }