Finished Line Tool

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');
 
-	
-    if (currentTool.name !== 'line') return;
+    context.fillStyle=currentGlobalColor;
+    context.clearRect(0, 0, canvas.width, canvas.height);
 
-    currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
-	
+	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') {
@@ -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

@@ -1,4 +1,8 @@
 new Tool('line', {
-    cursor: 'crosshair',
+	cursor: 'crosshair',
 	brushPreview: true,
+});
+
+new Tool('resizeline', {
+	cursor: 'default',
 });