Introduce ellipse tool (which draws rectangle for now)

js/_ellipse.js

@@ -0,0 +1,146 @@
+// 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');
+    }
+}