Shape Alignment and Position - Manipulating Shapes

4.4 Manipulating Shapes

4.4.3 Shape Alignment and Position

Each handlehis attached to at most one gridline in each direction, i.e., corner handles are attached to one x- and y-gridline. By dragging a handle h and thus the attached gridline the user can express different things. Figure 4.12a shows how the left gridline gl of the object stack is dragged to the left so that it snaps to the table. Assume the handle is moved to coordinate xand let the rightmost gridline of the table be g₂. The user has expressed two different things at the same time: Gridline gl is moved to location x and gl

is now identical tog₂.

Quisque diam sapien, auctor sit amet, lacinia quis, eleifend sit amet, urna.

Praesent pretium ullamcorper urna.

Praesent nulla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut vestibulum neque ut justo. Ut vitae libero ac tellus viverra fringilla. Class aptent taciti sociosqu ad litora torquent per conubia n o s t r a , p e r i n c e p t o s h i m e n a e o s . Pellentesque mi orci, auctor vitae, fringilla eu, rhoncus sit amet, arcu. Pellentesque lacinia venenatis nulla. Sed arcu. Aliquam fringilla lobortis neque. Morbi commodo quam id urna. Donec pretium suscipit

Praesent pretium ullamcorper urna.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices p o s u e r e c u b i l i a C u r a e ; U t vestibulum neque ut justo. Ut vitae libero ac tellus viverra fringilla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, p e r i n c e p t o s h i m e n a e o s . Pellentesque mi orci, auctor vitae, fringilla eu, rhoncus sit amet, arcu.

Pellentesque lacinia venenatis nulla. Sed arcu. Aliquam fringilla lobortis neque. Morbi commodo quam id urna. Donec pretium suscipit dolor. Curabitur eget magna eget neque bibendum ullamcorper urna. Praesent nulla.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices p o s u e r e c u b i l i a C u r a e ; U t vestibulum neque ut justo. Ut vitae libero ac tellus viverra fringilla.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, p e r i n c e p t o s h i m e n a e o s . Pellentesque mi orci, auctor vitae, fringilla eu, rhoncus sit amet, arcu.

Pellentesque lacinia venenatis nulla. Sed arcu. Aliquam fringilla lobortis neque. Morbi commodo quam id urna. Donec pretium suscipit dolor. Curabitur eget magna eget neque bibendum

Figure 4.12: (a) Dragging a gridline changes gridline relations or (b) dragging a gridline changes gridline locations.

Changing the relation between gridlines, i.e., unifying g_l and g₂ into a single gridline, changes the way gap constraints are collected. Before, there was a gap between g₂ and g_l that kept the table and the object stack sepa-rated. Now, there can be no gap between g₂ and g_l anymore, meaning that the table will directly touch the object stack.

Figure 4.12b shows the alternative result if gridlineg_l is fixed at location xwithout unifying g_l and g₂. The object stack has been extended to the left because g_l was moved. The relations between the gridlines have remained unchanged, i.e., there is still a gap between gridlinesg₂ and g_l, and therefore the table has moved left. In a constraint-based layout system, the user should rarely need to explicitly fix a gridline’s position because the gridline positions should be calculated by the layout system.

When a handle is moved, we distinguish two different modes of specifying gridlinerelations and gridline locations as detailed in the interaction princi-ples on page 47. If G_S = ^S_s∈Ss.G_x/y are the gridlines bound to the shape selection and G are the gridlines attached to unselected shapes, the default drag mode maintains the relations of gridlines in each set G_S and G but the relations between the two sets may be changed. If the Alt-modifier key is pressed while a handle is moved, the user changes the interaction mode.

In this mode, only the position of gridline g_l is fixed. All gridline relations remain constant.

Aligning Gridlines

Quisque diam sapien, auctor sit amet, lacinia quis, eleifend sit amet, urna.

Praesent pretium ullamcorper urna.

Figure 4.13: Selected gridlines move along when the dragged gridline passes them.

The selected shapes s ∈ S ⊆ S are attached to a subset of all gridlines in each dimension G_S =^S_s∈Ss.G_x/y ⊆ G_x/y. On each gridline g_i ∈s.G_x/y of each shapes∈Swill be at least one handleh, as in the examples of Fig. 4.13.

The example shows how the top-most handle h is dragged downwards and snapped to gridline g₀ at the bottom of the table. The handle snaps to gridlineg₀ and its occupied spans are highlighted to visualize the snapping.

4.4. MANIPULATING SHAPES 75 If the handle is dropped in this situation, gridlines g₀ and g_t will be merged and thus top of the object stack will be aligned to the bottom of the table.

While the handlehis dragged downwards, it passes gridlineg_c. According to the principle explained above, all gridline relations inside the set of selected gridlines G_S remain constant. Thus, when g_t moves downwards, it collects all gridlines it passes and gridlineg_cis moved downwards too, only separated by an infinitesimal . Gridline g_b is of course still at its previous position because its relation to any other gridline in G_S has not yet changed. This allows the user to express with a single drag operation that, everything else being equal, two gridlines should be aligned to each other.

g_l g_c g_r

Figure 4.14: Internal gridline g_c moves with the dragged gridline g_r.

When a gridline is dragged, all other selected gridlines are collected and moved too once they are passed by the dragged gridline. For shapes that have internal gridlines like the pentagon does, this functionality alone is not enough. A pentagon has three gridlines in horizontal direction as Fig. 4.14 shows. When the gridlineg_rat the pentagon tip is dragged to the right, grid-lineg_cshould follow so that the length of the pentagon tip remains constant.

Therefore Alg. 10 begins by collecting the set F of internal gridlines to-gether with their move factors. In the pentagon example, if dragged gridline g is g_r, F would contain the pair (g_c,1), meaning that gridline g_c moves in parallel with gridline g_r.

In a selection of multiple shapes, only the gridlines of shape sowning the drag handle are considered, to avoid conflicts between different shapes that would like to move gridlines by a different degree. Then, while the user keeps dragging the handle, the gridline location (v, G_v) is computed in the loop of lines 7-9. As in the previous algorithms, v ∈R is the snapped location and G_v the potentially empty set of gridlines at valuev that the user snapped to.

When the user has finished dragging, the input to procedureInsertGridlines (Alg. 5) is computed, the set of gridlines G⁰ and of snapped gridlines X.

Algorithm 10: Dragging a handle to change gridline alignment Input: The dragged handle h with the attached dragged gridlineg

and shapes and all selected shapes S.

Output: Moved gridlinesG⁰ with destination positions D and snapped gridlines X

1 begin

2 F ← ∅

3 foreach g⁰ ∈s.G_x/y do

4 // collect all gridlines of s that move along with g by factor f F ←F ∪(g⁰, f ∈R)

5 end

6 (v, G_v)←(g.v,∅)

7 while h is dragged do

8 n← current mouse position in x-direction

9 (v, G_v)←ClosestGridlines(G_x/y, n,snap tolerance constant)

10 end

11 G⁰ :={g₀⁰, . . . , g⁰_n} ←^S_s⁰_∈Ss.G_x/y

12 V :={v0, . . . , vn} ← {g⁰₀.v, . . . , g⁰_n.v}

13 D←V

14 X :={x₀, . . . , x_n} ← {x_i | if g_i⁰.v =g.v∧G_v 6=∅ then x_i ←g_v ∈ Gv, else xi ← ◦}

15 foreach g_i⁰ ∈G⁰ with (g_i⁰, f)∈F do

16 di ←g_i⁰.v+f ·(g.v −v)

17 end

18 foreach g_i⁰ ∈G⁰ with (g_i⁰, .)6∈F do

19 find largest k and smallest l,k < i < l, with (g⁰_k, .),(g_l⁰, .)∈F

20 if g⁰_k.v ≤g⁰_i.v∧d_k > g⁰_i.v then

21 d_i ←d_k

22 else if g⁰_i.v ≤g_l⁰.v∧g_i⁰.v > d_l then

23 d_i ←d_l

24 end

25 end

26 InsertGridlines (V, X, D)

27 MergeGridlines(G_v)

28 end

4.4. MANIPULATING SHAPES 77 If G_v is not empty, all gridlines with the same value as dragged gridline g are snapped to the gridlines G_v. The calculation of the set of destination values D is a bit more complicated. Calculating the destination values for the gridlines in F is straight-forward. For all other gridlines g_i⁰ ∈G⁰, the (at most) two gridlines g_k⁰, g_l⁰ represented in F and surrounding g_i⁰ are searched.

It holds that g_k⁰.v ≤ g⁰_i.v ≤ g_l⁰.v and d_i is set so that d_k ≤ d_i ≤ d_l holds.

In other words, all gridlines that are moved directly by dragging the handle are in F. Their position is calculated first and afterwards all other gridline positions are computed such that the order of all gridlines in G⁰ remains constant.

Moving Gridlines

If the user drags handle h and simultaneously keeps the Alt-key pressed, the position of gridline g is fixed to a specific screen coordinate. Alt is used frequently as a modifier key. In PowerPoint, e.g., it can be used while dragging to disable the snapping. Here, it is used in a similar manner to disable the snapping to gridlines. The visual feedback is exactly the same as in Fig. 4.13. Now, assume handle h is dragged to some value v. Simply setting g.v ← v may change the relation of gridline g to all other gridlines in G_x/y. Setting the gridline location must maintain all gridline relations however. Adding the constraint g.v = v to the constraint set achieves this elegantly. The layout solver will maintain all relations between gridlines that have been defined previously. The layout solver may not be able to fulfill the constraint however, in which case it will be dropped and the drag operation will have had no effect.

Formally, when handlehis dropped at valuev, a new gridlineg⁰ is created withg⁰.v =v. Then procedureTryMergeIntois called, shown in Alg. 11, that manages the partitioning of gridlines to be mergedC_Mergethat will be passed to the layout algorithm.

Im Dokument Sketching Slides (Seite 85-89)