Merge pull request #4 from liamortiz/master

Added Line Tool

css/pixel-editor.scss

@@ -301,7 +301,7 @@ svg {
 }
 
 #pixel-canvas {
-	z-index: 2;
+	z-index: 3;
 	background: transparent;
 }
 
@@ -311,7 +311,7 @@ svg {
 }
 
 #tmp-canvas {
-	z-index: 4;
+	z-index: 5;
 	background: transparent;
 }
 
@@ -687,14 +687,16 @@ svg {
 #tools-menu li button#pencil-bigger-button,
 #tools-menu li button#zoom-in-button,
 #tools-menu li button#eraser-bigger-button,
-#tools-menu li button#rectangle-bigger-button {
+#tools-menu li button#rectangle-bigger-button,
+#tools-menu li button#line-bigger-button {
 	left: 0;
 }
 
 #tools-menu li button#pencil-smaller-button,
 #tools-menu li button#zoom-out-button,
 #tools-menu li button#eraser-smaller-button,
-#tools-menu li button#rectangle-smaller-button {
+#tools-menu li button#rectangle-smaller-button,
+#tools-menu li button#line-smaller-button {
 	right: 0;
 }
 
@@ -705,7 +707,9 @@ svg {
 #tools-menu li.selected button#eraser-bigger-button,
 #tools-menu li.selected button#eraser-smaller-button,
 #tools-menu li.selected button#rectangle-bigger-button,
-#tools-menu li.selected button#rectangle-smaller-button {
+#tools-menu li.selected button#rectangle-smaller-button,
+#tools-menu li.selected button#line-bigger-button,
+#tools-menu li.selected button#line-smaller-button {
 	display: block;
 }
 
@@ -1550,6 +1554,8 @@ div#pb-options {
 	background-color: #232125 !important;
 	opacity: 1 !important;
 
+	display: none !important;
+	
 	#splash-input {
 		width:70%;
 		height:100vh !important;

debug.log

@@ -0,0 +1 @@
+[0114/110029.536:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

js/_hotkeyListener.js

@@ -50,6 +50,9 @@ function KeyPress(e) {
 			case 52: case 80:
 				tool.pan.switchTo();
 				break;
+			case 76:
+				tool.line.switchTo();
+				break;
 			//zoom - 5
 			case 53:
 			  tool.zoom.switchTo();

js/_layer.js

@@ -430,13 +430,13 @@ function duplicateLayer(event, saveHistory = true) {
     for (let i=getMenuEntryIndex(menuEntries, toDuplicate.menuEntry) - 1; i>=0; i--) {
         getLayerByID(menuEntries[i].id).canvas.style.zIndex++;
     }
-    maxZIndex++;
+    maxZIndex+=2;
 
     // Creating a new canvas
     let newCanvas = document.createElement("canvas");
     // Setting up the new canvas
     canvasView.append(newCanvas);
-    newCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex) + 1;
+    newCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex) + 2;
     newCanvas.classList.add("drawingCanvas");
 
 	if (!layerListEntry) return console.warn('skipping adding layer because no document');
@@ -529,7 +529,7 @@ function addLayer(id, saveHistory = true) {
     let newCanvas = document.createElement("canvas");
     // Setting up the new canvas
     canvasView.append(newCanvas);
-    maxZIndex++;
+    maxZIndex+=2;
     newCanvas.style.zIndex = maxZIndex;
     newCanvas.classList.add("drawingCanvas");
 

js/_line.js

@@ -0,0 +1,45 @@
+function diagLine(lastMouseClickPos, zoom, cursorLocation) {
+
+    let x0 = Math.floor(lastMouseClickPos[0]/zoom);
+    let y0 = Math.floor(lastMouseClickPos[1]/zoom);
+    let x1 = Math.floor(cursorLocation[0]/zoom);
+    let y1 = Math.floor(cursorLocation[1]/zoom);
+
+	let dx = Math.abs(x1-x0);
+	let dy = Math.abs(y1-y0);
+	let sx = (x0 < x1 ? 1 : -1);
+	let sy = (y0 < y1 ? 1 : -1);
+    let err = dx-dy;
+
+    const brushSize = tool.line.brushSize;
+    
+    const canvas = document.getElementById('tmp-canvas');
+    const context = canvas.getContext('2d');
+
+	context.fillStyle=currentGlobalColor;
+	context.clearRect(0, 0, canvas.width, canvas.height);
+
+	canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
+
+	//console.log(canvas.style.zIndex, currentLayer.canvas.style.zIndex);
+
+	while (true) {
+        if (currentTool.name !== 'line') return;
+
+        context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+
+		//if we've reached the end goal, exit the loop
+		if ((x0==x1) && (y0==y1)) break;
+		var e2 = 2*err;
+
+		if (e2 >-dy) {
+			err -=dy; 
+			x0+=sx;
+		}
+
+		if (e2 < dx) {
+			err +=dx; 
+			y0+=sy;
+		}
+    }
+}

js/_mouseEvents.js

@@ -22,7 +22,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 		else if (mouseEvent.altKey)
 			currentTool = tool.eyedropper;
 		else if (mouseEvent.target.className == 'drawingCanvas' &&
-			(currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle'))
+			(currentTool.name == 'pencil' || currentTool.name == 'eraser' || currentTool.name == 'rectangle' || currentTool.name === 'line'))
 		    new HistoryStateEditCanvas();
 		else if (currentTool.name == 'moveselection') {
 			if (!cursorInSelectedArea() && 
@@ -50,6 +50,10 @@ window.addEventListener("mousedown", function (mouseEvent) {
 		currentTool = tool.resizerectangle;
 		tool.rectangle.previousBrushSize = tool.rectangle.brushSize;
 	}
+	else if (currentTool.name == 'line' && mouseEvent.which == 3) {
+		currentTool = tool.resizeline;
+		tool.line.previousBrushSize = tool.line.brushSize;
+	}
 
 	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas')
 	    eyedropperPreview.style.display = 'block';
@@ -70,6 +74,15 @@ window.addEventListener("mouseup", function (mouseEvent) {
 		currentLayer.closeOptionsMenu();	
 	}
 
+	// If the user finished placing down a line, clear the tmp canvas and copy the data to the current layer
+	if (currentTool.name === "line") {
+		const tmpCanvas = document.getElementById('tmp-canvas');
+		currentLayer.context.drawImage(tmpCanvas, 0, 0);
+
+		const tmpContext = tmpCanvas.getContext('2d');
+		tmpContext.clearRect(0, 0, tmpCanvas.width, tmpCanvas.height);
+	}
+
 	if (!documentCreated || dialogueOpen || !currentLayer.isVisible || currentLayer.isLocked) return;
 
 	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {
@@ -325,6 +338,21 @@ function draw (mouseEvent) {
 			tool.rectangle.moveBrushPreview(lastMouseClickPos);
 			currentTool.updateCursor();
 		}
+		else if (currentTool.name == 'resizeline' && dragging) {
+			//get new brush size based on x distance from original clicking location
+			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 lineSizeChange = Math.round(distanceFromClick/10);
+			var newLineSize = tool.line.previousBrushSize + lineSizeChange;
+
+			//set the brush to the new size as long as its bigger than 1
+			tool.line.brushSize = Math.max(1, newLineSize);
+
+			//fix offset so the cursor stays centered
+			tool.line.moveBrushPreview(lastMouseClickPos);
+			currentTool.updateCursor();
+		}
 		else if (currentTool.name == 'rectselect') {
 			if (dragging && !isRectSelecting && mouseEvent.target.className == 'drawingCanvas') {
 				isRectSelecting = true;
@@ -346,6 +374,19 @@ function draw (mouseEvent) {
 				updateMovePreview(getCursorPosition(mouseEvent));
 			}
 		}
+		else if (currentTool.name === "line") {
+			if (mouseEvent.target.className == 'drawingCanvas'|| mouseEvent.target.className == 'drawingCanvas') {
+				brushPreview.style.visibility = 'visible';
+			} else {
+				brushPreview.style.visibility = 'hidden';
+			}
+			if (dragging) {
+				if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
+					diagLine(lastMouseClickPos, zoom, cursorLocation);
+				}
+			}
+			currentLayer.updateLayerPreview();
+		}
 	}
 }
 

js/_rectangle.js

@@ -20,7 +20,7 @@ let endRectY;
  */
 function startRectDrawing(mouseEvent) {
     // Putting the vfx layer on top of everything
-    VFXCanvas.style.zIndex = MAX_Z_INDEX;
+    VFXCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;;
     // Updating flag
     isDrawingRect = true;
 
@@ -141,5 +141,5 @@ function setRectToolSvg() {
 }
 
 function applyChanges() {
-    VFXCanvas.style.zIndex = MIN_Z_INDEX;
+    //VFXCanvas.style.zIndex = MIN_Z_INDEX;
 }

js/_toolButtons.js

@@ -75,33 +75,24 @@ on('click',"eyedropper-button", function(){
 	tool.eyedropper.switchTo();
 }, false);
 
-//zoom tool button
-on('click',"zoom-button", function(){
-	tool.zoom.switchTo();
-}, false);
-
-//zoom in button
-on('click','zoom-in-button', function(){
-    //changeZoom('in',[window.innerWidth/2-canvas.offsetLeft,window.innerHeight/2-canvas.offsetTop]);
-    changeZoom('in', [canvasSize[0] * zoom / 2, canvasSize[1] * zoom / 2]);
-
-    for (let i=1; i<layers.length; i++) {
-        layers[i].copyData(layers[0]);
-    }
-}, false);
-
-//zoom out button
-on('click','zoom-out-button', function(){
-    changeZoom('out',[canvasSize[0]*zoom/2,canvasSize[1]*zoom/2]);
-
-    for (let i=1; i<layers.length; i++) {
-        layers[i].copyData(layers[0]);
-    }
-}, false);
-
 //rectangular selection button
 on('click', "rectselect-button", function(){
     tool.rectselect.switchTo();
 }, false);
 
+//line
+on('click',"line-button", function(){
+    tool.line.switchTo();
+}, false);
+
+on('click',"line-bigger-button", function(){
+    tool.line.brushSize++;
+}, false);
+
+on('click',"line-smaller-button", function(){
+    if(tool.line.brushSize > 1)
+    	tool.line.brushSize--;
+}, false);
+
+
 /*global on */

js/pixel-editor.js

@@ -41,6 +41,7 @@
 //=include _drawLine.js
 //=include _getCursorPosition.js
 //=include _fill.js
+//=include _line.js
 //=include _history.js
 //=include _deleteColor.js
 //=include _replaceAllOfColor.js

js/tools/_all.js

@@ -0,0 +1,64 @@
+new Tool('eraser', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+new Tool('resizeeraser', {
+	cursor: 'default',
+});
+
+new Tool('eyedropper', {
+	imageCursor: 'eyedropper',
+});
+
+new Tool('fill', {
+	imageCursor: 'fill',
+});
+
+new Tool('line', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+new Tool('resizeline', {
+	cursor: 'default',
+});
+
+new Tool('pan', {
+	cursor: function () {
+		if (dragging) return 'url(\'/pixel-editor/pan-held.png\'), auto';
+		else return 'url(\'/pixel-editor/pan.png\'), auto';
+	},
+});
+
+new Tool('pencil', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+new Tool('resizebrush', {
+	cursor: 'default',
+});
+
+new Tool('rectangle', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+new Tool('resizerectangle', {
+	cursor: 'default',
+});
+
+new Tool('rectselect', {
+	cursor: 'crosshair',
+	brushPreview: true,
+});
+
+
+new Tool('moveselection', {
+	cursor: 'crosshair',
+});
+
+new Tool('zoom', {
+	imageCursor: 'zoom-in',
+});
+
+//set a default tool
+var currentTool = tool.pencil;
+var currentToolTemp = tool.pencil;

js/tools/_eraser.js

@@ -1,13 +0,0 @@
-
-new Tool('eraser', {
-	cursor: 'crosshair',
-	brushPreview: true,
-});
-
-
-
-new Tool('resizeeraser', {
-	cursor: 'default',
-});
-
-/*global Tool, tool*/

js/tools/_eyedropper.js

@@ -1,7 +0,0 @@
-
-new Tool('eyedropper', {
-	imageCursor: 'eyedropper',
-});
-
-
-/*global Tool, tool*/

js/tools/_fill.js

@@ -1,7 +0,0 @@
-
-new Tool('fill', {
-	imageCursor: 'fill',
-});
-
-
-/*global Tool, tool*/

js/tools/_pan.js

@@ -1,10 +0,0 @@
-
-new Tool('pan', {
-	cursor: function () {
-		if (dragging) return 'url(\'/pixel-editor/pan-held.png\'), auto';
-		else return 'url(\'/pixel-editor/pan.png\'), auto';
-	},
-});
-
-
-/*global Tool, tool*/

js/tools/_pencil.js

@@ -1,17 +0,0 @@
-
-new Tool('pencil', {
-	cursor: 'crosshair',
-	brushPreview: true,
-});
-
-
-new Tool('resizebrush', {
-	cursor: 'default',
-});
-
-
-//set as default tool
-var currentTool = tool.pencil;
-var currentToolTemp = tool.pencil;
-
-/*global Tool, tool*/

js/tools/_rectangle.js

@@ -1,14 +0,0 @@
-
-new Tool('rectangle', {
-	cursor: 'crosshair',
-	brushPreview: true,
-});
-
-
-
-new Tool('resizerectangle', {
-	cursor: 'default',
-});
-
-
-/*global Tool, tool*/

js/tools/_select.js

@@ -1,14 +0,0 @@
-
-
-new Tool('rectselect', {
-	cursor: 'crosshair',
-	brushPreview: true,
-});
-
-
-new Tool('moveselection', {
-	cursor: 'crosshair',
-});
-
-
-/*global Tool, tool*/

js/tools/_zoom.js

@@ -1,6 +0,0 @@
-
-new Tool('zoom', {
-	imageCursor: 'zoom-in',
-});
-
-/*global Tool, tool*/

views/pixel-editor.hbs

@@ -130,10 +130,11 @@
         <li><button title="Eyedropper Tool (E)" id="eyedropper-button">{{svg "eyedropper.svg" width="32" height="32"}}</button></li>
 
         <li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
+        
         <li class="expanded">
-            <button title="Zoom Tool (Z)" id="zoom-button">{{svg "zoom.svg" width="32" height="32"}}</button>
+            <button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
-            <button title="Zoom In" id="zoom-in-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
+            <button title="Increase Line Size" id="line-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
-            <button title="Zoom Out" id="zoom-out-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
+            <button title="Decrease Line Size" id="line-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
         </li>
 
         <li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>