think-cell technical report TC2003/01 A GUI-based Interaction ...

4.3 Specifying the User Interface INTERACTION CONCEPT
composition is snapped to the regular grid or to other shapes, or is simply moved
pixelwise. In any case, all sizes, proportions and relations of the participating shapes
remain untouched.
The original PowerPoint paste operation doesn’t allow the user to specify the
paste location. Objects from the clipboard are inserted at a default location: Shapes
that stem from a different slide are inserted at their original location while shapes
that originate on the same slide are placed with a little offset to the right and to
the bottom.
For insertion into the smart grid I decided that move and paste should appear
similar to the user: In both cases, a shadow is attached to the mouse cursor that
can be placed with a single click. The shadow indicates where each of the selected
elements would go. This approach is much more appropriate for the smart grid than
the original PowerPoint usage of move and paste, because it allows the elements
to snap to existing gridlines, thus implicitly ensuring alignment with the existing
layout.
In my prototype, a dynamic programming algorithm is used to determine the
optimal placement of multiple elements. The mouse cursor is assumed to be at
the upper left corner of the elements’ bounding box. Based on the mouse cursor
location, each element is bound to appropriate gridlines, if there are any. To achieve
an optimal insertion, elements may be stretched and shrunk. The cost function of
the dynamic programming algorithm ensures that gridlines are matched without
too much distortion of the elements.
Figure 27 shows an example of a composition of elements being moved (or cut
and pasted) together. Thanks to snapping, a somewhat sloppy mouse cursor move-
ment is tolerated. Since the moving elements are of the same types as the shapes
next to the intended placement, there is a very strong preference to match those
shapes’ gridlines. After the insertion, the solver rearranges the smart grid in order
to accommodate for the required size of the inserted elements. The screenshots are
taken from my prototype, but are manually arranged to simulate the behavior of
the solver.
(a) User interaction . . . (b) . . . and the resulting layout (after update
by solver)
Figure 27: When multiple elements are inserted, a dynamic programming approach
ensures optimal fit into an existing layout.
59