GUI components planning help

[Accname]

Hi guys.

As you already know I am working on a GUI toolkit.
I was thinking a lot about this the last couple of days and I have gotten far enough to have a working prototype. But before I continue my work I would like to talk about my approach and maybe some of you could point me in a better direction.

Heres the basics:

• Entire GUI consists of components
• Components are stored in a tree-like data structure which I call component tree (arent I imaginative?)
• Components know their parent (which is also a component) and their children (a collection of components) which migth be empty. Root component is the only one that has no parent
• Every parent enforces a viewport (bounding box) upon its children
  • the viewport of a child must be contained completely within the viewport of its parent
  • a component can only be drawn within its parents viewport
  • a component should only detect mouse clicks within its parents viewport

Thats it so far for the concept; I am pretty happy with that as it is.
Now comes the tricky part I am not entirely sure about.

For the implementation of the basic Component class I am currently using 5 rectangular areas internally. Those 5 are:

• relativeBounds
  • The x, y of this rect determines the position within the viewport of the parent
  • The width, height of this rect determine the preferred size that this component would like to use
  • This area can be set by the user from outside or by the component from inside
• actualBounds
  • This area is calculated automatically and the user can not change it
  • It represents the actual position and size inside the application window
  • This is supposed to be used for drawing this component to screen
• visibleBounds
  • This area is calculated automatically and the user can not change it
  • This area is defined as the intersection between the actualBounds and the parents viewport
  • It is supposed to be used when checking whether the mouse is within a component or not
  • By default the visibleBounds should be equal to the actualBounds unless the parent component has some kind of scrolling
• preferredViewport
  • The x, y of this rect determines the position within the viewport of the parent
  • The width, height of this rect determine the preferred size that this component would like to use as a viewport for its children
  • This should usually be set by the component itself
• actualViewport
  • This area is calculated automatically and the user can not change it
  • This area is defined as the intersection between the preferredViewport and the parents viewport
  • It is supposed to be used as the viewport for the children

So I have 3 rects that are calculated automatically; 1 which is supposed to be defined by the component, and 1 that is either defined by the user, the component or the layout of the parent.

If you take a button for an example, then it could be rendered like this:

    protected void render() {
        Rect bounds = getActualBounds();
   
        float x = bounds.getX();
        float y = bounds.getY();
        float w = bounds.getWidth();
        float h = bounds.getHeight();

        // Outline
        renderRect(x, y, w, h, Color.BLACK);
        // Center
        renderRect(x + 2,  y + 2, w - 4, h - 4, Color.GREY);
    }

Here the actualBounds are used since this area represents the button in screen coordinates.
For updating the button we can do things like this:

    protected void update(Mouse mouse) {
        if (mouse.triggerLeft()) {
            if (getVisibleBounds().contains(mouse.getX(), mouse.getY())) {
                // trigger!
            }
        }
    }

Here we use the visibleBounds because we dont want the button to be pressed if its not visible; this could happen if the button is within a Scroll Pane and the pane is scrolled away from the button.

For the children of our button (that would be the label of the button, or a picture if we want, or anything) we define the preferredViewport like this:

    protected void onBoundsChange() {
        Rect bounds = getActualBounds();
        float x = bounds.getX() + 2;
        float y = bounds.getY() + 2;
        float fx = bounds.getFinalX() - 2;
        float fy = bounds.getFinalY() - 2;
        float w = fx - x;
        float h = fy - y;
   
        preferredViewport.set(x, y, w, h);
    }

This way the label of the button could never go over the border of the button which is 2 pixels in width in this example.


What do you guys think about this? Is this too much? Too little?
My biggest concern is, that the user can change the preferredSize (that is the relativeBounds) from outside while, at the same time, the preferredSize can also be changed by layouts and other components.
What if a layout is changing the preferredSize of a component and then the user changes it too? Should I have another rect that is an "enforced preferred size" when layouts are used?

Thanks for the help guys.