Working on line tool

css/pixel-editor.scss

@@ -1549,6 +1549,7 @@ div#pb-options {
 
 	background-color: #232125 !important;
 	opacity: 1 !important;
+	display: none !important;
 
 	#splash-input {
 		width:70%;

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/_line.js

@@ -0,0 +1,21 @@
+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 = 1;
+
+	
+    if (currentTool.name !== 'line') return;
+
+    currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+	
+}

js/_mouseEvents.js

@@ -346,6 +346,14 @@ function draw (mouseEvent) {
 				updateMovePreview(getCursorPosition(mouseEvent));
 			}
 		}
+		else if (currentTool.name === "line") {
+			if (dragging) {
+				if (mouseEvent.target.className == 'drawingCanvas' || mouseEvent.target.className == 'drawingCanvas') {
+					diagLine(lastMouseClickPos, zoom, cursorLocation);
+				}
+			}
+			currentLayer.updateLayerPreview();
+		}
 	}
 }
 

js/_toolButtons.js

@@ -75,33 +75,14 @@ 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);
+
 /*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/_line.js

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

views/pixel-editor.hbs

@@ -130,10 +130,9 @@
         <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="Zoom In" id="zoom-in-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>
+        
+        <li>
+            <button title="Line Tool (L)" id="line-button">{{svg "line.svg" width="32" height="32"}}</button>
         </li>
 
         <li><button title = "Rectangular Selection Tool (M)" id = "rectselect-button">{{svg "rectselect.svg" width = "32" height = "32"}}</button><li>