Fixed #43, #41, #37 and #35

Author: unsettledgames

js/ColorModule.js

@@ -101,7 +101,7 @@ const ColorModule = (() => {
             document.querySelector('#colors-menu li.selected')?.classList.remove('selected');
 
             //set current color
-            updateCurrentColor(e.target.style.backgroundColor);
+            updateCurrentColor(Color.cssToHex(e.target.style.backgroundColor));
 
             //make color selected
             e.target.parentElement.classList.add('selected');
@@ -136,8 +136,6 @@ const ColorModule = (() => {
 
         //show color picker
         addedColor.firstElementChild.jscolor.show();
-        console.log('showing picker');
-
         //hide edit button
         addedColor.lastChild.classList.add('hidden');
     }
@@ -427,6 +425,9 @@ const ColorModule = (() => {
     }
 
     function updateCurrentColor(color, refLayer) {
+        if (color[0] != '#')
+            color = '#' + color;
+
         if (refLayer)
             color = refLayer.context.fillStyle;
 

js/Input.js

@@ -1,6 +1,7 @@
 const Input = (() => {
     let dragging = false;
     let currentMouseEvent = undefined;
+    let lastMouseTarget = undefined;
     let spacePressed = false;
     let altPressed = false;
     let ctrlPressed = false;
@@ -19,6 +20,7 @@ const Input = (() => {
     Events.on("mouseup", window, onMouseUp);
 
     function onMouseDown(event) {
+        lastMouseTarget = event.target;
         currentMouseEvent = event;
         dragging = true;
 
@@ -154,6 +156,10 @@ const Input = (() => {
                 case 32:
                     spacePressed = true;
                     break;
+                case 46:
+                    console.log("Pressed del");
+                    Events.emit("del");
+                    break;
             }
         }
     }
@@ -178,12 +184,17 @@ const Input = (() => {
         return spacePressed;
     }
 
+    function getLastTarget() {
+        return lastMouseTarget;
+    }
+
     return {
         isDragging,
         getCurrMouseEvent,
         getCursorPosition,
         isAltPressed,
         isCtrlPressed,
-        isSpacePressed
+        isSpacePressed,
+        getLastTarget
     }
 })();

js/LayerList.js

@@ -345,11 +345,11 @@ const LayerList = (() => {
             // Merging all the layer but the last one
             for (let i=0; i<visibleLayers.length - 1; i++) {
                 nToFlatten++;
-                console.log(visibleLayers[i].menuEntry.nextElementSibling);
+                
                 new HistoryState().FlattenTwoVisibles(
                     visibleLayers[i + 1].context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
                     visibleLayers[i].menuEntry.nextElementSibling,
-                    layers.indexOf(visibleLayers[i]),
+                    currFile.layers.indexOf(visibleLayers[i]),
                     visibleLayers[i], visibleLayers[i + 1]
                 );
 

js/layers/Layer.js

@@ -50,6 +50,7 @@ class Layer {
         if (this.menuEntry !== undefined) {
             this.name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
             this.menuEntry.id = "layer" + id;
+
             this.menuEntry.onmouseover = () => this.hover();
             this.menuEntry.onmouseout = () => this.unhover();
             this.menuEntry.onclick = () => this.selectLayer();
@@ -63,6 +64,8 @@ class Layer {
             this.menuEntry.addEventListener("dragleave", this.layerDragLeave, false);
             this.menuEntry.addEventListener("dragend", this.layerDragEnd, false);
 
+            Events.onCustom("del", this.tryDelete.bind(this));
+
             this.menuEntry.getElementsByTagName("canvas")[0].getContext('2d').imageSmoothingEnabled = false;
         }
 
@@ -73,6 +76,12 @@ class Layer {
         return this.menuEntry != null;
     }
 
+    tryDelete() {
+        if (Input.getLastTarget() != this.menuEntry && Input.getLastTarget().parentElement != this.menuEntry)
+            return;
+        LayerList.deleteLayer();
+    }
+
     // Initializes the canvas
     initialize() {
         //resize canvas

js/layers/PixelGrid.js

@@ -3,7 +3,7 @@ class PixelGrid extends Layer {
     // Start colour of the pixel grid (can be changed in the preferences)
     pixelGridColor = "#000000";
     // Distance between one line and another in HTML pixels
-    lineDistance = 11;
+    lineDistance = 10;
     // The grid is not visible by default
     pixelGridVisible = false;
     // The grid is enabled, but is disabled in order to save performance with big sprites
@@ -82,6 +82,8 @@ class PixelGrid extends Layer {
 
         this.context.strokeStyle = Settings.getCurrSettings().pixelGridColour;
 
+        console.log("Line ditance: " + this.lineDistance)
+
         // OPTIMIZABLE, could probably be a bit more elegant
         // Draw horizontal lines
         for (let i=0; i<this.canvas.width / Math.round(this.lineDistance); i++) {

package-lock.json

@@ -0,0 +1,39 @@
+{
+  "name": "pixel-editor",
+  "version": "1.0.0",
+  "description": "Online pixel art creation tool",
+  "main": "build.js",
+  "scripts": {
+    "build": "node ./build.js ./build",
+    "serve": "node ./server.js ./build 3000",
+    "test": "npm run build && npm run serve",
+    "hot": "concurrently \"nodemon --exec npm test\" \"await tcp localhost:3000 && open-cli http://localhost:3000\"",
+    "hot:reload": "cross-env RELOAD=yes npm run hot"
+  },
+  "author": "Lospec",
+  "license": "ISC",
+  "nodemonConfig": {
+    "ext": "js,hbs,scss",
+    "ignore": "build/"
+  },
+  "dependencies": {
+    "concurrently": "^6.0.2",
+    "express": "^4.16.4",
+    "fs-extra": "^7.0.1",
+    "gulp": "^4.0.2",
+    "gulp-hb": "^8.0.0",
+    "gulp-include": "^2.3.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^7.0",
+    "handlebars-helper-svg": "^2.0.2",
+    "nodemon": "^2.0.7",
+    "open": "^8.0.6",
+    "open-cli": "^6.0.1",
+    "sass": "^1.17.3"
+  },
+  "devDependencies": {
+    "cross-env": "7.0.3",
+    "reload": "^3.2.0",
+    "wait-cli": "^1.0.0"
+  }
+}