From 3e5b05bb6bf8f6ac91cba75abab32ea27e0b9b4d Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Sat, 7 Mar 2020 22:34:12 +0100
Subject: [PATCH] Added fill mode for the rectangle tool

You can select the fill mode by clicking again on the rect button once you select it. Also added new icons.
---
 images/layout.png      | Bin 0 -> 2108 bytes
 js/_move.js            |   6 ++++--
 js/_rectSelect.js      |   7 +------
 js/_rectangle.js       |  28 ++++++++++++++++------------
 js/_toolButtons.js     |   4 +++-
 views/pixel-editor.hbs |   4 ++--
 6 files changed, 26 insertions(+), 23 deletions(-)
 create mode 100644 images/layout.png

diff --git a/images/layout.png b/images/layout.png
new file mode 100644
index 0000000000000000000000000000000000000000..3fb3b2cb10de3e9456edef4177879cf3e63e2622
GIT binary patch
literal 2108
zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&usfR9vA<A&_E8cl32+VA$Bt{U?zX$X7`A
z2=ZlMs8VBKXlP+z_yrVdc)`F>YQVtoDuIE)Y6b&?c)^@qfi^%1rX+877Y2q^y~;*F
z9%q3^WHAE+-w_aIoT|+y4HRTA@$_|Nf5OZz%C6daZ;~5Ogv-;#F{I+w+gp3rElrkb
zfA~LYcBf~H#)KIG6FQu}m^~6$HcL~4tG7vE4nwB~2XCjdgOj1U!mNiZYA#KO(%l{}
zHfWo%c1Dh|%keescdm!7{a!mee)Bt<*U4-^`$z=;E}PXC=jXqh{dlwe_Vc{OUtcvI
zu>bVB#(e(SmzJjQ&*#_I{<zK{Ggtlj%bkT^(;mcsf4j$K{kff|^Z!~hs6U@-xvfgI
z;AoAZ|M}a~^}heB*g7-)`PH3yU+o@n?W*%TbFs3VPcKex9>ccJ$L7TB<-O6l{n^5u
z2E{K~J{+>yRVBPZx%_<S=XYlwaz1#nXKR(<250u-q<cFh8Ww;4cxP7?|AyfBvvWUR
zE=!yD>0A4p<j+6Oq<woPz5loKg`1Y!=KkLMSMlYuo#ocY!`Cy2S?-(r_o{S*>o@by
zYx@}lO3RF&KR@wG^nlQF^Y;IoY*pJ<vopNrU})hSMWZ1w8UmvsK>HBLeLnrFaD(f)
z{O9eUl4;-lbIVtoGj!K%ntK^U&$)MQB}m*aH!XkPyxC#z8Oq+hxwC2R{bx_FS~sx9
z&ElRtb7z{}yxU><jAgG*?<_u-oBr&1Wg1`Ddd9LB3G-$Y8&?|}e|{)4lRZqIsqER$
z%GzfJ494%z#uk5n<$J(ykEMT%%~yH02MPCP&SX#DTqRlHDto5;^NpAt6&uTMHh+J1
z=8pCC_4n9g4CkL${(Nic`#<0QefhAsvbJtc^|M=7wHxd2-mJ`%n`b=z{;%E2|I5BT
z|MBL$Z1G{4$i0$3-0Nn(e|Fi@cKNgB!_D?2);mDufAatE)u%_+drj6j4CJboxJHzu
zB$lLFB^RXvDF!10BLiInV_gID5F<k?19K~5b8Q0yD+7b$_Ub|?8glbfGSez?YuJ`F
ze;rVRB*=!~{Irtt#G+J&^73-M%)IR4<ivthz5Jr|+3#$mfQlGAUHx3vIVCg!0JBe2
Ang9R*

literal 0
HcmV?d00001

diff --git a/js/_move.js b/js/_move.js
index 76c15c0..719b2ea 100644
--- a/js/_move.js
+++ b/js/_move.js
@@ -1,5 +1,6 @@
 var imageDataToMove;
 var canMoveSelection = false;
+var lastMovePos;
 
 // TODO: move with arrows
 function updateMovePreview(mouseEvent) {
@@ -12,6 +13,7 @@ function updateMovePreview(mouseEvent) {
 		Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2), 
 		Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
 
+	lastMovePos = lastMousePos;
 	moveSelection(lastMousePos[0] / zoom, lastMousePos[1] / zoom, imageDataToMove.width, imageDataToMove.height) 
 }
 
@@ -21,6 +23,6 @@ function endSelection() {
 
 	currentLayer.context.putImageData(
 		imageDataToMove, 
-		Math.round(lastMousePos[0] / zoom - imageDataToMove.width / 2), 
-		Math.round(lastMousePos[1] / zoom - imageDataToMove.height / 2));
+		Math.round(lastMovePos[0] / zoom - imageDataToMove.width / 2), 
+		Math.round(lastMovePos[1] / zoom - imageDataToMove.height / 2));
 }
\ No newline at end of file
diff --git a/js/_rectSelect.js b/js/_rectSelect.js
index a1a2e84..26653ea 100644
--- a/js/_rectSelect.js
+++ b/js/_rectSelect.js
@@ -73,11 +73,6 @@ function endRectSelection(mouseEvent) {
 	// Updating the cursor 
 	updateCursor();
 
-	// NOW
-		// the move tool stops working when esc is pressed
-		// when the move tool is disabled, the control is given to the brush tool
-			// the image data is added to the original layer when the move tool is disabled
-
 	//currentLayer.context.putImageData(imageData, startX, startY);
 }
 
@@ -89,7 +84,7 @@ function drawRect(x, y) {
 	// Clearing the vfx canvas
 	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
 	vfxContext.lineWidth = 1;
-	vfxContext.fillStyle = "black";
+	vfxContext.strokeStyle = "black";
 	vfxContext.setLineDash([4]);
 
 	// Drawing the rect
diff --git a/js/_rectangle.js b/js/_rectangle.js
index e7458fc..3976ddd 100644
--- a/js/_rectangle.js
+++ b/js/_rectangle.js
@@ -1,5 +1,7 @@
 var rectangleSize = 1;
 var prevRectangleSie = rectangleSize;
+var emptySVG = document.getElementById("empty-button-svg");
+var fullSVG = document.getElementById("full-button-svg");
 
 var drawMode = 'empty';
 var isDrawingRect = false;
@@ -70,19 +72,10 @@ function endRectDrawing(mouseEvent) {
 	line(endRectX, endRectY, startRectX, endRectY, rectangleSize);
 	line(startRectX, endRectY, startRectX, startRectY, rectangleSize);
 
-/*
-	// Drawing the final rectangle
-	currentLayer.context.lineWidth = rectangleSize;
-	currentLayer.context.strokeStyle = currentGlobalColor;
+	if (drawMode == 'fill') {
+		currentLayer.context.fillRect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
+	}
 
-	// Drawing the rect
-	currentLayer.context.beginPath();
-	console.log("Coords: " + startRectX + ", " + startRectY);
-	currentLayer.context.imageSmoothingEnabled = false;
-	currentLayer.context.rect(startRectX, startRectY, endRectX - startRectX, endRectY - startRectY);
-	currentLayer.context.setLineDash([]);
-	currentLayer.context.stroke();
-*/
 	// Clearing the vfx canvas
 	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
 }
@@ -106,6 +99,17 @@ function drawRectangle(x, y) {
 	vfxContext.stroke();
 }
 
+function setRectToolSvg() {
+	if (drawMode == 'empty') {
+		emptySVG.setAttribute("display", "visible");
+		fullSVG.setAttribute("display", "none");
+	}
+	else {
+		emptySVG.setAttribute("display", "none");
+		fullSVG.setAttribute("display", "visible");
+	}
+}
+
 function applyChanges() {
 	VFXCanvas.style.zIndex = MIN_Z_INDEX;
 }
\ No newline at end of file
diff --git a/js/_toolButtons.js b/js/_toolButtons.js
index 21b1776..6c846d1 100644
--- a/js/_toolButtons.js
+++ b/js/_toolButtons.js
@@ -37,10 +37,12 @@ on('click',"rectangle-button", function(){
     // If the user clicks twice on the button, they change the draw mode
     if (currentTool == 'rectangle') {
         if (drawMode == 'empty') {
-            drawMode = 'full';
+            drawMode = 'fill';
+            setRectToolSvg();
         }
         else {
             drawMode = 'empty';
+            setRectToolSvg();
         }
     }
     else {
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index 318b203..57750db 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -16,7 +16,6 @@
     <meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
     {{{google-analytics}}}
     {{{favicons}}}
-    
 </head>
 
 <body oncontextmenu="return false;">
@@ -87,7 +86,8 @@
         </li>
 
         <li class="expanded">
-            <button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32"}}</button>
+            <button title="Rectangle Tool (U)" id="rectangle-button">{{svg "rectangle.svg" width="32" height="32" id = "empty-button-svg"}}
+            {{svg "fullrect.svg" width="32" height="32" id = "full-button-svg" display = "none"}}</button>
             <button title="Increase Brush Size" id="rectangle-bigger-button" class="tools-menu-sub-button">{{svg "plus.svg" width="12" height="12"}}</button>
             <button title="Decrease Brush Size" id="rectangle-smaller-button" class="tools-menu-sub-button">{{svg "minus.svg" width="12" height="12"}}</button>
         </li>