Customizing node and link layouts
For details about layout, see
Layout.
Properties for customizing the layout of nodes or links
The customization of the layout is based on the properties listed in the following table.
CSS properties for node and link layout
Property Name | Type | Default Value | Description |
linkPorts | IltLinkPort[] | Top, Bottom, Left, Right and Center | Applies only to nodes. This property denotes which link ports are recognized by the node when links are attached to it. This property affects the link layout when set to IltLinkLayout or IltShortLinkLayout. Possible values are: Top, Bottom, Left, Right or Center. It is possible to create new link ports by creating new instances of IltLinkPort. |
fromPort | IltLinkPort | null | Applies only to links. Denotes the preferred link port at the "from" end side. Only effective when an IltShortLinkLayout is used. |
toPort | IltLinkPort | null | Applies only to links. Denotes the preferred link port at the "to" end side. Only effective when an IltShortLinkLayout is used. |
How to customize the layout for links
The following CSS extract illustrates how to customize the link layout using link ports. This example features two network elements identified as NE1 and NE2. Each network element has a set of link ports defined to connect the links that are attached to the node. In addition, there is a link connecting NE1 to NE2. For this link, the example specifies the link ports where the link should be attached by the link layout.
#NE1 {
linkPorts[0]: "Center";
}
#NE2 {
linkPorts[0]: Left;
linkPorts[1]: Top;
linkPorts[2]: Bottom;
}
#Link1 {
fromPort: Center;
toPort: Left;
}
Link ports are only available when the network or equipment components are configured to use the
IltShortLinkLayout. Refer to
The LinkLayout rule.
Setting parameters to customize nodes or links in a layout
You can set parameters for a particular node or link in a graph layout. This typically applies to certain types of layout, like
IlvBusLayout (to set the bus object) or the
IlvTreeLayout (to specify the root object), but you can also set parameters to specify that certain nodes or links must remain fixed. For more information, refer to
The GraphLayout rule.
Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.
