pixel-editor/js/_ellipse.js

// Saving the empty rect svg
var emptyEllipseSVG = document.getElementById("ellipse-empty-button-svg");
// and the full rect svg so that I can change them when the user changes rect modes
var fullEllipseSVG = document.getElementById("ellipse-full-button-svg");

// The start mode is empty ellipse
var ellipseDrawMode = 'empty';
// I'm not drawing a ellipse at the beginning
var isDrawingEllipse = false;

// Ellipse coordinates
let startEllipseX;
let startEllipseY;
let endEllipseX;
let endEllipseY;

// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Starts drawing the ellipse, saves the start coordinates
 * 
 * @param {*} mouseEvent 
 */
function startEllipseDrawing(mouseEvent) {
	// Putting the vfx layer on top of everything
    VFXCanvas.style.zIndex = parseInt(currentLayer.canvas.style.zIndex, 10) + 1;;
    // Updating flag
    isDrawingEllipse = true;

    // Saving the start coords of the ellipse
    let cursorPos = getCursorPosition(mouseEvent);
    startEllipseX = Math.floor(cursorPos[0] / zoom) + 0.5;
    startEllipseY = Math.floor(cursorPos[1] / zoom) + 0.5;

    drawEllipse(startEllipseX, startEllipseY);
}

// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Updates the ellipse preview depending on the position of the mouse
 * 
 * @param {*} mouseEvent The mouseEvent from which we'll get the mouse position
 */
function updateEllipseDrawing(mouseEvent) {
	let pos = getCursorPosition(mouseEvent);

	// Drawing the ellipse at the right position
	drawEllipse(Math.round(pos[0] / zoom) + 0.5, Math.round(pos[1] / zoom) + 0.5);
}

// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Finishes drawing the ellipse, decides the end coordinates and moves the preview ellipse to the
 *  current layer
 * 
 * @param {*} mouseEvent event from which we'll get the mouse position
 */
function endEllipseDrawing(mouseEvent) {
	// Getting the end position
	let currentPos = getCursorPosition(mouseEvent);
	let vfxContext = VFXCanvas.getContext("2d");

	endEllipseX = Math.round(currentPos[0] / zoom) + 0.5;
	endEllipseY = Math.round(currentPos[1] / zoom) + 0.5;

	// Inverting end and start (start must always be the top left corner)
	if (endEllipseX < startEllipseX) {
		let tmp = endEllipseX;
		endEllipseX = startEllipseX;
		startEllipseX = tmp;
	}
	// Same for the y
	if (endEllipseY < startEllipseY) {
		let tmp = endEllipseY;
		endEllipseY = startEllipseY;
		startEllipseY = tmp;
	}

	// Resetting this
	isDrawingEllipse = false;
	// Drawing the ellipse
	startEllipseY -= 0.5;
	endEllipseY -= 0.5;
	endEllipseX -= 0.5;
	startEllipseX -= 0.5;

	// Setting the correct linewidth and colour
	currentLayer.context.lineWidth = tool.ellipse.brushSize;
	currentLayer.context.fillStyle = currentGlobalColor;

	// Drawing the ellipse using 4 lines
	line(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
	line(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
	line(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
	line(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);

	// If I have to fill it, I do so
	if (ellipseDrawMode == 'fill') {
		currentLayer.context.fillRect(startEllipseX, startEllipseY, endEllipseX - startEllipseX, endEllipseY - startEllipseY);
	}

	// Clearing the vfx canvas
	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);
}

// TODO: [ELLIPSE] Make it draw ellipse instead of copy-pasted rectangle
/** Draws a ellipse with end coordinates given by x and y on the VFX layer (draws
 *  the preview for the ellipse tool)
 * 
 * @param {*} x The current end x of the ellipse
 * @param {*} y The current end y of the ellipse
 */
function drawEllipse(x, y) {
	// Getting the vfx context
	let vfxContext = VFXCanvas.getContext("2d");

	// Clearing the vfx canvas
	vfxContext.clearRect(0, 0, VFXCanvas.width, VFXCanvas.height);

	// Drawing the ellipse
	vfxContext.lineWidth = tool.ellipse.brushSize;
	vfxContext.strokeStyle = currentGlobalColor;

	// Drawing the ellipse
	vfxContext.beginPath();
	if ((tool.ellipse.brushSize % 2 ) == 0) {
		vfxContext.rect(startEllipseX - 0.5, startEllipseY - 0.5, x - startEllipseX, y - startEllipseY);
	}
	else {
		vfxContext.rect(startEllipseX, startEllipseY, x - startEllipseX, y - startEllipseY);
	}

	vfxContext.setLineDash([]);
    vfxContext.stroke();
}

/** Sets the correct tool icon depending on its mode
 * 
 */
function setEllipseToolSvg() {
	console.log("set eilipse svg");
	if (ellipseDrawMode == 'empty') {
        emptyEllipseSVG.setAttribute('display', 'visible');
        fullEllipseSVG.setAttribute('display', 'none');
    }
    else {
        emptyEllipseSVG.setAttribute('display', 'none');
        fullEllipseSVG.setAttribute('display', 'visible');
    }
}