Merge pull request #2 from unsettledgames/minor-changes

Merge minor changes

css/pixel-editor.scss

@@ -947,6 +947,102 @@ svg {
 	display: none;
 }
 
+#resize-canvas {
+  display:flex;
+  position:relative;
+  flex-wrap:wrap;
+}
+
+#pivot-menu {
+  position: relative;
+  display:inline-flex;
+  flex-wrap:wrap;
+  vertical-align:middle;
+  text-align:center;
+  width:150px;
+
+  button {
+    margin-right:10px;
+    margin-bottom:10px;
+    position:relative;
+    width:40px;
+    height:40px;
+    background-color:color(base, background);
+    border:none;
+    
+    path {
+      fill:color(menu, foreground);
+    }
+    transition: background 150ms ease-in-out, 
+                transform 150ms ease;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  button:hover,
+  button:focus {
+      cursor:pointer;
+      background-color: color(base, foreground);
+      path {
+        fill:color(base, foreground, bold);
+      }
+      border: 2px solid color(base, foreground);
+  }
+  button:active {
+      transform: scale(0.95);
+  }
+}
+
+#borders-menu {
+  display:flex;
+  position:relative;
+  flex-wrap: wrap;
+  width:250px;
+  float:right;
+  vertical-align:middle;
+  font-size:15px;
+  left:10px;
+  text-align:center;
+
+  input {
+    position:relative;
+    margin-left:10px;
+    width:10px;
+    height:10px;
+  }
+
+  h2 {
+    position:relative;
+    display:inline-block;
+  }
+
+  span {
+    padding-right:10px;
+    float:left;
+    position:relative;
+    display: flex;
+    vertical-align:middle;
+    height:40px;
+  }
+}
+
+#resize-canvas-confirm {
+  background: color(button);
+  border: none;
+  font-size:18px;
+  border-radius: 4px;
+  color: color(button, foreground);
+  padding: 10px 20px;
+  cursor: pointer;
+  margin: 0 auto;
+  position:relative;
+  top:10px;
+  display: block;
+  &:hover {
+    background: color(button, background, hover);
+  }
+}
+
 #compatibility-warning {
 	display: flex;
 	justify-content: center;

js/_addColor.js

@@ -4,7 +4,6 @@ let currentPalette = [];
 //input hex color string
 //returns list item element
 function addColor (newColor) {
-
     //add # at beginning if not present
     if (newColor.charAt(0) != '#')
         newColor = '#' + newColor;
@@ -19,13 +18,6 @@ function addColor (newColor) {
     button.addEventListener('mouseup', clickedColor);
     listItem.appendChild(button);
 
-    /*
-        //create input to hold color value
-    var colorValue = document.createElement("input");
-    colorValue.classList.add("color-value");
-    listItem.appendChild(colorValue);
-    */
-
     //insert new listItem element at the end of the colors menu (right before add button)
     colorsMenu.insertBefore(listItem, colorsMenu.children[colorsMenu.children.length-1]);
 

js/_addColorButton.js

@@ -44,7 +44,7 @@ on('click', 'add-color-button', function(){
     //add new color and make it selected
     var addedColor = addColor(newColor);
     addedColor.classList.add('selected');
-    context.fillStyle = '#' + newColor;
+    currentLayer.context.fillStyle = '#' + newColor;
 
     //add history state
     //saveHistoryState({type: 'addcolor', colorValue: addedColor.firstElementChild.jscolor.toString()});

js/_changeZoom.js

@@ -11,7 +11,7 @@ function changeZoom (layer, direction, cursorLocation) {
 		newHeight = canvasSize[1] * zoom;
 
 		//adjust canvas position
-		setCanvasOffset(layer.canvas, layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth)
+		layer.setCanvasOffset(layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth);
 	}
 	//if you want to zoom in
 	else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){
@@ -20,7 +20,7 @@ function changeZoom (layer, direction, cursorLocation) {
 		newHeight = canvasSize[1] * zoom;
 
 		//adjust canvas position
-		setCanvasOffset(layer.canvas, layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight))
+		layer.setCanvasOffset(layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight));
 	}
 
 	//resize canvas

js/_copyPaste.js

@@ -6,9 +6,6 @@ let copiedStartY;
 let copiedEndX;
 let copiedEndY;
 
-// BUG: when merging tmp layer to currentLayer there are offset problems
-// FIX: maybe copy the entire tmp layer and paste it so that the merging happens at 0,0
-
 function copySelection() {
 	copiedEndX = endX;
 	copiedEndY = endY;
@@ -65,9 +62,4 @@ function cutSelectionTool() {
 		clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1);
 		currentLayer.context.clearRect(startX - 0.5, startY - 0.5, endX - startX + 1, endY - startY + 1);
 	}
-	
-	// Moving those pixels from the current layer to the tmp layer
-	//TMPLayer.context.putImageData(imageDataToMove, startX + 1, startY);
-
-    //originalDataPosition = [currentPos[0], currentPos[1]];
 }

js/_drawLine.js

@@ -30,7 +30,5 @@ function line(x0,y0,x1,y1, brushSize) {
 			err +=dx; 
 			y0+=sy;
 		}
-
-		console.log(x0 + ", " + x1);
 	}
 }

js/_editorMode.js

@@ -26,11 +26,8 @@ function switchMode(currentMode, mustConfirm = true) {
 
     //switch to basic mode
     else {
-
-
 		//if there is a current layer (a document is active)
         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?')) {

js/_getCursorPosition.js

@@ -15,25 +15,5 @@ function getCursorPosition(e) {
     x -= canvas.offsetLeft;
     y -= canvas.offsetTop;
 
-    return [x,y];
+    return [Math.round(x), Math.round(y)];
-}
+}
-
-//get cursor position relative to canvas
-function getCursorPositionRelative(e, layer) {
-    var x;
-    var y;
-
-    if (e.pageX != undefined && e.pageY != undefined) {
-        x = e.pageX;
-        y = e.pageY;
-    }
-    else {
-        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;			
-    }
-
-    x -= layer.canvas.offsetLeft;
-    y -= layer.canvas.offsetTop;
-
-    return [x,y];
-}

js/_layer.js

@@ -160,6 +160,31 @@ class Layer {
         this.canvas.style.width = newWidth;
         this.canvas.style.height = newHeight;
     }
+
+    setCanvasOffset (offsetLeft, offsetTop) {
+        //horizontal offset
+        var minXOffset = -this.canvasSize[0] * zoom + 164;
+        var maxXOffset = window.innerWidth - 148;
+    
+        if 	(offsetLeft < minXOffset)
+            this.canvas.style.left = minXOffset +'px';
+        else if (offsetLeft > maxXOffset)
+            this.canvas.style.left = maxXOffset +'px';
+        else
+            this.canvas.style.left = offsetLeft +'px';
+    
+        //vertical offset
+        var minYOffset = -this.canvasSize[1] * zoom + 164;
+        var maxYOffset = window.innerHeight - 100;
+    
+        if 	(offsetTop < minYOffset)
+            this.canvas.style.top = minYOffset +'px';
+        else if (offsetTop > maxYOffset)
+            this.canvas.style.top = maxYOffset +'px';
+        else
+            this.canvas.style.top = offsetTop +'px';
+    }
+
     // Copies the otherCanvas' position and size
     copyData(otherCanvas) {
         this.canvas.style.width = otherCanvas.canvas.style.width;
@@ -219,9 +244,10 @@ class Layer {
             layer.menuEntry.classList.add("selected-layer");
             currentLayer = layer;
         }
-
+/*
         canvas = currentLayer.canvas;
         context = currentLayer.context;
+*/
     }
 
     toggleLock() {

js/_mouseEvents.js

@@ -1,5 +1,5 @@
 var currentMouseEvent;
-var lastMousePos;
+var lastMouseMovePos;
 
 //mousedown - start drawing
 window.addEventListener("mousedown", function (mouseEvent) {
@@ -12,7 +12,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 	//prevent right mouse clicks and such, which will open unwanted menus
 	//mouseEvent.preventDefault();
 
-	lastPos = getCursorPosition(mouseEvent);
+	lastMouseClickPos = getCursorPosition(mouseEvent);
 
 	dragging = true;
 	//left or right click ?
@@ -176,23 +176,21 @@ function setPreviewPosition(preview, cursor, size){
 //mouse is moving on canvas
 window.addEventListener("mousemove", draw, false);
 function draw (mouseEvent) {
-	lastMousePos = getCursorPosition(mouseEvent);
+	lastMouseMovePos = getCursorPosition(mouseEvent);
 	// Saving the event in case something else needs it
 	currentMouseEvent = mouseEvent;
 
-	var cursorLocation = lastMousePos;
+	var cursorLocation = lastMouseMovePos;
 
 	//if a document hasnt yet been created or the current layer is locked, exit this function
 	if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
 
-
+	// Moving brush preview
+	currentTool.moveBrushPreview(cursorLocation);
+	// Hiding eyedropper, will be shown if it's needed
 	eyedropperPreview.style.display = 'none';
 
 	if (currentTool.name == 'pencil') {
-		//move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px';
-		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - tool.pencil.brushSize * zoom / 2 + 'px';
-
 		//hide brush preview outside of canvas / canvas view
 		if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
 		  brushPreview.style.visibility = 'visible';
@@ -202,13 +200,13 @@ function draw (mouseEvent) {
 		//draw line to current pixel
 		if (dragging) {
 			if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
-				line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize);
+				line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), tool.pencil.brushSize);
-				lastPos = cursorLocation;
+				lastMouseClickPos = cursorLocation;
 			}
 		}
 
 		//get lightness value of color
-		var selectedColor = context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
+		var selectedColor = currentLayer.context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
 		var colorLightness = Math.max(selectedColor[0],selectedColor[1],selectedColor[2])
 
 		//for the darkest 50% of colors, change the brush preview to dark mode
@@ -219,11 +217,6 @@ function draw (mouseEvent) {
 	}
 	// Decided to write a different implementation in case of differences between the brush and the eraser tool
 	else if (currentTool.name == 'eraser') {
-	    // Uses the same preview as the brush
-        //move the brush preview
-        brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px';
-        brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - currentTool.brushSize * zoom / 2 + 'px';
-
         //hide brush preview outside of canvas / canvas view
         if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas')
             brushPreview.style.visibility = 'visible';
@@ -233,8 +226,8 @@ function draw (mouseEvent) {
         //draw line to current pixel
         if (dragging) {
             if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
-                line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize);
+                line(Math.floor(lastMouseClickPos[0]/zoom),Math.floor(lastMouseClickPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom), currentTool.brushSize);
-                lastPos = cursorLocation;
+                lastMouseClickPos = cursorLocation;
             }
         }
 
@@ -242,10 +235,6 @@ function draw (mouseEvent) {
 	}
 	else if (currentTool.name == 'rectangle')
 	{
-		//move the brush preview
-		brushPreview.style.left = cursorLocation[0] + currentLayer.canvas.offsetLeft - currentTool.brushSize * zoom / 2 + 'px';
-		brushPreview.style.top = cursorLocation[1] + currentLayer.canvas.offsetTop - currentTool.brushSize * zoom / 2 + 'px';
-
 		//hide brush preview outside of canvas / canvas view
 		if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas')
 		  brushPreview.style.visibility = 'visible';
@@ -261,7 +250,7 @@ function draw (mouseEvent) {
 	}
 	else if (currentTool.name == 'pan' && dragging) {
 	    // Setting first layer position
-        setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastPos[1]));
+        setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastMouseClickPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastMouseClickPos[1]));
         // Copying that position to the other layers
         for (let i=1; i<layers.length; i++) {
             layers[i].copyData(layers[0]);
@@ -284,7 +273,7 @@ function draw (mouseEvent) {
     }
     else if (currentTool.name == 'resizebrush' && dragging) {
         //get new brush size based on x distance from original clicking location
-        var distanceFromClick = cursorLocation[0] - lastPos[0];
+        var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0];
         //var roundingAmount = 20 - Math.round(distanceFromClick/10);
         //this doesnt work in reverse...  because... it's not basing it off of the brush size which it should be
         var brushSizeChange = Math.round(distanceFromClick/10);
@@ -294,31 +283,27 @@ function draw (mouseEvent) {
         tool.pencil.brushSize = Math.max(1,newBrushSize);
 
         //fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.pencil.brushSize * zoom / 2 + 'px';
+        tool.pencil.moveBrushPreview(lastMouseClickPos);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.pencil.brushSize * zoom / 2 + 'px';
-
         currentTool.updateCursor();
     }
     else if (currentTool.name == 'resizeeraser' && dragging) {
         //get new brush size based on x distance from original clicking location
-        var distanceFromClick = cursorLocation[0] - lastPos[0];
+        var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0];
         //var roundingAmount = 20 - Math.round(distanceFromClick/10);
         //this doesnt work in reverse...  because... it's not basing it off of the brush size which it should be
         var eraserSizeChange = Math.round(distanceFromClick/10);
         var newEraserSizeChange = tool.eraser.previousBrushSize + eraserSizeChange;
 
         //set the brush to the new size as long as its bigger than 1
-        tool.eraser.brushSize = Math.max(1,newEraserSizeChange);
+		tool.eraser.brushSize = Math.max(1,newEraserSizeChange);
-
+		
-        //fix offset so the cursor stays centered
+		//fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.eraser.brushSize * zoom / 2 + 'px';
+		tool.eraser.moveBrushPreview(lastMouseClickPos);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.eraser.brushSize * zoom / 2 + 'px';
-
         currentTool.updateCursor();
     }
     else if (currentTool.name == 'resizerectangle' && dragging) {
     	//get new brush size based on x distance from original clicking location
-        var distanceFromClick = cursorLocation[0] - lastPos[0];
+        var distanceFromClick = cursorLocation[0] - lastMouseClickPos[0];
         //var roundingAmount = 20 - Math.round(distanceFromClick/10);
         //this doesnt work in reverse...  because... it's not basing it off of the brush size which it should be
         var rectangleSizeChange = Math.round(distanceFromClick/10);
@@ -327,10 +312,8 @@ function draw (mouseEvent) {
         //set the brush to the new size as long as its bigger than 1
         tool.rectangle.brushSize = Math.max(1,newRectangleSize);
 
-        //fix offset so the cursor stays centered
+		//fix offset so the cursor stays centered
-        brushPreview.style.left = lastPos[0] + currentLayer.canvas.offsetLeft - tool.rectangle.brushSize * zoom / 2 + 'px';
+		tool.rectangle.moveBrushPreview(lastMouseClickPos);
-        brushPreview.style.top = lastPos[1] + currentLayer.canvas.offsetTop - tool.rectangle.brushSize * zoom / 2 + 'px';
-
         currentTool.updateCursor();
     }
     else if (currentTool.name == 'rectselect') {
@@ -356,25 +339,21 @@ function draw (mouseEvent) {
     }
 }
 
-//mousewheel scrroll
+//mousewheel scroll
 canvasView.addEventListener("wheel", function(mouseEvent){
-
+	let mode;
-	if (currentTool.name == 'zoom' || mouseEvent.altKey) {
+	if (mouseEvent.deltaY < 0){
-		let mode;
+		mode = 'in';
-		if (mouseEvent.deltaY < 0){
+	}
-			mode = 'in';
+	else if (mouseEvent.deltaY > 0) {
-        }
+		mode = 'out';
-        else if (mouseEvent.deltaY > 0) {
-            mode = 'out';
-        }
-
-        // Changing zoom and position of the first layer
-        changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
-
-        for (let i=1; i<layers.length; i++) {
-            // Copying first layer's data into the other layers
-            layers[i].copyData(layers[0]);
-		}
 	}
 
+	// Changing zoom and position of the first layer
+	changeZoom(layers[0], mode, getCursorPosition(mouseEvent));
+
+	for (let i=1; i<layers.length; i++) {
+		// Copying first layer's data into the other layers
+		layers[i].copyData(layers[0]);
+	}
 });

js/_newPixel.js

@@ -7,9 +7,8 @@ function newPixel (width, height, editorMode, fileContent = null) {
 	if (firstPixel) {
 		layerListEntry = layerList.firstElementChild;
 
-		// Setting up the current layer
 	    currentLayer = new Layer(width, height, canvas, layerListEntry);
-	    canvas.style.zIndex = 2;
+	    currentLayer.canvas.style.zIndex = 2;
 	}
 	else {
 		let nLayers = layers.length;
@@ -40,9 +39,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
 	    layers[1] = new Layer(width, height, layers[1].canvas, layers[1].menuEntry);
 	    currentLayer = layers[1];
 
-	    canvas = currentLayer.canvas;
+	    currentLayer.canvas.style.zIndex = 2;
-	    context = currentLayer.context;
-	    canvas.style.zIndex = 2;
 	}
 
     // Adding the checkerboard behind it

js/_rectangle.js

@@ -53,8 +53,6 @@ function endRectDrawing(mouseEvent) {
 		startRectY = tmp;
 	}
 
-	let hexColor = hexToRgb(currentLayer.context.fillStyle);
-
 	// Resetting this
 	isDrawingRect = false;
 	// Drawing the rect

js/_resizeCanvas.js

@@ -0,0 +1,46 @@
+let resizeCanvasContainer = document.getElementById("resize-canvas");
+
+function openResizeCanvasWindow() {
+    showDialogue('resize-canvas');
+    console.log("aperta");
+    initButtons();
+}
+
+function initButtons() {
+    let buttons = document.getElementsByClassName("pivot-button");
+
+    console.log("length: " + buttons.length);
+
+    for (let i=0; i<buttons.length; i++) {
+        buttons[i].addEventListener("click", changePivot);
+    }
+}
+
+function changePivot(event) {
+    console.log("sas");
+    console.log(event.target);
+}
+
+// Use a dialogue
+    // Let the user specify data
+        // Borders
+        // Pivot
+    // Apply the new sizing
+    // Move the images on the layers to fit what the user actually decided
+
+// Function to handle dropdown menu for pivots
+    // Open when clicking on the button
+    // Save the chosen pivot
+    // Close the menu
+
+// Function to retrieve data from the input field
+    // Store the data in the form into variables
+    // Call the function to resize the canvases
+
+// Function to actually resize the canvases
+    // Save all imageDatas
+    // Resize the canvases
+    // Clear the canvases
+
+// Function to place the imageDatas as specified in the pivot section
+    // Put the imageDatas in the right position

js/_setCanvasOffset.js

@@ -1,23 +0,0 @@
-function setCanvasOffset (canvas, offsetLeft, offsetTop) {
-    //horizontal offset
-    var minXOffset = -canvasSize[0]*zoom+ 164;
-    var maxXOffset = window.innerWidth - 148;
-
-    if 	(offsetLeft < minXOffset)
-        canvas.style.left = minXOffset +'px';
-    else if (offsetLeft > maxXOffset)
-        canvas.style.left = maxXOffset +'px';
-    else
-        canvas.style.left = offsetLeft +'px';
-
-    //vertical offset
-    var minYOffset = -canvasSize[1]*zoom + 164;
-    var maxYOffset = window.innerHeight-100;
-
-    if 	(offsetTop < minYOffset)
-        canvas.style.top = minYOffset +'px';
-    else if (offsetTop > maxYOffset)
-        canvas.style.top = maxYOffset +'px';
-    else
-        canvas.style.top = offsetTop +'px';
-}

js/_tools.js

@@ -64,6 +64,40 @@ class Tool {
 		//change cursor
 		this.updateCursor();
 	}
+
+	updateCursor () {
+		//switch to that tools cursor
+		canvasView.style.cursor = this.cursor || 'default';
+	
+		//if the tool uses a brush preview, make it visible and update the size
+		if (this.brushPreview) {
+			//console.log('brush size',this.currentBrushSize)
+			brushPreview.style.display = 'block';
+			brushPreview.style.width = this.currentBrushSize * zoom + 'px';
+			brushPreview.style.height = this.currentBrushSize * zoom + 'px';
+		}
+	
+		//show / hide eyedropper color preview
+		if (this.eyedropperPreview) eyedropperPreview.style.display = 'block';
+		else eyedropperPreview.style.display = 'none';
+	
+		//moveSelection
+		if (currentTool.name == 'moveselection') {
+			if (cursorInSelectedArea()) {
+				canMoveSelection = true;
+				canvasView.style.cursor = 'move';
+				brushPreview.style.display = 'none';
+			}
+			else {
+				canvasView.style.cursor = 'crosshair';
+			}
+		}
+	}
+
+	moveBrushPreview(cursorLocation) {
+		brushPreview.style.left = (Math.ceil(cursorLocation[0] / zoom) * zoom + currentLayer.canvas.offsetLeft - this.currentBrushSize * zoom / 2 - zoom / 2) + 'px';
+		brushPreview.style.top = (Math.ceil(cursorLocation[1] / zoom) * zoom + currentLayer.canvas.offsetTop - this.currentBrushSize * zoom / 2 - zoom / 2) + 'px';
+	}
 }
 
 

js/_updateCursor.js

@@ -1,35 +0,0 @@
-
-
-//set the correct cursor for the current tool
-Tool.prototype.updateCursor = function () {
-	//console.log('updateCursor()', currentTool)
-
-	//switch to that tools cursor
-	canvasView.style.cursor = this.cursor || 'default';
-
-	//if the tool uses a brush preview, make it visible and update the size
-	if (this.brushPreview) {
-		//console.log('brush size',this.currentBrushSize)
-		brushPreview.style.display = 'block';
-        brushPreview.style.width = this.currentBrushSize * zoom + 'px';
-        brushPreview.style.height = this.currentBrushSize * zoom + 'px';
-	}
-
-	//show / hide eyedropper color preview
-	if (this.eyedropperPreview) eyedropperPreview.style.display = 'block';
-	else eyedropperPreview.style.display = 'none';
-
-	//moveSelection
-	if (currentTool.name == 'moveselection') {
-		if (cursorInSelectedArea()) {
-			canMoveSelection = true;
-			canvasView.style.cursor = 'move';
-			brushPreview.style.display = 'none';
-		}
-		else {
-			canvasView.style.cursor = 'crosshair';
-		}
-	}
-}
-
-/*global Tool, dragging, canvasView, brushPreview, canMoveSelection, cursorInSelectedArea, eyedropperPreview, zoom, currentTool */

js/_variables.js

@@ -1,7 +1,7 @@
 //init variables
 var canvasSize,zoom;
 var dragging = false;
-var lastPos = [0,0];
+var lastMouseClickPos = [0,0];
 var dialogueOpen = false;
 var documentCreated = false;
 var pixelEditorMode;
@@ -26,7 +26,6 @@ var popUpContainer = document.getElementById("pop-up-container");
 
 // main canvas
 var canvas = document.getElementById('pixel-canvas');
-var context = canvas.getContext('2d');
 var currentGlobalColor;
 
 // Layers

js/pixel-editor.js

@@ -44,6 +44,7 @@
 //=include _checkerboard.js
 //=include _layer.js
 //=include _copyPaste.js
+//=include _resizeCanvas.js
 
 /**load file**/
 //=include _loadImage.js

js/tools/_select.js

@@ -2,6 +2,7 @@
 
 new Tool('rectselect', {
 	cursor: 'crosshair',
+	brushPreview: true,
 });
 
 

views/pixel-editor.hbs

@@ -52,6 +52,8 @@
         <li>
             <button>Edit</button>
             <ul>
+                <li><button id="resize-canvas-button" onclick = "openResizeCanvasWindow()">Resize canvas</button></li>
+                <li><button id="resize-sprite-button">Resize sprite</button></li>
                 <li><button id="undo-button" class="disabled">Undo</button></li>
                 <li><button id="redo-button" class="disabled">Redo</button></li>
             </ul>
@@ -187,6 +189,7 @@
         </li>
     </ul>
 
+    <!-- TOOL PREVIEWS -->
     <div id="eyedropper-preview"></div>
     <div id="brush-preview"></div>
 
@@ -217,7 +220,8 @@
       {{svg "adjust.svg" width="20" height="20" }}
     </div>
 
-    <div id="pop-up-container">
+    <div id="pop-up-container" id = "new-pixel-container">
+        <!-- NEW PIXEL -->
         <div id="new-pixel">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
             <h1>New Pixel</h1>
@@ -245,6 +249,44 @@
                 <button id="create-button" class="default">Create</button>
             </div>
         </div>
+        <!--CANVAS RESIZE-->
+        <div id = "resize-canvas">
+            <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
+            <h1>Resize canvas</h1>
+
+            <!--PIVOTS-->
+            <span id = "pivot-menu">
+                <button class="pivot-button" value="topleft">{{svg "arrows/topleft.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="top">{{svg "arrows/top.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="topright">{{svg "arrows/topright.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="left">{{svg "arrows/left.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="middle">{{svg "arrows/middle.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="right">{{svg "arrows/right.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="bottomleft">{{svg "arrows/bottomleft.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="bottom">{{svg "arrows/bottom.svg" width="20" height="20"}}</button>
+                <button class="pivot-button" value="bottomright">{{svg "arrows/bottomright.svg" width="20" height="20"}}</button>
+            </span>
+            <!--BORDERS-->
+            <span id = "borders-menu">
+                <span>
+                    Left: <input id="border-left" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                </span>
+                
+                <span>
+                    Right: <input id="border-right" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                </span>
+                
+                <span>
+                    Top: <input id="border-top" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                </span>
+                
+                <span>
+                    Bottom: <input id="border-bottom" value="{{#if border}}{{border}}{{else}}0{{/if}}" autocomplete="off"/>
+                </span>
+
+                <button id = "resize-canvas-confirm">Resize canvas</button>
+            </span>            
+        </div>
         <div id="help">
             <button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
             <h1>Help</h1>