Refactor palette loading.
This commit is contained in:
parent
845e384ae0
commit
c08c7f2d0b
|
@ -292,9 +292,9 @@ const FileManager = (() => {
|
||||||
|
|
||||||
return JSON.stringify(dictionary);
|
return JSON.stringify(dictionary);
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadPalette() {
|
function loadPalette() {
|
||||||
if (browsePaletteHolder.files && browsePaletteHolder.files[0]) {
|
if (browsePaletteHolder.files && browsePaletteHolder.files[0]) {
|
||||||
//make sure file is allowed filetype
|
|
||||||
let file = browsePaletteHolder.files[0];
|
let file = browsePaletteHolder.files[0];
|
||||||
var fileContentType =
|
var fileContentType =
|
||||||
file.type
|
file.type
|
||||||
|
@ -302,116 +302,121 @@ const FileManager = (() => {
|
||||||
|
|
||||||
var fileReader = new FileReader();
|
var fileReader = new FileReader();
|
||||||
|
|
||||||
let addPalette = (colors) => {
|
// dispatch on file type
|
||||||
//add to palettes so that it can be loaded when they click okay
|
|
||||||
palettes['Loaded palette'] = {};
|
|
||||||
palettes['Loaded palette'].colors = colors;
|
|
||||||
Util.setText('palette-button', 'Loaded palette');
|
|
||||||
Util.setText('palette-button-splash', 'Loaded palette');
|
|
||||||
Util.toggle('palette-menu-splash');
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (fileContentType) {
|
switch (fileContentType) {
|
||||||
case 'image/png':
|
case 'image/png':
|
||||||
case 'image/gif':
|
case 'image/gif':
|
||||||
//load file
|
fileReader.onload = loadPaletteFromImage;
|
||||||
fileReader.onload = function(e) {
|
fileReader.readAsDataURL(browsePaletteHolder.files[0]);
|
||||||
var img = new Image();
|
|
||||||
img.onload = function() {
|
|
||||||
//draw image onto the temporary canvas
|
|
||||||
var loadPaletteCanvas = document.getElementById('load-palette-canvas-holder');
|
|
||||||
var loadPaletteContext = loadPaletteCanvas.getContext('2d');
|
|
||||||
|
|
||||||
loadPaletteCanvas.width = img.width;
|
|
||||||
loadPaletteCanvas.height = img.height;
|
|
||||||
|
|
||||||
loadPaletteContext.drawImage(img, 0, 0);
|
|
||||||
|
|
||||||
//create array to hold found colors
|
|
||||||
var colorPalette = [];
|
|
||||||
var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data;
|
|
||||||
|
|
||||||
//loop through pixels looking for colors to add to palette
|
|
||||||
for (var i = 0; i < imagePixelData.length; i += 4) {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addPalette(colorPalette);
|
|
||||||
};
|
|
||||||
img.src = e.target.result;
|
|
||||||
};
|
|
||||||
break;
|
break;
|
||||||
case 'gpl':
|
case 'gpl':
|
||||||
fileReader.onload = function() {
|
fileReader.onload = loadPaletteFromGimp;
|
||||||
file.text().then((content) => {
|
fileReader.readAsText(browsePaletteHolder.files[0]);
|
||||||
let colorPalette = content.split(/\r?\n/)
|
|
||||||
// Skip header line
|
|
||||||
.slice(1)
|
|
||||||
.map((line) => line.trim())
|
|
||||||
.filter((line) => line != "")
|
|
||||||
// discard comment lines
|
|
||||||
.filter((line) => !line.startsWith('#'))
|
|
||||||
// discard meta data lines
|
|
||||||
.filter((line) => !line.includes(':'))
|
|
||||||
.map((line) => {
|
|
||||||
let components = line.split(/\s+/);
|
|
||||||
|
|
||||||
if (components.length < 3) {
|
|
||||||
alert(`Invalid color specification ${line}.`);
|
|
||||||
return "#000000"
|
|
||||||
}
|
|
||||||
|
|
||||||
let [r, g, b, ...rest] = components;
|
|
||||||
let color = {
|
|
||||||
r: parseInt(r),
|
|
||||||
g: parseInt(g),
|
|
||||||
b: parseInt(b),
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isNaN(color.r) || isNaN(color.g) || isNaN(color.b)) {
|
|
||||||
alert(`Invalid color specification ${line}.`);
|
|
||||||
return "#000000"
|
|
||||||
}
|
|
||||||
|
|
||||||
return '#' + Color.rgbToHex(color);
|
|
||||||
});
|
|
||||||
|
|
||||||
addPalette(colorPalette);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
break;
|
break;
|
||||||
case 'hex':
|
case 'hex':
|
||||||
fileReader.onload = function() {
|
fileReader.onload = loadPaletteFromHex;
|
||||||
file.text().then((content) => {
|
fileReader.readAsText(browsePaletteHolder.files[0]);
|
||||||
let colorPalette = content.split(/\r?\n/)
|
|
||||||
.map((line) => line.trim())
|
|
||||||
.filter((line) => line != "")
|
|
||||||
// discard comment lines
|
|
||||||
.filter((line) => !line.startsWith('#'))
|
|
||||||
.map((line) => {
|
|
||||||
if (line.match(/[0-9A-Fa-f]{6}/)) {
|
|
||||||
return '#' + line;
|
|
||||||
}
|
|
||||||
alert(`Invalid hex color ${line}.`);
|
|
||||||
return '#000000';
|
|
||||||
});
|
|
||||||
addPalette(colorPalette);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
alert('Only PNG, GIF, .hex and .gpl files are supported at this time.');
|
alert('Only PNG, GIF, .hex and .gpl files are supported at this time.');
|
||||||
}
|
}
|
||||||
fileReader.readAsDataURL(browsePaletteHolder.files[0]);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
browsePaletteHolder.value = null;
|
browsePaletteHolder.value = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function addPalette(colors) {
|
||||||
|
//add to palettes so that it can be loaded when they click okay
|
||||||
|
palettes['Loaded palette'] = {};
|
||||||
|
palettes['Loaded palette'].colors = colors;
|
||||||
|
Util.setText('palette-button', 'Loaded palette');
|
||||||
|
Util.setText('palette-button-splash', 'Loaded palette');
|
||||||
|
Util.toggle('palette-menu-splash');
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPaletteFromImage(e) {
|
||||||
|
var img = new Image();
|
||||||
|
img.onload = function() {
|
||||||
|
//draw image onto the temporary canvas
|
||||||
|
var loadPaletteCanvas = document.getElementById('load-palette-canvas-holder');
|
||||||
|
var loadPaletteContext = loadPaletteCanvas.getContext('2d');
|
||||||
|
|
||||||
|
loadPaletteCanvas.width = img.width;
|
||||||
|
loadPaletteCanvas.height = img.height;
|
||||||
|
|
||||||
|
loadPaletteContext.drawImage(img, 0, 0);
|
||||||
|
|
||||||
|
//create array to hold found colors
|
||||||
|
var colorPalette = [];
|
||||||
|
var imagePixelData = loadPaletteContext.getImageData(0,0,this.width, this.height).data;
|
||||||
|
|
||||||
|
//loop through pixels looking for colors to add to palette
|
||||||
|
for (var i = 0; i < imagePixelData.length; i += 4) {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addPalette(colorPalette);
|
||||||
|
};
|
||||||
|
img.src = e.target.result;
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPaletteFromGimp(e) {
|
||||||
|
let content = e.target.result;
|
||||||
|
let colorPalette = content.split(/\r?\n/)
|
||||||
|
// Skip header line
|
||||||
|
.slice(1)
|
||||||
|
.map((line) => line.trim())
|
||||||
|
.filter((line) => line != "")
|
||||||
|
// discard comment lines
|
||||||
|
.filter((line) => !line.startsWith('#'))
|
||||||
|
// discard meta data lines
|
||||||
|
.filter((line) => !line.includes(':'))
|
||||||
|
.map((line) => {
|
||||||
|
let components = line.split(/\s+/);
|
||||||
|
|
||||||
|
if (components.length < 3) {
|
||||||
|
alert(`Invalid color specification ${line}.`);
|
||||||
|
return "#000000"
|
||||||
|
}
|
||||||
|
|
||||||
|
let [r, g, b, ...rest] = components;
|
||||||
|
let color = {
|
||||||
|
r: parseInt(r),
|
||||||
|
g: parseInt(g),
|
||||||
|
b: parseInt(b),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isNaN(color.r) || isNaN(color.g) || isNaN(color.b)) {
|
||||||
|
alert(`Invalid color specification ${line}.`);
|
||||||
|
return "#000000"
|
||||||
|
}
|
||||||
|
|
||||||
|
return '#' + Color.rgbToHex(color);
|
||||||
|
});
|
||||||
|
addPalette(colorPalette);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadPaletteFromHex(e) {
|
||||||
|
let content = e.target.result;
|
||||||
|
let colorPalette = content.split(/\r?\n/)
|
||||||
|
.map((line) => line.trim())
|
||||||
|
.filter((line) => line != "")
|
||||||
|
// discard comment lines
|
||||||
|
.filter((line) => !line.startsWith('#'))
|
||||||
|
.map((line) => {
|
||||||
|
if (line.match(/[0-9A-Fa-f]{6}/)) {
|
||||||
|
return '#' + line;
|
||||||
|
}
|
||||||
|
alert(`Invalid hex color ${line}.`);
|
||||||
|
return '#000000';
|
||||||
|
});
|
||||||
|
addPalette(colorPalette);
|
||||||
|
}
|
||||||
|
|
||||||
currentImportPivotElement = undefined;
|
currentImportPivotElement = undefined;
|
||||||
currentImportPivotPosition = 'middle';
|
currentImportPivotPosition = 'middle';
|
||||||
isImportWindowInitialized = false;
|
isImportWindowInitialized = false;
|
||||||
|
|
Loading…
Reference in New Issue