Updated readme

README.md

@@ -14,12 +14,10 @@ Suggestions / Planned features:
 
 - Line tool
 - Resize canvas
-- Snap brush preview to pixel grid
+- Resize sprite
-- Move selection with arrows
 - Load palette from LPE file
-- Move colours in palette editor
+- Move colours in (advanced) palette editor
 - Duplicate layer
-- Hide non-hovered layers
 - Symmetry options
 
 - Custom color picker
@@ -33,9 +31,6 @@ Suggestions / Planned features:
     - Stack colors when too many
     - Fix popups
 
-- Show colors which would need to be added to palette
-
-- Palette option remove unused colors
 - Pixel Grid
     - Another currentLayer.canvas
     - Must be rescaled each zoom
@@ -44,6 +39,17 @@ Suggestions / Planned features:
 - Bug fix
     - Alt + scroll broken
 	
+- Polish:
+	- Show colors which would need to be added to palette
+	- Warning windows for wrong inputs
+	- Hide non-hovered layers
+	- Snap brush preview to pixel grid
+	- Palette option remove unused colors
+	- Move selection with arrows
+	- Update pivot buttons when resizing canvas
+	- Update borders by dragging the canvas' edges with the mouse when resizing canvas
+	- Move the canvases so they're centered after resizing the canvas (maybe a .center() method in layer class)
+
 ## How to Contribute
 
 Requirements: you must have node.js and git installed.

css/pixel-editor.scss

@@ -974,8 +974,8 @@ svg {
     path {
       fill:$basehovericon;
     }
-    transition: background 150ms ease-in-out, 
+    transition: background 100ms ease-in-out, 
-                transform 150ms ease;
+                transform 100ms ease;
     -webkit-appearance: none;
     -moz-appearance: none;
   }
@@ -1004,6 +1004,28 @@ svg {
   left:10px;
   text-align:center;
 
+  button {
+	background:$basehover;
+	border:none;
+    
+    color: $basehovericon;
+    transition: background 100ms ease-in-out, 
+                transform 100ms ease;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  button:hover,
+  button:focus {
+      cursor:pointer;
+      background-color: $baseicon;
+      color:$basehovericonhover;
+      border: 2px solid color(base, foreground);
+  }
+  button:active {
+      transform: scale(0.95);
+  }
+
   input {
     position:relative;
     margin-left:10px;

js/_resizeCanvas.js

@@ -45,8 +45,8 @@ function changedBorder(event) {
 }
 
 function changedSize(event) {
-    let widthOffset = document.getElementById("rc-width").value - layers[0].canvasSize[0];
+    let widthOffset = Math.abs(document.getElementById("rc-width").value) - layers[0].canvasSize[0];
-    let heightOffset = document.getElementById("rc-height").value - layers[0].canvasSize[1];
+    let heightOffset = Math.abs(document.getElementById("rc-height").value) - layers[0].canvasSize[1];
 
     let left = Math.round(widthOffset / 2);
     let right = widthOffset - left;
@@ -139,11 +139,6 @@ function resizeCanvas(event) {
             break;
     }
 
-    /*
-    leftOffset = Math.abs(leftOffset);
-    topOffset = Math.abs(topOffset);
-    */
-   
     for (let i=0; i<layers.length; i++) {
         if (layers[i].menuEntry != null) {
             layers[i].context.putImageData(imageDatas[copiedDataIndex], leftOffset, topOffset);