rairlab / peirce-my-heart Goto Github PK

Some browsers support the ability to turn a web application into a standalone application without the need for things like electron. This is enabled via the creation of a web application manifest and linking it via a link tag.

See:

• https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
• https://developer.mozilla.org/en-US/docs/Web/Manifest

Deployments have started failing for some reason. Fix this.

canInsert currently does not allow you to surround an already placed object, This forces the tree to be built from the top down. Fix this to allow for surrounding one or multiple objects and inserting them into the tree correctly.

• Reworking of how to place an Atom
• Seperation of Modes from index.ts

Both of these were issues previously that had to be ignored due to time constraints. This will be the first goal I tackle.

I have no idea how this happened but i got into both modes at the same time. Prevent this with a hard logic check.

Atoms have the possibility of being any chosen keypush, including items like shift and F12. Prevent this from happening so it's just single characters.

Add support for saving and loading AEGs to and from JSON files.

• Write a method for serializing AEGs to JSON objects using the browser JSON api
• Have a method and UI element that downloads the JSON file with a default name when clicked on. (Quick Download)
• Have a method and UI element that opens a save menu where the user can rename the file and select where to download it. (Slow download)
• #163
• Write a method for creating an AEG from an uploaded JSON file. For typescript you will need an interface that represents the data to properly load the JSON, see here for help
• Implement a UI element that when clicked opens a file menu for the user to select an AEG file to load, when selected, it should try to load the AEG into the draw workspace. If the file can't be parsed as an AEG, an error popup should appear in the UI.

We have divergent overlaps implementations causing issues.
in elipse.ts

    public overlaps(otherShape: Rectangle | Ellipse): boolean {
        if (otherShape instanceof Rectangle) {
            for (let i = 0; i < 4; i++) {
                if (this.containsPoint(otherShape.getCorners()[i])) {
                    return true;
                }
            }

            return false;
        } else {
            //check if the rectangular bounding boxes of the ellipse overlap
            if (
                this.boundingBox.overlaps((otherShape as Ellipse).boundingBox) ||
                //this.boundingBox.containsShape((otherShape as Ellipse).boundingBox) ||
                (otherShape as Ellipse).boundingBox.containsShape(this.boundingBox)
            ) {
                //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 this ellipse
                //are within the other ellipse
                const points: Point[] = this.getEllipsePoints();
                for (let i = 0; i < points.length; i++) {
                    if (otherShape.containsPoint(points[i])) {
                        return true;
                    }
                }
            }
            return false;
        }
    }

and in rectangle.ts

    public overlaps(otherShape: Rectangle | Ellipse): boolean {
        if (otherShape instanceof Rectangle) {
            return this.edgesOverlap(otherShape);
        } else if (otherShape instanceof Ellipse) {
            for (let i = 0; i < 4; i++) {
                if (otherShape.containsPoint(this.getCorners()[i])) {
                    return true;
                }
            }
            return false;
        } else {
            throw Error("Invalid Shape passed to overlaps, must be a Rectangle | Ellipse");
        }
    }

elipse.overlaps(rectangle) and rectangle.overlaps(ellipse) should ALWAYS return the same thing
but clearly, they don't due to the fact we have completely deferent implementations.
You should move ALL of this logic to a single helper function (probably in a new file, AEGUtils or something) overlaps(s1 : Rectangle | Ellipse, s2 : Rectangle | Ellipse) that both methods call.

1. Click circle button.
2. Make circle(s).
3. Click symbol button.
4. Make symbol(s).
5. Change cut to circumscribed.
6. Click circle button.
7. Make circle(s). <-where bug appears

Fix the dawn overlap bug.

Docs no longer work

As seen in the above image, the UI on the electron build is out of place and squished. Likely a few min-heights or min-widths will do the trick.

Sometimes when constant clicks happen, certain atoms previously placed will suddenly disappear.
Current cause is unknown and cannot be replicated on my machine, please post any situations where this happens.

#65 has broken atoms being inserted. Caught by @DawnTheWitch

So far, I've enforced using JSDoc comments for most of the codebase, however, we don't actually use JSDoc to generate documentation yet. For this issue, you should:

• use npm to install typedoc
• add a typedocconfig file that builds the docs to the build folder as HTML files.
• add an npm script that builds the docs
• modify the buildAndDeploy.yml github action to build the docs into the build folder so they can be accessed via the website

Implement Selection Mode. Selection mode is a general-purpose editor mode in which AEG components can be selected, moved, duplicated, and deleted.

In selection mode, users should be able to select AEG components (Cuts (and their children) and Atoms). Once selected users should be able to drag and place components elsewhere using their mouse. They should also be able to duplicate (copy) selected items (upon which the duplicate will become the new selected item) and move these copies somewhere (paste). Alternatively, they should be able to delete selected components. (Make a new issue for deletion)

Like atom and ellipse creation mode, selected components being dragged should not be in the graph and should be highlighted green if they can be placed at the current location, and red if they cannot.

Open Design question(s):

1. Unlike when drawing a new cut, in which the cut can be drawn around existing elements, a component being moved should probably never be allowed to be placed over other elements.
   • We may make an exception for a structure containing only Cuts (Since it is conceivable you may want to move a double cut to surround a new atom). (OPTIONAL)
2. It is conceivable that someone may want to delete a cut but leave the children without deleting them, should this be handled via a separate erase mode that only deletes the outermost cut?
3. What is a good mouse-based control to indicate duplication? Should this be turned into a different mode? But surely the hotkeys for copy and paste should still work in this mode?

When hovering over the buttons in the side menu, nothing happens, even when clicked. Add CSS to show that a button is being hovered over and CSS to show that a button is clicked. The solution should not move the buttons, all of this must be done in place.

Add a typescript unit test for all classes that do not depend on the DOM (can be used as standalone not on the browser). This needs to include the following, if any of these files include DOM based code, rearchitect so that they are standalone:

• AEGs
• Rects
• Points
• Ellipses

Pick a unit test package such as vitest (or equivalent).

• Install it via npm as a dev package and set it up. Preferably place tests in a top-level tests directory in the project root.
• Write comprehensive unit tests that test all public methods and their edge cases.
• Add an npm script to run all API unit tests.
• Write a github workflow that runs the npm script and add it to the list of status checks required to push to main.

Fix for getting the ellipse radii being flipped when drawn, resulting in mismatch between the visible ellipse and its stored attributes

Finish implementation of the methods described in #3. Rewrite other parts as necessary to make this work.
NOTE. ive removed the requirement that you pass in the xy coordinate the AEG is being moved to, you may assume the bounding box or bounding ellipse contains this information.

• #52
• insert AEG: given a new AEG, place the new AEG into the tree at the correct location based on bounding boxes.
• #45

Please notify @DawnTheWitch when this is done so she can begin #31

Accessors and Modifiers needed to update bounding boxes when atoms and cuts moved or resized

• Atoms can be moved -> need to set vertex to new coordinates
• Cuts can be moved -> need to set center to new coordinates
• Cuts can be resized -> need to set center to new coordinates, radii to new lengths

Current UI is an ugly wireframe. Stylize it using CSS.

Create a scalable HTML and CSS layout for the application, in line with the layout we have discussed in meetings.
Include basic buttons for drawing AEGs on the side bar with unique icons. Include buttons or a menu for saving and loading in the header bar.

Use Selenium (or equivalent) to create UI unit tests for high level operations such as drawing and manipulating AEGs, constructing proofs, downloading files, etc. For this issue you should:

• Install Selenium via npm
• Write high level UI Unit tests that hit all features and ensure output is expected. Some examples:
  • Draw a complex AEG with multiple nested cuts and atoms, save it as a file, ensure the AEG structure matches the expected values.
  • Load an AEG from a file, try to place multiple illegal atoms and cuts on it, save the file and ensure none were added.
• Add the entire selenium test suite to be executable via npm script.
• Add a github workflow that runs the npm script and use it as a status check for pushing to master.

After the completion of #59 add support to swap the toolbar depending on the mode. Items related to atom mode should not be displayed in cut mode and vice versa. Can use the display: none; for this using the .style property. Resource: https://stackoverflow.com/questions/6242976/javascript-hide-show-element

When the mouse leaves the UI while pressed down, the text in the toolbar and header is highlighted. Prevent this from happening using CSS. Example:

Implement Move Mode to give us an effectively infinite canvas.

Move mode should allow users to drag anywhere on the screen and have it "move" the canvas.
This should be implemented by having a global offset point which is shifted appropriately on mouse drag. All shapes and selections are then appropriately offset by this to ensure they are drawn and selected on the correct part of the canvas.

For an example of what move mode looks like. Check out this canvas application I've made, click and drag on any empty spot on the canvas.

After the completion of #19, Integrate it so that dragging cuts and atoms places them in the AEG data structure.

• Build AEGs using the UI in atom and cut mode and verify it creates the correct structure.
• Prevent cuts and atoms from being placed in illegal positions.
• Draw the AEG structure with correct highlighting
• Add proper support for colors when placing atoms and cuts, green if its ok to place it into the AEG, and red if it's not.

Complete the AEG Tree Data structure which represents the structural and semantic (hierarchical) structure of AEGs

Should consist of Atom nodes and Cut nodes.

Atom nodes are always leaves and consist of a character and a rectangular bounding box.
Cut nodes consist of an elliptical bounding box and can contain zero or more child nodes.

Desired Methods:

verify AEG: a recursive method that ensures the bounding box structure is consistent with the hierarchy, bounding boxes of children nodes should be included in the parents bounding box.

insert AEG: given a new AEG and an xy coordinate at which the graph is to be inserted, place the new AEG into the tree at the correct location based on bounding boxes.

canInsert AEG: given a new AEG and an xy coordinate at which the graph is to be inserted, find out if you can legally insert here without overlapping any bounding boxes.

remove AEG: given an xy coordinate, delete smallest the AEG containing this coordinate.

Stop the great component Guillotine!!! It is deleting innocent components that should not be deleted.

Calculate ellipse bounding box using shortest distance method.
"convert the ellipse to a polar coordinate parameterization in terms of an angle, use the center of both ellipses to get an angle to find the point on E1 closet to E2, then just run the is a point inside an ellipse check."

Users should be able to create cuts on the canvas (when in cut mode), in which they click once to create an ellipse and hold and drag to size it. If the ellipse is in a legal position with respect to the AEG on the canvas, it should be highlighted green signaling it can be inserted, when the mouse is released, the cut should be inserted into the AEG. If the cut can't be inserted due to overlap, it should be red and disappear when the mouse is released.

Create a minimum x and y radius for the creation of an ellipse. If it is below this minimum radius it is considered an illegal draw and it should not be added to the canvas or the tree.

Add items for atom creation toolbar.

• #165
• Display that shows what symbol is currently selected to be placed as the atom.

Ellipses are now being drawn twice before being placed in AEG

Vite offers more robust options in the electron space. Since I would like electron support see #27 , vite is a good option.

When the mouse leaves the canvas when the mouse is down, the current ellipse or atom should disappear, and not be placed. Currently if the mouse returns to the canvas while down.

The Notes.md file probably shouldn't have made it into source control.

Ellipse-Ellipse Collison Detection is currently implanted as a heuristic that checks points along the ellipse are inside another ellipse (for Ellipse-Ellipse). Improve this with mathematically perfect Collison detection that checks if ellipses overlap. The start of a solution can be seen on Desmos here

Make collision check better by adding more points to the ellipse, large ellipses have space to fit atoms in.

Update The HTML and CSS for the application homepage aeg.html. The homepage should provide links for

• the application page, index.html
• an about page about.html with links to resources, such as books and posts about EGs.
• The developer docs from #26

The first cut and and the last cut are only drawn once. All cuts in-between this are drawn multiple times, leading to noticeably thicker lines.

They should all be drawn only once.

Rewrite the frontend canvas listeners to use universal event listeners (A single listener function for each event that passes control to separate functions based on state (such as mode)) to stop the need for complex event listener logic that is causing bugs such as #62 and #63.

While a web application is great, some users may want to access the application offline as an executable or may want easy access to old versions of the application without having to build and host the old code themselves. Electron provides an easy way of packaging HTML, CSS, and JS code into a standalone cross platform executable. For this issue need to integrate electron such that the application is built into an executable, you may look into using either electron-webpack to try and set up electron as part of our webpack build process, or developing your own method using the files built by webpack and passing them into pure Electron to be packaged. For this issue you should:

• Add electron via npm as a dev tool
• Setup main process and build using vite
• Configure electron to output desktop executables for Windows and Linux

Currently ellispeCreation and atomCreation used the setters for what we had initially was Point (the one we had in index). With the group switching to use of the Point object itself this for whatever never made an error or anything. This ended up causing Anusha a slight headache as it didn't print correctly, this is the quick fix.