From dc0c5de453d7809bf1bd54b82377bed5dcb454c0 Mon Sep 17 00:00:00 2001
From: viliusle <www.viliusl@gmail.com>
Date: Sun, 13 Jun 2021 19:28:54 +0300
Subject: [PATCH] shadow filter improvements

---
 src/js/libs/popup.js                    | 13 ++++++++++---
 src/js/modules/effects/abstract/css.js  | 11 ++++++++++-
 src/js/modules/effects/common/shadow.js |  9 +++++++--
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/js/libs/popup.js b/src/js/libs/popup.js
index cf20b04..7d9a27c 100644
--- a/src/js/libs/popup.js
+++ b/src/js/libs/popup.js
@@ -73,6 +73,7 @@ class Dialog_class {
 		this.onfinish = false;
 		this.oncancel = false;
 		this.preview = false;
+		this.preview_padding = 0;
 		this.onload = false;
 		this.onchange = false;
 		this.width_mini = 225;
@@ -108,6 +109,7 @@ class Dialog_class {
 		this.onfinish = config.on_finish || false;
 		this.oncancel = config.on_cancel || false;
 		this.preview = config.preview || false;
+		this.preview_padding = config.preview_padding || 0;
 		this.onchange = config.on_change || false;
 		this.onload = config.on_load || false;
 		this.className = config.className || '';
@@ -144,6 +146,7 @@ class Dialog_class {
 		this.parameters = [];
 		this.active = false;
 		this.preview = false;
+		this.preview_padding = 0;
 		this.onload = false;
 		this.onchange = false;
 		this.title = null;
@@ -242,7 +245,10 @@ class Dialog_class {
 				var ctx_right = canvas_right.getContext("2d");
 
 				ctx_right.clearRect(0, 0, this.width_mini, this.height_mini);
-				ctx_right.drawImage(this.layer_active_small, 0, 0, this.width_mini, this.height_mini);
+				ctx_right.drawImage(this.layer_active_small,
+					this.preview_padding, this.preview_padding,
+					this.width_mini - this.preview_padding * 2, this.height_mini - this.preview_padding * 2
+				);
 
 				this.onchange(params, ctx_right, this.width_mini, this.height_mini, canvas_right);
 			}
@@ -347,7 +353,6 @@ class Dialog_class {
 		var html_preview_content = '';
 		var html_params = '';
 
-
 		//preview area
 		if (this.preview !== false) {
 			html_preview_content += '<div class="preview_container">';
@@ -449,7 +454,9 @@ class Dialog_class {
 			//copy to right side
 			var canvas_right = this.el.querySelector('[data-id="pop_post"]').getContext("2d");
 			canvas_right.clearRect(0, 0, this.width_mini, this.height_mini);
-			canvas_right.drawImage(canvas_left, 0, 0, this.width_mini, this.height_mini);
+			canvas_right.drawImage(canvas_left,
+				this.preview_padding, this.preview_padding,
+				this.width_mini - this.preview_padding * 2, this.height_mini - this.preview_padding * 2);
 
 			//prepare temp canvas
 			this.preview_handler();
diff --git a/src/js/modules/effects/abstract/css.js b/src/js/modules/effects/abstract/css.js
index d1db3e4..f454bfc 100644
--- a/src/js/modules/effects/abstract/css.js
+++ b/src/js/modules/effects/abstract/css.js
@@ -18,15 +18,24 @@ class Effects_common_class {
 		var title = this.Helper.ucfirst(type);
 		title = title.replace(/-/g, ' ');
 
+		var preview_padding = 0;
+		if(typeof this.preview_padding != "undefined"){
+			preview_padding = this.preview_padding;
+		}
+
 		var settings = {
 			title: title,
 			preview: true,
+			preview_padding: preview_padding,
 			effects: true,
 			params: params,
 			on_change: function (params, canvas_preview, w, h) {
 				_this.params = params;
 				canvas_preview.filter = _this.preview(params, type);
-				canvas_preview.drawImage(this.layer_active_small, 0, 0);
+				canvas_preview.drawImage(this.layer_active_small,
+					preview_padding, preview_padding,
+					_this.POP.width_mini - preview_padding * 2, _this.POP.height_mini - preview_padding * 2
+				);
 			},
 			on_finish: function (params) {
 				_this.params = params;
diff --git a/src/js/modules/effects/common/shadow.js b/src/js/modules/effects/common/shadow.js
index 6db15d6..38e073e 100644
--- a/src/js/modules/effects/common/shadow.js
+++ b/src/js/modules/effects/common/shadow.js
@@ -1,12 +1,15 @@
 import config from '../../../config.js';
 import Effects_common_class from '../abstract/css.js';
 import Dialog_class from '../../../libs/popup.js';
+import Effects_browser_class from '../browser.js';
 
 class Effects_brightness_class extends Effects_common_class {
 
 	constructor() {
 		super();
 		this.POP = new Dialog_class();
+		this.Effects_browser = new Effects_browser_class();
+		this.preview_padding = 20;
 	}
 
 	shadow() {
@@ -16,7 +19,7 @@ class Effects_brightness_class extends Effects_common_class {
 			{name: "value", title: "Radius:", value: 5, range: [0, 100]},
 			{name: "color", title: "Color:", value: "#000000", type: 'color'},
 		];
-		this.show_dialog('shadow', params);
+		this.show_dialog('drop-shadow', params);
 	}
 
 	convert_value(value, params, type) {
@@ -42,7 +45,9 @@ class Effects_brightness_class extends Effects_common_class {
 		//draw
 		var size = this.convert_value(null, {x: 5, y: 5, value: 5, color: '#000000'}, 'preview');
 		ctx.filter = "drop-shadow("+size+")";
-		ctx.drawImage(canvas_thumb, 0, 0);
+		ctx.drawImage(canvas_thumb,
+			10, 10,
+			this.Effects_browser.preview_width - 20, this.Effects_browser.preview_height - 20);
 		ctx.filter = 'none';
 	}