mirror
/
pixel-editor
mirror of https://github.com/lospec/pixel-editor.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Removed _loadPalette.js and moved its logic to FileManager.js

This commit is contained in:
unsettledgames 2021-07-23 16:35:42 +02:00
parent e4415a5358
commit 8ca148e34c
3 changed files with 54 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
js/FileManager.js
View File

@ -1,8 +1,13 @@
// TODO: the button to load a palette disappeared for some reason, should add it back
const FileManager = (() => {
// Binding the browse holder change event to file loading
const browseHolder = document.getElementById('open-image-browse-holder');
const browsePaletteHolder = document.getElementById('load-palette-browse-holder');
Events.on('change', browseHolder, loadFile);
Events.on('change', browsePaletteHolder, loadPalette);
function saveProject() {
//create name
@ -188,6 +193,55 @@ const FileManager = (() => {
return JSON.stringify(dictionary);
}
function loadPalette() {
if (this.files && this.files[0]) {
//make sure file is allowed filetype
var fileContentType = this.files[0].type;
if (fileContentType == 'image/png' || fileContentType == 'image/gif') {
//load file
var fileReader = new FileReader();
fileReader.onload = function(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);
}
}
//add to palettes so that it can be loaded when they click okay
palettes['Loaded palette'] = {};
palettes['Loaded palette'].colors = colorPalette;
Util.setText('palette-button', 'Loaded palette');
Util.setText('palette-button-splash', 'Loaded palette');
toggle('palette-menu-splash');
};
img.src = e.target.result;
};
fileReader.readAsDataURL(this.files[0]);
}
else alert('Only PNG and GIF files are supported at this time.');
}
}
return {
saveProject,
exportProject,

52
js/_loadPalette.js
View File

@ -1,52 +0,0 @@
//this is called when a user picks a file after selecting "load palette" from the new pixel dialogue
// REFACTOR: ColorModule? Or maybe move it to _palettes and give a name to that IIFE
// TODO: load palette from .lpe file
document.getElementById('load-palette-browse-holder').addEventListener('change', function () {
if (this.files && this.files[0]) {
//make sure file is allowed filetype
var fileContentType = this.files[0].type;
if (fileContentType == 'image/png' || fileContentType == 'image/gif') {
//load file
var fileReader = new FileReader();
fileReader.onload = function(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);
}
}
//add to palettes so that it can be loaded when they click okay
palettes['Loaded palette'] = {};
palettes['Loaded palette'].colors = colorPalette;
Util.setText('palette-button', 'Loaded palette');
Util.setText('palette-button-splash', 'Loaded palette');
toggle('palette-menu-splash');
};
img.src = e.target.result;
};
fileReader.readAsDataURL(this.files[0]);
}
else alert('Only PNG and GIF files are supported at this time.');
}
});

3
js/pixel-editor.js
View File

@ -39,9 +39,6 @@
//=include _paletteBlock.js
//=include SplashPage.js
/**load file**/
//=include _loadPalette.js
/**buttons**/
//=include _toolButtons.js
//=include FileManager.js