Perforce JViews Diagrammer Code Example: Rotated Layout (CSS Version)

Description

This sample shows how to perform various layout styles in a rotated manner in the Diagrammer. It shows how to enable the IlvRotatedGraphModel using CSS.

A version of the Rotated Layout sample that does not use CSS can be found here

How to Use the Code Example

This sample shows graph layout using the rotation angle feature of the graph layout renderer, which internally uses a IlvRotatedGraphModel. This allows you to rotate the coordinate space during layout without rotating the node shapes. Notice that the nodes are upright rectangles even though the layout appears at an angle.
This application shows a diagrammer component that displays a graph rendered from an XML file. You can change the graph sample using the list at the top of the application. Each sample file uses a different layout style.
The application also has interactor buttons on the top side: select, zoom, unzoom, zoom box, zoom level 1, zoom to show all (fit to contents) and pan.
You can use the select interactor to select nodes.
The panel below the manager view allows you to specify the rotation angle, between -45 and +45 degree. Instead of a rotation, you can use a shear transform, which can be specified by the shear mode. The IlvRotatedGraphModel works with any transform, but the rotation and shear transform are those that are most frequently needed, hence this demo shows only those.
A layout is performed whenever you load a sample or when you change the rotation angle or the shear mode.
The rotation feature works well with flat graphs as shown in this sample. It does not work well with recursive layout modes on nested graphs, because the bounds of a submanager never get visually rotated, and because intergraph links cannot be routed in rotated mode. It does not work well with Bus Layout, because the bus node does not get rotated, nor with Long Link Layout because the spacing of the rotated routing grid is often inappropriate.

How to Run the Code Example as an Application

This code example can be run as an application. The installation directory contains an executable JAR file, diagrammer-rotatedlayout.jar, that allows you to execute the code example with a double click from a file browser. Note that if you are using Internet Explorer, you can open the installation directory and execute the JAR file from the browser. This technique may not work in other Web browsers.

Alternatively, you can run the code example application from the command line. First check that the Ant utility is properly configured. If not, see the instructions on how to configure Ant for Perforce JViews.

Then, go to the installation directory of the code example and type:

ant run

Topics Covered

Diagrammer.
Graph Layout
Rotated Layout in CSS
Mutable Style Sheet

Installation Directory

The Rotated Layout (CSS Version) code example is installed here.

Classes Involved

Source Files

RotatedLayoutApp