MenusInGraphviz

Menus in Graphviz

This page was created to explain the changes made to umple_action.js in relation to Issues #1898 and #1958. The overarching goal of #1898 was to create a menu to allow users to edit Graphviz diagrams graphically, instead of only textually. It was decided that a custom right-click (context) menu for UmpleOnline's Graphviz diagram outputs would be the most user-friendly way to go about this. #1958 requested a method to choose displayColor graphically, and was developed as one of the functions required for the editing menu created for #1898.

What changes were made?

State specific functions:
+Added Action.drawStateMenu()
+Added Action.drawInputState()
+Added Action.deleteState()
Class specific functions:
+Added Action.displayMenu()
+Added Action.drawInput()
+Added Action.deleteClass()
+Added Action.addAssociationGv()
+Added Action.setColor()
General functions:
+Added Action.removeContextMenu()
~Modified Action.updateUmpleDiagramCallback() - now adds a "contextmenu" event listener to node elements if GvClassDiagram or node+cluster elements for GvStateDiagram. This listener cancels the default contextmenu behavior and calls either Action.drawStateMenu() or Action.displayMenu(), depending on which type of diagram is currently being used.

How do these changes work?

1. The process begins in Action.updateUmpleDiagramCallback(), which now add eventListeners to "node" elements on the document, which is what the Graphviz output uses to display classes/states. Note: clusters are also given this eventListener in GvStateDiagrams, as they can also represent states.

2. When a user right clicks a node element, this will call Action.displayMenu() or Action.drawStateMenu() for class and state diagrams respectively. These functions are very similar. They generate a div at the coordinates of the mouse that contains all the edit options for that diagram type in a column, which are setup to call their respective functions when clicked.

3. If the user clicks one of these options, the relevant function is called. Rename, add subclass, add transition, add attribute, and add substate are all handled by either Action.drawInput() or Action.drawInputState(). These functions again function similarly, drawing an input div at the mouse coords, adding an appropriate input type, adding event listeners for "enter", and focusing the input. This allows users to instantly type and press enter to complete their requested edit. Edits that don't require further user input are executed by their own functions.

4. Once the edit is requested, the following general execution path is followed: -Class/state code and class/state name are provided as parameters
   -Relevant input is provided by user and loaded when "enter" is pressed or input arrow clicked (if applicable) -Class/state code is modified to fit edit request, often with regex expressions
   -Editor code is pulled, original class/state code is searched for and replaced with modified class code
   -A save function call made with reason "menuUpdate", which allows these edits to fit into existing undo/redo and save systems

5. In the case of deletions, the provided class/state code is searched for in the codeMirrorEditor, and replaced with nothing.

6. In the case of adding a transition or association, once the user inputs a label for the transition/association an left-click eventlistener is added to all possible destinations for the transition/association. This listener when triggered will remove all other listeners of the same type and will grab the name of the clicked element and modify the origin class/state to have a transition to/association with that destination class/state.

7. #1958 is implemented as part of Action.drawInputState(), where users who select "change color" are given an HTML color picker that allows for users to enter RBG values or use a color dropper and color wheel to choose.