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 EditorState, moved editor mode management to that IIFE

Browse Source
This commit is contained in:
unsettledgames 2021-07-23 18:54:09 +02:00
parent 366c2d9e2a
commit 404b1c56c1
5 changed files with 78 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/ColorModule.js
View File

@ -228,7 +228,7 @@ const ColorModule = (() => {
event.target.parentElement.lastChild.classList.add('hidden');
//show jscolor picker, if basic mode is enabled
if (pixelEditorMode == 'Basic')
if (EditorState.getCurrentMode() == 'Basic')
event.target.parentElement.firstChild.jscolor.show();
else
Dialogue.showDialogue("palette-block", false);

74
js/EditorState.js Normal file
View File

@ -0,0 +1,74 @@
const EditorState = (() => {
let pixelEditorMode = "Basic";
Events.on('click', 'switch-editor-mode-splash', function (e) {toggleMode();});
Events.on('click', 'switch-mode-button', function (e) {toggleMode();});
function getCurrentMode() {
return pixelEditorMode;
}
function switchMode(newMode) {
//switch to advanced mode
if (newMode == 'Advanced' && pixelEditorMode == 'Basic') {
// Switch to advanced ez pez lemon squez
document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
// Show the layer menus
LayerList.getLayerListEntries().style.display = "inline-block";
document.getElementById('layer-button').style.display = 'inline-block';
// Hide the palette menu
document.getElementById('colors-menu').style.right = '200px'
//change splash text
document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
pixelEditorMode = 'Advanced';
//turn pixel grid off
togglePixelGrid('off');
}
//switch to basic mode
else {
//if there is a current layer (a document is active)
if (currentLayer) {
if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
return;
}
// Selecting the current layer
currentLayer.selectLayer();
// Flatten the layers
LayerList.flatten(true);
}
//change menu text
document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
// Hide the layer menus
LayerList.getLayerListEntries().style.display = 'none';
document.getElementById('layer-button').style.display = 'none';
// Show the palette menu
document.getElementById('colors-menu').style.display = 'flex';
// Move the palette menu
document.getElementById('colors-menu').style.right = '0px';
//change splash text
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
pixelEditorMode = 'Basic';
togglePixelGrid('off');
}
}
function toggleMode() {
if (pixelEditorMode == 'Advanced')
switchMode('Basic');
else
switchMode('Advanced');
}
return {
getCurrentMode,
switchMode
}
})();

4
js/FileManager.js
View File

@ -134,7 +134,7 @@ const FileManager = (() => {
var img = new Image();
img.onload = function() {
//create a new pixel with the images dimentions
switchMode('Advanced');
EditorState.switchMode('Advanced');
Startup.newPixel(this.width, this.height);
//draw the image onto the canvas
@ -174,7 +174,7 @@ const FileManager = (() => {
dictionary['canvasWidth'] = currentLayer.canvasSize[0];
dictionary['canvasHeight'] = currentLayer.canvasSize[1];
// save editor mode
dictionary['editorMode'] = pixelEditorMode;
dictionary['editorMode'] = EditorState.getCurrentMode();
// save palette
for (let i=0; i<ColorModule.getCurrentPalette().length; i++) {
dictionary["color" + i] = ColorModule.getCurrentPalette()[i];

78
js/_editorMode.js
View File

@ -1,78 +0,0 @@
// REFACTOR: move everything in EditorState?
let pixelEditorMode = "Basic";
let modes = {
'Basic' : {
description: 'Basic mode is perfect if you want to create simple sprites or try out palettes.'
},
'Advanced' : {
description: 'Choose advanced mode to gain access to more advanced features such as layers and advanced palette editing.'
}
}
Events.on('click', 'switch-editor-mode-splash', function (e) {
toggleMode();
});
function switchMode(newMode) {
//switch to advanced mode
if (newMode == 'Advanced' && pixelEditorMode == 'Basic') {
// Switch to advanced ez pez lemon squez
document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode';
// Show the layer menus
LayerList.getLayerListEntries().style.display = "inline-block";
document.getElementById('layer-button').style.display = 'inline-block';
// Hide the palette menu
document.getElementById('colors-menu').style.right = '200px'
//change splash text
document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
pixelEditorMode = 'Advanced';
//turn pixel grid off
togglePixelGrid('off');
}
//switch to basic mode
else {
//if there is a current layer (a document is active)
if (currentLayer) {
if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) {
return;
}
// Selecting the current layer
currentLayer.selectLayer();
// Flatten the layers
LayerList.flatten(true);
}
//change menu text
document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode';
// Hide the layer menus
layerList.style.display = 'none';
document.getElementById('layer-button').style.display = 'none';
// Show the palette menu
document.getElementById('colors-menu').style.display = 'flex';
// Move the palette menu
document.getElementById('colors-menu').style.right = '0px';
//change splash text
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
pixelEditorMode = 'Basic';
togglePixelGrid('off');
}
}
function toggleMode() {
if (pixelEditorMode == 'Advanced')
switchMode('Basic');
else
switchMode('Advanced');
}
Events.on('click', 'switch-mode-button', function (e) {
toggleMode();
});

2
js/pixel-editor.js
View File

@ -17,7 +17,7 @@
//=include Layer.js
//=include Startup.js
//=include _pixelGrid.js
//=include _editorMode.js
//=include EditorState.js
/**dropdown formatting**/
//=include PresetModule.js