Started selection dragging

js/tools/MoveSelectionTool.js

@@ -68,16 +68,15 @@ class MoveSelectionTool extends DrawingTool {
     onDrag(mousePos) {
         super.onDrag(mousePos);
 
-        this.currSelection = this.selectionTool.moveAnts(mousePos[0]/currFile.zoom, 
+        // TODO: add (or subtract?) vector (boundingBoxCenter - canvasCenter);
-            mousePos[1]/currFile.zoom, this.currSelection.width, this.currSelection.height);
+        this.selectionTool.moveOffset = [Math.floor(mousePos[0] / currFile.zoom - currFile.canvasSize[0] / 2), 
-
+                           Math.floor(mousePos[1] / currFile.zoom - currFile.canvasSize[1] / 2)];
         // clear the entire tmp layer
         currFile.TMPLayer.context.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);        
         // put the image data on the tmp layer with offset
-        currFile.TMPLayer.context.putImageData(
+        currFile.TMPLayer.context.putImageData(this.currSelection, 
-            this.currSelection.data, 
+            this.selectionTool.moveOffset[0], this.selectionTool.moveOffset[1]);
-            Math.floor(mousePos[0] / currFile.zoom - this.currSelection.width / 2), 
+            this.selectionTool.drawSelectedArea();
-            Math.floor(mousePos[1] / currFile.zoom - this.currSelection.height / 2));
     }
 
     onEnd(mousePos) {

js/tools/RectangularSelectionTool.js

@@ -1,5 +1,4 @@
 class RectangularSelectionTool extends SelectionTool {
-    currSelection = {};
 
     constructor (name, options, switchFunc, moveTool) {
         super(name, options, switchFunc, moveTool);
@@ -46,6 +45,7 @@ class RectangularSelectionTool extends SelectionTool {
 
     onEnd(mousePos) {
         super.onEnd(mousePos);
+        
         new HistoryState().EditCanvas();
 
         // Getting the end position
@@ -69,40 +69,10 @@ class RectangularSelectionTool extends SelectionTool {
         this.boundingBox.minY = this.startMousePos[1] - 1;
         this.boundingBox.maxY = this.endMousePos[1] + 1;
 
+        // Switch to the move tool so that the user can move the selection
+        this.switchFunc(this.moveTool);
         // Obtain the selected pixels
-        this.getSelection();
+        this.moveTool.setSelectionData(this.getSelection(), this);
-        // Switch to the move tool so that the user can move the selection
-        this.switchFunc(this.moveTool);
-        this.moveTool.setSelectionData(null, this);
-        
-        /*
-        // Switch to the move tool so that the user can move the selection
-        this.switchFunc(this.moveTool);
-        // Preparing data for the move tool
-        let dataWidth = this.endMousePos[0] - this.startMousePos[0];
-        let dataHeight = this.endMousePos[1] - this.startMousePos[1];
-
-        this.currSelection = {
-            left: this.startMousePos[0], right: this.endMousePos[0], 
-            top: this.startMousePos[1], bottom: this.endMousePos[1], 
-
-            width: dataWidth,
-            height: dataHeight,
-            
-            data: currFile.currentLayer.context.getImageData(
-                this.startMousePos[0], this.startMousePos[1], 
-                dataWidth + 1, dataHeight + 1)
-        };
-        
-        // Moving the selection to the TMP layer. It will be moved back to the original
-        // layer if the user will cancel or end the selection
-        currFile.currentLayer.context.clearRect(this.startMousePos[0], this.startMousePos[1], 
-            dataWidth + 1, dataHeight + 1);
-        // Moving those pixels from the current layer to the tmp layer
-        currFile.TMPLayer.context.putImageData(this.currSelection.data, this.startMousePos[0], this.startMousePos[1]);
-
-        this.moveTool.setSelectionData(this.currSelection, this);*/
-        
     }
 
     copySelection() {

js/tools/SelectionTool.js

@@ -13,9 +13,12 @@ class SelectionTool extends Tool {
     boundingBox = {minX: 9999999, maxX: -1, minY: 9999999, maxY: -1};
     currSelection = {};
 
+    outlineData = undefined;
     previewData = undefined;
     selectedPixel = undefined;
 
+    moveOffset = [0, 0];
+
     constructor(name, options, switchFunc, moveTool) {
         super(name, options);
 
@@ -31,6 +34,7 @@ class SelectionTool extends Tool {
 
         this.boundingBox = {minX: 9999999, maxX: -1, minY: 9999999, maxY: -1};
         this.currSelection = {};
+        this.moveOffset = [0, 0];
 
         this.updateBoundingBox(mouseX, mouseY);
     }
@@ -49,7 +53,8 @@ class SelectionTool extends Tool {
     copySelection(){}
     
     cursorInSelectedArea(mousePos) {
-        let floored = [Math.floor(mousePos[0] / currFile.zoom), Math.floor(mousePos[1] / currFile.zoom)];
+        let floored = [Math.floor(mousePos[0] / currFile.zoom) + this.moveOffset[0], 
+                       Math.floor(mousePos[1] / currFile.zoom) + this.moveOffset[1]];
 
         if (this.currSelection[floored] != undefined)
             return true;
@@ -114,15 +119,11 @@ class SelectionTool extends Tool {
         let selected = [];
         let visited = {};
         let data = currFile.VFXLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
+        let currLayerData = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
         
-        /*
+        // BFS: a pixel that causes the algorithm to visit a pixel of the bounding box is outside the
-        currFile.VFXLayer.context.fillStyle = "red";
+        // selection. Otherwise, since the algorithm stops visiting when it reaches the outline,
-        currFile.VFXLayer.context.fillRect(this.boundingBox.minX, this.boundingBox.minY, 1, 1);
+        // the pixel is inside the selection (and so are all the ones that have been visited)
-        currFile.VFXLayer.context.fillRect(this.boundingBox.maxX, this.boundingBox.minY, 1, 1);
-        currFile.VFXLayer.context.fillRect(this.boundingBox.minX, this.boundingBox.maxY, 1, 1);
-        currFile.VFXLayer.context.fillRect(this.boundingBox.maxX, this.boundingBox.maxY, 1, 1);
-        */
-        
         for (let x=this.boundingBox.minX-1; x<=this.boundingBox.maxX+1; x++) {
             for (let y=this.boundingBox.minY-1; y<=this.boundingBox.maxY+1; y++) {
                 if (visited[[x, y]] == undefined) {
@@ -136,9 +137,39 @@ class SelectionTool extends Tool {
             }
         }
 
+        // Save the selection outline
+        this.outlineData = currFile.VFXLayer.context.getImageData(this.boundingBox.minX, 
+            this.boundingBox.minY, this.boundingBox.maxX - this.boundingBox.minX, 
+            this.boundingBox.maxY - this.boundingBox.minY);
+        // Create the image data containing the selected pixels
+        this.previewData = new ImageData(currFile.canvasSize[0], currFile.canvasSize[1]);
+
+        // Save the selected pixels so that they can be moved and pasted back in the right place
         for (const key in this.currSelection) {
-            currFile.VFXLayer.context.fillStyle = "blue";
+            let x = parseInt(key.split(",")[0]);
-            currFile.VFXLayer.context.fillRect(parseInt(key.split(",")[0]), parseInt(key.split(",")[1]), 1, 1);
+            let y = parseInt(key.split(",")[1]);
+            let index = (y * currFile.canvasSize[1] + x) * 4;
+
+            for (let i=0; i<4; i++) {
+                // Save the pixel
+                this.previewData.data[index + i] = currLayerData[index + i];
+                // Delete the data below
+                currLayerData[index + i] = 0;
+            }
+        }
+        
+        this.drawSelectedArea();
+
+        return this.previewData;
+    }
+
+    drawSelectedArea() {
+        for (const key in this.currSelection) {
+            let x = parseInt(key.split(",")[0]);
+            let y = parseInt(key.split(",")[1]);
+
+            currFile.TMPLayer.context.fillStyle = "rgba(10, 0, 40, 0.3)";
+            currFile.TMPLayer.context.fillRect(x + this.moveOffset[0], y + this.moveOffset[1], 1, 1);
         }
     }