Custom Styles Demo

This demo shows how to create custom styles for nodes, edges, labels, ports, and edge arrows. Styles can use all the powerful visualisation features of Scalable Vector Graphics (SVG).

Two samples are offered, each using a different set of custom style implementations.

Samples

Description

Uses the style implementations

Sample1NodeStyle
Sample1EdgeStyle
Sample1LabelStyle
Sample1GroupNodeStyle
Sample1PortStyle
Sample1Arrow

Things to try

Create new nodes in the canvas and inspect their styles in code.
Create edges between nodes and inspect the custom style of the edge and the arrows in code.
Click "Modify Colors" to change the color of the nodes and indirectly the color of the outgoing edges.
Note that the labels look like nodes connected via an edge, however they are ordinary labels that reuse the edge style for drawing a node to label connection. Select and drag a label to move them to different locations.
Also note that the label style depends on the current zoom. Zooming closer to the label reveals an edit label button that, when clicked, starts label text editing.
Selecting an edge changes its color - the traditional selection indicator is not rendered.

Description

Uses the style implementations

Sample2NodeStyle
Sample2EdgeStyle
Sample2GroupNodeStyle
Sample2Arrow

Things to try

Create new nodes in the canvas and inspect their styles in code.
Create edges between nodes and inspect the custom style of the edge and the arrows in code.
The styles offer a cssClass property so that the items may easily be styled via CSS. See the rules (e.g. .node-color) defined in the index.html.
Save the sample to graphml by clicking the button in the toolbar. Inspect the markup extension implementations necessary to support graphml (e.g. DemoNodeStyleExtension).