Anchor

From Planimate Knowledge Base
Revision as of 11:50, 18 April 2017 by Dave.withnall (talk | contribs)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Planimate Table Views, Viewports and Paint Objects have options to control how they are positioned when the panel they are on changes size. These are known as Anchor Options and can be used in various ways.

Anchoring relates to panels which change size because their Panel Option / Engine / Auto Fit Panel To Window is enabled.

Simple Anchoring

Simple Anchoring involves using the "Anchor Left Edge", "Anchor Top Edge" etc options with the "Group Anchoring" options deselected.

When the panel is resized and the Anchor Edge is selected for an edge, Planimate strives to retain the margin between the edge and the edge of the panel. Hence if two opposite edges of a view are anchored (eg: Left and Right), the object will be stretched.

With this approach, you can not have more than one object in a given row or column stretching its size to accomodate available space since they are unaware of each other.

Group Anchoring

Group Anchoring enables Planimate to manage much more sophisticated model UI layouts. Multiple views can scale in a co-ordinated manner to fit the available window area. Selecting the "Group Anchoring" option for an object enables it to be managed but there are some pre-requisites, detailed below.

Group anchoring works by Planimate determining the closest adjacent object to a given object's edge. If there is no adjacent object, then the edge of the panel is used. Thr group anchor manager then strives to maintain the margins between the objects and the edge of the panel and the objects.

To use group anchoring, the panel must have a minimum panel area set and the panel has to be sized at this minimum size. This enables the anchor manager to track a "base", minimally sized layout from which it then creates a scaled layout.

Using The Layout Manager

To add anchoring to a panel, proceed as follows.

  • In Window menu, ensure "Toggle Disable Auto Resize" is selected (ie: auto resize disabled).
  • Use Panel / Work Area to set the panel to minimum size. The panel work area and the mimium area must be the same.
  • Enable Panel Option / Engine / "Auto Fit Panel To Window". At this time the option should not take effect because of the global option Toggle Disable Auto Resize which overrides it.
  • Create a layout of views on the panel. Paint & Viewports are also supported.
  • Set anchors on single edges if you want to retain a margin or both opposite edges to enable scaling.
  • You can access Anchor Options from the object's context menu or in paint mode by alt-clicking on the center of the object. You can toggle anchors by alt-clicking edges in paint mode. You need to select "Group Anchoring" in the anchor options.
  • The anchors should be shown in Blue. If they are red, it indicates the object does not have Group Anchoring selected.
  • Select menubar Window / Toggle Disable Auto Anchor to enable the panel to adapt the layout to its available area. Select menubar Panel / Resize To Minimum For Layout Editing to revert to the base layout.

The layout manager works well for situations for which it is intended. It has known limitations:

  • reflow of objects is not supported (objects rearranging in 2 axes)
  • it does not attempt to handle situations where changes to one axis create/remove a constraint on the other axis
  • Group anchoring and paint on the same object are not supported

Resizing Proportion

When two or more anchor managed views which can resize are adjacent, extra space is shared between them based on the ratio settings in the Anchor options.

"Group Anchoring X Stretch Ratio" is used for horizontal and the corresponding Y Stretch Ratio option is used for vertical (objects stacked vertically). The defaults for these values are 100.

Planimate uses the ratio between the values to apportion the space, hence two objects each with 100 share the space evenly, objects with 50 and 100 would see the first get a 50/(50+100) share, etc.

Lock To Corner

Sometimes its desirable for an object to act as if its resizeable but not actually change its size. The "Group Anchoring Lock To Corner" setting enables this.

When set non zero, whilst the layout is being calculated the view acts as if it is being resized, then it reverts to its original size, leaving the space it created for itself empty. The non zero value used determines which corner the object collapses back to:

Lock Setting
1 Top Left
2 Top Right
3 Bottom Left
4 Bottom Right = 5 Center within the available space


Size Limiting

The anchor options "Stretch X Limit" and "Stretch Y Limit" can be used to impose a limit on how large an anchor managed object can become. After this limit, additional pixels are allocated to other resizeable objects, if available, otherwise they will be added to the right hand side margin of the right/bottom most resizeable object.

Generally the size limit values will be zero or a positive number specifying pixels. For table views, a special case is supported.

Auto Sizing For Table

Anchor managed table views support auto resizing until they reach a size where all columns (for horizontal) or rows (for vertical) are visible, hence there is no need for the table to use extra space. This auto sizing can be easily enabled by setting the Stretch X Limit to -1 (for horizontal/column) and likewise for the Y/rows using Stretch Y Limit. The table will then automatically limit its size depending on its current contents. Extra content may be added to the table after display so space is always left for a scrollbar.

Anchor Group And Parent

Using numbered anchor groups and paint object parents, very complex layouts of objects within objects can be created. For example, a region in a UI might contain a number of buttons. The region can be represented in the overall layout by a parent paint object, then the buttons can be laid out based on that paint object.

The "Group Number" anchor setting sets the group within which a given anchor managed object is processed. Planimate starts by computing the laout of all group 1 objects, then the next highest group (if any) and so forth.

The group number feature is useful when used in conjunction with the Parent Paint ID value. This value is looked up in the Paint Label List and enables a paint object to provide the bounding edge for one or more anchor managed object, instead of the panel.

This is used as follows. A bounding frame for a user interface area is managed by a paint object in Group 1 which is assigned a Paint ID using the paint label list. Within this area are added buttons that are configured to all be in Group 2, with a Parent Paint ID set to the bounding paint object's ID. The manager will then take care of the layout.

Note that the Parent Paind ID must be an index to a paint object which is on the same panel and which has a LOWER group number than the object referring it. Otherwise the setting will be ignored by the anchor manager.

Examples

EXAMPLE NOTATION:

 +-------+
 |   1   |
 +-------+
A box, sort ordinal 1, eg: a paint rectangle

 +------+
 |  1   A
 +------+
A box with an anchored right side.

 +-------+ +-----+
 A   1   A |  2  A
 +-------+ +-----+
Box 1 is anchored to the left and right, box 2 is anchored to the right.
Box 1 can stretch, box 2 cannot.

Refer to Group Anchor Demo model, select paint mode (Ctrl-P) to see the anchors.

EXAMPLE 1

  +------+ +-------+
  |  1   | |  2    A
  +------+ +-------+

Behaviour:As the panel expands, object2 moves right to keep the margin to
the panel's right border. A gap opens up between object1 and object2.

EXAMPLE 2:

  +------+ +------+
  |  1   | A  2   A
  +------+ +------+

Behaviour: As the panel expands, object2 stretches, keeping its left position
to object1 constant. object1 doesn't change.

EXAMPLE 3:

  +------+ +-----+
  |  1   A A  2  A
  +------+ +-----+

Behaviour: As the panel expands, object2 stretches. Its left position doesn't
change meaning object 1 doesn't need to move and the result is the same as
example 2.

EXAMPLE 4:

  +-----+ +-----+
  |  1  A |  2  A
  +-----+ +-----+

Behaviour: As panel expands, object2 moves to retain distance to the panel
right side, object1 moves to retain its distance to the LHS of object2, ie:
both objects follow the right panel margin with the distance between them and
the right margin maintained.

EXAMPLE 5:

 +-----+ +-----+                   +-----+ +-----+ +-----+
 A  1  A A  2  A   can extend eg:  A  1  A A  2  A A  3  A
 +-----+ +-----+                   +-----+ +-----+ +-----+

Behaviour: As the panel expands, the additional space is shared between object1
and object2 (and object3 etc) with the margin between them remaining constant.
Percentage values on each object control the sharing ratio.

EXAMPLE 6:

 +-----+ +-----+ +-----+
 A  1  A |  2  A A  3  A
 +-----+ +-----+ +-----+

Behaviour: As the panel expands, the extra space is shared between object1 and
object3, object2 retains its size and margins to the adjacent objects.

EXAMPLE 7

 +-------------+ +-----+
 A   1         A |     |
 +-------------+ A  4  A
 +-----+ +-----+ |     |
 A  2  A |  3  A |     |
 +-----+ +-----+ +-----+

Behaviour: As the panel expands, 1 and 4 stretch, apportioning the extra space
according to their percentages. 3 shifts to retain margin to 4 without stretch.
2 stretches to keep distance to 4.

NOTE:the ratio of 2 is irrelevant as the ratio of 1 and 4 establishes
4 first. 3 gets updated by 4 due to recursion. 2 is updated by the main
loop, last.


EXAMPLE 8

          +----------+ +----+
          |   1      A |    |
          +----------= |    |
              +------+ A 3  A
              A  2   A |    |
              +------+ +----+

Behavour: Object 1's fixed width means Object 2 is allocated all
additional space as 1/3 are processed first.
Object 2 hence ends up fitting itself to the space to the left of 3's edge.

EXAMPLE 9 - both X and Y - the numbers are (Horizontal,Vertical) ordinals

 +-----------A--------------+  +--A--+
 |                          |  |     |
 A         1,1              A  | 8,2 A
 |                          |  |     |
 +-----------A--------------+  +-----+
 +------A-------+  +-A---+ 
 |              |  A 3,4 |
 |              |  +-----+
 |              |  +--A---+  +--A---+
 |              |  A  4,5 A  A 6,6  A
 A      2,3     |  |      |  |      |
 |              |  +--A---+  +--A---+
 |              |  +--A---+  +--A---+
 |              |  A 5,7  A  A 7,8  A
 |              |  |      |  |      |
 +-----A--------+  +--A---+  +--A---+

Behaviour Horizontal: (H numbers)
As panel width increases 1 increases width with 2 staying at top right corner.
2 is fixed width and establishes the left edge for for 3,4,5.
3 stays same size.
4 and 6 will share the increase
6 and 7 will share the increase

Behaviour Vertical: (V numbers)
1 and 3 will apportion extra height
4 tracks bottom edge of 1
5 and 7 apportion extra height as do 6 and 8 but the space they get was set by 3.
lose alignment, 8 needs same height as the rest.

EXAMPLE 10 - both X and Y - the numbers are (Horizontal,Vertical) ordinals

 +--------A--------+  +--------A--------+
 |                 |  |                 |
 A       1,1       |  |                 |
 |                 |  |                 |
 +--------A--------+  A      4,2        A
 +-----------------+  |                 |
 |                 |  |                 |
 A       2,3       |  |                 |
 |                 |  |                 |
 +--------A--------+  +-----------------+
 +---------A---------+
 |                   |
 A        3,4        A
 |                   |
 +---------A---------+

Behaviour Horizontal: (H numbers)
1 and 2 stay anchored to the left and are fixed width
3 will expand to the right

Behaviour Vertical: (V numbers)
As height increases 1 and 4 will expand, apportioning space with
3 being kept between them with the margins above and below retained.
2 is fixed height as otherwise it would collide with 4's horizontal expansion