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

@@ -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,19 +47,20 @@ function placeAtom(event: MouseEvent) {
     ctx.stroke();
     canvas.addEventListener("mousemove", moveAtom);
     canvas.addEventListener("mouseup", atomUp);
+    canvas.addEventListener("mouseout", mouseOut);
 }
 
 /**
  * Changes the location of the atom and redraws the screen with each movement.
  * @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,15 +69,28 @@ 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);
 }
 
 /**
  * Removes the listeners when the user is done placing atoms.
  */
 export function removeAtomListener() {
     canvas.removeEventListener("mousedown", placeAtom);
+    window.removeEventListener("keydown", atomChoose);
 }

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);
 }
 
 /**