Page Layouts!
This is a big update and a milestone for this plugin. After trying a number of different approaches I've finally implemented the page layout system, and got it functioning so that it is both easy to understand and use.
There's number of different aspects to the system which i will try to explain.
Content Boxes
Firstly I have added a new object called a "content box". These boxes divide up the page and hold the various menu elements that will be added, like text, images, scroll bars etc.
The actions are split into 3 parts.
Create Content Box (set its name, position, size etc).
Set Content Box Layout (padding, growth, alignment etc).
Set Content Box Style (colour, border, corner roundness etc).
Most of the time you will probably want content boxes to just be invisible so only their child menu element is shown, but they can have a colour, a border, corner roundness, transparency etc if say you want a border around your text.
-> EasyMenu: Set content box "Box1" style: bg "255,255,255,1", border "200,250,120,1" (width 5), radii 20,0,20,0
Flow system
The system uses my own unique version of the popular flow approach that many UI libraries use.
The main defining quality of a flow system being generally objects are positioned from left to right in the order they are created, like typing words in a word processor.
So a content boxes position is relative to the position of the last content box created before it on the event sheet.
The first content box added to a page is always relative to 0,0.
Here we have 3 content boxes with padding.
Notice how as the page size changes their positions stay fixed.
A lot of the time you will probably have a fixed page size, so you can arrange your elements without much worry, however what to do when the page size changes?
Alignments
In order to anchor a content box to page we set each boxes alignment to either Left (default), Center, or Right.
Here are the 3 boxes, left, center and right aligned in order.
Notice how they are now anchored as the page size adjusts.
The layout system enforces a strict alignment logical flow order,
Left -> Center -> Right
ensuring that if you add a Left box after a Center box, it simply "promotes" itself to Center and stacks naturally next to its neighbour, preventing any overlap/collision bugs.
Here we have Box 1 centre aligned, Box 2 right aligned, and Box 3 left aligned, promoted to right aligned to maintain the flow.
Also notice how because Box 1 has centre, it takes into account the combined sizes of boxes 2 and 3 with padding.
Below we can see Box 1 with left aligned and Boxes 2 and 3 right aligned, which fits much better.
Grow
Content boxes also have a "grow" property. It allows a box to fill the area between itself and its neighbours.
Here all boxes are left aligned, and all have grow enabled.
Since all boxes have grow enabled, they share the grow space equally.
If you want a specific box to grow more proportionally to others, you can change its "growth ratio".
Bellow Box 1 has grow ratio set at 0.2, Box 2 in the middle is set to 1.5, and box 3 is set to 0.5. (Removed padding to help see). The result is Box 2 in the middle grows more than the others, with box 1 growing the least.
In this next example Box 2 has growth disabled maintaining its set width and so gets sandwiched in between the other 2 as they grow.
Cuts
You can also visually join content boxes together by cutting specified sides. This allows you to create the effect of box containing multiple elements.
Here Box 1 has its right side cut, Box 2 has grow enabled and its left and right side cut, and Box 3 has its left side cut.
The Y axis
When you create a content box you specify if its position continues across from the last box, or if it starts on a new row beneath.
And for each page you specify the layout mode type.
"Carriage Return", which positions the box based on the lowest point of any box on the row above.
In the example below Box 2 has grow across and down enabled, with Box 4 on the row below. As the page size changes Box 4 is pushed down.
"Masonry" mode is much smarter and plays Tetris allowing boxes to position themselves in areas where they simply fit.
Below is the same layout, but now Box 4 positions under Box 1 since Box 2 doesn't obstruct it.
In this final example Boxes 1 and 4 now both have grow across enabled, and Box 4 grow down enabled, which begins to show how complex layouts can be achieved. The flow order of rows is top down, so Box 2's grow down takes priority over Box 4's grow across.