## 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 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.