From 0ed8cf7e6bd823c1e44ea4babe19542480c04905 Mon Sep 17 00:00:00 2001
From: Dawn <93628226+DawnTheWitch@users.noreply.github.com>
Date: Fri, 29 Sep 2023 23:12:45 -0400
Subject: [PATCH] Fix for issue #21 and 90% sure Issue #62

One minor additional issue, if you start making an ellipse run it into the wall to kill it the switch to atom mode to place an atom the ellipse will pop up a moment before disappearing again.
The ghost of the ellipse will likely be fixed with issue issue #64, Universal Event Listeners
Which is coming... I promise
---
 src/AtomCreation.ts    | 27 +++++++++++++++++++++++----
 src/EllipseCreation.ts | 29 +++++++++++++++++++++++------
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/AtomCreation.ts b/src/AtomCreation.ts
index 13f071bc..24a1fc23 100644
--- a/src/AtomCreation.ts
+++ b/src/AtomCreation.ts
@@ -1,3 +1,8 @@
+/**
+ * Atom Event Handler
+ * @author Dawn Moore
+ */
+
 import {Point} from "./AEG/Point";
 import {AtomNode} from "./AEG/AtomNode";
 import {redrawCut, tree} from "./index";
@@ -42,6 +47,7 @@ function placeAtom(event: MouseEvent) {
     ctx.stroke();
     canvas.addEventListener("mousemove", moveAtom);
     canvas.addEventListener("mouseup", atomUp);
+    canvas.addEventListener("mouseout", mouseOut);
 }
 
 /**
@@ -49,12 +55,12 @@ function placeAtom(event: MouseEvent) {
  * @param event The event of the mouse moving
  */
 function moveAtom(event: MouseEvent) {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    redrawCut(tree.sheet);
     currentPoint = {
         x: event.clientX,
         y: event.clientY,
     };
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    redrawCut(tree.sheet);
     ctx.fillText(atom, currentPoint.x, currentPoint.y);
     ctx.stroke();
 }
@@ -63,10 +69,22 @@ function moveAtom(event: MouseEvent) {
  * When the mouse is lifted up, removes the movement listener and adds it to the tree itself.
  */
 function atomUp() {
-    canvas.removeEventListener("mousemove", moveAtom);
     const newAtom: AtomNode = new AtomNode(atom, currentPoint);
-    tree.insert(newAtom);
+    tree.insertAEG(newAtom, currentPoint);
+    canvas.removeEventListener("mousemove", moveAtom);
     canvas.removeEventListener("mouseup", atomUp);
+    canvas.removeEventListener("mouseOut", mouseOut);
+}
+
+/**
+ * A temporary function to cancel the current atom if the mouse exits the canvas area.
+ */
+function mouseOut() {
+    canvas.removeEventListener("mousemove", moveAtom);
+    canvas.removeEventListener("mouseup", atomUp);
+    canvas.removeEventListener("mouseOut", mouseOut);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    redrawCut(tree.sheet);
 }
 
 /**
@@ -74,4 +92,5 @@ function atomUp() {
  */
 export function removeAtomListener() {
     canvas.removeEventListener("mousedown", placeAtom);
+    window.removeEventListener("keydown", atomChoose);
 }
diff --git a/src/EllipseCreation.ts b/src/EllipseCreation.ts
index 4c6b16d5..7b93fda0 100644
--- a/src/EllipseCreation.ts
+++ b/src/EllipseCreation.ts
@@ -1,3 +1,8 @@
+/**
+ * Ellipse Event Handler
+ * @author Dawn Moore
+ */
+
 import {Point} from "./AEG/Point";
 import {CutNode} from "./AEG/CutNode";
 import {Ellipse} from "./AEG/Ellipse";
@@ -80,6 +85,7 @@ function mouseDown(event: MouseEvent) {
     startingPoint = {x: event.clientX, y: event.clientY};
     canvas.addEventListener("mousemove", mouseMoving);
     canvas.addEventListener("mouseup", mouseUp);
+    canvas.addEventListener("mouseout", mouseOut);
 }
 
 /**
@@ -90,12 +96,11 @@ function mouseDown(event: MouseEvent) {
  * @param event The event of a mouse moving
  */
 function mouseMoving(event: MouseEvent) {
-    //As strange as this is, this is the only way to clear the canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
     const currentPoint: Point = {
         x: event.clientX,
         y: event.clientY,
     };
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
     redrawCut(tree.sheet);
     currentEllipse = createEllipse(startingPoint, currentPoint);
 }
@@ -104,12 +109,24 @@ function mouseMoving(event: MouseEvent) {
  * When the mouse is lifted up, removes the movement listener and adds it to the tree itself.
  */
 function mouseUp() {
-    canvas.removeEventListener("mousemove", mouseMoving);
-    canvas.removeEventListener("mouseup", mouseUp);
     const newCut: CutNode = new CutNode(currentEllipse);
-    if (tree.canInsert(newCut)) {
-        tree.insert(newCut);
+    if (tree.canInsertAEG(newCut, currentEllipse.center)) {
+        tree.insertAEG(newCut, currentEllipse.center);
     }
+    canvas.removeEventListener("mousemove", mouseMoving);
+    canvas.removeEventListener("mouseup", mouseUp);
+    canvas.removeEventListener("mouseout", mouseOut);
+}
+
+/**
+ * A temporary function to cancel the current ellipse if the mouse exits the canvas area.
+ */
+function mouseOut() {
+    canvas.removeEventListener("mousemove", mouseMoving);
+    canvas.removeEventListener("mouseup", mouseUp);
+    canvas.removeEventListener("mouseout", mouseOut);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    redrawCut(tree.sheet);
 }
 
 /**