mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Added Startup IIFE to take care of the creation of a new project

Browse Source 
It includes the old _createButton and _newPixel functions and a few private methods to divide the huge newPixel function into smaller chunks depending on their purpose. Those chunks could probably be part of other IIFEs, but we'll think about that in the future.
Fixed Input bug that caused the on function to pass an array of arguments instead of single arguments. Removed data_asdfgasd.hbs
This commit is contained in:
unsettledgames 2021-07-15 18:33:19 +02:00
parent 7c80e8f342
commit dcf896954f
11 changed files with 281 additions and 273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/Input.js
View File

@ -7,7 +7,7 @@ class Input {
function (e) {
// e = event
//this = element clicked
functionCallback(e, this, args);
functionCallback(e, ...args);
//if you need to access the event or this variable, you need to add them
//when you define the callback, but you cant use the word this, eg:
//on('click', menuButton, function (e, button) {});
@ -20,7 +20,7 @@ class Input {
//loop through children and add onClick listener
for (var i = 0; i < children.length; i++) {
on(event, children[i], functionCallback, args);
on(event, children[i], functionCallback, ...args);
}
}
}

2
js/_presets.js → js/PresetModule.js
View File

@ -17,6 +17,7 @@ const PresetModule = (() => {
presetsMenu.appendChild(button);
button.addEventListener('click', () => {
console.log("Preset: " + presetName);
//change dimentions on new pixel form
Util.setValue('size-width', presets[presetName].width);
Util.setValue('size-height', presets[presetName].height);
@ -30,7 +31,6 @@ const PresetModule = (() => {
//set the text of the dropdown to the newly selected preset
Util.setText('preset-button', presetName);
});
});

261
js/Startup.js
View File

@ -1,3 +1,264 @@
const Startup = (() => {
let firstPixel = true;
let splashPostfix = '';
Input.on('click', 'create-button', create, false);
Input.on('click', 'create-button-splash', create, true);
function create(e, isSplash) {
// If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
if (isSplash) {
splashPostfix = '-splash';
}
else {
splashPostfix = '';
}
console.log("New pixel");
var width = Util.getValue('size-width' + splashPostfix);
var height = Util.getValue('size-height' + splashPostfix);
var selectedPalette = Util.getText('palette-button' + splashPostfix);
newPixel(width, height);
// If I'm not creating from the splash page, then this is not the first project I've created
if (!isSplash)
document.getElementById('new-pixel-warning').style.display = 'block';
resetInput();
//track google event
if (typeof ga !== 'undefined')
ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
}
/** TODO:
* - Remove firstPixel: it's enough to pass to newPixel whether it's been called from the splash page or not
* - Divide functions depending on their purpose:
* - initLayers()
* - initPalette()
* - openLPE()
*/
/** 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();
//fill background of canvas with bg color
fillCheckerboard();
fillPixelGrid();
// Closing the "New Pixel dialogue"
Dialogue.closeDialogue();
// Updating the cursor of the current tool
currentTool.updateCursor();
// The user is now able to export the Pixel
document.getElementById('export-button').classList.remove('disabled');
documentCreated = true;
// This is not the first Pixel anymore
firstPixel = false;
// Now, if I opened an LPE file
if (fileContent != null) {
loadLPE(fileContent);
// Deleting the default layer
deleteLayer(false);
}
}
function initLayers(width, height) {
// If this is the first pixel I'm creating since the app has started
if (firstPixel) {
// I configure the layers elements
layerListEntry = layerList.firstElementChild;
// Creating the first layer
currentLayer = new Layer(width, height, canvas, layerListEntry);
currentLayer.canvas.style.zIndex = 2;
}
else {
// If it's not the first Pixel, I have to reset the app
// Deleting all the extra layers and canvases, leaving only one
let nLayers = layers.length;
for (let i=2; i < layers.length - nAppLayers; i++) {
let currentEntry = layers[i].menuEntry;
let associatedLayer;
if (currentEntry != null) {
// Getting the associated layer
associatedLayer = getLayerByID(currentEntry.id);
// Deleting its canvas
associatedLayer.canvas.remove();
// Adding the id to the unused ones
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++) {
layers.splice(2, 1);
}
// Setting up the current layer
layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
currentLayer = layers[1];
currentLayer.canvas.style.zIndex = 2;
// Updating canvas size to the new size
for (let i=0; i<nLayers; i++) {
layers[i].canvasSize = [width, height];
}
}
// Adding the checkerboard behind it
checkerBoard = new Layer(width, height, checkerBoardCanvas);
// Creating the vfx layer on top of everything
VFXLayer = new Layer(width, height, VFXCanvas);
// Tmp layer to draw previews on
TMPLayer = new Layer(width, height, TMPCanvas);
// Pixel grid
pixelGrid = new Layer(width, height, pixelGridCanvas);
// Setting the general canvasSize
canvasSize = currentLayer.canvasSize;
if (firstPixel) {
// Cloning the entry so that when I change something on the first layer, those changes aren't
// propagated to the other ones
layerListEntry = layerListEntry.cloneNode(true);
// Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard);
layers.push(currentLayer);
layers.push(VFXLayer);
layers.push(TMPLayer);
layers.push(pixelGrid);
}
}
function initPalette() {
// Get selected palette
let selectedPalette = Util.getText('palette-button' + splashPostfix);
//remove current palette
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 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
createColorPalette(palettes[selectedPalette].colors,true);
}
// 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
currentLayer.context.fillStyle = '#'+defaultForegroundColor;
currentGlobalColor = '#' + defaultForegroundColor;
selectedPalette = 'none';
}
}
// OPTIMIZABLE: should probably moved to a FileManagement class or something
function loadLPE(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 = 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)) {
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);
}
return {
create,
newPixel,
newFromTemplate
}
})();

42
js/_createButton.js
View File

@ -1,42 +0,0 @@
function create(isSplash) {
var splashPostfix = '';
// If I'm creating from the splash menu, I append '-splash' so I get the corresponding values
if (isSplash) {
splashPostfix = '-splash';
}
var width = Util.getValue('size-width' + splashPostfix);
var height = Util.getValue('size-height' + splashPostfix);
newPixel(width, height);
// If I'm not creating from the splash page, then this is not the first project I've created
if (!isSplash)
document.getElementById('new-pixel-warning').style.display = 'block';
//get selected palette name
var selectedPalette = Util.getText('palette-button' + splashPostfix);
if (selectedPalette == 'Choose a palette...')
selectedPalette = 'none';
//track google event
if (typeof ga !== 'undefined')
ga('send', 'event', 'Pixel Editor New', selectedPalette, width+'/'+height); /*global ga*/
//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...');
}
/** Triggered when the "Create" button in the new pixel dialogue is pressed
*
*/
Input.on('click', 'create-button', create, false);
/** Triggered when the "Create" button in the splash page is pressed
*
*/
Input.on('click', 'create-button-splash', create, true);

4
js/_fileMenu.js
View File

@ -8,8 +8,8 @@ for (var i = 1; i < mainMenuItems.length; i++) {
var menuButton = menuItem.children[0];
//when you click a main menu items button
Input.on('click', menuButton, function (e, button) {
Util.select(button.parentElement);
Input.on('click', menuButton, function (e) {
Util.select(e.target.parentElement);
});
var subMenu = menuItem.children[1];

5
js/_loadImage.js
View File

@ -21,7 +21,7 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
reader.onload = function (e) {
let dictionary = JSON.parse(e.target.result);
let mode = dictionary['editorMode'] == 'Advanced' ? 'Basic' : 'Advanced';
newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], mode, dictionary);
Startup.newPixel(dictionary['canvasWidth'], dictionary['canvasHeight'], mode, dictionary);
}
}
else {
@ -31,7 +31,8 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f
var img = new Image();
img.onload = function() {
//create a new pixel with the images dimentions
newPixel(this.width, this.height, 'Advanced');
switchMode('Advanced');
Startup.newPixel(this.width, this.height);
//draw the image onto the canvas
currentLayer.context.drawImage(img, 0, 0);

207
js/_newPixel.js
View File

@ -1,207 +0,0 @@
let firstPixel = true;
/** 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();
// If this is the first pixel I'm creating since the app has started
if (firstPixel) {
// I configure the layers elements
layerListEntry = layerList.firstElementChild;
// Creating the first layer
currentLayer = new Layer(width, height, canvas, layerListEntry);
currentLayer.canvas.style.zIndex = 2;
}
else {
// If it's not the first Pixel, I have to reset the app
// Deleting all the extra layers and canvases, leaving only one
let nLayers = layers.length;
for (let i=2; i < layers.length - nAppLayers; i++) {
let currentEntry = layers[i].menuEntry;
let associatedLayer;
if (currentEntry != null) {
// Getting the associated layer
associatedLayer = getLayerByID(currentEntry.id);
// Deleting its canvas
associatedLayer.canvas.remove();
// Adding the id to the unused ones
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++) {
layers.splice(2, 1);
}
// Setting up the current layer
layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
currentLayer = layers[1];
currentLayer.canvas.style.zIndex = 2;
// Updating canvas size to the new size
for (let i=0; i<nLayers; i++) {
layers[i].canvasSize = [width, height];
}
}
// Adding the checkerboard behind it
checkerBoard = new Layer(width, height, checkerBoardCanvas);
// Creating the vfx layer on top of everything
VFXLayer = new Layer(width, height, VFXCanvas);
// Tmp layer to draw previews on
TMPLayer = new Layer(width, height, TMPCanvas);
// Pixel grid
pixelGrid = new Layer(width, height, pixelGridCanvas);
// Setting the general canvasSize
canvasSize = currentLayer.canvasSize;
if (firstPixel) {
// Cloning the entry so that when I change something on the first layer, those changes aren't
// propagated to the other ones
layerListEntry = layerListEntry.cloneNode(true);
// Adding the first layer and the checkerboard to the list of layers
layers.push(checkerBoard);
layers.push(currentLayer);
layers.push(VFXLayer);
layers.push(TMPLayer);
layers.push(pixelGrid);
}
//remove current palette
colors = document.getElementsByClassName('color-button');
while (colors.length > 0) {
colors[0].parentElement.remove();
}
//add colors from selected palette
var selectedPalette;
if (!firstPixel)
var selectedPalette = Util.getText('palette-button');
else
var selectedPalette = Util.getText('palette-button-splash');
// If the user selected a palette and isn't opening a file, I load the selected palette
if (selectedPalette != 'Choose a palette...' && fileContent == null) {
//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
createColorPalette(palettes[selectedPalette].colors,true);
}
// Otherwise, I just generate 2 semirandom colours
else if (fileContent == null) {
//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
currentLayer.context.fillStyle = '#'+defaultForegroundColor;
currentGlobalColor = '#' + defaultForegroundColor;
selectedPalette = 'none';
}
//fill background of canvas with bg color
fillCheckerboard();
fillPixelGrid();
//reset undo and redo states
undoStates = [];
redoStates = [];
// Closing the "New Pixel dialogue"
Dialogue.closeDialogue();
// Updating the cursor of the current tool
currentTool.updateCursor();
// The user is now able to export the Pixel
document.getElementById('export-button').classList.remove('disabled');
documentCreated = true;
// This is not the first Pixel anymore
firstPixel = false;
// Now, if I opened an LPE file
if (fileContent != null) {
// 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 = 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)) {
createPaletteFromLayers();
}
};
img.src = layerImage;
// Setting visibility and lock options
if (!layerData.isVisible) {
createdLayer.hide();
}
if (layerData.isLocked) {
createdLayer.lock();
}
}
}
// Deleting the default layer
deleteLayer(false);
}
// Resetting history
undoStates = [];
redoStates = [];
}
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);
}

6
js/_onLoad.js
View File

@ -42,12 +42,8 @@ window.onload = function () {
let width = dimentions.split('x')[0];
let height = dimentions.split('x')[1];
console.log('dimentions were specified',width,'x',height)
//firstPixel = false;
//create new document
newPixel(width, height);
Startup.newPixel(width, height);
}
//dimentions were not specified -- show splash screen with palette preselected

5
js/pixel-editor.js
View File

@ -15,13 +15,12 @@
//=include _settings.js
/**dropdown formatting**/
//=include _presets.js
//=include PresetModule.js
//=include _palettes.js
/**functions**/
//=include _tools.js
//=include tools/*.js
//=include _newPixel.js
//=include _createColorPalette.js
//=include _changeZoom.js
//=include ColorModule.js
@ -51,11 +50,11 @@
/**buttons**/
//=include _toolButtons.js
//=include _fileMenu.js
//=include _createButton.js
//=include _rectSelect.js
//=include _move.js
//=include _rectangle.js
//=include _ellipse.js
//=include Startup.js
/**onload**/
//=include _onLoad.js

0
views/data-asdfgasd.hbs
View File

18
views/splash-page-popup.hbs
View File

@ -45,15 +45,15 @@
<div id="sp-quickstart">
<div class="sp-template" onclick="document.getElementById('open-image-browse-holder').click()"><p>Load</p></div>
<div class="sp-template" onclick="newFromTemplate('Gameboy Color')"><p><span>New</span> Gameboy</p></div>
<div class="sp-template" onclick="newFromTemplate('Commodore 64')"><p><span>New</span> C64</p></div>
<div class="sp-template" onclick="newFromTemplate('PICO-8')"><p><span>New</span> Pico8</p></div>
<div class="sp-template" onclick="newFromTemplate('',16,16)"><p><span>New</span> 16x16</p></div>
<div class="sp-template" onclick="newFromTemplate('',32,32)"><p><span>New</span> 32x32</p></div>
<div class="sp-template" onclick="newFromTemplate('',64,64)"><p><span>New</span> 64x64</p></div>
<div class="sp-template" onclick="newFromTemplate('',128,128)"><p><span>New</span> 128x128</p></div>
<div class="sp-template" onclick="newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
<div class="sp-template" onclick="newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('Gameboy Color')"><p><span>New</span> Gameboy</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('Commodore 64')"><p><span>New</span> C64</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('PICO-8')"><p><span>New</span> Pico8</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('',16,16)"><p><span>New</span> 16x16</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('',32,32)"><p><span>New</span> 32x32</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('',64,64)"><p><span>New</span> 64x64</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('',128,128)"><p><span>New</span> 128x128</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
<div class="sp-template" onclick="Startup.newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
</div>
<div class="mode-switcher">