From 596e680237e6cb3b5b52b0db04d740b075401e68 Mon Sep 17 00:00:00 2001 From: Joshua Sigona Date: Sun, 14 Jun 2020 19:33:14 +0900 Subject: [PATCH] Flood fill feature added. --- canvas.js | 105 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 90 insertions(+), 15 deletions(-) diff --git a/canvas.js b/canvas.js index 03dfbd3..9b5ee87 100644 --- a/canvas.js +++ b/canvas.js @@ -5,7 +5,8 @@ var unselectedColorBorder = "2px black solid"; var ROWS = 30; var COLS = 30; var customColorToolbar=false; - +var fillTool = false; +var floodFillInProgress=0; document.addEventListener("DOMContentLoaded",()=>{ @@ -36,13 +37,27 @@ document.addEventListener("DOMContentLoaded",()=>{ } var canvas = document.getElementsByClassName("canvas")[0]; var toolbar = document.getElementsByClassName("toolbar")[0]; + + + + document.addEventListener("mousemove",(e)=>{ + if (toolbar.style.visibility === "hidden" && + e.target.tagName[0]!== "T" && + e.target.tagName[0]!== "D") { + toolbar.style.visibility = "visible"; + mouseState = -1; + } + }) + var MouseListener = (e)=>{ e.preventDefault(); - if (mouseState>=0) { - if (mouseState<2 && e.target.tagName==="TH") { - e.target.style.background=selectedColor; - } else { - e.target.style.background="white"; + if (!fillTool) { + if (mouseState>=0) { + if (mouseState<2 && e.target.tagName==="TH") { + e.target.style.background=selectedColor; + } else { + e.target.style.background="white"; + } } } } @@ -52,16 +67,24 @@ document.addEventListener("DOMContentLoaded",()=>{ var MouseStateUp = (e)=>{ e.preventDefault(); mouseState = -1; + if (fillTool && floodFillInProgress===0) { + if (e.target.tagName==="TH") { + var coords = getCoordinates(e.target) + floodFill(coords.x,coords.y,e.target.style.background,selectedColor) + } + } toolbar.style.visibility = "visible"; } var MouseStateDown = (e)=>{ e.preventDefault(); mouseState = e.button; - if (e.target.tagName==="TH") { - if (e.button===0) { - e.target.style.background=selectedColor; - } else { - e.target.style.background="white"; + if (!fillTool) { + if (e.target.tagName==="TH") { + if (e.button===0) { + e.target.style.background=selectedColor; + } else { + e.target.style.background="white"; + } } } toolbar.style.visibility = "hidden"; @@ -88,7 +111,7 @@ document.addEventListener("DOMContentLoaded",()=>{ table.addEventListener("click",MouseClickListener); table.addEventListener("mouseover",MouseListener); - table.addEventListener("mouseup",MouseStateUp); + document.addEventListener("mouseup",MouseStateUp); table.addEventListener("mousedown",MouseStateDown); canvas.appendChild(table); @@ -131,7 +154,7 @@ document.addEventListener("DOMContentLoaded",()=>{ toolbar.appendChild(dot); } var customColorContainer = document.createElement("div"); - customColorContainer.classList.add("toolbar") + //customColorContainer.classList.add("toolbar") var dot = document.createElement("img") dot.classList.add("dot") dot.classList.add("inline") @@ -324,6 +347,18 @@ document.addEventListener("DOMContentLoaded",()=>{ } }) toolbar.appendChild(toggleGridButton); + var fillToolButton = document.createElement("img"); + fillToolButton.src = "filltool.png" + fillToolButton.classList.add("tinybutton") + fillToolButton.addEventListener("click",()=>{ + fillTool = !fillTool + if (fillTool) { + fillToolButton.style.border = "2px red solid" + } else { + fillToolButton.style.border = "2px black solid" + } + }) + toolbar.appendChild(fillToolButton); } //Returns a coordinate class. @@ -331,8 +366,48 @@ document.addEventListener("DOMContentLoaded",()=>{ return new Coordinate(box); } - var floodFill = (startx,starty)=>{ - + var floodFill = (startx,starty,baseColor,newColor)=>{ + console.log("Flood fill at "+startx+","+starty) + //Start a flood fill in 4 cardinations directions and the current spot. + //Set the base color to what the dot currently is. Then all around this spot, fill in any dots that are also this color. Don't spread the dot if there's not a color of that type. + floodFillInProgress++; + if (baseColor===newColor) { + floodFillInProgress--; + return + } + startx = Number(startx) + starty = Number(starty) + floodFillInProgress++; + setTimeout(()=>{if (document.getElementById("pos_"+(startx)+"_"+(starty)).style.background===baseColor) { + document.getElementById("pos_"+(startx)+"_"+(starty)).style.background = newColor + floodFill(startx,starty,baseColor,newColor) + } + floodFillInProgress--;},0) + floodFillInProgress++; + setTimeout(()=>{if (startx+1 < COLS && document.getElementById("pos_"+(startx+1)+"_"+(starty+0)).style.background===baseColor) { + document.getElementById("pos_"+(startx+1)+"_"+(starty+0)).style.background = newColor + floodFill(startx+1,starty,baseColor,newColor) + } + floodFillInProgress--;},0) + floodFillInProgress++; + setTimeout(()=>{if (startx-1 >= 0 && document.getElementById("pos_"+(startx-1)+"_"+(starty+0)).style.background===baseColor) { + document.getElementById("pos_"+(startx-1)+"_"+(starty+0)).style.background = newColor + floodFill(startx-1,starty,baseColor,newColor) + } + floodFillInProgress--;},0) + floodFillInProgress++; + setTimeout(()=>{if (starty+1 < ROWS && document.getElementById("pos_"+(startx)+"_"+(starty+1)).style.background===baseColor) { + document.getElementById("pos_"+(startx)+"_"+(starty+1)).style.background = newColor + floodFill(startx,starty+1,baseColor,newColor) + } + floodFillInProgress--;},0) + floodFillInProgress++; + setTimeout(()=>{if (starty-1 >= 0 && document.getElementById("pos_"+(startx)+"_"+(starty-1)).style.background===baseColor) { + document.getElementById("pos_"+(startx)+"_"+(starty-1)).style.background = newColor + floodFill(startx,starty-1,baseColor,newColor) + } + floodFillInProgress--;},0) + floodFillInProgress--; } generateTable(ROWS,COLS);