Roassal elements (and Trachel shapes) may react to user events such as mouse clicking, mouse moving and key pressing. Making a visualization interactive is important to enable the following: navigate within a data set, drill-down/up, details on demand without overloading a visualization.
Roassal offers a number of interaction, implemented as a subclass of
Elements may be draggable using the interaction
RTDraggable and a view may be draggable using
RTDraggableView. Interaction may be set on one element or a group of elements, using the message
Consider the following example:
Interactions may be added at anytime to the element and the view.
es @ RTDraggable may be located before or after adding the elements in the view.
A popup is a contextual information that appears when the mouse is above an element. The information is removed when the mouse leaves the element. Adding the expression
es @ RTPopup makes the element react to mouse movements.
Without being configured, as it is the case with the expression
es @ RTPopup, the popup content is directly generated from the model behind the pointed element. For example:
Each circle represents a number. Pointing to an element using the mouse open a small number that indicates the pointed number. The popup may be configured in a number of ways.
For example, the following example shows different combinations of popup configuration:
A popup supports multi-lined text. For example, you may insert a carriage return character in the
A fixed popup is like a popup, but it is located at the bottom left of the window. This is useful when the popup embeds a long text, or the popup negatively interferes with the visualization.
RTFixedPopup is a subclass of
RTPopup, as a consequence, you can simply replace the use of
RTFixedPopup to have a fixed popup.
Examples given previously in this chapter use text as a popup content. A popup does not necessarily need to render text and may render any arbitrary visualization.
Consider the following example (Figure 4.1):
group: takes as argument a block with two arguments. The first argument, called
aGroup in our example, receives an empty group of elements. The block is intended to add elements in the
aGroup variables. Those elements will be used by the popup. Layout may be applied.
Edges may be also added. Consider (Figure 4.2):
The edge builder is set with
group as the view. This is where the edge builder will look into elements to link. Methods alternative to
background:group: may be used, such as
group: if the background is not necessary. A title is added to the popup by using
named:background:group: as in:
Reacting to the mouse movement by highlighting related elements is a frequent need. The interaction class
RTHighlightable is a flexible interaction to highlight particular elements. Consider the following code snippet (Figure 5.1):
When the mouse enters an element, the color of that element changes. When the mouse leaves, the original color is restored. The default highlighting color is blue. It can be set using the
color: message. For example, the following instruction
es @ (RTHighlightable new color: Color pink) set the color to pink.
A set of object models or Roassal elements may be provided using
highlightElements:. Consider the second version of the previous script:
Object models greater than the one on which the mouse is above are highlighted.
highlightElements: accept a one-argument block. The argument block as to return a collection of object models or a collection of Roassal elements, respectively.
Labels and edges may be added as a kind of popup. Consider the following example (Figure 6.1):
RTShowLabel are used.
RTShowEdge defines some edges connecting to
dependentClasses using the shape provided to
RTShowLabel temporarily gives a label to related elements. In the example given above, the labels are located on the
top of an element.