You can use the onGroupMouseMove event combined with
the onGroupMouseDown and
onGroupMouseUp events to react to user interactions
with custom content drawn in the groupContentDecorator.
This example draws and reacts to user interactions with the "up" and "down" arrows that increase and decrease the weight of individual groups.
Using groupLabelDecorator to display
the group's weight as its label.
Using 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.
Using 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 xAbsolute and yAbsolute coordinates provided by the event, which
are relative to the visualization area and independent of zoom, pan and expose transformations.
Using onGroupMouseDown and
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.
Using the update() method to reflect group weight
changes in an animated way.
Setting wireframeLabelDrawing and
wireframeContentDecorationDrawing
options to always so that both labels and custom content is drawn during animations.