Continued MagicWand

Only missing moving the selected pixels

js/ToolManager.js

@@ -19,7 +19,7 @@ const ToolManager = (() => {
     tools["lassoselect"] = new LassoSelectionTool("lassoselect", 
         {type: 'cursor', style:'crosshair'}, switchTool, tools["moveselection"]);
     tools["magicwand"] = new MagicWandTool("magicwand", 
-        {type: 'cursor', style:'crosshair'}, switchTool, tools["movetool"]);
+        {type: 'cursor', style:'crosshair'}, switchTool, tools["moveselection"]);
     
     currTool = tools["brush"];
     currTool.onSelect();

js/tools/MagicWandTool.js

@@ -1,4 +1,5 @@
 class MagicWandTool extends SelectionTool {
+
     constructor (name, options, switchFunc, moveTool) {
         super(name, options, switchFunc, moveTool);
         Events.on('click', this.mainButton, switchFunc, this);
@@ -6,12 +7,87 @@ class MagicWandTool extends SelectionTool {
 
     onEnd(mousePos) {
         super.onStart(mousePos);
+
+        this.switchFunc(this.moveTool);
+        this.moveTool.setSelectionData(this.getSelection(), this);
     }
 
     getSelection() {
-        // this.currSelection should be filled
+        let coords = [Math.floor(this.endMousePos[0]), Math.floor(this.endMousePos[1])];
+        let data = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]).data;
+        let index = (coords[1] * currFile.canvasSize[1] + coords[0]) * 4;
+        let color = [data[index], data[index+1], data[index+2], data[index+3]];
+        let selectedData = new ImageData(currFile.canvasSize[0], currFile.canvasSize[1]);
 
+        this.visit([Math.floor(this.endMousePos[0]), Math.floor(this.endMousePos[1])],
+            this.currSelection, data, color);
+        
+        for (const pixel in this.currSelection) {
+            let coords = [parseInt(pixel.split(",")[0]), parseInt(pixel.split(",")[1])];
+            let index = (currFile.canvasSize[1] * coords[1] + coords[0]) * 4;
+
+            selectedData[index] = color[0];
+            selectedData[index+1] = color[1];
+            selectedData[index+2] = color[2];
+            selectedData[index+3] = color[3];
+
+            this.updateBoundingBox(coords[0], coords[1]);
+        }
+
+        this.outlineData = new ImageData(currFile.canvasSize[0], currFile.canvasSize[1]);
+        this.previewData = selectedData;
         this.drawSelectedArea();
+        this.boundingBoxCenter = [this.boundingBox.minX + (this.boundingBox.maxX - this.boundingBox.minX) / 2,
+            this.boundingBox.minY + (this.boundingBox.maxY - this.boundingBox.minY) / 2];
+
+        return selectedData;
     }
 
+    visit(pixel, selected, data, color) {
+        let toVisit = [pixel];
+        let visited = [];
+
+        while (toVisit.length > 0) {
+            pixel = toVisit.pop();
+            visited[pixel] = true;
+
+            let col = Util.getPixelColor(data, pixel[0], pixel[1], currFile.canvasSize[0]);
+            if (col[0] == color[0] && col[1] == color[1] && col[2] == color[2] && col[3] == color[3])
+                selected[pixel] = true;
+            else
+                continue;
+
+            let top, bottom, left, right;
+            if (pixel[1] > 0)
+                top = [pixel[0], pixel[1] - 1];
+            else
+                top = undefined;
+
+            if (pixel[0] > 0)
+                left = [pixel[0] - 1, pixel[1]];
+            else
+                left = undefined;
+
+            if (pixel[1] < currFile.canvasSize[1])
+                bottom = [pixel[0], pixel[1] + 1];
+            else
+                bottom = undefined;
+
+            if (pixel[0] < currFile.canvasSize[0])
+                right = [pixel[0] + 1, pixel[1]];
+            else
+                right = undefined;
+            
+            if (right != undefined && visited[right] == undefined)
+                toVisit.push(right);
+            if (left != undefined && visited[left] == undefined)
+                toVisit.push(left);
+            if (top != undefined && visited[top] == undefined)
+                toVisit.push(top);
+            if (bottom != undefined && visited[bottom] == undefined)
+                toVisit.push(bottom);
+        }
+
+        return selected;
+    }
 }

js/tools/RectangularSelectionTool.js

@@ -85,7 +85,7 @@ class RectangularSelectionTool extends SelectionTool {
         super.onDeselect();
     }
 
-    drawSelection(x, y) {
+    drawSelection() {
         // Getting the vfx context
         let vfxContext = currFile.VFXLayer.context;
     
@@ -97,36 +97,4 @@ class RectangularSelectionTool extends SelectionTool {
         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);
     }
-
-    /** Moves the rect ants to the specified position 
-     * 
-     * @param {*} x X coordinate of the rect ants
-     * @param {*} y Y coordinat of the rect ants
-     * @param {*} width Width of the selection
-     * @param {*} height Height of the selectione
-     * 
-     * @return The data regarding the current position and size of the selection
-     */
-    moveAnts(x, y, width, height) {
-        // Getting the vfx context
-        let vfxContext = currFile.VFXLayer.context;
-        let ret = this.currSelection;
-
-        // Clearing the vfx canvas
-        vfxContext.clearRect(0, 0, currFile.VFXLayer.canvas.width, currFile.VFXLayer.canvas.height);
-
-        // Fixing the coordinates
-        this.currSelection.left = Math.floor(x - (width / 2));
-        this.currSelection.top = Math.floor(y - (height / 2));
-        this.currSelection.right = this.currSelection.left + Math.floor(width);
-        this.currSelection.bottom = this.currSelection.top + Math.floor(height);
-
-        // Drawing the rect
-        currFile.VFXLayer.drawLine(this.currSelection.left, this.currSelection.top, this.currSelection.right, this.currSelection.top, 1);
-        currFile.VFXLayer.drawLine(this.currSelection.right, this.currSelection.top, this.currSelection.right, this.currSelection.bottom, 1);
-        currFile.VFXLayer.drawLine(this.currSelection.right, this.currSelection.bottom, this.currSelection.left, this.currSelection.bottom, 1);
-        currFile.VFXLayer.drawLine(this.currSelection.left, this.currSelection.bottom, this.currSelection.left, this.currSelection.top, 1);
-
-        return ret;
-    }
 }

js/tools/SelectionTool.js

@@ -139,7 +139,6 @@ class SelectionTool extends Tool {
             }
         }
 
-        console.log(currFile.canvasSize[0]);
         currFile.currentLayer.context.putImageData(pasteData, 0, 0);
         currFile.currentLayer.updateLayerPreview();