Hello, this week I had to reimplement my picking system for the GUI library I'm working on, and I will explain why later in the post, I would like to receive some feedback about what I'm doing to see if there's better ways to implement the GUI.

My GUI system follows the composite pattern, elements can be added to elements, and the transformations applied to the parent element will be applied to the child elements, this way the rendering would be made like this:

->parent-element translates to his position

->parent-element renders

->child-element translates to his position, in addition to the parent's translation

->child-element renders

->child-element untranslates

->parent-element untranslates

With this pattern I can move my parent without needing to set anything to the child elements, I think this is pretty good, since I can create independent infrastructure elements without the need of them knowing about each other if they are added.

Now comes the septical part, in my last GUI version I was using the opengl picking system, the problem was when I wanted to add and element to a panel, and the element was widther than the panel, like this:

I know it's hard to understand, since this is just for debugging, but the yellow square is a panel, and the red one is a button, the button is widther than the panel, so it gets clipped in the right side, you can notice that on the right the red square doesn't have the black contour line.

With opengl picking this was a problem, since even if the button was clipped a hit was generated and I could click it outside the panel, that behavior wasn't desired, so I implemented a color picking system for the GUI, until now it's working flawless, though, creating a new GUI element needs some more code

Here is the interface of the object that makes the color picking

class PGIIColorPicker{
public:
    virtual bool testComponent(PGIComponent* component, PGIColor3ub color)=0;
    virtual int getPickCount()=0;
    virtual int getCurrentIndex()=0;
    virtual bool next()=0;
    virtual PGIColor3f current()=0;
    virtual void resetIndex()=0;
    virtual void clear()=0;
    virtual void setPickCoordinates(int x, int y)=0;
};

Here is the interface for my GUI elements

class dllexport PGIComponent {
public:
	
    virtual void draw()=0;
    virtual void draw(PGIColor3ub color)=0;
    virtual void pickElement(PGIIColorPicker* picker)=0;
    virtual void activate(GLuint* idx) =0;
    virtual void drag(GLuint* idx, float draggedX, float draggedY) = 0;
    virtual float getWidth()=0;
    virtual float getHeight()=0;
    virtual float getXPosition()=0;
    virtual float getYPosition()=0;
    virtual void setCoordinates(float topLeftX, float topLeftY, float width, float height)=0;
    virtual void setState(State state)=0;
    virtual void assignParent(PGIComponent* parent)=0;
    virtual PGIComponent* getParent()=0;
    virtual int getChildCount()=0;
    virtual PGIComponent* getChild(int idx)=0;
};

Like this my GUI manager would iterate through all the GUI root elements, calling the picker's testComponent function, this function basically calls the component's draw function with the desired color, and makes some setups too.

If an element is hit the color picker instance stores the element index based on its color, and the manager calls PGIComponent's pickElement function passing the picker, and all this process repeats itself inside the parent component (in this case the panel) and there are no problems with clipping, since the process is based on the colors, and the parents transformations can still be applied to the child elements.

This design decision seems a bit weird, but I couldn't find any better ideas, since with this i can emulate the opengl picking mechanism, without the need of passing through all the elements in the chain, just those that are really picked, still looks flexible, but I would like to hear some feedback about it, since I'm not too sure.