Added ResizableTool and SelectionTool

js/tools/BrushTool.js

@@ -1,4 +1,4 @@
-class BrushTool extends Tool {
+class BrushTool extends ResizableTool {
     constructor(name, options, switchFunction) {
         super(name, options);
 

js/tools/EraserTool.js

@@ -1,4 +1,4 @@
-class EraserTool extends Tool {
+class EraserTool extends ResizableTool {
     constructor(name, options, switchFunction) {
         super(name, options);
 

js/tools/LineTool.js

@@ -1,4 +1,4 @@
-class LineTool extends Tool {
+class LineTool extends ResizableTool {
     constructor(name, options, switchFunction) {
         super(name, options);
 

js/tools/MoveSelectionTool.js

@@ -2,4 +2,24 @@ class MoveSelectionTool extends Tool {
     constructor (name, options, switchFunc) {
         super(name, options, switchFunc);
     }
+
+    onStart(mousePos) {
+        super.onStart(mousePos);
+    }
+
+    onDrag(mousePos) {
+        super.onDrag(mousePos);
+    }
+
+    onEnd(mousePos) {
+        super.onEnd(mousePos);
+    }
+
+    onSelect() {
+        super.onSelect(mousePos);
+    }
+
+    onDeselect() {
+        super.onDeselect(mousePos);
+    }
 }

js/tools/RectangleTool.js

@@ -1,4 +1,4 @@
-class RectangleTool extends Tool {
+class RectangleTool extends ResizableTool {
     // Saving the empty rect svg
     emptyRectangleSVG = document.getElementById("rectangle-empty-button-svg");
     // and the full rect svg so that I can change them when the user changes rect modes

js/tools/RectangularSelectionTool.js

@@ -1,5 +1,91 @@
-class RectangularSelectionTool extends Tool {
+class RectangularSelectionTool extends SelectionTool {
     constructor (name, options, switchFunc) {
         super(name, options, switchFunc);
+
+        Events.on('click', this.mainButton, switchFunc, this);
+    }
+
+    onStart(mousePos) {
+        super.onStart(mousePos);
+
+        // Saving the canvas
+        new HistoryState().EditCanvas();
+        // Putting the vfx layer on top of everything
+        VFXLayer.canvas.style.zIndex = MAX_Z_INDEX;
+
+        // Saving the start coords of the rect
+        this.startMousePos[0] = Math.round(this.startMousePos[0] / zoom) - 0.5;
+        this.startMousePos[1] = Math.round(this.startMousePos[1] / zoom) - 0.5;
+
+        // Avoiding external selections
+        if (this.startMousePos[0] < 0) {
+            this.startMousePos[0] = 0;
+        }
+        else if (this.startMousePos[0] > currentLayer.canvas.width) {
+            this.startMousePos[0] = currentLayer.canvas.width;
+        }
+
+        if (this.startMousePos[1] < 0) {
+            this.startMousePos[1] = 0;
+        }
+        else if (this.startMousePos[1] > currentLayer.canvas.height) {
+            this.startMousePos[1] = currentLayer.canvas.height;
+        }
+
+        // Drawing the rect
+        this.drawRect(this.startMousePos[0], this.startMousePos[1]);
+    }
+
+    onDrag(mousePos) {
+        super.onDrag(mousePos);
+
+        // Drawing the rect
+        this.drawRect(Math.round(mousePos[0] / zoom) + 0.5, Math.round(mousePos[1] / zoom) + 0.5);
+    }
+
+    onEnd(mousePos) {
+        super.onEnd(mousePos);
+
+        // Getting the end position
+        this.endMousePos[0] = Math.round(this.endMousePos[0] / zoom) + 0.5;
+        this.endMousePos[1] = Math.round(this.endMousePos[1] / zoom) + 0.5;
+
+        // Inverting end and start (start must always be the top left corner)
+        if (this.endMousePos[0] < this.startMousePos[0]) {
+            let tmp = this.endMousePos[0];
+            this.endMousePos[0] = this.startMousePos[0];
+            this.startMousePos[0] = tmp;
+        }
+        // Same for the y
+        if (this.endMousePos[1] < this.startMousePos[1]) {
+            let tmp = this.endMousePos[1];
+            this.endMousePos[1] = this.startMousePos[1];
+            this.startMousePos[1] = tmp;
+        }
+    }
+
+    onSelect() {
+        super.onSelect();
+    }
+
+    onDeselect() {
+        super.onDeselect();
+    }
+
+    drawRect(x, y) {
+        // Getting the vfx context
+        let vfxContext = VFXLayer.context;
+    
+        // Clearing the vfx canvas
+        vfxContext.clearRect(0, 0, VFXLayer.canvas.width, VFXLayer.canvas.height);
+        vfxContext.lineWidth = 1;
+        vfxContext.strokeStyle = 'black';
+        vfxContext.setLineDash([4]);
+    
+        // Drawing the rect
+        vfxContext.beginPath();
+        vfxContext.rect(this.startMousePos[0], this.startMousePos[1], x - this.startMousePos[0], y - this.startMousePos[1]);
+    
+        vfxContext.stroke();
     }
 }

js/tools/ResizableTool.js

@@ -0,0 +1,5 @@
+class ResizableTool extends Tool {
+    constructor(name, options, switchFunc) {
+        super(name, options, switchFunc);
+    }
+}

js/tools/SelectionTool.js

@@ -0,0 +1,5 @@
+class SelectionTool extends Tool {
+    constructor(name, options, switchFunc) {
+        super(name, options, switchFunc);
+    }
+}

js/tools/_all.js

@@ -2,28 +2,11 @@ new Tool('resizeline', {
 	cursor: 'default',
 });
 
-new Tool('pan', {
-	cursor: function () {
-		if (Input.isDragging()) return 'url(\'/pixel-editor/pan-held.png\'), auto';
-		else return 'url(\'/pixel-editor/pan.png\'), auto';
-	},
-});
-
-
 new Tool('ellipse', {
 	cursor: 'none',
 	brushPreview: true,
 });
-new Tool('rectselect', {
-	cursor: 'crosshair',
-	brushPreview: true,
-});
-
 
 new Tool('moveselection', {
 	cursor: 'crosshair',
-});
-
-new Tool('zoom', {
-	imageCursor: 'zoom-in',
 });