mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
034715fac8
Also created nAppLayers to save the number of layers used by the editor (and that the use can't directly with).
102 lines
3.5 KiB
JavaScript
102 lines
3.5 KiB
JavaScript
|
|
|
|
document.getElementById('jscolor-hex-input').addEventListener('change', colorChanged, false);
|
|
|
|
on('input', 'jscolor-hex-input', function (e) {
|
|
|
|
//get hex value
|
|
var newColorHex = e.target.value.toLowerCase();
|
|
|
|
//if the color is not (yet) a valid hex color, exit this function and do nothing
|
|
if (/^[0-9a-f]{6}$/i.test(newColorHex) == false)
|
|
return;
|
|
|
|
//get currently editing color
|
|
var currentlyEditedColor = document.getElementsByClassName('jscolor-active')[0];
|
|
|
|
//update the actual color picker to the inputted color
|
|
currentlyEditedColor.firstChild.jscolor.fromString(newColorHex);
|
|
|
|
colorChanged(e);
|
|
});
|
|
|
|
|
|
//changes all of one color to another after being changed from color picker
|
|
function colorChanged(e) {
|
|
console.log('colorChanged() to ' + e.target.value);
|
|
//get colors
|
|
var newColor = hexToRgb(e.target.value);
|
|
var oldColor = e.target.oldColor;
|
|
|
|
currentPalette.splice(currentPalette.indexOf("#" + newColor), 1);
|
|
|
|
newColor.a = 255;
|
|
|
|
//save undo state
|
|
new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor));
|
|
|
|
//get the currently selected color
|
|
var currentlyEditedColor = document.getElementsByClassName('jscolor-active')[0];
|
|
var duplicateColorWarning = document.getElementById('duplicate-color-warning');
|
|
|
|
//check if selected color already matches another color
|
|
colors = document.getElementsByClassName('color-button');
|
|
console.log(colors);
|
|
var colorCheckingStyle = 'background: #bc60c4; color: white';
|
|
var newColorHex = e.target.value.toLowerCase();
|
|
|
|
//if the color is not a valid hex color, exit this function and do nothing
|
|
if (/^[0-9a-f]{6}$/i.test(newColorHex) == false)
|
|
return;
|
|
|
|
//loop through all colors in palette
|
|
for (var i = 0; i < colors.length; i++) {
|
|
|
|
//if generated color matches this color
|
|
if (newColorHex == colors[i].jscolor.toString()) {
|
|
console.log('%ccolor already exists'+(colors[i].parentElement.classList.contains('jscolor-active')?' (but is the current color)':''), colorCheckingStyle);
|
|
|
|
//if the color isnt the one that has the picker currently open
|
|
if (!colors[i].parentElement.classList.contains('jscolor-active')) {
|
|
console.log('%cColor is duplicate', colorCheckingStyle);
|
|
|
|
//show the duplicate color warning
|
|
duplicateColorWarning.style.visibility = 'visible';
|
|
|
|
//shake warning icon
|
|
duplicateColorWarning.classList.remove('shake');
|
|
void duplicateColorWarning.offsetWidth;
|
|
duplicateColorWarning.classList.add('shake');
|
|
|
|
//exit function without updating color
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
//if the color being edited has a duplicate color warning, remove it
|
|
duplicateColorWarning.style.visibility = 'hidden';
|
|
|
|
currentlyEditedColor.firstChild.jscolor.fromString(newColorHex);
|
|
|
|
replaceAllOfColor(oldColor, newColor);
|
|
|
|
//set new old color to changed color
|
|
e.target.oldColor = newColor;
|
|
currentPalette.push('#' + newColorHex);
|
|
|
|
//if this is the current color, update the drawing color
|
|
if (e.target.colorElement.parentElement.classList.contains('selected')) {
|
|
for (let i=1; i<layers.length - nAppLayers; i++) {
|
|
layers[i].context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
|
|
}
|
|
|
|
currentGlobalColor = newColor;
|
|
}
|
|
/* this is wrong and bad
|
|
if (settings.switchToChangedColor) {
|
|
|
|
}*/
|
|
}
|
|
|