90 lines
3.2 KiB
JavaScript
90 lines
3.2 KiB
JavaScript
|
|
/** Creates the colour palette
|
|
*
|
|
* @param {*} paletteColors The colours of the palette
|
|
* @param {*} deletePreviousPalette Tells if the app should delete the previous palette or not
|
|
* (used when opening a file, for example)
|
|
*/
|
|
function createColorPalette(paletteColors, deletePreviousPalette = true) {
|
|
//remove current palette
|
|
if (deletePreviousPalette) {
|
|
colors = document.getElementsByClassName('color-button');
|
|
while (colors.length > 0) {
|
|
colors[0].parentElement.remove();
|
|
}
|
|
}
|
|
|
|
var lightestColor = new Color("hex", '#000000');
|
|
var darkestColor = new Color("hex", '#ffffff');
|
|
|
|
// Adding all the colours in the array
|
|
for (var i = 0; i < paletteColors.length; i++) {
|
|
var newColor = new Color("hex", paletteColors[i]);
|
|
var newColorElement = ColorModule.addColor(newColor.hex);
|
|
|
|
var newColRgb = newColor.rgb;
|
|
|
|
var lightestColorRgb = lightestColor.rgb;
|
|
if (newColRgb.r + newColRgb.g + newColRgb.b > lightestColorRgb.r + lightestColorRgb.g + lightestColorRgb.b)
|
|
lightestColor = newColor;
|
|
|
|
var darkestColorRgb = darkestColor.rgb;
|
|
if (newColRgb.r + newColRgb.g + newColRgb.b < darkestColorRgb.r + darkestColorRgb.g + darkestColorRgb.b) {
|
|
|
|
//remove current color selection
|
|
var selectedColor = document.querySelector('#colors-menu li.selected');
|
|
if (selectedColor) selectedColor.classList.remove('selected');
|
|
|
|
//set as current color
|
|
newColorElement.classList.add('selected');
|
|
darkestColor = newColor;
|
|
}
|
|
}
|
|
|
|
//prepend # if not present
|
|
if (!darkestColor.hex.includes('#')) darkestColor.hex = '#' + darkestColor.hex;
|
|
|
|
//set as current color
|
|
currentLayer.context.fillStyle = darkestColor.hex;
|
|
}
|
|
|
|
/** Creates the palette with the colours used in all the layers
|
|
*
|
|
*/
|
|
function createPaletteFromLayers() {
|
|
let colors = {};
|
|
|
|
for (let i=0; i<layers.length; i++) {
|
|
if (layers[i].menuEntry != null) {
|
|
let imageData = layers[i].context.getImageData(0, 0, layers[i].canvasSize[0], layers[i].canvasSize[1]).data;
|
|
let dataLength = imageData.length;
|
|
|
|
for (let j=0; j<dataLength; j += 4) {
|
|
if (!isPixelEmpty(imageData[j])) {
|
|
let color = imageData[j]+','+imageData[j + 1]+','+imageData[j + 2];
|
|
|
|
if (!colors[color]) {
|
|
colors[color] = new Color("rgb", imageData[j], imageData[j + 1], imageData[j + 2]).rgb;
|
|
|
|
//don't allow more than 256 colors to be added
|
|
if (Object.keys(colors).length >= settings.maxColorsOnImportedImage) {
|
|
alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.');
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//create array out of colors object
|
|
let colorPaletteArray = [];
|
|
for (let color in colors) {
|
|
if (colors.hasOwnProperty(color)) {
|
|
colorPaletteArray.push('#'+Color.rgbToHex(colors[color]));
|
|
}
|
|
}
|
|
|
|
//create palette from colors array
|
|
createColorPalette(colorPaletteArray, true);
|
|
} |