diff --git a/js/ToolManager.js b/js/ToolManager.js index 9b1714b..e5dc6ab 100644 --- a/js/ToolManager.js +++ b/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(); diff --git a/js/tools/MagicWandTool.js b/js/tools/MagicWandTool.js index b73d46b..ab2fc6b 100644 --- a/js/tools/MagicWandTool.js +++ b/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; } - } \ No newline at end of file diff --git a/js/tools/RectangularSelectionTool.js b/js/tools/RectangularSelectionTool.js index 02cfed7..6484de0 100644 --- a/js/tools/RectangularSelectionTool.js +++ b/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; - } } \ No newline at end of file diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 6a836dc..c35c2e8 100644 --- a/js/tools/SelectionTool.js +++ b/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();