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

Deleted _createColorPalette.js, commented files 

Moved createColorPalette to the ColorModule, removed _onLoad.js and _onbeforeunload.js, commented the code and labelled with REFACTOR the comments that refere to the refactoring.
This commit is contained in:
unsettledgames 2021-07-18 23:17:41 +02:00
parent 7976675132
commit 7c4fb652cf
11 changed files with 138 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
js/ColorModule.js
View File

@ -345,6 +345,92 @@ const ColorModule = (() => {
function resetPalette() {
currentPalette = [];
}
/** Creates the colour palette when starting up the editor from _newPixel.js
*
* @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) {
//remove current palette
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);
}
return {
getCurrentPalette,
@ -352,6 +438,8 @@ const ColorModule = (() => {
deleteColor,
replaceAllOfColor,
addToSimplePalette,
resetPalette
resetPalette,
createColorPalette,
createPaletteFromLayers
}
})();

2
js/FileManager.js
View File

@ -132,7 +132,7 @@ const FileManager = (() => {
//draw the image onto the canvas
currentLayer.context.drawImage(img, 0, 0);
createPaletteFromLayers();
ColorModule.createPaletteFromLayers();
//track google event
if (typeof ga !== 'undefined')

12
js/History.js
View File

@ -1,3 +1,15 @@
/** BUG:
* - Create a new pixel
* - Open a png file
* - Draw with the pencil
* - Hit CTRL+Z
* - RESULT: undo doesn't work, the app can't find the current layer
*
* - RELATED: when opening an LPE file, the app draws on a layer that is below the one in which the
* file is loaded. This is because the data is loaded on new layers, but the first one
* isn't removed and sometimes it could have the same ID of a recently added layer.
*/
/** How the history works
* - undoStates stores the states that can be undone
* - redoStates stores the states that can be redone

4
js/Startup.js
View File

@ -161,7 +161,7 @@ const Startup = (() => {
history.pushState(null, null, '/pixel-editor');
//fill the palette with specified colours
createColorPalette(palettes[selectedPalette].colors,true);
ColorModule.createColorPalette(palettes[selectedPalette].colors);
}
// Otherwise, I just generate 2 semirandom colours
else {
@ -206,7 +206,7 @@ const Startup = (() => {
createdLayer.updateLayerPreview();
if (i == (fileContent['nLayers'] - 1)) {
createPaletteFromLayers();
ColorModule.createPaletteFromLayers();
}
};

90
js/_createColorPalette.js
View File

@ -1,90 +0,0 @@
/** Creates the colour palette when starting up the editor from _newPixel.js
*
* @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);
}

2
js/_editorMode.js
View File

@ -1,3 +1,5 @@
// REFACTOR: move everything in EditorState?
var pixelEditorMode = "Basic";
switchMode(pixelEditorMode);

2
js/_hotkeyListener.js
View File

@ -1,3 +1,5 @@
// REFACTOR: rename Input into Events and have an Input IIFE to take care of hotkeys, cursor ecc?
var spacePressed = false;
/** Just listens to hotkeys and calls the linked functions

0
js/_onLoad.js
View File

7
js/_onbeforeunload.js
View File

@ -1,7 +0,0 @@
//prevent user from leaving page with unsaved data
window.onbeforeunload = function() {
if (documentCreated)
return 'You will lose your pixel if it\'s not saved!';
else return;
};

28
js/_variables.js
View File

@ -1,42 +1,58 @@
//init variables
var canvasSize;
var zoom = 7;
var dragging = false;
var lastMouseClickPos = [0,0];
var documentCreated = false;
var canvasSize; // REFACTOR: Canvas class / getCanvasSize method
var zoom = 7; // REFACTOR: EditorState class/IIFE?
var dragging = false; // REFACTOR: Input IIFE via getter?
var lastMouseClickPos = [0,0]; // REFACTOR: Input IIFE via getter?
var documentCreated = false; // REFACTOR: EditorState
//common elements
// REFACTOR: put brush and eyedropper preview in the respective tool implementations
var brushPreview = document.getElementById("brush-preview");
var eyedropperPreview = document.getElementById("eyedropper-preview");
// REFACTOR: File class?
var canvasView = document.getElementById("canvas-view");
// REFACTOR: find some way to put these in ColorModule?
var colors = document.getElementsByClassName("color-button");
var colorsMenu = document.getElementById("colors-menu");
// main canvas
// REFACTOR: carefully check if it's possible to remove this one
var canvas = document.getElementById('pixel-canvas');
// REFACTOR: find some way to put these in ColorModule?
var currentGlobalColor;
// Layers
// REFACTOR: File class / IIFE?
var layers = [];
// Currently selected layer
// REFACTOR: EditorState / File class?
var currentLayer;
// VFX layer used to draw previews of the selection and things like that
// REFACTOR: File class
var VFXLayer;
// VFX canvas
var VFXCanvas = document.getElementById('vfx-canvas');
// TMP layer
// REFACTOR: File class
var TMPLayer;
// TMP canvas
var TMPCanvas = document.getElementById('tmp-canvas');
// Pixel grid layer
// REFACTOR: File class
var pixelGrid;
// Pixel grid canvas
var pixelGridCanvas;
// REFACTOR: I was thinking that the special layers (pixel grid, checkerboard ecc) could be an extension
// or a variatin of the standard Layer class? I wonder if we can use inheritance or something to
// recycle stuff
// Index of the first layer the user can use in the layers array
// REFACTOR: Consts?
var firstUserLayerIndex = 2;
// Number of layers that are only used by the editor
// REFACTOR: Consts?
var nAppLayers = 3;

13
js/pixel-editor.js
View File

@ -21,7 +21,6 @@
/**functions**/
//=include _tools.js
//=include tools/*.js
//=include _createColorPalette.js
//=include _changeZoom.js
//=include ColorModule.js
//=include _drawLine.js
@ -56,10 +55,6 @@
//=include _ellipse.js
//=include Startup.js
/**onload**/
//=include _onLoad.js
//=include _onbeforeunload.js
/**feature toggles**/
//=include _featureToggles.js
@ -115,4 +110,12 @@ window.onload = function () {
Dialogue.showDialogue('splash', false);
});
}
};
//prevent user from leaving page with unsaved data
window.onbeforeunload = function() {
if (documentCreated)
return 'You will lose your pixel if it\'s not saved!';
else return;
};