Controlling arrows

> > > > >

You can set one of four modes on a link to represent an arrow:

The ARROW_FILL mode value (the default) draws a filled triangular arrowhead.
The ARROW_OPEN mode value draws a two-winged arrow.
The ARROW_GRADIENT mode value shows an oriented link by smoothly varying the luminosity along the link. The link appears darker near the source object and brighter near the destination object.
The ARROW_DECORATION mode value delegates the task of displaying the arrow to one of the link decorations.

Drawing an arrow

In the first two modes, the arrowPosition property controls the position of the arrowhead along the link. Its value is a floating-point value between 0 and 1. A value of 0 means the start of the link, and 1 means the end (the default). The arrow direction is obviously aligned with the link segment to which it is attached.

The property arrowRatio controls the size of the arrow, which is proportional to the link width. A floating-point value of 0.5 means the arrow has the same size as the link. The default value, 1, means the arrow is twice the link width. This property only makes sense for the first two arrow modes.

The default color for an arrow is black, but you can set a different color with the property arrowColor .

Figure
showing three vertically-aligned links with pink fill color, solid
black borders, round joins, and butt ends. The top link is set to
the arrow gradient mode, so its color is darker at the link source
and gets lighter at the target end of the link, which in this case
is the link’s right edge. The middle link has a consistent
pink color and a triangular-shaped filled black arrow at its target
end. The bottom link has an open arrow colored in a shade of purple.
The arrow is located at a distance of 0.2 units from the source end
of the link. It also points in the direction of the target end of
the link.

Arrowheads and direction

Basic link properties and three ways to show direction

link {
        lineWidth   : 10 ; 
        endCap      : CAP_BUTT ; 
        lineJoin    : JOIN_ROUND ; 
        foreground  : 255,130,171 ; 
        borderWidth : 2 ; 
        oriented    : true ; 
}

link.top { 
        arrowMode : ARROW_GRADIENT ; 
}

link.center { 
        mode          : MODE_UNICOLOR ; 
        arrowPosition : 1f ; 
        arrowMode     : ARROW_FILL ; 
}       

link.bottom { 
        arrowColor    : #A3056E ; 
        arrowPosition : .2 ; 
        arrowMode     : ARROW_OPEN ; 
}

Using a decoration as an arrowhead

The ARROW_DECORATION mode value delegates the responsibility for showing an arrow to a decoration.

IlvGeneralLink can help display a particular kind of arrow, for example, the kind used in UML drawings.

The arrowhead is a simple shape (such as a circle, triangle, or diamond), located at the end of the link. The link does not overlap the shape, nor go to the middle of the shape, nor change at all. Whatever the direction of the last link segment touching the target node, the shape is always toward the link. Since the decorations are IlvGraphic objects, that is, basically rectangular objects, this special mode gives better results with orthogonal links.

You can only use this mode if the following conditions are met:

The arrowMode property is set to ARROW_DECORATION .
One of the link decorations has its position set to 1.
This decoration sets the option DECORATION_OVER .
This decoration sets one of the options DECORATION_xxx_RETRACT_AT_END ,

where xxx can be FULL , HALF , or NO .

The following figure shows an example of two links in ARROW_DECORATION mode, connected to a square node. The horizontal link is ended by a circle; the line continues to the middle of the circle. The vertical link is ended by a diamond; the line stops at the beginning of the diamond.

Figure
showing decorations for the arrowheads of links connecting square
nodes. The horizontal link and the vertical link connect to the same
target node from different source nodes. A small circle decoration
caps an end of the link connecting the horizontally-aligned nodes,
and abuts against the target node. The link itself extends to the
middle of the circle decoration. An open diamond decoration caps an
end of the link connecting the vertically aligned nodes, and also
abuts against the target node. This link does not extend beyond the
start of its diamond arrowhead decoration.

Two decoration arrowheads

The following code example shows the styling rules used to generate the node, links and arrowheads.

Decorations as arrowheads on links to a node

/////////////
// A very simple node
node {
  class                  : ilog.views.sdm.graphic.IlvGeneralNode
  fillColor1             : pink;
  foreground             : gray;
}

////////////
// Link definition

link {
  class                  : ilog.views.sdm.graphic.IlvGeneralLink;
  oriented               : true;
  decorations[1]         : @=arrow; // see Subobject#arrow
  decorationPositions[1] : 1;
  decorationOptions[1]   : 'DECORATION_OVER|DECORATION_HALF_RETRACT_AT_END';
  arrowMode              : ARROW_DECORATION;
  label                  : @id;
  lineWidth              : 1.5;
  endCap                 : CAP_BUTT;
  foreground             : black;
}


Subobject#arrow {
  class                  : ilog.views.sdm.graphic.IlvGraphicFactories$Ellipse;
  IlvRect                : 0,0,10,10; // a circle
}

///////////////
// The vertical link inherits from "link { ... }" rule, and 
// overwrites some options

#link2 {
  decorations[1]         : @=arrow2; // see Subobject#arrow2
  decorationOptions[1]   : 'DECORATION_OVER|DECORATION_FULL_RETRACT_AT_END';
}

Subobject#arrow2 {
  class                  : ilog.views.sdm.graphic.IlvGraphicFactories$Marker;
  IlvRect                : 5,5,5,5;
  type                   : 2; // a diamond
}

Current section

Customizing general links in the style sheet