Layered UI architecture

I have all my UI nodes in a tree, I then walk the tree and add the visible nodes to there respective draw queues, as I'm adding nodes to queues I also check if the mouse is over the current node and then add that node to the mouse courser\tooltip layer.

I have a queue for each blend type, a queue for the mouse layer and then a queue for each font type.

The ui tree node walking happens in the update method, where all the click and change events happen.

Each node also has a depth value for draw order within the queue, I have the back layer set as 1.0 and the front as 0.0 then if I draw a window with other controls on it as children I have there depth set as parent.depth - 0.01 and the windows depth set to some value based on where i want it to be.

In the image the window has a depth of 0.85 and all of the controls on in the window have a depth of 0.84, the health bar container and the item slots have a depth of 0.95 while the health bars have a depth of 0.94.

The tooltip in the left corner has a depth of 1 for the back ground a depth of 0.99 for the text.

The tooltip can have a depth of 1 because its layer is drawn after everything else so it will be the front most anyway.

I have build basic GUI, its almost the same as the one in picture , my main class is GUIManager witch own everything and deals with drawing , keyboard , mouse events .

class GUIManager { public: GUIManager(); ~GUIManager(); // Add Methods std::shared_ptr<GUITextInput> AddTextInput(std::string name, int x, int y, int width, int height,int zindex=0, std::wstring fontfamily = L"Minion Pro"); std::shared_ptr<GUIButton> AddButton(std::string name, std::string title, std::string path, int x, int y, std::string value = "", int zindex=0 ,std::wstring font = L"Minion Pro", float fontsize = 15, bool textbold = true); std::shared_ptr<GUIPanel> AddPanel(std::string name, std::string path, int x, int y, int zindex = 0); std::shared_ptr<GUITextArea> AddTextArea(std::string name, int x, int y, int width, int height, std::string value = "", int zindex = 0, std::wstring fontfamily = L"Minion Pro", float fontsize = 14, bool bold = true); std::shared_ptr<GUITextBox> AddTextBox(std::string name, std::string text, int x, int y, int width, int height, int zindex = 0, std::wstring fontfamily = L"Minion Pro", float fontsize= 14, bool bold = true); std::shared_ptr<GUICheckBox> AddCheckBox(std::string name, std::string value, std::string path, int x, int y, int width = 0, int height = 0, int zindex = 0); std::shared_ptr<GUIList> AddList(std::string name, std::string topic, std::string dvalue, int x, int y, int width, int height, int zindex=0, std::wstring fontfamily = L"Minion Pro", bool bold=true); //Handling methods void Draw(Graphics& gfx); void Update(Mouse& mouse,Keyboard& kbd); void SortByZIndex(); void ClearGUI(); //Getters std::shared_ptr<GUIElement> GetElement(std::string name); private: void MouseHandler(Mouse& mouse); void KeyboardHandler(Keyboard& kbd); private: std::vector<std::shared_ptr<GUIElement>> Elements; }; 

all my elements are stored inside std::vector<std::shared_ptr<GUIElement>> Elements; GUIElement class is parent class of all element each element have child class who overrides GUIElement some of methods depends on needs. Also GUIElement , have some futures like border , label , and ect . i can enable that for each element is part of GUIElement .GUIManager have have funtions to add element to element vector and return pointer to it so you wont need to cast them later , there is also Funtion GetElement(std::strin elementname); but this function returns GUIElements witch means only parent class funtions will by available unless they are overrided by child class , so in that case it will be called child class functions instead of parent