From 0126e34998033db677a1834462485a4ebc05bbb0 Mon Sep 17 00:00:00 2001
From: Dawn <93628226+DawnTheWitch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 20:32:43 -0400
Subject: [PATCH 1/6] Universal Event Handlers with a splash of #48

---
 src/AEG/AtomNode.ts  |   8 ++--
 src/AEG/Point.ts     |  11 +++++
 src/AEG/Rectangle.ts |   8 ++--
 src/AtomMode.ts      |  94 ++++++++++++++++++++++++++++++++++++
 src/CutMode.ts       | 111 +++++++++++++++++++++++++++++++++++++++++++
 src/index.ts         |  63 ++++++++++++++++++------
 6 files changed, 273 insertions(+), 22 deletions(-)
 create mode 100644 src/AtomMode.ts
 create mode 100644 src/CutMode.ts

diff --git a/src/AEG/AtomNode.ts b/src/AEG/AtomNode.ts
index 9db61c47..29722f94 100644
--- a/src/AEG/AtomNode.ts
+++ b/src/AEG/AtomNode.ts
@@ -29,10 +29,10 @@ export class AtomNode {
      * @param rect The rectangle to be set as the boundary box of this node.
      * @param val The value of the proposition represented by this node.
      */
-    public constructor(val: string, origin: Point, rect: Rectangle) {
-        this.rect = rect;
-        this.identifier = val;
-        this.origin = origin;
+    public constructor(val?: string, origin?: Point, rect?: Rectangle) {
+        this.rect = rect ?? new Rectangle();
+        this.identifier = val ?? "";
+        this.origin = origin ?? new Point();
     }
 
     /**
diff --git a/src/AEG/Point.ts b/src/AEG/Point.ts
index 30f8690b..3aafc6b5 100644
--- a/src/AEG/Point.ts
+++ b/src/AEG/Point.ts
@@ -30,6 +30,17 @@ export class Point {
         this.y = coordY;
     }
 
+    /**
+     * Returns the distance between this Point and the other.
+     * @param otherPoint the other Point
+     * @returns the distance between the two
+     */
+    public distance(otherPoint: Point): number {
+        const dx = this.x - otherPoint.x;
+        const dy = this.y - otherPoint.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+
     /**
      * Method that returns a string representation of the point.
      * @returns The coordinates of the point.
diff --git a/src/AEG/Rectangle.ts b/src/AEG/Rectangle.ts
index 37b6b2fb..9f621f38 100644
--- a/src/AEG/Rectangle.ts
+++ b/src/AEG/Rectangle.ts
@@ -29,10 +29,10 @@ export class Rectangle {
      * @param w The width of the rectangle.
      * @param h The height of the rectangle.
      */
-    public constructor(vertex: Point, w: number, h: number) {
-        this.startVertex = vertex;
-        this.width = w;
-        this.height = h;
+    public constructor(vertex?: Point, w?: number, h?: number) {
+        this.startVertex = vertex ?? new Point();
+        this.width = w ?? 0;
+        this.height = h ?? 0;
     }
 
     /**
diff --git a/src/AtomMode.ts b/src/AtomMode.ts
new file mode 100644
index 00000000..e9fd5826
--- /dev/null
+++ b/src/AtomMode.ts
@@ -0,0 +1,94 @@
+import {Point} from "./AEG/Point";
+import {AtomNode} from "./AEG/AtomNode";
+import {redrawCut, tree} from "./index";
+import {Rectangle} from "./AEG/Rectangle";
+
+const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+const res: CanvasRenderingContext2D | null = canvas.getContext("2d");
+if (res === null) {
+    throw Error("2d rendering context not supported");
+}
+const ctx: CanvasRenderingContext2D = res;
+let atomMetrics: TextMetrics;
+
+let hasMouseDown: Boolean = false;
+let hasAtom: Boolean = false;
+let currentAtom: AtomNode = new AtomNode();
+
+export function atomHandler(event: Event) {
+    if (event.type === "keypress") {
+        const thisEvent: KeyboardEvent = <KeyboardEvent>event;
+        const regex = new RegExp(/^[A-Za-z]$/);
+        if (regex.test(thisEvent.key)) {
+            currentAtom.identifier = thisEvent.key;
+            hasAtom = true;
+        }
+    } else if (event.type === "mousedown" && hasAtom) {
+        const thisEvent: MouseEvent = <MouseEvent>event;
+        atomMetrics = ctx.measureText(currentAtom.identifier);
+        const startVertex: Point = new Point(
+            thisEvent.clientX,
+            thisEvent.clientY + atomMetrics.actualBoundingBoxAscent
+        );
+        currentAtom.rect = new Rectangle(
+            startVertex,
+            atomMetrics.width,
+            atomMetrics.fontBoundingBoxDescent + atomMetrics.actualBoundingBoxAscent
+        );
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        redrawCut(tree.sheet);
+        if (tree.canInsert(currentAtom)) {
+            drawAtom(currentAtom, "#00FF00");
+        } else {
+            drawAtom(currentAtom, "#6600ff");
+        }
+        hasMouseDown = true;
+    } else if (event.type === "mousemove" && hasMouseDown) {
+        const thisEvent: MouseEvent = <MouseEvent>event;
+        currentAtom.origin = new Point(thisEvent.clientX, thisEvent.clientY);
+        currentAtom.rect.startVertex = new Point(
+            thisEvent.clientX,
+            thisEvent.clientY - atomMetrics.actualBoundingBoxAscent
+        );
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        redrawCut(tree.sheet);
+        if (tree.canInsert(currentAtom)) {
+            drawAtom(currentAtom, "#00FF00");
+        } else {
+            drawAtom(currentAtom, "#FF0000");
+        }
+    } else if (event.type === "mouseup" && hasMouseDown) {
+        if (tree.canInsert(currentAtom)) {
+            tree.insert(currentAtom);
+        }
+        currentAtom = new AtomNode(currentAtom.identifier);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        redrawCut(tree.sheet);
+        hasMouseDown = false;
+        console.log(tree.toString());
+    } else if (event.type === "mouseout" && hasMouseDown) {
+        hasMouseDown = false;
+        currentAtom = new AtomNode(currentAtom.identifier);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        redrawCut(tree.sheet);
+    }
+}
+
+function drawAtom(thisAtom: AtomNode, color: string) {
+    ctx.fillStyle = color;
+    ctx.strokeStyle = color;
+    const displayBox = thisAtom.rect;
+    ctx.beginPath();
+    ctx.fillText(thisAtom.identifier, thisAtom.origin.x, thisAtom.origin.y);
+    ctx.rect(
+        displayBox.startVertex.x,
+        displayBox.startVertex.y,
+        displayBox.width,
+        displayBox.height
+    );
+    ctx.stroke();
+    ctx.fillStyle = "#000000";
+    ctx.strokeStyle = "000000";
+}
diff --git a/src/CutMode.ts b/src/CutMode.ts
new file mode 100644
index 00000000..f12fdf39
--- /dev/null
+++ b/src/CutMode.ts
@@ -0,0 +1,111 @@
+import {Point} from "./AEG/Point";
+import {CutNode} from "./AEG/CutNode";
+import {Ellipse} from "./AEG/Ellipse";
+import {redrawCut} from "./index";
+import {tree} from "./index";
+import {Rectangle} from "./AEG/Rectangle";
+
+const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+const res: CanvasRenderingContext2D | null = canvas.getContext("2d");
+const showRectElm: HTMLInputElement = <HTMLInputElement>document.getElementById("showRect");
+const modeElm: HTMLSelectElement = <HTMLSelectElement>document.getElementById("mode");
+if (res === null) {
+    throw Error("2d rendering context not supported");
+}
+const ctx: CanvasRenderingContext2D = res;
+
+let hasMouseDown: Boolean = false;
+let currentEllipse: Ellipse = new Ellipse();
+let startingPoint: Point = new Point();
+
+export function cutHandler(event: MouseEvent) {
+    let newCut: CutNode = new CutNode();
+    const currentPoint: Point = new Point();
+
+    if (event.type === "mousedown") {
+        hasMouseDown = true;
+        startingPoint.x = event.clientX;
+        startingPoint.y = event.clientY;
+    } else if (event.type === "mousemove" && hasMouseDown) {
+        currentPoint.x = event.clientX;
+        currentPoint.y = event.clientY;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        redrawCut(tree.sheet);
+        currentEllipse = createEllipse(startingPoint, currentPoint);
+        newCut.ellipse = currentEllipse;
+
+        if (tree.canInsert(newCut) && currentEllipse.radiusX > 30 && currentEllipse.radiusY > 30) {
+            drawEllipse(newCut, "#00FF00");
+        } else {
+            drawEllipse(newCut, "#6600ff");
+        }
+    } else if (event.type === "mouseup" && hasMouseDown) {
+        newCut = new CutNode(currentEllipse);
+        if (tree.canInsert(newCut) && currentEllipse.radiusX > 30 && currentEllipse.radiusY > 30) {
+            tree.insert(newCut);
+        }
+        hasMouseDown = false;
+        startingPoint = new Point();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        redrawCut(tree.sheet);
+        console.log(tree.toString());
+    } else if (event.type === "mouseout" && hasMouseDown) {
+        hasMouseDown = false;
+        startingPoint = new Point();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        redrawCut(tree.sheet);
+    }
+}
+
+/**
+ * A function to draw an ellipse between two points designated by the user.
+ * @param original the point where the user originally clicked
+ * @param current the point where the user's mouse is currently located
+ */
+export function createEllipse(original: Point, current: Point): Ellipse {
+    const center: Point = new Point(
+        (current.x - original.x) / 2 + original.x,
+        (current.y - original.y) / 2 + original.y
+    );
+
+    const sdx = original.x - current.x;
+    const sdy = original.y - current.y;
+    const dx = Math.abs(sdx);
+    const dy = Math.abs(sdy);
+    let rx, ry: number;
+
+    if (modeElm.value === "circumscribed") {
+        //This inscribed ellipse solution is inspired by the discussion of radius ratios in
+        //https://stackoverflow.com/a/433426/6342516
+        const rv: number = Math.floor(center.distance(current));
+        ry = Math.floor(rv * (dy / dx));
+        rx = Math.floor(rv * (dx / dy));
+    } else {
+        rx = dx / 2;
+        ry = dy / 2;
+    }
+
+    if (showRectElm.checked) {
+        ctx.beginPath();
+        ctx.rect(original.x, original.y, -sdx, -sdy);
+        ctx.stroke();
+    }
+
+    return new Ellipse(center, rx, ry);
+}
+
+function drawEllipse(thisCut: CutNode, color: string) {
+    ctx.strokeStyle = color;
+    const ellipse: Ellipse = <Ellipse>thisCut.ellipse;
+    const displayBox: Rectangle = ellipse.boundingBox;
+    const center: Point = ellipse.center;
+    ctx.beginPath();
+    ctx.rect(
+        displayBox.startVertex.x,
+        displayBox.startVertex.y,
+        displayBox.width,
+        displayBox.height
+    );
+    ctx.ellipse(center.x, center.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
+    ctx.stroke();
+}
diff --git a/src/index.ts b/src/index.ts
index efc861b5..5db3a65a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,8 +8,9 @@ import {AEGTree} from "./AEG/AEGTree";
 import {CutNode} from "./AEG/CutNode";
 import {Ellipse} from "./AEG/Ellipse";
 import {AtomNode} from "./AEG/AtomNode";
-import {ellipseCreation, removeCutListener} from "./EllipseCreation";
-import {atomCreation, removeAtomListener} from "./AtomCreation";
+import {cutHandler} from "./CutMode";
+import {atomHandler} from "./AtomMode";
+import {Rectangle} from "./AEG/Rectangle";
 
 //Extend the window interface to export functions without TS complaining
 declare global {
@@ -32,8 +33,7 @@ ctx.font = "35pt arial";
 
 //Global State
 const cutDisplay = <HTMLParagraphElement>document.getElementById("graphString");
-let inEllipseMode: Boolean = false;
-let inAtomMode: Boolean = false;
+let modeState: string;
 export const tree: AEGTree = new AEGTree();
 
 //Window Exports
@@ -51,12 +51,14 @@ declare global {
  * If atomMode was previously active, remove the listener.
  */
 function ellipseMode() {
-    inEllipseMode = true;
-    ellipseCreation();
-    if (inAtomMode) {
-        removeAtomListener();
-        inAtomMode = false;
+    if (modeState !== "ellipseMode") {
+        removeListeners();
+        modeState = "ellipseMode";
     }
+    canvas.addEventListener("mousedown", cutHandler);
+    canvas.addEventListener("mousemove", cutHandler);
+    canvas.addEventListener("mouseup", cutHandler);
+    canvas.addEventListener("mouseout", cutHandler);
 }
 
 /**
@@ -64,11 +66,29 @@ function ellipseMode() {
  * If ellipseMode was previously active, remove the listener.
  */
 function atomMode() {
-    inAtomMode = true;
-    atomCreation();
-    if (inEllipseMode) {
-        removeCutListener();
-        inEllipseMode = false;
+    if (modeState !== "atomMode") {
+        removeListeners();
+        modeState = "atomMode";
+    }
+    window.addEventListener("keypress", atomHandler);
+    canvas.addEventListener("mousedown", atomHandler);
+    canvas.addEventListener("mousemove", atomHandler);
+    canvas.addEventListener("mouseup", atomHandler);
+    canvas.addEventListener("mouseout", atomHandler);
+}
+
+function removeListeners() {
+    if (modeState === "ellipseMode") {
+        canvas.removeEventListener("mousedown", cutHandler);
+        canvas.removeEventListener("mousemove", cutHandler);
+        canvas.removeEventListener("mouseup", cutHandler);
+        canvas.removeEventListener("mouseout", cutHandler);
+    } else if (modeState === "atomMode") {
+        window.removeEventListener("keypress", atomHandler);
+        canvas.removeEventListener("mousedown", atomHandler);
+        canvas.removeEventListener("mousemove", atomHandler);
+        canvas.removeEventListener("mouseup", atomHandler);
+        canvas.removeEventListener("mouseout", atomHandler);
     }
 }
 
@@ -88,6 +108,7 @@ export function redrawCut(incomingNode: CutNode) {
     }
     if (incomingNode.ellipse instanceof Ellipse) {
         ctx.strokeStyle = "#000000";
+        const displayBox: Rectangle = incomingNode.ellipse.boundingBox;
         ctx.beginPath();
         ctx.ellipse(
             incomingNode.ellipse.center.x,
@@ -98,6 +119,12 @@ export function redrawCut(incomingNode: CutNode) {
             0,
             2 * Math.PI
         );
+        ctx.rect(
+            displayBox.startVertex.x,
+            displayBox.startVertex.y,
+            displayBox.width,
+            displayBox.height
+        );
         ctx.stroke();
     }
 }
@@ -107,6 +134,14 @@ export function redrawCut(incomingNode: CutNode) {
  * @param incomingNode The Atom Node to be redrawn
  */
 function redrawAtom(incomingNode: AtomNode) {
+    const displayBox = incomingNode.rect;
+    ctx.beginPath();
+    ctx.rect(
+        displayBox.startVertex.x,
+        displayBox.startVertex.y,
+        displayBox.width,
+        displayBox.height
+    );
     ctx.fillText(incomingNode.identifier, incomingNode.origin.x, incomingNode.origin.y);
     ctx.stroke();
 }

From 2576bca864d70fceaba22c8f81b9481e9ffe4323 Mon Sep 17 00:00:00 2001
From: Dawn <93628226+DawnTheWitch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 22:12:04 -0400
Subject: [PATCH 2/6] Minor fix on mouseup

I foolishly only changed the bounding box setting in mousemove so mouseup made the atom spawn with a messed up bounding box
---
 src/AtomMode.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/AtomMode.ts b/src/AtomMode.ts
index e9fd5826..07a151f1 100644
--- a/src/AtomMode.ts
+++ b/src/AtomMode.ts
@@ -28,7 +28,7 @@ export function atomHandler(event: Event) {
         atomMetrics = ctx.measureText(currentAtom.identifier);
         const startVertex: Point = new Point(
             thisEvent.clientX,
-            thisEvent.clientY + atomMetrics.actualBoundingBoxAscent
+            thisEvent.clientY - atomMetrics.actualBoundingBoxAscent
         );
         currentAtom.rect = new Rectangle(
             startVertex,

From dba5e3ec5dc83e9a9050381239c56db7b8427830 Mon Sep 17 00:00:00 2001
From: Dawn <93628226+DawnTheWitch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 22:38:21 -0400
Subject: [PATCH 3/6] Fix displaybox colors and extra line on ellipse

---
 src/AtomMode.ts | 2 --
 src/CutMode.ts  | 2 ++
 src/index.ts    | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/AtomMode.ts b/src/AtomMode.ts
index 07a151f1..3a3d6666 100644
--- a/src/AtomMode.ts
+++ b/src/AtomMode.ts
@@ -89,6 +89,4 @@ function drawAtom(thisAtom: AtomNode, color: string) {
         displayBox.height
     );
     ctx.stroke();
-    ctx.fillStyle = "#000000";
-    ctx.strokeStyle = "000000";
 }
diff --git a/src/CutMode.ts b/src/CutMode.ts
index f12fdf39..c9397f91 100644
--- a/src/CutMode.ts
+++ b/src/CutMode.ts
@@ -106,6 +106,8 @@ function drawEllipse(thisCut: CutNode, color: string) {
         displayBox.width,
         displayBox.height
     );
+    ctx.stroke();
+    ctx.beginPath();
     ctx.ellipse(center.x, center.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
     ctx.stroke();
 }
diff --git a/src/index.ts b/src/index.ts
index 5db3a65a..7a3a4c9f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -135,7 +135,10 @@ export function redrawCut(incomingNode: CutNode) {
  */
 function redrawAtom(incomingNode: AtomNode) {
     const displayBox = incomingNode.rect;
+    ctx.strokeStyle = "#000000";
+    ctx.fillStyle = "#000000";
     ctx.beginPath();
+    console.log(ctx.strokeStyle, ctx.fillStyle);
     ctx.rect(
         displayBox.startVertex.x,
         displayBox.startVertex.y,

From 88686ea43357cb0d4b7bca1ac025bd20e2cb26aa Mon Sep 17 00:00:00 2001
From: Dawn <93628226+DawnTheWitch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 22:39:36 -0400
Subject: [PATCH 4/6] Woops console.log included

---
 src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 7a3a4c9f..c701791f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -138,7 +138,6 @@ function redrawAtom(incomingNode: AtomNode) {
     ctx.strokeStyle = "#000000";
     ctx.fillStyle = "#000000";
     ctx.beginPath();
-    console.log(ctx.strokeStyle, ctx.fillStyle);
     ctx.rect(
         displayBox.startVertex.x,
         displayBox.startVertex.y,

From 882e19a2a044603bbf0ea3b51c78b6aea5dc6760 Mon Sep 17 00:00:00 2001
From: Dawn <93628226+DawnTheWitch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 22:48:18 -0400
Subject: [PATCH 5/6] Another 1 line change I'm sorry

Haha tiny brain
---
 src/AtomMode.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/AtomMode.ts b/src/AtomMode.ts
index 3a3d6666..920c9891 100644
--- a/src/AtomMode.ts
+++ b/src/AtomMode.ts
@@ -35,6 +35,7 @@ export function atomHandler(event: Event) {
             atomMetrics.width,
             atomMetrics.fontBoundingBoxDescent + atomMetrics.actualBoundingBoxAscent
         );
+        currentAtom.origin = new Point(thisEvent.clientX, thisEvent.clientY);
 
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         redrawCut(tree.sheet);

From 9db63013f7d929c89630ae4c36f4eb5c92b8c1a8 Mon Sep 17 00:00:00 2001
From: Dawn <93628226+DawnTheWitch@users.noreply.github.com>
Date: Sun, 8 Oct 2023 23:49:04 -0400
Subject: [PATCH 6/6] Misc changes

Changed error color back to red
added comments
Set the minimum radius to 15
I think I might have forgotten what else sorry boss
---
 src/AtomMode.ts | 15 +++++++++++++++
 src/CutMode.ts  | 29 ++++++++++++++++-------------
 src/index.ts    | 13 ++++---------
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/AtomMode.ts b/src/AtomMode.ts
index 920c9891..581404a9 100644
--- a/src/AtomMode.ts
+++ b/src/AtomMode.ts
@@ -15,6 +15,16 @@ let hasMouseDown: Boolean = false;
 let hasAtom: Boolean = false;
 let currentAtom: AtomNode = new AtomNode();
 
+/**
+ * Will compare the event given with all possible events it could be.
+ * keypress checks to see if the key was a letter and if yes sets it to that letter.
+ * mousedown sets the atom down, calculates the bounding box, and checks for what color.
+ * mousemove will alter the origin position and the starting vertex of the bounding box.
+ * mouseup will add the atom to the tree if it is in a valid location.
+ * mosueout will end drawing early.
+ * @param event The event that will be used
+ * @param event the event that will be used
+ */
 export function atomHandler(event: Event) {
     if (event.type === "keypress") {
         const thisEvent: KeyboardEvent = <KeyboardEvent>event;
@@ -77,6 +87,11 @@ export function atomHandler(event: Event) {
     }
 }
 
+/**
+ * Draws the given atomNode with the given color.
+ * @param thisAtom the atomnode to be drawn.
+ * @param color the color of the atom.
+ */
 function drawAtom(thisAtom: AtomNode, color: string) {
     ctx.fillStyle = color;
     ctx.strokeStyle = color;
diff --git a/src/CutMode.ts b/src/CutMode.ts
index c9397f91..657299f7 100644
--- a/src/CutMode.ts
+++ b/src/CutMode.ts
@@ -3,7 +3,6 @@ import {CutNode} from "./AEG/CutNode";
 import {Ellipse} from "./AEG/Ellipse";
 import {redrawCut} from "./index";
 import {tree} from "./index";
-import {Rectangle} from "./AEG/Rectangle";
 
 const canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
 const res: CanvasRenderingContext2D | null = canvas.getContext("2d");
@@ -18,6 +17,14 @@ let hasMouseDown: Boolean = false;
 let currentEllipse: Ellipse = new Ellipse();
 let startingPoint: Point = new Point();
 
+/**
+ * Will compare the event given with all possible events it could be.
+ * mousedown events will allocate the starting point and allow the later events to take place
+ * mousemove will call createEllipse starting and current points, if invalid place will color it.
+ * mouseup will add the cut to the tree if it is in a valid place, and set hasmousedown to false.
+ * mosueout will end drawing early.
+ * @param event The event that will be used
+ */
 export function cutHandler(event: MouseEvent) {
     let newCut: CutNode = new CutNode();
     const currentPoint: Point = new Point();
@@ -34,14 +41,14 @@ export function cutHandler(event: MouseEvent) {
         currentEllipse = createEllipse(startingPoint, currentPoint);
         newCut.ellipse = currentEllipse;
 
-        if (tree.canInsert(newCut) && currentEllipse.radiusX > 30 && currentEllipse.radiusY > 30) {
+        if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) {
             drawEllipse(newCut, "#00FF00");
         } else {
-            drawEllipse(newCut, "#6600ff");
+            drawEllipse(newCut, "#FF0000");
         }
     } else if (event.type === "mouseup" && hasMouseDown) {
         newCut = new CutNode(currentEllipse);
-        if (tree.canInsert(newCut) && currentEllipse.radiusX > 30 && currentEllipse.radiusY > 30) {
+        if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) {
             tree.insert(newCut);
         }
         hasMouseDown = false;
@@ -94,20 +101,16 @@ export function createEllipse(original: Point, current: Point): Ellipse {
     return new Ellipse(center, rx, ry);
 }
 
+/**
+ * Draws the given cut onto the canvas.
+ * @param thisCut The cut containing the ellipse to be drawn
+ * @param color the line color of the ellipse
+ */
 function drawEllipse(thisCut: CutNode, color: string) {
     ctx.strokeStyle = color;
     const ellipse: Ellipse = <Ellipse>thisCut.ellipse;
-    const displayBox: Rectangle = ellipse.boundingBox;
     const center: Point = ellipse.center;
     ctx.beginPath();
-    ctx.rect(
-        displayBox.startVertex.x,
-        displayBox.startVertex.y,
-        displayBox.width,
-        displayBox.height
-    );
-    ctx.stroke();
-    ctx.beginPath();
     ctx.ellipse(center.x, center.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI);
     ctx.stroke();
 }
diff --git a/src/index.ts b/src/index.ts
index c701791f..327d9ea8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,7 +10,6 @@ import {Ellipse} from "./AEG/Ellipse";
 import {AtomNode} from "./AEG/AtomNode";
 import {cutHandler} from "./CutMode";
 import {atomHandler} from "./AtomMode";
-import {Rectangle} from "./AEG/Rectangle";
 
 //Extend the window interface to export functions without TS complaining
 declare global {
@@ -77,6 +76,9 @@ function atomMode() {
     canvas.addEventListener("mouseout", atomHandler);
 }
 
+/**
+ * Removes all listeners added in a certain mode.
+ */
 function removeListeners() {
     if (modeState === "ellipseMode") {
         canvas.removeEventListener("mousedown", cutHandler);
@@ -108,7 +110,6 @@ export function redrawCut(incomingNode: CutNode) {
     }
     if (incomingNode.ellipse instanceof Ellipse) {
         ctx.strokeStyle = "#000000";
-        const displayBox: Rectangle = incomingNode.ellipse.boundingBox;
         ctx.beginPath();
         ctx.ellipse(
             incomingNode.ellipse.center.x,
@@ -119,18 +120,12 @@ export function redrawCut(incomingNode: CutNode) {
             0,
             2 * Math.PI
         );
-        ctx.rect(
-            displayBox.startVertex.x,
-            displayBox.startVertex.y,
-            displayBox.width,
-            displayBox.height
-        );
         ctx.stroke();
     }
 }
 
 /**
- * Redraws the given atom.
+ * Redraws the given atom. Also redraws the the bounding box.
  * @param incomingNode The Atom Node to be redrawn
  */
 function redrawAtom(incomingNode: AtomNode) {