Let’s consider the common scenario in which the user draws a rectangular ROI on an image, as shown below.

This doesn’t look terribly complicated. After all, it really just consists of an image, a main rectangle, eight small rectangles, a dotted line and some text. The simplest way to represent what we see here is to stick all of those objects into a flat, linear list. But if we were to do that, we would quickly realize the limitations of such an approach. For example, what if we wanted to reuse the callout in some other context to, say, label a line instead of a rectangle? Or what about the resizing handles? What if we wanted to reuse those with a different shape? Would we really want to rewrite callout and resize handle code for every type of interactive graphic we want to add? The problem with this approach is that it’s missing the fundamental concept of grouping. And it is grouping that the CompositeGraphic class described above allows you to do.
The tree structure below shows how what is seen in the screenshot above is represented in the viewer (the application and domain layer composites have been excluded from the tree for simplicity). All of the green nodes are CompositeGraphics, whereas all the blue nodes are primitive objects, such as images, lines and rectangles. (Note how all the blue nodes are leaves in the tree.) This representation is far more powerful than a simple linear list because we are able to group Graphics in a logical way. Here are few things that are made possible with this structure:
| 1. | The ControlPoints are grouped into two logically independent sets – one for the diagonal controls and one for the orthogonal controls. Each can be reused separately on another rectangle-like graphic without requiring the other. |
| 2. | All the ControlPoints can be turned off simply by toggling the Show property on the ControlGraphic. We do exactly this when the ROI loses mouse focus; the ControlPoints are made visible again when the ROI regains focus. |
| 3. | The RoiCalloutGraphic can be reused in some other context. |
| 4. | Because GrayscaleImageGraphic and RoiGraphic are children of CompositeImageGraphic, changing say, the zoom of CompositeImageGraphic automatically changes the zoom of its children. (A more thorough discussion on spatial transform is given here.) |