Currently debugging the add layer function

At the moment the new canvas is correclty added and it's possible to draw on it after selecting the corresponding layer. There's a bug that doesn't let the user select a layer after the first time.

css/pixel-editor.scss

@@ -34,9 +34,23 @@ body {
   position: fixed;
   z-index: 1120;
   list-style-type: none;
+  overflow-y:scroll;
 
-  button {
+  // TODO: make the scroll bar a bit fancier
-    top:2px;
+
+  #add-layer-button {
+    path {
+      fill:color(menu, foreground);
+    }
+    svg {
+      position:relative;
+      margin-right:10px;
+    }
+    position:relative;
+    justify-content: center;
+    display:flex;
+    align-items:center;
+    margin-top:2px;
     font-size: 1.2em;
     color: color(menu, foreground);
     height: 100%;
@@ -50,13 +64,23 @@ body {
     transition: color 0.2s, background-color 0.2s;
   }
 
-  button:hover {
+  #add-layer-button:hover {
     color: color(base, foreground, bold);
     background-color: color(base, foreground, default);
   }
 }
 
+.selected-layer {
+  ul.layer-buttons li{
+    visibility:visible;
+  }
+
+  color: color(base, foreground, bold);
+  background-color: color(base, foreground, default);
+}
+
 .layers-menu-entry {
+  cursor:pointer;
   margin-top:2px;
   font-size: 1em;
   color: color(base, foreground, text);
@@ -67,6 +91,43 @@ body {
   display:flex;
   align-items:center;
 
+  ul.layer-buttons {
+    top:0;
+    left:0;
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+    position:relative;
+    height:100%;
+    list-style:none;
+
+    path {
+      fill: color(base, foreground);
+    }
+    li:hover {
+      background: color(base, background, hover);
+      path {
+        fill: color(base, foreground, hover);
+      }
+    }
+
+    li {
+      visibility:hidden;
+      height:50%;
+    }
+  }
+
+  .lock-layer-button, .hide-layer-button {
+    color: color(menu, foreground);
+    background: none;
+    border: none;
+    cursor: pointer;
+    background-color: color(menu);
+    transition: color 0.2s, background-color 0.2s;
+    height:100%;
+    position:relative;
+  }
+
   canvas {
     display:inline-block;
     height:100%;
@@ -76,6 +137,7 @@ body {
   }
 
   p {
+    right:0;
     display:inline-block;
     padding-left:10px;
     height:18px;
@@ -83,18 +145,18 @@ body {
     position:relative;
   }
 
-  transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
+  transition: color 0.1s, background-color 0.1s;
-  -moz-transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
+  -moz-transition: color 0.1s, background-color 0.1s;
-  -webkit-transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
+  -webkit-transition: color 0.1s, background-color 0.1s;
 }
 
 .layers-menu-entry:hover, .selected-layer {
+  ul.layer-buttons li{
+    visibility:visible;
+  }
+
   color: color(base, foreground, bold);
   background-color: color(base, foreground, default);
-
-  -webkit-box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
-  -moz-box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
-  box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
 }
 
 //don't let svg handle click events, just send to parents

js/_layer.js

@@ -1,19 +1,16 @@
 /** TODO LIST FOR LAYERS
     
     GENERAL REQUIREMENTS:
-    
-    - Must add a new layer (a new <li> element with class layer-menu-entry) when clicking on the "add" button
     - Must delete the selected layer when right clicking on a layer and selecting that option
         * We should think about selecting more than one layer at once.
+        * Rename layer
         * Merge with bottom layer option
         * Flatten visible option
         * Flatten everything option
     - Must move a layer when dragging it in the layer list (https://codepen.io/retrofuturistic/pen/tlbHE)
     - When the user clicks on the eye icon, the layer becomes transparent
     - When the user clicks on the lock icon, the layer is locked
-    - Lock and visibility options are only shown on mouse hover
     - When a layer is locked or not visible, the corresponding icons are always shown
-    - When a layer is selected, its background colour becomes lighter
     - When saving an artwork, the layers must be flattened to a temporary layer, which is then exported and deleted
     - 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
@@ -27,7 +24,6 @@
     - mouse events will always have at least a canvas target, so evey time there's an event, we'll have to check
         the actual element type instead of the current layer and then apply the tool on the currentLayer, not on
         the first one in order of z-index   
-    - when zooming in and out, all the layers should be scaled accordingly
     - when changing the stroke colour, it should change for all the layers: it should already be happening,
       just make sure it is
 
@@ -39,6 +35,55 @@
 
 */
 
+/*
+    MORE TODO LIST:
+
+    - Resize canvas (must make a simple editor to preview the changes)
+    - Resize sprite
+*/
+
+// Will probably need a class to handle all the html stuff
+
+let layerList = document.getElementById("layers-menu");
+let layerListEntry = layerList.firstElementChild;
+let layerCount = 1;
+let maxZIndex = 3;
+
+on('click',"add-layer-button", function(){
+    // Creating a new canvas
+    let newCanvas = document.createElement("canvas");
+    // Setting up the new canvas
+    canvasView.append(newCanvas);
+    maxZIndex++;
+    newCanvas.style.zIndex = maxZIndex;
+    newCanvas.classList.add("drawingCanvas");
+
+    console.log("Tela creata: " + newCanvas);
+
+    // Clone the default layer
+    let toAppend = layerListEntry.cloneNode(true);
+    // Setting the default name for the layer
+    toAppend.getElementsByTagName('p')[0].innerHTML = "Layer " + layerCount;
+    // Removing the selected class
+    toAppend.classList.remove("selected-layer");
+    // Adding the layer to the list
+    layerCount++;
+
+    // Creating a layer object
+    let newLayer = new Layer(currentLayer.canvasSize[0], currentLayer.canvasSize[1], newCanvas, toAppend);
+    newLayer.initialize();
+    newLayer.copyData(currentLayer);
+    layers.push(newLayer);
+
+    console.log("Vera tela: " + currentLayer.canvas);
+    console.log("Tela: " + newLayer.canvas);
+    
+    // Binding functions
+    toAppend.onclick = newLayer.select;
+
+    // Insert it before the Add layer button
+    layerList.insertBefore(toAppend, layerList.childNodes[layerList.childElementCount - 1]);
+}, false);
 
 /** Handler class for a single canvas (a single layer)
  *
@@ -46,10 +91,14 @@
  * @param height Canvas height
  * @param canvas HTML canvas element
  */
-function Layer(width, height, canvas) {
+function Layer(width, height, canvas, menuEntry) {
     this.canvasSize = [width, height];
     this.canvas = canvas;
     this.context = this.canvas.getContext('2d');
+    this.isSelected = false;
+    this.isVisible = true;
+    this.isLocked = false;
+    this.menuEntry = menuEntry;
     // Initializes the canvas
     this.initialize = function() {
         var maxHorizontalZoom = Math.floor(window.innerWidth/this.canvasSize[0]*0.75);
@@ -90,4 +139,46 @@ function Layer(width, height, canvas) {
         this.canvas.style.left = otherCanvas.canvas.style.left;
         this.canvas.style.top = otherCanvas.canvas.style.top;
     };
+
+    this.select = function() {
+        // Deselecting the old layer
+        currentLayer.deselect();
+
+        // Selecting the current layer
+        this.isSelected = true;
+        menuEntry.classList.add("selected-layer");
+        currentLayer = getLayerByName(menuEntry.getElementsByTagName("p")[0].innerHTML);
+    }
+
+    this.deselect = function() {
+        this.isSelected = false;
+        menuEntry.classList.remove("selected-layer");
+    }
+
+    this.lock = function() {
+        this.isLocked = true;
+    }
+
+    this.unlock = function() {
+        this.isLocked = false;
+    }
+
+    this.show = function() {
+        this.isVisible = true;
+    }
+
+    this.hide = function() {
+        this.isVisible = false;
+    }
 }
+
+// Finds a layer given its name
+function getLayerByName(name) {
+    for (let i=0; i<layers.length; i++) {
+        if (layers[i].menuEntry.getElementsByTagName("p")[0].innerHTML == name) {
+            return layers[i];
+        }
+    }
+
+    return null;
+}

js/_newPixel.js

@@ -1,6 +1,6 @@
 function newPixel (width, height, palette) {
     // Setting the current layer
-    currentLayer = new Layer(width, height, canvas);
+    currentLayer = new Layer(width, height, canvas, layerListEntry);
     currentLayer.initialize();
 
     // Adding the checkerboard behind it
@@ -38,6 +38,7 @@ function newPixel (width, height, palette) {
 
 		//fill the palette with specified palette
 		createColorPalette(palettes[selectedPalette].colors,true);
+		fillCheckerboard();
 	}
 	else {
 	  //this wasn't a specified palette, so reset the url
@@ -55,14 +56,8 @@ function newPixel (width, height, palette) {
 	  addColor(defaultForegroundColor).classList.add('selected');
 	  addColor(defaultBackgroundColor);
 
-    //fill background of canvas with bg color
+    	//fill background of canvas with bg color
 		fillCheckerboard();
-		/*
-		currentLayer.context.fillStyle = '#'+defaultBackgroundColor;
-		currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
-
-		console.log('#'+defaultBackgroundColor)
-		*/
 
 		//set current drawing color as foreground color
 		currentLayer.context.fillStyle = '#'+defaultForegroundColor;

views/pixel-editor.hbs

@@ -127,16 +127,31 @@
 
     <!-- LAYER MENU -->
     <ul id = "layers-menu">
-        <li class = "layers-menu-entry">
+        <li class = "layers-menu-entry selected-layer">
             <canvas></canvas>
-            <!--<button title="Lock layer" class="lock-layer-button">
+            <ul id class="layer-buttons">
-                <img src="padlock-lock.png">
+                <li>
-            </button>-->
+                    <button title="Lock layer" class="lock-layer-button">
-            <p>Lorem ipsum dolor sit amet consectetur ascendit a very long name for this friggin layer<div class = "gradient">e</div></p>
+                        {{svg "unlockedpadlock.svg" width="15" height="15" class = "default-icon"}}
+                        {{svg "lockedpadlock.svg" width="15" height="15" class = "edited-icon" display = "none"}}
+                    </button>
+                </li>
+                <li>
+                    <button title="Show / hide layer" class="hide-layer-button">
+                        {{svg "visible.svg" width="15" height="15" class = "default-icon"}}
+                        {{svg "invisible.svg" width="15" height="15" class = "edited-icon" display = "none"}}
+                    </button>
+                </li>
+            </ul>
+
+            <p>Layer 0
+                <div class = "gradient"></div></p>
         </li>
 
         <li>
-            <button id = "add-layer-button">Add layer</button>
+            <button id = "add-layer-button">
+                {{svg "plus.svg" width="20" height="20"}} Add layer
+            </button>
         </li>
     </ul>