GUI components planning help

Accname

2D-Graphics enthusiast
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:
Code:
    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:
Code:
    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:
Code:
    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.
 
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Jesus4Lyf Jesus4Lyf:
    Hmm, how to summarize... Moved to the USA and got married. Became a professional software engineer and solution lead. Learning Godot for game dev. :)
  • jonas jonas:
    So you are pursuing game dev as a hobby? What industry is your dayjob in?
  • jonas jonas:
    FAANG?
  • Jesus4Lyf Jesus4Lyf:
    Not quite FAANG, less pay for a less hours/stress. Yeah, game dev as a hobby.
  • jonas jonas:
    makes sense. Do we have a hobby game dev subforum to showcase some work?
  • Blackveiled Blackveiled:
    Happy Thursday
    +1
  • The Helper The Helper:
    Happy Thursday!
  • The Helper The Helper:
    TGIF!
  • The Helper The Helper:
    hey tom_mai please do not archive anymore news
  • Ghan Ghan:
    AMD Ryzen 7000 next week :D
    +1
  • The Helper The Helper:
    noice!
  • tom_mai78101 tom_mai78101:
    "hey tom_mai please do not archive anymore news" ----> Got it. What should we do with the "News Archive" subforum?
  • The Helper The Helper:
    I think leave it for real old news that cannot be sorted the reason we had it in the first place was a server issue that we do not have anymore. I don't want to get rid of the archive just not put anything in it for now until we figure it out more
  • The Helper The Helper:
    The side chat has nothing on the discord. it is not possible but the biggest thing on my wish list right now is a sidechat channel on the disord that hooks up to this...
  • Ghan Ghan:
    I've been selected for the Diablo IV beta.
    +1
  • Ghan Ghan:
    Woo!
    +1
  • The Helper The Helper:
    that is so cool
  • V-SNES V-SNES:
    Eh just noticed the new discord section on the side. Looks great!
    +1
  • Blackveiled Blackveiled:
    :( feels bad I can't ever get selected for any beta I sign up for. It's annoying as heck.
    +1
  • The Helper The Helper:
    Hello mgarcia! Happy Monday everyone!
  • The Helper The Helper:
    Happy Tuesday! :)

    The Helper Discord

    Members online

    No members online now.

    Affiliates

    Hive Workshop NUON Dome World Editor Tutorials

    Network Sponsors

    Apex Steel Pipe - Buys and sells Steel Pipe.
    Top