From 9ef0e6eceacc1d8fde43afb5dd91a66da2dfc1e7 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Thu, 31 Dec 2020 13:05:51 +0100 Subject: [PATCH] Started commenting code --- js/_addColor.js | 9 +++-- js/_addColorButton.js | 2 +- js/_changeZoom.js | 17 ++++++--- js/_checkerboard.js | 4 ++- js/_copyPaste.js | 26 ++++++++++++-- js/_createButton.js | 6 ++++ js/_createColorPalette.js | 15 +++++--- js/_dialogue.js | 14 ++++++++ js/_layer.js | 2 +- js/_mouseEvents.js | 4 +-- js/_newPixel.js | 33 ++++++++++++++--- js/_pixelEditorUtility.js | 76 +++++++++++++++++++++++++++++++++++++-- js/_toolButtons.js | 4 +-- 13 files changed, 184 insertions(+), 28 deletions(-) diff --git a/js/_addColor.js b/js/_addColor.js index ac95af0..85e266b 100644 --- a/js/_addColor.js +++ b/js/_addColor.js @@ -1,8 +1,11 @@ let currentPalette = []; -//adds the given color to the palette -//input hex color string -//returns list item element + +/** Adds the given color to the palette + * + * @param {*} newColor the colour to add + * @return the list item containing the added colour + */ function addColor (newColor) { //add # at beginning if not present if (newColor.charAt(0) != '#') diff --git a/js/_addColorButton.js b/js/_addColorButton.js index 9da3169..7cb5f3f 100644 --- a/js/_addColorButton.js +++ b/js/_addColorButton.js @@ -1,4 +1,4 @@ -//add color button +// add-color-button management on('click', 'add-color-button', function(){ if (!documentCreated) return; diff --git a/js/_changeZoom.js b/js/_changeZoom.js index 4dc9eff..8ff9759 100644 --- a/js/_changeZoom.js +++ b/js/_changeZoom.js @@ -1,4 +1,9 @@ -function changeZoom (layer, direction, cursorLocation) { +/** Changes the zoom level of the canvas + * @param {*} direction 'in' or 'out' + * @param {*} cursorLocation The position of the cursor when the user zoomed + */ +function changeZoom (direction, cursorLocation) { + // Computing current width and height var oldWidth = canvasSize[0] * zoom; var oldHeight = canvasSize[1] * zoom; var newWidth, newHeight; @@ -11,7 +16,9 @@ function changeZoom (layer, direction, cursorLocation) { newHeight = canvasSize[1] * zoom; //adjust canvas position - layer.setCanvasOffset(layer.canvas.offsetLeft + (oldWidth - newWidth) *cursorLocation[0]/oldWidth, layer.canvas.offsetTop + (oldHeight - newHeight) *cursorLocation[1]/oldWidth); + layers[0].setCanvasOffset( + layers[0].canvas.offsetLeft + (oldWidth - newWidth) * cursorLocation[0]/oldWidth, + layers[0].canvas.offsetTop + (oldHeight - newHeight) * cursorLocation[1]/oldWidth); } //if you want to zoom in else if (direction == 'in' && zoom + Math.ceil(zoom/10) < window.innerHeight/4){ @@ -20,11 +27,13 @@ function changeZoom (layer, direction, cursorLocation) { newHeight = canvasSize[1] * zoom; //adjust canvas position - layer.setCanvasOffset(layer.canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), layer.canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight)); + layers[0].setCanvasOffset( + layers[0].canvas.offsetLeft - Math.round((newWidth - oldWidth)*cursorLocation[0]/oldWidth), + layers[0].canvas.offsetTop - Math.round((newHeight - oldHeight)*cursorLocation[1]/oldHeight)); } //resize canvas - layer.resize(); + layers[0].resize(); // adjust brush size currentTool.updateCursor(); diff --git a/js/_checkerboard.js b/js/_checkerboard.js index 28c28b6..28b15c8 100644 --- a/js/_checkerboard.js +++ b/js/_checkerboard.js @@ -13,7 +13,9 @@ var currentColor = firstCheckerBoardColor; // Saving number of squares filled until now var nSquaresFilled = 0; - +/** Fills the checkerboard canvas with squares with alternating colours + * + */ function fillCheckerboard() { // Getting checkerboard context var context = checkerBoard.context; diff --git a/js/_copyPaste.js b/js/_copyPaste.js index 90e2a70..e97215f 100644 --- a/js/_copyPaste.js +++ b/js/_copyPaste.js @@ -1,11 +1,17 @@ +// Data saved when copying or cutting let clipboardData; +// Tells if the user is pasting something or not let isPasting = false; +// Coordinates of the copied (or cut) selection let copiedStartX; let copiedStartY; let copiedEndX; let copiedEndY; +/** Copies the current selection to the clipboard + * + */ function copySelection() { copiedEndX = endX; copiedEndY = endY; @@ -16,13 +22,19 @@ function copySelection() { clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1); } +/** Pastes the clipboard data onto the current layer + * + */ function pasteSelection() { // Can't paste if the layer is locked if (currentLayer.isLocked) { return; } + + // Cancel the current selection endSelection(); + // I'm pasting isPasting = true; // Putting the image data on the tmp layer TMPLayer.context.putImageData(clipboardData, copiedStartX, copiedStartY); @@ -43,9 +55,11 @@ function pasteSelection() { //drawRect(copiedStartX, copiedEndX, copiedStartY, copiedEndY); } +/** Cuts the current selection and copies it to the clipboard + * + */ function cutSelectionTool() { - console.log("Taglio"); - + // Saving the coordinates copiedEndX = endX; copiedEndY = endY; @@ -53,13 +67,19 @@ function cutSelectionTool() { copiedStartY = startY; // Getting the selected pixels + // If I'm already moving a selection if (imageDataToMove !== undefined) { + // I just save that selection in the clipboard clipboardData = imageDataToMove; + // And clear the underlying space TMPLayer.context.clearRect(0, 0, TMPLayer.canvas.width, TMPLayer.canvas.height); + // The image has been cleared, so I don't have anything to move anymore imageDataToMove = undefined; } else { - clipboardData = currentLayer.context.getImageData(startX, startY, endX - startX + 1, endY - startY + 1); + // Otherwise, I copy the current selection into the clipboard + copySelection(); + // And clear the selection currentLayer.context.clearRect(startX - 0.5, startY - 0.5, endX - startX + 1, endY - startY + 1); } } \ No newline at end of file diff --git a/js/_createButton.js b/js/_createButton.js index 866edc4..a110374 100644 --- a/js/_createButton.js +++ b/js/_createButton.js @@ -1,7 +1,13 @@ +/** Triggered when the "Create" button in the new pixel dialogue is pressed + * + */ on('click', 'create-button', function (){ + // Getting the values of the form var width = getValue('size-width'); var height = getValue('size-height'); var mode = getValue("editor-mode"); + + // Creating a new pixel with those properties newPixel(width, height, mode); document.getElementById('new-pixel-warning').style.display = 'block'; diff --git a/js/_createColorPalette.js b/js/_createColorPalette.js index 8f7352b..01a502d 100644 --- a/js/_createColorPalette.js +++ b/js/_createColorPalette.js @@ -1,5 +1,11 @@ -function createColorPalette(paletteColors, fillBackground, deletePreviousPalette = true) { +/** Creates the colour palette + * + * @param {*} paletteColors The colours of the palette + * @param {*} deletePreviousPalette Tells if the app should delete the previous palette or not + * (used when opening a file, for example) + */ +function createColorPalette(paletteColors, deletePreviousPalette = true) { //remove current palette if (deletePreviousPalette) { colors = document.getElementsByClassName('color-button'); @@ -11,6 +17,7 @@ function createColorPalette(paletteColors, fillBackground, deletePreviousPalette var lightestColor = '#000000'; var darkestColor = '#ffffff'; + // Adding all the colours in the array for (var i = 0; i < paletteColors.length; i++) { var newColor = paletteColors[i]; var newColorElement = addColor(newColor); @@ -42,6 +49,9 @@ function createColorPalette(paletteColors, fillBackground, deletePreviousPalette currentLayer.context.fillStyle = darkestColor; } +/** Creates the palette with the colours used in all the layers + * + */ function createPaletteFromLayers() { let colors = {}; @@ -68,8 +78,6 @@ function createPaletteFromLayers() { } } - console.log(colors); - //create array out of colors object let colorPaletteArray = []; for (let color in colors) { @@ -77,7 +85,6 @@ function createPaletteFromLayers() { colorPaletteArray.push('#'+rgbToHex(colors[color])); } } - console.log('COLOR PALETTE ARRAY', colorPaletteArray); //create palette form colors array createColorPalette(colorPaletteArray, false); diff --git a/js/_dialogue.js b/js/_dialogue.js index ba3a741..29bdb53 100644 --- a/js/_dialogue.js +++ b/js/_dialogue.js @@ -1,9 +1,17 @@ +/** Shows the dialogue window called dialogueName, which is a child of pop-up-container in pixel-editor.hbs + * + * @param {*} dialogueName The name of the window to show + * @param {*} trackEvent Should I track the GA event? + */ function showDialogue (dialogueName, trackEvent) { if (typeof trackEvent === 'undefined') trackEvent = true; + // The pop up window is open dialogueOpen = true; + // Showing the pop up container popUpContainer.style.display = 'block'; + // Showing the window document.getElementById(dialogueName).style.display = 'block'; //track google event @@ -11,6 +19,9 @@ function showDialogue (dialogueName, trackEvent) { ga('send', 'event', 'Palette Editor Dialogue', dialogueName); /*global ga*/ } +/** Closes the current dialogue by hiding the window and the pop-up-container + * + */ function closeDialogue () { popUpContainer.style.display = 'none'; @@ -22,6 +33,9 @@ function closeDialogue () { dialogueOpen = false; } +/** Closes a dialogue window if the user clicks everywhere but in the current window + * + */ popUpContainer.addEventListener('click', function (e) { if (e.target == popUpContainer) closeDialogue(); diff --git a/js/_layer.js b/js/_layer.js index 3500c43..d270bc4 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -456,7 +456,7 @@ function deleteLayer(saveHistory = true) { unusedIDs.push(toDelete.id); // Selecting the next layer - if (layerIndex != (layers.length - 3)) { + if (layerIndex != (layers.length - 4)) { layers[layerIndex + 1].selectLayer(); } // or the previous one if the next one doesn't exist diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 124b18a..30aa329 100644 --- a/js/_mouseEvents.js +++ b/js/_mouseEvents.js @@ -134,7 +134,7 @@ window.addEventListener("mouseup", function (mouseEvent) { mode = 'out'; } - changeZoom(layers[0], mode, getCursorPosition(mouseEvent)); + changeZoom(mode, getCursorPosition(mouseEvent)); for (let i=1; i