skip to main content
Programmers documentation > Styling > Using Cascading Style Sheets > Customizing node and link layouts
 
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.