Cursor: Change cursor to "hand" when annotations/playhead can be moved

[dagraf]

At the moment the cursor changes from an arrow to a cross with arrow endings when hovering over the playhead or over a selected annotation.

1. Change should be to a "hand" and not a cross.
2. Cursor should also change when hovering over a not active annotation (as it was the case with the old timeline).

[luniki]

I am currently researching this issue. This seems to be a problem of a library used by the timeline component. The cursor should fallback to the usual shape after the drag stopped: See https://github.com/visjs/vis-timeline/blob/a86e70f00a02a3f86ba0146ad0c4a12cee998df6/lib/timeline/Range.js#L587

If I setup a breakpoint in this function, the debugger never fires. The underlying lib "hammer.js" should emit a "panend" event but doesn't. There are several issues mentioning this:

https://github.com/hammerjs/hammer.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+panend

I will discuss this with @JulianKniephoff

[luniki]

There seems to be another problem: The vis-timeline registers two sets of panning event handlers: one handler for the timeline and one for the item/annotation. When the user starts a pan both panstart handlers are called (resulting in "cursor: move"). When the user stops panning only the panend handler of the item is called. As soon as the user pans the timeline itself the cursor is correctly reset.

[luniki]

Updating the vis-timeline to the latest version automatically solves this issue. It should be closed as soon as #345 is merged into the master branch.

[dagraf]

Does not work on SWITCHcast-Staging. Not yet merged?

[JulianKniephoff]

What @luniki actually fixed with the update, I think, was a bug where the cursor did not change back to normal after some combination of selecting and moving annotations around.

I should be able to change the cross to a hand easily, but to continue the recent theme: I don't think that that's such a good idea. The arrow-cross represents the action better, IMO, especially in contrast to the other action you can do when you hover over the ends of an annotation, namely resizing, which is also represented by arrows pointing a certain way.

Of course hand for moving and arrows for resizing is still fine, but it is a bit more tricky to implement correctly, because CSS exposes two versions of the hand icon (grab and grabbing), so you would need to change it once the user actually starts dragging. This should be possible with the timeline library, but it's a bit more of a hack than just changing a value in a CSS file.

I would argue hard against 2. though, since non-selected annotations can't be resized or moved, so the cursor should not suggest that they can. If that was the case before, that's a bug in my opinion. We could think about changing the cursor when it hovers over an annotation to suggest that it can be selected. I don't know what would be a good representation of that, though, yet.

Thoughs?

[dagraf]

I propose to differentiate between hovering over selected and non-selected annotations:

• Non-selected: Normal arrow changes to hand (alternative: the box of the annotation gets slighlty darker) to indicate that this annotation can get selected.
• Selected: Normal arrow changes to cross to indicate that this annotation can get moved.

[JulianKniephoff]

Ah, yes, I think that's reasonable. :smile:

[dagraf]

When hovering over a annotation in the track: Please show the same hand as when hovering over an annotation in the list. Which means: Always use the hand with the forefinger pointing out.

[dagraf]

Looks and works fine. Thx!