Added back line tool

README.md

@@ -22,15 +22,18 @@ Suggestions / Planned features:
 - Tiled mode
 - Load palette from LPE file
 - Symmetry options (currently being worked on)
+- Make a palette grid instead of having a huge stack on the right when colours are too many
+- Possibly add collaborate function
+
+- Code refactoring
+    - Find inefficient sections (nested loops, useless / inefficient parts)
+    - Create classes ResizableTool and SelectionTool. Make them inherit from Tool, avoid creating brush resizing functions each time for each tool that can be resized
 
 - Mobile
     - Touch equivalent for mouse clicks
     - Hide or scale ui
     - Maybe rearrange UI on portrait
-    - Stack colors when too many
     - Fix popups
-    
-- Possibly add collaborate function
 	
 - Polish:
     - ctrl a to select everything / selection -> all, same for deselection

js/ToolManager.js

@@ -1,9 +1,11 @@
 const ToolManager = (() => {
-    brush = new BrushTool("brush", {type: 'html'}, switchTool);
-    eraser = new EraserTool("eraser", {type: 'html'}, switchTool);
-    rectangle = new RectangleTool("rectangle", {type: 'html'}, switchTool);
+    brushTool = new BrushTool("brush", {type: 'html'}, switchTool);
+    eraserTool = new EraserTool("eraser", {type: 'html'}, switchTool);
+    rectangleTool = new RectangleTool("rectangle", {type: 'html'}, switchTool);
+    lineTool = new LineTool("line", {type: 'html'}, switchTool);
 
-    currTool = brush;
+    currTool = brushTool;
+    currTool.onSelect();
 
     Events.on("mouseup", window, onMouseUp);
     Events.on("mousemove", window, onMouseMove);

js/_line.js

@@ -1,44 +0,0 @@
-// LINE TOOL
-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.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/_toolButtons.js

@@ -45,18 +45,4 @@ Events.on('click',"eyedropper-button", function(){
 //rectangular selection button
 Events.on('click', "rectselect-button", function(){
     tool.rectselect.switchTo();
-}, false);
-
-//line
-Events.on('click',"line-button", function(){
-    tool.line.switchTo();
-}, false);
-
-Events.on('click',"line-bigger-button", function(){
-    tool.line.brushSize++;
-}, false);
-
-Events.on('click',"line-smaller-button", function(){
-    if(tool.line.brushSize > 1)
-    	tool.line.brushSize--;
 }, false);

js/pixel-editor.js

@@ -10,6 +10,7 @@
 //=include Dialogue.js
 //=include History.js
 
+//=include _drawLine.js
 //=include _tools.js
 //=include tools/*.js
 //=include ToolManager.js
@@ -30,9 +31,7 @@
 /**functions**/
 //=include _changeZoom.js
 //=include ColorModule.js
-//=include _drawLine.js
 //=include _fill.js
-//=include _line.js
 //=include _checkerboard.js
 //=include _copyPaste.js
 //=include _resizeCanvas.js

js/tools/LineTool.js

@@ -0,0 +1,93 @@
+class LineTool extends Tool {
+    constructor(name, options, switchFunction) {
+        super(name, options);
+
+        Events.on('click', this.mainButton, switchFunction, this);
+        Events.on('click', this.biggerButton, this.increaseSize.bind(this));
+        Events.on('click', this.smallerButton, this.decreaseSize.bind(this));
+    }
+
+    onStart(mousePos) {
+        super.onStart(mousePos);
+
+        // Putting the tmp layer on top of everything
+        TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
+
+        this.startMousePos[0] = Math.floor(mousePos[0]) + 0.5;
+        this.startMousePos[1] = Math.floor(mousePos[1]) + 0.5;
+	}
+
+	onDrag(mousePos, cursorTarget) {
+        super.onDrag(mousePos);
+
+        // Drawing the line at the right position
+        this.drawLine(mousePos);
+	}
+
+    /** Finishes drawing the rect, decides the end coordinates and moves the preview rectangle to the
+     *  current layer
+     * 
+     * @param {*} mousePos The position of the mouse when the user stopped dragging
+     */
+	onEnd(mousePos) {
+        super.onEnd(mousePos);
+
+        const tmpContext = TMPLayer.context;
+        const tmpCanvas = TMPLayer.canvas;
+        // Setting the correct linewidth and colour
+        currentLayer.context.lineWidth = this.currSize;
+
+        // Drawing the line
+		currentLayer.context.drawImage(tmpCanvas, 0, 0);
+
+        // Update the layer preview
+        currentLayer.updateLayerPreview();
+        // Clearing the tmp canvas
+        tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
+	}
+
+    onSelect() {
+        super.onSelect();
+    }
+
+    onDeselect() {
+        super.onDeselect();
+    }
+
+    drawLine(mousePos) {
+        let x0 = Math.floor(this.startMousePos[0]/zoom);
+        let y0 = Math.floor(this.startMousePos[1]/zoom);
+        let x1 = Math.floor(mousePos[0]/zoom);
+        let y1 = Math.floor(mousePos[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 canvas = document.getElementById('tmp-canvas');
+        const context = canvas.getContext('2d');
+
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
+
+        while (true) {
+            context.fillRect(x0-Math.floor(this.currSize/2), y0-Math.floor(this.currSize/2), this.currSize, this.currSize);
+
+            //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/tools/RectangleTool.js

@@ -7,7 +7,6 @@ class RectangleTool extends Tool {
     currFillMode = 'empty';
 
     switchFunction = null;
-    isDrawing = false;
 
     constructor(name, options, switchFunction) {
         super(name, options);
@@ -41,8 +40,6 @@ class RectangleTool extends Tool {
 
         // Putting the tmp layer on top of everything
         TMPLayer.canvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;
-        // Updating flag
-        this.isDrawing = true;
 
         this.startMousePos[0] = Math.floor(mousePos[0] / zoom) + 0.5;
         this.startMousePos[1] = Math.floor(mousePos[1] / zoom) + 0.5;
@@ -109,8 +106,6 @@ class RectangleTool extends Tool {
         currentLayer.updateLayerPreview();
         // Clearing the tmp canvas
         tmpContext.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height);
-        // I finished drawing
-        this.isDrawing = false;
 	}
 
     onSelect() {

js/tools/_all.js

@@ -6,10 +6,6 @@ new Tool('fill', {
 	imageCursor: 'fill',
 });
 
-new Tool('line', {
-	cursor: 'none',
-	brushPreview: true,
-});
 new Tool('resizeline', {
 	cursor: 'default',
 });