diff --git a/js/ColorModule.js b/js/ColorModule.js index ea59b3c..35ebb05 100644 --- a/js/ColorModule.js +++ b/js/ColorModule.js @@ -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); diff --git a/js/EditorState.js b/js/EditorState.js new file mode 100644 index 0000000..5dd7f46 --- /dev/null +++ b/js/EditorState.js @@ -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 + } +})(); \ No newline at end of file diff --git a/js/FileManager.js b/js/FileManager.js index 6325506..d1a3c28 100644 --- a/js/FileManager.js +++ b/js/FileManager.js @@ -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