sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Flood fill feature added.

Browse Source
This commit is contained in:
Joshua Sigona 2020-06-14 19:33:14 +09:00
parent 0a042915a5
commit 596e680237
1 changed files with 90 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
canvas.js
View File

@ -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,8 +37,21 @@ 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 (!fillTool) {
if (mouseState>=0) {
if (mouseState<2 && e.target.tagName==="TH") {
e.target.style.background=selectedColor;
@ -46,17 +60,25 @@ document.addEventListener("DOMContentLoaded",()=>{
}
}
}
}
var MouseClickListener = (e)=>{
e.preventDefault();
}
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 (!fillTool) {
if (e.target.tagName==="TH") {
if (e.button===0) {
e.target.style.background=selectedColor;
@ -64,6 +86,7 @@ document.addEventListener("DOMContentLoaded",()=>{
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);