From cc460446b6405745fb3e8af57ac9252b28ccaf40 Mon Sep 17 00:00:00 2001
From: Nicola <47360416+unsettledgames@users.noreply.github.com>
Date: Sun, 23 Jan 2022 13:32:23 +0100
Subject: [PATCH] Finished ellipse tool

---
 js/Util.js                | 31 +++++++++++++++++++++++++++++++
 js/tools/EllipseTool.js   | 20 ++++++++++++++++----
 js/tools/FillTool.js      | 11 +++++++----
 js/tools/SelectionTool.js | 23 +----------------------
 4 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/js/Util.js b/js/Util.js
index 6705ada..a6ba566 100644
--- a/js/Util.js
+++ b/js/Util.js
@@ -1,6 +1,37 @@
 // Acts as a public static class
 class Util {
 
+    /** Pastes the source image data on the destination image data, keeping the pixels where the 
+     *  source image data is transparent
+     * 
+     * @param {*} source 
+     * @param {*} destination 
+     */
+    static pasteData(underlyingImageData, pasteData, finalContext) {
+        for (let i=0; i<underlyingImageData.data.length; i+=4) {
+            let currentMovePixel = [
+                pasteData.data[i], pasteData.data[i+1], pasteData.data[i+2], pasteData.data[i+3]
+            ];
+
+            let currentUnderlyingPixel = [
+                underlyingImageData.data[i], underlyingImageData.data[i+1], 
+                underlyingImageData.data[i+2], underlyingImageData.data[i+3]
+            ];
+
+            // If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
+            if (Util.isPixelEmpty(currentMovePixel)) {
+                if (!Util.isPixelEmpty(currentUnderlyingPixel)) {
+                    pasteData.data[i] = currentUnderlyingPixel[0];
+                    pasteData.data[i+1] = currentUnderlyingPixel[1];
+                    pasteData.data[i+2] = currentUnderlyingPixel[2];
+                    pasteData.data[i+3] = currentUnderlyingPixel[3];
+                }
+            }
+        }
+
+        finalContext.putImageData(pasteData, 0, 0);
+    }
+
     /** Tells if a pixel is empty (has alpha = 0)
      * 
      * @param {*} pixel 
diff --git a/js/tools/EllipseTool.js b/js/tools/EllipseTool.js
index a43a1cd..691239b 100644
--- a/js/tools/EllipseTool.js
+++ b/js/tools/EllipseTool.js
@@ -35,9 +35,12 @@ class EllipseTool extends ResizableTool {
             this.switchFunction(this);
     }
 
-    onStart(mousePos) {
+    onStart(mousePos, mouseTarget) {
         super.onStart(mousePos);
 
+        if (mouseTarget.className != "drawingCanvas")
+            return;
+
         // Putting the tmp layer on top of everything
         currFile.TMPLayer.canvas.style.zIndex = parseInt(currFile.currentLayer.canvas.style.zIndex, 10) + 1;
 
@@ -60,6 +63,10 @@ class EllipseTool extends ResizableTool {
      */
 	onEnd(mousePos) {
         super.onEnd(mousePos);
+        
+        if (this.startMousePos == undefined)
+            return;
+
         let tmpContext = currFile.TMPLayer.context;
 
         this.endMousePos[0] = Math.floor(mousePos[0] / currFile.zoom) + 0.5;
@@ -67,16 +74,21 @@ class EllipseTool extends ResizableTool {
 
         // If I have to fill it, I do so
         if (this.currFillMode == 'fill') {
-            // Use the fill tool    
+            // Use the fill tool on the tmp canvas
+            FillTool.fill([this.startMousePos[0] * currFile.zoom, this.startMousePos[1] * currFile.zoom], 
+                currFile.TMPLayer.context);
         }
 
-        // Drawing the ellipse
-        this.drawEllipse(this.endMousePos[0], this.endMousePos[1], currFile.currentLayer.context);
+        Util.pasteData(currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
+            currFile.TMPLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]),
+            currFile.currentLayer.context);
         
         // Update the layer preview
         currFile.currentLayer.updateLayerPreview();
         // Clearing the tmp canvas
         tmpContext.clearRect(0, 0, currFile.TMPLayer.canvas.width, currFile.TMPLayer.canvas.height);
+
+        this.startMousePos = undefined;
 	}
 
     onSelect() {
diff --git a/js/tools/FillTool.js b/js/tools/FillTool.js
index cdcd0df..e45d867 100644
--- a/js/tools/FillTool.js
+++ b/js/tools/FillTool.js
@@ -17,7 +17,7 @@ class FillTool extends DrawingTool {
 	}
 
     
-    fill(cursorLocation) {
+    static fill(cursorLocation, context) {
         //changes a pixels color
         function colorPixel(tempImage, pixelPos, fillColor) {
             //console.log('colorPixel:',pixelPos);
@@ -39,8 +39,11 @@ class FillTool extends DrawingTool {
             return (r == color[0] && g == color[1] && b == color[2] && a == color[3]);
         }
 
+        if (context == undefined)
+            context = currFile.currentLayer.context;
+
         //temporary image holds the data while we change it
-        let tempImage = currFile.currentLayer.context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
+        let tempImage = context.getImageData(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
 
         //this is an array that holds all of the pixels at the top of the cluster
         let topmostPixelsArray = [[Math.floor(cursorLocation[0]/currFile.zoom), Math.floor(cursorLocation[1]/currFile.zoom)]];
@@ -53,7 +56,7 @@ class FillTool extends DrawingTool {
         let clusterColor = [tempImage.data[startingPosition],tempImage.data[startingPosition+1],tempImage.data[startingPosition+2], tempImage.data[startingPosition+3]];
 
         //the color to fill with
-        let fillColor = Color.hexToRgb(currFile.currentLayer.context.fillStyle);
+        let fillColor = Color.hexToRgb(context.fillStyle);
         
         //if you try to fill with the same color that's already there, exit the function
         if (clusterColor[0] == fillColor.r &&
@@ -118,7 +121,7 @@ class FillTool extends DrawingTool {
                 pixelPos += currFile.canvasSize[0] * 4;
             }
         }
-        currFile.currentLayer.context.putImageData(tempImage, 0, 0);
+        context.putImageData(tempImage, 0, 0);
     }
 
 	onDrag(mousePos, cursorTarget) {
diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index 38e6d0f..43dfdad 100644
--- a/js/tools/SelectionTool.js
+++ b/js/tools/SelectionTool.js
@@ -120,28 +120,7 @@ class SelectionTool extends Tool {
         currFile.TMPLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
         currFile.VFXLayer.context.clearRect(0, 0, currFile.canvasSize[0], currFile.canvasSize[1]);
         
-        for (let i=0; i<underlyingImageData.data.length; i+=4) {
-            let currentMovePixel = [
-                pasteData.data[i], pasteData.data[i+1], pasteData.data[i+2], pasteData.data[i+3]
-            ];
-
-            let currentUnderlyingPixel = [
-                underlyingImageData.data[i], underlyingImageData.data[i+1], 
-                underlyingImageData.data[i+2], underlyingImageData.data[i+3]
-            ];
-
-            // If the pixel of the clipboard is empty, but the one below it isn't, I use the pixel below
-            if (Util.isPixelEmpty(currentMovePixel)) {
-                if (!Util.isPixelEmpty(currentUnderlyingPixel)) {
-                    pasteData.data[i] = currentUnderlyingPixel[0];
-                    pasteData.data[i+1] = currentUnderlyingPixel[1];
-                    pasteData.data[i+2] = currentUnderlyingPixel[2];
-                    pasteData.data[i+3] = currentUnderlyingPixel[3];
-                }
-            }
-        }
-
-        currFile.currentLayer.context.putImageData(pasteData, 0, 0);
+        Util.pasteData(underlyingImageData, pasteData, currFile.currentLayer.context);
         currFile.currentLayer.updateLayerPreview();
 
         currFile.VFXLayer.canvas.style.zIndex = MIN_Z_INDEX;