Added comments, removed unused variables.

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>

js/_canvas.js

@@ -1,3 +1,9 @@
+/** Handler class for a single canvas (a single layer)
+ *
+ * @param width Canvas width
+ * @param height Canvas height
+ * @param canvas HTML canvas element
+ */
 function Canvas(width, height, canvas) {
     this.canvasSize = [width, height],
     this.canvas = canvas,
@@ -23,6 +29,7 @@ function Canvas(width, height, canvas) {
         this.canvas.style.left = 64+canvasView.clientWidth/2-(this.canvasSize[0]*zoom/2)+'px';
         this.canvas.style.top = 48+canvasView.clientHeight/2-(this.canvasSize[1]*zoom/2)+'px';
     },
+    // Resizes canvas
     this.resize = function() {
         let newWidth = (this.canvas.width * zoom) + 'px';
         let newHeight = (this.canvas.height *zoom)+ 'px';

js/_checkerboard.js

@@ -1,13 +1,15 @@
+// This script contains all the functions used to manage the checkboard
+
+// Setting current colour (each square has a different colour
 var currentColor = firstCheckerBoardColor;
+// Saving number of squares filled until now
 var nSquaresFilled = 0;
 
-/* TODO add check for canvas dimentions (right now negative values can be inserted and a canvas will be generated, it is just
-    necessary to add a conversion from negative to positive values.
- */
-
 function fillCheckerboard() {
+    // Getting checkerboard context
     var context = checkerBoard.context;
 
+    // Cycling through the canvas (using it as a matrix)
     for (var i=0; i<canvasSize[0] / checkerBoardSquareSize; i++) {
         nSquaresFilled = 0;
 
@@ -15,6 +17,7 @@ function fillCheckerboard() {
             var rectX;
             var rectY;
 
+            // Managing the not perfect squares (the ones at the sides if the canvas' sizes are not powers of checkerBoardSquareSize
             if (i * checkerBoardSquareSize < canvasSize[0]) {
                 rectX = i * checkerBoardSquareSize;
             }
@@ -29,20 +32,24 @@ function fillCheckerboard() {
                 rectY = canvasSize[1];
             }
 
+            // Selecting the colour
             context.fillStyle = currentColor;
             context.fillRect(rectX, rectY, checkerBoardSquareSize, checkerBoardSquareSize);
 
+            // Changing colour
             changeCheckerboardColor();
 
             nSquaresFilled++;
         }
 
+        // If the number of filled squares was even, I change colour for the next column
         if ((nSquaresFilled % 2) == 0) {
             changeCheckerboardColor();
         }
     }
 }
 
+// Simply switches the checkerboard colour
 function changeCheckerboardColor(isVertical) {
     if (currentColor == firstCheckerBoardColor) {
         currentColor = secondCheckerBoardColor;

js/_drawLine.js

@@ -9,9 +9,12 @@ function line(x0,y0,x1,y1) {
 
 	while (true) {
 	    //set pixel
+		// If the current tool is the brush
 		if (currentTool == 'pencil') {
+			// I fill the rect
 			currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
 		} else if (currentTool == 'eraser') {
+			// In case I'm using the eraser I must clear the rect
             currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), eraserSize, eraserSize);
 		}
 		

js/_mouseEvents.js

@@ -29,7 +29,6 @@ window.addEventListener("mousedown", function (mouseEvent) {
 		currentTool = 'resize-brush';
 		prevBrushSize=brushSize;
 	}
-	// TODO add eraser resize for scroll wheel
 	
 	if (currentTool == 'eyedropper' && mouseEvent.target == currentLayer.canvas)
 	    eyedropperPreview.style.display = 'block';
@@ -159,6 +158,7 @@ function draw (mouseEvent) {
 	}
 	// Decided to write a different implementation in case of differences between the brush and the eraser tool
 	else if (currentTool == 'eraser') {
+	    // Uses the same preview as the brush
         //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';
@@ -178,8 +178,10 @@ function draw (mouseEvent) {
         }
 	}
 	else if (currentTool == 'pan' && dragging) {
+	    // Setting first layer position
         setCanvasOffset(layers[0].canvas, layers[0].canvas.offsetLeft + (cursorLocation[0] - lastPos[0]), layers[0].canvas.offsetTop + (cursorLocation[1] - lastPos[1]));
-		for (let i=1; i<layers.length; i++) {
+		// Copying that position to the other layers
+        for (let i=1; i<layers.length; i++) {
             layers[i].copyData(layers[0]);
         }
     }
@@ -198,7 +200,6 @@ function draw (mouseEvent) {
 		else eyedropperPreview.classList.add('dark');
     }
     else if (currentTool == 'resize-brush' && dragging) {
-       
         //get new brush size based on x distance from original clicking location
         var distanceFromClick = cursorLocation[0] - lastPos[0];
         //var roundingAmount = 20 - Math.round(distanceFromClick/10);

js/_updateCursor.js

@@ -7,6 +7,7 @@ function updateCursor () {
 		brushPreview.style.width = brushSize * zoom + 'px';
 		brushPreview.style.height = brushSize * zoom + 'px';
 	} else if (currentTool == 'eraser') {
+	    // Size management for the eraser
 		console.log("Eraser size: " + eraserSize);
         canvasView.style.cursor = 'crosshair';
         brushPreview.style.display = 'block';

js/_variables.js

@@ -2,21 +2,22 @@
 var canvasSize,zoom;
 var dragging = false;
 var lastPos = [0,0];
-var canvasPosition;
 var currentTool = 'pencil';
 var currentToolTemp = 'pencil';
 var brushSize = 1;
 var eraserSize = 1;
 var prevBrushSize = 1;
-var prevEraserSize = 1;
-var menuOpen = false;
 var dialogueOpen = false;
 var documentCreated = false;
 
 // Checkerboard management
+// Checkerboard color 1
 var firstCheckerBoardColor = 'rgba(139, 139, 139, 1)';
+// Checkerboard color 2
 var secondCheckerBoardColor = 'rgba(105, 105, 105, 1)';
+// Square size for the checkerboard
 var checkerBoardSquareSize = 16;
+// Checkerboard canvas
 var checkerBoardCanvas = document.getElementById("checkerboard");
 
 //common elements
@@ -27,13 +28,12 @@ var colors = document.getElementsByClassName("color-button");
 var colorsMenu = document.getElementById("colors-menu");
 var popUpContainer = document.getElementById("pop-up-container");
 
-//html canvas
+// main canvas
 var canvas = document.getElementById("pixel-canvas");
 var context = canvas.getContext("2d");
 
 // Layers
 var layers = [];
+// Currently selected layer
 var currentLayer;
 
-//TODO all layers must be moved and resized at the same time
-