From 53693d4509bc8f54f4a8bc8d9652d9fd49f9b8bd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sun, 8 Oct 2023 21:43:23 +0000 Subject: [PATCH 01/22] Bump typedoc from 0.25.1 to 0.25.2 Bumps [typedoc](https://github.com/TypeStrong/TypeDoc) from 0.25.1 to 0.25.2. - [Release notes](https://github.com/TypeStrong/TypeDoc/releases) - [Changelog](https://github.com/TypeStrong/typedoc/blob/master/CHANGELOG.md) - [Commits](https://github.com/TypeStrong/TypeDoc/compare/v0.25.1...v0.25.2) --- updated-dependencies: - dependency-name: typedoc dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 38604444..73d71a8d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "devDependencies": { "@types/node": "20.8.0", "gts": "^5.0.1", - "typedoc": "^0.25.1", + "typedoc": "^0.25.2", "typescript": "~5.2.2", "vite": "^4.4.9" } @@ -3861,9 +3861,9 @@ } }, "node_modules/typedoc": { - "version": "0.25.1", - "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.1.tgz", - "integrity": "sha512-c2ye3YUtGIadxN2O6YwPEXgrZcvhlZ6HlhWZ8jQRNzwLPn2ylhdGqdR8HbyDRyALP8J6lmSANILCkkIdNPFxqA==", + "version": "0.25.2", + "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.2.tgz", + "integrity": "sha512-286F7BeATBiWe/qC4PCOCKlSTwfnsLbC/4cZ68oGBbvAqb9vV33quEOXx7q176OXotD+JdEerdQ1OZGJ818lnA==", "dev": true, "dependencies": { "lunr": "^2.3.9", diff --git a/package.json b/package.json index 186e060d..755c4eb5 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "devDependencies": { "@types/node": "20.8.0", "gts": "^5.0.1", - "typedoc": "^0.25.1", + "typedoc": "^0.25.2", "typescript": "~5.2.2", "vite": "^4.4.9" }, 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 02/22] 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 = 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 = 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 = 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 = 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 = document.getElementById("canvas"); +const res: CanvasRenderingContext2D | null = canvas.getContext("2d"); +const showRectElm: HTMLInputElement = document.getElementById("showRect"); +const modeElm: 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 = 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 = 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 28fb8be431f6b25fab000d522a74b7c96200a0c2 Mon Sep 17 00:00:00 2001 From: AnushaTiwari5 Date: Sun, 8 Oct 2023 22:00:02 -0400 Subject: [PATCH 03/22] checking ellipse overlaps by directly checking points on curve --- src/AEG/AEGTree.ts | 3 -- src/AEG/CutNode.ts | 3 -- src/AEG/Ellipse.ts | 110 ++++++++++++++------------------------------- 3 files changed, 34 insertions(+), 82 deletions(-) diff --git a/src/AEG/AEGTree.ts b/src/AEG/AEGTree.ts index e4c8a431..287ed7de 100644 --- a/src/AEG/AEGTree.ts +++ b/src/AEG/AEGTree.ts @@ -61,7 +61,6 @@ export class AEGTree { * @returns True, if the node can be inserted. Else, false */ public canInsert(incomingNode: AtomNode | CutNode): boolean { - console.log("checking can insert"); const currentCut: CutNode = this.sheet.getCurrentCut(incomingNode); for (let i = 0; i < currentCut.children.length; i++) { if (this.overlaps(incomingNode, currentCut.children[i])) { @@ -82,8 +81,6 @@ export class AEGTree { } const currentCut: CutNode = this.sheet.getCurrentCut(incomingNode); - //const originalChildren: (AtomNode | CutNode)[] = currentCut.children; - //==============CHANGEDDDD========= const originalChildren: (AtomNode | CutNode)[] = [...currentCut.children]; currentCut.children.push(incomingNode); diff --git a/src/AEG/CutNode.ts b/src/AEG/CutNode.ts index fd6cd83c..686632dc 100644 --- a/src/AEG/CutNode.ts +++ b/src/AEG/CutNode.ts @@ -38,8 +38,6 @@ export class CutNode { for (let i = 0; i < this.children.length; i++) { const child: CutNode | AtomNode = this.children[i]; if (child instanceof CutNode && this.children[i].containsNode(newNode)) { - //======DEBUGGG======= - console.log("current cut: " + this.children[i]); //newNode can be placed at least one layer deeper return child.getCurrentCut(newNode); } @@ -77,7 +75,6 @@ export class CutNode { if (otherNode instanceof AtomNode) { return this.ellipse.containsShape(otherNode.rect); } else if (otherNode instanceof CutNode) { - //ELLIPSE TO BE IMPLEMENTED ACCURATELY return this.ellipse.containsShape(otherNode.ellipse as Ellipse); } else { throw Error("containsNode expected AtomNode or CutNode"); diff --git a/src/AEG/Ellipse.ts b/src/AEG/Ellipse.ts index bb872bbd..d3fdd4a4 100644 --- a/src/AEG/Ellipse.ts +++ b/src/AEG/Ellipse.ts @@ -110,12 +110,17 @@ export class Ellipse { } else { //check if the rectangular bounding boxes of the ellipse overlap if (this.boundingBox.overlaps((otherShape as Ellipse).boundingBox)) { - console.log("ellipse boxes overlap"); - return true; + //return true; //if there is an overlap, check if points along the ellipse curve overlap //this can be done by checking if points along the curve of the other ellipse //are within this ellipse - //return this.checkQuadrantOverlap(otherShape); + + const otherPoints: Point[] = otherShape.getEllipsePoints(); + for (let i = 0; i < otherPoints.length; i++) { + if (this.containsPoint(otherPoints[i])) { + return true; + } + } } return false; } @@ -128,12 +133,19 @@ export class Ellipse { */ public containsShape(otherShape: Rectangle | Ellipse): boolean { if (otherShape instanceof Rectangle) { - for (let i = 0; i < 4; i++) { + /* for (let i = 0; i < 4; i++) { if (!this.containsPoint(otherShape.getCorners()[i])) { return false; } } - return true; + return true; */ + + //If the 2 opposite corners of the rectangle are within this ellipse, + //The rectangle is contained within this ellipse + return ( + this.containsPoint(otherShape.getCorners()[0]) && + this.containsPoint(otherShape.getCorners()[2]) + ); } else if (otherShape instanceof Ellipse) { //If all the widest coordinates of the other ellipse are within this ellipse, //This ellipse contains the other ellipse @@ -148,35 +160,6 @@ export class Ellipse { throw Error("Invalid Shape passed to containsShape, must be a Rectangle | Ellipse"); } - /** - * Method that checks if any quadrant of another ellipse overlaps with this ellipse. - * This can be done by checking if a point on the curve of the ellipse is within this ellipse. - * @param otherEllipse The other ellipse that might be overlapping with this ellipse - * @returns True, if there is an overlap. Else, false - */ - private checkQuadrantOverlap(otherEllipse: Ellipse): boolean { - //Get the quadrant which might be overlapping with this ellipse. - //To do so, check which corner of the rectangular bounding box of the other ellipse - //is within this ellipse. - for (let i = 0; i < 4; i++) { - if (this.containsPoint(otherEllipse.boundingBox.getCorners()[i])) { - //Get the points on the curve of the ellipse in that quadrant - const points: Point[] = otherEllipse.getQuadrantPoints(i); - - console.log("has corner " + i); - //If any points along the curve are within this ellipse, the other ellipse overlaps - //with this ellipse. Return true. - for (let j = 0; j < 6; j++) { - if (this.containsPoint(points[j])) { - console.log("Has overlap"); - return true; - } - } - } - } - return false; - } - /** * An array containing the widest coordinates of the ellipse, i.e. the coordinates along the * x-axis and y-axis of the ellipse. @@ -196,54 +179,29 @@ export class Ellipse { ]; } - /** - * Method that returns the points on the curve of the ellipse in a specific quadrant - * @param quadrant The quadrant which we want the points in - * @returns An array of points along the curve of the ellipse - */ - private getQuadrantPoints(quadrant: number): Point[] { - //==========DEBUGGG========= - console.log("Getting points for: " + this + "\n" + "In quad: " + quadrant); - + private getEllipsePoints(): Point[] { const points: Point[] = []; - const quadDistance = this.radiusX; - let curve = 1; - - if (quadrant === 0) { - //top left quadrant - points[0] = this.getWidestCoordinates()[3]; - points[1] = this.getWidestCoordinates()[0]; - } else if (quadrant === 1) { - //top right quadrant - points[0] = this.getWidestCoordinates()[0]; - points[1] = this.getWidestCoordinates()[1]; - } else if (quadrant === 2) { - //bottom right quadrant - points[0] = this.getWidestCoordinates()[1]; - points[1] = this.getWidestCoordinates()[2]; - - curve = -1; - } else if (quadrant === 3) { - //bottom left quadrant - points[0] = this.getWidestCoordinates()[2]; - points[1] = this.getWidestCoordinates()[3]; - - curve = -1; - } - - for (let i = 2; i < 6; i++) { - let x = points[0].x; - if (curve === 1) { - x = x + (i - 1) * (quadDistance / 5); + const pointDist = this.radiusX / 9; + //get widestCoord(3) + //pointDistance = radx/6 + //Get 5 points btwn each widest + //from 0 - 12, + pointDist + + points[0] = this.getWidestCoordinates()[3]; + let x: number; + let y: number; + + for (let i = 1; i < 40; i++) { + if (i < 20) { + x = points[i - 1].x + pointDist; + y = this.getCurvePoint(x, 1); } else { - x = x - (i - 1) * (quadDistance / 5); + x = points[i - 1].x - pointDist; + y = this.getCurvePoint(x, -1); } - const y = this.getCurvePoint(x, curve); points[i] = new Point(x, y); } - //========DEBUGGGG======== - console.log(points); return points; } 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 04/22] 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 2c1e728866c529dec79a23f0c8f8a0de6c37cf65 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 9 Oct 2023 02:12:09 +0000 Subject: [PATCH 05/22] Bump @types/node from 20.8.0 to 20.8.3 Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 20.8.0 to 20.8.3. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 73d71a8d..6d28f7c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,7 @@ "nomial": "^1.0.11" }, "devDependencies": { - "@types/node": "20.8.0", + "@types/node": "20.8.3", "gts": "^5.0.1", "typedoc": "^0.25.2", "typescript": "~5.2.2", @@ -805,9 +805,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "20.8.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.0.tgz", - "integrity": "sha512-LzcWltT83s1bthcvjBmiBvGJiiUe84NWRHkw+ZV6Fr41z2FbIzvc815dk2nQ3RAKMuN2fkenM/z3Xv2QzEpYxQ==", + "version": "20.8.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.8.3.tgz", + "integrity": "sha512-jxiZQFpb+NlH5kjW49vXxvxTjeeqlbsnTAdBTKpzEdPs9itay7MscYXz3Fo9VYFEsfQ6LJFitHad3faerLAjCw==", "dev": true }, "node_modules/@types/normalize-package-data": { diff --git a/package.json b/package.json index 755c4eb5..d0fd4c97 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ }, "homepage": "https://github.com/James-Oswald/PeirceMyHeart#readme", "devDependencies": { - "@types/node": "20.8.0", + "@types/node": "20.8.3", "gts": "^5.0.1", "typedoc": "^0.25.2", "typescript": "~5.2.2", From ca1f5ffa8e3ed69bc0bdd5e8c9718a608b131841 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 9 Oct 2023 02:12:36 +0000 Subject: [PATCH 06/22] Bump vite from 4.4.9 to 4.4.11 Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.4.9 to 4.4.11. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v4.4.11/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v4.4.11/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6d28f7c7..b1f78aa3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "gts": "^5.0.1", "typedoc": "^0.25.2", "typescript": "~5.2.2", - "vite": "^4.4.9" + "vite": "^4.4.11" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -3947,9 +3947,9 @@ } }, "node_modules/vite": { - "version": "4.4.9", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", - "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz", + "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==", "dev": true, "dependencies": { "esbuild": "^0.18.10", diff --git a/package.json b/package.json index d0fd4c97..2610c89d 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "gts": "^5.0.1", "typedoc": "^0.25.2", "typescript": "~5.2.2", - "vite": "^4.4.9" + "vite": "^4.4.11" }, "dependencies": { "nomial": "^1.0.11" From 39ec855cb81c54d168b721e0d4463acef83edd23 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 9 Oct 2023 02:12:53 +0000 Subject: [PATCH 07/22] Bump gts from 5.0.1 to 5.2.0 Bumps [gts](https://github.com/google/gts) from 5.0.1 to 5.2.0. - [Release notes](https://github.com/google/gts/releases) - [Changelog](https://github.com/google/gts/blob/main/CHANGELOG.md) - [Commits](https://github.com/google/gts/compare/v5.0.1...v5.2.0) --- updated-dependencies: - dependency-name: gts dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- package-lock.json | 54 +++++++++++++++++++++++------------------------ package.json | 2 +- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6d28f7c7..551bc6b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ }, "devDependencies": { "@types/node": "20.8.3", - "gts": "^5.0.1", + "gts": "^5.2.0", "typedoc": "^0.25.2", "typescript": "~5.2.2", "vite": "^4.4.9" @@ -606,9 +606,9 @@ } }, "node_modules/@eslint/js": { - "version": "8.44.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz", - "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.50.0.tgz", + "integrity": "sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -1638,27 +1638,27 @@ } }, "node_modules/eslint": { - "version": "8.45.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.45.0.tgz", - "integrity": "sha512-pd8KSxiQpdYRfYa9Wufvdoct3ZPQQuVuU5O6scNgMuOMYuxvH0IGaYK0wUFjo4UYYQQCUndlXiMbnxopwvvTiw==", + "version": "8.50.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.50.0.tgz", + "integrity": "sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.4.0", - "@eslint/eslintrc": "^2.1.0", - "@eslint/js": "8.44.0", - "@humanwhocodes/config-array": "^0.11.10", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.2", + "@eslint/js": "8.50.0", + "@humanwhocodes/config-array": "^0.11.11", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", - "ajv": "^6.10.0", + "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.2", "debug": "^4.3.2", "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.2.0", - "eslint-visitor-keys": "^3.4.1", - "espree": "^9.6.0", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.3", + "espree": "^9.6.1", "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -1692,9 +1692,9 @@ } }, "node_modules/eslint-config-prettier": { - "version": "8.8.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz", - "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.0.0.tgz", + "integrity": "sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==", "dev": true, "bin": { "eslint-config-prettier": "bin/cli.js" @@ -2283,16 +2283,16 @@ "dev": true }, "node_modules/gts": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/gts/-/gts-5.0.1.tgz", - "integrity": "sha512-wanVTOI5CRVHQRwn2Fpux4IUUF6f6E3WbhfR+k9PB/hGS8OsmSjo2z0gy6kgsXwqjPqKEhC2w/9jIl/VP7NXCQ==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/gts/-/gts-5.2.0.tgz", + "integrity": "sha512-25qOnePUUX7upFc4ycqWersDBq+o1X6hXUTW56JOWCxPYKJXQ1RWzqT9q+2SU3LfPKJf+4sz4Dw3VT0p96Kv6g==", "dev": true, "dependencies": { "@typescript-eslint/eslint-plugin": "5.62.0", "@typescript-eslint/parser": "5.62.0", "chalk": "^4.1.2", - "eslint": "8.45.0", - "eslint-config-prettier": "8.8.0", + "eslint": "8.50.0", + "eslint-config-prettier": "9.0.0", "eslint-plugin-node": "11.1.0", "eslint-plugin-prettier": "5.0.0", "execa": "^5.0.0", @@ -2300,7 +2300,7 @@ "json5": "^2.1.3", "meow": "^9.0.0", "ncp": "^2.0.0", - "prettier": "3.0.1", + "prettier": "3.0.3", "rimraf": "3.0.2", "write-file-atomic": "^4.0.0" }, @@ -3210,9 +3210,9 @@ } }, "node_modules/prettier": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz", - "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true, "bin": { "prettier": "bin/prettier.cjs" diff --git a/package.json b/package.json index d0fd4c97..6489f7fb 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "homepage": "https://github.com/James-Oswald/PeirceMyHeart#readme", "devDependencies": { "@types/node": "20.8.3", - "gts": "^5.0.1", + "gts": "^5.2.0", "typedoc": "^0.25.2", "typescript": "~5.2.2", "vite": "^4.4.9" From 90d4725990bfcbcdec6e33d9bf15e225b32bc845 Mon Sep 17 00:00:00 2001 From: AnushaTiwari5 Date: Sun, 8 Oct 2023 22:35:29 -0400 Subject: [PATCH 08/22] ellipse on ellipse fully working --- src/AEG/Ellipse.ts | 2 +- src/AtomCreation.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/AEG/Ellipse.ts b/src/AEG/Ellipse.ts index d3fdd4a4..25d5f8da 100644 --- a/src/AEG/Ellipse.ts +++ b/src/AEG/Ellipse.ts @@ -77,7 +77,7 @@ export class Ellipse { //(x, y) = new point //(h, k) = center - const p: number = Math.round( + const p: number = Math.ceil( Math.pow(otherPoint.x - this.center.x, 2) / Math.pow(this.radiusX, 2) + Math.pow(otherPoint.y - this.center.y, 2) / Math.pow(this.radiusY, 2) ); diff --git a/src/AtomCreation.ts b/src/AtomCreation.ts index 639b3a94..6a7cb51a 100644 --- a/src/AtomCreation.ts +++ b/src/AtomCreation.ts @@ -68,7 +68,7 @@ function moveAtom(event: MouseEvent) { function atomUp() { const atomMetrics: TextMetrics = ctx.measureText(atom); const newRect: Rectangle = new Rectangle( - new Point(currentPoint.x, currentPoint.y + atomMetrics.actualBoundingBoxAscent), + new Point(currentPoint.x, currentPoint.y - atomMetrics.actualBoundingBoxAscent), atomMetrics.width, atomMetrics.fontBoundingBoxDescent + atomMetrics.actualBoundingBoxAscent ); 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 09/22] 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 10/22] 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 11/22] 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 9da25afa359d9edfa3e3c75048571e861969655a Mon Sep 17 00:00:00 2001 From: AnushaTiwari5 Date: Sun, 8 Oct 2023 22:54:40 -0400 Subject: [PATCH 12/22] fixed contains atom bug, removed unecessary comment lines --- src/AEG/Ellipse.ts | 23 ++--------------------- src/AEG/Rectangle.ts | 2 -- 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/src/AEG/Ellipse.ts b/src/AEG/Ellipse.ts index 25d5f8da..a9dde1a2 100644 --- a/src/AEG/Ellipse.ts +++ b/src/AEG/Ellipse.ts @@ -83,13 +83,6 @@ export class Ellipse { ); return p <= 1; - - //Method 2: scaling eclipse to check for containment - /* const scale_y = this.radiusX / this.radiusY; - const dx = otherPoint.x - this.center.x; - const dy = (otherPoint.y - this.center.y) * scale_y; - - return Math.pow(dx, 2) + Math.pow(dy, 2) <= Math.pow(this.radiusX, 2); */ } /** @@ -98,7 +91,6 @@ export class Ellipse { * @returns True, if there is an overlap. Else, false. */ public overlaps(otherShape: Rectangle | Ellipse): boolean { - //return this.boundingBox.overlaps(otherShape); if (otherShape instanceof Rectangle) { for (let i = 0; i < 4; i++) { if (this.containsPoint(otherShape.getCorners()[i])) { @@ -133,19 +125,12 @@ export class Ellipse { */ public containsShape(otherShape: Rectangle | Ellipse): boolean { if (otherShape instanceof Rectangle) { - /* for (let i = 0; i < 4; i++) { + for (let i = 0; i < 4; i++) { if (!this.containsPoint(otherShape.getCorners()[i])) { return false; } } - return true; */ - - //If the 2 opposite corners of the rectangle are within this ellipse, - //The rectangle is contained within this ellipse - return ( - this.containsPoint(otherShape.getCorners()[0]) && - this.containsPoint(otherShape.getCorners()[2]) - ); + return true; } else if (otherShape instanceof Ellipse) { //If all the widest coordinates of the other ellipse are within this ellipse, //This ellipse contains the other ellipse @@ -182,10 +167,6 @@ export class Ellipse { private getEllipsePoints(): Point[] { const points: Point[] = []; const pointDist = this.radiusX / 9; - //get widestCoord(3) - //pointDistance = radx/6 - //Get 5 points btwn each widest - //from 0 - 12, + pointDist points[0] = this.getWidestCoordinates()[3]; let x: number; diff --git a/src/AEG/Rectangle.ts b/src/AEG/Rectangle.ts index 37b6b2fb..b3bfeddf 100644 --- a/src/AEG/Rectangle.ts +++ b/src/AEG/Rectangle.ts @@ -93,8 +93,6 @@ export class Rectangle { } return false; } else { - //const ellipseBoundary = (otherShape as Ellipse).boundingBox; - //return this.overlaps(ellipseBoundary); for (let i = 0; i < 4; i++) { if ((otherShape as Ellipse).containsPoint(this.getCorners()[i])) { return true; From dd9bc8fee5bf327e0409fbb0208c2146cfc249f4 Mon Sep 17 00:00:00 2001 From: AnushaTiwari5 Date: Sun, 8 Oct 2023 23:00:59 -0400 Subject: [PATCH 13/22] increased points on ellipse --- src/AEG/Ellipse.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/AEG/Ellipse.ts b/src/AEG/Ellipse.ts index a9dde1a2..a8cdf883 100644 --- a/src/AEG/Ellipse.ts +++ b/src/AEG/Ellipse.ts @@ -166,14 +166,14 @@ export class Ellipse { private getEllipsePoints(): Point[] { const points: Point[] = []; - const pointDist = this.radiusX / 9; + const pointDist = this.radiusX / 15; points[0] = this.getWidestCoordinates()[3]; let x: number; let y: number; - for (let i = 1; i < 40; i++) { - if (i < 20) { + for (let i = 1; i < 64; i++) { + if (i < 33) { x = points[i - 1].x + pointDist; y = this.getCurvePoint(x, 1); } else { 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 14/22] 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 = 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 = 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 = 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) { From 7f57f6231e48afd473df944c4b0af63e2e8d2887 Mon Sep 17 00:00:00 2001 From: AnushaTiwari5 Date: Mon, 9 Oct 2023 00:07:27 -0400 Subject: [PATCH 15/22] rectangle overlap when no corners within bug fix --- src/AEG/Ellipse.ts | 1 - src/AEG/Rectangle.ts | 60 ++++++++++++++++++++++++++++++++++++-------- 2 files changed, 49 insertions(+), 12 deletions(-) diff --git a/src/AEG/Ellipse.ts b/src/AEG/Ellipse.ts index a8cdf883..d94ed1f4 100644 --- a/src/AEG/Ellipse.ts +++ b/src/AEG/Ellipse.ts @@ -1,6 +1,5 @@ import {Point} from "./Point"; import {Rectangle} from "./Rectangle"; -//import {Polynomial, polynomialRoots} from "nomial"; /** * Class that defines an Ellipse. diff --git a/src/AEG/Rectangle.ts b/src/AEG/Rectangle.ts index b3bfeddf..b3653f68 100644 --- a/src/AEG/Rectangle.ts +++ b/src/AEG/Rectangle.ts @@ -79,18 +79,18 @@ export class Rectangle { */ public overlaps(otherShape: Rectangle | Ellipse): boolean { if (otherShape instanceof Rectangle) { - const thisCorners = this.getCorners(); - const otherCorners = otherShape.getCorners(); - - //Overlap occurs if either of the corners of either shape are within the other - for (let i = 0; i < 4; i++) { - if ( - this.containsPoint(otherCorners[i]) || - otherShape.containsPoint(thisCorners[i]) - ) { - return true; - } + if ( + this.checkHorizontalEdgeOverlap(otherShape) && + otherShape.checkVerticalEdgeOverlap(this) + ) { + return true; + } else if ( + this.checkVerticalEdgeOverlap(otherShape) && + otherShape.checkHorizontalEdgeOverlap(this) + ) { + return true; } + return false; } else { for (let i = 0; i < 4; i++) { @@ -102,6 +102,44 @@ export class Rectangle { } } + /** + * Checks if any of the horizontal edges of the other rectangle lie within the horizontal + * boundaries of this rectangle + * @param otherRect The other rectangle + * @returns True, if the other edges lie within this boundary. Else, false + */ + private checkHorizontalEdgeOverlap(otherRect: Rectangle): boolean { + const thisCorners = this.getCorners(); + const otherCorners = otherRect.getCorners(); + + if (thisCorners[0].y <= otherCorners[0].y && thisCorners[2].y >= otherCorners[0].y) { + return true; + } else if (thisCorners[0].y <= otherCorners[2].y && thisCorners[2].y >= otherCorners[2].y) { + return true; + } + + return false; + } + + /** + * Checks if any of the vertical edges of the other rectangle lie within the vertical + * boundaries of this rectangle + * @param otherRect The other rectangle + * @returns True, if the other edges lie within this boundary. Else, false + */ + private checkVerticalEdgeOverlap(otherRect: Rectangle): boolean { + const thisCorners = this.getCorners(); + const otherCorners = otherRect.getCorners(); + + if (thisCorners[0].x <= otherCorners[0].x && thisCorners[1].x >= otherCorners[0].x) { + return true; + } else if (thisCorners[0].x <= otherCorners[1].x && thisCorners[1].x >= otherCorners[1].x) { + return true; + } + + return false; + } + /** * Method that checks whether another shape is within this rectangle. * @param otherShape The shape that might be within this rectangle. From 4591f2226c60ca67dd270a5eedd624697a12a0ae Mon Sep 17 00:00:00 2001 From: Subrina Huda Date: Mon, 9 Oct 2023 00:15:03 -0400 Subject: [PATCH 16/22] Prevent Text From being highlighted --- Peirce-My-Heart | 1 + 1 file changed, 1 insertion(+) create mode 160000 Peirce-My-Heart diff --git a/Peirce-My-Heart b/Peirce-My-Heart new file mode 160000 index 00000000..09b748de --- /dev/null +++ b/Peirce-My-Heart @@ -0,0 +1 @@ +Subproject commit 09b748ded887534781137b0d058c062d88840972 From e9d4a81e97136c8ead9ef6292105e2c4821cd649 Mon Sep 17 00:00:00 2001 From: Subrina Huda Date: Mon, 9 Oct 2023 00:19:32 -0400 Subject: [PATCH 17/22] Prevent Text from being highlighted --- Peirce-My-Heart | 2 +- src/index.css | 6 ++++++ src/index.html | 6 +++--- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/Peirce-My-Heart b/Peirce-My-Heart index 09b748de..4591f222 160000 --- a/Peirce-My-Heart +++ b/Peirce-My-Heart @@ -1 +1 @@ -Subproject commit 09b748ded887534781137b0d058c062d88840972 +Subproject commit 4591f2226c60ca67dd270a5eedd624697a12a0ae diff --git a/src/index.css b/src/index.css index 9fb2ec0c..86ef95c8 100644 --- a/src/index.css +++ b/src/index.css @@ -74,3 +74,9 @@ p { left: 0px; z-index: -1; } +.no-highlight{ + user-select: none; + -moz-user-select: none; + -webkit-text-select: none; + -webkit-user-select: none; + } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 91986b17..4cd5c6f9 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@