Best Practice: Design Pattern for 2D Navigation on a HUD Screen

Question

If you have a GUI application that fully works on a 2D drawing, what should be the best practice for handling what to draw and where to touch?

An example of a better understanding:
I have a game with a map. On this map I can build houses and more.
I also have a dashboard that can be expanded. On the advanced bar, I draw some information about the game, and also offers an interface for changing different values. If a touch occurs, I have to check if the information panel is expanded or not to determine if I want to change something on the map or something on the panel.

This is done using a state template, but I doubt it is correct, because I think it can be a little complicated due to possible “sub-states”.

So basically the question is: is the state template (from GoF) the best practice for handling a clean GUI?

Answer 1

As this usually works, the user interface is a tree of Control objects. Each control has a bounding box and potentially several child controls that float above it. When a click occurs, the tree goes from top to bottom (which means children in front of parents and siblings are fine). For each control, you see if a point crosses its bounding box. If so, give the control the ability to handle the click (i.e., some OnClick virtual method). If so, stop processing, this click will be executed. Otherwise, keep going until you reach the control that processes it.