This example draws and reacts to user interactions with the "up" and "down" arrows that increase and decrease the weight of individual groups.
groupLabelDecorator to display
the group's weight as its label.
groupContentDecorator to draw
arrows below and above the group's label. Opacity of the arrows depend on whether the mouse pointer is
over the containing group and the arrow's bounding box.
onGroupMouseMove event to detect when
the mouse pointer is over the bounding box of some of the arrows. Hovered-over arrows are rendered with
increased opacity to indicate that they are active user interface elements. The key element of that code
is using the
yAbsolute coordinates provided by the event, which
are relative to the visualization area and independent of zoom, pan and expose transformations.
onGroupMouseUp events to detect mouse button
clicks. If the click is registered when the mouse pointer is over the bounding box of some of the arrows,
group's weight gets modified.
update() method to reflect group weight
changes in an animated way.