From 0a042915a5fee376716af4fbb868a0a37b3bc212 Mon Sep 17 00:00:00 2001
From: Joshua Sigona <sigonasr2@gmail.com>
Date: Sun, 14 Jun 2020 18:44:15 +0900
Subject: [PATCH] Add a grid toggle feature

---
 canvas.js      |  45 +++++++++++++++++++++++++++++++++++++++++++++
 filltool.png   | Bin 0 -> 1305 bytes
 gridtoggle.png | Bin 0 -> 1664 bytes
 style.css      |  17 ++++++++++++++++-
 4 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 filltool.png
 create mode 100644 gridtoggle.png

diff --git a/canvas.js b/canvas.js
index a1e5654..03dfbd3 100644
--- a/canvas.js
+++ b/canvas.js
@@ -8,6 +8,21 @@ var customColorToolbar=false;
 
 
 document.addEventListener("DOMContentLoaded",()=>{
+	
+	class Coordinate{
+		constructor(box) {
+			var idParse=box.id.split("_");
+			this.x = idParse[1];
+			this.y = idParse[2];
+		}
+	}
+	class PixelCoordinate extends Coordinate{
+		constructor(x,y) {
+			this.x = x;
+			this.y = y;
+		}
+	}
+	
 	function insertAfter(newNode, existingNode) {
     existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
 	}
@@ -37,6 +52,7 @@ document.addEventListener("DOMContentLoaded",()=>{
 	var MouseStateUp = (e)=>{
 		e.preventDefault();
 		mouseState = -1;
+		toolbar.style.visibility = "visible";
 	}
 	var MouseStateDown = (e)=>{
 		e.preventDefault();
@@ -48,6 +64,7 @@ document.addEventListener("DOMContentLoaded",()=>{
 				e.target.style.background="white";
 			}
 		}
+		toolbar.style.visibility = "hidden";
 	}
 	
 	var colorPixelBasedOnID = (x,y,color)=>{
@@ -57,6 +74,7 @@ document.addEventListener("DOMContentLoaded",()=>{
 	
 	var generateTable = (columns,rows)=>{
 		var table = document.createElement("table");
+		table.style.border="1px gray dashed";
 		for (var i=0;i<rows;i++) {
 			var row = document.createElement("tr");
 			for (var j=0;j<columns;j++) {
@@ -147,6 +165,7 @@ document.addEventListener("DOMContentLoaded",()=>{
 				for (var i=0;i<COLS;i++){
 					var col = document.createElement("th");
 					col.style.background="white";
+					col.style.border=document.querySelector("table").style.border;
 					col.id="pos_"+i+"_"+(Number(ROWS)+Number(newcells));
 					newrow.appendChild(col);
 				}
@@ -173,6 +192,7 @@ document.addEventListener("DOMContentLoaded",()=>{
 					var row = table.getElementsByTagName("tr")[i]
 					var col = document.createElement("th");
 					col.style.background="white";
+					col.style.border=document.querySelector("table").style.border;
 					col.id="pos_"+COLS+"_"+i;
 					row.appendChild(col);
 				}
@@ -288,6 +308,31 @@ document.addEventListener("DOMContentLoaded",()=>{
 		saveButton.addEventListener("click",SaveData)
 		toolbar.appendChild(loadButton);
 		toolbar.appendChild(saveButton);
+		var toggleGridButton = document.createElement("img");
+		toggleGridButton.src = "gridtoggle.png";
+		toggleGridButton.classList.add("tinybutton");
+		toggleGridButton.addEventListener("click",()=>{
+			var elements = document.querySelectorAll("table,tr,th")
+			if (document.querySelector("body > div.container > div > table").style.border.includes("1px")) {
+				for (var item of elements) {
+					item.style.border = "0px";
+				}
+			} else {
+				for (var item of elements) {
+					item.style.border = "1px gray dashed";
+				}
+			}
+		})
+		toolbar.appendChild(toggleGridButton);
+	}
+	
+	//Returns a coordinate class.
+	var getCoordinates = (box)=>{
+		return new Coordinate(box);
+	}
+	
+	var floodFill = (startx,starty)=>{
+		
 	}
 	
 	generateTable(ROWS,COLS);
diff --git a/filltool.png b/filltool.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4b2293a34fa09c42814fd2b93c7f34891614cf1
GIT binary patch
literal 1305
zcmV+!1?KvRP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80004nX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iQ?)8pK|6>zWT;LSL`58>ibb$c+6t{Ym|XfHG-*gu
zTpR`0f`cE6RR<SmT^(EnLGS~_$<ayCMN0f%QfLw5!Ery{-Fw`<1B6<Msb<?aplX(p
zj77yvc0~-lq659?LO%i$Gxd0CAq~&*bq^n3?;<?Q``n+SN6DEC@QK8;OgAjzb>itw
zOXs{#9AZUDAwDM_Gw6cEk6f2se&bwlSm2o<Bb}Th4iSrm7M5F>6%Cbmia4yO8s!Ta
zmle)ioYhi=HSWn@7|dzQDX!BTMhuIHBLNXID%d~?79zB2q?kz3e$>N1<oFZhlF79J
zMvi%up+a)};D7MDTQfg7;U)#6K>Lere~bWuU7%jI?eAmTuAcz@XW&X}`pY$7=9Bbl
zQwtvfecQmrbyJh~fXf|V@JW{p$&vgtg?t`(KcjET0t2@|_o~}lV;`pvK$^N*x&aOj
zfzbkGuX((?v$eN>&ouh`0TEhqfLD%;asU7T24YJ`L;yelKmb6e_Ah1t000SaNLh0L
z04^f{04^f|c%?sf00007bV*G`2jm702^SzAqV9G8000?uMObu0Z*6U5Zgc=ca%Ew3
zWn>_CX>@2HM@dakSAh-}0008;Nkl<ZSi`-SJxC)_5XXPJCPXBNM-)X?Jh2dL(x{*T
z5$q&l+7l}YSKDZDSXf+jHr8Sz0kym;%8H<ZT8M#wg^J*TF@hh68vMXpa>Y$zJTIG<
z5A%mtEN|ZYhnY9C|EHOzi6T6}0MH9~ffnGC?A-t-Kor;n!oanPQ-^|0ClCaN0e2Rg
zT3IRE1h4?i0lRk2b(_69;0Le;e6=C}AKY?gOMKMj8$chh2#f<x3WrmCEQ(L100O`a
z&`;^mFFpgg0_X##<dT&dUh&<REr2>;vJmo6C`2d}QVn7<^G;+2FkWcdW3d>qSS+7%
zjQ<-zCoo3&FeaSo0D^_w_U-NMV!9)k3cw>nMhTW>aejWz($W$e8ym%BVHof@WW44a
zGSAP?#N%-e4-YvwIN<T|@xOLYPft`<R;muG0bORhEpBgbi9{mo?d=hXM6!|ttgf!+
zlZ9SgrR~nn&af<t>gsAVO?$I<e}9i*7#N1Z-Q6Ag`}-Un9VyQShy2xSkw_!}=<4d?
z^z@XAi;MJLI2<Mr2#`!BSzcZSU}a?m!!W3-s><cMMKewFH&9_`wX?H>Wm$N=ULGDE
zn4h1=vMgKA?d|Oh4GrbI)4EEYbp6$=zP=ux&zJMe@$s=z4RjF`_M*Y@RyK5Zchk_&
zkk#Jha^d&;RrqgoQ8KousQ6o<WHOn~$l&1MyTAY%8yguN9i^?UO(lR6U1XGf!@AvQ
znug2edX+%6we<A#q`x&yqobpPk&zK<YHC!wAnFhe7qqi#ZEdBwxf!R^`K}c4c$}-N
zEBt;xO-)VtPQy*jG))iiD^JN)3M7Efx~SI$%8v!$I@Mouz)Km)UxYLLJKhz|RxZq>
z<a*{Hng-U&K)xni?<CnJ@Li=Xi$GL3F0-lPby2R-4<eru4%>IZPtj~^B~JU8_*Qxu
ztpi`ARxd@~_G$68p6}c65|{vdz^n|8e1^=doSn$5c_FXkU0L5g;(7iDq$Aoo;o_HH
P00000NkvXXu0mjfdW1_P

literal 0
HcmV?d00001

diff --git a/gridtoggle.png b/gridtoggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c05900ec9c809d09b89563bb9c8d04d83b4c0a0
GIT binary patch
literal 1664
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
KMNUMnLSTaGG#(lN

literal 0
HcmV?d00001

diff --git a/style.css b/style.css
index c4cac48..03776f9 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-table,td,th{
+table,tr,th{
 	border:1px gray dashed;
 	border-spacing:0px;
 	gap:0px;
@@ -12,6 +12,9 @@ th{
 .container{
 	text-align: center;
 }
+.toolbar{
+	width: 100%;
+}
 .canvas{
 	display:inline-block;
 	background-color: #EEEEFF;
@@ -52,4 +55,16 @@ th{
 	display: inline-block;
 	border:2px black solid;
 	margin-left:1px;
+}
+.tinybutton{
+	margin-top:-24px;
+	position:relative;
+	top: 6px;
+	height: 24px;
+	width: 24px;
+	background-color: #bbb;
+	border-radius: 50%;
+	display: inline-block;
+	border:2px black solid;
+	margin-left:1px;
 }
\ No newline at end of file