Opens our scheduling page with Zoom's booking widget embedded. Using it shares your data
with Zoom under its
Privacy Policy.
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.
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).