Skip to content

Commit

Permalink
more units (pixels, inches, cm, mm)
Browse files Browse the repository at this point in the history
  • Loading branch information
@viliusle
viliusle committed Apr 11, 2021
1 parent ae39fd5 commit f0d3d06
Show file tree
Hide file tree
Showing 13 changed files with 1,032 additions and 1,229 deletions.
1,794 changes: 695 additions & 1,099 deletions package-lock.json
View file

Large diffs are not rendered by default.

41 changes: 15 additions & 26 deletions src/js/core/base-gui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,34 +296,23 @@ class Base_gui_class {
var page_h = wrapper.clientHeight;
var auto_size = false;

var save_resolution_cookie = this.Helper.getCookie('save_resolution');
var last_resolution = this.Helper.getCookie('last_resolution');
if (save_resolution_cookie != null && save_resolution_cookie != ''
&& last_resolution != null && last_resolution != '') {
//load last saved resolution
last_resolution = JSON.parse(last_resolution);
config.WIDTH = parseInt(last_resolution[0]);
config.HEIGHT = parseInt(last_resolution[1]);
}
else {
//use largest possible
for (var i = this.common_dimensions.length - 1; i >= 0; i--) {
if (this.common_dimensions[i][0] > page_w
|| this.common_dimensions[i][1] > page_h) {
//browser size is too small
continue;
}
config.WIDTH = parseInt(this.common_dimensions[i][0]);
config.HEIGHT = parseInt(this.common_dimensions[i][1]);
auto_size = true;
break;
//use largest possible
for (var i = this.common_dimensions.length - 1; i >= 0; i--) {
if (this.common_dimensions[i][0] > page_w
|| this.common_dimensions[i][1] > page_h) {
//browser size is too small
continue;
}
config.WIDTH = parseInt(this.common_dimensions[i][0]);
config.HEIGHT = parseInt(this.common_dimensions[i][1]);
auto_size = true;
break;
}

if (auto_size == false) {
//screen size is smaller then 400x300
config.WIDTH = parseInt(page_w) - 15;
config.HEIGHT = parseInt(page_h) - 10;
}
if (auto_size == false) {
//screen size is smaller then 400x300
config.WIDTH = parseInt(page_w) - 15;
config.HEIGHT = parseInt(page_h) - 10;
}
}

Expand Down
57 changes: 47 additions & 10 deletions src/js/core/gui/gui-details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,28 @@ import config from './../../config.js';
import Dialog_class from './../../libs/popup.js';
import Text_class from './../../tools/text.js';
import Base_layers_class from "../base-layers";
import Tools_settings_class from './../../modules/tools/settings.js';
import Helper_class from './../../libs/helpers.js';

var template = `
<div class="row">
<span class="trn label">X</span>
<input type="number" id="detail_x" />
<input type="number" id="detail_x" step="any" />
<button class="extra reset" type="button" id="reset_x" title="Reset">Reset</button>
</div>
<div class="row">
<span class="trn label">Y:</span>
<input type="number" id="detail_y" />
<input type="number" id="detail_y" step="any" />
<button class="extra reset" type="button" id="reset_y" title="Reset">Reset</button>
</div>
<div class="row">
<span class="trn label">Width:</span>
<input type="number" id="detail_width" />
<input type="number" id="detail_width" step="any" />
<button class="extra reset" type="button" id="reset_size" title="Reset">Reset</button>
</div>
<div class="row">
<span class="trn label">Height:</span>
<input type="number" id="detail_height" />
<input type="number" id="detail_height" step="any" />
</div>
<hr />
<div class="row">
Expand Down Expand Up @@ -115,6 +117,8 @@ class GUI_details_class {
this.POP = new Dialog_class();
this.Text = new Text_class();
this.Base_layers = new Base_layers_class();
this.Tools_settings = new Tools_settings_class();
this.Helper = new Helper_class();
}

render_main_details() {
Expand Down Expand Up @@ -165,6 +169,8 @@ class GUI_details_class {
render_general(key, events) {
var layer = config.layer;
var _this = this;
var units = this.Tools_settings.get_setting('default_units');
var resolution = this.Tools_settings.get_setting('resolution');

if (layer != undefined) {
var target = document.getElementById('detail_' + key);
Expand All @@ -174,7 +180,18 @@ class GUI_details_class {
target.disabled = true;
}
else {
target.value = Math.round(layer[key]);
var value = layer[key];

if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
//convert units
value = this.Helper.get_user_unit(value, units, resolution);
}
else {
value = Math.round(value);
}

//set
target.value = value;
target.disabled = false;
}
}
Expand All @@ -188,10 +205,16 @@ class GUI_details_class {
}
let focus_value = null;
target.addEventListener('focus', function (e) {
focus_value = parseInt(this.value);
focus_value = parseFloat(this.value);
});
target.addEventListener('blur', function (e) {
var value = parseInt(this.value);
if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
//convert units
var value = _this.Helper.get_internal_unit(this.value, units, resolution);
}
else {
var value = parseInt(this.value);
}
var layer = _this.Base_layers.get_layer(e.target.dataset.layer);
layer[key] = focus_value;
if (focus_value !== value) {
Expand All @@ -205,7 +228,13 @@ class GUI_details_class {
}
});
target.addEventListener('change', function (e) {
var value = parseInt(this.value);
if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
//convert units
var value = _this.Helper.get_internal_unit(this.value, units, resolution);
}
else {
var value = parseInt(this.value);
}

if(this.min != undefined && this.min != '' && value < this.min){
document.getElementById('detail_opacity').value = value;
Expand All @@ -221,9 +250,17 @@ class GUI_details_class {
});
target.addEventListener('keyup', function (e) {
//for edge....
if (e.keyCode != 13)
if (e.keyCode != 13) {
return;
var value = parseInt(this.value);
}

if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
//convert units
var value = _this.Helper.get_internal_unit(this.value, units, resolution);
}
else {
var value = parseInt(this.value);
}

if(this.min != undefined && this.min != '' && value < this.min){
document.getElementById('detail_opacity').value = value;
Expand Down
26 changes: 23 additions & 3 deletions src/js/core/gui/gui-information.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

import config from './../../config.js';
import Base_layers_class from './../base-layers.js';
import Tools_settings_class from './../../modules/tools/settings.js';
import Helper_class from './../../libs/helpers.js';

var template = `
<span class="trn label">Size:</span>
Expand All @@ -21,8 +23,13 @@ class GUI_information_class {

constructor(ctx) {
this.Base_layers = new Base_layers_class();
this.Tools_settings = new Tools_settings_class();
this.Helper = new Helper_class();

this.last_width = null;
this.last_height = null;
this.units = this.Tools_settings.get_setting('default_units');
this.resolution = this.Tools_settings.get_setting('resolution');
}

render_main_information() {
Expand All @@ -47,15 +54,28 @@ class GUI_information_class {
var mouse_x = Math.ceil(global_pos.x);
var mouse_y = Math.ceil(global_pos.y);

mouse_x = _this.Helper.get_user_unit(mouse_x, _this.units, _this.resolution);
mouse_y = _this.Helper.get_user_unit(mouse_y, _this.units, _this.resolution);

target.innerHTML = mouse_x + ', ' + mouse_y;
}, false);
}

show_size() {
if(this.last_width == config.WIDTH && this.last_height == config.HEIGHT)
update_units(){
this.units = this.Tools_settings.get_setting('default_units');
this.resolution = this.Tools_settings.get_setting('resolution');
this.show_size(true);
}

show_size(force) {
if(force == undefined && this.last_width == config.WIDTH && this.last_height == config.HEIGHT) {
return;
}

var width = this.Helper.get_user_unit(config.WIDTH, this.units, this.resolution);
var height = this.Helper.get_user_unit(config.HEIGHT, this.units, this.resolution);

document.getElementById('mouse_info_size').innerHTML = config.WIDTH + ' x ' + config.HEIGHT;
document.getElementById('mouse_info_size').innerHTML = width + ' x ' + height;
this.last_width = config.WIDTH;
this.last_height = config.HEIGHT;
}
Expand Down
55 changes: 54 additions & 1 deletion src/js/libs/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -434,7 +434,8 @@ class Helper_class {
var sign = n < 0 ? "-" : "";
var i = parseInt(n = Math.abs(+n || 0).toFixed(decPlaces)) + "";
var j = (j = i.length) > 3 ? j % 3 : 0;
return sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
var result = sign + (j ? i.substr(0, j) + thouSeparator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thouSeparator) + (decPlaces ? decSeparator + Math.abs(n - i).toFixed(decPlaces).slice(2) : "");
return parseFloat(result);
}

check_input_color_support() {
Expand Down Expand Up @@ -635,5 +636,57 @@ class Helper_class {
ctx.stroke();
}

/**
* converts internal unit (pixel) to user defined
*
* @param data
* @param type
* @param resolution
* @returns {string|number}
*/
get_user_unit(data, type, resolution){
data = parseFloat(data);

if(type == 'pixels'){
//no conversion
return parseInt(data);
}
else if(type == 'inches'){
return this.number_format(data / resolution, 3);
}
else if(type == 'centimeters'){
return this.number_format(data / resolution * 2.54, 3);
}
else if(type == 'millimetres'){
return this.number_format(data / resolution * 25.4, 3);
}
}

/**
* converts user defined unit to internal (pixels)
*
* @param data
* @param type
* @param resolution
* @returns {number}
*/
get_internal_unit(data, type, resolution){
data = parseFloat(data);

if(type == 'pixels'){
//no conversion
return parseInt(data);
}
else if(type == 'inches'){
return Math.ceil(data * resolution);
}
else if(type == 'centimeters'){
return Math.ceil(data * resolution / 2.54);
}
else if(type == 'millimetres'){
return Math.ceil(data * resolution / 25.4);
}
}

}
export default Helper_class;

0 comments on commit f0d3d06

Please sign in to comment.