238 lines
8.7 KiB
JavaScript
238 lines
8.7 KiB
JavaScript
const Startup = (() => {
|
|
let splashPostfix = '';
|
|
|
|
Events.on('click', 'create-button', create, false);
|
|
Events.on('click', 'create-button-splash', create, true);
|
|
|
|
function create(isSplash) {
|
|
// If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
|
|
if (isSplash)
|
|
splashPostfix = '-splash';
|
|
else
|
|
splashPostfix = '';
|
|
|
|
var width = Util.getValue('size-width' + splashPostfix);
|
|
var height = Util.getValue('size-height' + splashPostfix);
|
|
var selectedPalette = Util.getText('palette-button' + splashPostfix);
|
|
|
|
newPixel(width, height);
|
|
resetInput();
|
|
|
|
//track google event
|
|
if (typeof ga !== 'undefined')
|
|
ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
|
|
}
|
|
|
|
/** Creates a new, empty file
|
|
*
|
|
* @param {*} width Start width of the canvas
|
|
* @param {*} height Start height of the canvas
|
|
* @param {*} fileContent If fileContent != null, then the newPixel is being called from the open menu
|
|
*/
|
|
function newPixel (width, height, fileContent = null) {
|
|
// The palette is empty, at the beginning
|
|
ColorModule.resetPalette();
|
|
|
|
initLayers(width, height);
|
|
initPalette();
|
|
|
|
// Closing the "New Pixel dialogue"
|
|
Dialogue.closeDialogue();
|
|
// Updating the cursor of the current tool
|
|
ToolManager.currentTool().updateCursor();
|
|
|
|
// The user is now able to export the Pixel
|
|
document.getElementById('export-button').classList.remove('disabled');
|
|
|
|
// Now, if I opened an LPE file
|
|
if (fileContent != null) {
|
|
loadFromLPE(fileContent);
|
|
// Deleting the default layer
|
|
LayerList.deleteLayer(false);
|
|
// Selecting the new one
|
|
currFile.layers[1].selectLayer();
|
|
}
|
|
|
|
EditorState.switchMode(EditorState.getCurrentMode());
|
|
// This is not the first Pixel anymore
|
|
EditorState.created();
|
|
}
|
|
|
|
function initLayers(width, height) {
|
|
// Setting the general canvasSize
|
|
currFile.canvasSize = [width, height];
|
|
|
|
// If this is the first pixel I'm creating since the app has started
|
|
if (EditorState.firstPixel()) {
|
|
// Creating the first layer
|
|
currFile.currentLayer = new Layer(width, height, 'pixel-canvas', "");
|
|
currFile.currentLayer.canvas.style.zIndex = 2;
|
|
}
|
|
else {
|
|
// Deleting all the extra layers and canvases, leaving only one
|
|
let nLayers = currFile.layers.length;
|
|
for (let i=2; i < currFile.layers.length - nAppLayers; i++) {
|
|
let currentEntry = currFile.layers[i].menuEntry;
|
|
let associatedLayer;
|
|
|
|
if (currentEntry != null) {
|
|
// Getting the associated layer
|
|
associatedLayer = LayerList.getLayerByID(currentEntry.id);
|
|
|
|
// Deleting its canvas
|
|
associatedLayer.canvas.remove();
|
|
|
|
// Adding the id to the unused ones
|
|
Layer.unusedIDs.push(currentEntry.id);
|
|
// Removing the entry from the menu
|
|
currentEntry.remove();
|
|
}
|
|
}
|
|
|
|
// Removing the old layers from the list
|
|
for (let i=2; i<nLayers - nAppLayers; i++) {
|
|
currFile.layers.splice(2, 1);
|
|
}
|
|
|
|
// Setting up the current layer
|
|
currFile.layers[1] = new Layer(width, height, currFile.layers[1].canvas, currFile.layers[1].menuEntry);
|
|
currFile.currentLayer = currFile.layers[1];
|
|
currFile.currentLayer.canvas.style.zIndex = 2;
|
|
}
|
|
|
|
// Adding the checkerboard behind it
|
|
currFile.checkerBoard = new Checkerboard(width, height, null);
|
|
// Pixel grid
|
|
console.log("CREATED GRID");
|
|
currFile.pixelGrid = new PixelGrid(width, height, "pixel-grid");
|
|
|
|
// Creating the vfx layer on top of everything
|
|
currFile.VFXLayer = new Layer(width, height, 'vfx-canvas');
|
|
// Tmp layer to draw previews on
|
|
currFile.TMPLayer = new Layer(width, height, 'tmp-canvas');
|
|
|
|
if (EditorState.firstPixel()) {
|
|
// Adding the first layer and the checkerboard to the list of layers
|
|
currFile.layers.push(currFile.checkerBoard);
|
|
currFile.layers.push(currFile.currentLayer);
|
|
currFile.layers.push(currFile.TMPLayer);
|
|
currFile.layers.push(currFile.pixelGrid);
|
|
currFile.layers.push(currFile.VFXLayer);
|
|
}
|
|
}
|
|
|
|
function initPalette() {
|
|
// Get selected palette
|
|
let selectedPalette = Util.getText('palette-button' + splashPostfix);
|
|
|
|
//remove current palette
|
|
let colors = document.getElementsByClassName('color-button');
|
|
while (colors.length > 0) {
|
|
colors[0].parentElement.remove();
|
|
}
|
|
|
|
// If the user selected a palette and isn't opening a file, I load the selected palette
|
|
if (selectedPalette != 'Choose a palette...') {
|
|
if (selectedPalette === 'Loaded palette') {
|
|
ColorModule.createColorPalette(palettes['Loaded palette'].colors);
|
|
}
|
|
else {
|
|
//if this palette isnt the one specified in the url, then reset the url
|
|
if (!palettes[selectedPalette].specified)
|
|
history.pushState(null, null, '/pixel-editor');
|
|
|
|
//fill the palette with specified colours
|
|
ColorModule.createColorPalette(palettes[selectedPalette].colors);
|
|
}
|
|
}
|
|
// Otherwise, I just generate 2 semirandom colours
|
|
else {
|
|
//this wasn't a specified palette, so reset the url
|
|
history.pushState(null, null, '/pixel-editor');
|
|
|
|
//generate default colors
|
|
var fg = new Color("hsv", Math.floor(Math.random()*360), 50, 50).rgb;
|
|
var bg = new Color("hsv", Math.floor(Math.random()*360), 80, 100).rgb;
|
|
|
|
//convert colors to hex
|
|
var defaultForegroundColor = Color.rgbToHex(fg);
|
|
var defaultBackgroundColor = Color.rgbToHex(bg);
|
|
|
|
//add colors to palette
|
|
ColorModule.addColor(defaultForegroundColor).classList.add('selected');
|
|
ColorModule.addColor(defaultBackgroundColor);
|
|
|
|
//set current drawing color as foreground color
|
|
ColorModule.updateCurrentColor('#'+defaultForegroundColor);
|
|
selectedPalette = 'none';
|
|
}
|
|
}
|
|
|
|
function loadFromLPE(fileContent) {
|
|
// I add every layer the file had in it
|
|
for (let i=0; i<fileContent['nLayers']; i++) {
|
|
let layerData = fileContent['layer' + i];
|
|
let layerImage = fileContent['layer' + i + 'ImageData'];
|
|
|
|
if (layerData != null) {
|
|
// Setting id
|
|
let createdLayer = LayerList.addLayer(layerData.id, false);
|
|
// Setting name
|
|
createdLayer.menuEntry.getElementsByTagName("p")[0].innerHTML = layerData.name;
|
|
|
|
// Adding the image (I can do that because they're sorted by increasing z-index)
|
|
let img = new Image();
|
|
img.onload = function() {
|
|
createdLayer.context.drawImage(img, 0, 0);
|
|
createdLayer.updateLayerPreview();
|
|
|
|
if (i == (fileContent['nLayers'] - 1)) {
|
|
ColorModule.createPaletteFromLayers();
|
|
}
|
|
};
|
|
|
|
img.src = layerImage;
|
|
|
|
// Setting visibility and lock options
|
|
if (!layerData.isVisible) {
|
|
createdLayer.hide();
|
|
}
|
|
if (layerData.isLocked) {
|
|
createdLayer.lock();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function resetInput() {
|
|
//reset new form
|
|
Util.setValue('size-width', 64);
|
|
Util.setValue('size-height', 64);
|
|
|
|
Util.setText('palette-button', 'Choose a palette...');
|
|
Util.setText('preset-button', 'Choose a preset...');
|
|
}
|
|
|
|
function newFromTemplate(preset, x, y) {
|
|
if (preset != '') {
|
|
const presetProperties = PresetModule.propertiesOf(preset);
|
|
Util.setText('palette-button-splash', presetProperties.palette);
|
|
Util.setText('palette-button', presetProperties.palette);
|
|
|
|
x = presetProperties.width;
|
|
y = presetProperties.height;
|
|
}
|
|
newPixel(x, y);
|
|
}
|
|
|
|
function splashEditorMode(mode) {
|
|
editorMode = mode;
|
|
}
|
|
|
|
return {
|
|
create,
|
|
newPixel,
|
|
newFromTemplate,
|
|
splashEditorMode
|
|
}
|
|
})(); |