Skip to content

Commit

Permalink
Merge branch 'master' into 117-ellipse-overlap-broken-again
Browse files Browse the repository at this point in the history
  • Loading branch information
@AnushaTiwari5
AnushaTiwari5 authored Oct 12, 2023
2 parents bb5861a + 75f6fa7 commit 96d06fd
Show file tree
Hide file tree
Showing 3 changed files with 245 additions and 142 deletions.
143 changes: 78 additions & 65 deletions src/AtomMode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,88 +11,101 @@ if (res === null) {
const ctx: CanvasRenderingContext2D = res;
const atomDisplay = <HTMLParagraphElement>document.getElementById("atomDisplay");
let atomMetrics: TextMetrics;
let wasOut: boolean;

let hasMouseDown: Boolean = false;
let hasAtom: Boolean = false;
let currentAtom: AtomNode = new AtomNode("a"); //MAKING a THE DEFAULT IDENTIFIER FOR ATOMS
let currentAtom: AtomNode = new AtomNode("A"); //Default character A
atomDisplay.innerHTML = currentAtom.identifier;

/**
* 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 = <KeyboardEvent>event;
const regex = new RegExp(/^[A-Za-z]$/);
if (regex.test(thisEvent.key)) {
currentAtom.identifier = thisEvent.key;
atomDisplay.innerHTML = currentAtom.identifier;
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.rectangle = new Rectangle(
startVertex,
atomMetrics.width,
atomMetrics.fontBoundingBoxDescent + atomMetrics.actualBoundingBoxAscent
);
currentAtom.origin = new Point(thisEvent.clientX, thisEvent.clientY);
export function atomKeyPress(event: KeyboardEvent) {
const regex = new RegExp(/^[A-Za-z]$/);
if (regex.test(event.key)) {
currentAtom.identifier = event.key;
atomDisplay.innerHTML = currentAtom.identifier;
}
}

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.rectangle.startVertex = new Point(
thisEvent.clientX,
thisEvent.clientY - atomMetrics.actualBoundingBoxAscent
);
/**
* 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) {
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);
ctx.clearRect(0, 0, canvas.width, canvas.height);
redrawCut(tree.sheet);
if (tree.canInsert(currentAtom)) {
drawAtom(currentAtom, "#00FF00");
} else {
drawAtom(currentAtom, "#FF0000");
}
}

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

/**
* 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() {
if (tree.canInsert(currentAtom) && !wasOut) {
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);
wasOut = true;
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) {
Expand Down
106 changes: 68 additions & 38 deletions src/CutMode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,59 +13,77 @@ if (res === null) {
}
const ctx: CanvasRenderingContext2D = res;

let hasMouseDown: Boolean = false;
let currentEllipse: Ellipse = new Ellipse();
let startingPoint: Point = new Point();
let wasOut: boolean;

/**
* 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(new Ellipse());
const currentPoint: Point = new Point();
export function cutMouseDown(event: MouseEvent) {
startingPoint.x = event.clientX;
startingPoint.y = event.clientY;
wasOut = false;
}

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;
/**
* 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(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;

if (tree.canInsert(newCut) && currentEllipse.radiusX > 15 && currentEllipse.radiusY > 15) {
if (!wasOut) {
if (tree.canInsert(newCut) && ellipseLargeEnough(currentEllipse)) {
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);
}
}

/**
* A function to draw an ellipse between two points designated by the user.
* 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(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) && !wasOut && ellipseLargeEnough(currentEllipse)) {
tree.insert(newCut);
}
startingPoint = new Point();
ctx.clearRect(0, 0, canvas.width, canvas.height);
redrawCut(tree.sheet);
}

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

/**
* 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
*/
Expand Down Expand Up @@ -114,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;
}
Loading

0 comments on commit 96d06fd

Please sign in to comment.