2019-03-27 02:20:54 +03:00
|
|
|
function newPixel (width, height, palette) {
|
2020-04-04 10:41:56 +03:00
|
|
|
// Setting the current layer
|
2020-03-04 17:46:25 +03:00
|
|
|
currentLayer = new Layer(width, height, canvas);
|
2019-03-31 17:32:49 +03:00
|
|
|
currentLayer.initialize();
|
2019-03-27 02:20:54 +03:00
|
|
|
|
2020-03-04 16:36:40 +03:00
|
|
|
// Adding the checkerboard behind it
|
2020-03-04 17:46:25 +03:00
|
|
|
checkerBoard = new Layer(width, height, checkerBoardCanvas);
|
2019-03-31 17:32:49 +03:00
|
|
|
checkerBoard.initialize();
|
|
|
|
|
2020-03-04 16:36:40 +03:00
|
|
|
// Creating the vfx layer on top of everything
|
2020-03-04 17:46:25 +03:00
|
|
|
VFXLayer = new Layer(width, height, VFXCanvas);
|
2020-03-04 16:36:40 +03:00
|
|
|
VFXLayer.initialize();
|
|
|
|
|
2020-03-04 21:46:19 +03:00
|
|
|
TMPLayer = new Layer(width, height, TMPCanvas);
|
|
|
|
TMPLayer.initialize();
|
|
|
|
|
2020-04-04 10:41:56 +03:00
|
|
|
canvasSize = currentLayer.canvasSize;
|
|
|
|
|
|
|
|
// Adding the first layer and the checkerboard to the list of layers
|
|
|
|
layers.push(VFXLayer);
|
|
|
|
layers.push(TMPLayer);
|
|
|
|
layers.push(currentLayer);
|
|
|
|
layers.push(checkerBoard);
|
|
|
|
|
|
|
|
//remove current palette
|
|
|
|
colors = document.getElementsByClassName('color-button');
|
|
|
|
while (colors.length > 0) {
|
|
|
|
colors[0].parentElement.remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
//add colors from selected palette
|
|
|
|
var selectedPalette = getText('palette-button');
|
|
|
|
if (selectedPalette != 'Choose a palette...') {
|
|
|
|
|
|
|
|
//if this palette isnt the one specified in the url, then reset the url
|
|
|
|
if (!palettes[selectedPalette].specified)
|
|
|
|
history.pushState(null, null, '/pixel-editor/app');
|
|
|
|
|
|
|
|
//fill the palette with specified palette
|
|
|
|
createColorPalette(palettes[selectedPalette].colors,true);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
//this wasn't a specified palette, so reset the url
|
|
|
|
history.pushState(null, null, '/pixel-editor/app');
|
|
|
|
|
|
|
|
//generate default colors
|
|
|
|
var fg = hslToRgb(Math.floor(Math.random()*255), 230,70);
|
|
|
|
var bg = hslToRgb(Math.floor(Math.random()*255), 230,170);
|
|
|
|
|
|
|
|
//convert colors to hex
|
|
|
|
var defaultForegroundColor = rgbToHex(fg.r,fg.g,fg.b);
|
|
|
|
var defaultBackgroundColor = rgbToHex(bg.r,bg.g,bg.b);
|
|
|
|
|
|
|
|
//add colors to paletee
|
|
|
|
addColor(defaultForegroundColor).classList.add('selected');
|
|
|
|
addColor(defaultBackgroundColor);
|
|
|
|
|
|
|
|
//fill background of canvas with bg color
|
|
|
|
fillCheckerboard();
|
|
|
|
/*
|
|
|
|
currentLayer.context.fillStyle = '#'+defaultBackgroundColor;
|
|
|
|
currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
|
|
|
|
|
|
|
|
console.log('#'+defaultBackgroundColor)
|
|
|
|
*/
|
|
|
|
|
|
|
|
//set current drawing color as foreground color
|
|
|
|
currentLayer.context.fillStyle = '#'+defaultForegroundColor;
|
|
|
|
currentGlobalColor = '#' + defaultForegroundColor;
|
|
|
|
selectedPalette = 'none';
|
|
|
|
}
|
|
|
|
|
|
|
|
//reset undo and redo states
|
|
|
|
undoStates = [];
|
|
|
|
redoStates = [];
|
|
|
|
|
|
|
|
closeDialogue();
|
|
|
|
updateCursor();
|
|
|
|
|
|
|
|
document.getElementById('save-as-button').classList.remove('disabled');
|
|
|
|
documentCreated = true;
|
|
|
|
|
|
|
|
}
|