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 Color Picker preview not showing

Browse Source
This commit is contained in:
Leamsi Escribano 2021-07-11 11:32:49 -04:00
parent 1daeb81ef4
commit 84f6493bf6
4 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
js/Color.js
View File

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

3
js/_loadPalette.js
View File

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

11
js/_mouseEvents.js
View File

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

5
js/_tools.js
View File

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