From 9dd908c39062d416a88cc46cabe144657b2d0dd5 Mon Sep 17 00:00:00 2001 From: viliusle Date: Fri, 21 Apr 2023 19:22:18 +0300 Subject: [PATCH] change canvas size with "in proportion" feature (resize and move all layers) --- src/js/actions/autoresize-canvas.js | 7 ++++ src/js/config.js | 1 + src/js/modules/image/size.js | 50 ++++++++++++++++++++++++----- src/js/modules/tools/settings.js | 4 +++ 4 files changed, 54 insertions(+), 8 deletions(-) diff --git a/src/js/actions/autoresize-canvas.js b/src/js/actions/autoresize-canvas.js index 0dd8a79..28fcbdf 100644 --- a/src/js/actions/autoresize-canvas.js +++ b/src/js/actions/autoresize-canvas.js @@ -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) { diff --git a/src/js/config.js b/src/js/config.js index b791e67..b4056fa 100644 --- a/src/js/config.js +++ b/src/js/config.js @@ -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 = [ diff --git a/src/js/modules/image/size.js b/src/js/modules/image/size.js index dff48df..008472d 100644 --- a/src/js/modules/image/size.js +++ b/src/js/modules/image/size.js @@ -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) ); } } diff --git a/src/js/modules/tools/settings.js b/src/js/modules/tools/settings.js index e1b65ae..202ef20 100644 --- a/src/js/modules/tools/settings.js +++ b/src/js/modules/tools/settings.js @@ -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);