The dev branch of the premium version has just been updated to version 1.2.3 and includes a new UI manager.
The new UI system (UI manager) allows new UI elements (IgeUiElement instances) to be created, styled and interacted with in a similar way to the HTML DOM except it is all happening inside the canvas element with NO DOM interaction at all.
For instance, you can define a style using ige.ui.style():
Code: Select all
ige.ui.style('.div', {
'backgroundColor': '#000000',
'borderColor': '#ffffff',
'borderWidth': 1,
'borderRadius': 5,
'width': 300,
'height': 24,
'left': '10%',
'top': '10%',
'bottom': '10%',
'right': '10%'
});
Code: Select all
var div1 = new IgeUiElement()
.id('div1')
.styleClass('div');
You can also specify style states e.g.:
Code: Select all
ige.ui.style('.div:hover', {
'borderColor': '#00ff00'
});
You can also specify styling via an id to target individual elements using a #:
Code: Select all
ige.ui.style('#div1:focus', {
'borderColor': '#ffff00'
});
Observant users will also note that you can now use percentages in the top, right, left and bottom style values as well as calling those directly on IgeUiEntity instances (which IgeUiElement extends) e.g.:
Code: Select all
var uiEntity = new IgeUiEntity()
.left('10%')
.right('10%');
If you set both a left and right value then width is ignored. Both bottom and top means height is ignored.
You can turn off any value by passing null e.g.:
Code: Select all
var uiEntity = new IgeUiEntity()
.left('10%')
.right('10%');
// Now switch off the right value
uiEntity.right(null);
Further updates are on their way to allow elements to "flow" like the HTML DOM so they will effectively auto-position themselves inside a parent based on the dimensions of the elements and their parent element.
All of this is available in the dev branch on the premium repo.
P.S. the IgeUiEntity class has been left mostly alone to provide non-breaking compatibility with existing code.
Please give it a go and let me know if you see any issues arise from the code or changes to IgeUiEntity.
Thanks!