Finished Line Tool

css/pixel-editor.scss

@@ -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;
 }
 
@@ -1549,7 +1553,6 @@ div#pb-options {
 
 	background-color: #232125 !important;
 	opacity: 1 !important;
-	display: none !important;
 	
 	#splash-input {
 		width:70%;

debug.log

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

js/_line.js

@@ -11,11 +11,31 @@ function diagLine(lastMouseClickPos, zoom, cursorLocation) {
 	let sy = (y0 < y1 ? 1 : -1);
     let err = dx-dy;
 
-    const brushSize = 1;
+    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);
+
+	while (true) {
         if (currentTool.name !== 'line') return;
 
-    currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+        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') {
@@ -347,6 +360,11 @@ function draw (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);

js/_toolButtons.js

@@ -85,4 +85,14 @@ 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/tools/_line.js

@@ -2,3 +2,7 @@ new Tool('line', {
 	cursor: 'crosshair',
 	brushPreview: true,
 });
+
+new Tool('resizeline', {
+	cursor: 'default',
+});

views/pixel-editor.hbs

@@ -131,8 +131,10 @@
 
         <li><button title="Pan Tool (P)" id="pan-button">{{svg "pan.svg" width="32" height="32"}}</button></li>
         
-        <li>
+        <li class="expanded">
             <button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</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="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>