artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 17:46:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

shadow filter improvements

Browse Source
This commit is contained in:
viliusle 2021-06-13 19:28:54 +03:00
parent 87bc43970c
commit dc0c5de453
3 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/js/libs/popup.js
View File

@ -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();

11
src/js/modules/effects/abstract/css.js
View File

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

9
src/js/modules/effects/common/shadow.js
View File

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