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

change canvas size with "in proportion" feature (resize and move all layers)

Browse Source
This commit is contained in:
viliusle 2023-04-21 19:22:18 +03:00
parent e5af391390
commit 9dd908c390
4 changed files with 54 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/actions/autoresize-canvas.js
View File

@ -1,6 +1,7 @@
import app from '../app.js';
import config from '../config.js';
import { Base_action } from './base.js';
import Tools_settings_class from './../modules/tools/settings.js';
export class Autoresize_canvas_action extends Base_action {
/**
@ -13,6 +14,7 @@ export class Autoresize_canvas_action extends Base_action {
*/
constructor(width, height, layer_id, can_automate = true, ignore_same_size = false) {
super('autoresize_canvas', 'Auto-resize Canvas');
this.Tools_settings = new Tools_settings_class();
this.width = width;
this.height = height;
this.layer_id = layer_id;
@ -30,6 +32,11 @@ export class Autoresize_canvas_action extends Base_action {
let need_fit = false;
let new_config_width = config.WIDTH;
let new_config_height = config.HEIGHT;
var enable_autoresize = this.Tools_settings.get_setting('enable_autoresize');
if(enable_autoresize == false){
return;
}
// Resize up
if (width > new_config_width || height > new_config_height) {

1
src/js/config.js
View File

@ -29,6 +29,7 @@ config.user_fonts = {};
config.guides_enabled = true;
config.guides = [];
config.ruler_active = false;
config.enable_autoresize_by_default = true;
//requires styles in reset.css
config.themes = [

50
src/js/modules/image/size.js
View File

@ -20,6 +20,7 @@ class Image_size_class {
var common_dimensions = this.Base_gui.common_dimensions;
var units = this.Tools_settings.get_setting('default_units');
var resolution = this.Tools_settings.get_setting('resolution');
var enable_autoresize = this.Tools_settings.get_setting('enable_autoresize');
var resolutions = ['Custom'];
for (var i in common_dimensions) {
@ -38,6 +39,8 @@ class Image_size_class {
{name: "h", title: "Height:", value: height, placeholder: height, comment: units},
{name: "resolution", title: "Resolution:", values: resolutions},
{name: "layout", title: "Layout:", value: "Custom", values: ["Custom", "Landscape", "Portrait"]},
{name: "enable_autoresize", title: "Enable autoresize:", value: enable_autoresize},
{name: "in_proportion", title: "In proportion:", value: false},
],
on_finish: function (params) {
_this.size_handler(params);
@ -59,6 +62,8 @@ class Image_size_class {
if (height < 0){
height = 1;
}
this.Tools_settings.save_setting('enable_autoresize', data.enable_autoresize);
//aspect ratio
if (isNaN(width) && isNaN(height)){
@ -90,15 +95,44 @@ class Image_size_class {
height = this.Helper.get_internal_unit(height, units, resolution);
}
var actions = [
new app.Actions.Prepare_canvas_action('undo'),
new app.Actions.Update_config_action({
WIDTH: parseInt(width),
HEIGHT: parseInt(height)
}),
];
if(data.in_proportion == true) {
//resize object and change coordinates
var width_ratio = config.WIDTH / width;
var height_ratio = config.HEIGHT / height;
var ratio = Math.max(width_ratio, height_ratio);
for (var i in config.layers) {
var layer = config.layers[i];
if(layer.x != null && layer.y != null) {
var data_new = {
x: Math.round(layer.x / width_ratio),
y: Math.round(layer.y / height_ratio),
};
actions.push(new app.Actions.Update_layer_action(layer.id, data_new));
}
if(layer.width != null && layer.height != null) {
var data_new = {
width: Math.round(layer.width / ratio),
height: Math.round(layer.height / ratio),
};
actions.push(new app.Actions.Update_layer_action(layer.id, data_new));
}
}
}
actions.push(new app.Actions.Prepare_canvas_action('do'));
//execute
app.State.do_action(
new app.Actions.Bundle_action('set_image_size', 'Set Image Size', [
new app.Actions.Prepare_canvas_action('undo'),
new app.Actions.Update_config_action({
WIDTH: parseInt(width),
HEIGHT: parseInt(height)
}),
new app.Actions.Prepare_canvas_action('do')
])
new app.Actions.Bundle_action('set_image_size', 'Set Image Size', actions)
);
}
}

4
src/js/modules/tools/settings.js
View File

@ -32,6 +32,7 @@ class Tools_settings_class {
var default_units = this.get_setting('default_units');
var resolution = this.get_setting('resolution');
var thick_guides = this.get_setting('thick_guides');
var enable_autoresize = this.get_setting('enable_autoresize');
var settings = {
title: 'Settings',
@ -48,6 +49,7 @@ class Tools_settings_class {
{name: "safe_search", title: "Safe search:", value: safe_search},
{name: "exit_confirm", title: "Exit confirmation:", value: exit_confirm},
{name: "thick_guides", title: "Thick guides:", value: thick_guides},
{name: "enable_autoresize", title: "Enable autoresize:", value: enable_autoresize},
],
on_change: function (params) {
this.Base_gui.change_theme(params.theme);
@ -76,6 +78,7 @@ class Tools_settings_class {
this.save_setting('default_units_short', this.default_units_config[params.default_units]);
this.save_setting('resolution', params.resolution);
this.save_setting('thick_guides', params.thick_guides);
this.save_setting('enable_autoresize', params.enable_autoresize);
//update config
config.TRANSPARENCY = this.get_setting('transparency');
@ -126,6 +129,7 @@ class Tools_settings_class {
'default_units_short': Object.values(this.default_units_config)[0],
'resolution': 72,
'thick_guides': false,
'enable_autoresize': config.enable_autoresize_by_default,
};
var value = this.Helper.getCookie(key);