Programming GUI elements

Programming GUI elements: Rectangles with states
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

The most common GUI widget is the button. Click it to trigger it, except it's not quite that simple. All too often I've seen this done sloppily, where the button triggers on mouse-down, or mouse-up. Sometimes I've seen both of these methods being used inconsistently within the same application. The in-between phase (after the mouse-down and before the mouse-up) is often overlooked as unimportant, but consideration here will make a GUI much more pleasant to use, and the controls will feel much more natural to interact with. Buttons will actually feel like buttons, not touch sensitive panels. Here's how to do it...

GUI Buttons should have a minimum of 4 states. I'll refer to GUI buttons as Controls from now on to avoid confusion with mouse buttons:

(0) Normal -- The control is not being interacted with.
(1) Hover -- When the mouse glides over the control, it may glow or otherwise indicate it can be clicked. A tooltip may be shown as well. It has entered the Hover state.
(3) HoverBound -- When we mouse-down on a control, the mouse becomes bound to it, such that the mouse cannot affect any other control until the mouse is released. In this state a control is often drawn 'depressed' (and often with hover indicated too). To TRIGGER the control, we must mouse-up while it is in this state.
(2) Bound -- The mouse may be moved away from a HoverBound control, making it simply Bound. If the mouse is moved back, it would return to being HoverBound. In this state the control can be drawn 'depressed' to make it clear which control is bound, although some GUI systems prefer not to. To CANCEL the interaction, we can release the mouse while the control is in this Bound state, and it should return to Normal.

Some GUI elements do not use all states. For example, icons are dragged while HoverBound, so you cannot move the mouse away, so they do not make use of a Bound state. Another example are sliders, which contrastingly may not have a HoverBound state, only a Bound state. This means they can be triggered even when the mouse has moved away from the bounding rect of the control.

These four states can be represented with two bits in a bitmask.
bit-0 = Hover
bit-1 = Bound
Other bits may be used to indicate...
bit-2 = Disabled. So that the control appears greyed out and unavailable, disallowing both Hover and Bound.
bit-3 = Locked. So that a control does not trigger, even though it may still allow Hover and Bound.
bit-4 = TAB-Focused. TAB cycles through all controls, and the TAB-Focused control may be triggered with the Enter key too. A control may also become TAB-Focused when it becomes HoverBound.