Distributing elements
From TaskDepender
(→Design) |
|||
| Line 3: | Line 3: | ||
== Description == | == Description == | ||
| − | + | To create an attractable layout of the dependency diagram, elements can be distributed so that the same amount of space appears between each one. Rather than go to the trouble of pushing and pulling elements until they are distributed evenly, one can arrange the elements in the diagram so that the outermost elements are where they need to be. When that is done, simply select all the elements that need to be arranged and choose one of the following options: | |
{| border="1" cellpadding="3" cellspacing="0" | {| border="1" cellpadding="3" cellspacing="0" | ||
|- style="color:white; background-color:#000000" | |- style="color:white; background-color:#000000" | ||
| Line 11: | Line 11: | ||
|- valign="top" | |- valign="top" | ||
| align="center" | [[Image:Distribute_vertically.png]] || Distribute elements an equal vertical distance from one another. | | align="center" | [[Image:Distribute_vertically.png]] || Distribute elements an equal vertical distance from one another. | ||
| − | |} | + | |} |
== Design == | == Design == | ||
| − | + | When distributing the elements evenly horizontally, the space between to adjacent elements must be equal. To calculate this value, the leftmost edge and the rightmost edge must be determined as illustrated in the example in the figure below: | |
| − | + | ||
| − | + | ||
| − | < | + | [[Image:Distribute.png]] |
| − | + | ||
| − | <\ | + | This gives the total space to occupy. Next the total space occupied by the elements must be calculated. This is done by determining the sum of the widths of all the selected elements: |
| + | |||
| + | <math>W = \displaystyle\sum_{i=1}^N w_i</math> | ||
| + | |||
| + | This is illustrated in the figure below: | ||
| + | |||
| + | [[Image:Distribute_step_2.png]] | ||
| + | |||
| + | Using the fact that for ''N'' selected elements there are ''N''-1 spaces, it can be seen from the figure that the value for the space between two adjacent elements is calculated by determining the difference between the rightmost edge and the leftmost edge minus the sum of the widths and dividing this value by ''N''-1. | ||
| + | |||
| + | [[Image:Distribute_step_3.png]] | ||
| + | |||
| + | Assuming that the space between two adjacent elements is ''S'', then the edge ''x<sub>i</sub>'' of certain element ''i'' must be positioned at: | ||
| + | |||
| + | <math>x_i = s_{i-1} + w_{i-1} + S</math> | ||
| + | |||
| + | with: | ||
| + | * <math>s_{1} = x_{min}</math> | ||
| + | * <math>S = \displaystyle\frac{x_{max}-x_{min}-W}{N-1}</math> | ||
| + | |||
| + | This means that the position of the element is given by: | ||
| + | |||
| + | <math>X_i =x_i + w_i/2</math> | ||
| + | |||
| + | Since the algorithm assumes the elements being ordered by position of the left edges, this additional step must be performed before running the described algorithm. | ||
| + | |||
| + | The same algorithm can be used for distributing the elements vertically, in which case the equations are: | ||
| + | |||
| + | <math>y_i = s_{i-1} + h_{i-1} + S</math> | ||
| + | |||
| + | with: | ||
| + | * <math>s_{1} = y_{min}</math> | ||
| + | * <math>S = \displaystyle\frac{y_{max}-y_{min}-H}{N-1}</math> | ||
| + | * <math>H = \displaystyle\sum_{i=1}^N h_i</math> | ||
| + | |||
| + | and the position of an element given by: | ||
| + | |||
| + | <math>Y_i =y_i + h_i/2</math> | ||
== Implementation == | == Implementation == | ||
