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

@@ -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;
+        }
+    }
+}

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;

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;

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) {
 
 		

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;

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';
 }

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");

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**/