mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Fixed advanced colour picker bugs

Browse Source
This commit is contained in:
unsettledgames
2021-07-11 23:27:48 +02:00
parent ef2630b876
commit 6072528ad2
2 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
js/Color.js
View File

@ -48,25 +48,21 @@ class Color {
} : null; } : null;
} }
static rgbToHex(rgb) { static rgbToHex(rgb) {
//convert a decimal number to 2-digit hex function componentToHex (c) {
let hex = ""; var hex = Math.round(c).toString(16);
Object.values(rgb).forEach((color) => { return hex.length == 1 ? "0" + hex : hex.substring(0, 2);
let colorToString = color.toString(16); }
if (colorToString.length === 1) {
colorToString = "0" + colorToString; return componentToHex(rgb.r) + componentToHex(rgb.g) + componentToHex(rgb.b);
}
hex += colorToString;
});
return hex;
} }
static hslToRgb(hsl) { static hslToRgb(hsl) {
let r, g, b; let r, g, b;
let h = hsl.h, s = hsl.s, l = hsl.l; let h = hsl.h, s = hsl.s, l = hsl.l;
h /= 255; h /= 360;
s /= 255; s /= 100;
l /= 255; l /= 100;
if(s == 0){ if(s == 0){
r = g = b = l; // achromatic r = g = b = l; // achromatic
@ -116,7 +112,7 @@ class Color {
hue /= 6; hue /= 6;
} }
return {h:hue, s:saturation, l:luminosity}; return {h:hue*360, s:saturation*100, l:luminosity*100};
} }
static hsvToRgb(hsv) { static hsvToRgb(hsv) {

22
js/_colorPicker.js
View File

@ -419,10 +419,10 @@ function getCursorPosMinipicker(e) {
// Moves the cursor // Moves the cursor
function updatePickerByHex(hex) { function updatePickerByHex(hex) {
let hsv = new Color("hex", hex).hsv; let hsv = new Color("hex", hex).hsv;
let xPos = miniPickerCanvas.width * hsv.h - 8; let xPos = miniPickerCanvas.width * hsv.h/360 - 8;
let yPos = miniPickerCanvas.height * hsv.s + 8; let yPos = miniPickerCanvas.height * hsv.s/100 + 8;
miniPickerSlider.value = hsv.v * 100; miniPickerSlider.value = hsv.v;
currPickerIconPos[0][0] = xPos; currPickerIconPos[0][0] = xPos;
currPickerIconPos[0][1] = miniPickerCanvas.height - yPos; currPickerIconPos[0][1] = miniPickerCanvas.height - yPos;
@ -445,14 +445,13 @@ function updatePickerByHex(hex) {
// Fired when the value of the minislider changes: updates the spectrum gradient and the hex colour // Fired when the value of the minislider changes: updates the spectrum gradient and the hex colour
function miniSliderInput(event) { function miniSliderInput(event) {
let currColor = new Color("hex", getMiniPickerColour()); let currColor = new Color("hex", getMiniPickerColour());
let newHex = currColor.hex;
let newHsv = currColor.hsv; let newHsv = currColor.hsv;
let rgb; let newHex;
// Adding slider value to value // Adding slider value to value
newHsv.v = parseInt(event.target.value); newHsv = new Color("hsv", newHsv.h, newHsv.s, parseInt(event.target.value));
// Updating hex // Updating hex
newHex = Color.rgbToHex(Color.hsvToRgb(newHsv)); newHex = newHsv.hex;
colourValue.value = newHex; colourValue.value = newHex;
@ -465,6 +464,7 @@ function updateMiniPickerColour() {
let hex = getMiniPickerColour(); let hex = getMiniPickerColour();
activePickerIcon.style.backgroundColor = '#' + hex; activePickerIcon.style.backgroundColor = '#' + hex;
console.log("Mini picker col: #" + hex);
// Update hex and sliders based on hex // Update hex and sliders based on hex
colourValue.value = '#' + hex; colourValue.value = '#' + hex;
@ -482,7 +482,7 @@ function getMiniPickerColour() {
pickedColour = miniPickerCanvas.getContext('2d').getImageData(currPickerIconPos[0][0] + 8, pickedColour = miniPickerCanvas.getContext('2d').getImageData(currPickerIconPos[0][0] + 8,
currPickerIconPos[0][1] + 8, 1, 1).data; currPickerIconPos[0][1] + 8, 1, 1).data;
return new Color("rgb", pickedColour[0], pickedColour[1], pickedColour[2]).hex; return new Color("rgb", Math.round(pickedColour[0]), Math.round(pickedColour[1]), Math.round(pickedColour[2])).hex;
} }
// Update the background gradient of the slider in the minipicker // Update the background gradient of the slider in the minipicker
@ -501,7 +501,7 @@ function updateMiniSlider(hex) {
function updateMiniPickerSpectrum() { function updateMiniPickerSpectrum() {
let ctx = miniPickerCanvas.getContext('2d'); let ctx = miniPickerCanvas.getContext('2d');
let hsv = new Color("hex", colourValue.value).hsv; let hsv = new Color("hex", colourValue.value).hsv;
let tmp; console.log("Spectrum hex: " + new Color("hex", colourValue.value).hex);
let white = new Color("hsv", hsv.h, 0, parseInt(miniPickerSlider.value)).rgb; let white = new Color("hsv", hsv.h, 0, parseInt(miniPickerSlider.value)).rgb;
ctx.clearRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height); ctx.clearRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height);
@ -633,10 +633,10 @@ function updateOtherIcons() {
newColourHexes[0] = newColourHsv.hex; newColourHexes[0] = newColourHsv.hex;
// Second colour // Second colour
newColourHsv.h = new Color("hsv", ((currentColourHsv.h + 320) % 360), currentColourHsv.s, currentColourHsv.v); newColourHsv = new Color("hsv", ((currentColourHsv.h + 320) % 360), currentColourHsv.s, currentColourHsv.v);
currPickerIconPos[2][0] = miniPickerCanvas.width * newColourHsv.hsv.h/360 - 8; currPickerIconPos[2][0] = miniPickerCanvas.width * newColourHsv.hsv.h/360 - 8;
currPickerIconPos[2][1] = miniPickerCanvas.height - (miniPickerCanvas.height * newColourHsv.s + 8); currPickerIconPos[2][1] = miniPickerCanvas.height - (miniPickerCanvas.height * newColourHsv.hsv.s/100 + 8);
newColourHexes[1] = newColourHsv.hex; newColourHexes[1] = newColourHsv.hex;
break; break;