diff --git a/js/_editorMode.js b/js/_editorMode.js index 43d0cab..0b87076 100644 --- a/js/_editorMode.js +++ b/js/_editorMode.js @@ -10,6 +10,8 @@ let modes = { let infoBox = document.getElementById('editor-mode-info'); function switchMode(currentMode, mustConfirm = true) { + + //switch to advanced mode if (currentMode == 'Basic') { // Switch to advanced ez pez lemon squez document.getElementById('switch-mode-button').innerHTML = 'Switch to basic mode'; @@ -18,22 +20,33 @@ function switchMode(currentMode, mustConfirm = true) { document.getElementById('layer-button').style.display = 'inline-block'; // Move the palette menu document.getElementById('colors-menu').style.right = '200px'; - + pixelEditorMode = 'Advanced'; } + + //switch to basic mode else { - // Switch to basic - if (mustConfirm) { - if (!confirm('Switching to basic mode will flatten all the visible layers. Are you sure you want to continue?')) { - return; - } + + + //if there is a current layer (a document is active) + if (currentLayer) { + + //confirm with user before flattening image + if (mustConfirm ) { + 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 + flatten(true); } + //change menu text document.getElementById('switch-mode-button').innerHTML = 'Switch to advanced mode'; - // Selecting the current layer - currentLayer.selectLayer(); - // Flatten the layers - flatten(true); + // Hide the layer menus layerList.style.display = 'none'; document.getElementById('layer-button').style.display = 'none'; diff --git a/js/_layer.js b/js/_layer.js index a01c15e..66f47d1 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -1,13 +1,13 @@ /** TODO LIST FOR LAYERS - + GENERAL REQUIREMENTS: - - Saving the state of an artwork to a .lospec file so that people can work on it later keeping + - Saving the state of an artwork to a .lospec file so that people can work on it later keeping the layers they created? That'd be cool, even for the app users, that could just double click on a lospec file for it to be opened right in the pixel editor OPTIONAL: - 1 - Fix issues + 1 - Fix issues */ let layerList; @@ -52,7 +52,7 @@ class Layer { currentID++; } - this.id = "layer" + id; + this.id = "layer" + id; if (menuEntry != null) { this.name = menuEntry.getElementsByTagName("p")[0].innerHTML; @@ -138,7 +138,7 @@ class Layer { if (layerDragSource != this) { let toDropID = element.dataTransfer.getData('text/html'); let thisID = this.id; - + moveLayers(toDropID, thisID); } @@ -150,7 +150,7 @@ class Layer { layerDragEnd(element) { this.classList.remove('layerdragover'); - } + } // Resizes canvas resize() { @@ -303,9 +303,9 @@ class Layer { // La appiccico sulla preview destination.getContext('2d').clearRect(0, 0, destination.width, destination.height); - destination.getContext('2d').drawImage(this.canvas, + destination.getContext('2d').drawImage(this.canvas, // This is necessary to center the preview in the canvas - (destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2, + (destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2, previewWidth, previewHeight); } } @@ -373,14 +373,14 @@ function merge(saveHistory = true) { let toMergeIndex = layers.indexOf(toMerge); // Getting layer below let layerBelow = getLayerByID(currentLayer.menuEntry.nextElementSibling.id); - + // If I have something to merge with if (layerBelow != null) { // Selecting that layer layerBelow.selectLayer(); if (saveHistory) { - new HistoryStateMergeLayer(toMergeIndex, toMerge, + new HistoryStateMergeLayer(toMergeIndex, toMerge, layerBelow.context.getImageData(0, 0, layerBelow.canvasSize[0], layerBelow.canvasSize[1]), layerBelow); } @@ -395,7 +395,7 @@ function merge(saveHistory = true) { // Updating the layer preview currentLayer.updateLayerPreview(); } - + } function deleteLayer(saveHistory = true) { @@ -414,7 +414,7 @@ function deleteLayer(saveHistory = true) { } // or the previous one if the next one doesn't exist else { - layers[layerIndex - 1].selectLayer(); + layers[layerIndex - 1].selectLayer(); } // Deleting canvas and entry @@ -486,7 +486,7 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) { } toDrop.canvas.style.zIndex = tmp; - + if (saveHistory) { new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved); } @@ -560,6 +560,8 @@ function addLayer(id, saveHistory = true) { console.log("Tela creata: " + newCanvas); + if (!layerListEntry) return console.warn('skipping adding layer because no document'); + // Clone the default layer let toAppend = layerListEntry.cloneNode(true); // Setting the default name for the layer @@ -574,7 +576,7 @@ function addLayer(id, saveHistory = true) { newLayer.context.fillStyle = currentLayer.context.fillStyle; newLayer.copyData(currentLayer); layers.splice(index, 0, newLayer); - + // Insert it before the Add layer button layerList.insertBefore(toAppend, layerList.childNodes[0]); @@ -587,4 +589,6 @@ function addLayer(id, saveHistory = true) { } return newLayer; -} \ No newline at end of file +} + +layerList = document.getElementById("layers-menu"); \ No newline at end of file diff --git a/js/_newPixel.js b/js/_newPixel.js index 85cf243..1473738 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -5,7 +5,6 @@ function newPixel (width, height, editorMode, fileContent = null) { currentPalette = []; if (firstPixel) { - layerList = document.getElementById("layers-menu"); layerListEntry = layerList.firstElementChild; // Setting up the current layer @@ -58,7 +57,7 @@ function newPixel (width, height, editorMode, fileContent = null) { canvasSize = currentLayer.canvasSize; if (firstPixel) { - // Cloning the entry so that when I change something on the first layer, those changes aren't + // 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 @@ -142,7 +141,7 @@ function newPixel (width, height, editorMode, fileContent = null) { if (i == (fileContent['nLayers'] - 1)) { createPaletteFromLayers(); } - }; + }; img.src = layerImage;