diff --git a/js/Color.js b/js/Color.js index 9cf8c64..2c9e3df 100644 --- a/js/Color.js +++ b/js/Color.js @@ -39,7 +39,7 @@ class Color { //if divisor isn't set, set it to one (so it has no effect) divisor = divisor || 1; //split given hex code into array of 3 values - var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim()); + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim()); return result ? { r: parseInt(result[1], 16)/divisor, @@ -49,17 +49,20 @@ class Color { } static rgbToHex(rgb) { //convert a decimal number to 2-digit hex - function componentToHex (c) { - var hex = c.toString(16); - return hex.length == 1 ? "0" + hex : hex; - } - - return componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b); + let hex = ""; + Object.values(rgb).forEach((color) => { + let colorToString = color.toString(16); + if (colorToString.length === 1) { + colorToString = "0" + colorToString; + } + hex += colorToString; + }); + return hex; } static hslToRgb(hsl) { - var r, g, b; - var h = hsl.h, s = hsl.s, l = hsl.l; + let r, g, b; + let h = hsl.h, s = hsl.s, l = hsl.l; h /= 255; s /= 255; @@ -68,7 +71,7 @@ class Color { if(s == 0){ r = g = b = l; // achromatic }else{ - var hue2rgb = function hue2rgb(p, q, t){ + const hue2rgb = function hue2rgb(p, q, t){ if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; @@ -77,8 +80,8 @@ class Color { return p; } - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; + const q = l < 0.5 ? l * (1 + s) : l + s - l * s; + const p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); @@ -92,18 +95,18 @@ class Color { }; } static rgbToHsl(rgb) { - var r, g, b; + let r, g, b; r = rgb.r; g = rgb.g; b = rgb.b; r /= 255, g /= 255, b /= 255; - var max = Math.max(r, g, b), min = Math.min(r, g, b); - var hue, saturation, luminosity = (max + min) / 2; + const max = Math.max(r, g, b), min = Math.min(r, g, b); + let hue, saturation, luminosity = (max + min) / 2; if(max == min){ hue = saturation = 0; // achromatic }else{ - var d = max - min; + const d = max - min; saturation = luminosity > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: hue = (g - b) / d + (g < b ? 6 : 0); break; @@ -117,18 +120,18 @@ class Color { } static hsvToRgb(hsv) { - var r, g, b, h, s, v; + let r, g, b, h, s, v; h = hsv.h; s = hsv.s; v = hsv.v; h /= 360; s /= 100; v /= 100; - var i = Math.floor(h * 6); - var f = h * 6 - i; - var p = v * (1 - s); - var q = v * (1 - f * s); - var t = v * (1 - (1 - f) * s); + const i = Math.floor(h * 6); + const f = h * 6 - i; + const p = v * (1 - s); + const q = v * (1 - f * s); + const t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: r = v, g = t, b = p; break; diff --git a/js/_loadPalette.js b/js/_loadPalette.js index d7bda53..e7534e1 100644 --- a/js/_loadPalette.js +++ b/js/_loadPalette.js @@ -28,7 +28,8 @@ document.getElementById('load-palette-browse-holder').addEventListener('change', //loop through pixels looking for colors to add to palette for (var i = 0; i < imagePixelData.length; i += 4) { - var color = '#'+rgbToHex(imagePixelData[i],imagePixelData[i + 1],imagePixelData[i + 2]); + const newColor = {r:imagePixelData[i],g:imagePixelData[i + 1],b:imagePixelData[i + 2]}; + var color = '#' + Color.rgbToHex(newColor); if (colorPalette.indexOf(color) == -1) { colorPalette.push(color); } diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 33e6d66..cb019ae 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -90,7 +90,8 @@ window.addEventListener("mouseup", function (mouseEvent) { if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') { var cursorLocation = getCursorPosition(mouseEvent); var selectedColor = getEyedropperColor(cursorLocation); - var newColor = rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]); + const rgbColor = {r:selectedColor[0],g:selectedColor[1],b:selectedColor[2]}; + var newColor = Color.rgbToHex(rgbColor); currentGlobalColor = "#" + newColor; @@ -306,15 +307,17 @@ function draw (mouseEvent) { } } else if (currentTool.name == 'eyedropper' && dragging && mouseEvent.target.className == 'drawingCanvas') { - let selectedColor = getEyedropperColor(cursorLocation); - eyedropperPreview.style.borderColor = '#'+rgbToHex(selectedColor[0],selectedColor[1],selectedColor[2]); + const selectedColor = getEyedropperColor(cursorLocation); + const rgbColor = {r:selectedColor[0],g:selectedColor[1],b:selectedColor[2]}; + + eyedropperPreview.style.borderColor = '#' + Color.rgbToHex(rgbColor); eyedropperPreview.style.display = 'block'; eyedropperPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - 30 + 'px'; eyedropperPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - 30 + 'px'; - var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]); + const colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2]); //for the darkest 50% of colors, change the eyedropper preview to dark mode if (colorLightness>127) eyedropperPreview.classList.remove('dark'); diff --git a/js/_tools.js b/js/_tools.js index a6d374d..5ea2d0c 100644 --- a/js/_tools.js +++ b/js/_tools.js @@ -76,11 +76,6 @@ class Tool { brushPreview.style.width = this.currentBrushSize * zoom + 'px'; brushPreview.style.height = this.currentBrushSize * zoom + 'px'; } - - //show / hide eyedropper color preview - if (this.eyedropperPreview) eyedropperPreview.style.display = 'block'; - else eyedropperPreview.style.display = 'none'; - //moveSelection if (currentTool.name == 'moveselection') { if (cursorInSelectedArea()) {