Drag-and-Drop Equation Editor



This project was the final assignment for the class Accelerated Object-Oriented Design Concepts that I completed at WPI at the end of 2019. This project was divided into two parts: designing the backend code and making the frontend communicate with the backend. The assignment was very difficult- few students were able to finish it, with many having issues that resulting in the professor changing the grading. However, my partner (Jason) and I were able to finish the difficult project.




Part 1

This part was very simple- so much so that I completed it by myself. It involved creating trees to represent the equations. There was also inheritance, as certain elements of the equations were represented by different subclasses. Finally, we had to produce a deep copy of the tree, important for the second, significantly more difficult part of the assignment.




Part 2

This part was by far the most difficult assignment of the class- we had to create the drag-and-drop editor using JavaFX. Essentially, when the program ran, the user would be able to select a part of the equation then smoothly drag it to a different place. While it sounds simple, many specific details caused trouble to my peers and I. For example, the tree had to be updated to reflect the change in the order of the equation. Also, the dragged part could only land in certain places. Finally, just making the UI flow smoothly was a hard task. To top it all off, the whole equation had to swap whenever a user dragged an equation to a potential spot to reflect it being there, further complicating the already-difficult assignment.


I knew going into the project that it would not be an easy one, so I decided to work with a partner. Using git, we began working on the task early on. Generating the equation on the screen was simple, and selecting an equation also went well, but the actual dragging was difficult. Also, swapping the parts of the equation was very difficult, to the point that we were both very clueless after spending nearly a whole day working on the project. While we were feeling defeated, I kept thinking of the project, until I was able to think of a way to tackle the problem out of nowhere in the middle of a lecture. After a couple of hours of implementation, I was able to get the dragging working!


My partner and I were able to fix the vast majority of the nuances after that, to the point where the project was identical to the demos the professor offered in videos. While there were many frustrating moments in the project, we were able to truck through it and turn in a completed project.




Conclusion

The experience of completing this project was very rewarding. It not only felt very good to figure it out, but I also grew as a programmer and computer scientist. In the end, however, too many students were far from the solution that the professor ended up dropping our lowest project for the class. In addition, funny enough, my partner ended up turning in the wrong code! Still, the assignment was a very memorable moment in my career at WPI.


Source Code


Below are some of the classes used to create the drag-and-drop editor. The first handles the UI, using JavaFX to add interactive aspects to the project. The second class is for reading a user-inputted equation. The final class is for one of the expression types, a literal expression. This code was worked on by myself and my partner Jason.


Expression Editor

It appears you don't have a PDF plugin for this browser. You can click here to download the PDF file.

Expression Parser

It appears you don't have a PDF plugin for this browser. You can click here to download the PDF file.

Literal Expression

It appears you don't have a PDF plugin for this browser. You can click here to download the PDF file.


Screenshots


Below are some screenshots taken from the project of the Java app operating.


screenshot 1
screenshot 2
screenshot 3