UI Patterns and Techniques

Composite Selection


From Visual C++

Use when:

You're building a graphical editor which may contain composite objects -- things that can be moved and otherwise manipulated, but happen to contain other objects. This is especially common in GUI builders.

You want the user to be able to "lasso" child objects and create new ones inside the composite, but that means clicking on the composite's background. Should that select the composite, or not? The mouse click has two interpretations, reflecting the double role -- parent and child -- that the composite is playing. What to do?

Why:

Obviously one of these interpretations has to win out; the user needs to be able to predict what's going to happen when they click the mouse on the composite's background! Two different kinds of selection -- one for composites, and one for "leaf" objects that are not composites -- solves the problem (albeit in a rather brute-force fashion). The two selection modes are similar, but respond differently to mouse events like clicking and dragging.

How:

Visual C++ seems to have the most elegant solution to this problem. Its group boxes (which, in fact, are not really composites, but that's not relevant to the discussion) can't be selected unless the user clicks near the edge of the object. Mouse clicks inside the object operate on the contents, either by starting a lasso or by selecting a contained object. Dragging the composite is also done via the edges; resizing can only be done via the eight selection handles. This puts some limits on direct manipulation, but it's a simple mechanism, and easily understood once you know what's going on.