UML - Showing dependency in concurrent state diagrams

Question

I'm modeling a user interface in which there is a 3 by 3 grid. Each square in the grid is a state [edit:] except for the (left, top) and (middle, top) squares, which together are a single state [/edit], and the initial state is the center (where the mouse cursor "starts"). When the mouse cursor passes over a boundary into a new state, that state's events are triggered.

I'm considering modeling the axes individually, so there will be an X state and a Y state; however, how can I map an X state and a Y state back into one of the 9 square states of the grid (in the state diagram, that is)? In other words, how can I show that the actual, final state depends on (is a composition of) both the X state and the Y state? Is there a better way for me to do this?

Please advise.

___________________
|           |     |
|     1     |  2  |
|___________|_____|
|     |     |     |
|  3  |  4  |  5  |
|_____|_____|_____|
|     |     |     |
|  6  |  7  |  8  |
|_____|_____|_____|

Answer 1

Sounds like your actual state isn't X or Y but a tuple {X,Y}. I suggest you to create your state diagram based on such tuples instead of X and Y. Each state can have an inner division into X and Y. If needed, these can be states of an internal state diagram corresponding to the tuple.