Started commenting code

js/_pixelEditorUtility.js

@@ -1,3 +1,10 @@
+/***********MISCELLANEOUS UTILITY FUNCTIONS**************/
+
+/** Merges topLayer onto belowLayer
+ * 
+ * @param {*} belowLayer The layer on the bottom of the layer stack
+ * @param {*} topLayer The layer on the top of the layer stack
+ */
 function mergeLayers(belowLayer, topLayer) {
 	// Copying the above content on the layerBelow
     let belowImageData = belowLayer.getImageData(0, 0, canvas.width, canvas.height);
@@ -24,10 +31,19 @@ function mergeLayers(belowLayer, topLayer) {
         }
     }
 
+	// Putting the top data into the belowdata
     belowLayer.putImageData(toMergeImageData, 0, 0);
 }
 
+/** Used to programmatically create an input event
+ * 
+ * @param {*} keyCode KeyCode of the key to press
+ * @param {*} ctrl Is ctrl pressed?
+ * @param {*} alt Is alt pressed?
+ * @param {*} shift Is shift pressed?
+ */
 function simulateInput(keyCode, ctrl, alt, shift) {
+	// I just copy pasted this from stack overflow lol please have mercy
 	let keyboardEvent = document.createEvent("KeyboardEvent");
 	let initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
 
@@ -46,38 +62,62 @@ function simulateInput(keyCode, ctrl, alt, shift) {
 	document.dispatchEvent(keyboardEvent);
 }
 
+/** Tells if a pixel is empty (has alpha = 0)
+ * 
+ * @param {*} pixel 
+ */
 function isPixelEmpty(pixel) {
 	if (pixel == null || pixel === undefined) {
 		return false;
 	}
 	
-    if ((pixel[0] == 0 && pixel[1] == 0 && pixel[2] == 0) || pixel[3] == 0) {
+	// If the alpha channel is 0, the current pixel is empty
+    if (pixel[3] == 0) {
         return true;
     }
 	
     return false;
 }
 
+/** Tells if element is a child of an element with class className
+ * 
+ * @param {*} element 
+ * @param {*} className 
+ */
 function isChildOfByClass(element, className) {
+	// Getting the element with class className
 	while (element != null && element.classList != null && !element.classList.contains(className)) {
 		element = element.parentElement;
 	}
 
+	// If that element exists and its class is the correct one
 	if (element != null && element.classList != null && element.classList.contains(className)) {
+		// Then element is a chld of an element with class className
 		return true;
 	}
 
 	return false;
 }
 
+/** Gets the eyedropped colour (the colour of the pixel pointed by the cursor when the user is using the eyedropper).
+ *  It takes the colour of the canvas with the biggest z-index, basically the one the user can see, since it doesn't
+ *  make much sense to sample a colour which is hidden behind a different layer
+ * 
+ * @param {*} cursorLocation The position of the cursor
+ */
 function getEyedropperColor(cursorLocation) {
+	// Making sure max will take some kind of value
 	let max = -1;
+	// Using tmpColour to sample the sprite
 	let tmpColour;
+	// Returned colour
 	let selectedColor;
 
 	for (let i=1; i<layers.length; i++) {
+		// Getting the colour of the pixel in the cursorLocation
 		tmpColour = layers[i].context.getImageData(Math.floor(cursorLocation[0]/zoom),Math.floor(cursorLocation[1]/zoom),1,1).data;
 
+		// If it's not empty, I check if it's on the top of the previous colour
 		if (layers[i].canvas.style.zIndex > max || isPixelEmpty(selectedColor) || selectedColor === undefined) {
 			max = layers[i].canvas.style.zIndex;
 
@@ -87,6 +127,7 @@ function getEyedropperColor(cursorLocation) {
 		}
 	}
 
+	// If the final colour was empty, I return black
 	if (isPixelEmpty(tmpColour) && selectedColor === undefined) {
 		selectedColor = [0, 0, 0];
 	}
@@ -94,7 +135,12 @@ function getEyedropperColor(cursorLocation) {
 	return selectedColor;
 }
 
+/** Gets the absolute position of the element (position on the screen)
+ * 
+ * @param {*} element The element of which we have to get the position
+ */
 function getElementAbsolutePosition(element) {
+	// Probably copy pasted this from stack overflow too, if not I don't recall how it works
 	let curleft = curtop = 0;
 
 	if (element.offsetParent) {
@@ -107,9 +153,15 @@ function getElementAbsolutePosition(element) {
 	return [curleft,curtop];
 }
 
+/** Nearest neighbor algorithm to scale a sprite
+ * 
+ * @param {*} src The source imageData
+ * @param {*} dst The destination imageData
+ */
 function nearestNeighbor (src, dst) {
 	let pos = 0
 
+	// Just applying the nearest neighbor algorithm
 	for (let y = 0; y < dst.height; y++) {
 		for (let x = 0; x < dst.width; x++) {
 		const srcX = Math.floor(x * src.width / dst.width)
@@ -125,7 +177,14 @@ function nearestNeighbor (src, dst) {
 	}
 }
   
+/** Bilinear interpolation used to scale a sprite
+ * 
+ * @param {*} src The source imageData
+ * @param {*} dst The destination imageData
+ */
 function bilinearInterpolation (src, dst) {
+	// Applying the bilinear interpolation algorithm
+
 	function interpolate (k, kMin, kMax, vMin, vMax) {
 	  	return Math.round((k - kMin) * vMax + (kMax - k) * vMin)
 	}
@@ -167,14 +226,21 @@ function bilinearInterpolation (src, dst) {
 	}
 }
   
+/** Resizes an imageData depending on the algorithm and on the new width and height
+ * 
+ * @param {*} image The imageData to scale
+ * @param {*} width The new width of the imageData
+ * @param {*} height The new height of the imageData
+ * @param {*} algorithm Scaling algorithm chosen by the user in the dialogue
+ */
 function resizeImageData (image, width, height, algorithm) {
 	algorithm = algorithm || 'bilinear-interpolation'
   
-	let resize
+	let resize;
 	switch (algorithm) {
 	  	case 'nearest-neighbor': resize = nearestNeighbor; break
 	  	case 'bilinear-interpolation': resize = bilinearInterpolation; break
-	  	default: throw new Error(`Unknown algorithm: ${algorithm}`)
+	  	default: return image;
 	}
   
 	const result = new ImageData(width, height)
@@ -184,6 +250,10 @@ function resizeImageData (image, width, height, algorithm) {
 	return result
 }
 
+/** Gets the position in (x, y) format of the pixel with index "index" 
+ * 
+ * @param {*} index The index of the pixel of which we need the (x, y) position
+ */
 function getPixelPosition(index) {
 	let linearIndex = index / 4;
 	let x = linearIndex % layers[0].canvasSize[0];