Controlling link decorations

> > > > >

IlvGeneralLink allows you to place an IlvGraphic object onto a link, at a relative position. You can place the decoration above the link or beside the link (the default).

Note that the syntax to enter the decorationPosition value is an array. You can enter all the values at once as a comma-separated list of values or enter the array elements one by one.

Another array property, decorationOptions , alters the way in which the decoration is displayed. This property is a bit set of values, so you can specify several options at the same time using the vertical bar operator | as follows:

DECORATION_NOTHING : Means default values (zoomable, no rotation, no animation).
DECORATION_FIXED_SIZE : If set, the decoration will not zoom.
DECORATION_ANIMATE : If set, the decoration will move along the link. The speed is defined by the property animateSpeed .
DECORATION_ROTATE : If set, the decoration is rotated to follow the link shape.

When the option DECORATION_ROTATE is set, you can tune the behavior of the rotation angle by combining it, using the vertical bar operator (|), with one of the following options:

DECORATION_PROPORTIONAL_ANGLE : To rotate the decoration proportional to the slope of the link. This may be unsuitable for labels, because if the link is rotated 180 degree, label decorations appear upside down and may be difficult to read.
DECORATION_RIGHT_SIDE_UP_ANGLE : To rotate the decoration by an angle that keeps the decoration right-side up. This can be useful for labels but may be unsuitable for decorations such as arrowheads.

To place the decoration over the link, set the option DECORATION_OVER , then set additional options to control the position of the decoration with respect to the center of the link:

DECORATION_ANCHOR_TOP : Shifts the decoration below the link at the center.
DECORATION_ANCHOR_BOTTOM : Shifts the decoration above the link at the center.
DECORATION_ANCHOR_LEFT : Shifts the decoration to the right of the link at the center.
DECORATION_ANCHOR_RIGHT : Shifts the decoration to the left of the link at the center.

It is possible to mix options: DECORATION_ANCHOR_TOP|DECORATION_ANCHOR_LEFT places the top-left corner of the decoration at the link center. The default behavior places the center of the decoration at the center of the link, and you can apply an offset with the x, y values for the decoration bounding box.

The following figure shows three decorations, one is a label and two are icons on the same link.

Figure
showing two vertically-aligned links with a blue fill color and rounded
ends and joins. A rectangular label decoration with a blue background
and a light blue border shows the word smile in white font followed
by an exclamation point. It is positioned just above the right end
of the top link. The bottom link has two yellow smiley face decorations
adorning it.

Decorations on Links

Decorations on links

link { 
        foreground  : #55BEF3 ; 
        lineWidth   : 10 ; 
        endCap      : CAP_ROUND ; 
        lineJoin    : JOIN_ROUND ; 
        borderWidth : 2 ; 
}

link.top    { 

        decorations[0]      : @#label ; 
        decorationPositions : 0.9 ; 
}

link.center {
        visible : false
}

link.bottom { 
        decorations[0]   : @#smiley ; 
        decorations[1]   : @#smiley ; 
  decorationOptions[0]   : DECORATION_OVER ; 
  decorationOptions[1]   : DECORATION_OVER|DECORATION_ANCHOR_TOP ; 
     decorationPositions : 0.25,0.75  ; 
}


Subobject#label {
        class            : 'ilog.views.sdm.graphic.IlvGraphicFactories$ZoomableLabel' ;
        label            : "smile!" ;
        antialiasing     : true ;
        leftMargin       : 5 ;
        rightMargin      : 5 ;
        topMargin        : 5 ;
        bottomMargin     : 5 ;
        foreground       : white ;
        borderOn         : true ;
        stroke           : @=stroke ;
        strokePaint      : @=borderPaint ;
        backgroundOn     : true ;
        backgroundPaint  : @=bgPaint ;
}

// border is cyan
Subobject#borderPaint {
        class            : ilog.views.sdm.graphic.IlvPaint ;
        color            : cyan ;
}

// background is blue
Subobject#bgPaint {
        class            : ilog.views.sdm.graphic.IlvPaint ;
        color            : blue ;
}

// stroke for the text
Subobject#stroke {
        class            : ilog.views.sdm.graphic.IlvBasicStroke ;
        lineWidth        : 1 ;
}

// smiley icon
Subobject#smiley {
  class         : "ilog.views.sdm.graphic.IlvGraphicFactories$Icon"
  IlvRect       : 0,0,12,12 ; 
  imageLocation : file:smiley.gif ; 
}

Note the convenient property called label that quickly accesses the first decoration implementing the IlvLabelInterface. If no decoration is found, a simple IlvZoomableLabel is created at the first available slot of the current decorations array.

Current section

Customizing general links in the style sheet