Interactive custom content

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.

What's in the code?

• 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 depends 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 exposure 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 are drawn during animations.