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';
@@ -21,19 +23,30 @@ function switchMode(currentMode, mustConfirm = true) {
 
         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);
     };
 

js/_layer.js

@@ -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;
@@ -513,7 +513,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);
         }
     }
     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
@@ -613,3 +615,5 @@ 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);