Update RectangularSelectionTool.js

Fixed issue lospec#120

Author: TsegabAbreham

js/tools/RectangularSelectionTool.js

@@ -1,9 +1,9 @@
 class RectangularSelectionTool extends SelectionTool {
-
-    constructor (name, options, switchFunc, moveTool) {
+    constructor(name, options, switchFunc, moveTool) {
         super(name, options, switchFunc, moveTool);
         Events.on('click', this.mainButton, switchFunc, this);
 
+        // Tutorial setup
         this.resetTutorial();
         this.addTutorialTitle("Rectangular selection tool");
         this.addTutorialKey("M", " to select the rectangular selection tool");
@@ -20,82 +20,79 @@ class RectangularSelectionTool extends SelectionTool {
     onStart(mousePos, mouseTarget) {
         super.onStart(mousePos, mouseTarget);
 
+        // Validate initial position within the canvas
         if (Util.isChildOfByClass(mouseTarget, "editor-top-menu") || 
-            !Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
+            !Util.cursorInCanvas(currFile.canvasSize, [mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]))
             return;
 
-        // Avoiding external selections
-        if (this.startMousePos[0] < 0) {
-            this.startMousePos[0] = 0;
-        }
-        else if (this.startMousePos[0] > currFile.currentLayer.canvas.width) {
-            this.startMousePos[0] = currFile.currentLayer.canvas.width;
-        }
+        // Constrain start position to canvas boundaries
+        this.startMousePos[0] = Math.max(0, Math.min(this.startMousePos[0], currFile.currentLayer.canvas.width));
+        this.startMousePos[1] = Math.max(0, Math.min(this.startMousePos[1], currFile.currentLayer.canvas.height));
 
-        if (this.startMousePos[1] < 0) {
-            this.startMousePos[1] = 0;
-        }
-        else if (this.startMousePos[1] > currFile.currentLayer.canvas.height) {
-            this.startMousePos[1] = currFile.currentLayer.canvas.height;
-        }
+        // Initialize the endMousePos to startMousePos to draw an initial dot
+        this.endMousePos = [...this.startMousePos];
 
-        // Drawing the rect
-        this.drawSelection(this.startMousePos[0], this.startMousePos[1]);
+        // Draw the initial selection rectangle
+        this.drawSelection();
     }
 
     onDrag(mousePos, mouseTarget) {
         super.onDrag(mousePos, mouseTarget);
 
+        // Validate drag position within the canvas
         if (Util.isChildOfByClass(mouseTarget, "editor-top-menu") || 
-            !Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom]))
+            !Util.cursorInCanvas(currFile.canvasSize, [mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom]))
             return;
 
-        // Drawing the rect
-        this.endMousePos = [Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom)];
-        this.drawSelection(Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom));
+        // Update the end position with precise rounding
+        this.endMousePos = [Math.round(mousePos[0] / currFile.zoom), Math.round(mousePos[1] / currFile.zoom)];
+
+        // Draw the updated selection rectangle
+        this.drawSelection();
     }
 
     onEnd(mousePos, mouseTarget) {
         super.onEnd(mousePos, mouseTarget);
-        
+
         if (Util.isChildOfByClass(mouseTarget, "editor-top-menu"))
             return;
 
         new HistoryState().EditCanvas();
 
-        // Getting the end position
-        this.endMousePos = [Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom)];
+        // Finalize the end position with precise rounding
+        this.endMousePos = [Math.round(mousePos[0] / currFile.zoom), Math.round(mousePos[1] / currFile.zoom)];
 
-        // Inverting end and start (start must always be the top left corner)
+        // Ensure startMousePos is top-left and endMousePos is bottom-right
         if (this.endMousePos[0] < this.startMousePos[0]) {
-            let tmp = this.endMousePos[0];
-            this.endMousePos[0] = this.startMousePos[0];
-            this.startMousePos[0] = tmp;
+            [this.startMousePos[0], this.endMousePos[0]] = [this.endMousePos[0], this.startMousePos[0]];
         }
-        // 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;
+            [this.startMousePos[1], this.endMousePos[1]] = [this.endMousePos[1], this.startMousePos[1]];
         }
 
-        if (Util.cursorInCanvas(currFile.canvasSize, [mousePos[0]/currFile.zoom, mousePos[1]/currFile.zoom])) {
-            this.boundingBox.minX = this.startMousePos[0] - 1;
-            this.boundingBox.maxX = this.endMousePos[0] + 1;
-            this.boundingBox.minY = this.startMousePos[1] - 1;
-            this.boundingBox.maxY = this.endMousePos[1] + 1;
+        // Set the bounding box exactly within the selection without expanding
+        if (Util.cursorInCanvas(currFile.canvasSize, [mousePos[0] / currFile.zoom, mousePos[1] / currFile.zoom])) {
+            this.boundingBox.minX = this.startMousePos[0];
+            this.boundingBox.maxX = this.endMousePos[0];
+            this.boundingBox.minY = this.startMousePos[1];
+            this.boundingBox.maxY = this.endMousePos[1];
         }
 
-        // Switch to the move tool so that the user can move the selection
+        // Switch to the move tool to move the selection
         this.switchFunc(this.moveTool);
-        // Obtain the selected pixels
         this.moveTool.setSelectionData(this.getSelection(), this);
     }
 
     cutSelection() {
         super.cutSelection();
-        currFile.currentLayer.context.clearRect(this.currSelection.left-0.5, this.currSelection.top-0.5,
-            this.currSelection.width, this.currSelection.height);
+
+        // Clear the selected area without fractional offsets
+        currFile.currentLayer.context.clearRect(
+            this.currSelection.left,
+            this.currSelection.top,
+            this.currSelection.width,
+            this.currSelection.height
+        );
     }
 
     onSelect() {
@@ -107,15 +104,22 @@ class RectangularSelectionTool extends SelectionTool {
     }
 
     drawSelection() {
-        // Getting the vfx context
+        // Access the VFX context for visualizing the selection rectangle
         let vfxContext = currFile.VFXLayer.context;
-    
-        // Clearing the vfx canvas
+
+        // Clear the VFX canvas to ensure no previous selection visuals are visible
         vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
 
-        currFile.VFXLayer.drawLine(this.startMousePos[0], this.startMousePos[1], this.endMousePos[0], this.startMousePos[1], 1);
-        currFile.VFXLayer.drawLine(this.endMousePos[0], this.startMousePos[1], this.endMousePos[0], this.endMousePos[1], 1);
-        currFile.VFXLayer.drawLine(this.endMousePos[0], this.endMousePos[1], this.startMousePos[0], this.endMousePos[1], 1);
-        currFile.VFXLayer.drawLine(this.startMousePos[0], this.endMousePos[1], this.startMousePos[0], this.startMousePos[1], 1);
+        // Draw the selection rectangle with precise lines
+        if (this.startMousePos && this.endMousePos) {
+            vfxContext.strokeStyle = 'rgba(0, 0, 255, 1)'; // Example color for the rectangle
+            vfxContext.lineWidth = 1;
+            vfxContext.strokeRect(
+                Math.min(this.startMousePos[0], this.endMousePos[0]),
+                Math.min(this.startMousePos[1], this.endMousePos[1]),
+                Math.abs(this.endMousePos[0] - this.startMousePos[0]),
+                Math.abs(this.endMousePos[1] - this.startMousePos[1])
+            );
+        }
     }
-}
+}