From 15e6d7b08aa5e860007f7bf3fb6685c3841963e6 Mon Sep 17 00:00:00 2001
From: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
Date: Sun, 31 Mar 2019 13:28:46 +0200
Subject: [PATCH] Added _checkerboard.js for transparency checkerboard
 management. Implemented generation of checkerboard (still need to test it
 properly, for example with weird height/width values).

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>
---
 js/_checkerboard.js | 24 ++++++++++++++++++++++++
 js/_colorChanged.js |  3 ---
 js/_drawLine.js     |  8 ++++++--
 js/_mouseEvents.js  | 23 ++++++++++++++++++++++-
 js/_newPixel.js     |  3 +++
 js/_updateCursor.js |  3 ++-
 js/_variables.js    |  3 +++
 js/pixel-editor.js  |  3 ++-
 8 files changed, 62 insertions(+), 8 deletions(-)
 create mode 100644 js/_checkerboard.js

diff --git a/js/_checkerboard.js b/js/_checkerboard.js
new file mode 100644
index 0000000..6c5a380
--- /dev/null
+++ b/js/_checkerboard.js
@@ -0,0 +1,24 @@
+var currentColor = firstCheckerBoardColor;
+
+function fillCheckerboard() {
+    for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
+        for (var j=0; j<canvasSize[1] / checkerBoardSquareSize; j++) {
+            context.fillStyle = currentColor;
+            context.fillRect(i * checkerBoardSquareSize, j * checkerBoardSquareSize, checkerBoardSquareSize, checkerBoardSquareSize);
+
+            changeCheckerboardColor(false);
+        }
+
+        changeCheckerboardColor(false);
+    }
+}
+
+function changeCheckerboardColor(rowEndReached) {
+    if (!rowEndReached) {
+        if (currentColor == firstCheckerBoardColor) {
+            currentColor = secondCheckerBoardColor;
+        } else if (currentColor == secondCheckerBoardColor) {
+            currentColor = firstCheckerBoardColor;
+        }
+    }
+}
\ No newline at end of file
diff --git a/js/_colorChanged.js b/js/_colorChanged.js
index e782722..93f052c 100644
--- a/js/_colorChanged.js
+++ b/js/_colorChanged.js
@@ -24,9 +24,6 @@ on('input', 'jscolor-hex-input', function (e) {
 //changes all of one color to another after being changed from color picker
 function colorChanged(e) {
   console.log('colorChanged()');
-  
-
-  
 	//get colors
 	var newColor = hexToRgb(e.target.value);
 	var oldColor = e.target.oldColor;
diff --git a/js/_drawLine.js b/js/_drawLine.js
index 034c43d..7aee4fc 100644
--- a/js/_drawLine.js
+++ b/js/_drawLine.js
@@ -6,11 +6,15 @@ function line(x0,y0,x1,y1) {
 	var sx = (x0 < x1 ? 1 : -1);
 	var sy = (y0 < y1 ? 1 : -1);
 	var err = dx-dy;
-	var breaker = 0;
 
 	while (true) {
+		console.log("drawing line");
 	    //set pixel
-		context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+		if (currentTool == 'pencil') {
+			context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+		} else if (currentTool == 'eraser') {
+            context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
+		}
 		
 		//if we've reached the end goal, exit the loop
 		if ((x0==x1) && (y0==y1)) break;
diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js
index cf6a54c..a485a31 100644
--- a/js/_mouseEvents.js
+++ b/js/_mouseEvents.js
@@ -17,7 +17,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 			currentTool = 'pan';
 		else if (mouseEvent.altKey) 
 			currentTool = 'eyedropper';
-		else if (mouseEvent.target == canvas && currentTool == 'pencil')
+		else if (mouseEvent.target == canvas && (currentTool == 'pencil' || currentTool == 'eraser'))
 		    new HistoryStateEditCanvas();
 		    //saveHistoryState({type: 'canvas', canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 		
@@ -29,6 +29,7 @@ window.addEventListener("mousedown", function (mouseEvent) {
 		currentTool = 'resize-brush';
 		prevBrushSize=brushSize;
 	}
+	// TODO add eraser resize for scroll wheel
 	
 	if (currentTool == 'eyedropper' && mouseEvent.target == canvas)
 	    eyedropperPreview.style.display = 'block';
@@ -145,6 +146,26 @@ function draw (mouseEvent) {
 		if (colorLightness>127) brushPreview.classList.remove('dark');
 		else brushPreview.classList.add('dark');
 	}
+	// Decided to write a different implementation in case of differences between the brush and the eraser tool
+	else if (currentTool == 'eraser') {
+        //move the brush preview
+        brushPreview.style.left = cursorLocation[0] + canvas.offsetLeft - brushSize * zoom / 2 + 'px';
+        brushPreview.style.top = cursorLocation[1] + canvas.offsetTop - brushSize * zoom / 2 + 'px';
+
+        //hide brush preview outside of canvas / canvas view
+        if (mouseEvent.target == canvas || mouseEvent.target == canvasView)
+            brushPreview.style.visibility = 'visible';
+        else
+            brushPreview.style.visibility = 'hidden';
+
+        //draw line to current pixel
+        if (dragging) {
+            if (mouseEvent.target == canvas || mouseEvent.target == canvasView) {
+                line(Math.floor(lastPos[0]/zoom),Math.floor(lastPos[1]/zoom),Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom));
+                lastPos = cursorLocation;
+            }
+        }
+	}
 	else if (currentTool == 'pan' && dragging) {
 
 		
diff --git a/js/_newPixel.js b/js/_newPixel.js
index 21dc3ea..5b64c5e 100644
--- a/js/_newPixel.js
+++ b/js/_newPixel.js
@@ -56,10 +56,13 @@ function newPixel (width, height, palette) {
 	  addColor(defaultBackgroundColor);
     
     //fill background of canvas with bg color
+		fillCheckerboard();
+		/*
 		context.fillStyle = '#'+defaultBackgroundColor;
 		context.fillRect(0, 0, canvasSize[0], canvasSize[1]);
 		
 		console.log('#'+defaultBackgroundColor)
+		*/
 		
 		//set current drawing color as foreground color
 		context.fillStyle = '#'+defaultForegroundColor;
diff --git a/js/_updateCursor.js b/js/_updateCursor.js
index 45d19c9..587fc17 100644
--- a/js/_updateCursor.js
+++ b/js/_updateCursor.js
@@ -12,6 +12,7 @@ function updateCursor () {
         brushPreview.style.display = 'block';
         brushPreview.style.width = eraserSize * zoom + 'px';
         brushPreview.style.height = eraserSize * zoom + 'px';
+        context.fillStyle = 'rgba(255, 0, 0, 0)';
 	} else
 		brushPreview.style.display = 'none';
 	
@@ -32,6 +33,6 @@ function updateCursor () {
 	if (currentTool == 'zoom') 
 		canvasView.style.cursor = "url('/pixel-editor/zoom-in.png'), auto";
 		
-	if (currentTool == 'resize-brush') 
+	if (currentTool == 'resize-brush')
 		canvasView.style.cursor = 'default';
 }
\ No newline at end of file
diff --git a/js/_variables.js b/js/_variables.js
index 90e3077..52185fa 100644
--- a/js/_variables.js
+++ b/js/_variables.js
@@ -12,6 +12,9 @@ var prevEraserSize = 1;
 var menuOpen = false;
 var dialogueOpen = false;
 var documentCreated = false;
+var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';
+var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
+var checkerBoardSquareSize = 16;
 
 //common elements
 var brushPreview = document.getElementById("brush-preview");
diff --git a/js/pixel-editor.js b/js/pixel-editor.js
index b507cac..9a8e11c 100644
--- a/js/pixel-editor.js
+++ b/js/pixel-editor.js
@@ -40,7 +40,8 @@
 //=include _fill.js 
 //=include _history.js 
 //=include _deleteColor.js 
-//=include _replaceAllOfColor.js 
+//=include _replaceAllOfColor.js
+//=include _checkerboard.js
 
 
 /**load file**/