Background:
A picture is worth a thousand words:
Well, but now that thousand words... What you can see on the above image is the time line control I'm working on. There is a line graph with some values shown for a certain time range, a few time markers, and the most important part for my question - the blue rectangle, which is the time range selector used for different purposes (depending how the application implements it).
It is a desktop control used to be controlled mostly by the mouse (an ordinary mouse, I'm not going to support touchscreen, gestures or something). It can be controlled by the keyboard (and a few actions already are), but for my problem I don't find the keyboard a good choice (tell me if you feel it different :)
Controlling the control:
1. Left click drag - move the time range
If you are not hovering the range selector's left or right edge (see point 2), then you can move the time range by dragging with the left button down. This dragging moves also the selector (that blue rectangle). I believe the effect itself might be self-explained by the used cursor shown in this image:
2. Left click drag - resize the selector's range
If you hover the time range selector's (the blue rectangle) left or right edge, the horizontal split cursor is displayed (since I don't like resizing cursor), and the control is ready to start resizing the selector range by dragging. This selection can be resized behind the client rectangle of the control so the selector may cover the whole visible area of the control:
3. Right click drag - immediate selector's range selection
Whenever you are over the time line, you can press the right mouse button and drag to directly select a range of the selector (that blue rectangle). The previous selection is cleared and you are starting a new one. I do not have designed a cursor for this selection yet, so let's pretend this right click drag selection is indicated by the shown drag cursor:
4. Others
Except the above, there is a mouse wheel handler to zoom in and out and a few keyboard shortcuts, but nothing worth to mention. Just to admit, I'm free to implement any keyboard shortcut or standard mouse action (not a gesture though).
Problem:
I would like (and I feel that I should) implement clearing of that selector (that blue rectangle) in some way. With the right mouse drag you can select a range, you can refine it by resizing, but how to clear it when you need ? There are few things I've considered:
- the selector may, and many times will, cover the whole control's area
- I cannot use left mouse click since it is fully utilized
- I would like to avoid using keyboard shortcut or some external button for this clearing
- right click to an empty space (a space without the selector) might not always be possible since the selector can fully cover the client rectangle of the control
as a good candidate looks to me just the right click; the problem is that I would have to implement a selection mouse drag threshold (to prevent triggering a new selection described in point 3)
- on the other hand, I would like to avoid using a selection mouse drag threshold because I wanted to keep this selector precise - even for small selections (from 1 pixel in width) and with threshold it would be difficult to select e.g. 1 pixel in width
Question:
Assuming that I would like to keep points 1-3 as they are (but it's not that strict requirement, if you come with some user friendly controlling concept), how would you implement clearing of that selector ?
Or, in general words, how would you clear selection (created by mouse) that can fully cover the control's area ?
