Merge branch 'master' into minor-changes

_ext/sass/_colors.scss

@@ -1,184 +0,0 @@
-$base-color: #332f35;
-$shop: #b63831;
-$red: #e3474a;
-$orange: #df7c25;
-$green: #70a630;
-
-$palettes: (
-    base: (
-        background: (
-            default: $base-color,
-            hover: lighten($base-color, 5%),
-            lighthover: lighten($base-color, 4%),
-        ),
-        foreground: (
-            default: lighten($base-color, 20%),
-            text: lighten($base-color, 50%),
-            bold: lighten($base-color, 60%),
-            weak: lighten($base-color, 30%),
-            link: lighten($base-color, 100%),
-            h1: lighten($base-color, 100%),
-            h2: lighten($base-color, 70%),
-            h3: lighten($base-color, 60%),
-            surveyQuestion: lighten($base-color, 60%),
-            hover: lighten($base-color, 40%),
-            separator: lighten($base-color, 5%),
-            disabled: lighten($base-color, 10%),
-        )
-    ),
-    user-menu: (
-        background: (
-            default: darken($base-color, 3%),
-            hover: darken($base-color, 1.5%),
-            highlight: lighten($base-color, 3%),
-            highlight-hover: lighten($base-color, 5%),
-        ),
-        foreground: (
-            default: lighten($base-color, 50%),
-            symbol: lighten($base-color, 8%),
-            text: lighten($base-color, 50%),
-            hover: lighten($base-color, 100%),
-        )
-    ),
-    menu: (
-        background: (
-            default: lighten($base-color, 5%),
-            hover: lighten($base-color, 15%),
-        ),
-        foreground: (
-            default: lighten($base-color, 50%),
-            hover: lighten($base-color, 100%),
-        )
-    ),
-    button: (
-        background: (
-            default: lighten($base-color, 10%),
-            hover: lighten($base-color, 15%),
-            weak: lighten($base-color, 5%),
-        ),
-        foreground: (
-            default: lighten($base-color, 50%),
-            dropdown: lighten($base-color, 50%),
-            text: lighten($base-color, 60%),
-            symbol: lighten($base-color, 50%),
-            indent: lighten($base-color, 5%),
-            weak: lighten($base-color, 25%),
-            hover: lighten($base-color, 75%),
-        )
-    ),
-    selectedTool: (
-        background: (
-            default: lighten($base-color, 10%),
-        ),
-        foreground: (
-            default: lighten($base-color, 50%),
-        )
-    ),
-    subbutton: (
-        background: (
-            hover: lighten($base-color, 15%),
-        ),
-        foreground: (
-            default: lighten($base-color, 30%),
-            hover:  lighten($base-color, 50%),
-        )
-    ),
-    indent: (
-        background: (
-            default: darken($base-color, 4%),
-            separator: darken($base-color, 8%),
-            hover: lighten($base-color, 5%),
-            outline: lighten($base-color, 10%),
-        ),
-        foreground: (
-            default: #fff,
-            text: lighten($base-color, 40%),
-            symbol: lighten($base-color, 5%),
-            symbol-hover: lighten($base-color, 20%),
-            weak: lighten($base-color, 20%),
-            form: lighten($base-color, 50%),
-        )
-    ),
-    indent-dark: (
-        background: (
-            default: darken($base-color, 6%),
-            separator: darken($base-color, 11%),
-            button: lighten($base-color, 2.5%),
-            button-hover: lighten($base-color, 5%),
-        ),
-        foreground: (
-          default: lighten($base-color, 30%),
-          link: lighten($base-color, 40%),
-          hover: lighten($base-color, 50%),
-          button: lighten($base-color, 50%),
-          button-hover: lighten($base-color, 70%),
-        )
-    ),
-    indent-darker: (
-        background: (
-            default: darken($base-color, 8%),
-
-        ),
-        foreground: (
-          default: lighten($base-color, 15%),
-        )
-    ),
-    footer: (
-        background: (
-            default: darken($base-color, 9%),
-            hover: darken($base-color, 2%),
-        ),
-        foreground: (
-            default: lighten($base-color, 20%),
-            hover: lighten($base-color, 35%),
-            symbol: lighten($base-color, 7.5%),
-        ),
-    ),
-    warning-banner: (
-        background: (
-            default: lighten($base-color, 10%),
-            button: lighten($base-color, 20%),
-            button-hover: lighten($base-color, 25%),
-        ),
-        foreground: (
-            default: lighten($base-color, 50%),
-            button: lighten($base-color, 40%),
-            button-hover: lighten($base-color, 45%),
-        ),
-    ),
-    image-label: (
-        background: (
-            default: lighten($base-color, 15%),
-        ),
-        foreground: (
-            default: lighten($base-color, 80%),
-        ),
-        triangle: (
-            default: lighten($base-color, 6%),
-        ),
-    ),
-    shop: (
-        background: (
-            default: $shop,
-            hover: lighten($shop, 5%),
-        ),
-        foreground: (
-            default: lighten($shop, 65%),
-        ),
-    ),
-);
-
-@function color($element: 'base', $location: 'background', $hover: 'default') {
-    @return map-get(map-get(map-get($palettes, $element), $location), $hover);
-}
-
-$twitter: #00b6f1;
-$patreon: #F96854;
-$facebook: #3b5998;
-$reddit: #ff5700;
-$youtube: #b31217;
-$pintrest: #cb2027;
-$tumblr: #2c4762;
-$deviantart: #4a5d4e;
-$instagram: #c2368a;
-$pixeljoint: #73d731;

changelog.json

@@ -1,4 +1,8 @@
 {
+	"1.3.0 - 9/8/20": [
+		{"change": "Added layers", "author": "Unsettled"}
+	],
+
 	"1.2.0 - 4/14/20": [
 		{"change": "Added rectangle / selection tools", "author": "Unsettled"}
 	],

js/_createColorPalette.js

@@ -35,6 +35,9 @@ function createColorPalette(selectedPalette, fillBackground, deletePreviousPalet
         }
     }
 
+	//prepend # if not present
+	if (!darkestColor.includes('#')) darkestColor = '#' + darkestColor;
+
     //set as current color
     currentLayer.context.fillStyle = darkestColor;
 }

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?')) {
+		//if there is a current layer (a document is active)
-                return;
+        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';

js/_history.js

@@ -175,7 +175,7 @@ function HistoryStateMoveTwoLayers(layer, oldIndex, newIndex) {
     saveHistoryState(this);
 }
 
-function HistoryStateMoveLayer(afterToDrop, toDrop, static, nMoved) {
+function HistoryStateMoveLayer(afterToDrop, toDrop, staticc, nMoved) {
     this.beforeToDrop = afterToDrop;
     this.toDrop = toDrop;
 
@@ -197,7 +197,7 @@ function HistoryStateMoveLayer(afterToDrop, toDrop, static, nMoved) {
     };
 
     this.redo = function() {
-        moveLayers(toDrop.menuEntry.id, static.menuEntry.id, true);
+        moveLayers(toDrop.menuEntry.id, staticc.menuEntry.id, true);
         undoStates.push(this);
     };
 
@@ -378,7 +378,7 @@ function undo () {
     if (undoStates.length > 0) {
         document.getElementById('redo-button').classList.remove('disabled');
 
-        //get state 
+        //get state
         var undoState = undoStates[undoStates.length-1];
         //console.log(undoState);
 
@@ -387,9 +387,9 @@ function undo () {
 
         //restore the state
         undoState.undo();
-        
+
         //if theres none left to undo, disable the option
-        if (undoStates.length == 0) 
+        if (undoStates.length == 0)
             document.getElementById('undo-button').classList.add('disabled');
     }
 }
@@ -402,7 +402,7 @@ function redo () {
         //enable undo button
         document.getElementById('undo-button').classList.remove('disabled');
 
-        //get state 
+        //get state
         var redoState = redoStates[redoStates.length-1];
 
         //remove from redo array (do this before restoring the state, else the flatten state will break)
@@ -412,7 +412,7 @@ function redo () {
         redoState.redo();
 
         //if theres none left to redo, disable the option
-        if (redoStates.length == 0) 
+        if (redoStates.length == 0)
             document.getElementById('redo-button').classList.add('disabled');
     }
     //console.log(undoStates);

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() {
@@ -328,9 +328,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);
     }
 }
@@ -398,14 +398,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);
         }
@@ -420,7 +420,7 @@ function merge(saveHistory = true) {
         // Updating the layer preview
         currentLayer.updateLayerPreview();
     }
-    
+
 }
 
 function deleteLayer(saveHistory = true) {
@@ -439,7 +439,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
@@ -477,7 +477,7 @@ function renameLayer(event) {
 // Swaps two layer entries in the layer menu
 function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
     let toDrop = getLayerByID(toDropLayer);
-    let static = getLayerByID(staticLayer);
+    let staticc = getLayerByID(staticLayer);
     let layerCopy = layers.slice();
 
     let beforeToDrop = toDrop.menuEntry.nextElementSibling;
@@ -486,9 +486,9 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
     layerCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
 
     let toDropIndex = layerCopy.indexOf(toDrop);
-    let staticIndex = layerCopy.indexOf(static);
+    let staticIndex = layerCopy.indexOf(staticc);
 
-    layerList.insertBefore(toDrop.menuEntry, static.menuEntry);
+    layerList.insertBefore(toDrop.menuEntry, staticc.menuEntry);
 
     if (toDropIndex < staticIndex) {
         let tmp = toDrop.canvas.style.zIndex;
@@ -511,9 +511,9 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
         }
 
         toDrop.canvas.style.zIndex = tmp;
-        
+
         if (saveHistory) {
-            new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved);
+            new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
         }
     }
     else {
@@ -540,7 +540,7 @@ function moveLayers(toDropLayer, staticLayer, saveHistory = true) {
         toDrop.canvas.style.zIndex = tmp;
 
         if (saveHistory) {
-            new HistoryStateMoveLayer(beforeToDrop, toDrop, static, nMoved);
+            new HistoryStateMoveLayer(beforeToDrop, toDrop, staticc, nMoved);
         }
 
     }
@@ -585,6 +585,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
@@ -599,7 +601,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]);
 
@@ -612,4 +614,6 @@ function addLayer(id, saveHistory = true) {
     }
 
     return newLayer;
-}
+}
+
+layerList = document.getElementById("layers-menu");

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;
 
 	    currentLayer = new Layer(width, height, canvas, layerListEntry);
@@ -55,7 +54,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
@@ -139,7 +138,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 					if (i == (fileContent['nLayers'] - 1)) {
 						createPaletteFromLayers();
 					}
-				};				
+				};
 
 				img.src = layerImage;