Developing with the SDK > Using CSS Syntax in the Style Sheet > Customizing General Links in the Style Sheet > Controlling Arrows

Controlling Arrows

INDEX Gray bullet PREVIOUS NEXT

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

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.

images/generallink9.gif

Figure 3.12 Arrowheads and 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 ; 
}

Code Sample 3.7 Basic Link Properties and Three Ways to Show Direction

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:

Figure 3.13 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.

images/decorationarrow.gif

Figure 3.13 Two Decoration Arrowheads

Code Sample 3.8 shows the styling rules used to generate the node, links and arrowheads. 

/////////////
// 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
}

Code Sample 3.8 Decorations as Arrowheads on Links to a Node
Copyright © 1987-2007 ILOG S.A. All rights reserved.   Documentation homepage.    Legal terms. PREVIOUS NEXT