Fixed colour picker bug

When the user changed a selected colour, the stroke colour became one of the two checkerboard colours.
This commit is contained in:
unsettledgames 2020-06-16 16:04:36 +02:00
parent 970fe56674
commit 8743bd8549
4 changed files with 17 additions and 10 deletions

View File

@ -8,9 +8,11 @@ function clickedColor (e){
if (selectedColor) selectedColor.classList.remove('selected');
//set current color
currentLayer.context.fillStyle = this.style.backgroundColor;
currentGlobalColor = this.style.backgroundColor;
for (let i=1; i<layers.length - 2; i++) {
layers[i].context.fillStyle = this.style.backgroundColor;
}
currentGlobalColor = this.style.backgroundColor;
//make color selected
e.target.parentElement.classList.add('selected');

View File

@ -23,11 +23,13 @@ on('input', 'jscolor-hex-input', function (e) {
//changes all of one color to another after being changed from color picker
function colorChanged(e) {
console.log('colorChanged()');
console.log('colorChanged() to ' + e.target.value);
//get colors
var newColor = hexToRgb(e.target.value);
var oldColor = e.target.oldColor;
newColor.a = 255;
//save undo state
//saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor));
@ -38,6 +40,7 @@ function colorChanged(e) {
//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();
@ -50,11 +53,11 @@ function colorChanged(e) {
//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);
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);
console.log('%cColor is duplicate', colorCheckingStyle);
//show the duplicate color warning
duplicateColorWarning.style.visibility = 'visible';
@ -83,8 +86,11 @@ function colorChanged(e) {
//if this is the current color, update the drawing color
if (e.target.colorElement.parentElement.classList.contains('selected')) {
// console.log('this color is the current color');
context.fillStyle = currentColor;
for (let i=1; i<layers.length - 2; i++) {
layers[i].context.fillStyle = '#'+ rgbToHex(newColor.r,newColor.g,newColor.b);
}
currentGlobalColor = newColor;
}
/* this is wrong and bad
if (settings.switchToChangedColor) {

View File

@ -68,7 +68,6 @@ function endSelection() {
Math.round(lastMovePos[1] / zoom) - imageDataToMove.height / 2);
}
else {
console.log("incollo male");
currentLayer.context.putImageData(
imageDataToMove,
copiedStartX,

View File

@ -17,10 +17,10 @@ function newPixel (width, height, palette) {
canvasSize = currentLayer.canvasSize;
// Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard);
layers.push(currentLayer);
layers.push(VFXLayer);
layers.push(TMPLayer);
layers.push(currentLayer);
layers.push(checkerBoard);
//remove current palette
colors = document.getElementsByClassName('color-button');