Overview

In this assignment you will build a visual editor in JavaFX that demonstrates your skills with immediate-mode graphics,    interaction with graphics, more complex model-view-controller architectures, and multiple synchronized views. The         system is an interactive editor for building state-machine diagrams (similar to the state machines discussed in class for    implementing controllers). Part 1 covers the basic system and creation of nodes and links, Part 2 covers user interactions with the system, Part 3 covers panning, and Part 4 covers multiple views and view synchronization.

The editor allows users to select a tool from a tool palette. Different tools allow the user to create state nodes, connect  states with transition links, move and edit items in the workspace, and pan the view. A property panel at the right of the screen allows the user to edit details for a state node or a transition link. Pressing the Delete key deletes the selected     item (if there is one) and any dependent items.

You will develop this application incrementally through the four parts described below.

Part 1: State Nodes and Transition Links

Using a full MVC architecture, develop a JavaFX application that implements node creation and linking. The app has a toolbar on the left side of the window and a drawing surface in the middle.

Write the following classes (you may also write other classes as needed):

     Application class

o EditorApp: the main application class

     Model classes

o SMModel: the model that stores all elements of the state machine defined in the editor

o SMStateNode: a class to represent a state node in the diagram

o SMTransitionLink: a class to represent a transition link in the diagram

     Interaction model classes

o InteractionModel: the interaction model that stores all information related to the app’s interaction state      View classes

o MainUI: a view that contains and lays out the toolbar and the drawing surface

o ToolPalette: a view that contains buttons for showing and selecting an editor tool

o DiagramView: a view that contains a canvas to show the drawing and allow user interaction

     Controller classes

o AppController: the controller to handle events from the view classes

Interaction requirements:

     There are three tools: the Pointer tool, the Move tool, and the Link tool. The Pointer tool is selected on startup              When the Pointer tool is selected, the cursor changes to an arrow (see the Cursor class); when the user clicks on the

background of the drawing canvas, a state node is created at the click location. If the user clicks on a state node, it  becomes selected (shown by drawing the node with a red border). If the user clicks on a state node and then drags, the node moves along with the cursor.

     When the Pan tool is selected, the cursor changes to a direction cross. The Pan tool does not do anything else for this part of the assignment.

     When the Link tool is selected, the cursor changes to a crosshair. If the user clicks on a state node and drags, a temporary line is drawn to the mouse location; if the user releases the mouse on a state node, then a transition link is created between the start and end nodes. For Part 1, you do not have to handle links that start and end at the same node.

     Note that when the user drags state nodes, any transition links

must move accordingly.

Software requirements:

     Your model class must create and manage objects of type SMStateNode and SMTransitionLink in the model.

     Your diagram view should be 800x800 pixels in size.

     Your system must use an MVC architecture with publish-subscribe communication between models and views.

     Your controller should implement methods for handling user events from all of your views.

     Your controller must use a state machine as described in lectures to handle mouse events from the drawing view.

Resources:

     Demo code presented in lectures and labs

     The JavaFX API for Canvas and GraphicsContext

(https://openjfx.io/javadoc/17/javafx.graphics/javafx/

/scene/canvas/package-summary.html)

     The JavaFX Cursor class

(https://openjfx.io/javadoc/19/javafx.graphics/javafx/

/scene/Cursor.html)

Part 2: Full Transition Links

UI state machine transitions do more than just connect state nodes – they also indicate an event, a set of context checks, and a set of side effects. In this part of the assignment, you will upgrade your SMTransitionLink class to contain this information, and change your DiagramView class to show the additional information as well as the direction of the link.

Interaction requirements:

     When the user drags between state nodes and releases to create a transition link, the system will now show an additional rectangular item in the workspace to display the transition information (event, context, side effects).

     Instead of a single line between nodes, a transition link now displays one line from the start node to the border of the transition rectangle, and another line from the transition rectangle to the end node (see picture); both lines have arrowheads that indicate the direction of the transition.

     With the pointer tool, the user can also select a transition rectangle (by clicking); if the user clicks and drags, the

transition rectangle drags similarly to the state nodes.

     In order to allow the user to select either a state node or a transition, you should change your SMStateNode and

SMTransitionLink classes to both extend a new abstract class, SMItem; by doing this you can still store the selection in the InteractionModel as a single variable.

Part 3: Editing and Deleting

Add views to allow editing of the information in state nodes and transition links, and add event handling to allow deletion of a selected item.

Additional interaction requirements:

     A new panel for editing is now permanently shown at the right of the graphical workspace.

     When the user selects a state node, the panel shows the state editing view; when the user selects a transition rectangle, the panel shows the transition editing view.

     The new views allow users to edit the text in the panel and press Enter (for single-line entries) or press the “Update” button to update the node or transition with the new text.

     The DiagramView updates the text in the state node or transition rectangle accordingly (note that you do not need to resize any items to accommodate long text)

     Deleting: when the user presses the ‘Delete’ key, any selected item is deleted. If the deleted item is a state node, any transition links associated with that node are also deleted.

Additional software requirements:

     Create classes NodePropertiesView and LinkPropertiesView for the two new views

     Add code to switch which view is shown depending on whether the user has selected a state node or a transition link

     Add event handling for key presses to your Scene

(or set the keyboard focus to an appropriate widget), and add code to your controller to handle the Delete keypress. Part 4: Second View, View Synchronization, Panning, and Resizing

Adapt your system to allow panning of the viewport within a larger workspace, as well as window resizing. Adapt your DiagramView class to also show the entire workspace in miniature as a semi-transparent overlay on the main view,      along with a rectangle that indicates the location of the current viewport.

Additional interaction requirements:

     When the Pan tool is selected, the user can click and drag to pan the viewport within a 1600x1600 workspace (the viewport cannot be moved outside this area).

     The entire document is shown as a miniature and transparent overview, with a rectangle showing the location of the current viewport.

     Items in the miniature view cannot be selected.

     When the user resizes the window, the size of the canvas in the middle of the interface expands and contracts to fill the available space (the tool palette and property views extend to fill the available height, but do not increase in width).

     Set appropriate minimum sizes for your views (you do not have to alter the views to accommodate very small window sizes).

Additional software requirements:

     Add code to your InteractionModel to represent the viewport location and the extents of the workspace.      Add code to your controller state diagram to handle mouse events when the Pan tool is selected.                   Create new methods in class DrawingView to draw the overview

     Make sure that the viewport rectangle is drawn at the back, and the overview is drawn at the front      You may use either equation-based scaling or transform-based scaling for your overview

     Add code to your system to handle resizing of the window (you may use any method, but attaching listeners to the

heightProperty and widthProperty of the container widget that holds the canvas is recommended)

     The rectangle in the overview indicating the viewport location should correctly show the size of the viewport                   Note that the document is always 1600x1600; if your canvas is not square due to window resizing, the smaller of the

two dimensions should be used when drawing the overview so that the entire document is always shown. What to hand in (each student will hand in an assignment)

     Create a zip file of your IDEA project (File > Export > Project to Zip file…). Note that you do not need to hand in

separate files for Part 1, 2, 3, and 4: if you have completed Part 2, you do not need to hand in anything for Part 1; if you have completed Part 4, you do not need to hand in anything for Part 1 or 2 or 3.

     Add a readme.txt file to the zip that indicates exactly what the marker needs to do to run your code, and

explains which elements of the assignment are working or not.

     Systems for 381 should never require the marker to install external libraries, other than JavaFX.      This is an individual assignment – each student will hand in separately

     Review the material in the course syllabus regarding academic honesty, and follow all guidelines when

completing this assignment. If you have any questions, contact your instructor

Where to hand in

Hand in your zip file to the Assignment 3 link on the course Canvas site.

Evaluation

     Part 1: all classes are implemented as specified, all interaction requirements are working, and all software

requirements are implemented as specified

     Part 2: the new version of transition links is implemented as specified, both in the model and view classes