From 3e74aafb95acdb3507c0ff97446b4b2c63cad9b6 Mon Sep 17 00:00:00 2001 From: Vilius Date: Mon, 23 Jul 2018 22:52:14 +0300 Subject: [PATCH] hsl update - user should see 0-360, 0-100, 0-100 values, not 0-255 --- src/css/layout.css | 2 +- src/js/core/gui/gui-colors.js | 42 +++++++++++++++++---------- src/js/libs/helpers.js | 21 +++++--------- src/js/modules/tools/replace_color.js | 14 ++++----- src/js/tools/blur.js | 2 +- 5 files changed, 42 insertions(+), 39 deletions(-) diff --git a/src/css/layout.css b/src/css/layout.css index 9065c957..4176c6d6 100644 --- a/src/css/layout.css +++ b/src/css/layout.css @@ -286,7 +286,7 @@ .canvas_preview_wrapper{ position:relative; height:100px; - margin-bottom:10px; + margin: 5px 5px 10px 5px; } .canvas_preview_details{ padding: 0 5px; diff --git a/src/js/core/gui/gui-colors.js b/src/js/core/gui/gui-colors.js index 3eccf205..bfcc8d71 100644 --- a/src/js/core/gui/gui-colors.js +++ b/src/js/core/gui/gui-colors.js @@ -16,26 +16,26 @@ var template = `
Red: - +
Green: - +
Blue: - +
Alpha: - +
Hue: - +
Sat: - +
Lum: - +
`; @@ -89,13 +89,13 @@ class GUI_colors_class { document.getElementById("rgb_b").value = colors.b; document.getElementById("rgb_a").value = config.ALPHA; - var hsl = Helper.rgbToHsl(colors.r, colors.g, colors.b); + var hsl = Helper.rgbToHsl(colors.r, colors.g, colors.b, false); if (ignore_id !== 'hsl_h') - document.getElementById("hsl_h").value = hsl.h; + document.getElementById("hsl_h").value = Math.round(hsl.h * 360); if (ignore_id !== 'hsl_s') - document.getElementById("hsl_s").value = hsl.s; + document.getElementById("hsl_s").value = Math.round(hsl.s * 100); if (ignore_id !== 'hsl_l') - document.getElementById("hsl_l").value = hsl.l; + document.getElementById("hsl_l").value = Math.round(hsl.l * 100); } set_color(object) { @@ -161,14 +161,24 @@ class GUI_colors_class { object.value = 0; return false; } - if (value > 255) { - object.value = 255; + + var max = 100; + if(object.id == 'hsl_h'){ + max = 360; + } + + if (value > max) { + object.value = max; + alertify.error('Error: bad hsl value.'); + } + if (value < 0) { + object.value = 0; alertify.error('Error: bad hsl value.'); } var rgb = Helper.hslToRgb( - document.getElementById("hsl_h").value / 255, - document.getElementById("hsl_s").value / 255, - document.getElementById("hsl_l").value / 255 + document.getElementById("hsl_h").value / 360, + document.getElementById("hsl_s").value / 100, + document.getElementById("hsl_l").value / 100 ); config.COLOR = Helper.rgbToHex(rgb[0], rgb[1], rgb[2]); diff --git a/src/js/libs/helpers.js b/src/js/libs/helpers.js index 50487673..4b604b1a 100644 --- a/src/js/libs/helpers.js +++ b/src/js/libs/helpers.js @@ -275,10 +275,9 @@ class Helper_class { } /** - * Converts an HSL color value to RGB. Conversion formula - * adapted from http://en.wikipedia.org/wiki/HSL_color_space. - * Assumes h, s, and l are contained in the set [0, 1] and - * returns r, g, and b in the set [0, 255]. + * Converts an HSL color value to RGB. + * Assumes h, s, and l are contained in the set [0, 1] + * Returns r, g, and b in the set [0, 255]. * * @param {number} h The hue * @param {number} s The saturation @@ -317,10 +316,8 @@ class Helper_class { } /** - * Converts an RGB color value to HSL. Conversion formula - * adapted from http://en.wikipedia.org/wiki/HSL_color_space. - * Assumes r, g, and b are contained in the set [0, 255] and - * returns h, s, and l. + * Converts an RGB color value to HSL. Values are in range 0-1. + * But real ranges are 0-360, 0-100%, 0-100% * * @param {number} r red color value * @param {number} g green color value @@ -353,12 +350,8 @@ class Helper_class { } h /= 6; } - - return { - h: Math.round(h * 255), - s: Math.round(s * 255), - l: Math.round(l * 255), - }; + + return {h, s, l}; } ucfirst(string) { diff --git a/src/js/modules/tools/replace_color.js b/src/js/modules/tools/replace_color.js index a93f6dd0..a3eb61ac 100644 --- a/src/js/modules/tools/replace_color.js +++ b/src/js/modules/tools/replace_color.js @@ -67,7 +67,7 @@ class Tools_replaceColor_class { var imgData = data.data; var target_rgb = this.Helper.hex2rgb(target); var target_hsl = this.Helper.rgbToHsl(target_rgb.r, target_rgb.g, target_rgb.b); - var target_normalized = this.Helper.hslToRgb(target_hsl.h / 255, target_hsl.s / 255, 0.5); + var target_normalized = this.Helper.hslToRgb(target_hsl.h, target_hsl.s, 0.5); var replacement_rgb = this.Helper.hex2rgb(replacement); var replacement_hsl = this.Helper.rgbToHsl(replacement_rgb.r, replacement_rgb.g, replacement_rgb.b); @@ -94,9 +94,9 @@ class Tools_replaceColor_class { } else { //advanced replace using HSL - + var hsl = this.Helper.rgbToHsl(imgData[i], imgData[i + 1], imgData[i + 2]); - var normalized = this.Helper.hslToRgb(hsl.h / 255, hsl.s / 255, 0.5); + var normalized = this.Helper.hslToRgb(hsl.h, hsl.s, 0.5); var diff = (Math.abs(normalized[0] - target_normalized[0]) + Math.abs(normalized[1] - target_normalized[1]) + Math.abs(normalized[2] - target_normalized[2])) / 3; @@ -105,10 +105,10 @@ class Tools_replaceColor_class { //change to new color with existing luminance var normalized_final = this.Helper.hslToRgb( - replacement_hsl.h / 255, - replacement_hsl.s / 255, - hsl.l * (replacement_hsl.l) / 120 / 255 - ); + replacement_hsl.h, + replacement_hsl.s, + hsl.l * (replacement_hsl.l) + ); imgData[i] = normalized_final[0]; imgData[i + 1] = normalized_final[1]; diff --git a/src/js/tools/blur.js b/src/js/tools/blur.js index 3d4f81d4..138d17ee 100644 --- a/src/js/tools/blur.js +++ b/src/js/tools/blur.js @@ -32,7 +32,7 @@ class Blur_class extends Base_tools_class { _this.mousemove(event); //mouse cursor - var mouse = _this.get_mouse_info(e); + var mouse = _this.get_mouse_info(event); var params = _this.getParams(); _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle'); }