hsl update - user should see 0-360, 0-100, 0-100 values, not 0-255

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;

src/js/core/gui/gui-colors.js

@@ -16,26 +16,26 @@ var template = `
 		<div class="main_color_rgb">
 			<div>
 				<span class="trn red">Red:</span>
-				<input id="rgb_r" type="number" />
+				<input id="rgb_r" min="0" max="255" type="number" />
 				<br />				
 				<span class="trn green">Green:</span>
-				<input id="rgb_g" type="number" />
+				<input id="rgb_g" min="0" max="255" type="number" />
 				<br />
 				<span class="trn blue">Blue:</span>
-				<input id="rgb_b" type="number" />
+				<input id="rgb_b" min="0" max="255" type="number" />
 				<br />
 				<span class="trn alpha">Alpha:</span>
-				<input id="rgb_a" type="number" />
+				<input id="rgb_a" min="0" max="255" type="number" />
 			</div>
 			<div>
 				<span class="trn">Hue:</span>
-				<input id="hsl_h" type="number" />
+				<input id="hsl_h" min="0" max="360" type="number" />
 				<br />				
 				<span class="trn">Sat:</span>
-				<input id="hsl_s" type="number" />
+				<input id="hsl_s" min="0" max="100" type="number" />
 				<br />
 				<span class="trn">Lum:</span>
-				<input id="hsl_l" type="number" />
+				<input id="hsl_l" min="0" max="100" type="number" />
 			</div>
 		</div>
 `;
@@ -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]);
 

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) {

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

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