From 8bd49172a7275324ab5c0c01ded09d433632f5ec Mon Sep 17 00:00:00 2001 From: Dawn <93628226+DawnTheWitch@users.noreply.github.com> Date: Mon, 9 Oct 2023 13:50:40 -0400 Subject: [PATCH 1/3] What even is a universal event handler anyways --- src/AtomMode.ts | 115 ++++++++++++++++++++++----------------- src/CutMode.ts | 96 ++++++++++++++++++-------------- src/index.ts | 142 ++++++++++++++++++++++++++++++++++++------------ 3 files changed, 228 insertions(+), 125 deletions(-) diff --git a/src/AtomMode.ts b/src/AtomMode.ts index 581404a9..12423bb3 100644 --- a/src/AtomMode.ts +++ b/src/AtomMode.ts @@ -11,29 +11,30 @@ if (res === null) { const ctx: CanvasRenderingContext2D = res; let atomMetrics: TextMetrics; -let hasMouseDown: Boolean = false; -let hasAtom: Boolean = false; let currentAtom: AtomNode = new AtomNode(); +let hasKeyPress = false; /** - * 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 + * Checks to see if the pressed key is a valid letter, if yes sets it to the atom node. + * @param event The keypress event */ -export function atomHandler(event: Event) { - if (event.type === "keypress") { - const thisEvent: 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) { +export function atomKeyPress(event: KeyboardEvent) { + const thisEvent: KeyboardEvent = event; + const regex = new RegExp(/^[A-Za-z]$/); + if (regex.test(thisEvent.key)) { + currentAtom.identifier = thisEvent.key; + hasKeyPress = true; + } +} + +/** + * If a legal letter has been chosen places it on the canvas. + * Color is based on whether the atom is in a valid place, determines the atom bounding box. + * @param event The mouse down event + * @returns Whether or not the mouse event took place + */ +export function atomMouseDown(event: MouseEvent): boolean { + if (hasKeyPress) { const thisEvent: MouseEvent = event; atomMetrics = ctx.measureText(currentAtom.identifier); const startVertex: Point = new Point( @@ -54,42 +55,58 @@ export function atomHandler(event: Event) { } else { drawAtom(currentAtom, "#6600ff"); } - hasMouseDown = true; - } else if (event.type === "mousemove" && hasMouseDown) { - const thisEvent: MouseEvent = event; - currentAtom.origin = new Point(thisEvent.clientX, thisEvent.clientY); - currentAtom.rect.startVertex = new Point( - thisEvent.clientX, - thisEvent.clientY - atomMetrics.actualBoundingBoxAscent - ); + return true; + } + return false; +} - 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); +/** + * Moves the current atom to the current mouse position, redraws the canvas and redraws the atom. + * @param event The mouse move event + */ +export function atomMouseMove(event: MouseEvent) { + const thisEvent: 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"); } } +/** + * If the atom is in a valid place, adds it to the tree. Redraws the canvas and resets currentAtom. + * @param event The mouse up event + */ +export function atomMouseUp(event: MouseEvent) { + if (tree.canInsert(currentAtom)) { + tree.insert(currentAtom); + } + currentAtom = new AtomNode(currentAtom.identifier); + ctx.clearRect(0, 0, canvas.width, canvas.height); + redrawCut(tree.sheet); + console.log(tree.toString()); +} + +/** + * If the mouse leaves the canvas resets the current atom. + */ +export function atomMouseOut() { + currentAtom = new AtomNode(currentAtom.identifier); + ctx.clearRect(0, 0, canvas.width, canvas.height); + redrawCut(tree.sheet); +} + /** * Draws the given atomNode with the given color. - * @param thisAtom the atomnode to be drawn. + * @param thisAtom the atomMode to be drawn. * @param color the color of the atom. */ function drawAtom(thisAtom: AtomNode, color: string) { diff --git a/src/CutMode.ts b/src/CutMode.ts index 657299f7..aa3e4ee2 100644 --- a/src/CutMode.ts +++ b/src/CutMode.ts @@ -13,59 +13,73 @@ if (res === null) { } const ctx: CanvasRenderingContext2D = res; -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 + * Sets the starting point for the ellipse to where the user clicks. + * @param event The mouse down event */ -export function cutHandler(event: MouseEvent) { - let newCut: CutNode = new CutNode(); +export function cutMouseDown(event: MouseEvent) { + startingPoint.x = event.clientX; + startingPoint.y = event.clientY; +} + +/** + * Takes the current point of the ellipse and draws the ellipse between those two points. + * Checks to see if the current point is valid to determine color. + * Redraws the canvas then draws the ellipse. + * @param event The mouse move event + */ +export function cutMouseMove(event: MouseEvent) { + const newCut: CutNode = new CutNode(); const currentPoint: Point = new Point(); + 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 (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 > 15 && currentEllipse.radiusY > 15) { + drawEllipse(newCut, "#00FF00"); + } else { + drawEllipse(newCut, "#FF0000"); + } +} - if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) { - drawEllipse(newCut, "#00FF00"); - } else { - drawEllipse(newCut, "#FF0000"); - } - } else if (event.type === "mouseup" && hasMouseDown) { - newCut = new CutNode(currentEllipse); - if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) { - 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); +/** + * Takes the current point of the mouse up event and if it is in a legal position adds it to the tree + * Redraws the canvas, if the cut was legal it will be there on the new redraw. + * @param event The mouse up event + */ +export function cutMouseUp(event: MouseEvent) { + let newCut: CutNode = new CutNode(); + const currentPoint: Point = new Point(); + currentPoint.x = event.clientX; + currentPoint.y = event.clientY; + currentEllipse = createEllipse(startingPoint, currentPoint); + newCut = new CutNode(currentEllipse); + if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) { + tree.insert(newCut); } + startingPoint = new Point(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + redrawCut(tree.sheet); + console.log(tree.toString()); +} + +/** + * Resets the canvas if the mouse ends up out of the canvas. + */ +export function cutMouseOut() { + 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. + * A function to calculate 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 */ diff --git a/src/index.ts b/src/index.ts index 327d9ea8..13eb149d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,8 +8,8 @@ import {AEGTree} from "./AEG/AEGTree"; import {CutNode} from "./AEG/CutNode"; import {Ellipse} from "./AEG/Ellipse"; import {AtomNode} from "./AEG/AtomNode"; -import {cutHandler} from "./CutMode"; -import {atomHandler} from "./AtomMode"; +import {cutMouseDown, cutMouseMove, cutMouseOut, cutMouseUp} from "./CutMode"; +import {atomKeyPress, atomMouseDown, atomMouseMove, atomMouseUp, atomMouseOut} from "./AtomMode"; //Extend the window interface to export functions without TS complaining declare global { @@ -32,7 +32,8 @@ ctx.font = "35pt arial"; //Global State const cutDisplay = document.getElementById("graphString"); -let modeState: string; +let modeState = ""; +let hasMouseDown = false; export const tree: AEGTree = new AEGTree(); //Window Exports @@ -46,51 +47,122 @@ declare global { } /** - * A function to begin a mode to draw cuts. - * If atomMode was previously active, remove the listener. + * If there is no current mode creates the listeners. + * Sets the current mode to cut mode. */ function ellipseMode() { - if (modeState !== "ellipseMode") { - removeListeners(); - modeState = "ellipseMode"; + if (modeState === "") { + window.addEventListener("keypress", keyPressHandler); + canvas.addEventListener("mousedown", mouseDownHandler); + canvas.addEventListener("mousemove", mouseMoveHandler); + canvas.addEventListener("mouseup", mouseUpHandler); + canvas.addEventListener("mouseout", mouseOutHandler); } - canvas.addEventListener("mousedown", cutHandler); - canvas.addEventListener("mousemove", cutHandler); - canvas.addEventListener("mouseup", cutHandler); - canvas.addEventListener("mouseout", cutHandler); + modeState = "cutMode"; } /** - * A function to begin atom creation. - * If ellipseMode was previously active, remove the listener. + * If there is no current mode creates the listeners. + * Sets the current mode to atom mode. */ function atomMode() { - if (modeState !== "atomMode") { - removeListeners(); - modeState = "atomMode"; + if (modeState === "") { + window.addEventListener("keypress", keyPressHandler); + canvas.addEventListener("mousedown", mouseDownHandler); + canvas.addEventListener("mousemove", mouseMoveHandler); + canvas.addEventListener("mouseup", mouseUpHandler); + canvas.addEventListener("mouseout", mouseOutHandler); } - window.addEventListener("keypress", atomHandler); - canvas.addEventListener("mousedown", atomHandler); - canvas.addEventListener("mousemove", atomHandler); - canvas.addEventListener("mouseup", atomHandler); - canvas.addEventListener("mouseout", atomHandler); + modeState = "atomMode"; } /** - * Removes all listeners added in a certain mode. + * Calls the respective keypress function depending on current mode. + * @param event The event of a keypress */ -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); +function keyPressHandler(event: KeyboardEvent) { + switch (modeState) { + case "atomMode": + atomKeyPress(event); + break; + } +} + +/** + * Calls the respective mouse down function depending on current mode. + * @param event The mouse down event + */ +function mouseDownHandler(event: MouseEvent) { + switch (modeState) { + case "cutMode": + cutMouseDown(event); + hasMouseDown = true; + break; + case "atomMode": + hasMouseDown = atomMouseDown(event); + break; + } +} + +/** + * If mouse down has been used calls the respective mousedown function based on mode. + * @param event the mouse move event + */ +function mouseMoveHandler(event: MouseEvent) { + switch (modeState) { + case "cutMode": + if (hasMouseDown) { + cutMouseMove(event); + } + break; + case "atomMode": + if (hasMouseDown) { + atomMouseMove(event); + } + break; + } +} + +/** + * If mouse down has been used calls the respective mouse up function based on mode. + * Resets mouse down after use. + * @param event The mouse up event + */ +function mouseUpHandler(event: MouseEvent) { + switch (modeState) { + case "cutMode": + if (hasMouseDown) { + cutMouseUp(event); + } + hasMouseDown = false; + break; + case "atomMode": + if (hasMouseDown) { + atomMouseUp(event); + } + hasMouseDown = false; + break; + } +} + +/** + * If mouse down has been used calls the respective mouse out function based on mode. + * Resets mouse down after use. + */ +function mouseOutHandler() { + switch (modeState) { + case "cutMode": + if (hasMouseDown) { + cutMouseOut(); + } + hasMouseDown = false; + break; + case "atomMode": + if (hasMouseDown) { + atomMouseOut(); + } + hasMouseDown = false; + break; } } From 0a30e8543e1664a3096427c856626ff31d9b5631 Mon Sep 17 00:00:00 2001 From: Dawn <93628226+DawnTheWitch@users.noreply.github.com> Date: Mon, 9 Oct 2023 15:23:10 -0400 Subject: [PATCH 2/3] Unfinished update Family sort of just arrived at my house 30 minutes ago and I've had to step away from doing this. Uploading this now and will get back to this when I get the chance. Converting this to a draft --- src/index.ts | 30 ++++++++---------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/src/index.ts b/src/index.ts index 13eb149d..d8a514c9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -32,6 +32,11 @@ ctx.font = "35pt arial"; //Global State const cutDisplay = document.getElementById("graphString"); +window.addEventListener("keypress", keyPressHandler); +canvas.addEventListener("mousedown", mouseDownHandler); +canvas.addEventListener("mousemove", mouseMoveHandler); +canvas.addEventListener("mouseup", mouseUpHandler); +canvas.addEventListener("mouseout", mouseOutHandler); let modeState = ""; let hasMouseDown = false; export const tree: AEGTree = new AEGTree(); @@ -51,13 +56,6 @@ declare global { * Sets the current mode to cut mode. */ function ellipseMode() { - if (modeState === "") { - window.addEventListener("keypress", keyPressHandler); - canvas.addEventListener("mousedown", mouseDownHandler); - canvas.addEventListener("mousemove", mouseMoveHandler); - canvas.addEventListener("mouseup", mouseUpHandler); - canvas.addEventListener("mouseout", mouseOutHandler); - } modeState = "cutMode"; } @@ -66,13 +64,6 @@ function ellipseMode() { * Sets the current mode to atom mode. */ function atomMode() { - if (modeState === "") { - window.addEventListener("keypress", keyPressHandler); - canvas.addEventListener("mousedown", mouseDownHandler); - canvas.addEventListener("mousemove", mouseMoveHandler); - canvas.addEventListener("mouseup", mouseUpHandler); - canvas.addEventListener("mouseout", mouseOutHandler); - } modeState = "atomMode"; } @@ -131,18 +122,13 @@ function mouseMoveHandler(event: MouseEvent) { function mouseUpHandler(event: MouseEvent) { switch (modeState) { case "cutMode": - if (hasMouseDown) { - cutMouseUp(event); - } - hasMouseDown = false; + cutMouseUp(event); break; case "atomMode": - if (hasMouseDown) { - atomMouseUp(event); - } - hasMouseDown = false; + atomMouseUp(event); break; } + hasMouseDown = false; } /** From 72b31e9cb73342b45adf006d6021be8c6388d2ba Mon Sep 17 00:00:00 2001 From: DawnTheWitch Date: Wed, 11 Oct 2023 22:34:35 -0400 Subject: [PATCH 3/3] Testing commiting on VS code --- src/AtomMode.ts | 116 ++++++++++++++++-------------------------------- src/CutMode.ts | 36 ++++++++++----- src/index.ts | 34 ++++++++------ 3 files changed, 84 insertions(+), 102 deletions(-) diff --git a/src/AtomMode.ts b/src/AtomMode.ts index d3fcbf91..7e184ae3 100644 --- a/src/AtomMode.ts +++ b/src/AtomMode.ts @@ -9,30 +9,22 @@ if (res === null) { throw Error("2d rendering context not supported"); } const ctx: CanvasRenderingContext2D = res; +const atomDisplay = document.getElementById("atomDisplay"); let atomMetrics: TextMetrics; +let wasOut: boolean; -let currentAtom: AtomNode = new AtomNode(); -let hasKeyPress = false; +let currentAtom: AtomNode = new AtomNode("A"); //Default character A +atomDisplay.innerHTML = currentAtom.Identifier; /** * Checks to see if the pressed key is a valid letter, if yes sets it to the atom node. * @param event The keypress event */ -export function atomHandler(event: Event) { - if (event.type === "keypress") { - const thisEvent: 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) { export function atomKeyPress(event: KeyboardEvent) { - const thisEvent: KeyboardEvent = event; const regex = new RegExp(/^[A-Za-z]$/); - if (regex.test(thisEvent.key)) { - currentAtom.identifier = thisEvent.key; - hasKeyPress = true; + if (regex.test(event.key)) { + currentAtom.Identifier = event.key; + atomDisplay.innerHTML = currentAtom.Identifier; } } @@ -42,39 +34,27 @@ export function atomKeyPress(event: KeyboardEvent) { * @param event The mouse down event * @returns Whether or not the mouse event took place */ -export function atomMouseDown(event: MouseEvent): boolean { - if (hasKeyPress) { - const thisEvent: MouseEvent = event; - atomMetrics = ctx.measureText(currentAtom.Identifier); - const startVertex: Point = new Point( - thisEvent.clientX, - thisEvent.clientY - atomMetrics.actualBoundingBoxAscent - ); - currentAtom.Rectangle = new Rectangle( - startVertex, - atomMetrics.width, - atomMetrics.fontBoundingBoxDescent + atomMetrics.actualBoundingBoxAscent - ); - currentAtom.Origin = new Point(thisEvent.clientX, thisEvent.clientY); +export function atomMouseDown(event: MouseEvent) { + atomMetrics = ctx.measureText(currentAtom.Identifier); + wasOut = false; + const startVertex: Point = new Point( + event.clientX, + event.clientY - atomMetrics.actualBoundingBoxAscent + ); + currentAtom.Rectangle = new Rectangle( + startVertex, + atomMetrics.width, + atomMetrics.fontBoundingBoxDescent + atomMetrics.actualBoundingBoxAscent + ); + currentAtom.Origin = new Point(event.clientX, event.clientY); - 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 = event; - currentAtom.Origin = new Point(thisEvent.clientX, thisEvent.clientY); - currentAtom.Rectangle.startVertex = new Point( - thisEvent.clientX, - thisEvent.clientY - atomMetrics.actualBoundingBoxAscent - ); - return true; + ctx.clearRect(0, 0, canvas.width, canvas.height); + redrawCut(tree.sheet); + if (tree.canInsert(currentAtom)) { + drawAtom(currentAtom, "#00FF00"); + } else { + drawAtom(currentAtom, "#FF0000"); } - return false; } /** @@ -82,41 +62,20 @@ export function atomMouseDown(event: MouseEvent): boolean { * @param event The mouse move event */ export function atomMouseMove(event: MouseEvent) { - const thisEvent: MouseEvent = event; - currentAtom.origin = new Point(thisEvent.clientX, thisEvent.clientY); - currentAtom.rect.startVertex = new Point( - thisEvent.clientX, - thisEvent.clientY - atomMetrics.actualBoundingBoxAscent + currentAtom.Origin = new Point(event.clientX, event.clientY); + currentAtom.Rectangle.startVertex = new Point( + event.clientX, + event.clientY - atomMetrics.actualBoundingBoxAscent ); - ctx.clearRect(0, 0, canvas.width, canvas.height); - redrawCut(tree.sheet); + ctx.clearRect(0, 0, canvas.width, canvas.height); + redrawCut(tree.sheet); + if (!wasOut) { 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); - } - ctx.clearRect(0, 0, canvas.width, canvas.height); - redrawCut(tree.sheet); - if (tree.canInsert(currentAtom)) { - drawAtom(currentAtom, "#00FF00"); - } else { - drawAtom(currentAtom, "#FF0000"); } } @@ -124,11 +83,11 @@ export function atomMouseMove(event: MouseEvent) { * If the atom is in a valid place, adds it to the tree. Redraws the canvas and resets currentAtom. * @param event The mouse up event */ -export function atomMouseUp(event: MouseEvent) { - if (tree.canInsert(currentAtom)) { +export function atomMouseUp() { + if (tree.canInsert(currentAtom) && !wasOut) { tree.insert(currentAtom); } - currentAtom = new AtomNode(currentAtom.identifier); + currentAtom = new AtomNode(currentAtom.Identifier); ctx.clearRect(0, 0, canvas.width, canvas.height); redrawCut(tree.sheet); console.log(tree.toString()); @@ -138,7 +97,8 @@ export function atomMouseUp(event: MouseEvent) { * If the mouse leaves the canvas resets the current atom. */ export function atomMouseOut() { - currentAtom = new AtomNode(currentAtom.identifier); + currentAtom = new AtomNode(currentAtom.Identifier); + wasOut = true; ctx.clearRect(0, 0, canvas.width, canvas.height); redrawCut(tree.sheet); } diff --git a/src/CutMode.ts b/src/CutMode.ts index f0298989..04348803 100644 --- a/src/CutMode.ts +++ b/src/CutMode.ts @@ -15,6 +15,7 @@ const ctx: CanvasRenderingContext2D = res; let currentEllipse: Ellipse = new Ellipse(); let startingPoint: Point = new Point(); +let wasOut: boolean; /** * Sets the starting point for the ellipse to where the user clicks. @@ -23,6 +24,7 @@ let startingPoint: Point = new Point(); export function cutMouseDown(event: MouseEvent) { startingPoint.x = event.clientX; startingPoint.y = event.clientY; + wasOut = false; } /** @@ -31,22 +33,22 @@ export function cutMouseDown(event: MouseEvent) { * Redraws the canvas then draws the ellipse. * @param event The mouse move event */ -export function cutHandler(event: MouseEvent) { - let newCut: CutNode = new CutNode(new Ellipse()); export function cutMouseMove(event: MouseEvent) { - const newCut: CutNode = new CutNode(); + const newCut: CutNode = new CutNode(new Ellipse()); const currentPoint: Point = new Point(); 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; + newCut.Ellipse = currentEllipse; - if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) { - drawEllipse(newCut, "#00FF00"); - } else { - drawEllipse(newCut, "#FF0000"); + if (!wasOut) { + if (tree.canInsert(newCut) && ellipseLargeEnough(currentEllipse)) { + drawEllipse(newCut, "#00FF00"); + } else { + drawEllipse(newCut, "#FF0000"); + } } } @@ -56,25 +58,25 @@ export function cutMouseMove(event: MouseEvent) { * @param event The mouse up event */ export function cutMouseUp(event: MouseEvent) { - let newCut: CutNode = new CutNode(); + let newCut: CutNode = new CutNode(currentEllipse); const currentPoint: Point = new Point(); currentPoint.x = event.clientX; currentPoint.y = event.clientY; currentEllipse = createEllipse(startingPoint, currentPoint); newCut = new CutNode(currentEllipse); - if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) { + if (tree.canInsert(newCut) && !wasOut && ellipseLargeEnough(currentEllipse)) { tree.insert(newCut); } startingPoint = new Point(); ctx.clearRect(0, 0, canvas.width, canvas.height); redrawCut(tree.sheet); - console.log(tree.toString()); } /** * Resets the canvas if the mouse ends up out of the canvas. */ export function cutMouseOut() { + wasOut = true; startingPoint = new Point(); ctx.clearRect(0, 0, canvas.width, canvas.height); redrawCut(tree.sheet); @@ -130,3 +132,15 @@ function drawEllipse(thisCut: CutNode, color: string) { ctx.ellipse(center.x, center.y, ellipse.radiusX, ellipse.radiusY, 0, 0, 2 * Math.PI); ctx.stroke(); } + +/** + * Checks to see if the given ellipse is large enough to be considered legal. + * @param ellipse The ellipse to be checked + * @returns Whether the given ellipse is large enough to be legal + */ +function ellipseLargeEnough(ellipse: Ellipse) { + if (ellipse.radiusX > 15 && ellipse.radiusY > 15) { + return true; + } + return false; +} diff --git a/src/index.ts b/src/index.ts index ce52f21b..66a363f8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -32,13 +32,17 @@ ctx.font = "35pt arial"; //Global State const cutDisplay = document.getElementById("graphString"); +const cutTools = document.getElementById("cutTools"); +const atomTools = document.getElementById("atomTools"); window.addEventListener("keypress", keyPressHandler); canvas.addEventListener("mousedown", mouseDownHandler); canvas.addEventListener("mousemove", mouseMoveHandler); canvas.addEventListener("mouseup", mouseUpHandler); canvas.addEventListener("mouseout", mouseOutHandler); +canvas.addEventListener("mouseenter", mouseEnterHandler); let modeState = ""; let hasMouseDown = false; +let hasMouseIn = true; export const tree: AEGTree = new AEGTree(); //Window Exports @@ -57,6 +61,9 @@ declare global { */ function ellipseMode() { modeState = "cutMode"; + cutTools.style.display = "block"; + //Block all other mode tools + atomTools.style.display = "none"; } /** @@ -65,6 +72,9 @@ function ellipseMode() { */ function atomMode() { modeState = "atomMode"; + atomTools.style.display = "block"; + //Block all other mode tools + cutTools.style.display = "none"; } /** @@ -87,12 +97,12 @@ function mouseDownHandler(event: MouseEvent) { switch (modeState) { case "cutMode": cutMouseDown(event); - hasMouseDown = true; break; case "atomMode": - hasMouseDown = atomMouseDown(event); + atomMouseDown(event); break; } + hasMouseDown = true; } /** @@ -102,12 +112,12 @@ function mouseDownHandler(event: MouseEvent) { function mouseMoveHandler(event: MouseEvent) { switch (modeState) { case "cutMode": - if (hasMouseDown) { + if (hasMouseDown && hasMouseIn) { cutMouseMove(event); } break; case "atomMode": - if (hasMouseDown) { + if (hasMouseDown && hasMouseIn) { atomMouseMove(event); } break; @@ -125,7 +135,7 @@ function mouseUpHandler(event: MouseEvent) { cutMouseUp(event); break; case "atomMode": - atomMouseUp(event); + atomMouseUp(); break; } hasMouseDown = false; @@ -138,20 +148,18 @@ function mouseUpHandler(event: MouseEvent) { function mouseOutHandler() { switch (modeState) { case "cutMode": - if (hasMouseDown) { - cutMouseOut(); - } - hasMouseDown = false; + cutMouseOut(); break; case "atomMode": - if (hasMouseDown) { - atomMouseOut(); - } - hasMouseDown = false; + atomMouseOut(); break; } } +function mouseEnterHandler() { + hasMouseIn = true; +} + /** * Iterates through the entire tree, if there are no children the for loop will not begin. * Sends any Atom children to redrawAtom.